标签： divi

The Divi Theme Builder

The Divi Theme Builder
Using the Theme Builder to customize your header, footer and post templates.

Introduction to the Theme Builder

The Divi Theme Builder is an interface within Divi that allows you to use the Divi Builder to construct theme templates and assign those custom templates to pages or posts across your theme (including custom post types like Divi Projects and WooCommerce Products and Pages). With the Theme Builder, you have complete control over every single element of your website. And because you have the power to use or exclude templates on any page or post throughout your site, there is really no longer any need to manually edit a theme template file ever again.

In short, the Divi Theme Builder takes the power of the Divi Builder and extends it to all areas of the Divi Theme, allowing you to build custom headers, footers, category pages, product templates, blog post templates, 404 pages and more.
Here are just a few things you can do with the Theme Builder:

Design a global header/menu for you entire site from scratch using the Divi Builder.
Design a global footer for your entire site from scratch using the Divi Builder.
Build a custom 404 page template.
Build a custom post template layout for all blog posts using the Divi Builder.
Build a custom product page template for all products.
Build a custom template for archive pages.
Build a custom template for all posts (or products) with a certain category.
Design complete theme builder packs (sort of like child themes) that you can export and import into other websites.

Table of Contents
Customizing Templates with the Divi Theme Builder
Default Website Template
Building a Global Header
Building a Global Body
Building a Global Footer
Custom Templates
Adding a New Template
Managing Template Assignments
How to Handle Global Items on New Templates
Custom Template Settings
Building a Custom or Global Header from Scratch
Building a Custom or Global Footer from Scratch
Saving Changes with the Theme Builder
Using Dynamic Content within the Theme Builder
Building a Site-Wide Blog Post Template
Building a Site-Wide Product Page
Building a Category Page Template for Blog Posts
Building a 404 Page Template
Building a Search Results Page Template
Portability Options for Theme Builder Templates

Accessing the Divi Theme Builder
The Divi Theme Builder can be accessed on the backend within your WordPress dashboard under the Divi category of menu items.
From the WordPress dashboard, navigate to Divi > Theme Builder.

This will bring you to the main Divi Theme Builder interface where you will manage all of your templates.

Customizing Templates with the Divi Theme Builder

Default Website Template

By default, there is a single template item called Default Website Template, which cannot be deleted, but it can be modified. This is the standard theme template, and if left unedited the three areas will use the standard Divi styles. If the Header Area of the Default Website Template is edited, the theme header is replaced across the entire site with the customized Divi Builder content. Same goes for the Body and Footer areas.
Default Website Template Global Areas
The default website template is made up of three areas: Global Header, Global Body, and Global Footer.
To start the process of creating a new template content area, all you need to do is click on one of the respective empty areas.

Building a Global Header
If you would like to add and build a new global header for your website, click the 「Add Global Header」 area and then select the option 「Build Global Header」.

Much like you would when designing a page in Divi, you are prompted to choose how you would like to start building the layout. For example, you could jump start the design with a premade layout or a header layout you previously designed by selecting the option 「Choose a Premade Layout」. However if you want to build the header from scratch, select 「Build From Scratch」.

Once you have selected to build the layout from scratch, you will be brought to the Template Layout Editor. This is where you will use the Divi Builder to design your header layout just like you would design a normal page or post with the Divi Builder.

Keep in mind that whatever you see in this template layout editor will be what shows on the header of your page. And if this is a global header, it will show throughout your entire site by default, replacing the standard Divi header.
Once you have finished designing your header, make sure to save the layout before you exit the template layout editor.

Now you should see a green Global Header populating the Global Header space of the default website template. The green color is to remind you that it is a global.

Your website will now have a new global header that replaces the standard Divi header.

Building a Global Body
In most cases, you will not want to design a global body area for your default theme template because you will most likely want to have more control over the body on a page by page basis.
For example, you may want to forego creating a global body area for your default website template (which will be applied to all pages/posts by default), but you may want to create a new template with a custom template body area for all of your blog posts. That way you don』t have to worry about the design of each new post. You only need to add new body content.
To add a Global Body to your default website template, simply click the 「Add Global Body」 area and then select the option 「Build Global Body」.

This will bring you to the Template Layout Editor where you can design the Global body area of your website.
It is important to include the post content module whenever you design the body area of your template. The post content module is what allows Divi to populate the template with the actual page or post content.

The post content module conveniently displays mock content to make it easy to add styling to the content in anticipation of the actual content for all pages and posts.

This post content module is essentially a placeholder for the content that is added to the content of a page in Divi. If you are not using Divi Builder on a page, the post content module will display the content within the WYSIWYG editor of a page or post on the backend.

Here is an example of how that content would appear in the Global Body area of the template.

If you decide to use the Divi Builder to edit a page or post. The area available for the Divi Builder content will be contained within the designated area of the post content module in the body of the template.

That is why in most cases I wouldn』t suggest having a global body area for your website unless you have a specific reason. You might find creating a Global body will put unnecessary limitations on your ability to design page content in Divi.
If you do decide to go with a global body area for your default website template, I suggest making sure your post content module spans the fullwidth of the layout so that you aren』t limited in any way by spacing when designing pages with the Divi Builder.

Building a Global Footer
The Divi Theme Builder allows you to replace the standard Divi footer (and footer bar) with a new custom footer that you can design completely from scratch using the Divi Builder.
To build a global footer for your website, simply click the 「Add Global Footer」 area and select 「Build Global Footer」.

Then use the power of the Divi Builder to design the footer within the Template Layout Editor. Don』t forget to save the layout.

NOTE: You can also choose to add one of our premade layouts to the footer template editor to jumpstart the design of your footer. You can do this at any time by clicking the Add from Library plus icon in the settings menu at the bottom of the editor.
Once you have a Global Header, Body, and Footer in place, a sample page would look something like this.

Global Body Not Necessary
As mentioned earlier, the Global Body isn』t necessary. You can easily delete the Global Body by clicking the trash icon.

Without the Global Body, you have complete control over the design of your page using the Divi Builder.

Once you have finished designing your page, the Global Header and Global Footer will still remain while the page content is displayed beautifully as expected.

Custom Templates
The default website template controls the default template for the entire site. However, custom templates allow you to override the default template by giving a custom template to any page or post on your website. In other words, custom templates allow you to create templates for pages or posts that you don』t want to inherit the default template.

Adding a New Template
To create a new template, simply click the 「Add New Template」 box with the gray plus icon.

This will bring up the Template Settings modal that prompts you to manage the template assignments. In other words, you will need to designate on what pages or posts you want to assign the template. More on this below.

Managing Template Assignments
Use On vs. Exclude From
The template assignments can be selected under the 「Use on」 tab and the 「Exclude From」 tab. It is up to you whether or not you want to base your assignments on the 「Use on」 logic or the 「Exclude From」 logic. But feel free to use a combination of both if needed.
For example, you can choose to use it on all pages and posts, but also choose to exclude a specific page or post.
NOTE: If an include selection conflicts with an exclude selection, the exclude selection always overrides the include. For example, if you choose to 「Include on Homepage」 and 「Exclude from Homepage」, this template will be excluded from the Homepage.
Pick from any theme template.
You will also find that there are templates for every page, post, and/or archive. You can even assign templates to WooCommerce Pages and Products if you have WooCommerce installed on your site.

Macro Assignments and Micro Assignments
Templates can be assigned on a macro level and/or micro level. For example, you may choose to assign the template to all pages throughout your site (macro level), or you may choose to assign the template to one specific post (micro level). Or both! You can even select multiple assignments, giving you complete control over where you would like your template assigned throughout you website.

Conflicting Assignments
If the user assigns a template to a page that is already assigned to another template, the newly saved template will take precedence and the previous assignment on the other template will be removed. A warning message will appear notifying you of this before saving the template.

Renaming Custom Templates
Once all assignments have been selected, you will see a new template name that has been generated based on your selection(s). When hovering over the template card title area, a tooltip appears that shows the list of everything that the template is used on or excluded from. To rename the template, you can click on the template name to edit the title inline.

Unassigned Template Warning
If you do not select a template assignment, you will see warning text in place of the template name that reads 「Unassigned」.

Custom Template Areas
Just like the default website template (or Global template), a custom template will also have the following areas: Header, Body, and Footer.

If the default website template has global template layouts added to any of the three areas, those global layouts will automatically be added to the new template.

How to Handle Global Items on New Templates
However, you don』t have to keep that Global layout on your new template. You can use the Template area options to delete the layout and build a new one from scratch or disable global and tweak the layout for the specific needs of the layout.

For example, if you have a Global Header on the default website template, your new template will inherit that Global Header. You can choose to do one of the following:

You can  use the Global Header on your new template.

You can disable Global so that you can tweak the design for the custom template.

You can delete the Global Header and build the Custom header from scratch for the template or add one from the Library.

You can also choose to leave the Custom Header area empty which will inherit the standard Divi theme header.

Adding a Template Area from Library
When adding a custom template area to your new template, you may choose to add a layout from your Divi library. This functionality mimics the process of adding a new layout to your page when using the Divi Builder. To add a layout to the template area from the library, click the template area and select Add from Library. The add from library popup will appear where you can choose any premade, saved, or existing page layouts. Once the layout has been added to the template area, you can select the gear icon to edit the layout using the Divi Builder within the Template Layout Editor.

Drag and Drop Template 「Areas」
Template areas can be dragged and dropped to other template content areas. This is a quick and easy way to duplicate and place a template area in one drag and drop action. Dragging doesn』t remove it from the area its being dragged FROM— it only populates or replaces the area it』s dragged TO. Think of it as duplication rather than cut and paste.

Template Area Visibility Options: Hiding/Showing Header, Body, and Footer areas.
In addition to being able to customize each area of a template, you can also toggle an area』s visibility to either show or hide it on the Front End by clicking the 「eye」 icon next to each area. For example, you could hide the Header Area and Footer Area of your 404 Page.
NOTE: Hiding a template area doesn』t return the area to the default, it completely hides the area altogether on the front end.

Custom Template Settings
Template Settings Menu
When hovering over a template within the theme builder, a template settings menu will appear at the top left of the template box. This menu is very similar to the menus you see when hovering over a section, row, or module within the Divi Builder.

The menu includes icons for the following functions:

Template Settings – This is  where you can manage the template assignments
Duplicate Template – This will duplicate the template in order to jumpstart another custom template. Duplicating a Template triggers the exact same thing that clicking the Add New Template card would do. The difference is that after defining the template settings, the generated template uses the same Header Area, Body Area, and Footer Area as the duplicated template.
Delete Template – This will delete the template altogether. Any pages, posts, or archives that were assigned the deleted template will revert back to the default website template and/or the standard Divi theme layout for that page (if no default template is created).
Export Template – You can click the export template icon to export a .json file of that specific template. Once you click the export template icon, enter a name for the export file and click the 「Export Divi Theme Builder Template」 button.

More Settings Options – The more settings icon opens a convenient list of all available template settings all in one place.

Building a Custom Header

Building a custom header will involve the same process as building a global header. The only difference is that a custom header is not global so it only gets displayed on post are pages that have been assigned to the template including the custom header. The header is where you will need to include your primary menu for your website, but you may also add countless elements and designs to your header as well.
For more info, check out this complete post on how to create a custom global header using Divi』s Theme Builder.
Building a Custom Body
Building a custom body area for your template involves the same process as building a global body and it can be a great way to add design and/or content to the body of a lot of pages or posts at once. And if you use dynamic content, you can really streamline the design and functionality of your blog posts or WooCommerce Products.

Building a Custom Footer

Building a custom footer involves the same process as building a global footer. It is important to remember that any custom footer added to a template will completely override Divi』s standard footer including the bottom footer bar.
For a comprehensive tutorial on how to build a custom footer from scratch, check out our post on how to create a custom footer with Divi』s Theme Builder.

Saving Changes with the Theme Builder
Saving and Cancelling Template Layouts
When you are finished building your template, it is important that you save Template Settings changes. To do this you must click the Save button at the bottom of the modal. If you wish to cancel the changes made to the layout, simply click the X icon in the upper right.

Note: If you click the X icon during a creation flow (without saving), the template layout will not be created or saved.
Saving Theme Builder Changes
Just like with Divi Theme Options, you must save your changes to the Theme Builder in order for those changes to take effect. If you refresh the page or close the window, changes will be cancelled/lost.

Using Dynamic Content within the Theme Builder
Dynamic content (i.e. Title, Featured Image, Post Content, etc.) can be included in your Global or Custom Template layouts. This is a powerful tool that allows you to streamline the design and functionality of website, especially for blog posts and/or WooCommerce Products.

Building a Site-Wide Blog Post Template
Blog posts are a great example of where a custom template with dynamic content is needed. This will allow you to design a blog post template that will be applied to all blog posts site wide using the Divi Builder and dynamic content. Once done, all you would need to do is update the actual body content for all future posts. The new post content will inherit the design of the custom template!
Here is a quick example of how to do this:
First, create a new template and assign the template to All Posts. Then add a custom body to the template.

Using the Template Layout Editor, design the entire layout using the Divi Builder combined with Divi』s built-in dynamic content modules and options.
For example, you could use the Post Title Module to display the title of the post dynamically.

Or use a text module that pulls in the Post Publish Date.

Most importantly, you must include the Post Content module when building any custom body layout for your template. The Post Content module includes the area for page or post content to be displayed within the Body Area of the template.
Here is an illustration of an entire layout for a blog post template using dynamic content:

Once the template is created, you can easily create a new blog post using the default WordPress post editor and have that blog post inherit the design of the blog post template you created using the Divi Theme Builder.

You can also use the Divi Builder on blog posts with this custom template as well. It will work the same way. Whatever you build with the Divi Builder for your post will show inside the area designated by the Post Content Module on the template layout.

Building a Site-Wide Product Page
Dynamic content doesn』t just apply to blog post templates. You can also use Divi』s built-in WooCommerce (or Woo) Modules to build a custom site-wide Product Page Template.
To do this, simply create a new template and assign the template to 「All Products」. Then add a custom body to the template and click to build the body layout using the template editor.

Then use the Divi Builder and the Woo Modules to design the Product page template.

Now whenever, you create a new product on the backend using the standard product page editor, the product will automatically inherit the design of the assigned body template.

Building a Category Page Template for Blog Posts

The Theme Builder also makes it easy to design complete Category Page templates. The key to creating a template for a category page is to create a custom body area and use the Blog Module to display the posts for the current page. This is easily done by a simple click when adding a blog module to the category page template layout.

If fact you can use a combination of blog modules with post offsets for unique category page layouts.
For a complete walk through, check out our post on how to build a category page template for your blog using the Divi Theme Builder.

Building a 404 Page Template
The Theme Builder also makes it easy to design a 404 Page template for your Divi website. For a complete walk through, check out our post on how to create a 404 page template using the Divi Theme Builder.

Building a Search Results Page Template
The Theme Builder also makes it easy to design a Search Results Page template for your Divi website. Like category page templates, the key to creating a template for search results is to create a custom body area and use the Blog Module to display the posts for the current page. This is easily done by a simple click when adding a blog module to the category page template layout.

For a complete walk through, check out our post on how to build a Search Results page template for your website using the Divi Theme Builder.

Portability Options for Theme Builder Templates
Exporting and Importing Templates
Using the Theme Builder Portability options, you can export all or some of the theme templates in one file. These export files will include all library layouts that are associated with every template and all template assignment data.
To access the Theme Builder Portability option, click the portability icon on the right of the purple bar at the top of the Theme Builder interface.

The portability modal will popup with the export tab open by default. Give the export file a name, update the export option (if needed), and click to export the file. If you leave the export option to export all templates, all the theme templates will be exported in the file.

If you deselect the option to 「Export All Templates」, you will see a list of options including specific template you can choose to include in the export file.

To import a theme builder template json file to your website, you will need to deploy the portability modal and select the import tab. Select the file you』d like to import, update the override options (if needed), and click to import the file.

IMPORTANT: Importing imports everything, even templates that are assigned to pages and posts that don』t exist in the current WP install. All conflicts are resolved by allowing the imported templates to override the existing templates on the website. This means that the Default Template is overridden, and all page or post assignments of the imported templates take precedence. For example, if you import a template that is assigned to the 404 page, it will remove the 404 page from the current template that is assigned to the 404 page.
Import & Export Entire Theme Builder Packs
Theme Builder exports are what we』re calling 「Theme Builder Packs」. Think of them like Divi Layout Packs, except for your overall website structure instead of individual page designs. Theme Builder packs remove the need for child themes in many cases and allow you to create pre-built theme templates that can be used on any website.
For more, check out the complete post on how to use Divi』s Theme Builder portability features.

The Divi Video Slider Module

The Divi Video Slider Module
How to add, configure and customize the Divi video slider module.

Divi 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, custom style to your embeds.
How to Add a Video Slider Module to Your Page
Before you can add a video slider 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.

Locate the video slider 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 「video slider」 and then hit enter to automatically find and add the video slider 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.
Populating the Video Slider with Content

Before adjusting too many settings it』s probably a good idea to go ahead and populate your video slider with video slides. That way when you make changes you』ll actually be able to see how they affect the end result. To add a new video slide you will need to click the + Add New Item link.

Here you can either upload a .mp4 or Webm file. You can also insert a video url from YouTube. When you』ve either uploaded your file or added the YouTube link simply click the green check button in the bottom right hand corner and you will return to the video slider module』s main content tab. Repeat this process for each video you』d like to add.
Video Slider Module Content Settings
Now that your content has been added, there are a few other areas to explore. The three content tab dropdown menus where settings have been grouped which will affect the entire module.
Elements
Under elements you』e able to adjust the setting for the video slider module』s arrows and slider controls.
Overlay
Here you can choose to show or hide video overlays on the main video. This can be done by adding an overlay to each video slide or auto-generated by Divi.
Admin Label
In this dropdown you can add an admin label that will appear in the back end builder as well as the visual builder』s skeleton view.
Video Slider Module Design Settings

In this tab there is just one group of settings called Controls Colors. Here you can change the slider controls color from light to dark, change the color of the play icon, and adjust the thumbnail overlay color.
Video Slider Module Advanced Settings

In the Advanced tab of your video slider 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.
Individual Video Content Settings

If you want to create specific settings for individual slides, these will need to be configured inside the video slides themselves. Simply click on that slide』s gear icon to open up it』s unique settings.
Video
As demonstrated above, this is where you are able to add your video content.
Overlay
In the overlay dropdown you can upload an image to overlay your video slide or choose to have Divi generate one automatically.
Individual Video Design Settings

In the design tab of your video slide you are able to change your slide arrow color from light to dark.
Use Case Example: Adding a Video Slider to showcase tutorial videos for a Course Page
For this example, I』m going to show you how to use a video slider to showcase a series of tutorial videos for a online course page..

Let』s get started.
Use the visual builder to add a Regular Section with a fullwidth (1 column) row. Then add a Video Slider Module to the row.

The first thing you need to do when the Video Slider Settings modal pops up is select + Add New Item in order to add your first video to the module.
Update the Individual Video Settings as follows:
Content tab
Video MP4/URL: [enter URL or upload video]
Video Webm: [enter URL or upload video]
Image Overlay URL: [insert custom image to serve as overlay]
Design tab
Slider Arrows Color: Light

Save Settings
Repeat this step to add the rest of the videos needed for the unit.
Once all of the videos and custom image overlays have been added, go back to the Video Slider Settings and update the options as follows:
Content tab
Arrows: Show Arrows
Slider Controls: Use Thumbnail Track
Display Image Overlays on Main Video: Show
Design tab
Slider Controls Color: Light
Play Icon Color: #ffffff

That』s it!

Using The Divi Theme Options

Using The Divi Theme Options
Divi comes with theme options that are used to set up various parts of your site.

Divi comes fully loaded with its own custom theme options. This is where you can control things like your logo, navigation settings, and so much more. These options can be accessed in the WordPress Dashboard menu under Divi > Theme Options.

General Settings

Logo
This is where you can upload your own logo file to appear in the header of every page of your website.
Fixed Navigation Bar
The fixed navigation bar refers to the navigation bar as it becomes fixed at the top of your screen when scrolling down the page. The menu bar will also shrink slightly upon scrolling to provide more readable screen space. By default the navigation bar is enabled.
Enable Divi Gallery
The WordPress media uploader contains a Create Gallery feature which allows you to add simple image galleries to your pages or posts. Enable this option if you want to replace the default WordPress gallery style with the Divi gallery style.
Color Pickers Default Palette
This is where you can change the default color palette for all color pickers within the Divi Builder and Visual Builder. You can set all the colors needed for customizing your theme here so that these same colors will be available throughout the building process.
Grab the first post image
By default thumbnail images are created using custom fields. However, if you would rather use the images that are already in your post for your thumbnail (and bypass using custom fields) you can activate this option. Once activated, thumbnail images will be generated automatically using the first image in your post. The image must be hosted on your own server.
Blog Style Mode
By default the theme truncates your posts on index/homepages automatically to create post previews. If you would rather show your posts in full on index pages like a traditional blog then you can activate this feature.
Shop Page & Category Page Layout for WooCommerce
If you will be using WooCommerce integration, you can define which layout you want your shop to use on product and product category pages.
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 here. Learn more about how to create your Google API Key here.
Enqueue Google Maps Script
Disable this option to remove the Google Maps API script from your Divi Builder Pages. This may improve compatibility with third party plugins that also enqueue this script.
Please Note: Modules that rely on the Google Maps API in order to function properly, such as the Maps and Fullwidth Maps Modules, will still be available but will not function while this option is disabled (unless you manually add Google Maps API script).
Social Media Icons
Divi places your social media links inside of your footer. Here you can control which social media icons you wish to display and where you would like them to link to.
Number of Products displayed on WooCommerce archive pages
Here you can designate how many WooCommerce products are displayed on the archive page. This option works independently from the Settings > Reading options in wp-admin.
Numbers of posts per page
Define how many posts you would like to be displayed when a user visits a Category Page, an Archive Page, Search Results Page, or Tag Page.
Date Format
This option allows you to change how your dates are displayed. For more information please refer to the WordPress codex here: http://codex.wordpress.org/Formatting_Date_and_Time
Use excerpts when defined
This will enable the use of excerpts in posts or pages.
Responsive shortcodes
This option enables shortcodes to respond to various screen sizes
Google Fonts subsets
This will enable Google Fonts for Non-English languages.
Back To Top Button
This gives you the option to display a Back To Top Button (at the bottom right of your page) while scrolling.
Smooth Scrolling
This will enable the smooth scrolling with mouse wheel. Smooth Scrolling is also especially useful when using anchor links to link to specific areas of the page.
Custom CSS
This is where you can enter any custom css to customize your site. For extensive CSS modifications we recommend that you always use a child theme.
Navigation > Pages

Exclude pages from the Navigation Bar
All of your existing pages will appear in this window. Every new page will appear in your navigation by default. You can uncheck any page here if you wish to not display a specific page or pages.
Show Dropdown Menus
If you would like to remove the dropdown menus from the page』s navigation bar, disable this feature.
Display Home Link
By default the theme creates a Home link that, when clicked, leads back to your blog』s homepage. If, however, you are using a static homepage and have already created a page called Home to use, this will result in a duplicate link. In this case you should disable this feature to remove the link.
Sort Pages Links
Choose how page links should be sorted here.
Order Page Links by Ascending/Descending
Further, specify in which order your sorted page links should appear.
Number of dropdown tiers shown
This options allows you to control how many tiers your page』s dropdown menu has. Increasing the number allows for additional menu items to be shown.
Navigation > Categories

Exclude Categories from the Navigation Bar
All of your existing categories will appear in this window. Every new category will appear in your navigation by default. You can uncheck any category page here if you wish to not display a specific category or categories.
Show Dropdown Menus
If you would like to remove the dropdown menus from the categories navigation bar disable this feature.
Hide Empty Categories
If a category has been made but is not being used by any posts, you can choose whether or not to display it in your navigation. By default empty categories are hidden.
Number of Dropdown Tiers Shown
This options allows you to control how many tiers your page』s dropdown menu has. Increasing the number allows for additional menu items to be shown.
Sort Category Links
Choose how category links should be sorted here.
Order Category Links by Ascending/Descending
Further specify in which order your sorted category links should appear.
Navigation > General

Disable top tier dropdown menu links
In some cases users will want to create parent categories or links as placeholders to hold a list of child links or categories. In this case it is not desirable to have the parent links lead anywhere, but instead merely serve an organizational function. Enabling this options will remove the links from all parent pages/categories so that they don』t lead anywhere when clicked.
Alternative scroll-to-anchor method
Sometimes when using the CSS ID of a section to link directly to it from another page, the page』s final scroll position can be inaccurate. Enable this option to use an alternative method for scrolling to anchors which can be more accurate than the default method in some cases.
Layout Settings
Single Post Layout

Choose Which Items to display in the post info section
Here you can choose which items appear in the post info section on single post pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear.
Show Comments on posts
You can disable this option if you want to remove the comments and comment form from single post pages.
Place Thumbs on Posts
By default thumbnails are placed at the beginning of your post on single post pages. If you would like to remove this initial thumbnail image to avoid repetition simply disable this option.
Single Page Layout

Place Thumbs on Pages
By default thumbnails are not placed on pages (they are only used on posts). However, if you want to use thumbnails on posts you can! Just enable this option.
Show Comments on Pages
By default comments are not placed on pages, however, if you would like to allow people to comment on your pages simply enable this option.
Layout General Settings

Post Info Section
Here you can choose which items appear in the postinfo section on pages. This is the area, usually below the post title, which displays basic information about your post. The highlighted items shown below will appear.
Show Thumbs on Index pages
Enable this option to show thumbnails on Index Pages.
Ad Management

Enable Single Post 468×60 banner
Enabling this option will display a 468×60 banner ad on the bottom of your post pages below the single post content. If enabled you must fill in the banner image and destination url below.
Input 468×60 advertisement banner image
Here you can provide 468×60 banner image url.
Input 468×60 advertisement destination url
Here you can provide 468×60 banner destination url.
Input 468×60 adsense code
Place your adsense code here.
SEO > Index Page SEO

Enable canonical URL』s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URL』s all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine』s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treaded individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Enable meta descriptions
Check this box if you want to display meta descriptions on category/archive pages. The description is based off the category description you choose when creating/editing your category in wp-admin.
Choose title autogeneration method
Here you can choose how your titles on index pages are generated. You can change which order your blog name and index title are displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and index page name when using autogenerated post titles. Common values are | or –
SEO > Single Post Page SEO

Enable custom titles
By default the theme creates post titles based on the title of your post and your blog name. If you would like to make your meta title different than your actual post title you can define a custom title for each post using custom fields. This option must be enabled for custom titles to work, and you must choose a custom field name for your title below.
Enable custom description
If you would like to add a meta description to your post you can do so using custom fields. This option must be enabled for descriptions to be displayed on post pages. You can add your meta description using custom fields based off the custom field name you define below.
Enable custom keywords
If you would like to add meta keywords to your post you can do so using custom fields. This option must be enabled for keywords to be displayed on post pages. You can add your meta keywords using custom fields based off the custom field name you define below.
Enable canonical URL』s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URL』s all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine』s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Custom field Name to be used for title
When you define your title using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom title you would like to use.
Custom field Name to be used for description
When you define your meta description using custom fields you should use this value for the custom field Name. The Value of your custom field should be the custom description you would like to use.
Custom field Name to be used for keywords
When you define your keywords using custom fields you should use this value for the custom field Name. The Value of your custom field should be the meta keywords you would like to use, separated by commas.
If custom titles are disabled, choose autogeneration method
If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –
SEO > Homepage SEO

Enable custom title
By default the theme uses a combination of your blog name and your blog description, as defined when you created your blog, to create your homepage titles. However if you want to create a custom title then simply enable this option and fill in the custom title field below.
Enable meta description
By default the theme uses your blog description, as defined when you created your blog, to fill in the meta description field. If you would like to use a different description then enable this option and fill in the custom description field below.
Enable meta keywords
By default the theme does not add keywords to your header. Most search engines don』t use keywords to rank your site anymore, but some people define them anyway just in case. If you want to add meta keywords to your header then enable this option and fill in the custom keywords field below.
Enable canonical URL』s
Canonicalization helps to prevent the indexing of duplicate content by search engines, and as a result, may help avoid duplicate content penalties and pagerank degradation. Some pages may have different URLs all leading to the same place. For example domain.com, domain.com/index.html, and www.domain.com are all different URLs leading to your homepage. From a search engine』s perspective these duplicate URLs, which also occur often due to custom permalinks, may be treated individually instead of as a single destination. Defining a canonical URL tells the search engine which URL you would like to use officially. The theme bases its canonical URLs off your permalinks and the domain name defined in the settings tab of wp-admin.
Homepage custom title (if enabled)
If you have enabled custom titles you can add your custom title here. Whatever you type here will be placed between the tags in header.php.
Homepage meta description (if enabled)
If you have enabled meta descriptions you can add your custom description here.
Homepage meta keywords (if enabled)
If you have enabled meta keywords you can add your custom keywords here. Keywords should be separated by commas. For example: wordpress,themes,templates,elegant.
If custom titles are disabled, choose autogeneration method
If you are not using custom post titles you can still have control over how your titles are generated. Here you can choose which order you would like your post title and blog name to be displayed, or you can remove the blog name from the title completely.
Define a character to separate BlogName and Post title
Here you can change which character separates your blog title and post name when using autogenerated post titles. Common values are | or –
Integration

The integrate tab is great for adding third party code to certain areas of the theme. Code can be added to your websites head and body, as well as before and after each post. For example, if you need to add a tracking code to your website (such as google analytics), but are unsure which PHP file to edit in order to add the code to the of your website, you can simply input this code into the 「body」 field of the Integration tab.
For more information on getting the most out of the Integration Tab, see our blog post on
Ways To Use The Integration Tab In Our ePanel Theme Options.
Enable header code
Disabling this option will remove the header code below from your blog. This allows you to remove the code while saving it for later use.
Enable body code
Disabling this option will remove the body code below from your blog. This allows you to remove the code while saving it for later use.
Enable single top code
Disabling this option will remove the single top code below from your blog. This allows you to remove the code while saving it for later use.
Enable single bottom code
Disabling this option will remove the single bottom code below from your blog. This allows you to remove the code while saving it for later use.
Add code to the of your blog
Any code you place here will appear in the head section of every page of your blog. This is useful when you need to add javascript or css to all pages.
Add code to the (good for tracking codes such as google analytics)
Any code you place here will appear in body section of all pages of your blog. This is useful if you need to input a tracking pixel for a state counter such as Google Analytics.
Add code to the top of your posts
Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links.
Add code to the bottom of your posts, before the comments
Any code you place here will be placed at the top of all single posts. This is useful if you are looking to integrating things such as social bookmarking links.
Updates

Before you can receive product updates, you must first authenticate your Elegant Themes subscription. To do this, you need to enter both your Elegant Themes Username and your Elegant Themes API Key. Your username is the same username you use when logging in to ElegantThemes.com
Import / Export

You can easily export or import your Divi Theme Settings by clicking the 「Import / Export」 icon to open the portability options. To export a file, select the Export tab, enter your export file name, and click the 「Export Theme Options」 button. A .json file will be saved to your computer to be saved as a backup, used for new client builds, or shared with your peers. To import a Theme Options file, simply select the Import tab, choose your .json file, and click the 「Import Divi Theme Options」 button. There is also a convenient option to backup your current Theme Options before importing.
Restore Defaults

Simply click the 「Restore to Defaults」 icon to restore the default settings for the Divi Theme Options.

The Divi Video Module

The Divi Video Module
How to add, configure and customize the Divi 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 clearner style to the embed.
View A Live Demo Of This Module
How To Add A Video Module To Your Page
Before you can add a video 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.

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.

Locate the video 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 「video」 and then click enter to automatically find and add the video 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 Video to Your Landing Page
Adding a video to your landing page is a great way to promote your products and increase conversions. In this example, I』m going to show you how you can use the video module to add a video to your landing page. I』ve put a red circle where the video needs to go.

Using the Visual Builder, I add a new section with a fullwidth (1 column) row. In the row settings, under the Design tab, I select the option to 「Use Custom Width」. For the Custom Width option that shows up, I enter a custom width of 767px. This makes sure the video module I』m going to add in this row doesn』t exceed this width and become too large on larger screen sizes.

Next, I add the Video Module to the row. Under the Content tab of the Video Module Setting, I enter the video URL of the video I want to embed on my landing page. I』m using the URL of a youtube video for this example.

Then I add an Image Overlay URL for my video by clicking the 「Generate From Video」 button. This automatically pulls an image from the video to serve as an overlay with a new custom video icon.

Under the Design tab, I change the color of the play icon to match my landing page.

Now I have a video for my landing page that looks clean and matches my design.

Now that you』ve seen the video 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.
Content Options

Video URL
The Divi Video module lets you add video using two different methods. You can either upload your own video file from your computer by clicking the 「Upload Video」 button and selecting the desired file, or you can input any Video URL from a third party video source such as Youtube or Vimeo. Simply copy and paste the URL from your browser and paste it into the Video URL field and Divi will take care of the rest!.
Image Overlay URL
If you would like to define a custom video thumbnail image, which will be placed over the standard video interface with a custom play button to create a cleaner and more stylized appearance, then you can choose to do so using the Image Overlay field. This field allows you to either upload your own custom image, or let Divi automatically generate one from your video URL. Most of the video providers support this option, such as Youtube and Vimeo. Simply click the 「Generate From Video」 button and let Divi take care of the rest!
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.
Design Options
Play Icon Color

If you designate an image overlay for your video module, the video displayed contains a play icon over the video. You can designate the color of this icon here to match the color scheme of your page.
Advanced Options

CSS ID and Classes
This can be used to add a unique CSS ID or Class to your 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 video module.
Visibility
If you want to hide your video module on certain devices, you can select which devices on which you want the video module to be disabled.

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 A Live Demo Of This Module
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.

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: Content, Design 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

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

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

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.

Getting Started With The Divi Builder

Getting Started With The Divi Builder
Divi is best used in visual mode, allowing you to build your page on the front-end of your website.

What Is The Visual Builder?
The Divi Builder comes in two forms: The standard 「Back-end Builder」 and the front-end 「Visual Builder.」 Both interfaces allow you to build exactly the same types of websites with the same content elements and design settings. The only difference is the interface. The Back-end Builder lives inside of the WordPress Dashboard and it can be accessed along with all of the other standard WordPress settings. It sits inside the WordPress UI and replaces the standard WordPress post editor. It』s great for making quick changes while you are inside the dashboard, but it』s also confined by the dashboard and is rendered as a block-based representation of your website. This tutorial will be focusing only on the visual builder.

The all new Visual Builder, on the other hand, allows you to build your pages on the front-end of your website! It』s an amazing experience and allows for much faster design. When you add content or adjust design settings inside the visual builder, your changes appear instantly. You can click onto the page and just start typing. You can highlight text and adjust its font and style. You can add new content, build your page and watch everything happen right before your eyes.

Enabling The Visual Builder
While you are logged in to your WordPress dashboard, you can navigate to any page on the front-end of your website and click the 「Enable Visual Builder」 button in the WordPress admin bar to launch the visual builder.
If you are editing your page on the back-end, you can switch to the visual builder by clicking the 「Enable Visual Builder」 button that sits at the top of the back-end Divi Builder interface (note, you must first enable the Divi Builder before the visual builder button will appear).

The Visual Builder Basics
Divi』s power lies in the Visual Builder, a drag and drop page builder that allows you to build just about any type of website by combining and arranging content elements.
The builder uses three main building blocks: Sections, Rows and Modules. Using these in unison allows you to create a countless array of page layouts. Sections are the largest building blocks, and they house groups of rows. Rows sit inside of sections and are used to house modules. Modules are placed inside of rows. This is the structure of every Divi website.
Sections
The most basic and largest building blocks used in designing layouts with Divi are sections. These are used to create large groups of content, and they are the first thing you add to your page. There are three types of sections: Regular, Specialty and Full Width. Regular sections are made up of rows of columns while Full Width Sections are made up of full width modules that expand the entire width of the screen. Specialty sections allow for more advanced sidebar layouts. For more information about using sections, head over to our in-depth sections tutorial.
Rows
Rows sit inside of sections and you can place any number of rows inside a section. There are many different column types to choose from. Once you define a column structure for your row, you can then place modules into a desired column. There is no limit to the number of modules you can place within a column. For more information about using rows, head over to our in-depth rows tutorial.
Modules
Modules are the content elements that make up your website. Every module that Divi has can fit into any column width and they are all fully responsive.
Building Your First Page
The three basic building blocks (Sections, Rows and Modules) are used to build your page.

Adding Your First Section
Before you can add anything to your page, you will first need to add a section. Sections can be added by clicking the blue (+) button. When you hover over a section that already exists on the page, a blue (+) button will appear below it. When clicked, a new section will be added below the section you are currently hovered over.
If you are starting a brand new page, then your first section will be added automatically.

Adding Your First Row
After you have added your first section you can start adding rows of columns inside of it. A section can house any number of rows, and you can mix and match rows of varying column types to create a variety of layouts.
To add a row, click the green (+) button inside of any empty section, or click the green (+) button that appears when hovering over any current row to add a new row below it. Once you have clicked the green (+) button you will be greeted with a list of column types. Choose your desired column and then you are ready to add your first module.

Adding Your First Module
Modules can be added inside of rows, and each row can house any number of modules. Modules are the content elements of your page, and Divi comes with over 40 different elements that you can use to build with. You can use basic modules such as Text, Images and Buttons, or more advanced modules like Sliders, Portfolio Galleries and eCommerce Shops. We have individual tutorials for every single Divi module, so if you want to learn more about the types of modules that Divi provides then be sure to head back to the main document page and browse through the 「Modules」 section.
To add a module, click the gray (+) button that exists inside of any empty column or click the gray (+) button that exists when hovering over a module on the page to add a new Module below it. Once you have clicked the button, you will be greeted by a list of modules. Pick your desired module and it will be added to your page and the settings panel for the module will appear. Using this settings panel, you can begin configuring your module.

Configuring And Customizing Sections, Rows And Module
Each section, row and module can be customized in various ways. You can access an element』s settings panel by clicking the gear icon that exists when hovering over any element on the page.

This will launch the settings panel for the specified element. Each settings panel is broken up into three tabs: Content, Design, and Advanced. Each tab is designed to make accessing and adjusting Divi』s large variety of settings quick and easy. The Content tab of course is where you can add content such as images, video, links, and admin labels. The Design tab is where we』ve place all of the built-in design settings for each element. Depending on what you』re editing you can control a wide variety of design settings with a click; including: typography, spacing (padding/margin), button styles, and more. For an in-depth look at the Design tab, take a look at our design settings tutorial. Finally, if you want even more control you can head over to the Advanced tab where you can apply custom CSS, adjust visibility based on device, and (depending on which element you』re editing) do even more fine tuning.
Saving Your Page And Accessing Page Settings
To access general page settings, click the purple dock icon at the bottom of your screen. This will expand the settings bar and provide you with various options. You can open up your page settings by clicking the gear icon. Here you can adjust things like page background color and text color. You will also find the Save and Publish buttons as well as responsive preview toggles.

Jump-start Your Design With Pre-made Layouts
A great way to jump-start your new page is to start things off with a pre-made layout. Divi ships with over 20 pre-made layouts that cover a variety of common page types, such as 「About Us,」 「Contact,」 「Blog,」 「Portfolio,」 etc. You can load these up and then swap out the demo content for your own. Your new page will be finished before you know it! To learn more about using pre-made layouts, be sure to take a look at our in-depth pre-made layouts tutorial.

Saving Your Own Layouts To The Library
In addition to using the pre-made layouts that come with Divi, you can also save your own creations to the Divi Library. When a design is saved as a Divi Layout in the Divi Library, it can be loaded onto new pages. The more you build up your library with your favorite designs, the faster you will be able to create new websites. For an in-depth look at the Divi Library, be sure to check our our dedicated Divi Library tutorial
To save an item to the library, click the library icon that exists when hovering over any element and within the page settings bar. Once an item has been added to the library, it will appear in the 「Add From Library」 tab when adding new Divi layouts, sections, rows and modules.

Ok, You Have The Basics Down. Now It』s Time To Dig Deeper!
So by now you have added your first sections, rows and modules to your page. You have adjusted their settings and begun building and customizing your design. You have the basics down, but there is so much more to learn. We have dozens and dozens of tutorials that cover every single aspect of Divi. I encourage you to head back to the main documentation page and read through each and every one. By the time you are finished, you will be a Divi master!
Expanding Divi』s Potential With More Modules, Child Themes And Layouts
One of Divi』s biggest assets is its passionate community of designers and developers. On the Divi Marketplace, Divi creators have been building and sharing amazing Divi resources such as custom Divi Modules, Divi Child Themes and pre-built Divi Layouts. Using Child Themes and Layouts are great ways to jumpstart new websites and Divi Modules unlock Divi』s potential by giving you more building blocks.

How To Update The Divi Theme

How To Update The Divi Theme
Our themes support automatic updates using our updater plugin.

Updating Your Themes & Plugins
Elegant Themes products can be updated normally through the WordPress update system. When new versions of our themes or plugins become available, update notifications will appear in the Dashboard > Updates page of your WordPress Dashboard, as well as within the Themes & Plugins manager. It is important to always keep your themes and plugins updated to ensure compatibility with the latest version of WordPress, to keep your website secure, and to take advantage of the latest and greatest features! Before you can update, you must first authenticate your Elegant Themes subscription by inputting your Username and API Key into the Updates tab of your theme or plugin settings. Only members with active Elegant Themes accounts have access to the latest versions of our products. Your Username is the username you use when logging in to ElegantThemes.com, and your API Key can be found by logging into your Elegant Themes account and clicking on the Account > Your API Key link. Once you have authenticated your account, you can click the update link when you receive an update notification to automatically update your theme or plugin.
Update Notifications
When new updates become available for any of our themes or plugins, a notification will appear in the Dashboard > Updates page of your website』s WordPress Dashboard.

Authenticating Your Membership
Before you can update your theme or plugin, you must first authenticate your Elegant Themes subscription. Only members with active accounts have access to product updates. To authenticate your account, you will be asked to input two pieces of information into your theme or plugin settings panel: 1) Your Username and 2) Your API Key. Your username is the same username you use when logging in to your ElegantThemes.com account, and your API Key is a unique identifier used to authenticate your account that is only available to you when logging in. To locate your API Key, log in to the Elegant Themes members area and click on the Account > Your API Key link. Copy the API Key displayed on the page. You will by pasting this key into your Theme or Plugin options page.

Once you have copied your API Key, you will need to use it to authenticate your account by pasting it into your theme or plugin options page. Log in to your website』s WordPress Dashboard and navigate to your theme or plugin options page. For Divi, this can be found by clicking the Divi > Theme Options link.

Once you have loaded your theme or plugin options page, look for the Updates tab. Click the Updates tab to reveal the Username and API Key fields. Type your username into the Username field and paste the API Key you copied earlier into the API Key field. You should confirm that you have not copied any extra white spaces by mistake. Click save to complete the account authorization.

Once you have entered your credentials, you are now ready to update your theme. Click on the Dashboard > Updates tab and update your theme or plugin normally using the WordPress update interface. If you do not see any update notifications, or you receive an authentication error when updating, try waiting a bit and then check back later. Sometimes WordPress will cache update notifications and it can take some time for them to appear correctly.
Managing API Keys
API keys can be managed with the Elegant Themes member』s area. Here you can add new API Keys as well as deactivate keys that you have generated in the past. If you are using Divi on different client websites, it』s often a good idea to generate a new key for each site. If your relationship with the client is terminated, you can deactivate their API key.

Spam Protection Providers

Spam Protection Providers
Detailed instructions for obtaining api keys from the spam protection services supported by some Divi modules.

Divi』s Contact Form and Email Optin modules support the use of a 3rd-party spam protection service. This page provides instructions for each of the supported providers.
Google reCAPTCHA
To use reCAPTCHA with Divi you need a site key and site secret. First, click the blue button on the top right side of the page labeled 「Admin console」.

After logging in using your Google account you will see the reCAPTCHA Admin console. API keys are assigned per website domain. Click the plus icon located in the blue bar at the top right of the page.

Fill out the form making sure to choose reCAPTCHA version 3 and then click the submit button.

Finally, after submitting the form you will be redirected to a page that provides your key and secret. Copy and paste those into the appropriate fields in your Divi module settings.

How To Update Your Theme (Legacy)

How To Update Your Theme (Legacy)
Follow the instructions below to update you theme.

Updating your theme is done via the WordPress Dashboard just like any normal theme. Before you can update, however, you must first authenticate your Elegant Themes subscription using the Elegant Themes Updater Plugin. Once authenticated, you can update your Elegant Themes using the standard update interface in WordPress.
To authenticate your WordPress installation, you must first download and install the Elegant Themes Updater. Download the ZIP file here, and then install it via the Plugins > Add New link in your WordPress Dashboard.

Click the 「Upload」 link on the Plugins page to load the plugin installation page. Next, click the 「Choose File」 button to locate the elegant-themes-updater.zip file that you just downloaded. Select the file, and then click the 「Install Now」 button to upload the plugin. Once the plugin has been fully uploaded, click the 「Activate Plugin」 link to activate the plugin.

Authenticating Your Membership
Next, you will need to authenticate your Elegant Themes membership. Only active subscribers have access to theme updates. Once the plugin has been installed, click the Settings > General tab and scroll to the bottom of the page. You will notice that a new section has been added called 「Elegant Themes Automatic Update Settings.」 Here you will need to input your Elegant Themes Username as your Elegant Themes API Key.

You can find your Elegant Themes API Key here, or by logging into your Elegant Themes account and clicking on the Account > API Key link.

Once you have entered your credentials, you are now ready to update your theme. Click on the Dashboard > Updates tab and update your theme normally using the WordPress update interface.

The Divi Tabs Module

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

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.

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.

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.

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.

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]

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

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

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

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.

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.

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.

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

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

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

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