Skip to main content

Have questions? I can help!

< All Topics
Print
Table of Contents

What counts as an "element" in Divi 5

When we say “elements” in the Divi 5 Visual Builder, we mean:

  • Sections – big horizontal blocks of your page.

  • Rows – layouts inside sections (1–4 columns and nested rows).

  • Columns – vertical slices inside rows.

  • Modules – content blocks (Text, Image, Button, Slider, etc.).

  • Nested Rows – rows placed inside columns for more complex structures.

  • Module Groups – grouped modules treated like a single reusable block.

You add, duplicate, and remove all of these in roughly the same ways.

 

Add new elements to the canvas

Divi 5 - Add Elements to the page

 

On the canvas, you use the colored plus icons to add new elements:

  • Add Section – Blue Plus icon at the bottom of the page or between sections.

  • Add Row – Green Plus icon inside a section to choose a column layout.

  • Add Module – Black Plus icon inside a column (or inside a nested area).

Basic workflow:

  1. Hover where you want something new.
  2. Click the + icon in the correct context (section, row, or module).
  3. Pick the structure (for rows) or the module type (for modules).

      Add elements using Layers and Wireframe view

      Sometimes you can’t easily click the right spot on the canvas to add a new element. That’s where Layers View and Wireframe View help.

      • Layers View

         

        Divi 5 - Use the Layers View to add elements to the page

         

        • Open Layers from the builder's left sidebar by clicking on the Layer's View icon.

        • Each section, row, column, module, nested row, or module group appears as a "layer".

        • Right-click on any existing elements in the Layer's View panel

        • From the contextual menu, choose Add Element, and where you want to insert it:

          • Add Element Above - will insert the chosen element above the selected one

          • Add Element Inside - will insert the chosen element as a nested element inside the selected one.

          • Add Element below - will insert the chosen element after the selected one.

      • Wireframe View

        • Switch to Wireframe from the builder's left sidebar by clicking on the Wireframe's icon.

        • The page shows as stacked labeled blocks.

        • Use the + icons between blocks to add new sections, rows, or modules where you want them.

      Layers and Wireframe are perfect for long pages or tight layouts where the on-canvas icons overlap.

       

      Duplicate elements

      Divi 5 - Duplicate an existing element in Visual Builder

       

      Duplication is the fastest way to reuse design work. Every element’s hover toolbar has a duplicate icon.

       

      Duplicate using the element's action icons:

      1. Hover a module, row, or section until its toolbar appears.
      2. Click the duplicate icon.

        Duplicate using the right-click contextual menu:

        1. Right-click on the element you want to duplicate.
        2. From the contextual menu, choose Duplicate.

        Duplicate using keyboard shortcut:

        1. Click on the element you want to duplicate to select it.
        2. Press Ctrl / Cmd + Shift + D.

        Remove Elements from the canvas

        Divi 5 - Delete an element from the page's layout

         

        To delete directly on the canvas:

        1. Hover the element (section, row, module).
        2. Click the Trash can iconin its action icons.

        The element and its content disappear from the layout.

         

        For nested rows or module groups, the delete icon removes the whole nested structure or group at once.

        Rearrange Elements

        • Sections: Hover over the section you want to move, and look for the blue cog icon  Click and drag it to a new location on the page.

        • Rows: Hover over the row you want to move, and use the green cog icon to reposition it within the section.

        • Modules: Hover over the module (e.g., text, image, button) and drag it to a different spot within the row or section.

        Once you've dragged the element to the desired location, release the mouse button to drop it the. The page will automatically updated