Divi Tips 13

Divi Theme options: focus on the General tab

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

1,806 words


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:

  1. Divi theme options: how does it work?
  2. What are the options on the General tab of the Divi theme?
  3. 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.

Divi - Options du thème
Divi - Theme options

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:

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

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.

Find out what 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 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.

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

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

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

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

Général - partie 3/3
General tab - part 3/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.

22 - Minifying JavaScript and CSS

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

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:

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

Comment paramétrer les options de Divi ?
How do you set Divi options? Say it on Pinterest!
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Utilisez les couleurs globales de Divi pour plus de productivité !

Use Divi's global colours for more productivity!

🚀 Do you create your clients' websites with WordPress and Divi and are looking for productivity?
🥳 Perfect, I explain how to use Divi's global colours to avoid wasting time with multiple actions when you want to change a colour on your entire site...

37 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


    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

    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 !

  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

    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


    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.


  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


    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


    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 ?


  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

    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

  20. Ludovic_DMA

    Salut Lycia,
    Je cherche à désactiver la fonction zoom lorsqu’on clique sur une photo depuis le module Galerie de Elegantheme lorsque celui-ci est organisé en diapo. Tu trouveras le lien ci-dessous pour avoir une idée en pratique de la situation : https://maurelarchitectes.ch/project/concours-de-lecole-de-neirivue/. Pourrais-tu m’aider ?

  21. Lycia Diaz

    Salut Ludovic, on dirait que tu as trouvé une solution car je ne vois pas de zoom sur cette galerie 🙂

  22. Ludovic

    Salut Lycia,

    Merci pour ta réponse.
    J’ai en effet utilisé la fonction suivante dans les paramêtrages CSS de projet des pages contenant la fonction Gallery..

    .mfp-bg { display: none;
    .mfp-fade { display: none;
    .mfp-ready { display: none;

    Pourrais-tu me dire si cela est adapté ou s’il y a mieux ?

  23. Lycia Diaz

    Si ça marche, c’est bon non ? 😉

  24. camille dudous

    j’ai un souci… quand je veux partager une photo de ma galerie sur facebook.. quand je clique sur le lien, cela m’emmène sur une page article mais ma photo est doublée car je pense que par défaut, il y a une mise en avant de la photo sur l’article…. Comment puis je modifier cela… L’article est créé automatiquement par la galerie (gmédia) et non pas moi…
    merci pour votre aide


  25. Lycia Diaz

    Salut Camille, je ne comprend pas, tu utilises un plugin de galerie ? Car Divi ne fait pas ce que tu dis.

  26. Camille Dudoubs

    oui , j’utilise un autre plugin pour les galeries photo (gmédia), mais j’ai trouvé la solution…. par défaut le thème met la première photo de l’article en avant, j’ai décoché cette option et cela marche.
    Il me reste un ptit souci.. quand je veux partager une image via l’icone de partage de la galerie gmédia, sur un réseau social, la première image proposée est l’image en avant de mon site. Si j’annule et que je recommence de suite, là c’est bon, c’est l’image désirée à partager… Pour les visiteurs, j’imagine que c’est pas top de se rendre compte de cela… En cas où tu avais déjà vu le problème…
    En tout cas merci pour la réponse…

  27. Lycia Diaz

    Ah ok Camille, non je ne connais pas ce plugin, désolée…

  28. Gilles

    Concernant le format de la date, je rencontre un souci
    Sur le Module Blog, j’ai défini la date en j M Y pour les pages en français et M d Y pour les pages en anglais.
    En anglais tout ce passe bien mais en français le mois reste en anglais ( par exemple 2 Aug 2020 )
    Voir sur guideyourtrip.com en bas de page
    J’ai essayé jFY mais le format reste identique
    Auriez-vous une idée ?

  29. Lycia Diaz

    Bonjour Gilles. Si je comprends ton site est multilingue ? Je sais pas trop d’où peut venir le souci. Il y a des options de réglages de la date dans les réglages de Divi et aussi dans le module blog. Du coup as-tu vérifié que tous les réglages ont été fait ?

  30. Gilles

    Bonjour Lycia

    Oui J’ai bien tout paramétré
    Sur Divi Options du Théme le format date est mise à j F Y
    Idem sur le module Blog

    Compliqué de trouver la solution

  31. Lycia Diaz

    Désolée Gilles, je ne vois pas alors…

  32. Gilles

    En recherchant dans le code function
    J’ai remarqué cette partie
    Je pense que c’est cela qui force la date et laisse le mois en anglais
    Le souci c’est que je ne connais pas le php
    Auriez-vous une idée ?

    function et_last_modified_date_blog( $the_date ) {
    if ( ‘post’ === get_post_type() ) {
    $the_time = get_post_time( ‘His’ );
    $the_modified = get_post_modified_time( ‘His’ );
    $currentlang = get_bloginfo(‘language’);
    if($currentlang=== »fr-FR »):
    $last_modified = sprintf( __( ‘%s’, ‘Divi’ ), esc_html( get_post_modified_time( ‘j M Y’ ) ) );
    $date = $the_modified !== $the_time ? $last_modified : get_post_time( ‘M j, Y’ );
    return $date;
    elseif ($currentlang=== »en-GB »):
    $last_modified = sprintf( __( ‘%s’, ‘Divi’ ), esc_html( get_post_modified_time( ‘M j, Y’ ) ) );
    $date = $the_modified !== $the_time ? $last_modified : get_post_time( ‘M j, Y’ );
    return $date;

    add_action( ‘get_the_date’, ‘et_last_modified_date_blog’ );
    add_action( ‘get_the_time’, ‘et_last_modified_date_blog’ );

  33. Lycia Diaz

    Salut Gilles,
    Je ne sais pas trop. Perso, je ne toucherais pas à cette fonction. Envoie-moi la capture d’écran de l’endroit où le mois reste en anglais STP

  34. Thomas

    J’ai ma barre de menu en haut (logo à gauche puis 5 boutons à droite à l’horizontale).
    Je voudrais ajouter un nouveau bouton à mon menu mais je n’y arrive pas…
    Je suis un peu novice. Help !
    Merci d’avance !

  35. Lycia Diaz

    Bonsoir Thomas, le menu se gère depuis Apparence > Menu

  36. Jordan

    Bonjour Lycia,
    J’ai suivi à la lettre vos instructions concernant les URL des réseaux sociaux. Cependant, lorsque j’insère le logo facebook (ou un autre) avec le module « suivez-nous sur les réseaux sociaux », bien que l’icone apparaisse, le lien de redirection m’envoie vers la page d’accueil de mon site wordpress, et non sur ma page facebook. J’ai pourtant bien renseigné l’URL de ma page dans l’onglet général des options du thème Divi. Savez-vous ce qui coince et comment je pourrais résoudre ce problème ?
    Merci d’avance !


  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 e-mail 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.