Divi – Modules
Script & Screenshots
In this video I’m going to go through a quick description of each of the modules.
The first module type is the Accordion. The accordion module is a great way to consolidate information within a single system and improve user experience on your page. Accordions are very 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. You can create any number of toggles within an accordion that will look great inside any sized column. These work great for FAQ pages, especially if you have a lot of questions. It will help keep the page cleaner and not quite as long.
Here’s a sample of the accordion module.
The audio module allows you to embed an audio file plus a custom audio player anywhere on your page. The audio player assumes the clean/modern style. This is a great feature for musicians who want to show off their latest creations, or podcasters who want to post their latest shows.
Here are some examples of the audio module being used. You can change the size of this module by putting it in a smaller column.
The Bar Counters are a great way to display stats for your visitors. Animation is used to make it more appealing. You can place as many counters as you would like inside this module.
Here are some examples of the Bar Counters. You can have them in any width that you desire.
Blogs are even 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.
Here is a sample of the blog module.
The blurb module is a simple and elegant combination of text and images. 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.
Here are some samples of blurbs.
With the Button Module, you can add buttons anywhere on your page with ease. Using the Divi Advanced Design Settings, there are countless different button styles that can be created.
Here are some samples of types of buttons you can create.
With the Call To Action module, you can 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 call-to-action module will get the clicks you need. The CTA module is a simple combination of a title, body text and a button. When combined with a vibrant background color, a CTA can easily catch your visitor’s eye.
Here are a couple samples of Call To Actions.
The circle counter 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 based location. Try combining multiple circle counter modules on a single page to give your visitors a fun way to learn about your company or your personal skills.
Here are some samples of circle counters.
The Code Module is a blank canvas that allows you to add code to your page, such as plugin short codes 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 short code into a standard or full width code module to display the item unimpeded.
The Comments module makes it easy to add a comment from 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. You can also use the advanced design settings to customize the contact form.
Here’s an example of what the comments module looks like.
The Contact Form module allows you to easily create contact forms anywhere on your pages.
Here’s an example of the contact forms. You can easily add captcha as well, if you’d like to help prevent spam.
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 builds anticipation for a new product or service. When combined with a “blank page,” this can also be used as a great “coming soon” landing page/maintenance mode page.
Here are some examples of the Countdown Timer. You can add them to any column width.
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.
Here are a couple samples of Dividers. You can have them any color and spacing that you choose.
The Email Optin module is great for growing your mailing list. This module supports MailChimp, Aweber and Feedburner integration.
Here you can see a sample of an opt-in form.
The Filterable Portfolio 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 instantly regenerated with a new list of projects from the selected category.
Here you can see an example of the Filterable Portfolio. Notice at the top it has the different choices you can click on to filter the results.
The Image Gallery Module. Sharing a collection of images is always a great way to visually engage users in your content. The Gallery module lets you create and organize galleries anywhere on your website.
Here’s a sample of an image gallery.
The Image module makes it easy to add images anywhere on the page. All images 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.
Here are some samples of what the Image Module can do.
The Login module displays a WordPress login form anywhere on your page. If you are using WordPress as a membership system, then adding a login form directly to a page can be quite useful, instead of redirecting people to the branded WordPress login form that lives outside your website’s theme.
Here is a sample of the Login Module.
The Maps module makes it easy to embed custom Google Maps anywhere on your page. You can even add unlimited pins to the map, and define a custom viewport starting location. The maps modules also comes in a Full Width format, so be sure to check that out as well! This module is great for contact pages to show your business location.
Here’s a sample of the Map Module. You can make it about any size you like. There’s even a full with map module that I’ll talk about in the Full Width Module video.
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.
Here are some samples of the Number Counters.
The Person module is the best way to create a personal profile block. This is a great module to use on About or Team Member pages where you want to create a bio of individual people. This module combined text, imagery and social media links into a single, cohesive module.
Here are some samples of the People Module. It definitely makes it easier to have each bio and picture consistent with its design.
With the Portfolio module you can show off your work anywhere on your site in any column structure.
Here is an example of the Portfolio. This one will not make it easy to filter through the items.
Using the Post Navigation module, you can place links to your next and previous blog posts to encourage users to continue browsing your website.
Here are some examples of the Post Navigation buttons.
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 Blog module.
Here is an example of the Post Slider.
The Post Title Module displays the title of your current post, and optionally the post Featured Image and meta data. This allows you to create more unique looking posts when building your posts.
Here is an example of adding the Post Title Module.
The Pricing Tables module makes it very easy 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.
Here is an example of Pricing Tables.
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.
Here are some samples of the Search Module.
The Shop module is designed to be WooCommerce compatible. To integrate WooCommerce you will need to install the latest version of WooCommerce. After you enabled the plugin, you will see a new “WooCommerce” and “Products” section has been added to your WordPress Dashboard. You can use these areas to adjust your eCommerce settings and publish new products.
Here is an example of the Shop Module.
The Sidebars module can then be added to any page, allowing you to create unique sidebars for different section of your website.
Here are a couple examples of the Sidebar Module.
The Sliders module can be placed anywhere, spanning the full width of whatever column structure they are in. These sliders support parallax backgrounds, as well as video backgrounds!
Here is an example of a slider.
The Social Media Follow module lets you create icon-based links that point to your online social profiles, such as Facebook, Twitter and Google+. These icons are integrated into the theme, which make them preferable to use over third party plugins. You can add links to multiple social profiles within each module, and add the module to anywhere on the page.
Here are some examples of the Social Follow 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. At ¼ columns, tab buttons are stacked and remain visible. At larger sizes, tab buttons lay in a horizontal row. Any kind of content can be placed within a tab as tab content is controlled using the standard WordPress post editor.
Here is an example using the Tabs Module.
The Testimonials module is a great way to encourage trust from your visitors. 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. These are great when used in conjunction with the pricing tables module on sales pages.
Here are some examples of Testimonials. You can put them in any column width.
The Text module can be added anywhere to your page. They 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 bit of text within a complex layout, or it can be used in a full width column to create an entire page.
Here is an example of the text module.
The Toggle module is very similar to the Accordion module. They are a great way to consolidate information and improve user experience on your page. You can create any number of toggles that will look great inside any sized column. But unlike the Accordion, they don’t not close the previously-opened item when the new item’s content is displayed. Toggles will stay open until you close it. The Toggle might be best fitted when you only have one that you’d like to add or if you want it to stay open once clicked.
Here is an example of the Toggle module in use. Notice how two are expanded at once.
The Video module makes adding videos to your page very easy. 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.
Here are some samples of adding videos.
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 video gallery also allows you to customize video thumbnail images and play button to add a clear, customer style to your embed code.
Here is a sample of adding a video slider.
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)|
|Default Editor vs Divi Builder (3:18)|
|Page Settings (1:05)|
|Sections, Rows, Modules (SRMs)|
|SRMs Settings Tabs|
|Changing Structures of Rows|
|Types of Modules|
|Types of Full Width Modules|
|General Theme Options|
|Navigation Theme Options|
|Layout Theme Options|
|Ads Theme Options|
|SEO Theme Options|
|Integration Theme Options|
|Updates Theme Options|
|Role Editor Overview|
|High Level Theme Privileges|
|Settings Tabs & Types|
|Saving to the Library|
|Loading from Library|