Divi Builder is one of the best visual page builders which allow user to drag and drop elements for webpage. In this tutorial, we will go through every feature of Divi Builder and have a demo to create a web page by using this powerful builder. Don’t forget to checkout the live demo at the end of this post to practice by yourself.
The Divi Builder will come in two forms: “Back-end Builder” and the front-end “Visual Builder.” Both interfaces enable you to build a similar types of websites with the same content elements and design settings. The only difference is the user interface. The Back-end Builder lives within the WordPress Dashboard and it’s easy to access the builder along challenging other standard WordPress configurations. It sits inside the WordPress UI and replaces the typical WordPress post editor. It’s ideal for making quick changes when you are inside the dashboard, but it’s also limited by the dashboard and it is rendered as a block-based representation of your website. This tutorial shall be focusing only on the visual builder.
The new Visual Builder, on the other hand, gives you to build your webpages on the front-end of your website! It’s an incredible experience and permits considerably faster design. When you add modify or content design settings inside the visual builder, your changes instantly appear. You can click onto the page and start typing just. It’s easy to highlight text message and adapt its font and style. You can include new content, build your page watching everything happen before your eyes.
How to enable Divi Builder
When you logged directly into your WordPress dashboard, you can navigate to any page on the front-end of your website and click on the “Enable Visual Builder” button in the WordPress admin bar to release the visual builder.
If you’re editing your web page on the back-end, you can change to the visual contractor by clicking the “Enable Visual Builder” button that sits near the top of the back-end Divi Builder user interface (notice, you must first allow the Divi Builder prior to the visual constructor button can look).
Divi Builder Blocks
Divi builder comes with 3 main blocks: Sections, Rows and Modules. Using these together allows you to make a countless selection of web page layouts. Sections will be the largest blocks, plus they house sets of rows. Rows sit down inside of areas and are accustomed to house modules. Modules are within rows. This is actually the structure of each Divi website. Elegant Themes also released new Divi feature update for Column options to improve user experiences on this builder.
The most significant and basic blocks found in designing layouts with Divi are sections. They are used to produce large sets of content, and they’re the very first thing you increase your page. You will find three types of sections: Regular, Full and Specialty Width. Regular sections are made of rows of columns while Full Width Sections are made of full width modules that increase the whole width of the display. Specialty areas allow for more complex sidebar layouts. If you would like to know more detailed about Section, you can check out this in depth Section guide from Elegant Themes.
Modules will be the content elements that define your website. Every component that Divi has can match any column width and they’re all fully reactive.
Rows sit inside of sections and you may place any true number of rows inside a section. There are various column types to choose from. Once you define a column framework for your row, you can place modules into a desired column then. There is absolutely no limit to the true number of modules you can place within a column. This is more detailed guide for Rows.
Let’s create a webpage by Divi builder!
1. Add first Section
Before you add anything to your page, you will need to include a section first. Areas can be added by clicking the blue (+) button. When you hover more than a section that is present on the page already, a blue (+) button can look below it. When clicked, a fresh section shall be added below the section you are hovered over.
If a brand is being started by you new web page, in that case your first section will automatically be added.
2. Add first Row
Once you’ve added your first section you can begin adding rows of columns inside of it. A section can house any true number of rows, and you may blend and match rows of differing column types to make a variety of designs.
To include a row, click the green (+) button within any bare section, or click on the green (+) button that appears when hovering over any current row to include a fresh row below it. Once you’ve clicked the green (+) button you’ll be greeted with a summary of column types. Choose your desired column and you are ready to add your first module then.
3. Add first Module
You can add modules inside of rows, and each row can house any true number of modules. Modules will be the content components of your page, and Divi includes over 40 varying elements which you can use to create with. You should use basic modules such as Text message, Buttons and Images, or even more advanced modules like Sliders, Profile Galleries and eCommerce Shops. We’ve individual tutorials for each single Divi module, so if you would like to find out more about the types of modules that Divi provides then make sure to return to the primary document web page and flick through the “Modules” section.
To include a component, click the gray (+) button that exists within any bare column or click on the grey (+) button that exists when hovering over a component on the page to add a fresh Component below it. Once you’ve clicked the button, you shall be greeted by a summary of modules. Choose your desired component and it’ll be in your web page and the settings panel for the module will appear. By using this configurations -panel, you can start configuring your component.
4. Customise blocks
Each section, module and row can be personalized in various ways. You can gain access to an element’s settings -panel by clicking the apparatus icon that is present when hovering over any element on the web page.
This will launch the settings panel for the specified element. We split each configurations panel into three tabs: Content, Design, and Advanced. Each tab is easy to access and adjust Divi’s large variety of settings. The Content tabs of course is where you can include content such as images, video, links, and admin brands. The Design tabs is where we’ve place all the built-in design settings for each component. Based on what you’re editing you can control a multitude of design configurations with a click; including: typography, spacing (padding/margin), button styles, and more. For an detailed look at the Design tab, check out our design settings tutorial. Finally, if you would like even more control you can mind to the Advanced tabs where you can apply custom CSS, change visibility predicated on device, and (depending which element you’re editing and enhancing) do even more fine tuning.
5. Access Page settings
To gain access to general page configurations, click the crimson dock icon in the bottom of your display. This will expand the settings bar and offer you with various options. You are able to start your page configurations by clicking the apparatus icon. Here you can change things like page background text and color. You’ll also find the Publish and Save buttons as well as responsive preview toggles.
6. Pre-made Layouts
A terrific way to jump-start your brand-new page is to begin things off with a pre-made layout. Divi boats with over 20 pre-made designs that cover a number of common page types, such as “About Us,” “Contact,” “Blog,” “Profile,” etc. You are able to weight these and then swap out the demonstration content on your own up. To find out more about using pre-made layouts, make sure to check out our in-depth pre-made designs tutorial.
7. Save your layouts to library
Furthermore to using the pre-made layouts that include Divi, you can save your valuable own creations to the Divi Library also. Whenever a design is preserved as a Divi Layout in the Divi Library, you can use it onto new webpages. The greater you build-up your library with your preferred designs, the faster you shall be able to create new websites. For an detailed look at the Divi Library, be sure to check on our dedicated Divi Library tutorial
To save an item to the collection, click the library icon that exists when hovering over any component and within the web page settings pub. Once something is in the collection, it will come in the “Add From Library” tabs when adding new Divi designs, sections, modules and rows.
If you have problems after updating the theme, you can check out the Divi Support Center to resolve issues.
If you would like to practice using Divi Builder, you should head to this live demo page to have more experiences on this builder. Make sure you are using the latest version of Divi WordPress Theme to optimise the performance. If not, you can check out the guide how to update Divi theme in WordPress.