\r\n

Builder Layout Options

\r\n

Save To Library

\r\nAt any time you can save a layout that you have built to your Divi Library to be used at a later time. This option is great for using a layout on another page, section of a page, or even another website built with Divi. For more information about using the Divi Library, be sure to check out a detailed tutorial on the subject. You can also learn how to Import & Export your library from one website to another.\r\n

Load From Library

\r\nYou can also load a layout that you have saved in the past from your Divi Library at any time. Divi also ships with dozens of pre-made layouts that are added to your library when you install the theme. Loading one of these pre-made layouts is a great place to start when first building a website with Divi. When loading a layout you have the option to select from an array of pre-made Divi Layouts or any layouts that you have saved/imported. For reference, see Pre-made Layouts and Saving and Loading Custom Layouts.\r\n

Clear Layout

\r\nIf at anytime you feel the need to start from scratch, just click the Clear Layout button. This will delete everything you have built on the page and give you a clean slate. Below these three buttons is your Divi Builder Layout. These is where you will be adding Sections, Rows and Modules to your page in order to construct your layout. When you free enable the Divi Builder, all you will see is the empty section shown above.\r\n

\r\n

\r\n

Section Options

\r\nEvery time you add a section you will need to define its properties. By clicking the section menu icon at the top of the blue side panel you will be taken to the Section Settings. For more help, check out the detailed tutorial about Section Options to learn how each of these settings works and how to use them together in creative ways.\r\n

\r\n

\r\n\r\nBackground Image – If defined, this image will be used as the background for this Section. To remove a background image, simply delete the URL from the settings field. Section background images span the width of the browser so it is recommended that your background images are at least 1080px wide.\r\n\r\nTransparent Background Color – Enabling this option will remove the background color of this section, allowing the website background color or background image to show through.\r\n\r\nBackground Color – If you would simply like to use a solid color background for your section, use the color picker to define a background color.\r\n\r\nBackground Video MP4 – All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the MP4 video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.\r\n\r\nBackground Video WEBM – All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM versions here. Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results. Important Note: In order for the WEBM video format to work in all browsers, your server must have the correct MIME types designated. You can learn more about using .htaccess to define MIME types here. If you notice your videos are not playing in certain browsers, then this is likely the reason.\r\n\r\nBackground Video Width – In order for videos to be sized correctly, you must input the exact width (in pixels) of your video.\r\n\r\nBackground Video Height – In order for videos to be sized correctly, you must input the exact height (in pixels) of your video.\r\n\r\nShow Inner Shadow – Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images.\r\n\r\nUse Parallax Effect – Enabling this option will give your background images a fixed position as you scroll. Keep in mind that when this setting is enabled, your images will scale to the browser height. NOTE: if you enable the parallax effect, we recommend that your images are at least the size of a standard screen size since your images will take on the width or height of the browser window (i.e. 1280px by 768px)\r\n\r\nCustom Padding – Adjust padding to specific values, or leave blank to use the default padding.\r\n\r\nKeep Custom Padding on Mobile – Allow custom padding to be retained on mobile screens.\r\n\r\nCSS ID – Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.\r\n\r\nCSS Class – Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.\r\n

\r\n

\r\n

Adding and Defining a Row

\r\nAfter 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. Rows also have lots of options that you can use to customize their appearance and alter the structure of the layout. If you are interested in learning more about all of the great options that Rows have, be sure to follow a more in-depth tutorial.\r\n

\r\n

\r\n

Adding a Module

\r\nOnce you have selected a row type, you will be prompted to insert modules into that row. In the example below, a two column row is added.\r\n

\r\n

\r\n\r\nEvery time you want to insert a module, you will need click ‘Insert Module’ and select one from the Divi module list. Once you have selected a module you will be brought to that module’s specific options model. Each module has a different purpose and a different set of options. To learn more about each individual module, be sure to check out the detailed overviews of each in the Divi Modules section of their Documentation Page.\r\n

\r\n

\r\n

Expanding Your Layout

\r\nIn the example below, two columns have been filled with an image module and a text module.\r\n

\r\n

\r\n\r\nYou 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.\r\n

\r\n

\r\n

\r\n

Adding Full Width & Specialty Sections

\r\nBelow each section you have the option to “Add Standard Section/ Fullwidth Section / Specialty Section / Add From Library”. 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, full width section has been added, with a full width Slider to the design. Specialty Sections are unique in that each specialty section has a horizontal row that expands the height of the entire section. This allows you to create classic “sidebar” layouts, where a single sidebar sits adjacent to more complex column structures. In this example, I have added a specialty section at the bottom of my page. You can also load Sections that you have saved to your Library in the past by clicking the “Add From Library” link.\r\n

\r\n

\r\n

Modifying and Rearranging Your Layout

\r\nEditing 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. In the example below, you can see that moved the full width section to the top of the layout and moved the specialty section in between the existing sections.\r\n

\r\n

\r\n

Save and Publish!

\r\nOnce you have finished building your layout, be use to click the Update/Publish button in your WordPress Dashboard. You will love the results.\r\n

\r\n

\r\n

Switching Back to the Default Editor

\r\nIf you switch back to using the default page editor you will be warned that all of the content you built with the builder will be lost and your previous content made with the default editor will be restored. As a failsafe, WordPress automatically saves all of your previously published updates and you can also save your layout before reverting if you ever want to restore a layout. See Saving and Loading Layouts for more information.\r\n

\r\n