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.
Under the General tab, you’ll see two sub-tabs: General and Performance. In the General sub-tab, you’ll find general settings options for things like your site’s logo, color palette, social media links, Google fonts, back-to-top button, a custom CSS block where you can add custom CSS to your theme, and more.
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
After installing the Divi theme in your WordPress, you will see the Divi logo on the website header. So, you will replace the Divi logo with your own logo image. See the easy uploading method below.
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. Now, check the result on the live site. Following the same way, you can also change the logo on the Divi theme. Or, on some occasions, you may want to remove the logo from the Divi website header’s area. Let’s learn to hide it.
Explore our blog Divi Logo Guide: Resize, Reset, and Style Like a Pro for a comprehensive walkthrough covering all aspects of managing Divi logos, from resizing to advanced styling techniques.
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.
Read More: Divi Speed Optimization: A Comprehensive Guide
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.
Read More: Mastering Divi: Tips and Tricks for a More Efficient Web Design Experience
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.
Read More: Fixing Divi Bugs: Effective Solutions and Troubleshooting
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.
Read More: Common Divi Contact Form Issues & How to Fix Them?
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.
Read More: Getting Started with Divi: Using the Divi Builder
Sidebar Layouts
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.
Read More: Fix the Divi Builder Timeout Error
Social Media
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.
Note: In latest Divi versions, the URL for the Twitter icon has been replaced with the new X URL and corresponding icon.
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.
Note: In latest Divi version, the Twitter has been replaced with the new X URL and corresponding icon.
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
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.
Read More: How to Clear Divi Cache for Enhanced Performance – A Step-by-Step Guide
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
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.
Read More: 10 Free Graphic Design Tools Every Divi Designer Should Know
Back To Top Button
First of all you may wonder why you might even need this function. Whether you have a one-page website (with parallax scrolling or without it), or you just have a long page with a lot of content that requires a lot of scrolling to the bottom, this feature will definitely help your site’s visitors.
To activate it, simply go to: Divi > Theme Options in your WordPress admin panel and then in the general settings somewhere at the bottom you will find the option “Back To Top Button”. So just enable this option and that’s it.
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
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
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.
Read More: Divi Footer Design: 6 Best-Practicing Tips for a User-Friendly Design
Minify and Combine
Minify and Combine includes an option for JavaScript and an option for CSS. This removes the extra information and spaces that humans need but computers do not, which speeds up the website.
Custom CSS
You have the option to apply CSS globally by either utilizing the theme customizer or by utilizing the CSS settings within the Divi theme options
For Theme Options:
- Simply follow the steps below:
- Log into your WordPress Dashboard.
- Go to Divi > Theme Options. Go to the General tab > Custom CSS > write your code and Save Changes.
For Theme Customizer
- Access Theme Customizer: Log in to your WordPress dashboard. Go to “Appearance” in the admin menu and click on “ Theme Customizer.”
- Navigate to Additional CSS: Inside the Theme Customizer, find and click on the “Additional CSS” section. It might also be labeled as “Custom CSS” depending on your theme.
- Open Custom CSS Box: Click on the “Additional CSS” box to open the editor.
- Add CSS code directly into the Additional CSS box. Publish Changes.
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.
Ending Thoughts
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.
Hello Randy, this is a great tutorial! Is there any way to customize the divi scroll to top button on the right side ? That would be very helpful. Thank you.