The Divi Blog Module

The Divi Blog Module

The Divi Blog Module

 

How to add, configure and customize the Divi 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.

View full documentation:

How To Add A Blog Module To Your Page

Before you can add a blog module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

blog module

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.

blog module

Locate the blog module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “blog” and then click enter to automatically find and add the blog module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: ContentDesign and Advanced.

Use Case Example: Adding Blog Module with A Grid Layout in a Specialty Section with a Right Sidebar

For this example, I’m going to add a Blog Module to a blog page. This blog page has a fullwidth header with a search module below it. Under the Search Module, I’m going to add a specialty section with the Blog Module on the left side and a sidebar section on the right. The sidebar on the right has a recent posts widget, an Email Optin Module, and a Person Module.

Here is what the example page looks like.

blog module

Notice the blog module is in a grid layout on the left side of the specialty section.

Let’s get started.

Use the visual builder to add a Specialty Section with the following layout:

blog module

You’ll be prompted to add either a 1 column or 2 column row for the left side. Choose the 1 column row.

blog module

Then add the Blog Module to the row.

blog module

Update the Blog Settings as follows:

Content Options

Posts Number: 6
Read More Button: ON
Show Pagination: NO
Grid Tile Background Color: #ffffff

Design Options

Layout: Grid
Use Dropshadow: ON
Overlay Icon Color: #ffffff
Hover Overlay Color: rgba(224,153,0,0.51)
Header Font: Default
Header Font Size: 21px
Header Text Color: #333333
Header Letter Spacing: 1px
Header Line Height: 1.2em
Use Border: YES
Border Color: #f0f0f0
Border Width: 1px
Border Style: Solid

Advanced Options

Custom CSS (Read More Button):

color: #e09900;
display: block;
text-align:center;
margin-top: 10px;
border: 1px solid #ccc;
padding: 5px;
text-transform: capitalize;
letter-spacing: 1px;

blog module

The advanced Custom CSS for the read more button creates a custom look that fits the design well.

blog module

On the right sidebar section of the Specialty Section layout you will need to add a sidebar module which pulls in the recent posts widget. Below that you will need to add an Email Optin Module. And then below the Email Optin you need to add the Person Module with info about the author.

That’s it!

Blog Content Options

Within the content tab you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

blog module

Posts Number

Define the number posts that you wish to display. You will need to have posts made for anything to show up inside of this module.

Select the categories that you would like to include in the post feed. Any post categories that you have created will show up here for you to select/deselect.

Included Categories

Choose which categories you would like to include in the feed.

Meta Date Format

Define the date format that you would like to display on your blog posts here. The default layout is a M j, Y formate (January 6, 2014) See the WordPress Codex on date formats for more options.

Content

Showing the full content will not truncate your posts on the index page. Showing the excerpt will only display your excerpt text.

Offset Number

Choose how many posts you would like to offset by. If you offset by 3 posts, for example, the first three posts in your blog feed will not be displayed.

Show Featured Image

This option allows you to choose whether or not you would like thumbnail images to appear in your blog module.

Read More Button

Here you can define whether to show “read more” link after the excerpt or not.

Show Author

Choose whether or not you would like to display the author of each blog post within the post meta area below the post title.

Show Date

Choose whether or not you would like to display the date on which each post was created within the post meta area below the post title.

Show Categories

Choose whether or not you would like to display post categories within the post meta area below the post title.

Show Comment Count

Choose whether or not you would like to display comment count within the post meta area below the post title.

Show Pagination

Choose whether or not you would like to display pagination for this feed. To enable numbered pagination, you will need to install the WP Page Navi plugin.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Blog Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

blog module

Layout

You can either choose to display your blog posts in a grid or a full width layout.

Featured Image Overlay

If enabled, an overlay color and icon will be displayed when a visitors hovers over the featured image of a post.

Overlay Icon Color

Here you can define a custom color for the overlay icon.

Hover Overlay Color

Here you can define a custom color for the overlay.

Hover Icon Picker

Here you can define a custom icon for the overlay.

Text Color

If your blog is being placed onto a light background the Text Color should be set to ‘Dark’. Visa versa, if your blog is being placed onto a dark background, the Text Color should be set to ‘Light’.

Header Font

You can change the font of your header text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Header Font Size

Here you can adjust the size of your header text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Header Text Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your header text, choose your desired color from the color picker using this option.

Header Letter Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your header text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Header Line Height

Line height affects the space between each line of your header text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Body Font

You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Body Font Size

Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Body Text Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.

Body Letter Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Body Line Height

Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Meta Font

You can change the font of your meta text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Meta Font Size

Here you can adjust the size of your meta text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Meta Text Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your meta text, choose your desired color from the color picker using this option.

Meta Letter Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your meta text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Meta Line Height

Line height affects the space between each line of your meta text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Use Border

Enabling this option will place a border around your module. This border can be customized using the following conditional settings.

Border Color

This option affects the color of your border. Select a custom color from the color picker to apply it to your border.

Border Width

By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from “px” to something else, such as em, vh, vw etc.

Border Style

Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.

Blog Advanced Options

Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module’s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme’s style.css file.

blog module

CSS ID

Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.

CSS Class

Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.

Custom CSS

Custom CSS can also be applied to the module and any of the module’s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Visibility

This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

The Divi Blog Module

The Divi Toggle Module

The Divi Toggle Module

How to add, configure and customize the Divi toggle module.

Toggles are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of toggles that will look great inside any sized column.

View full documentation:

How to Add a Toggle Module to Your Page

Before you can add a toggle module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Enable Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.

divi-toggle-module-3

Locate the toggle module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type “toggle” and then hit enter to automatically find and add the toggle module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: ContentDesign and Advanced.

Use Case Example: FAQ Page

An FAQ page is one of the best places to consolidate information using the Toggle Module. It allows the user to quickly identify what question they want to without having to read through tons of text. For this example I’m going to show you how you can use the Toggle Module to design a modern FAQ section for your FAQ page in minutes.

Using the Visual Builder, add a new section with a fullwidth (1 column) row. Then add a Divider module to the row. Under the Content tab of the Divider Module Settings, select the option to “Show Divider”.

Under the Design Tab, enter the following options:

Color: #000000 (black)
Divider Style: Solid
Divider Position: Vertically Centered
Divider Weight: 4px
Height: 1

Next add a Toggle Module under the Divider I just created in the same row. In the Toggle Module Settings, update the following:

Content tab

Title: [enter your title]
Content: [enter your content]
State: Close
Open Toggle Background Color: #ffffff
Closed Toggle Background Color: #ffffff
Background Color: #ffffff

Design tab

Icon Color: #000000
Open Toggle Text Color: #000000
Closed Toggle Text Color: #000000
Title Font: Open Sans, Bold
Title Font Size: 24px
Title Text Color: #000000
Body Font: Open Sans
Body Font Size: 18px
Body Text Color: #666666
Body Line Height: 1.6em
Use Border: YES
Border Width: 0px
Custom Padding: Top 2px, Bottom 2px

After you have saved your setting for the Toggle Module, duplicate the Divider Module you created and place it underneath the Toggle Module. This will frame the Toggle with a top and bottom divider line. After that, duplicate your Toggle Module and place it after the bottom divider line. Since this is a duplicate Toggle Module, all the design settings have carried over to the new Toggle and all you need to do is update the content of the new Toggle Module. Then continue the process of duplicating divider modules and Toggle Modules and updating the content of your Toggles until you have all the FAQ section completed.

That’s it. Now you have a modern FAQ section using the Toggle Module to consolidate your questions and answers.

Now that you’ve seen the toggle module in action, dive into ALL of it’s settings in the sections below. We’ve provided a detailed rundown of what you will find inside each tab of the module’s settings and an explanation of what each one does.

The Toggle Module Content Settings

divi-toggle-module-2

The toggle module’s content tab is organized into the following groups of settings (which also toggle!).

Text

This is where you are able to add the toggle title and content.

State

You can choose whether or not you want your toggle to appear open or closed by default with this setting.

Background

Here you can change the open toggle background color and the closed toggle background color. You can also easily make them the same thing by setting the background color option. There is also the option to set or upload a background image.

Admin Label

By default, your toggle module will appear with a label that reads ‘Toggle’ in the builder. The Admin Label allows you to change this label for easy identification.

The Toggle Module Design Settings

divi-toggle-module-4

The toggle module’s design settings have been grouped into the following dropdown toggles under the design tab.

Icon

This is where you can change the toggle icon color.

Text

Here you’re able to set the color for open and closed toggle text.

Title Text

Here you can adjust the title text font, weight, size, color, spacing, line height, and more.

Body Text

Here you can adjust the body text font, weight, size, color, spacing, line height, and more.

Border

Here you can choose to use a border. And if you do choose to use a border, you’re also able to select it’s color, change it’s width, and choose it’s style.

Spacing

In the spacing area you’re able to add custom padding to the top, right, bottom, or left of the toggle. You can also change these values for desktop, tablet, or mobile devices.

The Toggle Module Advanced Settings

divi-toggle-module-5

In the Advanced tab of your toggle module you are able to add a unique css id and class. You are also able to add custom css to various pre-defined (and pre-selected) css selectors within the video slider module in the custom css dropdown. And finally in the visibility dropdown you are able to adjust the visibility of your module on phones, tablets, and desktops.

The Divi Blog Module

The Divi Map Module

The Divi Map Module

How to add, configure and customize the Divi map module.

View full documentation:

The maps modules 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!

map module

VIEW A LIVE DEMO OF THIS MODULE

Google Maps API Key

An API key is required in order to use the Maps Module. To obtain an API key, log into the Google Developers Console, which will guide you through the process, and activate the Google Maps JavaScript API and any related services automatically. The first thing you will be asked to do is create a new project.

docs image

Next you will be asked to name your project. You can name the project anything you like. In this example, I simply called it “Maps.” You can also input your website’s domain name (add an * in front of it if you allow access from both www.domain.com and domain.com) to make sure to other website’s are allowed to your your API key.

docs image

After you have created an named your project, you will be presented with an API Key that you can use.

docs image

After you have obtained an API key, you must copy/paste it into the theme options panel by navigating to: Divi>>Theme Options>>General Settings>>Google Maps API Key

How To Add A Map Module To Your Page

Before you can add a map module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

map module

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.

map module

Locate the map module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “map” and then click enter to automatically find and add the map module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.

Use Case Example: Add a Map Module to a Contact Page

A map module is a great way to showcase your company location on your contact page. And the ability to add multiple pins to your map to showcase different company locations and information is a helpful and engaging feature.

For this example, I’m going to add a Map Module to showcase the company location and information by adding a custom pin to the map.

map module

Important: Make sure a valid Google API Key has been entered inside the Divi Theme Options panel. The Map Module will not work without it.

Using the Visual Builder, add a Standard Section to the bottom of the contact page. Then insert the Map module to your new section. In the Content tab of the Map Settings, enter your company address under the Map Center Address option. The Map Center Address is for the map center point.

map module

Then click + Add New Item to create your first pin. Update the following:

Title: [enter the title of your location]
Content: [enter the content for your pin (ex. address and phone number)]
Map Pin Address: [enter the address for this specific location]

map module

Save Settings

That’s it. Now you have a dynamic map module at the bottom of the contact page with a clickable pin that displays company information.

map module

Map Content Options

Within the content tab you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

map module

+ Add New Item

This is where you add new pins (or locations) to your Map Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new pin. See below for individual pin settings.

After you add your first pin, you will see a gray bar appear with the title of your pin shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the pin.

Google API Key

The Maps module uses the Google Maps API and requires a valid Google API Key to function. Before using the map module, please make sure you have added your API key inside the Divi Theme Options panel. Learn more about how to create your Google API Key here.

Map Center Address

Enter an address for the map center point, and the address will be geocoded and displayed on the map below. This is useful if you have multiple pins, and you want to have the map zoomed in to a specific, more focused location. You can simply type in an address in a standard format, such as “1235 Sunny Road, Some City, State, 88343.”

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Map Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

map module

Mouse Wheel Zoom

Here you can choose whether the zoom level will be controlled by the mouse wheel or not. Often times it’s better to disable this option so that visitors are not disrupted as they scroll down the page and get their mouse wheel stuck inside the map’s iframe. This is especially true for fullwidth map modules.

Draggable Zoom

Here you can choose whether or not the map will be draggable on mobile devices.

Use Grayscale Filter

Enabling this option will turn your map into a grayscale image.

Map Advanced Options

Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module’s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme’s style.css file.

map module

CSS ID

Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.

CSS Class

Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.

Custom CSS

Custom CSS can also be applied to the module and any of the module’s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Visibility

This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

Individual Map Pin Options

map module

Title

While creating a new pin, you can assign a Title. This title will appear in the box when hovering over the pin on the map.

Content

While creating a new pin, you can assign a block of content text. This text will appear in the box when hovering over the pin on the map.

Map Pin Address

This is the specific location on the map where your new pin will appear. You can enter the address in a standard format.

The Divi Blog Module

The Divi Portfolio Module

The Divi Portfolio Module

How to add, configure and customize the Divi portfolio module.

View full documentation:

How To Add A Portfolio Module To Your Page

Before you can add a portfolio module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

portfolio module

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.

portfolio module

Locate the portfolio module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “portfolio” and then click enter to automatically find and add the portfolio module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.

Use Case Example: Adding a Portfolio Module to a Portfolio Page

For this example, I’m going to show you how to showcase a portfolio on a portfolio page.

portfolio module

Let’s get started.

Use the visual builder to add a Regular Section with a fullwidth (1 column) row under the header of the page. Then add a Filterable Portfolio Module to the row.

portfolio module

Update the Portfolio Settings as follows:

Content Options

Posts Number: 8
Show Pagination: NO

Design Options

Layout: Grid
Zoom Icon Color: #ffffff
Hover Overlay Color: rgba(224,153,0,0.58)
Title Font: Default, Bold, Uppercase
Title Font Size: 14px
Title Letter Spacing: 1px
Meta Font Size: 12px
Meta Letter Spacing: 1px

Advanced Options (Custom CSS)

Portfolio Title:
text-align: center;

Portfolio Post Meta:
text-align: center;

portfolio module

That’s it!

Portfolio Content Options

Within the content tab you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

portfolio module

Posts Number

Control how many projects are displayed. Leave blank or use 0 to not limit the amount.

Include Categories

Choose which categories you would like to display. Projects from categories that are not selected will not appear in the list of projects.

Show Title

Choose whether or not the title of each project is displayed when you hover over the project item.

Show Categories

Here you can turn the category links on or off.

Show Pagination

Here you can enable or disable pagination for this feed.

Background Color

Define a custom background color for your module, or leave blank to use the default color.

Background Image

If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Portfolio Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

portfolio module

Layout

Choose which layout you would like to use. “Grid” will display all of your items in a multi-column and multi-row layout. Fullwidth will display each project on its own line using large, un-cropped and full width images.

Zoom Icon Color

When hovering over an item within the portfolio module, an overlay icon appears. You can adjust the color that is used for this icon using the color picker in this setting.

Hover Overlay Color

When hovering over an item within the portfolio module, an overlay color fades in on top of the image and below the portfolio’s title text and icon. By default, a semi-transparent white color is used. If you would like to use a different color, you can adjust the color using the color picker in this setting

Hover Icon Picker

Here you can choose a custom icon to be displayed when a visitor hovers over portfolio items within the module.

Text Color

Here you can choose whether your text should be light or dark.

Title Font

You can change the font of your title text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Title Font Size

Here you can adjust the size of your title text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Title Text Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your title text, choose your desired color from the color picker using this option.

Title Letter Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your title text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Title Line Height

Line height affects the space between each line of your title text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Meta Font

You can change the font of your meta text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.

Meta Font Size

Here you can adjust the size of your meta text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Meta Text Color

By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your meta text, choose your desired color from the color picker using this option.

Meta Letter Spacing

Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your meta text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Meta Line Height

Line height affects the space between each line of your meta text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type.

Use Border

Enabling this option will place a border around your module. This border can be customized using the following conditional settings.

Border Color

This option affects the color of your border. Select a custom color from the color picker to apply it to your border.

Border Width

By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from “px” to something else, such as em, vh, vw etc.

Border Style

Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.

Portfolio Advanced Options

Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module’s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme’s style.css file.

portfolio module

CSS ID

Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.

CSS Class

Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.

Custom CSS

Custom CSS can also be applied to the module and any of the module’s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Visibility

This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.

The Divi Blog Module

The Divi Tabs Module

The Divi Tabs Module

How to add, configure and customize the Divi tabs module.

View full documentation:

Tabs are a great way to consolidate information and improve user experience on your page. Using Divi, 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.

VIEW A LIVE DEMO OF THIS MODULE

How To Add A Tabs Module To Your Page

Before you can add a tabs module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

tabs module

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.

tabs module

Locate the tabs module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word “tabs” and then click enter to automatically find and add the tabs module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.

Use Case Example: Adding Tabs to Organize Product Features

Tabs are great for consolidating and organizing your content. One common use for tabs is to showcase features of a product. If your product has three or more features, organizing them into tabs will create a better user experience, allowing the user to easily digest the content.

For this example, I’m going to show you how to add a Tab Module to a product page for the purpose of showcasing the product features.

tabs module

First add a new section and a new row with a 1/2 1/2 column layout. On the left column, add your 510 x 510 product image using the Image Module.
tabs module

On the right column, add the Tabs Module. Under the Content Tab of the Tabs Module Settings, click “add a new item” to bring up the settings for your first specific tab. Update the tab settings under the Content tab as follows:

Title: [add the title or label of your tab]
Content: [add the main body content of your tab]

tabs module

Save the tab settings and repeat this process to create two more tabs.

tabs module

Once your tabs have been created, go to the Design tab of your Tabs Settings and change the Tab Text Color to #0c71c3 (blue).

tabs module

Now you have a effective Tabs Module you can use to display information on your products.

tabs module

Tabs Content Options

Within the content tab you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

tabs module

Add New Item

This is where you add new tabs to your Tabs Module. Clicking “add new item” will open a completely new list of design settings (including Content, Design, Advanced) for your new tab. See below for individual tab settings.

After you add your first tab, you will see a gray bar appear with the title of your tab shown as a label. The gray bar also has three buttons that allow you to edit the settings of the tab, duplicate the tab, or delete the tab.

If you have customized the settings for your first tab and want to keep the style throughout the rest of your tabs, click the duplicate icon/button. You will see a new gray bar appear beneath the first tab. Click to edit the content of the new tab and repeat this process for the rest of your tabs.

Active Tab Background Color

This option allows you to add a background color to your active tabs. A tab is considered active when it has been clicked or selected. By default your active tab background color is white and matches the default white background color of your tab content.

Inactive Tab Background Color

This option allows you to add a background color to your inactive tabs. A tab is considered inactive when it has not been clicked or selected. By default your inactive tab background color is gray in contrast to the default white background color of the active tab. This background color contrast for active and inactive tabs allow for easier navigation between tabs.

Background Color

This option allows you to change the background color of the tab module content.

Background Image

This option allows you to add a background image of the tab module content.

Admin Label

By default, your video module will appear with a label that reads ‘Video’ in the builder. The Admin Label allows you to change this label for easy identification.

Tabs Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

tabs module

Tab Text Design Options

These options control the style of your tab text (or title) for all tabs in your module. Options include tab font, tab font size, tab text color, tab letter spacing, and tab line height.

Body Text Design Options

These options control the style of your tab modules body text (the text entered in the content of your individual tabs). Options include body font, body font size, body text color, body letter spacing, and body line height.

Use Border

Select “YES” for this option if you would like to add a border to your tabs module. Once “YES” is selected, you will see additional styling options for your border including border color, border width, and border style.

Tabs Advanced Options

Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module’s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme’s style.css file.

tabs module

CSS ID and Classes

This can be used to add a unique CSS ID or Class to your tabs module. These can then be used in your stylesheet or within the Theme Options Custom CSS box to apply custom styling to the module. CSS ID’s can also be targeted with anchor links to link to certain areas of your page.

Custom CSS

Here you can add custom CSS to your tabs module.

Visibility

Here you can choose to hide (or disable) your tabs module on certain devices. You can choose to disable the module on phone, tablet, and/or desktop.

Individual Tabs Content Options

tabs module

Title

This option serves as the title of your tab. This will be the text in the actual tab that users click to toggle through the live tag module.

Content

This is where you enter the body text of your tab using the built-in wysiwyg editor.

Background Color

Here you can add a background color for your tab.

Background Image

Here you can add a background image for your tab.

Individual Tabs Design Options

tabs module

Tab Text

This option allows you to design the tab text which is the title of your tab. Options include font, font size, text color, letter spacing, and line height.

Body Text

This option allows you to design the body text of your tab. Options include font, font size, text color, letter spacing, and line height.

Individual Tabs Advanced Options

tabs module

Custom CSS

Here you can add custom CSS to the specific tab your are editing. This CSS will be applied to this tab only.