Is this your first time installing the Divi theme and wondering how to set it up? Great, you're in the right place. In this article we will go through all the options in the GENERAL tab of the Divi theme.
This will help you to understand what these options are and how to choose them so that your site is in line with your project.
As the DIVI OPTIONS are detailed in numerous tabs, you will be able to navigate through the series of articles dedicated to him.
But for now, let's look in detail at the General tab (the general settings).
The programme for this article is as follows:
- Divi theme options: how does it work?
- What are the options on the General tab of the Divi theme?
- Other theme settings options
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - Divi theme options: how does it work?
Once you have installed and activated the Divi theme on your WordPress sitea new item will appear at the bottom of the left sidebar of your site administration, named "Divi.
When you move the mouse over this tab, sub-elements appear including the "Theme options" tab.
If you click on this tab, you will be taken to a screen with the Divi colours, which will offer you many elements to set up.
We will start with the GENERAL tab:
Let's take a closer look...
2 - What are the options in the General tab of the Divi theme?
To keep the screenshots not too busy, I have split the content of the General tab options into 3 parts.
2.1 - General Tab - Part 1
1 - Logo
This is where you can upload your site's logo.
By clicking on Click on "Go online".you can access your library and choose your logo.
If your media library does not yet contain your logo, you can upload it from your computer (from the "upload files" tab ).
2 - Fixed navigation bar
By default, the fixed navigation bar is activated, if you deactivate this option, your main menu - located at the top of the screen - will only appear when the visitor scrolls down your page.
3 - Activate the Divi Gallery
All WordPress sites can display an image gallery, but the Divi theme allows you to replace the default WordPress style with its own style. To do this, simply enable this option.
4 - Default colour palette
When working on a web project, you have to respect colour codes and this option allows you to pre-define up to 8 colours.
This is great because you can easily use them throughout your site, whenever the Divi Builder prompts you to choose a colour.
Make sure you enter the values for the colours you use when you install Divi, this will save you a lot of time when you are working on the design of your web designs.
5 - Enter the first image of the article
This is another important option.
If this option is enabled, the "featured image " of each article will be replaced by the first image in your article.
If you disable this option, the thumbnail of your post will match the "front page image" that you upload via the "featured image " field at the bottom right of each WordPress post.
If you wish to use several highlight images, follow this tutorial.
6 - Blog style mode
It's a strange translation, I grant you...
In fact, this option should not be activated for SEO reasons.
Divi uses snippets of your posts but if you prefer to display the full content of your posts (in the archives, blog page etc.) then you'll need to enable it (I insist, this is not SEO-Friendly).
7 - Sidebar Layout and Shop Template
From these two options, you will be able to choose the location of your blog and shop sidebar.
You can then decide whether it should appear on the right or the left.
If you wish to get a fixed sidebar, follow this tutorial.
8 / 9 - Google Map API Key and Script
10 - Using Google Fonts
This option is enabled by default. It allows you to use all Google Fonts directly from the Divi Builder.
If you don't want to use Google Fonts for performance and privacy reasons, you can disable it.
2.2 - General Tab - Part 2
11 - Social network icons
For each social network, you can decide to display its icon in the footer of your site.
By default, only 5 icons are available: Facebook, Twitter, Google+, Instagram and RSS feeds.
If you need more icons, you'll have to code them manually in a child theme => read this article for add new icons in the footer.
12 - Social network URLs
Depending on the icons you have activated in the previous step, you will need to enter the corresponding URLs.
For your site's RSS feed, you can enter the following address: https: //mon-site.com/feed
13 - The number of posts per archive
Archive pages are pages that are automatically generated by WordPress.
Whether it's your e-commerce product archives, category archives, search page or label archives, Divi allows you to set the number of items to be displayed on each page.
For SEO purposes, it is advisable not to restrict this number too much.
So don't hesitate to display 50, 100 or even 100 elements per archive. This will prevent the robots from indexing too many sub-pages.
This is one of the tips to make Divi SEO-Friendly.
2.3 - General Tab - Part 3
14 - Date format
Here you can define the date format of your articles.
This date is displayed everywhere on your blog (in the article metas, in the extract etc.).
The default format is M j,Y which gives Jan 2, 2018. If you choose the format j F Y format, it will be January 2, 2018.
If you prefer other formats, I invite you to visit this page dedicated to date formats.
15 - Use of extracts
If you deactivate this option, your extracts will not be used.
In order to know where to enter your post excerpts, you need to make sure that you enable an option in WordPress when you are in the post edit.
At the top of your screen, on the right hand side, there is a small tab called "screen options". Open it and check 'extract'.
From then on, all your articles will display a new field to enter the excerpt, watch this video instead...
16 - Reactive shortcodes
Activating the "responsive shortcodes" option allows you to display shortcode elements in a responsive manner, i.e. adaptable to all screens.
17 - Google Fonts subset
This feature enables Google fonts for languages other than English.
18 - Back to top
This is the option to enable or disable the little button at the bottom right of your site that allows you to go to the top of the page quickly and easily.
19 - Smooth scrolling
I'm not sure if this option is important, it would allow for smoother scrolling when scrolling with the mouse... To be seen!
20 - Disabling translations
You can disable this option if you want to use the English theme interface because you find that Divi is badly translated.
21 - Responsive Image
This option adds a srcset attribute to your images during import. This attribute is recommended by CSS3 to make your images adaptable to all screen sizes.
Without this option active, your images should still be responsive.
This is the kind of option offered by a caching plugin like WP Rocket for example.
FYI: MINIFICATION removes all spaces and line breaks from a file, whether it is a CSS or JS file.
It has been found that minification improves the loading time of a site by a few seconds, so it improves performance.
If you are using a caching plugin, do not check this option.
23 - Customise CSS
This field is nothing more or less than a reflection of the WordPress option available from the Appearance > Customise > Additional CSS tab.
To customise your Divi theme, you will need to do this regularly. Sometimes, if the changes you want to make to Divi are simple, you won't need create a child theme and this option will be sufficient.
24 - Save
Once you have set up this first tab, don't forget to save your changes.
If a small PopUp appears from your browser, asking you to update your password, select "do not save". This will avoid password conflicts.
3 - Other theme settings
Nothing was very complicated in this tab and in any case, there is no good or bad settingsIt's all subjective.
Why then, did I want to write this series of articles dedicated to the options available in the Divi theme?
Simply because there is a beginning to everything and we do not all have the same knowledge of websites and jargon.
So, I hope that these articles will be useful for the more novice among us!
Go to the other articles in the series to continue setting up your site with Divi:
- How to set up the General tab of the Divi theme? (you are on this article)
- How to set up the Navigation tab of the Divi theme ?
- How to set up the Divi theme creator tab
- How to set up the Layout tab of the Divi theme ?
- How to set up the Advertising tab of the Divi theme ?
- How to set up the SEO tab of the Divi theme ?
- How to set up the Integration tab and Updates tab of the Divi theme ?
Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!