Every time when you add a module, row or section, you will see a panel with the following tabs: Content, Design, and Advanced. These three tabs will help you to customize your layouts and adjust every detail. Most often used is the Design tab, where you can try out different styles and options.

Design Setting

Design settings can be different, depending on the module. They are divided into groups and are easy to edit. You can change typography, colors, size and other details available for your module. You can also use the Search Options bar to find a specific setting.

To access the Design settings, you need to either add a new section, row or module, or just click on the wrench icon of an element.

The Tabs module is used to organise content in a user-friendly structure. Its most common use is for presenting features of a product.

  1. To add a tabs module in Divi, go to Dashboard/Pages and click on the target page or Add a new page. Then click on the Build on the Frontend button. If you have added a new page and you don't see this button, you have to click on the Use the Divi Builder button. For more information, check out this article on how to edit and add new pages.
  2. Once you have entered the Visual Builder, you have to add a Row to the page or click on the gray plus button inside an existing Row to add a new module. There you will see a list of modules. You can type "tabs" in the search bar and the Tabs module will appear on top. Click on it to add it.

The toggle module is mostly used to improve user experience when a lot of information has to be presented on one page.

  1. To add a toggle module in Divi, go to Dashboard/Pages and click on the target page or Add a new page. Then click on the Build on the Frontend button. If you have added a new page and you don't see this button, you have to click on the Use the Divi Builder button. For more information, check out this article on how to edit and add new pages.
  2. Once you have entered the Visual Builder, you have to add a Row to the page or click on the gray plus button inside an existing Row to add a new module. There you will see a list of modules. You can type "toggle" in the search bar and the Toggle module will appear on top. Click on it to add it.
  3. After you have added the Toggle module, a window with settings will show up. From there you can add content and edit the design settings.

The Blurb module is a combination of text and image. It can be used to describe key features or skills, or to present an important piece of information on your website.

  1. To add a blurb module in Divi, go to Dashboard/Pages and click on the target page or Add a new page. Then click on the Build on the Frontend button. If you have added a new page and you don't see this button, you have to click on the Use the Divi Builder button. For more information, check out this article on how to edit and add new pages.
  2. Once you have entered the Visual Builder, you have to add a Row to the page or click on the gray plus button inside an existing Row to add a new module. There you will see a list of modules. You can type "blurb" in the search bar and the Blurb module will appear on top. Click on it to add it.
  3. After you have added the blurb module, the Blurb Settings will show, where you can add your text and image and edit the design settings.

  1. To add a button module in Divi, go to Dashboard/Pages and click on the target page or Add a new page. Then click on the Build on the Frontend button. If you have added a new page and you don't see this button, you have to click on the Use the Divi Builder button. For more information, check out this article on how to edit and add new pages.
  2. Once you have entered the Visual Builder, you have to add a Row to the page or click on the gray plus button inside an existing Row to add a new module. There you will see a list of modules. You can type "button" in the search bar and the Button module will appear on top. Click on it to add it.
  3. After you add the Button module, a window with settings will show up. From there you can edit the design and text of the button, and add a link to it.

  1. To add a text module in Divi, go to Dashboard/Pages and click on the target page or Add a new page. Then click on the Build on the Frontend button. If you have added a new page and you don't see this button, you have to click on the Use the Divi Builder button. For more information, check out this article on how to edit and add new pages.
  2. Once you have entered the Visual Builder, you have to add a Row to the page or click on the gray plus button inside an existing Row to add a new module. There you will see a list of modules. You can type "text" in the search bar and the Text module will appear on top. Click on it to add it.
  3. After the module is added, the Text Settings will appear, where you can add your text and edit its settings .

  1. To ADD NEW IMAGE on a Page, open the page, load the front end view of the builder, find the Image Module with the image you want to replace, or add a new Image Module. Like all elements in the visual builder, settings can be accessed through the second icon, the wrench . Settings will open in a box and you will see the image. Click on it to replace it.
  2. When you click on the image inside the Image module, it will open the Media Library.
  • If you already have your new image there, select it and click the Upload button in the lower right corner.
  • If you don’t have the image, you can drag it from your computer directly in the Media library. When the upload process is finished, use the Upload image button on the lower right. Then click the green check marked box on the Image module settings and save with the Save button on the lower right.

To access and edit the footer of your website, go to Dashboard/Divi/Theme builder. There you will see the green footer module, which after clicking on the pen icon on the left, can be edited like any other page, built with Divi.

  1. In WordPress there are different Post Types and the most common are Pages (used for static content) and Posts (used for dynamic content). If you want to EDIT a Page, once you are logged in, go to Pages, find your page, hover on top of it and click Edit.
  2. Below you can see the Divi builder, which is a visual drag&drop editor. It has different working modes, but we suggest to use BUILD ON THE FRONT END blue button to continue working on the page, as it looks on the front end on your website. And DO NOT use Return to Standard Editor button, this will disable Divi builder and ruin the layout of your page.
  3. After you have switched to the Front End mode of Divi builder, you will see the page with the editing tools on top. When you hover any given element, it shows the toolbar from where you can access it and edit the contents. From the toolbar you can Move, Edit, Duplicate, Save as template and Delete any element. Edit is the second icon, the wrench. Inside you can find dedicated fields to edit the texts, links, style with different fonts and colors, etc. To SAVE your work, press the purple circle button at the bottom center of the page and use Save button.
  4. The purple circle button at the botton center of the page enables several views of the page, incuding the option to preview how it will look on Desktop, Tablet and Mobile devices. It also has the Wireframe view, which helps to understand the PAGE STRUCTURE. It has SECTIONS (the blue containers), ROWS (the green containers) with COLUMNS, and all kinds of MODULES (grey boxes). The page content is in the modules, while the backgrounds are usually in the SECTIONS.
  5. To ADD A NEW PAGE, go to Dashboard/Pages/Add new, type the page Title in the dedicated field on top and turn on the Divi builder. It will open 3 boxes, of which you should select the third one, Clone existing page. Then select an existing page with a layout, which will work for you. Then you can publish the page, and proceed with editing the page content. You can also use Drag&Drop to move elements around, or duplicate any elements inside the page, if you need to.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram