x
Bookmark

Divi – SRMs Overview

Video Tutorial

Script & Screenshots

In this video I’m going to give you an overview of Sections, Rows, and Modules.
The builder uses these three as its main building blocks.   Within sections (highlighted in red on this page), you can add rows (highlighted in orange), and within rows (highlighted in pink), you can add modules.  Using these allow you to easily create countless page layouts.

I’ll start with Sections.  These are the largest building blocks used in designing layouts. These are used to create the top-level areas in your website.  You have to have at least one of these to be able to add any content to your website.  When converting to the Divi Builder, it will automatically create you a standard section.

There are three types of sections: Standard, Full Width, and Specialty.  Standard sections have a blue sidebar.  The section on this slide is standard.  This means it only goes the width of the content area.

Each section will have three options on its sidebar.  The Edit button is at the top and highlighted in yellow.  It is three lines stacked on top of each other.  The next one is the Clone button.  This one is a square with another square underneath it.  I have this one highlighted in orange.  The last one is the delete button.  This is a X and is highlighted in pink.

The Full width section looks very similar to the standard, other than the left sidebar is purple.  That’s how you can distinguish them apart from each other.  Full width sections give you access to the full width Modules. These modules act a little differently, because they take advantage of the full width of the browser. Full width modules can only be placed within Full width sections.  Unlike normal section, there is no concept of rows or columns, since the full width modules always takes advantage of 100% of the screen. Full width modules are a great way to add headers, slideshows, and a visual break to the middle of the page.

Specialty sections were created to allow for more advanced column structures. 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.  Specialty sections have a red sidebar color to help you differentiate from the other section types.

The result is the ability to create just about any column structure that you could imagine.  And no matter what structure you choose, the combination will look great.  You can choose from any of the offered layouts that you see here.

Next up are Rows.  Rows are the various column layouts that can placed inside of sections.   You can place any number of rows within a section.  Rows settings can be used to greatly increase the variety of layouts built with the Divi Builder since they create the structure that your modules are housed in.  Rows have a teal colored sidebar.

Each row will have four options on its sidebar.  The Edit button is at the top and highlighted in yellow.  It is three lines stacked on top of each other.  The next one is the Clone button.  This one is a square with another square underneath it.  I have this one highlighted in orange.  Next is the Change Structure button.  This one is 3 rectangles next to another.  I have it highlighted in red.  The last one is the delete button.  This is a X and is highlighted in pink.

There are many different Row Types to choose from.  Full width, half and half, thirds, and many more.  Once you choose a row Type, you can then place modules into the selected column structure. There is no limit to the number of modules you can place within a column.

Last are Modules.  These are the visual elements that make up your website.  Every module that Divi has can fit into any column width and they are also mobile responsive.

Each module will have three options on it.  Similar to the sections.  The Edit button is at the top and highlighted in yellow.  It is three lines stacked on top of each other.  The next one is the Clone button.  This one is a square with another square underneath it.  I have this one highlighted in orange.  The last one is the delete button.  This is a X and is highlighted in pink.

Depending on the type of column you are adding the module to, will determine what options will show up for the modules.  With the full width section, you will have fewer options.  These modules are the only ones that work well with being full width.

For the standard and specialty sections, these are the modules you’ll have access to add to them.  There’s more than 40 to choose from.  I’ll get into more detail about each of the modules in another video.

That’s it for this video.  I’ll see you in the next one.

WordPress Divi Theme
Purchasing & Installing
   Purchase Divi Theme   (7:46)
   Installing Theme   (1:44)
Divi Builder
  Default Editor vs Divi Builder   (3:18)
   Page Settings   (1:05)
   Post Settings
Sections, Rows, Modules (SRMs)
  SRMs Overview
   SRMs Settings Tabs
  Adding SRMs
  Cloning SRMs
  Deleting SRMs
  Moving SRMs
  Changing Structures of Rows
   Types of Modules
   Types of Full Width Modules
Theme Options
   General Theme Options
   Navigation Theme Options
   Layout Theme Options
   Ads Theme Options
   SEO Theme Options
   Integration Theme Options
   Updates Theme Options
Customizers
   Theme Customizer
   Module Customizer
Role Editor
   Role Editor Overview
   High Level Theme Privileges
   Builder Interface
   Library Settings
   Settings Tabs & Types
   Module Use
  Portability
Library
   Divi Library
   Global Items
   Premade Layouts
  Saving to the Library
  Loading from Library
X

Forgot Password?

Join Us

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.