7 Great Things About Divi Builder Not Everyone Uses

Divi Builder from Elegant Themes has made amazing advances recently. In 2019 so many features were added that some people have just not had time to investigate them all, and 2020 looks like being just as busy!

We have used Divi from its early days and its growth has increased the flexibility of our websites. With more and more clients wanting to keep on top of designer costs and be more hands-on we decided to use The Divi Theme on all our WordPress websites. That’s because it provides the UI that clients can easily use to create their own content. However, there is so much in Divi today that I wonder if everyone is fully aware of what is now possible.

Certainly, the more tech-savvy and developers are probably aware but are all clients getting the full benefit of all the wonderful tools? Are you? With all the possibilities now available I’m not sure we are fully aware and it’s one of the reasons I started writing this post.

Just a note to help you – you can click on the images below and they will open enlarged in a pop-up for easier viewing.

Global Layouts

Global Layouts have been in Divi for a quite while now but not everybody uses them.  When an item is made “Global” within the library, it is mirrored across all of the instances that you have added across your site. Global Layouts make both content and style available every where you use the Global Layout. They can be applied to all Sections, Rows, Columns, Modules by saving the layouts to the Divi Library and selecting the option “Make this a global item” option while saving.

Whenever these created layouts are used in any pages or posts the design and the content will display the same on all. By using global layouts any changes you make to these layouts will be changed to all displayed instances of the layout. This applies to editing from within the Divi Library or in any page or post that the global layout exists.

This means that you can effect site-wide content and design changes form any page or post where the global layout exists. So for example you could change the button text in a global contact form that exists on the homepage and it would then be changed on every other page the global contact form exists. Brilliant could save you quite a bit of time. Global Layouts are distinguishable by having a green colour.

But what if you had a text module with say opening times in it and you want them to appear on multiple pages in different areas. Easy – 

• Save it as a global module to the Divi Library.
• Add it to every page you want it and where you want it
• Then if you need to change the times you just have to change it once and it will automatically change all the times on all the other pages.

Global Design Settings

These are intrinsically different in that they only affect the default style of the section, row, column or module. Now, whenever you add an element it will display according to the settings you have made the default. It just alters the style of the content.

You can make any setting have a default value and override the setting by adjusting the design settings on an individual element basis. So you might add three buttons to a page and they will all display the default setting. You could then restyle one individually and it wouldn’t change the others. However, another feature is you can then modify the default setting of the element. So if you liked the new style to the button you could set that design as default and all buttons would change.

This is very powerful but you just have to remember the effect it will have on your site.

The settings are accessed from the little globe icon to the side of the settings box. The box rotates to display a black coloured version of the default settings

Selective Syncing

Firstly this only applies to Global Layouts. Above we described how a global layout displays the same style and content wherever the global layout is used. But what if you only want some things to be the same not all. Well Selective Syncing allows you to change anything in a Global Layout in a particular use of that layout.

So if you had a global section with a background image with text on top you could deploy this on multiple pages and say change the text on one of pages or change the background image on one or more of them. Very nice if you plan how you use Global Layouts.

Global Settings are a quick and easy way to get your website looking consistent and creating and deploying content across the whole website. Elements that are syncing have a green icon. Those that are not syncing globally have a red icon.

You simply click the icon – make it red –  and make you edit want. The edit will appear on the module you are editing. Every other instance will display the global setting. In the image the Submit button has been changed to Try Today. All other instances of the button in this contact form used elsewhere will display the default text Submit

2 – Divi Theme Builder

I can hear those cogs in your brains spinning around! Thats all great but what if you could add global content to category pages, or products?

Enter probably the most powerful Divi tool there is – The Divi Theme Builder. The theme builder allows you to create templates and then assign them to anything you want. Yep, you can have a different design assigned to different post categories, products, post types, pages.

You can create a template for one set of products and another completely different design for another set of products. With Divi WooCoomerce modules you now have complete control of how products are displayed. Now your online store can look completely unique and not like any other online store around.

Divi on steroids! 

3 – Extend / Copy Design Settings

nGlobal layouts and setting can duplicate style and content across the website. However, there are on-page tools that making style changes fast and easy across the same page or post.

The Contextual menu gives you access to some great tools for building or editing a page very quickly. You can also use right click to access the menu too. By then selecting the Extend Styles option you will be able to extend all the styles of the module to any other similar module on the page or section or row.

If you access the extend module from the design settings then you can extend the particular style to not only a similar module bit to any type of module on the page or section or row. In effect you can style the box shadow in a blurb module. Then once you’re happy extend it to all blurb modules on the page. Similarly you can style a button and extend that too. 

With design style settings you could extend border styles to all or specific module types on a page or in a section or row.

To style or restyle a page the process can be quickly achieved by extending to the specific module you want on a page. Fast and efficient.

But what I really love and use all the time is copy-paste. You can while designing simply copy a style and paste it where you want.

Right Click will again reveal the copy and paste functions. Copy the background colour of a section and paste it to any module on the page you want. Copy the text style of a module and paste to where you want it. Divi is smart it knows what you have copied and will paste that value to the correct element for each module.

You don’t even need to right click either, instead you can use the cmd+option+c/v and ctrl+alt+c/v keyboard shortcuts to quickly spread styles across your page.

Copying is not restricted to individual style elements. You can also copy everything to do with say a button ( Option Group ) not just say the colour. Just right click by the Option Group name

You can also copy complete modules style and content. So if you have a module you have finished designing you can simply copy and paste to create a duplicate and then edit the text. So quick. Copy Paste is just great for building new pages quickly. 

The other this is you can copy anything from another page and paste it into another.Great when you have created a complicated design and want to use on another page.

One of the nice tools built in to the Visual Builder on the front end and the admin panel is the different views of the page. You can see a on-page Desktop, Tablet and Phone view of your page and a Wireframe block look of the page too. These views can be really helpful for various reasons and provide a different way of working and designing with Divi.