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 !

Pin It on Pinterest

Shares
Share This