Options du Thème Divi : focus sur l’onglet Général

Mis à jour le 22/08/2019 | Publié le 12/01/2018 | 34 commentaires

C’est la première fois que vous installez le thème Divi et vous vous demandez comment le paramétrer ? Parfait, vous êtes au bon endroit. Dans cet article nous allons passer en revue toutes les options de l’onglet GÉNÉRAL du thème Divi.

Ainsi vous pourrez comprendre à quoi ces options correspondent et comment les choisir afin que votre site soit en accord avec votre projet.

Comme les OPTIONS DE DIVI sont détaillées au travers de nombreux onglets, vous pourrez naviguer dans la série d’articles qui lui sont dédiés.

Mais pour l’instant, voyons en détail l’onglet Général (les paramètres généraux).

Voici le programme de cet article :

  1. Les options du thème Divi : comment ça marche ?
  2. À quoi correspondent les options de l’onglet Général du thème Divi ?
  3. Les autres options de paramétrage du thème

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Les options du thème Divi : comment ça marche ?

Une fois que vous aurez installé et activé le thème Divi sur votre site WordPress, un nouvel élément va apparaitre, en bas de la barre latérale gauche de votre administration de site, nommé « Divi ».

Divi - Options du thème
Divi – Options du thème

Lorsque vous passez la souris sur cet onglet, des sous-éléments apparaissent dont l’onglet « options du thème ».

Si vous cliquez sur cet onglet, vous allez arriver sur un écran aux couleurs de Divi qui vous proposera de nombreux éléments à paramétrer.

Nous allons commencer par l’onglet GÉNÉRAL :

Onglet Général des options Divi
Onglet Général des options du thème

Voyons cela de plus près…

2 – À quoi correspondent les options de l’onglet Général du thème Divi ?

Pour conserver des captures d’écran pas trop chargées, j’ai découpé le contenu des options de l’onglet Général en 3 parties.

Découvrez tout ce que vous pouvez faire avec le thème Divi

2.1 – Onglet Général – Partie 1

Général - partie 1
Onglet Général – partie 1/3

1 – Logo

C’est ici que vous pourrez télécharger le logo de votre site.

En cliquant sur « Mettre en ligne », vous accèderez à votre bibliothèque et vous pourrez choisir votre logo.

Si votre bibliothèque de médias ne contient pas encore votre logo, vous pourrez le téléverser depuis votre ordinateur (depuis l’onglet « envoyer des fichiers »).

2 – Barre de navigation fixe

Par défaut, la barre de navigation fixe est activée, si vous désactivez cette option, votre menu principal – situé en haut de l’écran – apparaitra uniquement lorsque le visiteur descend plus bas dans votre page (au scroll).

Suivez ce tutoriel si vous souhaitez fixer totalement votre menu au scroll.

3 – Activer la galerie Divi

Tous les sites WordPress peuvent faire apparaitre une galerie d’image mais le thème Divi vous propose de remplacer le style par défaut de WordPress par son propre style. Pour cela, il suffira d’activer cette option.

4 – Palette de couleurs par défaut

Lorsque vous travaillez sur un projet web, vous avez des codes couleurs à respecter et cette option vous permet de pré-définir jusqu’à 8 couleurs.

C’est très intéressant puisque vous pourrez les utiliser facilement dans tout votre site, à chaque fois que le Divi Builder vous propose de choisir une couleur.

Veillez à saisir les valeurs des couleurs que vous utilisez dès l’installation de Divi, vous gagnerez un temps fou lors de la conception de vos designs web.

5 – Saisir la première image de l’article

Voici une autre option importante.

Si cette option est activée, « l’image de mise en avant » (ou featured image) de chaque article sera remplacée par la première image contenue dans votre article.

Si vous désactivez cette option, la vignette de votre article correspondra bien à « l’image à la une » que vous téléchargez via le champ « image mise en avant » situé en bas à droite de chacun des articles WordPress.

Si vous souhaitez utiliser plusieurs images de mise en avant, suivez ce tutoriel.

6 – Mode style de blog

C’est une drôle de traduction, je vous l’accorde…

En fait, cette option ne devrait pas être activée pour des questions de SEO (référencement naturel).

Divi utilise les extraits de vos articles mais si vous préférez afficher la totalité du contenu de vos articles (dans les archives, la page blog etc.) alors, vous devrez l’activer (j’insiste, ce n’est pas SEO-Friendly).

7 – Sidebar Layout et Gabarit boutique

Depuis ces deux options, vous pourrez choisir l’emplacement de votre barre latérale de blog et de boutique (sidebar).

Vous déciderez alors de la faire apparaitre à droite ou à gauche.

Si vous souhaitez obtenir une sidebar fixe, suivez ce tutoriel.

8 / 9 – Clé API et Script de Google Map

Si vous utilisez un compte développeur de Google pour vos cartes (Google Map), vous pourrez saisir ici votre clé API et décider de mettre les scripts en file d’attente pour améliorer la performance de votre site.

10 – Utiliser les polices de Google

Cette option est par défaut activée. Elle vous permet d’utiliser toutes les Google Font directement depuis le Divi Builder.

Si vous ne souhaitez pas utiliser les Google Fonts pour gagner en performance et préserver la confidentialité de vos lecteurs, vous pouvez la désactiver.

2.2 – Onglet Général – Partie 2

Général - partie 2/3
Onglet Général – partie 2/3

11 – Les icônes des réseaux sociaux

Pour chaque réseau social, vous pouvez décider de faire apparaitre son icône en pied de page de votre site.

Par défaut, seuls 5 icônes sont disponibles : Facebook, Twitter, Google+, Instagram et Flux RSS.

Si vous avez besoin de plus d’icône, il faudra le coder manuellemnt dans un thème enfant => lire cet article pour ajouter de nouveaux icônes dans le footer.

12 – Les URL des réseaux sociaux

En fonction des icônes que vous aurez activées dans l’étape précédente, vous devrez saisir les URL correspondantes.

Concernant le flux RSS de votre site, vous pourrez saisir l’adresse suivante : https://mon-site.com/feed

13 – Le nombre post par archive 

Les pages d’archives sont des pages générées automatiquement par WordPress.

Que ce soit les archives de vos produits e-commerce, les archives de catégories, la page de recherche ou les archives d’étiquette, Divi vous propose de paramétrer page par page le nombre d’élément à afficher.

Pour une question de SEO, il est conseillé de ne pas restreindre de trop ce nombre.

N’hésitez donc pas à afficher 50, 100 ou même 100 éléments par archives. Cela évitera aux robots d’indexer un trop grand nombre de sous-page.

C’est l’une des astuces pour rendre Divi SEO-Friendly.

2.3 – Onglet Général – Partie 3

Général - partie 3/3
Onglet Général – partie 3/3

14 – Format de la date

Vous pouvez définir, ici, le format de la date de vos articles.

Cette date est affichée un peu partout sur votre blog (dans les métas l’article, dans l’extrait etc.).

Le format par défaut est M j,Y ce qui donne Jan 2, 2018. Si vous choisissez le format j F Y ça donnera 2 janvier 2018.

Si vous préférez d’autres formats, je vous invite à visiter cette page dédiée aux formats de dates.

15 – Utilisation des extraits

Si vous désactivez cette option, vos extraits ne seront pas utilisés.

Pour savoir où vous devez saisir les extraits de vos articles, il faut veiller à activer une option de WordPress lorsque que vous vous trouvez dans l’édition d’un article.

En haut de votre écran, à droite, il y a un petit onglet nommé « options de l’écran ». Ouvrez-le et cochez « extrait ».

À partir de ce moment-là, tous vos articles afficheront un nouveau champ pour saisir l’extrait, regardez plutôt cette vidéo…

16 – Shortcodes réactifs

Activez l’option « shortcodes réactifs » permet d’afficher les éléments de shortcode de manière responsive, c’est-à-dire adaptable à tous les écrans.

17 – Sous-ensemble Google Fonts

Cette fonctionnalité active les polices de Google pour les autres langues que l’anglais.

18 – Retour haut de page

Il s’agit de l’option pour activer ou désactiver le petit bouton situé en bas à droite de votre site et permettant de remonter facilement et rapidement en haut de page.

19 – Défilement fluide

Je ne sais pas trop si cette option est importante, elle permettrait de proposer un défilement plus fluide lorsqu’on scrolle à l’aide de la souris… À voir !

20 – Désactiver les traductions

Vous pouvez désactiver cette option si vous souhaitez utiliser l’interface du thème en anglais parce que vous trouvez que Divi est mal traduit.

21 – Responsive Image

Cette option ajoute un attribut srcset à vos images lors de l’import. Cet attribut est recommandé par CSS3 pour rendre vos images adaptables à toutes les tailles d’écran.

Sans cette option active, vos images devraient quand même être responsives.

22 – Minifier JavaScript et CSS

Ces option permettent de minifier et de combiner certains fichiers de JavaScript et de CSS afin d’améliorer la performance de votre site.

C’est le genre d’option qu’offre un plugin de cache comme WP Rocket par exemple.

Pour info : la MINIFICATION enlève tous les espaces et sauts de ligne contenus dans un fichier, que ce soit un ficher CSS ou JS.

Il a été reconnu que la minification améliore le temps de chargement d’un site de quelques secondes, cela améliore donc la performance.

Si vous utilisez un plugin de cache, ne cochez pas cette option.

23 – Personnaliser CSS

Ce champ n’est ni plus ni moins que le reflet de l’option de WordPress disponible depuis l’onglet Apparence > Personnaliser > CSS additionnel.

Pour customiser votre thème Divi, vous en aurez régulièrement besoin. Quelques fois, si les modifications que vous souhaitez apporter à Divi sont simple, vous n’aurez pas besoin de créer un thème enfant et cette option sera suffisante.

24 – Sauvegarder

Une fois que vous aurez paramétré ce premier onglet, n’oubliez pas de sauvegarder vos changements.

Si une petite PopUp apparait depuis votre navigateur, vous proposant de mettre à jour votre mot de passe, sélectionnez « ne pas enregistrer ». Cela évitera des conflits de mots de passe.

3 – Les autres options de paramétrage du thème

Rien n’était bien compliqué dans cet onglet et de toutes façons, il n’y a pas de bons ou mauvais paramétrages, tout cela est subjectif.

Pourquoi alors, j’ai voulu écrire cette série d’articles dédiés aux options disponibles dans le thème Divi ?

Tout simplement parce qu’il y a un début à tout et que nous n’avons pas tous les mêmes connaissances en matière de sites web et de jargon.

Donc, j’espère que ces articles pourront être utiles aux plus novices d’entre nous !

Rendez-vous dans les autres articles de la série pour continuer le paramétrage de votre site avec Divi :

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

Comment paramétrer les options de Divi ?
Comment paramétrer les options de Divi ? Dites-le sur Pinterest !
Divi tutorial : Divi general tab

1,806 mots

7

Ça devrait vous plaire aussi :

Projet Divi : à quoi ça sert ?

Projet Divi : à quoi ça sert ?

À quoi servent les « Projets » Divi ? Devez-vous les utiliser ? Dans quels cas ? Je vous explique tout dans cet article.

Formation Divi PDF : un guide pas à pas

Formation Divi PDF : un guide pas à pas

Quoi de mieux qu’une formation Divi PDF pour maitriser ce thème WordPress, son Visual Builder et son Thème Builder ? C’est comme si un formateur s’invitait chez vous… Découvrez son contenu !

34 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

  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

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

    camille

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

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

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