If you already read “Where to start with Divi?” and “Concept and Structure of the Divi Builder” you probably want to get your hands dirty now. If you just started with Divi (A very powerful WordPress Theme from Elegant Themes) then this article should give you a quick tour of using the Divi Builder to build your first page. Grab a cup of coffee, pull up your sleeves and put on Outrun this! – by Arcade High.
Sumon the Divi Builder
If you want to follow this tutorial on your end you should have a basic understanding of how WordPress works, also have the latest Version of Divi up and running. So first things first: go to your WordPress backend and create a new page (If you don’t know how to do this: First Steps With WordPress). Created? Awesome, by now you should see the almighty button to start the trouble – “Use The Divi Builder”.
If done correctly you should see something like the following. Please note: Due to certain plugins you have active, your view might differ a bit. Hit save.
I won’t go into details on everything you see here right now. Remember: This should just give you an overview of the workflow of building something with the Divi Builder. If you look at the picture above you can see the blue section. It’s called “Section”. We won’t need it. You guessed right: by clicking the “x” it will be removed. If there is no other section left in the builder you can’t delete it. So click on “Fullwidth Section” below the blue section to create a Fullwidth-Section first, then delete the blue section (Standard Section).
Insert a Module
You just created a Fullwidth-Section (purple color). Now let’s fill it with content. Fullwidth content. In the Divi Builder, this works with so-called “Modules”. Modules are the building blocks, which make the Divi Builder so great. When clicking on “Insert Module(s)” inside a Fullwidth-Section you will be presented with a list of Fullwidth modules.
The Fullwidth Header module is great for creating a landing page. So just click on it once and it will be loaded automatically into the Divi Builder for you to use. Now – you placed a module but haven’t touched any settings of it yet, nor did you define any content so let’s do this next. Click on the hamburger icon on the left side of the module to open up the settings window.
Put in some text
Let’s keep it simple for now. In the settings pop up window you’ll see 3 tabs: Content, Design, Advanced. Stay on the “Content” tab to fill in some basic strings.
I hope you could follow along so far in this tutorial. This is it for the first part of “Build your first page with Divi” . Make sure to read on with Part 2 of this tutorial. In the next part, we will go into designing the things you just built.