{"id":814,"date":"2017-05-06T11:59:53","date_gmt":"2017-05-06T18:59:53","guid":{"rendered":"https:\/\/blocksylaunch.click\/documentation\/?p=814"},"modified":"2023-07-17T08:44:25","modified_gmt":"2023-07-17T15:44:25","slug":"visual-builder","status":"publish","type":"post","link":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/","title":{"rendered":"Getting Started With The Divi Builder"},"content":{"rendered":"<p><iframe loading=\"lazy\" class=\"youtube-player\" type=\"text\/html\"  title=\"Getting Started with the Divi Builder\" width=\"920\" height=\"518\" src=\"https:\/\/www.youtube.com\/embed\/T-Oe01_J62c?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<h2>What is the Divi Visual Builder?<\/h2>\n<p>Divi is a modern no-code visual drag-and-drop website builder for WordPress. With Divi, you can build stunning websites from the ground up without touching a single line of code (unless you want to!). Divi harnesses the power of complex web development and lets you design custom websites by using the Divi Visual Builder so you can see the changes you are making in real time.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/05\/visual-builder-examples-2.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><a href=\"https:\/\/www.elegantthemesdemo.com\/?et_fb=1&#038;disableUpdateCacheData=1\" target=\"_blank\" rel=\"noopener\" class=\"button primary-button inline-button\">Click here to view a demo<\/a><\/p>\n<h2>All Divi Builder Settings and Features Explained<\/h2>\n<p>Let&#8217;s explore all of the features, settings, and functionality available within the Divi Visual Builder. <\/p>\n<h3>How To Load The Visual Builder<\/h3>\n<p>Once you have Divi installed on your website, you\u2019ll be able to access the Visual Builder on every page of your website. To do so, navigate to any page and click &#8220;Enable Visual Builder&#8221; on the top admin bar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder.jpg\" alt=\"\" width=\"2200\" height=\"1382\" class=\"aligncenter size-full wp-image-17666\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder-300x188.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder-1024x643.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder-768x482.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder-1536x965.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder-2048x1287.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Creating a New Page and Enabling the Visual Builder<\/h3>\n<p>To start fresh on a blank page, navigate to your WordPress dashboard and click Page > Add New.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-1.jpg\" alt=\"\" width=\"2200\" height=\"1193\" class=\"aligncenter size-full wp-image-17669\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-1.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-1-300x163.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-1-1024x555.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-1-768x416.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-1-1536x833.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-1-2048x1111.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>Give your page a title, then click &#8220;Use Divi Builder&#8221;. This will re-load the page onto the front end of the website with the Divi Visual Builder enabled.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-2.jpg\" alt=\"\" width=\"2200\" height=\"1230\" class=\"aligncenter size-full wp-image-17670\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-2.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-2-300x168.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-2-1024x573.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-2-768x429.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-2-1536x859.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-2-2048x1145.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>As your page reloads, you\u2019ll notice three options that come up: Build From Scratch, Choose A Premade Layout, and Clone An Existing Page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-3.jpg\" alt=\"\" width=\"2200\" height=\"1150\" class=\"aligncenter size-full wp-image-17671\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-3.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-3-300x157.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-3-1024x535.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-3-768x401.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-3-1536x803.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-3-2048x1071.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Build From Scratch<\/h4>\n<p>This option loads the Divi Builder with a blank page design. Choose this option if you\u2019d like to start your page design from scratch.<\/p>\n<h4>Choose a Premade Layout<\/h4>\n<p>If you&#8217;d like to start your design with one of your saved layouts or a premade layout pack from Divi, choose this option. It will load the Divi Library where you can browse premade layout packs, your previously saved designs, and existing pages on your website.<\/p>\n<h4>Clone an Existing Page<\/h4>\n<p>You can also start your design by cloning an existing page on your website. Select this option if you&#8217;d like to load a page design from an existing page on your website as your starting point.<\/p>\n<p><em>Select, Build From Scratch.<\/em><\/p>\n<p>By default, a standard section is automatically added to the page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-4.jpg\" alt=\"\" width=\"2200\" height=\"1230\" class=\"aligncenter size-full wp-image-17673\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-4.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-4-300x168.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-4-1024x573.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-4-768x429.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-4-1536x859.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/add-new-page-4-2048x1145.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h2>Divi Visual Builder Basics<\/h2>\n<p>Let&#8217;s start with the basics. The building blocks of Divi. The main building blocks of Divi are <strong>sections<\/strong>, <strong>rows<\/strong>, <strong>columns<\/strong>, and <strong>modules<\/strong>. Sections contain rows, which contain columns, which contain modules.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/building-blocks.jpg\" alt=\"\" width=\"2200\" height=\"1210\" class=\"aligncenter size-full wp-image-17675\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/building-blocks.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/building-blocks-300x165.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/building-blocks-1024x563.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/building-blocks-768x422.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/building-blocks-1536x845.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/building-blocks-2048x1126.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Sections<\/h3>\n<p>In Divi, everything you build starts with a section. Sections are the biggest building block in the Divi builder. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas.  This content wrapper has various settings that can be used to do some really awesome things.<\/p>\n<p>There are three types of sections: <strong>Standard<\/strong>, <strong>Fullwidth<\/strong>, and <strong>Specialty<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-sections-1.jpg\" alt=\"\" width=\"2200\" height=\"1298\" class=\"aligncenter size-full wp-image-17680\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-sections-1.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-sections-1-300x177.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-sections-1-1024x604.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-sections-1-768x453.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-sections-1-1536x906.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-sections-1-2048x1208.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Standard Sections<\/h4>\n<p>Standard sections are the most commonly used section within Divi. It expands to the width of the browser and contains a row that is set to 80% width by default. However, there is a lot of customization options available within the standard section to get it to do whatever you want.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/standard-section.jpg\" alt=\"\" width=\"2200\" height=\"1231\" class=\"aligncenter size-full wp-image-17683\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/standard-section.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/standard-section-300x168.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/standard-section-1024x573.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/standard-section-768x430.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/standard-section-1536x859.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/standard-section-2048x1146.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Fullwidth Sections<\/h4>\n<p>Fullwidth sections give you access to a set of Fullwidth Modules. These modules act a little differently because they take advantage of the full width of the browser. Fullwidth modules can only be placed within Fullwidth sections.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/fullwidth-sections.jpg\" alt=\"\" width=\"2200\" height=\"997\" class=\"aligncenter size-full wp-image-17690\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/fullwidth-sections.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/fullwidth-sections-300x136.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/fullwidth-sections-1024x464.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/fullwidth-sections-768x348.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/fullwidth-sections-1536x696.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/fullwidth-sections-2048x928.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Specialty Sections<\/h4>\n<p>Specialty sections allow for more advanced column structures. When you select &#8220;Specialty&#8221; you&#8217;ll see all the available column structures available.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-2.jpg\" alt=\"\" width=\"2200\" height=\"1320\" class=\"aligncenter size-full wp-image-17688\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-2.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-2-300x180.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-2-1024x614.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-2-768x461.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-2-1536x922.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-2-2048x1229.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>Unlike normal sections, when you use a specialty section, you can add complex column variations next to full-spanning vertical sidebars, without adding unwanted breaks to the page. These types of layouts are not possible using normal sections. Below is an example of a Speciality Section in action.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections.jpg\" alt=\"\" width=\"2200\" height=\"1026\" class=\"aligncenter size-full wp-image-17687\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-300x140.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-1024x478.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-768x358.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-1536x716.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/specialty-sections-2048x955.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Rows<\/h3>\n<p>Rows are nested inside sections and can contain a variety of column layouts that help structure your content. <strong>Learn More: <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/rows\/\" target=\"_blank\" rel=\"noopener\">A Complete Overview of Divi Rows &#038; Columns<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/rows.jpg\" alt=\"\" width=\"2200\" height=\"1023\" class=\"aligncenter size-full wp-image-17691\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/rows.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/rows-300x140.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/rows-1024x476.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/rows-768x357.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/rows-1536x714.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/rows-2048x952.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Columns<\/h3>\n<p>Columns are nested inside rows and create a basic boxed structure for your content. Every row has a column, even if it&#8217;s just one column.<\/p>\n<p><strong>Learn More: <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/rows\/\" target=\"_blank\" rel=\"noopener\">A Complete Overview of Divi Rows &#038; Columns<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/columns.jpg\" alt=\"\" width=\"2200\" height=\"1320\" class=\"aligncenter size-full wp-image-17692\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/columns.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/columns-300x180.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/columns-1024x614.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/columns-768x461.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/columns-1536x922.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/columns-2048x1229.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Modules<\/h3>\n<p>Modules are the content blocks of Divi. So Contact Forms, Images, Text, Sliers, Blurbs and more are all examples of modules. Check out all the modules Divi has to offer <a href=\"https:\/\/blocksylaunch.click\/modules\/\">here<\/a>. To learn how to use the modules check out our <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/modules\/\" targt=\"_blank\">Module Documentation<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modules.jpg\" alt=\"\" width=\"2200\" height=\"1200\" class=\"aligncenter size-full wp-image-17693\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modules.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modules-300x164.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modules-1024x559.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modules-768x419.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modules-1536x838.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modules-2048x1117.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Parent \/ Child Element Hierarchy in Divi Builder Elements<\/h3>\n<p>When adjusting settings and applying styles in Divi it\u2019s important to remember the hierarchy of Divi\u2019s sections, rows, columns, and modules. Sections contain rows, rows contain columns, and columns contain modules. These are called parent and child elements. Child elements are nested inside parent elements and are affected by any design styling you apply to the parent element.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/hoverparentchild.png\" alt=\"\" width=\"1800\" height=\"1080\" class=\"aligncenter size-full wp-image-17611\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/hoverparentchild.png 1800w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/hoverparentchild-300x180.png 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/hoverparentchild-1024x614.png 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/hoverparentchild-768x461.png 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/hoverparentchild-1536x922.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3>The Element Settings Window Pop-Up<\/h3>\n<p>Whenever you open an element&#8217;s settings, a window will pop up with all of the content, design, and advanced settings available to that element. Let&#8217;s take a closer look at what&#8217;s available.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/2-divi-builder-example-1.jpg\" alt=\"\" width=\"2200\" height=\"1633\" class=\"aligncenter size-full wp-image-17620\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/2-divi-builder-example-1.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/2-divi-builder-example-1-300x223.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/2-divi-builder-example-1-1024x760.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/2-divi-builder-example-1-768x570.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/2-divi-builder-example-1-1536x1140.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/2-divi-builder-example-1-2048x1520.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Name of the Element<\/h4>\n<p>At the top left you&#8217;ll see the name of the builder element you&#8217;re working on. That could be a section, row, column, module, page settings, etc. If you ever get confused about what element you&#8217;re currently editing, look here and it will tell you!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/name-of-element.jpg\" alt=\"Name of the element\" width=\"2200\" height=\"1066\" class=\"aligncenter size-full wp-image-17615\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/name-of-element.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/name-of-element-300x145.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/name-of-element-1024x496.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/name-of-element-768x372.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/name-of-element-1536x744.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/name-of-element-2048x992.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Presets<\/h4>\n<p>Underneath the name of the module is where you can access Global Presets. Click on the dropdown to load a saved preset, create a new preset, or delete a preset. Presets are pre-designed and saved settings for any section, row, column, or module within Divi. Learn all about Global Presets <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/divi-global-presets\/\">here<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/presets.jpg\" alt=\"\" width=\"2200\" height=\"1467\" class=\"aligncenter size-full wp-image-17695\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/presets.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/presets-300x200.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/presets-1024x683.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/presets-768x512.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/presets-1536x1024.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/presets-2048x1366.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Expand Modal<\/h4>\n<p>The next icon expands the modal to the width of your browser.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/expand-modal.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Snap or Separate Modal<\/h4>\n<p>The next icon either snaps or separates the modal. Snap affixes the modal to the left of your browser window and does not hover over your page&#8217;s content, but adjusts next to it. To exit the left sidebar position of the snapped modal, click the icon again and it will separate and return to the position it was before.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/snap-modal.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Other Settings<\/h4>\n<p>When clicked, the three vertical ellipses icon gives you access to even more settings for that element. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings.jpg\" alt=\"\" width=\"2200\" height=\"1366\" class=\"aligncenter size-full wp-image-17703\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-300x186.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-1024x636.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-768x477.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-1536x954.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-2048x1272.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Save To Libray<\/strong> \u2013 Saves this element to your library.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-to-library.jpg\" alt=\"Save to Library\" width=\"2200\" height=\"1386\" class=\"aligncenter size-full wp-image-17707\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-to-library.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-to-library-300x189.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-to-library-1024x645.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-to-library-768x484.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-to-library-1536x968.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-to-library-2048x1290.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Save To Divi Cloud<\/strong> \u2013 Saves this element to your Divi Cloud.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-divi-cloud.jpg\" alt=\"Save to Divi Cloud\" width=\"2200\" height=\"1319\" class=\"aligncenter size-full wp-image-17708\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-divi-cloud.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-divi-cloud-300x180.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-divi-cloud-1024x614.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-divi-cloud-768x460.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-divi-cloud-1536x921.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/save-divi-cloud-2048x1228.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Split Test<\/strong> \u2013 Conduct a split test with this modal. Learn how to split test here.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/split-test.jpg\" alt=\"Split Test\" width=\"2200\" height=\"1393\" class=\"aligncenter size-full wp-image-17709\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/split-test.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/split-test-300x190.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/split-test-1024x648.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/split-test-768x486.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/split-test-1536x973.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/split-test-2048x1297.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Disable<\/strong> \u2013 Quickly disable the element on a desktop, tablet, or mobile device. When an icon is green that means it&#8217;s visible. When it&#8217;s red, it&#8217;s hidden.a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/disable.jpg\" alt=\"Disable\" width=\"2200\" height=\"1705\" class=\"aligncenter size-full wp-image-17710\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/disable.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/disable-300x233.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/disable-1024x794.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/disable-768x595.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/disable-1536x1190.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/disable-2048x1587.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Lock<\/strong> \u2013 Locks the element so no design styles and settings are changed. To unlock, right-click on the element and click \u201cUnlock\u201d.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/lock.jpg\" alt=\"Lock\" width=\"2200\" height=\"928\" class=\"aligncenter size-full wp-image-17711\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/lock.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/lock-300x127.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/lock-1024x432.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/lock-768x324.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/lock-1536x648.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/lock-2048x864.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Copy Module<\/strong> \u2013 Copies the module to your clipboard so you can paste it anywhere on the page.<br \/>\n<strong>Copy Module Styles<\/strong> \u2013 Copies the module\u2019s styles and settings so you can apply them to another same module.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/copy-module-1.jpg\" alt=\"Copy Module and Module Styles\" width=\"2200\" height=\"1407\" class=\"aligncenter size-full wp-image-17717\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/copy-module-1.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/copy-module-1-300x192.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/copy-module-1-1024x655.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/copy-module-1-768x491.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/copy-module-1-1536x982.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/copy-module-1-2048x1310.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Paste Button One Styles<\/strong> \u2013 Pastes styles from the button. This will only take effect if you have copied the styles first by clicking the above option \u201cCopy Module Styles\u201d.<\/p>\n<p><strong>Reset Module Styles<\/strong> \u2013 Resets the module\u2019s styles to the default styling. This removes any customization you did to the module.<\/p>\n<p><strong>Paste Module<\/strong> \u2013 After you\u2019ve copied the module, click this to paste the module anywhere on your website. For this to work, you must first click \u201cCopy Module\u201d.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/paste-module.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>View Modified Styles<\/strong> \u2013 Selecting this option will only display the settings of that module that have been modified. This is helpful when you&#8217;ve made a lot of changes or you&#8217;ve forgotten which changes you&#8217;ve made because it quickly shows the settings that have been modified within that module allowing you to make fast updates.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modified-styles.jpg\" alt=\"View Modified Styles\" width=\"2200\" height=\"1282\" class=\"aligncenter size-full wp-image-17723\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modified-styles.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modified-styles-300x175.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modified-styles-1024x597.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modified-styles-768x448.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modified-styles-1536x895.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/modified-styles-2048x1193.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Extend Button Styles<\/strong> \u2013 When extending a module&#8217;s styles you have the option to extend those styles throughout the entire page including headers and footers, just the page design, just the section, just the row, or just the column that module is in.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/extend-styles2.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>Apply Styles To Active Preset<\/strong> \u2013<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/apply-styles-to-preset.jpg\" alt=\"Apply to Active Preset\" width=\"2200\" height=\"1391\" class=\"aligncenter size-full wp-image-17725\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/apply-styles-to-preset.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/apply-styles-to-preset-300x190.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/apply-styles-to-preset-1024x647.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/apply-styles-to-preset-768x486.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/apply-styles-to-preset-1536x971.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/apply-styles-to-preset-2048x1295.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Edit Preset Style<\/strong> \u2013 Selecting this option will allow you to access the current preset&#8217;s settings and stylings.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/edit-preset-style.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>Go To Layer<\/strong> \u2013 Once clicked, the Layers panel will open up and go to the layer that the design element is in. This is helpful to quickly access builder elements to access their settings, rearrange them, and more.<br \/>\n<video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/go-to-layer.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>You can also access these settings by right-clicking on the design element you&#8217;re working on. When right-clicking to access these settings, you&#8217;ll notice Undo and Redo are added at the top of the list. This is handy for when you want to quickly undo or redo a certain action.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-rightclick.jpg\" alt=\"\" width=\"2200\" height=\"1184\" class=\"aligncenter size-full wp-image-17704\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-rightclick.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-rightclick-300x161.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-rightclick-1024x551.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-rightclick-768x413.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-rightclick-1536x827.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/other-settings-rightclick-2048x1102.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Search Options Bar<\/h4>\n<p>Next in the module window is the Search Bar. You can use the search back to quickly find and access settings and styles. Simply type what you&#8217;re looking for to search.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/search-bar.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>+ Filter<\/h4>\n<p>The filter button works similarly to the search function in that it allows you to quickly access modified styles, responsive styles, hover state styles, and active content.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/filter.jpg\" alt=\"How to filter settings\" width=\"2200\" height=\"1554\" class=\"aligncenter size-full wp-image-17730\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/filter.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/filter-300x212.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/filter-1024x723.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/filter-768x542.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/filter-1536x1085.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/filter-2048x1447.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Tabs: Content, Design, Advanced.<\/h4>\n<p>All modal windows have three tabs: Content, Design, and Advanced. This is where the content settings, design settings, and advanced settings are for any Divi Builder element you&#8217;re working on (whether that be a section, row, columnn, or module). <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/tabs.jpg\" alt=\"\" width=\"2200\" height=\"1665\" class=\"aligncenter size-full wp-image-17732\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/tabs.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/tabs-300x227.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/tabs-1024x775.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/tabs-768x581.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/tabs-1536x1162.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/tabs-2048x1550.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Content<\/h5>\n<p>The Content tab is where you can adjust the content settings of the Divi Builder element you&#8217;re working on. What&#8217;s in the Content tab varies depending on which element you are working on.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/content-tab.jpg\" alt=\"Content tab settings\" width=\"2200\" height=\"1338\" class=\"aligncenter size-full wp-image-17737\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/content-tab.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/content-tab-300x182.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/content-tab-1024x623.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/content-tab-768x467.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/content-tab-1536x934.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/content-tab-2048x1246.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Design<\/h5>\n<p>The Design tab is where you can adjust the design settings for the Divi Builder element you are working on.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/design-tab.jpg\" alt=\"Design tab settings\" width=\"2200\" height=\"1357\" class=\"aligncenter size-full wp-image-17739\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/design-tab.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/design-tab-300x185.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/design-tab-1024x632.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/design-tab-768x474.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/design-tab-1536x947.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/design-tab-2048x1263.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Advanced<\/h5>\n<p>The Advanced tab is where you can access the advanced settings for whatever Divi Builder element you&#8217;re working on. Settings like Custom CSS, Visibility, Scroll Effects, Conditions, and more.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/advacned-tab.jpg\" alt=\"Advanced tab settings\" width=\"2200\" height=\"1306\" class=\"aligncenter size-full wp-image-17740\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/advacned-tab.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/advacned-tab-300x178.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/advacned-tab-1024x608.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/advacned-tab-768x456.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/advacned-tab-1536x912.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/advacned-tab-2048x1216.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Bottom Buttons: Exit, Undo, Redo, Save.<\/h4>\n<p>At the bottom of the modal window, you&#8217;ll see 4 buttons from left to right: Exit (red), Undo (purple), Redo (blue), and Save (green).<\/p>\n<p><strong>Exit<\/strong> &#8211; If you exit the modal window without saving your changes first, they will be lost.<br \/>\n<strong>Undo<\/strong> &#8211; Undoes previous actions.<br \/>\n<strong>Redo<\/strong> &#8211; Redoes undone actions.<br \/>\n<strong>Save<\/strong> &#8211; Click this button to save your settings.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-buttons.jpg\" alt=\"\" width=\"2200\" height=\"1479\" class=\"aligncenter size-full wp-image-17733\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-buttons.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-buttons-300x202.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-buttons-1024x688.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-buttons-768x516.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-buttons-1536x1033.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-buttons-2048x1377.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h2>Tour the Divi Visual Builder<\/h2>\n<p>In this section, we&#8217;ll review the interface of the Divi Visual Builder and explain what each option does.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-builder-tour.jpg\" alt=\"Tour of the Divi Visual Builder\" width=\"2200\" height=\"1200\" class=\"aligncenter size-full wp-image-17750\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-builder-tour.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-builder-tour-300x164.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-builder-tour-1024x559.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-builder-tour-768x419.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-builder-tour-1536x838.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/divi-builder-tour-2048x1117.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h3>Bottom Divi Toolbar<\/h3>\n<p>The bottom toolbar is where you can access a variety of settings. Let&#8217;s look at what each of these icons means. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-toolbar.jpg\" alt=\"Bottom Toolbar\" width=\"2200\" height=\"1200\" class=\"aligncenter size-full wp-image-17751\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-toolbar.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-toolbar-300x164.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-toolbar-1024x559.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-toolbar-768x419.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-toolbar-1536x838.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/bottom-toolbar-2048x1117.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Leftside of the Toolbar<\/h4>\n<p>We&#8217;ll start from the left, and work our way to the right side of the Divi toolbar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/left-toolbar.jpg\" alt=\"Divi bottom toolbar left\" width=\"2200\" height=\"732\" class=\"aligncenter size-full wp-image-17831\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/left-toolbar.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/left-toolbar-300x100.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/left-toolbar-1024x341.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/left-toolbar-768x256.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/left-toolbar-1536x511.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/left-toolbar-2048x681.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Three Dots: Builder Settings<\/h5>\n<p>Click the three docs to access settings that customize the Divi Builder interface. Here you can customize what icons are on the bottom toolbar, the Builder default view mode, the modal default position, and more.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/builder-settings-2.jpg\" alt=\"Builder Settings\" width=\"2200\" height=\"1241\" class=\"aligncenter size-full wp-image-17758\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/builder-settings-2.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/builder-settings-2-300x169.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/builder-settings-2-1024x578.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/builder-settings-2-768x433.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/builder-settings-2-1536x866.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/builder-settings-2-2048x1155.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Customize Builder Settings Toolbar<\/h5>\n<p>Here you can choose to show or hide icons on the toolbar for quick access. Simply click the icon to show or hide it on the toolbar.<br \/>\n<video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/customize-bottom-toolbar.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>From left to right the icons are:<br \/>\n<strong>Wireframe View<\/strong> &#8211; Click to view the wireframe layout of the page you are working on.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/wireframe-view.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>Zoom in \/ Zoom Out<\/strong> &#8211; Click this icon to zoom in or out on your page design.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/zoom-in-zoom-out.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>Desktop View<\/strong> &#8211; Click this to realize the Builder window to the size of a Desktop computer.<br \/>\n<strong>Tablet View<\/strong> &#8211; Click this to realize the Builder window to the size of tablet devices.<br \/>\n<strong>Mobile View<\/strong> &#8211; Click this to realize the Builder window to the size of mobile devices.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/change-views.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>Hover Mode<\/strong> &#8211; When the hover mode is one, the element settings toolbar shows on hover, rather than on-click.<br \/>\n<strong>Click Mode<\/strong> &#8211; When the click mode is on, the element settings toolbar will show on-click, rather than on-hover.<br \/>\n<strong>Grid Mode<\/strong> &#8211; When gride mode is on, all of the element settings toolbars and containers will be visible without having to hover or click on them. <\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/clicks.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h5>History State Interval<\/h5>\n<p>The History State Interval determines how often Divi auto-saves your page design. You can choose it to auto-save after every action you take, or every 10, 20, 30, or 40 actions.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-state.jpg\" alt=\"History State Interval\" width=\"2200\" height=\"1237\" class=\"aligncenter size-full wp-image-17774\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-state.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-state-300x169.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-state-1024x576.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-state-768x432.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-state-1536x864.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-state-2048x1152.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Settings Modal Default Position<\/h5>\n<p>Here you can set the default position of the modal when it&#8217;s opened.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-default-position.jpg\" alt=\"\" width=\"2200\" height=\"1233\" class=\"aligncenter size-full wp-image-17776\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-default-position.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-default-position-300x168.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-default-position-1024x574.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-default-position-768x430.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-default-position-1536x861.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-default-position-2048x1148.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>You can choose from Last Used Position, Floating Minimum Size, Fullscreen, Fixed Left Sidebar, Fixed Right Sidebar, or Fixed Bottom Panel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-windwow.jpg\" alt=\"\" width=\"2200\" height=\"1200\" class=\"aligncenter size-full wp-image-17778\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-windwow.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-windwow-300x164.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-windwow-1024x559.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-windwow-768x419.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-windwow-1536x838.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/modal-windwow-2048x1117.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Page Creation Flow<\/h5>\n<p>Here you can choose how new pages are loaded. You can choose for the page to load as a build-from-scratch page, or with the Divi Library window open, by cloning an existing page, or with the three options presented with Give Me a Choice.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-creation-flow.jpg\" alt=\"Page Creation Flow\" width=\"2200\" height=\"1230\" class=\"aligncenter size-full wp-image-17782\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-creation-flow.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-creation-flow-300x168.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-creation-flow-1024x573.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-creation-flow-768x429.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-creation-flow-1536x859.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-creation-flow-2048x1145.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Builder Interface Animations<\/h5>\n<p>Toggle this option on or off to enable or disable the Divi Builder animations that happen when you click an object.<br \/>\n img <\/p>\n<h5>Show Disabled Modules at 50% Opacity<\/h5>\n<p>Toggle this option on to show disabled modules at 50% opacity. Disabled modules are modules that are hidden from view depending on what device is being used (desktop, tablet, or mobile). When you&#8217;re working within the Visual Builder, it&#8217;s helpful to have disabled modules displayed at 50% opacity so you know they are disabled for the view just by looking at them.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disabled-on.jpg\" alt=\"Disabled On\" width=\"2200\" height=\"1214\" class=\"aligncenter size-full wp-image-17783\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disabled-on.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disabled-on-300x166.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disabled-on-1024x565.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disabled-on-768x424.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disabled-on-1536x848.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disabled-on-2048x1130.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>If this option is toggled off, then the disabled element will not show in the view mode it&#8217;s disabled on. For example, below I have the image module disabled on Desktop view and the show disabled modules at 50% opacity setting off. The result is the image is not showing.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disable-off.jpg\" alt=\"\" width=\"2200\" height=\"1228\" class=\"aligncenter size-full wp-image-17784\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disable-off.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disable-off-300x167.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disable-off-1024x572.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disable-off-768x429.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disable-off-1536x857.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/disable-off-2048x1143.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Group Settings Into Closed Toggles<\/h5>\n<p>When this setting is toggled on it will show module settings as closed toggles. If this setting is toggled off it will show the module settings as open toggles.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/closed-toggles.jpg\" alt=\"\" width=\"2200\" height=\"1710\" class=\"aligncenter size-full wp-image-17824\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/closed-toggles.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/closed-toggles-300x233.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/closed-toggles-1024x796.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/closed-toggles-768x597.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/closed-toggles-1536x1194.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/closed-toggles-2048x1592.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Add Placeholder Content to New Modules<\/h5>\n<p>This option allows you to choose whether or not you want modules to display placeholder content when you add them to your page. If you toggle this option off, new modules added to your page will not display placeholder content, as shown below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/plcaeholder-content.jpg\" alt=\"Placeholder Content\" width=\"2200\" height=\"1467\" class=\"aligncenter size-full wp-image-17825\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/plcaeholder-content.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/plcaeholder-content-300x200.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/plcaeholder-content-1024x683.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/plcaeholder-content-768x512.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/plcaeholder-content-1536x1024.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/plcaeholder-content-2048x1366.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Theme Builder Template Editing<\/h5>\n<p>This setting allows you to choose whether or not you&#8217;d like to be able to edit Theme Builder templates in the Visual Builder. If you only want those templates to be editable through the dashboard Theme Builder, then toggle this option off.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/editable-theme-builder-templates.jpg\" alt=\"Editable Theme Builder Templates\" width=\"2200\" height=\"1200\" class=\"aligncenter size-full wp-image-17827\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/editable-theme-builder-templates.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/editable-theme-builder-templates-300x164.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/editable-theme-builder-templates-1024x559.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/editable-theme-builder-templates-768x419.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/editable-theme-builder-templates-1536x838.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/editable-theme-builder-templates-2048x1117.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Middle Toolbar Section<\/h4>\n<p>Now let&#8217;s look at the icons in the middle section of the Divi Toolbar.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/middle-toolbar.jpg\" alt=\"Middle Toolbar\" width=\"2200\" height=\"768\" class=\"aligncenter size-full wp-image-17833\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/middle-toolbar.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/middle-toolbar-300x105.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/middle-toolbar-1024x357.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/middle-toolbar-768x268.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/middle-toolbar-1536x536.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/middle-toolbar-2048x715.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Load From Library<\/h5>\n<p>The plus icon loads the <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/divi-library\/\" target=\"_blank\" rel=\"noopener\">Divi Library<\/a> when clicked. Here you have three choices: Premade Layouts, Your Saved Layouts, or Clone an Existing Page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/load-from-library-1.jpg\" alt=\"Load From Library\" width=\"2200\" height=\"1180\" class=\"aligncenter size-full wp-image-17837\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/load-from-library-1.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/load-from-library-1-300x161.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/load-from-library-1-1024x549.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/load-from-library-1-768x412.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/load-from-library-1-1536x824.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/load-from-library-1-2048x1098.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Premade Layouts<\/strong><br \/>\nDivi comes packed with <a href=\"https:\/\/blocksylaunch.click\/layouts\/\" target=\"_blank\" rel=\"noopener\">hundreds of free Layout Packs<\/a> designed by our in-house design team just for you! If you&#8217;d like to use a pre-made layout on your page, click the Premade Layouts tab at the top of the Divi Library window and browse through the hundreds of available designs. You can even use the sidebar on the left to filter through categories or the search bar to find what you&#8217;re looking for.<\/p>\n<p>Learn More: <a href=\"https:\/\/blocksylaunch.click\/blog\/divi-resources\/how-to-use-a-premade-layout-pack-on-your-divi-website\" target=\"_blank\" rel=\"noopener\">How to Use a Premade Layout Pack on Your Divi Website<\/a>.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/premade-layouts.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>Your Saved Lyouts<\/strong><br \/>\nIn this section, you can load any layouts you have saved to your library and from your <a href=\"https:\/\/blocksylaunch.click\/divi-cloud\/\" target=\"_blank\" rel=\"noopener\">Divi Cloud<\/a>. Click the &#8220;Your Saved Layouts&#8221; tab to view your saved layouts and use the sidebar options to sort and filter through your saved layouts. One way to use this feature is to create tempalted wireframes that you can save as a layout and then load onto new websites. Make this even easier by saving and loading from Divi Cloud which you can access on any Divi website that&#8217;s signed in with your account.<br \/>\nLearn More: <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/loading\/\" target=\"_blank\" rel=\"noopener\">Save and Loading Custom Layouts With Divi Library<\/a>.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/your-saved-layouts.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p><strong>Clone Existing Page<\/strong><br \/>\nThis feature is handy when you&#8217;ve already designed a page layout you like and want to use the same layout on another page. To clone an existing page, click the &#8220;Clone Existing Page&#8221; tab and navigate to the page you want to clone.<br \/>\n What this does and when\/why you\u2019d want to use it.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/clone-existing-page-3.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h5>Downward Arrow &#8211; Save to Library<\/h5>\n<p>The downward arrow allows you to save your page layout to your Divi Library and\/or your Divi Cloud Library. Once clicked, an options window will pop up where you can name your layout, assign it to certain categories and tags and save it to your Divi Cloud.<\/p>\n<ol>\n<li><strong>Layout Name<\/strong> &#8211; Give the layout a name that&#8217;s descriptive and memorable. For example, Home Page Light Mode<\/li>\n<li><strong>Save to Divi Cloud<\/strong> &#8211; To save this layout to your Divi Cloud toggle this option on.<\/li>\n<li><strong>Add to Categories<\/strong> &#8211; Assign a category to this page to keep things organized. Categories that have a blue cloud icon next to them signify that they are Divi Cloud Categories.<\/li>\n<li><strong>Add to Tags<\/strong> &#8211; Further sort and organize page templates by assigning tags to the page template you&#8217;re saving. Ex: Light Mode, Dark Mode, Holiday, Seasonal. You can also create new tags.<\/li>\n<li><strong>Save to Library<\/strong> &#8211; Click this button to save the page template to your library.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/save-to-library.jpg\" alt=\"Save to Library\" width=\"2200\" height=\"1425\" class=\"aligncenter size-full wp-image-17854\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/save-to-library.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/save-to-library-300x194.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/save-to-library-1024x663.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/save-to-library-768x497.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/save-to-library-1536x995.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/save-to-library-2048x1327.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Trash Icon &#8211; Delete Page Layout<\/h5>\n<p>If you&#8217;d like to wipe your page clean and start fresh, simply click the trash can icon to delete the entire page design.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/trash-icon.jpg\" alt=\"Trash Icon\" width=\"2200\" height=\"1320\" class=\"aligncenter size-full wp-image-17855\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/trash-icon.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/trash-icon-300x180.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/trash-icon-1024x614.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/trash-icon-768x461.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/trash-icon-1536x922.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/trash-icon-2048x1229.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>X Icon<\/h5>\n<p>This is the icon that either loads or closes the Divi Toolbar. When the toolbar is open and expand you&#8217;ll see an X and when it&#8217;s closed you&#8217;ll see a + to open and expand it.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/open-close-toolbar-1.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h5>Gear Icon &#8211; Page Settings<\/h5>\n<p>The gear icon brings up the Page Settings window. This is where you can apply custom settings to that page only. These are not global settings, but will only apply to the page you are working on.<\/p>\n<p><strong>Page Content Settings<\/strong><\/p>\n<ul>\n<li><strong>Title<\/strong> &#8211; This is your Page&#8217;s title. You can edit it here or on the backend too.<\/li>\n<li><strong>Excerpt<\/strong> &#8211; This is the excerpt description for the page.<\/li>\n<li><strong>Background<\/strong> &#8211; You can add <\/li>\n<li><strong>Split Testing<\/strong> &#8211; You can even do a split test on pages! <a href=\"https:\/\/blocksylaunch.click\/blog\/theme-releases\/divi-leads-for-the-visual-builder#:~:text=Divi%20Leads%20is%20a%20powerful,using%20powerful%20stats%20and%20insights.\" target=\"_blank\" rel=\"noopener\">Learn more about Split Testing here.<\/a><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-content-1.jpg\" alt=\"Page Content Settings\" width=\"2200\" height=\"1363\" class=\"aligncenter size-full wp-image-17866\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-content-1.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-content-1-300x186.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-content-1-1024x634.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-content-1-768x476.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-content-1-1536x952.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-content-1-2048x1269.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Page Design Settings<\/strong><\/p>\n<ul>\n<li><strong>Spacing<\/strong> &#8211; Gutter width is the amount of space in-between columns. The higher the number, the more space. IF you\u2019d like to decrease gutter width spacing, type in a lower number or drag the range slider to the left.<\/li>\n<li><strong>Text<\/strong> &#8211; For this page you can set a custom light text color and a custom dark text color.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-design.jpg\" alt=\"Page Design Settings\" width=\"2200\" height=\"1186\" class=\"aligncenter size-full wp-image-17863\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-design.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-design-300x162.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-design-1024x552.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-design-768x414.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-design-1536x828.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-design-2048x1104.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p><strong>Page Advanced Settings<\/strong><\/p>\n<ul>\n<li><strong>Custom CSS<\/strong> &#8211; Here you can type custom CSS to apply only to this page.<\/li>\n<li><strong>Performance<\/strong> &#8211; By default, this option is toggled on. Generating a static CSS file improves the speed and performance of the page by compiling any CSS on the page into minified static CSS files that can be served more efficiently and cached without your visitor\u2019s browser.<\/li>\n<li><strong>Visibility<\/strong> &#8211; Adjust the visibility options on your page here. <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/visibility-options\/\" target=\"_blank\" rel=\"noopener\">Learn more about Visibility Options here<\/a>.<\/li>\n<li><strong>Position<\/strong> &#8211; The z-index controls the element position on the Z axis. Elements with a higher z-index number will sit atop elements with lower z-index values. <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/position-options\/\" target=\"_blank\" rel=\"noopener\">Learn more about Position Options here<\/a>.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-advanced.jpg\" alt=\"Page Advanced Settings\" width=\"2200\" height=\"1290\" class=\"aligncenter size-full wp-image-17867\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-advanced.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-advanced-300x176.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-advanced-1024x600.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-advanced-768x450.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-advanced-1536x901.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/page-settings-advanced-2048x1201.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Clock Icon &#8211; Revision History<\/h5>\n<p>Click this icon to view the revisions to made to the page. Here you can easily view history states for the page you&#8217;re working on and global history states (like eidts to a global footer, header, or module).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-states.jpg\" alt=\"\" width=\"2200\" height=\"1172\" class=\"aligncenter size-full wp-image-17872\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-states.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-states-300x160.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-states-1024x546.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-states-768x409.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-states-1536x818.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/history-states-2048x1091.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>To view the changes you&#8217;ve made so far, click on the action toggle.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/revision-states-2.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h5>Portability Icon<\/h5>\n<p>Click this icon to Export or Import page layouts. Learn More Here: <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/library-import\/\" target=\"_blank\" rel=\"noopener\">Importing &#038; Exporting Divi Builder Layouts &#038; Library Collections<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/portability.png\" alt=\"Portability Icon\" width=\"3600\" height=\"2160\" class=\"aligncenter size-full wp-image-17876\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/portability.png 3600w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/portability-300x180.png 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/portability-1024x614.png 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/portability-768x461.png 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/portability-1536x922.png 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/portability-2048x1229.png 2048w\" sizes=\"auto, (max-width: 3600px) 100vw, 3600px\" \/><\/p>\n<h5>Search Icon<\/h5>\n<p>The search icon helps you quickly access what you&#8217;re looking for. You can change your device view, manage the page layout, access builder settings, search documentation, open elements, and more. If you&#8217;re ever looking for something within the builder and don&#8217;t know where it is, use this search feature to find it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/search-icon-1.jpg\" alt=\"Search Icon\" width=\"2200\" height=\"1183\" class=\"aligncenter size-full wp-image-17881\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/search-icon-1.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/search-icon-1-300x161.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/search-icon-1-1024x551.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/search-icon-1-768x413.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/search-icon-1-1536x826.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/search-icon-1-2048x1101.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Layers Icon<\/h5>\n<p>Click this icon to view the design layers on your page. You can open and close all of the layers and use the filter function to quickly find the design element you&#8217;re looking for.<\/p>\n<p>Drag and drop the layers to rearrange the page design, or use the icons on the layers to access settings, duplicate that item, or delete it.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/layers-view.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h5>Divi Builder Helper<\/h5>\n<p>This question mark icon loads the Divi Builder Helper when clicked. Here you can browse Divi&#8217;s documentation, watch how-to videos, and look up keyboard shortcuts.<\/p>\n<p>In the Video Tutorials tab, click on the topic you&#8217;re interested in and watch the video on-screen right there. To view all of Divi&#8217;s Documentation, visit <a href=\"https:\/\/blocksylaunch.click\/documentation\/\" target=\"_blank\" rel=\"noopener\">Divi&#8217;s Documentation Hub<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper1.jpg\" alt=\"Divi Builder Helper\" width=\"2200\" height=\"1394\" class=\"aligncenter size-full wp-image-17883\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper1.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper1-300x190.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper1-1024x649.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper1-768x487.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper1-1536x973.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper1-2048x1298.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<p>In the Keyboard Shortcuts tab are listed all of the keyboard shortcuts available on both Mac and PC. Mastering keyboard shortcuts can help speed up your design process and quick access and edit elements. Learn More: <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/keyboard-shortcuts\/\" target=\"_blank\" rel=\"noopener\">Divi Keyboard Shortcuts<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper2.jpg\" alt=\"Keyboard Shortcuts\" width=\"2200\" height=\"1395\" class=\"aligncenter size-full wp-image-17884\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper2.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper2-300x190.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper2-1024x649.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper2-768x487.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper2-1536x974.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/divi-helper2-2048x1299.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h5>Save<\/h5>\n<p>And of course, there is the Save button! A feature you&#8217;ll use often. Before exiting the Visual Builder it&#8217;s important to save your design. Divi automatically <a href=\"https:\/\/blocksylaunch.click\/blog\/theme-releases\/introducing-divi-builder-sync-auto-saves-browser-backups-failed-save-detection\">saves your design periodically<\/a>, but this button is here for instant saves too.<\/p>\n<h2>Save Divi Visual Builder Settings<\/h2>\n<p>Always make sure to save your work! The Divi Builder periodically auto-saves your work, however it&#8217;s best to do a final manual save before exiting the Visual Builder.<\/p>\n<p>To save your design you can click the green Save button at th bottom right of the screen, or use the keyboard shortcut <strong>cmd +<\/strong> (mac) or <strong>ctl + s<\/strong> (PC). Then click &#8220;Exit Visual Builder&#8221; on the top toolbar to exist the Visual Builder.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/save-and-exit.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2>Divi Builder Capabilities<\/h2>\n<p>Let&#8217;s take a look at what you can do with the Divi Builder!<\/p>\n<h3>Divi Gives You Complete Design Control<\/h3>\n<p>Divi isn&#8217;t just a WordPress theme, it&#8217;s a complete design framework that allows you to design and customize every part of your website from the ground up. You have control over everything down to the finest detail. Create the perfect websites for you and your clients. <a href=\"https:\/\/blocksylaunch.click\/gallery\/divi\/\">Explore all the design features<\/a> that <a href=\"https:\/\/blocksylaunch.click\/no-code-design\/\">Divi<\/a> has to offer!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/design-control-large.jpeg\" alt=\"Divi Design Controls\" width=\"2220\" height=\"1574\" class=\"aligncenter size-full wp-image-17590\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/design-control-large.jpeg 2220w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/design-control-large-300x213.jpeg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/design-control-large-1024x726.jpeg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/design-control-large-768x545.jpeg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/design-control-large-1536x1089.jpeg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/02\/design-control-large-2048x1452.jpeg 2048w\" sizes=\"auto, (max-width: 2220px) 100vw, 2220px\" \/><\/p>\n<h3>Responsive Editing<\/h3>\n<p>Making responsive websites is easy with Divi. Divi is responsive by default but takes responsive design a step further by giving you complete control over every design setting on each mobile device. This allows you to perfectly tailor the appearance of each element on computers, tablets and smartphones.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/04\/responsive-divi.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>Let&#8217;s explore some of the core features that makes Divi, Divi!<\/p>\n<h2>Essential Features of the Divi Visual Builder<\/h2>\n<p>Let&#8217;s take a look at the essential features of Divi&#8217;s Visual Builder and what&#8217;s available to you at your fingertips.<\/p>\n<h4>Design Visually on the Front End<\/h4>\n<p>With Divi&#8217;s Visual Builder, you&#8217;re able to drag and drop elements, format text, resize design elements, adjust responsive sizing, and show or hide elements based on the device being used.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/build-visually.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>The Theme Builder<\/h4>\n<p>Divi&#8217;s Theme Builder is a powerful way to build your website templating system using the power of Divis&#8217; Visual Builder to design your website&#8217;s header, footer, product templates, blog post templates, category pages, project templates, 404 page, and more.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/theme-builder.jpeg\" alt=\"\" width=\"2220\" height=\"1382\" class=\"aligncenter size-full wp-image-17623\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/theme-builder.jpeg 2220w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/theme-builder-300x187.jpeg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/theme-builder-1024x637.jpeg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/theme-builder-768x478.jpeg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/theme-builder-1536x956.jpeg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/theme-builder-2048x1275.jpeg 2048w\" sizes=\"auto, (max-width: 2220px) 100vw, 2220px\" \/><\/p>\n<h4>Drag and Drop to Move and Resize Elements<\/h4>\n<p>With Divi, you&#8217;re able to design complex layouts by dragging and dropping elements on the front end. That way you can see how your changes look visually before saving and publishing your design. You can also resize elements on your website by dragging the sides of the elements to adjust settings like height, width, padding, and margins.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/drag-and-drop-elements.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Copy and Paste Styles<\/h4>\n<p>In Divi, anything can be copied from one element and pasted onto another. You can copy individual settings, groups of settings or even copy an element&#8217;s entire design and transfer it to another element on the page. No need to open up design settings and edit things over and over again. Design it once, and then just copy and paste.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/copy-paste-styles.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Extendable Stlyes<\/h4>\n<p>If you have a design style that you just created, and you want to use that elsewhere on the page, or even across the entire page, you can simply extend that style automatically to your desired location. Update hundreds of elements at once! Control exactly where and to which elements your styles should be extended to. For example, let&#8217;s say you just crafted the perfect button style, but you have dozens of buttons on the page. You can extend that style to the rest of the buttons instantly by extending the style.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/extend-styles.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Keyboard Shortucts<\/h4>\n<p>Keyboard shorcuts are the key to ultimate efficiency. Divi comes with a full range of keyboard shortcuts that advanced users can use to speed up their work flow significantly. Once you get the hang of using shortcuts, you will wonder how you ever lived without them!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/keyboard-shorcuts.jpg\" alt=\"\" width=\"2200\" height=\"1290\" class=\"aligncenter size-full wp-image-17653\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/keyboard-shorcuts.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/keyboard-shorcuts-300x176.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/keyboard-shorcuts-1024x600.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/keyboard-shorcuts-768x450.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/keyboard-shorcuts-1536x901.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/keyboard-shorcuts-2048x1201.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Multi-Select &#038; Bulk Editing<\/h4>\n<p>If you want to edit multiple elements at one time like a group of images, then use Divi&#8217;s multi-select bulk editing capabilities! To select multiple elements press Cmd or Ctrl and click each element you want to edit on the page at once. You can then edit these elements at the same time, changing their style and content together or moving them to different locations on the page as a group.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/multi-select-edit.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Find &#038; Replace Styles<\/h4>\n<p>Make sweeping changes across your entire page instantly, saving you hours upon hours of editing time. Using find and replace allows you to change any design value, such as colors or fonts, across the entire page or within specific locations. Instead of opening up each element individually and changing colors over and over again, just find and replace across the entire document.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/blog\/wp-content\/uploads\/2018\/07\/Find-And-Replace-1-1.gif\" width=\"880\" height=\"483\" class=\"alignnone size-full\" \/><\/p>\n<h4>Global Website Styles<\/h4>\n<p>Customize your website with its own overarching design system by editing the default design of any element. When you modify a module&#8217;s default design, it updates across your whole website at once. Site-wide theme building plus site-wide design editing is the ultimate combo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/global-website-styles.gif\" alt=\"\" width=\"1364\" height=\"779\" class=\"aligncenter size-full wp-image-17657\" \/><\/p>\n<h4>Global Website Colors<\/h4>\n<p>Divi lets you create a global color palette for your website. These global colors are dynamic and can be changed at any time. This allows you to quickly transform your website&#8217;s color scheme in just a few moments. <\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/global-colors.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Advanced Code Editing<\/h4>\n<p>While you don&#8217;t need to know code to use Divi, you still have the option to write and edit code if you desire! Divi comes with a a fully-featured code editor that makes writing and editing code so much easier and enjoyable. Features include syntax highlighting, error reporting, auto-complete, color picking, multi-line select, search, find and replace and more. Add custom CSS to any element or add your own code to any page using the Divi code module or Page Settings Custom CSS area.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/global-colors.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Build Your Design Library<\/h4>\n<p>Each installation of Divi comes with access to the Divi Library where you can save design elements, page layouts, headers and footers, and more for easy access when you&#8217;re building websites. Divi also comes with thousands of <a href=\"https:\/\/blocksylaunch.click\/layouts\/\" target=\"_blank\" rel=\"noopener\">premade layouts<\/a> you can use any time!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/library.jpg\" alt=\"\" width=\"2200\" height=\"1817\" class=\"aligncenter size-full wp-image-17660\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/library.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/library-300x248.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/library-1024x846.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/library-768x634.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/library-1536x1269.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/library-2048x1691.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Global Elements and Dynamic Content<\/h4>\n<p>With Divi, you&#8217;re able to save builder elements (sections, rows, modules) as global designs across your website. That means whenever you update a global element, it will automatically synch those changes anywhere else that element appears on your website, saving you time and headaches! Divi also has the capability to display dynamic content (like your logo, a blog post&#8217;s title, search results, and more) so that you can spend less time editing every single page and instead make changes with one click.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/dynamic-content.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h4>Mobile and Wireframe View Modes<\/h4>\n<p>There are multiple ways to build with Divi. You can freely switch between different view modes, choosing the one that best suits you or your current project. Zoom in and out, toggle through mobile device views, switch between unique interaction modes or build your page structures quickly in wire-frame mode. It&#8217;s up to you.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/wireframe-view.jpg\" alt=\"\" width=\"2200\" height=\"1473\" class=\"aligncenter size-full wp-image-17662\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/wireframe-view.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/wireframe-view-300x201.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/wireframe-view-1024x686.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/wireframe-view-768x514.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/wireframe-view-1536x1028.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/wireframe-view-2048x1371.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>History, Auto Saves &#038; Browser Backups<\/h4>\n<p>Divi has your back. Every action you perform while building is saved into your editing history. You can undo, redo and explore revisions with ease. If something goes wrong, like your internet going down or your computer crashing, Divi will automatically save your progress so that you can restore it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/browser-backups.jpg\" alt=\"\" width=\"2200\" height=\"1709\" class=\"aligncenter size-full wp-image-17663\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/browser-backups.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/browser-backups-300x233.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/browser-backups-1024x795.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/browser-backups-768x597.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/browser-backups-1536x1193.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/browser-backups-2048x1591.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h4>Right Click Options<\/h4>\n<p>Divi also comes with powerful right-click options that make designing even faster! Learn all about what&#8217;s possible with Divi&#8217;s right-click options <a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/right-click\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/right-click.jpg\" alt=\"\" width=\"2200\" height=\"1147\" class=\"aligncenter size-full wp-image-17664\" srcset=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/right-click.jpg 2200w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/right-click-300x156.jpg 300w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/right-click-1024x534.jpg 1024w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/right-click-768x400.jpg 768w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/right-click-1536x801.jpg 1536w, https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/right-click-2048x1068.jpg 2048w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/p>\n<h2>Divi Builder Best Tips &#038; Practices<\/h2>\n<p>There are many ways to use Divi in your design business and each Divi designer and developer will have their own method and workflow that works for them and we encourage you to find what process works best for you! However, we have a few recommendations on ways you can maximize Divi, simplify your workflow, and streamline your design processes.<\/p>\n<h3>Switch Back and Forth Between Visual Builder &#038; Wireframe Mode<\/h3>\n<p>One of the great things about Divi\u2019s Visual Builder is that it\u2019s easy to switch between editing on the frontend and editing on the backend. Changing between both views takes literally less than one second. Switching between viewing your design on the frontend and viewing the wireframe layout can help you quickly drag and drop elements and view the structure of your design.<\/p>\n<h3>Use the Zoom Out Feature<\/h3>\n<p>I&#8217;m sure you&#8217;ve done it too &#8211; taken a screen shot of your page design to see how everything looks together. The Zoom icon on the Divi toolbar allows you to quickly take a bird&#8217;s eye view of your design instead of having to save, exit, and take a screenshot. <\/p>\n<h2>Divi Builder Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/blocksylaunch.click\/blog\/divi-resources\/divi-ux-best-practices\">7 Divi UX Best Practices You Should Keep in Mind<\/a><\/li>\n<li><a href=\"https:\/\/blocksylaunch.click\/blog\/divi-resources\/7-practical-tips-for-the-divi-theme-builder\">7 Practical Tips for the Divi Theme Builder<\/a><\/li>\n<li><a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/keyboard-shortcuts\/\">Divi Keyboard Shortcuts<\/li>\n<\/ul>\n<h2>Continue Learning<\/h2>\n<ul>\n<li><a href=\">https:\/\/blocksylaunch.click\/documentation\/divi\/basics\/&#8221;>Divi Basics<\/a><\/li>\n<li><a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/theme-options\/\">Divi Theme Options<\/li>\n<li><a hef=\"https:\/\/blocksylaunch.click\/documentation\/divi\/divi-library\/\">Divi Library<\/a><\/li>\n<li><a href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/\">Browse Divi Documentation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Divi is best used in visual mode, allowing you to build your page on the front-end of your website.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2,10,11],"tags":[],"class_list":["post-814","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi","category-basics","category-builder"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started With The Divi Builder - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Divi is best used in visual mode, allowing you to build your page on the front-end of your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-06T18:59:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-17T15:44:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder.jpg\" \/>\n<meta name=\"author\" content=\"admindocumentation\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admindocumentation\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/\"},\"author\":{\"name\":\"admindocumentation\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\"},\"headline\":\"Getting Started With The Divi Builder\",\"datePublished\":\"2017-05-06T18:59:53+00:00\",\"dateModified\":\"2023-07-17T15:44:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/\"},\"wordCount\":4988,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/enable-visual-builder.jpg\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\",\"Learning The Basics\",\"Using The Builder\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/\",\"name\":\"Getting Started With The Divi Builder - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/enable-visual-builder.jpg\",\"datePublished\":\"2017-05-06T18:59:53+00:00\",\"dateModified\":\"2023-07-17T15:44:25+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/enable-visual-builder.jpg\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/enable-visual-builder.jpg\",\"width\":2200,\"height\":1382},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/visual-builder\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started With The Divi Builder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\",\"name\":\"admindocumentation\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"caption\":\"admindocumentation\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started With The Divi Builder - Elegant Themes Documentation","og_description":"Divi is best used in visual mode, allowing you to build your page on the front-end of your website.","og_url":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2017-05-06T18:59:53+00:00","article_modified_time":"2023-07-17T15:44:25+00:00","og_image":[{"url":"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder.jpg","type":"","width":"","height":""}],"author":"admindocumentation","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admindocumentation","Est. reading time":"35 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/#article","isPartOf":{"@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/"},"author":{"name":"admindocumentation","@id":"https:\/\/blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268"},"headline":"Getting Started With The Divi Builder","datePublished":"2017-05-06T18:59:53+00:00","dateModified":"2023-07-17T15:44:25+00:00","mainEntityOfPage":{"@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/"},"wordCount":4988,"image":{"@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder.jpg","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation","Learning The Basics","Using The Builder"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/","url":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/","name":"Getting Started With The Divi Builder - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/blocksylaunch.click\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/#primaryimage"},"image":{"@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/#primaryimage"},"thumbnailUrl":"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder.jpg","datePublished":"2017-05-06T18:59:53+00:00","dateModified":"2023-07-17T15:44:25+00:00","author":{"@id":"https:\/\/blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268"},"breadcrumb":{"@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/#primaryimage","url":"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder.jpg","contentUrl":"https:\/\/blocksylaunch.click\/documentation\/wp-content\/uploads\/2023\/03\/enable-visual-builder.jpg","width":2200,"height":1382},{"@type":"BreadcrumbList","@id":"https:\/\/blocksylaunch.click\/documentation\/divi\/visual-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blocksylaunch.click\/documentation\/"},{"@type":"ListItem","position":2,"name":"Getting Started With The Divi Builder"}]},{"@type":"WebSite","@id":"https:\/\/blocksylaunch.click\/documentation\/#website","url":"https:\/\/blocksylaunch.click\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blocksylaunch.click\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blocksylaunch.click\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268","name":"admindocumentation","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","caption":"admindocumentation"}}]}},"_links":{"self":[{"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/comments?post=814"}],"version-history":[{"count":21,"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/814\/revisions"}],"predecessor-version":[{"id":18186,"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/posts\/814\/revisions\/18186"}],"wp:attachment":[{"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/media?parent=814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/categories?post=814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blocksylaunch.click\/documentation\/wp-json\/wp\/v2\/tags?post=814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}