Before you get too far into building pages and posts, you really want to do a walk through on these two menus. Choose your fonts, set up how you want your navigation to work, add your email provider and list to the Email Opt-in – do it all up front.
Even if you go back and tweak it, once you’ve customized a menu or a button or blurb, your changes will apply across the site.
The other cool thing are the controls on the bottom. They let you look at the site sized for different devices – desktop, tablet and smartphone. You can quickly see places where the font is too big for the device or you need more padding. The same controls are in the Visual Builder (more details to come further below.)
Multiple Themes in One
One other really cool option in Divi, especially if you hate starting from a blank page is the layouts that come with the theme. Once you choose the Divi builder option on your page, there are two buttons that will interest you: Pre-Made Layouts and Load Layouts.
The Pre-Made Layouts are just general page layouts. You can pick one and see what it looks like in the browsers. If you don’t like it, just click Clear Layout and try another one.
Load Layouts is where you’ll find all the niche mini-themes that are included with Divi. There are templates for churches, doctors, real estate agents, photographers, restaurants, politicians – you name it, it’s in there.
Click the one you want, and it loads – with all the images. Now honestly, you should swap the images out for new pictures or risk looking exactly the same as anyone else who knows how to click the Load Layouts button.
But all the sections, rows, columns, modules and most importantly all the settings are there – done. Edit at will. Blows you away how much time you can save, especially when you’re first starting out.
Divi’s Visual Builder
The Visual Builder is the crown jewel of Divi – no question about it. As we described earlier, when you build a page with the backend Divi builder, you’re looking at sections, rows and modules. You work in the modules, save it and preview it and tweak it.
(A backend tip – you can give Divi Modules a name – so instead of 10 modules called Text, change it to something that tells you what text it is: staff, refund, hours, etc. Otherwise as you build your page, its’ easy to get confused about what module is holding what text.)
But when you use the Visual Builder, you make your edits right in the browser. Change the text, swap out pictures. You can change the spacing around sections or rows simply by dragging them. It’s wild.
Want to try it? You can – here’s demo where you can play around with Divi’s Visual Builder.
If you’re on a computer, there’s is a large purple button with three dots in the middle of the screen. Click it and you’ll see a Save button on the right and view controls by device on the left.
Remember that blue are sections, green are rows. Move your cursor around the boundaries will pop up as you hover. There’s a settings button for each, click and it and look at what you can do for each. You can make changes in the Settings tab and save them or make them right in the builder.
This demo will let you try everything – clone, delete, change the text, add a row, insert another module. It’s almost too much how much you can do with Divi – without knowing a line of code or CSS.
The device controls in the Visual Builder are total timesavers. Designing for multiple screen sizes, browsers and operating systems can be a pain in the…body part of your choice. Now you can see what everything looks like – without having to own every device under the sun.
If you’re just learning – it’s really helpful to understand how responsive website manage content. On a computer, “We’ve Got You Covered” is two rows with four columns. On a tablet, it’s four rows, two columns per and on the phone – its just one column and eight rows.