Divi Theme Options: focus on the General tab

Updated on 22/08/2019 | Published on 12/01/2018 | 20 comments

This is the first time you have installed the Divi theme and you are wondering how to set it up? Perfect, you've come to the right place. In this article we will review all the options of the GENERAL tab of the Divi theme.

This way you will be able to understand what these options correspond to and how to choose them so that your site is in line with your project.

As the DIVI OPTIONS are detailed through many tabs, you will be able to navigate through the a series of articles dedicated to him.

But for now, let's look in detail at the General tab (the general settings).

Here is the program of this article:

  1. The Divi theme options: how does it work?
  2. What are the options of the General tab of the Divi theme?
  3. The other options for setting up the theme

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - The Divi theme options: how does it work?

Once you have installed and enabled the Divi theme on your WordPress sitea new element will appear at the bottom of the left sidebar of your site administration, named "Divi".

Divi - Options du thème
Divi - Theme options

When you move the mouse over this tab, sub-elements appear whose tab "theme options".

If you click on this tab, you will arrive on a screen with Divi's colors which will propose you many elements to configure.

We will start with the GENERAL tab:

Onglet Général des options Divi
General tab of the theme options

Let's take a closer look....

2 - What are the options of the General tab of the Divi theme?

To keep the screenshots not too loaded, I cut the content of the options in the General tab into 3 parts.

Discover all you can do with the Divi theme

2.1 - General Tab - Part 1

Général - partie 1
General Tab - Part 1/3

1 - Logo

This is where you can download your website logo.

By clicking on "Put online"you will be able to 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 "send files" tab).

2 - Fixed navigation bar

By default, the fixed navigation bar is enabled, if you disable this option, your main menu - located at the top of the screen - will only appear when the visitor descends further down your page (to the scroll).

Follow this tutorial if you want to set your menu completely to scroll.

3 - Activate the Divi gallery

All WordPress sites can display an image gallery but the Divi theme suggests that you replace the default WordPress style with its own style. To do this, it will be sufficient to activate this option.

4 - Default color palette

When you work on a web project, you have color codes to respect and this option allows you to pre-define up to 8 colors.

This is very interesting since you will be able to use them easily throughout your site, each time the Divi Builder suggests you choose a color.

Be sure to enter the values of the colors you use when installing Divi, you will save a lot of time during the design of your web designs.

5 - Enter the first image of the article

Here is another important option.

If this option is enabled, the "featured image" of each item will be replaced by the first image contained in your item.

If you disable this option, the thumbnail of your article will match the "headline image" you are downloading via the "highlighted image" field located at the bottom right of each WordPress article.

If you wish to use several images of highlighting, follow this tutorial.

6 - Blog style mode

It's a funny translation, I'll give you that...

In fact, this option should not be enabled for SEO (natural referencing) questions.

Divi uses the excerpts from your articles but if you prefer to display the entire content of your articles (in the archives, the blog page etc.) then you will need to activate it (I insist, it's not SEO-Friendly).

7 - Sidebar Layout and shop template

From these two options, you can choose the location of your blog and shop sidebar.

You will then decide to make it appear on the right or left.

If you wish to get a fixed sidebar, follow this tutorial.

8 / 9 - API and Script key of Google Map

If you use a Google developer account for your maps (Google Map), you can enter your API key here and decide to queue the scripts for improve the performance of your site.

10 - Using Google fonts

This option is enabled by default. It allows you to use all Google Font directly from the Divi Builder.

If you don't want to use Google Fonts to improve performance and keep your players' privacy, you can disable it.

2.2 - General Tab - Part 2

Général - partie 2/3
General Tab - Part 2/3

11 - Social network icons

For each social network, you can decide to display its icon at the bottom of your site.

By default, only 5 icons are available: Facebook, Twitter, Google+, Instagram and RSS Feed.

If you need more icons, you will need to code it manually in a child theme => read this article to add new icons in the footer.

12 - Social network URLs

Depending on the icons you have activated in the previous step, you will have to enter the corresponding URLs.

Concerning the RSS feed of your site, you can enter the following address: https://mon-site.com/feed

13 - The number of posts per archive

Archive pages are pages automatically generated by WordPress.

Whether it is the archives of your e-commerce products, the category archives, the search page or the label archives, Divi offers you to set page by page the number of items to display.

For a SEO question, it is advisable not to restrict this number too much.

Feel free to display 50, 100 or even 100 items per archive. This will prevent robots from indexing too many subpages.

It is one of the Tips to make Divi SEO-Friendly.

2.3 - General Tab - Part 3

Général - partie 3/3
General Tab - Part 3/3

14 - Date format

Here you can define the format of the date of your articles.

This date is displayed everywhere on your blog (in the metas the article, in the excerpt etc.).

The default format is M j,Y which gives us Jan 2, 2018. If you choose the format j F F Y Y it will give you 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 disable this option, your extracts will not be used.

To find out where you need to enter excerpts from your articles, be sure to enable a WordPress option when you are in the edition of an article.

At the top of your screen, on the right, there is a small tab called "screen options". Open it and check "extract".

From that moment on, all your articles will display a new field to enter the extract, watch this video instead...

16 - Reactive short codes

Enabling the "reactive shortcodes" option allows you to display shortcode elements in a responsive way, i.e. adaptable to all screens.

17 - Google Fonts subset

This feature enables Google fonts for languages other than English.

18 - Return to top of page

This is the option to activate or deactivate the small button located at the bottom right of your site and allowing you to easily and quickly move up to the top of the page.

19 - Fluid scrolling

I'm not sure if this option is important, it would allow a more fluid scrolling when scrolling with the mouse... To see!

20 - Disable translations

You can disable this option if you want to use the theme interface in English because you find that Divi is mistranslated.

21 - Responsive Image

This option adds a srcset attribute to your images when importing. This attribute is recommended by CSS3 to make your images adaptable to all screen sizes.

Without this active option, your images should still be responsible.

22 - Minimize JavaScript and CSS

These options allow you to minimize and combine some JavaScript and CSS files to improve the performance of your site.

This is the kind of option offered by a cache plugin like WP Rocket for example.

For your information: MINIFICATION removes all spaces and line breaks contained in a file, whether it is a CSS or JS file.

It has been recognized that minification improves the loading time of a site by a few seconds, so it improves performance.

If you are using a cache plugin, do not check this option.

23 - Customizing CSS

This field is nothing more or less than a reflection of the WordPress option available from the Appearance > Customize > Additional CSS tab.

To customize your Divi theme, you will need it regularly. Sometimes, if the changes you want to make to Divi are simple, you won't need to 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 - The other options for setting up the theme

Nothing was very complicated in this tab and anyway, there is no good or bad settingsall this is subjective.

Why then, I wanted 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 these articles can be useful to the most novice of us!

Go to the other articles in the series to continue the configuration of your site with Divi:

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

Comment paramétrer les options de Divi ?
How to set the Divi options? Say it on Pinterest!
Divi tutorial : Divi general tab

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

20 Commentaires

  1. Marie

    Bonjour, j’ai installé Divi sur mon site wordpress, mais je n’ai pas de nouvel élément qui a apparu, qui doit se trouver en bas de la barre latérale gauche de mon administration de site, nommé « Divi ». J’utilise ce thème avec LearnDash, est ce que cela a un rapport avec le fait que je n’ai pas cet onglet? Ou alors j’ai mal installé le thème ? Merci

  2. Marie

    Bonjour, j’ai installé le thème divi sur mon site wordpress, mais je n’ai pas ce nouvel élément qui a apparu, en bas de la barre latérale gauche de mon administration de site, nommé « Divi ». J’utilise le thème avec Learndash, est ce que cela a un rapport avec le fait que je n’ai pas cet onglet ? Ou est ce que j’ai mal installé le thème ? Merci

  3. Lycia

    Bonjour Marie, je me demande quel thème vous utilisez ? LearDash ou Divi ? Divi est un thème. Mais il existe aussi le Divi Builder, qui est un plugin de construction de page. Donc, peut-être il faudrait creuser de ce côté là ? Si vous avez installé le thème Divi, il faudra l’activer à la place de LearnDash. Si vous avez installé le Divi Builder, il faudra activer le plugin et voir s’il est bien compatible avec LearnDash.

  4. Maelle

    Bonjour,

    Je voudrais créer une barre latérale avec mes icônes de réseaux sociaux (comme sur cette page https://astucesdivi.com/options-divi-general/, barre verte à gauche), comment faut-il procéder?

  5. Lycia

    Bonsoir Maelle,
    La barre dont vous parlez est faite avec le plugin Monarch. Celui-ci est un plugin premium qui est disponible avec la licence Divi. Si vous l’avez, vous pouvez facilement l’installer et le paramétrer.
    À bientôt.

  6. Anouchka Neuvecelle

    Bonjour,
    Merci pour toutes ces petites précisions qui ont éclairé certaines de mes questions.
    J’ai un souci avec mon entête de site. J’ai un logo officiel qui est présent, mais je dois ajouter, toujours au niveau de la barre de menu (voire sur le menu secondaire), deux logos qui sont obligatoires d’un point de vue juridique.
    Je travaille sur le thème Divi, mais je n’arrive pas trouver cette option.
    Merci pour votre aide !
    Anouchka

  7. Lycia

    Bonjour Anouchka, pour ajouter le logo au niveau du menu principal, vous devez aller à Divi > Option du Thème > Général et télécharger votre logo. Pour insérer un logo dans la barre supérieure, il faudra certainement effectuer un développement spécifique.

  8. Marie

    Bonjour
    J ai tout fait
    Je rencontre un problème
    Comment lier WordPress a mon .com
    J arrive à me servir de divi sur WordPress par contre qd je vais sur mon site les changements ne se font pas
    Help ! Suis à bout je trouve pas !
    Merci d avance

  9. Lycia

    Bonjour Marie, c’est un peu vague ce que vous m’expliquez… est-ce un problème de pointage de nom de domaine ? Si oui, vous pouvez voir cela avec votre hébergeur… quant à vos modifications, est-ce que vous les enregistrez bien ? Est-ce que vous rafraîchissez votre page dans le navigateur ?

  10. Virginie HUBER

    Bonjour, merci pour l’article très clair !
    J’ai un problème avec la taille du logo sur le site que je créé en ce moment, le logo est parfait sur desktop, mais tout petit sur tablette et smartphone, j’ai une page statique avec une taille de logo à 80% sur desktop et une hauteur de menu à 200.
    J’ai cherché pendant des heures pour résoudre le pb sans succès …
    Merci pour votre aide !

  11. Lycia

    Bonjour Virginie. Peut-être pouvez-vous partager votre url pour que je puisse mieux visualiser ?

  12. Sylvie Brassard

    Bonjour

    e cherche a installer l’option qui fait apparaitre seulement un bout d’un article et lorsque l’on appuie sur lire plus le reste du texte s’affiche.

    Merci

  13. Yves

    Bonjour, Est-il possible de créer un dossier sur une page (comme une chemise sous Windows ou MAC) et y inclure des fichiers PDF. Exemple : j’ai 4 documents PDF qui doc1.pdf, doc2.pdf, doc3.pdf et doc4.pdf, Ces 4 documents seraient placés dans une chemise ou dossier nom Rencontre du 1er décembre. Les visiteur cliquent sur la chemise et voient les 4 fichiers PDF, Merci

  14. Lycia Diaz

    Je ne suis pas sûre Yves… Vous pouvez mettre ces 4 PDF dans un dossier zippé et mettre ce dossier en téléchargement ? Sinon, vous pouvez télécharger ces 4 fichier dans la bibliothèque de média puis les ajouter dans des modules de Divi sur une même page ? Il y a plusieurs solutions je pense, reste à savoir celle qui vous convient le mieux…

  15. Cotton Xavier

    Bonjour,

    Bien q’ayant rentré le nom du site, je ne le vois pas apparaitre?

    comment dois je faire ?

  16. Lycia Diaz

    Salut Xavier,
    L’affichage du nom de ton site dépend du thème. Et Divi ne l’affiche pas. Par contre, sur ta homepage, tu peut ajouter un bloc de texte ou de titre pour inscrire le nom de ton site.

  17. Patier

    Bonjour,

    J’utilise Divi avec woocommerce pour ma boutique. Il me manque de pouvoir proposer l’option du choix de tailles ou couleurs sur la page produit.

    Comment puis-je installer cette option ?

    Meci

  18. Lycia Diaz

    Salut Patier.

    Pour créer des variations de produit (par taille, couleur etc.), il faut que tu crées des « produits variables » et non des « produits simples ».
    Tu pourras alors créer des attributs de produit ainsi que des variations.
    Cela ne dépend en aucun cas de Divi. C’est WooCommerce lui-même qui te permet de faire ça.
    Peut-être que ce tuto peut t’aider.
    😉

  19. Anaïs

    Bonjour,
    Merci pour vos articles, je me permet néanmoins de poser une question concernant le paramétrage des texte dans divi pour laquelle je ne trouve de réponse nulle part…
    En effet, mes paragraphes se « découpent » par eux même et parfois en plein milieu d’un mot ça passe à la ligne. Ce n’est pas très clair pour le lecteur… Avez vous une solution pour que les mots ne se divisent pas par eux meme?
    Merci d’avance

Trackbacks/Pingbacks

  1. Comment ajouter des icônes dans le footer de Divi : Instagram, Pinterest, YouTube etc... - […] de l’article concernant les options générales de Divi, nous avions vu comment activer les icônes de Facebook, Twitter, Google+…
  2. Comment paramétrer les onglets CRÉATEURS, LAYOUTS et ADS du thème Divi ? - […] paramétrer l’onglet Général du thème Divi […]

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This