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. When I work with clients who have limited budgets and/or time frames, this is where I turn for inspiration.
Working from an existing page template does not mean every site will look the same, but it certainly helps clients get a better idea for what they like and don’t like – so I recommend when you are working on your own site, you should load some of these templates and see if any pages, sections, modules, fonts, colors, etc speak to you.
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. It will blow 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, you can easily 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 great for people who don’t like staring at wireframes. With that in mind, I still find some issues within the visual builder when optimizing for multiple formats, so if you see a glitchy formatted area, head back to the wireframe editor to get your visuals working the way they ought to.
Want to try it? You can – here’s a 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 lengthy process. 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 websites manage content. On a computer, the area displaying “We’ve Got You Covered” in the example 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.