Getting started with Engined

Installation

Engined gets installed just like any other theme.

First steps with Engined

Once the child theme is activated, you won´t see any Engined settings page in the WP Dashboard, everything is in the Customizer.

Open the WP Customizer and you will see that some new panels and sections have been added to the default Divi Customizer sections:

engined-divi-child-theme-panels

Note: you won´t see the Engined Custom Modules panel at the beginning, for the simple reason that you still won´t have any custom module to customize at this stage (more on this in a minute).

General Settings panel

Open the Engined General Settings panel and you´ll see it includes a number of sections:

engined-divi-child-theme-general_settings

Probably the first thing you may want to do is set your information and links for the footer bottom. If you´ve ever used the Divi Children plugin, you know that you fill that info right before creating your child theme. Since Engined has been already created, you need to enter it now. You can do that in the Footer Credits section.

At this point, you may also want to introduce your social media links for the Divi social icons. Open the Social Icons section and you´ll see that some more options than just the Divi defaults are available, like Linkedin, Youtube, Instagram, etc.

The Sitewide Fonts & Styles section lets you customize the default body font, paragraphs and h1-h6 headings.

From now on it all depends on what you want to customize first. Just open the available sections for the top and main header, main and bottom footers, sidebar and so on, and you´ll find interesting settings in all of them.

When customizing the Main Footer, you will find a setting to choose the columns layout for it. One of the available options is a 5 column footer.

engined-divi-child-theme-footer-layout

Divi does not come with five widget areas for the footer, which means that when you go to Widgets from your dashboard you´ll find that a 5th footer widget area has been added by Engined:

engined-divi-child-theme-5widget

This new widget area (Footer Area #5) is optional, you won´t need it unless you decide to use a 5 column footer layout.

Custom Modules

A custom module is a Divi module for which you have created a custom class or ID. There are currently 4 modules which can be separately costumized by Engined:

Slider
Full-Width Header
Call to Action
Sidebar

You can create your custom selectors in any page edit screen, at the right hand side of the PageBuilder and below Page Atributes (as you already know if you´re familiar with Divi Children):

engined-divi-child-theme-custom_codes

You can create as many custom modules as you want. For example, if you have two fullwidth headers you want to customize separately, click on Add a New Class on the Custom Full Width Header box and a new custom selector will be created (if it is your first one, it will be custom_fullwidth_header_1). Copy that custom selector and paste it on the CSS Class field of your fullwidth header Divi module. After you´ve saved your page changes, when you open the Customizer again you´ll find that a new section will have been created under the Engined Custom Modules panel.

If you repeat the same process for yet another fullwidth header, a new section for that second module will be created under the Customizer Engined Custom Modules panel.

If you´re familiar with Divi Children 2, you will find that Engined brings some news related to the custom selectors:

They can now be renamed, so you can give them significant names like “home_header” instead of the harder to remember “custom_fullwidth_header_1”, “custom_fullwidth_header_2”, etc.
They can also be deleted, in case you don´t want to use some of them anymore or you created them accidentaly.

To rename a class or ID, simply click on the edit symbol located at its right and a new, darker sub-box will appear underneath the selector:

engined-divi-child-theme-custom_codes_edit

Enter the desired name in the dark field and click on the button to save the change. You can also remove the custom selector from that same sub-box.

Live Custom CSS

This section contains a textarea field where you can type or paste any custom CSS you may want to add:

engined-divi-child-theme-live_custom_css

It is somehow similar to the well known ET epanel Custom CSS field, except for the following:

It will only affect your child theme, whereas the epanel CSS affects not only Divi but any child theme used with it.
Due to the way the CSS is sent to output, it may override anything that comes first. Since I made it to send its output in the last place, the CSS you paste over there can override any other CSS, whether it´s coming from the Divi code, the ET epanel Custom CSS or even from the Engined code itself. It is therefore ideal for last minute tweaks.
Since it is right in the Customizer, you´ll see your CSS rules working inmediately, as opposed to what you enter in the epanel Custom CSS.

Output Mode

This is one of the best features of Engined. If you think that having so many options in a theme can make your site slower, you´re right. And that was something that worried me a lot for some time. Until I devised this solution: The Output Mode option:

engined-divi-child-theme-output_mode

Once you´re done with the development of your site, open the Output Mode section, set the mode to Production and click on the check box to save all your current settings. Your site will run much faster because from that moment on (until you eventually set the output mode back to Development to costumize something else) the Engined code will stop querying the database in order to retrieve your settings, and all your customized saved CSS will be sent to output at once instead.

And now it´s time for you to stop reading and to play with Engined! I hope you really enjoy it.

Engined Download

Engined Demo