If you’re diving into the world of Divi, one of the most powerful and flexible WordPress themes, you’ll quickly encounter its core layout structure: Sections, Rows, and Modules. Think of these three components as the fundamental building blocks of every Divi-powered website.
Understanding their individual roles and how they interact is absolutely crucial for creating beautiful, organized, and responsive web pages. Let’s break them down.
The Divi Hierarchy
Imagine you’re building a house from scratch. Bear with me as this analogy helps to understand Divi’s layout hierarchy:
- A Section is like the foundation or a new floor of your house. It’s the broadest, full-width container that sets the stage for a distinct part of your page.
- A Row is like the rooms within that floor. Rows allow you to define the internal structure and column layout of your content within a Section.
- A Module is like the furniture and decor you put inside those rooms. These are your actual content elements, like text, images, buttons, and more.
This clear, tiered structure is what gives Divi its incredible flexibility and control over your website’s design and responsiveness.
Sections
What is a Section?
A Section is the largest and most fundamental building block in Divi. It’s a full-width container that stretches across the entire width of your browser window. You should think of a Section as a distinct block of content on your page, serving as a header area, a “services” block, a footer, or any other major segment.
Key Characteristics
- Full Width: Sections always span 100% of the browser width, regardless of the content inside. This makes them ideal for creating visually striking, edge-to-edge designs.
- Background Options: You can apply unique background colors, images, gradients, or even videos to an entire Section. This is incredibly powerful for creating clear visual separation between different parts of your page and establishing distinct moods or branding.
- Padding & Spacing: Sections come with their own padding controls, allowing you to create space above and below the content within that specific section.
- Structural Separation: They are primarily used to break your page into distinct, visually separate areas, making your content easy to digest.
When to Use a Section (Best Use Cases)
- To create a new major content block: Every time you want to introduce a new major topic or a distinct visual area on your page, you should start with a new Section.
- Examples: An “About Us” section, a “Services” section, a “Testimonials” section, or a “Contact Us” section.
- To apply unique backgrounds: If you want a specific part of your page to have a different background color, image, or video from the surrounding content, place it within its own Section.
- Examples: A captivating hero banner with a parallax image background, or a compelling call-to-action area featuring a dark background.
- For full-width design elements: Whenever you need an element to span the entire width of the screen, like a broad header or a large promotional banner, a Section is your go-to.
- To define distinct page regions: Sections are excellent for logically and visually organizing your content, which significantly improves the user experience by making your page easier to scan and understand.
- When using “Specialty Sections”: Divi also offers “Specialty Sections” for more complex, multi-column layouts that don’t fit the standard row structure (e.g., integrating sidebars with content areas). While more advanced, they still function as a primary, top-level container.
Rows
What is a Row?
A Row is a container that lives inside a Section. Its primary purpose is to hold your Modules and to define the column structure within that Section. Unlike Sections, Rows are not full-width by default; their content is typically constrained within a defined content area (though this can be adjusted in Divi’s settings).
Key Characteristics
- Column Structure: Rows are where you define the number and proportion of columns (e.g., a single full-width column, two equal columns, a 1/3 + 2/3 column layout, etc.). This is where you bring your design vision to life.
- Content Alignment: Content within a Row is typically aligned to the center of the page, contained within the defined content width.
- Padding & Spacing: Rows have their own padding and margin controls. These allow you to fine-tune the spacing between content elements within a Section, providing granular control over your layout.
- Module Container: It’s important to remember that Modules (your actual content like text, images, and buttons) can only be placed inside a Row. You can’t put a Module directly into a Section.
When to Use a Row (Best Use Cases)
- To create column layouts: This is the most common use of Rows. Every time you need to arrange content side-by-side (e.g., an image next to a block of text, three feature boxes in a row), you’ll use a Row with the appropriate column layout.
- Examples: A Row with two columns for an image on the left and a descriptive text on the right. A Row with three columns for service icons and their corresponding short descriptions.
- To group related Modules: If you have several modules that logically belong together and you want to control their spacing or background as a group within a Section, put them all in a single Row.
- Example: A Row containing a heading module, a text module, and a button module, all related to a specific call to action.
- To fine-tune vertical spacing within a Section: While Sections provide overall spacing, Rows allow you to add more granular vertical space between different groups of modules within the same Section, ensuring perfect visual balance.
- To apply a background to a specific content block within a Section: While Sections offer full-width backgrounds, you might want to give a background to only a portion of content within a Section (e.g., a highlighted testimonial box within a larger testimonials section). You can achieve this by applying a background to a Row.
- For responsive control: Divi’s powerful responsive options are heavily tied to Rows and Modules, allowing you to easily adjust column stacking and visibility for different screen sizes (desktop, tablet, mobile).
Sections, Rows, and Modules Working Together
Here’s the takeaway:
- Sections are your big, bold containers. They define the main blocks of your page, often with distinct backgrounds or overarching purposes. When you want a completely new ‘look and feel’ for a part of your page, you create a new Section.
- Rows are your internal organizers. They live inside Sections and are all about laying out your content in precise columns. If you want to put text next to an image, or create a grid of services, you’re primarily using a Row.
- Modules are your actual content. They’re the individual pieces – the text, images, buttons, videos – the specific elements that always go inside your Rows.
By clearly understanding and utilizing Sections, Rows, and Modules correctly, you’ll gain mastery over Divi’s layout system. This mastery will enable you to create incredibly organized, visually appealing, and highly functional websites that truly stand out.
What aspect of Divi’s layout system are you most excited to experiment with first?
