We all use them… contact forms, sliders, newsletter opt-ins, portfolios and all the other bits and pieces that add creativity and essential functionality to your website.

With most WordPress themes, you have to add them using plugins or pay a developer to add them for you.

With the Divi theme you can forget about plugins and developers because Divi comes with Modules, which allow you to add just about anything you can think of.

At the moment, there are forty one Divi Modules, and I say at the moment because when I first published this article… there were twenty.

That means that this post won’t be “the complete guide to Divi Modules” for very long, but don’t worry because I’ll keep updating it.

Editor’s Note Jan 2017:

This post was originally published in May 2014 and has been completely revamped and updated for accuracy and comprehensiveness.

When this article was first published, there were 20 Modules, there are now 41.

The Divi Modules in alphabetical order… all 41 of them!

The current Modules are listed below in alphabetical order:

Modules: #01 to #10

  1. Accordion Module
  2. Audio Module
  3. Bar Counters Module
  4. Blogs Module
  5. Blurb Module
  6. Button Module
  7. Call To Action Module
  8. Circle Counter Module
  9. Code Module
  10. Comments Module

Modules: #11 to #20

  1. Contact Form Module
  2. Countdown Timer
  3. Divider Module
  4. Email Optin Module
  5. Filterable Portfolio
  6. Fullwidth Header
  7. Fullwidth Slider
  8. Fullwidth Map
  9. Fullwidth Menu
  10. Fullwidth Portfolio

Modules: #21 to #30

  1. Images Module
  2. Login Module
  3. Maps Module
  4. Number Counter
  5. Person Module
  6. Portfolio Module
  7. Post Navigation
  8. Post Slider Module
  9. Post Title Module
  10. Pricing Tables Module

Modules: #31 to #41

  1. Search Module
  2. Shop Module
  3. Sidebars Module
  4. Sliders Module
  5. Social Follow Module
  6. Tabs Module
  7. Testimonials Module
  8. Text Module
  9. Toggles Module
  10. Video Module
  11. Video Slider Module

I’m going to look at all forty-one modules, give a brief description of each and include a video if one is available: so hang on to your hats, here we go.

Sections, Rows and Modules – the awesome Divi Builder

Sections are the basic building blocks of the fabulous Divi builder. They are horizontal stacking blocks that allow you to group your content into visually discrete areas.

Rows sit inside of Sections and you can place any number of Rows in a Section. There are many different Row Types to choose from. Once you define a Row Type, you can then place Modules into the selected column structure.

Modules are the visual elements that make up your website. Every Module that Divi has can fit into any Column width and they are all fully responsive.

Divi content Modules: #01 to #10

 
Divi content modules 01 to 10

#01 Accordion Module

The accordion module is a great way to consolidate information within a single system. Accordions are similar to tabs, except that the items are displayed within a vertical list.
When a new item within the list is opened, the previously-opened item is closed and the new item’s content is displayed.


#02 Audio Module

The Audio Module allows you to embed an audio file + a custom audio player anywhere on your page.
This is a great feature for musicians who want to show off their latest creations, or podcasters who want to post their latest shows.


#03 Bar Counters Module

Animated Bar Counters are a fun and effective way to display stats to your visitors. Animation is triggered using lazy-loading to make browsing the page truly engaging.
You can place as many counters as you like inside of this Module.


#04 Blog Module

With Divi, even blogs are a Module and your “blog” can be placed anywhere on your website and in various formats.
You can combine Blog and Sidebar Modules to create classic blog designs.
1 column, 2 column or 3 column blogs can all be built using Blog and Sidebar Modules.


#05 Blurb Module

The Blurb Module is a simple and elegant combination of text and imagery. Blurbs are a great way to showcase small bits of important information and are often used in rows to display skills or features.
Blurb Modules can be placed in any column that you create.


#06 Button Module

The Button Module allows you to quickly and easily add buttons anywhere on your pages and posts.
Using the Divi Advanced Design Settings, there are countless different button styles that you can create.


#07 Call to Action Module

It’s important to give your visitors a clear call to action, whether you are trying to get them to purchase your product or contact you for a quote.
The CTA Module is a simple combination of a title, body text and a button, which when combined with a vibrant background colour, is guaranteed to catch your visitor’s eye.


#08 Circle Counter Module

The Circle Counter Module provides you with a beautiful and visually-compelling way to display a single statistic.
As you scroll down, the number counts up and the circle graph fills to the percentage specified.
Multiple Circle Counter Modules on a single page are a great way to give your visitors a fun way to learn about your company or your personal skills.


#09 Code Module

The Code Module is a blank canvas that allows you to add code to your page, such as plugin shortcodes or static HTML.
If you would like to use a third-party plugin, for example a third party slider plugin, you can simply place the plugin’s shortcode into a standard or fullwidth code module to display the item unimpeded.


#10 Comments Module

The Comments Module makes it easy to add a comment form anywhere on your post or page. This means you are no longer limited to having comments displayed at the bottom of your post, and can instead gain full control over the order of elements using the Divi Builder.
You can also use Divi’s advanced design settings to customize the contact form in any way you like.


Text Modules aren’t just Text Modules… no really!

Don’t think of the Text Module as just a way to add text, think of it as a way to enable the standard WordPress Post Editor and all of the features that it provides.

When you edit a Text Module, you can do everything you can do with a page or post. In addition, you can move the element around your page and place it in various column layouts using the Divi Builder.

You can use the Text Module in ways that you never thought possible. Elegant Themes

Divi content Modules: #11 to #20

 
Divi content modules 11 to 20

#11 Contact Form Module

I’m a Contact Form 7 man but with Divi you can forget about using a plugin you can use the Contact Form Module. It looks fabulous and it even comes with an optional captcha – I use it on my Divi theme contact page.


#12 Countdown Timer Module

The Countdown Timer Module creates a visual timer that counts down to a specific date. This is great for creating a “coming soon” page to build anticipation for a new product or service.
When combined with a “blank page,” this Module can also be used as a great “coming soon” landing page/maintenance mode page.


#13 Divider Module

The Divider Module is perfect for creating either a horizontal line rule, custom vertical spacing, or both.
Using this element is great for adding structure and organization to your site.


#14 Email Optin Module

Growing your mailing list is easy using Divi’s Email Optin Module. This module supports MailChimp, Aweber and Feedburner integration.


#15 Filterable Portfolio Module

The Filterable Portfolio Module allows you to display your most recent projects in either a Grid or Standard fashion.
The filterable portfolio looks just like the normal portfolio module, except that it loads new projects using an Ajax request, and it includes options to filter the project list by categories. When a particular category is selected, the list of projects is regenerated with a new list of projects from the selected category.


#16 Fullwidth Header Module

The Fullwidth Header Module makes it easy to add beautiful, colourful headers to the top of your pages, or anywhere on your page, if you so choose.
This Module can only be placed within fullwidth Sections.


#17 Fullwidth Slider Module

The Fullwidth Slider Module makes your slides span the entire width of the browser. The slider supports both parallax backgrounds and video backgrounds.
This Module can only be placed within fullwidth Sections.



#18 Fullwidth Map Module

The Fullwidth Map Module makes it easy to embed custom Google Maps anywhere on your page. You can add unlimited pins to the map and define a custom viewport starting location.
The Map Module also comes in a Normal Width format – see #23 below.


#19 Fullwidth Menu Module

The Fullwidth Menu Module lets you place a navigation menu anywhere on the page. This can be used to add a second menu down the page or it can be used in conjunction with the Blank Page feature to move your main navigation down the page.
You could, for example, move your menu down below your first section to greet people with a large splash image.
This essentially allow your header navigation to move around the page using the builder.


#20 Fullwidth Portfolio Module

The Fullwidth Portfolio Module works just like the normal Portfolio Module, except that it displays your project in a beautiful fullwdth fashion.
It also comes with some unique new layouts: Grid & Carousel.
The Module works by displaying a list of your most recent Projects and can be used by designers and artists that want to display a gallery of their most recent work.


Adding a Module

Once you select a Row type, you’ll be prompted to insert Modules into that Row.

All you have to do is click ‘Insert Module’ and select the Module you want from the Divi Module list.

Once you’ve selected a Module you will be brought to that Module’s configuration page where you can add your own Module specific information.

And that… is how you add a Divi Module!

Divi content Modules #21 to #30

 
Divi content modules 21 to 30

#21 Image Module

The Image Module makes it easy to add images anywhere on the page. All images support lazy-loading, and come with 4 different animation styles that make browsing your website fun and engaging.
Image Modules can be placed in any column that you create, and their size will be adjusted to fit.


#22 Login Module

The Login Module displays a WordPress login form, styled in the Divi fashion, anywhere on your page.
If you are using WordPress as a membership system, then adding a login form directly to a page can be just what you need.
It also means that you don’t have to redirect visitors to the branded WordPress login form that lives outside of your website’s theme.


#23 Map Module

The Map Module makes it easy to embed custom Google Maps anywhere on your page. You can add unlimited pins to the map and define a custom viewport starting location.
The Map Module also comes in a Fullwidth format – see #18 above.


#24 Number Counter Module

The Number Counter Module is a great way to display numbers in a fun and engaging way. This Module is commonly used to display statistics about yourself or your company.
For example, display your customer count or Facebook followers is a great way to showcase social proof.


#25 Person Module

The Person Module is the best way to create a personal profile block. This is a great Module to use on About Me or Team Member pages where you want to create a bio of individual people.
It combines text, imagery and social media links into a single cohesive Module.


#26 Portfolio Module

The Portfolio Module allows you to show off your work anywhere on your site. Using this Module, you can choose from premade portfolio layouts or you can create your own.


#27 Post Navigation Module

Using the Post Navigation Module, you can place automatic links to your next and previous blog posts to encourage users to continue browsing your website.


#28 Post Slider Module

The Post Slider Module makes it easy to add featured blog posts to the top of your page in a standard slider format.
This Module is a great compliment to the Divi Blog Module.


#29 Post Title Module

The Post Title Module displays the title of your current post and optionally, the post Featured Image and meta data, in an elegant fashion.
This allows you to create unique looking posts when building your posts using the Divi Builder.


#30 Pricing Tables Module

The Pricing Tables Module makes it easier than ever to create pricing tables for your online products.
Create as many tables as you want, and control the pricing and features of each. You can even feature a particular plan to increase conversions.
Even if your Module includes more than one pricing table, it will be treated as one Module, and can be placed into any column size.


Check out my other Divi posts

If you want to know more about the Divi Pagebuilder theme, then please check out my other posts:

An introduction to the Divi theme: An overview of the awesome Divi Builder

Save, import and export Divi layouts: Saving, importing and exporting Divi layouts

An introduction to Divi Sections: The creative power of Divi Sections

The Parallax effect in Divi Sections: Divi Sections and how to use the parallax effect like a pro

A sneak peek at the features of Divi 2.0: Divi theme version 2.0: Release date announced

Hope you find them useful when building your Divi website.

Divi content Modules #31 to #41

 
Divi content modules 31 to 40

#31 Search Module

Using the Search Module, you can add a search form anywhere on your website instead of being limited to use the WordPress search widget in your sidebar and footer.


#32 Shop Module

Get your online store up and running in no time at all with the Shop Module. You can choose from a couple of premade store layouts and the Shop Module lets you sell anywhere on your site.
Divi supports WooCommerce, which gives you the power to quickly create a fully-capable online storefront.


#33 Sidebar Module

Divi lets you create an unlimited number of widget ready areas on the fly. Sidebars can then be added to any page, allowing you to create unique sidebars for different section of your website.


#34 Sliders Module

Sliders can be placed anywhere, spanning the full width of whatever column structure they are in. Divi sliders support parallax backgrounds, as well as video backgrounds.


#35 Social Follow Module

The Social Follow Module lets you create icon-based links that point to your online social profiles, such as Facebook, Twitter and Google+.
You can add links to multiple social profiles within each Module and add the Module anywhere on the page.


#36 Tabs Module

The Tabs Module is a great way to consolidate information and improve user experience on your page. You can create any number of tabs that will look great inside any sized column.
Any kind of content can be placed within a tab as tab content is controlled using the standard WordPress post editor.


#37 Testimonials Module

The Testimonials Module is a great way to encourage trust from your visitors. Using the Divi testimonial widget, you can quickly add testimonials to your join & sales pages. Testimonials are usually compelling quotes from your customers.
Each testimonial has a quote, the name of its author, and a link their website (which is optional).
Testimonials are effective when used in conjunction with the Pricing Tables Module on sales pages.


#38 Text Module

The Text Module allows you to add text anywhere on a page. Text Modules can be placed within any column type and when combined with other Modules, they make for a truly dynamic page.
When you add a Text Module, you are given all of the editing capabilities of a normal WordPress page.
The Text Module can be used to create a small piece of text within a complex layout, or it can be used in a full width column to create an entire page.


#39 Toggles Module

The Toggles Module allows you to consolidate information and improve user experience on your page.
You can create any number of toggles and they look great inside any sized column.


#40 Video Module

Adding videos to your page in Divi is simple using the Video Module.
The Module allows you to embed videos from just about any source, as well as customize the thumbnail image and play button to add a cleaner style to the embed.


#41 Video Slider Module

The Video Slider Module makes it easy to add a Video Slider to your page. This is a great way to organize collections of videos from just about any source.
The Module also allows you to customize video thumbnail images and play button to add a clear, customer style to your embeds.


Divi Is Our Most Powerful, Flexible & Beautiful Theme Yet
Divi is completely different than any other theme you will find in our collection. With Divi, everything is built using the builder.
Each piece of your website is a building block that can be customised and arranged in any number of ways. This method leads to complete control, and truly unique and dynamic pages.
Where you have been confined to a single layout structure with our previous themes, Divi breaks down the design into individual elements with unlimited possibilities.
Nick Roach – Elegant Themes

Add the flexibility of Divi and the power of Divi Modules to your website

That’s it: the full and updated A to Z of Divi Modules.

You now know how easy it is to add contact forms, sliders, newsletter opt-ins, and just about anything else you’ll ever need, to your website using the fabulous Divi Modules.

Permanent offer for 10% off Divi / Elegant Themes new memberships and account upgrades

If you’d like your website to have the flexibility of the Divi Pagebuilder theme plus the power of Divi Modules, then please feel free to use our permanent 10% off discount below.

The deal applies to both new memberships (Developer license only) and account upgrades and you can take advantage of it anytime you like.

divi 2.7 sale logo

Get 10% Off New Memberships & Account Upgrades!

This is a permanent offer for new memberships (Developer license only) and account upgrades so even if you missed all the other Elegant Themes “time limited” deals… this one will always be waiting for you.

Join today for 10% off

Upgrade today for 10% off

Credits:
My thanks and gratitude to Elegant Themes for the videos and graphics used in this post and for offering this generous 10% off deal.
 

Pin It on Pinterest

Share This