Skip to main content
Using The Divi Theme Options

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

Updated over a week ago

Divi Theme Options is where global settings for your Divi website live.

This is where you can control your site's color palette, functionalities, logo, performance, ads, SEO, and more. This doc will show you how to access Divi Theme Options and explain what each setting controls.

How to Access Divi Theme Options

Navigate to your WordPress Dashboard → Divi → Theme Options.

Divi Theme Options Main Navigation Tabs Overview

Here, you'll find the Divi Theme Options dashboard with main navigation tabs such as:

  • General

  • Navigation

  • Builder

  • Layout

  • Ads

  • SEO

  • Integration

  • Updates

General Tab

Under the General tab, you'll see two sub-tabs:

  • General

  • Performance

General sub-tab

  • Logo: Used to upload the website logo image, used in the Header area of your website.

  • Fixed Navigation Bar: When turned on, the main Header area of your website will be fixed at the top of the browser window when the page is scrolled down/up.

  • Color Pickers Default Palette: Defines the general website's color palette.

  • Grab the first post image: When enabled, the Blog Module will be able to be used as the post Featured image, the first image contained in the Post's content.

  • Blog Style Mode

  • Sidebar Layout: Defines the default position of the sidebar. By default, the Right Sidebar option is used.

  • Shop Page & Category Page Layout for Woocommerce: Defines the sidebar's default position on WooCommerce-related pages, such as single product pages.

  • Google API Key: Used in the Map module for displaying Google Maps.

  • Use Google Fonts: If Enabled, all text-based modules will have access to an extensive list of Google Fonts.

  • Google Font Subsets: Used for loading Google font subsets, useful especially for languages that are using the Cyrillic alphabet or similar.

  • Enqueue Google Maps Script: The required Google Maps script will be loaded if enabled. This script is used to render the map correctly inside the Divi Map Module.

  • Show Facebook Icon: If enabled, the Facebook Icon will show in the Footer's Bottom Bar.

  • Show X Icon: If enabled, the X Icon will show in the Footer's Bottom Bar.

  • Show Instagram Icon: If enabled, the Instagram Icon will show in the Footer's Bottom Bar.

  • Show RSS Icon: If enabled, the RSS Icon will show in the Footer's Bottom Bar.

  • Facebook Profile Url: Defines the links for the Facebook Profile. The URL set here will be used as a link for the Facebook Footer icon.

  • X Profile Url: Defines the links for the X Profile. The URL set here will be a link for the X Footer icon.

  • Instagram Profile Url: Defines the links for the Instagram Profile. The URL set here will be used as a link for the Instagram Footer icon.

  • RSS Icon Url: Defines the URL of the RSS feed. The URL set here will be a link for the RSS Footer icon.

  • Number of Products displayed on WooCommerce archive pages: Defines the number of products any WooCommerce Archive page will display.

  • Number of Posts displayed on Category page: Defines the number of posts any Post Category page will display.

  • Number of Posts displayed on Archive pages: Defines the number of posts any Archive page will display.

  • Number of Posts displayed on Search pages: Defines the number of posts on the Search Results page.

  • Number of Posts displayed on Tag pages: Defines the number of posts any Tag Page will display.

  • Date format: Defines the publish Date format displayed for each post's meta text.

  • Use excerpts when defined: If enabled, the manual excerpt text added to every post will generate excerpts in the Blog module or archive pages.

  • Back To Top Button: If enabled, it will display the Back To Top Button. The users can click on this button to automatically scroll to the top of the page.

  • Smooth Scrolling: Enables smooth scrolling.

  • Disable Translations: If enabled, the automatic translations of Divi interface elements will be disabled. English will be used for all Divi interface elements instead of the website's language.

  • Enable Responsive Images: If Disabled, Divi will not generate any smaller image version used in responsive mode.

  • Custom CSS: Code editor for adding custom CSS code that will be applied site-wide.

Performance sub-tab:

Settings like Dynamic Module Framework, Dynamic CSS, Critical CSS, Dynamic JavaScript Libraries, and more can help improve the speed of your website.

  • Dynamic Module Framework: Enable this to allow the Divi Framework to load only the modules used on the page and process the logic for the features in use.

  • Dynamic CSS: Dynamic CSS greatly reduces CSS file size by dynamically generating only the assets necessary for the features and modules you use. This eliminates all file bloat and greatly improves load times.

  • Dynamic Icons: The icon font is broken up into various subsets. These subsets are loaded only when needed based on the modules and features used on each page. If you need access to the entire icon font on all pages (for example, using our icon font in your child theme), you can disable this option and load the entire icon font library on all pages.

  • Load Dynamic Stylesheet In-line: This option dequeues the Extra style.css file and prints the contents in-line. This removes a render-blocking request and improves the PageSpeed scores of individual pages. However, it also prevents the style.css file from being cached. This option is recommended if you are optimizing for a website with a single landing page.

  • Critical CSS: Critical CSS greatly improves website load times and Google PageSpeed scores by deferring non-critical styles and eliminating render-blocking CSS requests.

  • Critical Threshold Height: When Critical CSS is enabled, Extra determines an "above the fold threshold" and defers all styles for elements below the fold. However, this threshold is an estimate and can vary on different devices. Increasing threshold height will result in fewer styles, resulting in slightly slower load times but less of a chance for Cumulative Layout Shifts to occur. If you are experiencing CLS issues, you can increase the threshold height.

  • Dynamic JavaScript Libraries: Only load external JavaScript libraries when they are needed by specific Divi modules on the page. This removes unused JavaScript from the main scripts bundle and improves load times.

  • Disable WordPress Emojis: WordPress loads its WordPress emojis. Modern browsers support native emojis, making WordPress's emojis unnecessary in most cases. Removing WordPress emojis removes unneeded assets and improves performance.

  • Defer Gutenberg Block CSS: If a page is built with the Divi Builder, the Gutenberg block CSS file is moved from the header to the footer. Since the file is most likely unused, we can load it later. This removes a render-blocking request and improves performance.

  • Improve Google Fonts Loading: Enable cache Google Fonts and load them inline. This reduces render-blocking requests and improves page load times.

  • Defer jQuery And jQuery Migrate: When possible, jQuery and jQuery Migrate will be moved to the body to speed up load times. If a third-party plugin registers jQuery as a dependency, it will be moved back to the head.

  • Enqueue jQuery Compatibility Script: Some third-party scripts may need to be correctly enqueued by declaring jQuery as a dependency. If jQuery is deferred, these scripts could break. Suppose you are experiencing console errors after enabling the Defer jQuery And jQuery Migrate options. In that case, you can enable this option, which will load an additional compatibility script that will attempt to solve the issue. You can turn this feature off if everything is working fine without it.

  • Defer Additional Third-Party Scripts: Warning: This can cause JavaScript errors in some cases and should be used carefully. When enabled, scripts registered by plugins and themes will be deferred to improve performance, and jQuery will always be loaded in the body.

Navigation tab

You'll see three sub-tabs in the Navigation tab:

  • Pages

  • Categories

  • General Settings

Pages sub-tab

  • Exclude pages from the navigation bar: If no WordPress menu has been created, all published pages will be used in the WordPress Menu. Use this option to choose which page will show and which will not.

  • Show dropdown menus: If Enabled, all Menu items will show their respective sub-menu when the user hovers over them.

  • Display Home link: If Enabled, a Menu item called Home will be added to the WordPress menu.

  • Sort Pages Links: Defines criteria based on which the pages are sorted in the WordPress menu, automatically generated based on all published pages.

  • Order Pages Links by Ascending/Descending: Defines the sorting method used in the WordPress menu, automatically generated based on all published pages.

  • Number of dropdown tiers shown: Defines how many sub-menus the WordPress menu will display.

Categories sub-tab

  • Exclude categories from the navigation bar: Define which Post Categories to be included in the automatically generated WordPress menu.

  • Show dropdown menus: Shows/hides the sub-menus

  • Hide empty categories: If enabled, Post Categories with no published posts assigned to them will not be displayed in the automatically generated WordPress menu.

  • Number of dropdown tiers shown: Defines how many sub-menu each menu item will display.

  • Sort Categories Links: Defines criteria based on which the categories are sorted in the WordPress menu, automatically generated by WordPress.

  • Order Category Links: Defines the sorting method used in the WordPress menu, automatically generated based on post categories.

General Settings sub-tab:

  • Disable top-tier dropdown menu links: if enabled, the sub-menu items inside the WordPress menu will be disabled.

Builder tab

In the Builder tab, you'll see two sub-tabs:

  • Post Type Integration

  • Advanced

Post Type Integration:

  • Enable Divi Builder On Post Types: Defines which available post types the Divi Builder can be used.

Advanced sub-tab

  • Static CSS File Generation: Enable/Disable the CSS File Generation. For best loading times, these options should always be enabled.

  • Output Styles Inline: All the CSS files are outputted inline (on the page).

  • Product Tour: Enable/Disable the product tour if the Divi Builder is being used for the first time. Great for getting you up to speed on the basic usage of Divi.

  • Enable The Latest Divi Builder Experience: disables the deprecated Divi Builder in favor of the most recent version.

  • Enable Classic Editor: If Enabled, it will disable the WordPress Gutenberg editor.

Layout tab

You'll see three sub-tabs in the Layout tab:

  • Single Post Layout

  • Single Page Layout

  • General Settings

Single Post Layout sub-tab

  • Choose which items to display in the post info section: Used only on single post pages. It allows you to choose which meta elements each post should display.

  • Show comments on posts: Enable/Disable comments on single post pages.

  • Place Thumbs on Posts: Enable/Disable the post's Featured Image usage.

Single Page Layout sub-tab

  • Place Thumbs on Pages: Enable/Disable the display of Page's Featured Image.

  • Show comments on pages: Enable/Disable the usage of comments on single Pages.

General Settings sub-tab:

  • Post info section: Choose which items appear in the post info section on pages. This area, usually below the post title, displays basic information about your post. The highlighted items shown below will appear.

  • Show Thumbs on Index pages: Enable/Disable this option to show/hide thumbnails on Index Pages.

Ads tab

In the Ads tab, you'll find settings configuring ads displayed on your website that are not configured through widgets.

  • Enable Single Post 468x60 banner: Enabling this option will display a 468x60 banner ad on the bottom of your post pages below the single post content. If enabled, fill in the banner image and destination url below.

  • Input 468x60 advertisement banner image: Defines the image URL used in the 468x60 banner Ad.

  • Input 468x60 advertisement destination url: Defines the URL for the 468x60 banner Ad.

  • Input 468x60 Adsense code: Used to add Google Adsense code to the bottom of your post pages below the single post content.

SEO tab

You'll find three sub-tabs in the SEO tab:

  • Homepage SEO

  • Single Post SEO

  • Index Page SEO

Homepage SEO sub-tab:

  • 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, enable this option and fill in the custom title field below.

  • Enable meta description: By default, the theme uses your blog description, defined when you created your blog, to fill in the meta description field. If you want a different description, 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 no longer use keywords to rank your site, but some people define them anyway, just in case. If you want to add meta keywords to your header, enable this option and fill in the custom keywords field below.

  • Enable canonical URLs: Canonicalization helps 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 different URLs leading to your homepage. From a search engine's perspective, these duplicate URLs, 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 want to use officially. The theme bases its canonical URLs on 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 <title></title> 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 control how your titles are generated. Here, you can choose which order you want your post title and blog name displayed or completely remove the blog name from the title.

  • 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 -.

Single Post SEO sub-tab

  • Enable custom titles: By default, the theme creates post titles based on the title of your post and your blog name. If you want to differentiate your meta title from 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 want to add a meta description to your post, you can use 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 on the custom field name you define below.

  • Enable custom keywords: If you want to add meta keywords to your post, use 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 on the custom field name you define below.

  • Enable canonical URLs: Canonicalization helps 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, 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 want to use officially. The theme bases its canonical URLs on 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 want 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 want your post title and blog name 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 -.

Index Page SEO sub-tab

  • Enable canonical URLs: 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, 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 want to use officially. The theme bases its canonical URLs on your permalinks and the domain name defined in the settings tab of wp-admin.

  • Enable meta descriptions: Check this box to display meta descriptions on category/archive pages. The description is based on the category description you choose when creating/editing your category in the WordPress Dashboard → Post → Post Categories page.

  • Choose title autogeneration method: Here, you can choose how your titles on index pages are generated. You can change the order in which your blog name and index title are displayed or completely remove the blog name from the title.

  • 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 tab

In the Integration tab, you'll find settings like enabling header code, enabling body code, adding code to your blog, adding code to the tag, and more. This is another place where you customize your site with CSS and JavaScript.

  • 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 adding 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 the 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 integrate 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 bottom of all single posts. This is useful if you are looking to integrate things such as social bookmarking links.

Updates tab

The updates tab is where you'll paste your Elegant Themes membership info so that your Divi install is linked to your ET account, ensuring you have access to all future updates and features of Divi.

Before receiving product updates, you must authenticate your Elegant Themes subscription.

To do this, enter your Elegant Themes Username and Elegant Themes API Key into the Updates Tab in your theme and plugin settings.

To locate your API Key, log in to your Elegant Themes account and navigate to the Account → API Key page.

Learn more here. If you still get this message, please ensure your Username and API Key have been entered correctly.

  • Username: type your Elegant Themes username here.

  • API Key: Paste your unique API key here.

  • Version Rollback: If you recently updated to a new version and are experiencing problems, you can easily roll back to the previously installed version. We recommend using the latest version and testing updates on a staging site. However, if you run into problems after updating, you always have the option to roll back.

Did this answer your question?