Skip to main content

Have questions? I can help!

< All Topics
Print
Table of Contents

Understanding Sections, Rows & Modules 

(a.k.a. how your page is built behind the scenes!)

When you edit your website with Divi, everything you see — from text and images to buttons and forms — is built using three main building blocks: Sections, Rows, and Modules.

Think of it like building with LEGO:

  1. Sections are the big blocks that hold everything together (represented in blue) .
  2. Rows (green) divide your section into columns.
  3. Inside the rows are Modules (black) , the actual content pieces — like text, photos, buttons, or contact forms.

Once you understand these three, you can confidently edit or add new parts to yor pages.

Note:
If you are using Divi4, click here to view Understanding Sections, Rows & Modules in DIVI4

Divi 5 - The Section

Here is what it actually looks like in Divi5 (1: Section, 2: Row, 3: Modules)

sections, rows, and modules

 

Sections – The Big Containers

Sections are the largest building blocks on your page.
They create horizontal “stripes” or blocks that stretch across your page — for example, a hero banner, an about section, or a contact area.

row structures

    To edit/add a New Section

    • Hover your mouse near the top or bottom of an existing section (or an empty page).

    • A blue "+" button will appear — this adds a new Section.

    • Click the blue "+" button.

    Add a Row Inside the Section

    • After you add a Section, Divi will immediately ask you to add a Row.

    • Rows are where you decide how many columns you want (like 1 column, 2 side-by-side, 3, etc.).

    • Select a column layout that fits what you need.

      • Example: 1 column for full-width text.

      • Example: 2 columns for text + image

    Add a Module Inside the Row

    • After adding a Row, hover over the empty column inside the Row.

    • A gray "+" button will appear inside the column.

    • Click the gray "+" button to add a Module.

    • The Module list will pop up.

      • You can scroll through it or search for the module you want (like "Text," "Image," "Button," etc.).

    • Click on a Module to insert it.

    content modules in divi 5

    Alternatively you can also choose to "Add from Library" and choose the saved section/row or module from the template or your library.

    Customise the Module

    • As soon as you add the Module, its Settings panel will open.

    • Use the three tabs:

      • Content – for text, images, links.

      • Design – for colors, fonts, layout.

      • Advanced – for custom CSS (optional).

    • After you make your changes, click the green checkmark to Save the module.

    Save Your Page

    • When you’re done editing:

      • Click the  “Save/Publish” button at the top-right of the screen.

    • Always save before you exit the Builder!