Before I get straight into the Divi Page Builder, I’d encourage you to read the first part of this article. You can check it out by visiting the following title, How To Use The Divi Builder – A Beginners Guide Part 1!
How To Use The Divi Builder
The ‘Divi Page Builder‘ is such a great advancement in website page design. It’s brilliantly easy drag and drop modules allow you to customize web pages that you never thought possible. As a beginner in creating a website, you will not be familiar with HTML or CSS coding. Divi bypasses all that to help you create extremely professional looking webpages.
One thing to take note, is that the page builder is for pages only, not posts. There are websites out there that will give you coding to add to your ‘function.php’ file to active the page builder on posts. As a newbie, I’d stay clear of this. If you mess up this file you may have a hard time fixing your website. Advanced users may find this useful but make sure you run a backup first.
To begin using the page builder, add a new page and you will see a button titled ‘Use page Builder‘ like in the image below.
If you ever want to change it back to normal mode, a button will appear in the same position titled ‘Use Default Editor’. You cannot flick between the two however. If you’ve set up lots of modules under the Page Builder, they will be deleted if you change back to this default editor.
Divi Predefined Layouts
Divi comes with a number of predefined layout options including:
- 6 different types of Homepage
- 4 different page layouts
- 4 different portfolio layout options
- Various other layout types including Project/Blog/Shop/Maintenance/Coming Soon/Landing Page/About Me/Contact/Our Team/Sales/Case Study/Product Features
These layouts are a great way to learn from the beginning. If you load a homepage layout for instance, view a preview of the page and compare it to how the modules are set up. This will give you a great idea as to which modules show which features.
Create Your Own Divi Page Layout
Follow below if you’d like to create your own page layouts.
Once you’ve decided you’re using the Page Builder, you’ll see the following module appear to get you started.
The blue strip section relates to the full area of this new section. The 3 lines is your settings icon. For example, you can add a background color or image to this area. You can add a background video (although this will not show up on mobile devices, the background image will be shown in stead). You can choose for your image to have a parallax effect. This will make it remain static as you scroll. This is a cool feature and can make your website look quite professional.
The icon of two boxes below this, is to make an exact copy of the module including all sub modules inside it. A copy will be placed directly below this one.
There is a similar icon on the green strip where you can also make an exact copy. Obviously ‘X’ is delete.
Setting Up What’s In Your Module
Inside the Green strip module you will notice it says ‘Insert Columns‘. This is awesome as it allows for all types of media to be placed next to each other, which isn’t possible in a normal page editor. Have you ever tried placing 2 images next to each other in default mode? You need a plugin to do this or a special piece of code. Divi makes it so much easier. Here are the column options you be presented with.
Let’s take an example. If you want to present part of your website like the following, simply choose the 4 column option:
If you use the above example of 4 columns, you’ll be presented with the following:
Each column will prompt you to insert a module. This is where the fun really begins. The options are extensive. For the above I’ve used blurb as my module to insert. Here’s a list of the options:
The icons in the example are chosen from within the blurb module, there’s many icons to choose from.
As you can see, so many choices to make your pages as unique and professional as possible. It’s really up to your imagination as to how your site is presented, but if you do chose this Divi Theme, you’re giving yourself the best chance to excel in your web design.
As a beginner, the most common modules you will use are image and text. Don’t limit yourself though. As you experiment with the various modules you’ll find yourself becoming more confident with this theme. You can’t really make too many errors. If you do find that your preview is not what you expected, change the modules around until you come up with the correct combinations.
If you look back at the second image on this page, under the blue strip there is a + box with the text ‘Add Section/Add Fullwidth Section/Add Specialty Section.
‘Add Section‘ is exactly the same type of section as in image 2. It’s the more common type of section which allows for all the available modules.
‘Add Fullwidth Section’ uses the full width of your page and doesn’t allow for columns. It also has a limited amount of modules. These modules are shown below:
These would generally be used on your homepage.
The ‘Add Specialty Section’, as shown below, gives you predefined column sections, where a certain column or columns (in orange) is full length compared to the other modules.
The main idea behind this sort of design, is to use the orange full length modules to encompass your text. This is totally up to you however, there are no rules how you use these modules.
An Overview From The Guys At Elegant Themes
Thoughts and Conclusion
If you want to stand out from the crowd and use a theme that makes web design so easy, this is the one. I see so many new websites from beginners that all look similar because they all use the default WordPress themes. Unfortunately they look amateurish.
Beginners will love this theme as it is so easy to use, and it expands your knowledge by opening up the range of different module types.
Now this theme does come at a cost, but you can make the most of it.
You can join Elegant themes and have access to all their themes for a single cost of $69. They do require this as an annual fee but that is only so you can use their support. You can cancel your subscription and keep using the themes you’ve downloaded forever.
So if you want to go ahead and check it out, click here
If you’ve used Divi or have a question, please add a comment below.