The perfect theme for bloggers and online-publications. How to Use Divi Builder to Build a Custom Site (Step by Step) Step 1: Getting Started With Divi Builder. You can load these up and then swap out the demo content for your own. Using The Divi WooCommerce Builder On Product Pages Enable the Divi Builder. Unlimited Users. These are used to create large groups of content, and they are the first thing you add to your page. You have adjusted their settings and begun building and customizing your design. A great way to jump-start your new page is to start things off with a pre-made layout. The most basic and largest building blocks used in designing layouts with Divi are sections. You can customize absolutely everything about any module using the advanced design settings. You can access an element’s settings panel by clicking the gear icon that exists when hovering over any element on the page. It sits inside the WordPress UI and replaces the standard WordPress post editor. For an in-depth look at the Divi Library, be sure to check our our dedicated Divi Library tutorial. Divi’s power lies in the Visual Builder, a drag and drop page builder that allows you to build just about any type of website by combining and arranging content elements. The Content tab of course is where you can add content such as images, video, links, and admin labels. Built to get you more shares and more followers. Unlimited Websites. Depending on what you’re editing you can control a wide variety of design settings with a click; including: typography, spacing (padding/margin), button styles, and more. Sections can be split into rows. You can use basic modules such as Text, Images and Buttons, or more advanced modules like Sliders, Portfolio Galleries and eCommerce Shops. Every module that Divi has can fit into any column width and they are all fully responsive. Divi ships with over 20 pre-made layouts that cover a variety of common page types, such as “About Us,” “Contact,” “Blog,” “Portfolio,” etc. Purple represents a full width section, blue is a standard section. For more information about using rows, head over to our in-depth rows tutorial. This tutorial will be focusing only on the visual builder. After you have added your first section you can start adding rows of columns inside of it. This new setting allows you to quickly change the design style and settings of any module across your entire website with just a few quick clicks. Getting Started With The Divi Builder. The three basic building blocks (Sections, Rows and Modules) are used to build your page. Preview 110+ Premade Websites & 880+ Premade Layouts. Try Out The Drag & Drop Page Builder for FREE! 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. Choose your desired column and then you are ready to add your first module. Before you can add anything to your page, you will first need to add a section. You will also find the Save and Publish buttons as well as responsive preview toggles. Modules are placed inside of rows. You have the basics down, but there is so much more to learn. The Divi Builder comes in two forms: The standard “Back-end Builder” and the front-end “Visual Builder.” Both interfaces allow you to build exactly the same types of websites with the same content elements and design settings. Elegant Themes has revamped their Global Defaults feature into a new feature called Presets. The Divi Library is where you can save custom modules and layouts for later use. For more information about using sections, head over to our in-depth sections tutorial. The ultimate email opt-in plugin for WordPress. Divi is best used in visual mode, allowing you to build your page on the front-end of your website. To split a row into columns use the … Sections are the builder’s largest building blocks, and can be used in various ways. Switch page builder and click into “Use the Divi Builder”. For an in-depth look at the Design tab, take a look at our design settings tutorial. Next click the “Install” button to install the divi-builder.zip folder … We offer a 30 Day Money Back Guarantee, so joining is Risk-Free! Unlimited Websites. The Design tab is where we’ve place all of the built-in design settings for each element. Using these in unison allows you to create a countless array of page layouts When you have your WooCommerce product information filled in such a description, featured image, price, and so forth, you can then click on the button to use the Divi Builder. Modules are the content elements of your page, and Divi comes with over 40 different elements that you can use to build with. There are many different column types to choose from. Harness the power of Divi with any WordPress theme. Harness the power of Divi with any WordPress theme. You will often find it in your Downloads folder, but it depends on your browser settings. All you have to do is visit this link, enter the relevant details relating to your Divi website and then you’ll receive an email which includes your child theme files. Each settings panel is broken up into three tabs: Content, Design, and Advanced. Quick Overview Of The Theme Builder Features and How to Use It. The sections are made up of rows, these are green. Once you define a column structure for your row, you can then place modules into a desired column. To use this module, just copy the shortcode from the WordPress plugin … How to enable the Divi Visual Builder: Log into WordPress Go to the page you want to edit Click on Enable Visual Builder in the top bar Text Making changes to text with the Divi […] The Divi Library. Green is standard row, orange is a speciality row. Multi-Select is amazing. Preview 110+ Premade Websites & 880+ Premade Layouts. Sections are the largest building blocks, and they house groups of rows. When clicked, a new section will be added below the section you are currently hovered over. Specialty sections allow for more advanced sidebar layouts.