Visual Builder Wordpress

First steps with the Divi Builder

Exactly what is the Visual Builder? There are two versions of the Divi Builder: Backend Builder" and the frontend "Visual Builder. "Each interface allows you to create exactly the same kinds of Web sites with the same contents items and theme preferences. Backend Builder is located in the WordPress Dashboard and can be used together with all other default WordPress configurations.

Located in the WordPress user interface, it substitutes the default WordPress Mailditor. These tutorials focus only on the Visual Builder. On the other side the completely new Visual Builder allows you to create your pages on the frontend of your website! It is an incredible adventure and allows a much quicker designing.

Your changes appear immediately when you are adding contents or customizing theme preferences within Visual Builder. Now you can create your site, create new contents and see everything happening right in front of you. When you are signed in to your WordPress dashboard, you can browse to any page on the front end of your Web site and click the Visual Builder enabled icon in the WordPress administration toolbar to start the Visual Builder.

When you edit your page on the backend, you can go to the Visual Builder by pressing the Visual Builder enabled pushbutton located at the top of the Backend Divi Builder user surface (note that you must first activate the Divi Builder before the Visual Builder pushbutton appears). Divi's strength comes from Visual Builder, a drag-and-drop page generator that lets you create almost any kind of website by mixing and matching items.

There are three major components used by the client: Segments, lines and moduls. Segments are the biggest bricks, and they accommodate groups of series. Arrays are located within the segments and are used to accommodate a module. Panels are placed within the row. These are the structures of every Divi website. Divi's simplest and biggest components for layout design are Divi chapters.

They are used to build large groups of contents and they are the first thing you need to attach to your page. You have three kinds of sections: Periodic segments consist of lines of column while full-width segments consist of full-width blocks that extend the full width of the display.

Special areas enable extended side bar layout. More information on using paragraphs can be found in our detailed paragraphs section-tour. Lines are located within segments and you can place any number of lines within a segment. After you have defined a columns layout for your line, you can insert a module into a required columns.

The number of cartridges you can place within a single row is not limited. You can find more information on using lines in our detailed Line Usage Guide. These are the components that make up your website. The Divi has every modul fits into every width of columns and is fully reactive.

There are three main modules (sections, lines and modules) used to create your page. You can add a section by pressing the cyan (+) key. If you move the mouse over a section that already appears on the page, a black (+) icon will appear below it. Once you have added your first section, you can begin to add lines of column in it.

One section can hold any number of lines, and you can merge and match lines of different columns of different type to produce a wide range of layout. In order to insert a line, click on the yellow (+) icon inside an empty section or on the yellow (+) icon that will appear when you move the mouse over a line to insert a new line below it.

After clicking the red (+) icon you will be welcomed with a bar listing columns. Select the required columns and you can already start adding your first one. They can be added within lines, and each line can hold any number of them. Divi comes with over 40 different items that you can use to create your site.

They can use base moduls like text, images and buttons as well as additional moduls like sliders, portfolio galleries and eCommerce shops. So if you want to know more about the kinds of Divi offering you can go back to the home page of the documentation and search through the "Modules" section.

In order to insert a modul, click on the grey (+) icon present inside an empty row or on the grey (+) icon present when you mouse over a modul on the page to insert a new modul below it. After clicking the icon you will be welcomed by a roster of moduls.

Select the required modul and it will be added to your page and the setting window for the modul will appear. In this setting window you can start the configuration of your modules. Every section, every line and every modul can be adapted in different ways. Click on the sprocket symbol that is present when you hover your mouse over an item on the side to open the preferences window for that item.

It opens the preference window for the specified item. Every setting window is divided into three tabs: Contents, design and advanced. Every page is organized so that access to the wide range of Divi preferences is fast and simple. Of course, you can use the Contents page to include contents such as pictures, videos, hyperlinks, and management tags.

We have placed all integrated theme options for each item on the theme page. Dependent on what you edit, you can easily adjust a multitude of theme options with one click, including: type, distance (padding/edge), buttons and more. To take a detailed look at the Designs page, see our Designer Preferences tutorial.

In order to view the general page preferences, click the violet dot symbol at the bottom of the page. As a result, the setting panel is expanded and you get various different choices. To open your page preferences, click the sprocket symbol. It comes with over 20 ready-made page layout templates that include a wide range of popular page styles, including "About Us", "Contact Us", "Blog", "Portfolio", etc.

Upload them and then exchange the demonstration for your own. In order to store an object in the libraries, click on the symbol of the libraries that is present when you move the mouse over an object and in the side-adjustment toolbar. As soon as an Item is added to the Library, it appears on the Append from Library page when new Divi-Layouts, Section, Lines, and Module are added.

In the meantime you have added your first section, lines and module to your page. You' ve customized their preferences and started creating and modifying your theme. We have tens and tens of different exercises that covers every facet of Divi. When you' re done, you'll be Divi-Master!