Want to use the Divi Builder plugin to build your website layouts?
Divi is one of the most popular page builder plugins that makes it easy for you to create and customize beautiful layouts for your websites. In this article, we’ll tell you exactly how to use the Divi Builder to create your layouts.
But before that, let’s have a quick look at what the Divi Builder plugin is.
What Is Divi Builder?
The Divi Builder plugin is a WordPress page builder that lets you create, customize, and edit your website layouts without writing a single line of code. One of the advantages of using this page builder is that it lets you create fully customized designs that are totally unique.
Plus, you can preview the changes you make while you’re working on them. This means that unlike working with the traditional WordPress text editor, using Divi doesn’t involve constantly switching tabs to check your progress. It’s a WYSIWYG (what you see is what you get) editor in the true sense.
Divi Builder works wonderfully with the Divi theme, but even if you don’t
use them together, it works well with any other WordPress theme of your choice.
It offers great flexibility in terms of inline text and responsive editing. You also get to use 40 website elements, 800+ pre-built designs, 100+ full website packs, various shape dividers, and a lot more. Plus, you can even add your own code if you want advanced styling options.
To learn more about Divi, read our detailed review here.
In the following steps, we’ll show you how to use Divi to create your designs.
Step 1: Getting Started With Divi Builder
To get started with Divi Builder, you first need to install and activate the plugin on your website. If you don’t know how to do that, read this article on how to install and activate a plugin.
Once the plugin is installed and activated, you can start using it to build your layouts. Let’s create a new page with Divi.
Step 2: Building Your First Page With Divi Builder
To build your first page with Divi, go to your WordPress dashboard and click on Pages » Add New. A new page will now appear on your screen with a Use the Divi Builder button. Click on this button:
Then click on the Use Divi Builder button:
This will take you to a new screen where you’ll have 3 options. If you want to create your design from scratch without using any pre-built layouts, select the 1st option. If you want to use a pre-built layout, select the 2nd option. By selecting the 2nd option, you can get started right away because everything is already built for you.
The 3rd option lets you reuse an existing design.
You can select whichever you think is the best option for you.
Step 3: Importing a Pre-Built Layout/Demo Site
If you don’t want to build your website from scratch, you can select a pre-made layout. For that, just select the Choose a Premade Layout option. This will display the library of layouts that are pre-built for you:
Depending on your website niche, you might want to look for layouts in a specific category. To do so, you can select a category on your left or use the search field to look for a category. Divi will display all the layouts that match your requirements.
You can then select the layout you like. This will show you a preview of the layout with 2 different options.
- View live demo
- Use this layout
Select the Use this layout option. This will ask you to authenticate the plugin. Use your username and API to authenticate it:
After that, you can start customizing your layout. However, for the sake of this tutorial, we’ll select the 1st option, Start Building, which will allow us to build everything from scratch.
Step 4: Adding Your Rows and Modules
Once you select the 1st option, you will be taken to a new page where you can select the number of rows you want to add.
You’ll see various options here. Depending on your needs, select the rows you want to add to your page. Let’s select the three-row option.
You will now see a popup displaying all the modules that can be added. Select the module you want by clicking on it. It can be an audio clip, a call-to-action, buttons, contact forms, and more.
You can use the search box to find a module if you have any specific options in mind.
Here we have added text, image, and button modules in three different rows. Now our page looks like this:
Here’s a quick recap of how we did that:
To add more rows, you can use the ‘+’ icon below your current row.
Step 5: Customizing Rows and Modules
Now that the rows and modules are added, it’s time for you to customize them. First, we’ll work on the text module.
To edit the text, just double click on the text module and click on the settings icon. You’ll see a small popup window appear with different customization options.
You can use them to work on how you want your text to appear. You’ll have 3 tabs here:
In the Content tab, you can work on the text, add links to your text, change the background, and more. In the Design tab, you can work on the way your module appears.
Here you can work on changing the headings, add spacing, borders, animations, and more.
If you need more setting options, you can use the Advanced tab as well.
For the images, select the module by clicking on it. Now click on the Setting icon. You’ll see a new window popup on your screen. Click on the image space and upload an image from your computer. You can also use one from your Media Library.
Once the image is added, you can add a link to the image by scrolling down. You’ll see other options too, like opening the image link in a new tab, open the image link in a lightbox, among others.
You can also add a background color to your image from the link that’s right next to it.
For design options click on the Design tab. Here you have options for adding animations, spacing, filters, and more. The Advanced tab lets you add your own CSS ID and Classes, as well as custom CSS. This option is for advanced users who want to add their own code.
But if you’re not a coder, you can totally skip this tab.
Don’t forget to hit the green checkmark to save your settings.
Customizing buttons works in the exact same way as adding text and images. Just select the button module by clicking on it. Then start customizing it by using the options that appear in the popup window on your screen.
Then hit the green checkmark to save your settings. You can do this for any module that you want to add and customize.
Step 6: Page Settings
Now that you know how to add and customize your rows and modules, let’s look at how to work on your page settings. To change the page settings, you need to click on the 3 purple dots at the bottom of your page.
This will expand the settings bar with several options. Click on the gear (setting) icon:
You’ll see a settings page popup with 3 tabs:
In the Content tab, you can work on the page title, add a featured image, add a background to your page and also do a split test to see how well your page is performing:
To add a featured image, click on the ‘+’ sign and add an image from your media library or upload a new one from your computer.
Next is the Design tab. Here you can work on the color scheme, the spacing of your page, and the color of your text. Just click on the option you want to work on and make the changes:
Finally, you have the Advanced tab. In this tab, you can add your custom CSS, and enable the static CSS file generation option. You can also choose how you want your page to appear for your users.
Once the changes are made, click on the green checkmark below to save your changes. You can also undo your changes by using the purple button and redo your changes using the blue button next to the green checkmark.
Step 7: Saving Your Own Layout for the Future
Once you’ve created your own layout, you can save them for future use. This will be saved in the Divi library. The next time you want to use this layout, you can select it and add your text right away.
To save your layout, hover over your page and click on the library icon within the page settings bar. A popup will appear where you can add a name to your layout. You also have the option to add a category to it:
Then click on the Save to Library option. Your layout will now be saved for future use. Once an item has been added to the library, it will appear in the Add From Library tab when adding new Divi layouts, sections, rows, and modules.
You can also save a particular module by following the same process. Just make sure you hover over the element to find the save to library button.
Step 8: Checking Divi Layout Responsiveness
Once you create your layouts, Divi lets you check how it would appear on different screen sizes. To check the responsiveness of your layout, click on the screen icons on the lower left side of your screen:
The 1st icon shows you a wireframe view of your layout. The magnifying glass icon next to it lets you check how your layout would appear if a user wants to have a zoom-in view of it.
The next icon offers the desktop view of your layout, followed by a tablet and a mobile screen view. You can click on each of these icons to see if your layout is responsive enough.
Step 9: Publishing Your Divi Layout
Once everything is ready, and you’re sure you want to publish your page with the layout you’ve created, click on the Publish button on the bottom right corner of your screen:
Your page will be live as soon as you hit the Publish button.
That’s how simple it is to use the Divi Builder to create your layouts.
We hope you like this article. If you’re still not sure whether you should use Divi or not, you might be looking at other page builders for your WordPress site.
Check out this review of the Beaver Builder plugin which is another popular page builder plugin.