What are Divi modules and how do we use them?
Divi modules are the content building blocks that you will use to create your website when using the Divi Theme or the Divi builder plugin.
Divi Builder modules (dark grey) can be added into the columns of any standard row (green), which in turn sits inside a column (blue). Divi full-width modules can only go inside a full width section (purple).
Each of the Divi builder module is designed to allow you to easily add specific types of content to your website from basic text through to contact forms and product listings, without having to code them in yourself.
Once you have added a module into the Divi builder you can customize it with your own content and style it within the module settings. Modules (and rows and sections) can then be moved by drag & drop anywhere within your page or saved to use on another page or site.
How many Divi modules are there?
Divi comes pre-loaded by default with 46 modules so you are able to start building your site right out-of-the-box.
37Â of these modules are designed for use within the regular width sections and 9 are only for use within a full-width section.
There are also many 3rd party developers who have created additional custom modules (usually via a Divi plugin) to further extend the building block options and functionality within Divi.
Table of contents: all 46 default modules
Standard and specialty section modules
The following 37 modules can be inserted into any column within the standard and specialty Divi sections.
Accordion
The Accordion module has vertical sections of hidden content that are opened on click, with the previously-opened accordion section being closed as each new one is opened.
Audio
The audio module allows you to add an audio file into your site complete with an audio player with basic player controls to play it.
Bar Counters
The bar counters module allows you to add animated horizontal bar counters but best not to use to show you are 83% good at Photoshop.
BlogÂ
The blog module allows you to add posts from your blog anywhere on the page and offers more styling options than the default blog page.
Blurb
The blurb module combines text and image/icon into one and is one of the most popular modules in Divi. Try some quick CSS copy and pasting to restyle your blurb module with hover effects.
Button
The Button module lets you add a fully customized button anywhere on your page. Control site wide button styles via the theme customizer and edit each instance as required.
Call To Action
The call-to-action module is a combination of a title, body text and a button and is designed to get your visitors clicking
Circle CounterÂ
The circle counter module displays a single number or % that is represented in the animated circle graph.
Code
The Code Module allows you to add code to your page such as plugin shortcodes or static HTML and is available as standard and full width modules.
Contact form
The contact form module allows you to add a contact that can be fully customized including Input Options, Conditional Logic & Field
Countdown Timer
The countdown timer module allows you to add a timer with days, hours, minutes and seconds that counts down to a time you specify.
Divider
The divider module allows you to have a horizontal line and or custom vertical spacing,on your page
Email opt-inÂ
The email opt-in module allows you to easily add an email list or newsletter signup form and connect it you your email program such as MailChimp or Aweber..
Filterable Portfolio
The Filterable Portfolio module allows you to display your projects with the option to live-filter them by category.
Gallery
The gallery module allows you to create and manage image galleries anywhere on your page in either grid or slider style.
Image
The image module lets you add images with optional light-box, animations, filters lazy-load and more .
Login
The login module adds a Divi-style WordPress login form to allow users to log in-to your site without redirecting to a branded WordPress login form.
Map
The maps modules allows you to embed custom Google Maps anywhere on your page.
Number Counter
The number counter displays numbers in with a counting animation, along with your title ad text.
Person
The Person module combines text, an image, and social media links to provide a personal profile.
Portfolio
The Portfolio module allows you to display your projects with options for full-width or grid layout, category selection and pagination.
Post Navigation
The navigation module adds previous and next buttons or text links to your posts for easy navigation..
Post Slider
The Post Slider module allows you to display your blog posts in a slider.
Post Title
The Post Title Module shows the title of your current post, with the option of also showing the post Featured Image and meta data.
Pricing Tables
The pricing table module allows you to create tables of features and pricing for your product or service.
Search
The search module allows you to add a search box anywhere on your site that will search website pages and blog posts.
Shop
The shop module allows you to add woocommerce products anywhere on your site by category with options for display and sorting.
Sidebar
The sidebar module lets you display sidebar widget areas on any page and, unlike standard WordPress sidebars, customize them like any Divi module.
Slider
The slider module lets you add image, text and buttons into slides with options for controls, parallax and video backgrounds.
Social Follow
The social follow module lets you create cusomisable icon links to Facebook, Twitter, Google+ (14 networks total) social media profiles.
Tabs
The tabs module lets you create horizontally tabbed content using the WordPress default (not Divi builder) editor.
Testimonial
The testimonial module lets quickly add a styled quote, name of the author, and a (optional) link to their website.
Text
The text module gives you the standard WordPress text editor to use anywhere on your page.
Toggle
The toggle module allows you to toggle content open and closed – see accordion module for multiple linked toggles.
Video
The video module lets you embed videos from upload or URL and customize the thumbnail image and play button.
Video Slider
The video slider module lets you embed multiple videos from upload or URL into a slider and customize video thumbnail images and play button.
Full Width section modules
The following 9 modules can only be inserted into a full width Divi section.
Fullwidth Code
The full-width code module is the same as the code module but can be added to full-width sections.
Fullwidth header
The full-width header module adds header with title, sub header, content and 2 buttons that can optionally be made full-screen too.
Fullwidth Image
The full-width image module is the same as the image module but can be added to full-width sections.
Fullwidth Map
The fullwidth map module is the same as the map module but can be added to fullwidth sections.
Fullwidth Menu
The fullwidth menu module adds a full width menu anywhere on your page and loads menu from saved WordPress menus.
Fullwidth Portfolio
The full-width portfolio module is the same as the portfolio module but can be added to full-width sections.
Fullwidth Post Slider
The fullwidth post slider module is the same as the posts slider module but can be added in a full width section.
Fullwidth Post Title
The fullwidth post title module is the same as the posts title module but can be added in a full width section.
Fullwidth Slider
The fullwidth slider module is the same as the slider module but can be added in a full width section.
Have you used or at least tried all 46 Divi modules?
Until I wrote this post, I must admit I hadn’t tried all 46 on the list, but now I have and hopefully will start to use a few more that I may not have thought about prior. Divi really does have a building block module for anything you can think of, so give them a try!
Affiliate Disclosure: Links on this page may contain affiliate code which means the owner of this website will be paid a commission on any sales that result from purchases made via these links. If you choose to purchase via links on Divi Theme Examples you will never be charged any extra and you will be helping to keep this website a forever free resource for the Divi community.
Comments
The comments module allows you to have your blog comment anywhere on your page, rather than just below your post content as by default.