Divi has a lot of settings throughout its many screens. One of the most common areas for settings is the Divi Theme Options. In this article, we’ll look at the General tab of the Divi Theme Options to see what they can do and help you choose the best settings for your Divi website.
Divi Theme Options General Tab
To see the Divi Theme Options General tab, go to Divi > Theme Options in the WordPress dashboard. The General tab is the first tab from the left. It will be selected by default. Most of the common settings are in the General tab.
Logo allows you to upload a custom logo to your Divi website. Click Upload.
This opens the media folder where you can drag and drop your logo from your computer to upload it or select an image from your media library. Once you have the logo in your media library, select the file and click Set As Logo and then save the changes.
Your logo will appear on the frontend of your website for everyone to see.
Fixed Navigation Bar
Fixed Navigation Bar controls if the header stays in place when visitors scroll. It’s fixed by default.
Here’s an example of the header remaining in place. The top bar in blue and the menu under it stay where they are.
Disabling Fixed Navigation Bar allows the top bar and menu to scroll with the website, as seen in the example above.
Enable Divi Gallery
Enable Divi Gallery allows you to replace the default WordPress gallery with a new Divi gallery. This displays the gallery differently within your regular WordPress content. This is a clean and more elegant gallery. The images are loaded much faster because it doesn’t have to load the image’s page. This feature is disabled by default. I highly recommend enabling this option.
The standard WordPress gallery places the images on your page, but they do not include hover effects. In this example, I’m hovering over the first image.
When you click on an image, it takes you to the image’s URL. This requires you to select the back button to see the content again.
When you enable the Divi Gallery, WordPress displays an image gallery that looks and works like the one in Divi. The gallery now includes hover effects, as seen in the example above.
Clicking the image opens it in a lightbox without leaving the page. The background shows through the overlay. It includes navigation arrows to navigate between the images in the gallery. You can also navigate to the next image by clicking on the image. The name and number of the image are shown at the bottom of the image. An X above the right corner of the image closes the lightbox.
Color Pickers Default Palette
Color Pickers Default Palette allows you to choose the colors that are available in the Divi modules by default. The default colors are black, white, red, orange, yellow, green, blue, and purple.
Here are the default colors in a Divi Text module. They match the default colors.
Click on a color in the theme options to change it. I’ve selected black and moved the slider to a bright green.
The Divi modules now show my bright green in place of black.
Of course, you can still choose black. You just have to click the three dots under the color eye dropper for the colors to open the larger color palette.
Grab the First Post Image
Grab the First Post Image allows you to change the way WordPress works with thumbnail images for your posts.
By default, the feature image is a custom post type that allows you to add any image as the thumbnail image. If you don’t want to use a featured image, the post will display in your list of posts (such as the blog post archive page) without an image, as seen in the example above.
Enabling this feature allows WordPress to grab the first image in the post and display it in your list of posts, creating its own featured image. This example shows the same post as the previous example, but with this feature enabled.
Blog Style Mode
Blog Style Mode allows you to show the entire blog post on the blog archive page.
The blog posts normally show a truncated version of the post, as in the example above.
Enabling this feature shows the complete posts on the blog archive page including all their content. This gives you lots of control over how your content is presented.
The sidebar layout options allow you to choose which side of the screen the sidebar displays on your archive pages or your WooCommerce pages. For the post archives, choose between right or left. For WooCommerce pages, choose between right, left, or none (labeled as Fullwidth).
Google API Key
The Google API Key is the field where you can enter your key for Google Maps. You can get the key from the Google Maps Platform page. If you enter the key in this field it will be used by every Divi map module on your website. You can also enter the key within the modules themselves.
Enqueue Google Maps Script enables the Google API Key to be usable with the Divi map modules. If you have compatibility issues with other plugins that use the Google Maps API script. If this is disabled, you’ll need to add the API to the modules to use Google Maps.
Use Google Fonts
Use Google Fonts lets you choose whether to use fonts that are imported from Google’s servers into your pages. Disabling this can help your page to load faster, but you’ll have fewer fonts to choose from in your Divi modules.
This example shows the font options with Google Fonts enabled. The blue bar indicates the large number of fonts in the dropdown box.
Without Google Fonts, Divi only comes with 5 fonts to choose from. You can add more by uploading them using any module that has font selections or installing a Divi font plugin.
Enabling the social media icons adds them to the header and footer of your website. You’ll also need to enter the URL for your social media accounts. This also includes RSS.
This example shows the icons that I’ve selected in the top menu bar. The bar and icons are enabled in the Theme Customizer under Header & Navigation.
This example shows the icons in the footer. The icons are enabled in the Theme Customizer under Footer > Footer Elements.
Number of Posts
You can set the number of posts that displays on a single page for WooCommerce products, categories, blog archives, search results, and tag pages. Each is set individually, giving you control over the look of these pages even if they’re not made with Divi. Simply enter the number of posts you want each page to display in their fields.
Date Format lets you determine how the date will be displayed on your posts.
The default setting shows the month, day, and year. For information about date formatting, see the tutorial in WordPress Support.
Use Excerpts When Defined
Use Excerpts When Defined tells WordPress to display excerpts if they’re added into the excerpt field for the page or post.
This example shows an excerpt added to the Excerpt field under the post in the classic editor. Now, when WordPress shows this post on the archive page it will show this excerpt.
In this example, the top post has a defined excerpt while the second post doesn’t.
Responsive Shortcodes makes any shortcodes that you’ve added to your content respond to the screen size being used to view your website.
Google Fonts Subsets
Google Fonts Subsets enables Google fonts for other languages besides English.
Back To Top Button
Back To Top Button enables a button on the bottom right of the screen on the frontend. It appears after the user scrolls and they can click it to quickly get back to the top of the website.
This example shows the button. It’s disabled by default. I highly recommend enabling this if you have long pages because it makes your website easier to use.
Smooth Scrolling makes the website scroll smoothly when visitors use the scroll wheel of a mouse. This is especially helpful if a large number of users visit your website with desktops.
Disable Translations turns off the translated theme strings on your website. This is helpful if you’re not using a multi-lingual website. You’ll need to disable this if you do want to use a multi-lingual website. It is disabled by default.
Enable Responsive Images
Enable Responsive Images automatically creates responsive image sizes when images are uploaded. It also adds the srcset attribute to the images. This is better for SEO and it provides faster images because smaller images are served to smaller screens, but they can take more space on your server because multiple versions of each image are created. It’s enabled by default.
Minify and Combine
Custom CSS provides a field where you can add CSS. The code can be used to target the entire website or specific elements. CSS is more advanced than we’ll cover in this beginner’s series, but Divi does make it easy to use.
That’s our look at the Divi theme options General tab. They’re easy to use and are a great way to add small customizations to your website. They do include descriptions (click on the question mark that appears when you hover over the options) but some are difficult to understand without seeing examples. We’ve provided these examples so you can see exactly how the options will affect your website.
For more in this beginners series, see the last post: Getting Started with Divi: Hidden Divi Builder Settings.
We want to hear from you. Have you tried any of these Divi theme options? Let us know about your experience in the comments.