Using the drag and drop Page builder you can create beautiful layouts with ease and control over every part of your site.
The builder uses three main building blocks: Sections, Rows, and Modules. The basic hierarchy of these elements is as follows:
The most basic and largest building blocks used in designing layouts with Page Builder are Sections. These are used to create the top-level areas in your website. There are two types of sections: Regular, and Full Width. Regular Sections are made up of column rows and Full Width Sections are made up of full width modules. See more about rows and modules below.
Rows sit inside of Sections and you can place any number of rows in a section. There are many different Row Types to choose from. Once you define a Row Type, you can then place modules into the selected column structure. There is no limit to the number of modules you can place within a column.
Modules are the visual elements that make up your website. Every modules that Page Builder has can fit into any column width and they are all fully responsive.
Upon creating a new page, you will see the standard WordPress Pages window. When you are using Page Builder, you will see a [Use page Builder] button in red. Clicking this will enable the Page Builder and you will be presented with the Builder drag and drop screen.
Adding and Defining a Row
After saving your section settings you will need to insert a row and define the row type. By clicking ‘Insert Columns’ you will be able to choose from a selection of row types.
Adding a Module
Once you have selected a row type, you will be prompted to insert modules into that row. In the example below, we added a two column row.
Every Time you want to insert a module, you will need click ‘Insert Module’ and select one from the Page Builder module list. Once you have selected a module you will be brought to that modules specific options modal.
Expanding Your Layout
In the example below, we have filled the two columns with an image module and a text module.
You now have successfully defined a Section, with a Row, with Modules in a two column row type. You can access any of the elements’ options by clicking its menu icon or deleting it by clicking the X icon. To expand your layout you can either choose to add a section to the page, a row to an existing section, or a module to an existing column.
Adding Full Width Sections
Below each section you have the option to ‘Add Section/Add Fullwidth Section’. Full width sections are unique in that they do not have rows. Because of this, only full width modules will work inside of this type of section. Full width sections are visually defined by a purple side panel and can be placed anywhere in your layout. In the Example below, we have added a full with section, with a full width Slider to our design.
Modifying and Rearranging Your Layout
Editing your layout is very easy using the drag and drop builder features. If you want to move a section above or below another, simple drag and drop it in the desired location. Same goes for rows and modules. You can even move rows to different sections and modules to different columns. The only limitation to this is that you cannot drag Full Width Modules into regular sections and you cannot drag regular modules into Full Width Sections.
NOTE: You cannot modify an existing row’s column structure, but you can create another row with the desired columns and drag existing modules into your new row.
In the example below, you can see that moved our full width section to the top of our layout and added a regular section with a three column row in between our existing sections. We even added a divider module above our text for vertical alignment.
Save and Publish!
Once you have finished building your layout, be use to click the Update/Publish button in your Dashboard. You will love the results.