Sélectionner une page

Configuration (2ème partie)

11, Mar 2019

Introduction

Pour configurer Divi, vous allez préparer les différentes options qui vont s’appliquer à l’ensemble de votre site. Vous allez à présent devoir configurer les différentes parties de votre site. Pour cela, vous allez, comme n’importe quel thème gratuit ou payant personnaliser votre thème dans ce qu’on appelle en anglais WordPress Customizer ou encore personnaliser le thème.

Puis vous pourrez également personnaliser certains modules. En général, quand on débute, ne connaissant pas les modules vous n’aurez rien à modifier. Avec un peu de pratique, vous allez gagner du temps en modifiant certains paramètres dans chaque module.

Ensuite, vous allez pouvoir définir le niveau d’accès des différents utilisateurs dans le partie Editeur de rôles. C’est assez pratique si vous animez votre blog ou votre site à plusieurs.

Enfin, vous allez pouvoir avoir accès à la bibliothèque, qui va vous permettre de sauvegarder des modules déjà utilisés pour les réutiliser ailleurs. C’est extrêmement pratique…

Encore une fois, je sais je me répète, mais l’objectif de cette prise en main n’est pas de voir les différents outils en détails, mais bien de les présenter et de sélectionner les fonctions les plus utiles quand on démarre un site wordpress avec Divi. Si vous voulez en savoir plus sur une fonction, je vous conseille de consulter la page d’accueil. En effet, au bas de la page (et oui je veux que vous lisiez tout….), vous aurez un menu qui vous permettra de vous rendre sur l’un des articles présentant la fonction en question.

Personnaliser le thème

Comme je le disais en introduction, le menu personnaliser le thème n’a rien de spécifique à Divi. Si vous avez déjà utilisé WordPress avec des thèmes gratuits ou payant, vous aurez déjà l’habitude de les utiliser. Ce que j’aime dans ce menu pour configurer Divi c’est que l’on peut modifier certains paramètres et qu’on voit à droite comment cela se matérialise sur le site (voir image ci-contre). Bon attention, cela ne marche pas toujours hyper bien, mais n’empêche, c’est assez pratique.

Copie d'écran pour montrer comment se présenter la personnalisation du thème

Cliquez sur l’image pour l’agrandir

Copie d'écran pour montrer où se trouve le menu Divi

Cliquez sur l’image pour l’agrandir

Mais comment donc accéder à cette personnalisation du menu pour configurer Divi ?

Tout simplement dans votre Tableau de bord, vous descendez sur le menu Divi, comme pour les options et le sous menu apparaîtra au passage de la souris. Vous n’aurez plus qu’à sélectionner le sous menu Personnaliser le thème.

Simple non ?

 

Paramètres généraux

C’est la première partie que vous allez modifier. Comme vous pouvez le voir sur l’image ci-contre, vous avez 4 sous menus :

  • Identité du site
  • Paramètres de mise en page
  • Typographie
  • Fond

Pour ma part, je modifie en priorité uniquement l’identité du site. C’est nécessaire, le reste vous pourrez le modifier dans un second temps au fil de l’utilisation.

Cliquez sur l’image pour l’agrandir

Dans ce sous menu, vous allez pouvoir modifier le titre du site ainsi que le slogan.

Le titre du site est important car c’est celui que vous retrouverez non seulement sur votre barre d’administration quand vous êtes dans le tableau de bord mais aussi et surtout dans l’onglet de votre navigateur. Il se décline de la manière suivante : NOM DE LA PAGE – TITRE DU SITE. Par exemple pour cette page vous devez avoir sur l’onglet de votre page Configuration (2ème partie) – Hellø Divi !

La plus part du temps vous utiliserez comme moi le même nom que votre nom de domaine, celui de votre entreprise ou du projet.

Pour le slogan, c’est à vous de voir si vous en avez déjà un ou si vous souhaitez en inventez un. Attention, si vous n’en avez pas, effacé celui qui est inscrit par défaut, sinon celui-ci va rester.

Enfin, je vous conseille de télécharger un Icône du site. Cela fait très pro car celui s’inscrit pareil sur l’onglet du navigateur. Comme noter, je vous conseil de créer une image ayant les dimensions indiquées 512 x 512 pixels. Vous n’aurez ensuite plus qu’à l’intégrer en cliquant sur le carré en pointillé.

Concernant le paramètres de mise en page, je ne change en général rien sauf si vous souhaitez avoir une mise en page emboîtée.

Concernant la typographie, je vous conseille d’abord de modifier la police de l’en-tête et du corps de texte. Cela vous évitera de le faire pour chaque module. Vous pouvez également modifier la taille éventuellement.

Je vous conseille également fortement de modifier la couleur du lien du corps, pour la même raison que les polices. En effet, cette couleur bleue est assez moche, n’ayant pas peur des mots. Elle reprend cependant la couleur adoptée par WordPress.

Vous pouvez aussi modifier la couleur du texte de l’en-tête et du corps si la couleur sélectionnée ne vous plaît pas. Pour ma part, elle me satisfait, mais c’est une question de goût.

Modification du style de l'en -tête
Menu En-tête & navigation

En-tête et navigation

Dans ce sous menu, vous pourrez configurer Divi via son menu de navigation. Pour commencer, je vous conseille les réglages ci-dessous. Comme je vous l’ai déjà dit, vous pourrez toujours modifier ce sous menu au fur et à mesure que vous construisez votre site.

  • Format de l’entête : je vous conseille de ne rien modifier. Cela vous permettra d’avoir une barre de navigation standard
  • Barre de menu primaire & secondaire : vous pouvez modifier la couleur des liens ainsi que les polices si vous avez déjà une idée.
  • Paramétrages de la barre supérieure : Divi vous offre l’opportunité d’afficher une barre au dessus de la barre de navigation. Vous pourrez y faire figurer votre numéro de téléphone par exemple.
  • Eléments de l’en-tête : pour ma part la seule chose que je coche est d’afficher l’icône de recherche qui est toujours pratiqué pour vos visiteurs.

Pied de page

Pour configurer Divi, vous utiliserez ce menu avec de modifier les options du pied de page. Voici ci-dessous les modifications que j’apporte quand je construis un site.

  • Modèle : vous allez pouvoir sélectionner combien de widgets vous allez sélectionné pour constituer votre pied de page. En général j’en sélectionne 2 ou 3.
  • Widgets : vous allez gérer le style pour l’ensemble de widgets comme pour le menu de navigation.
  • Eléments en pied de page : vous pouvez afficher les réseaux sociaux. Mais faites attention, il faut d’abord les configurer au préalable !!!
  • Menu de pied de page : si vous décidez d’afficher un menu en pied de page, vous pourrez le configurer ici. Moi je l’utilise que très rarement sauf pour y afficher les mentions légales ou le copyright par exemple.
  • Barre inférieure : comme pour le menu de navigation, vous pouvez affichez une barre sous le pied de page ou vous pouvez y faire figurer par exemple le copyright.

Menu Pied de page
Menu Boutons

Boutons

Ce menu est extrêmement utile pour configurer Divi. En effet, vous allez très souvent utiliser des boutons dans vos pages surtout. Donc, je ne peux que vous conseiller de configurer vos boutons ici ou encore dans le Personnaliseur de module.

  • Style des boutons : vous allez pouvoir modifier le texte du bouton (police, taille ou encore couleur), la couleur du bouton, la taille et la couleur des bordures, etc… Je tiens tout de même à préciser un terme qui peut paraître difficile à comprendre : le rayon de la bordure. Il s’agit en fait du niveau d’arrondi des coins. Plus vous l’augmentez plus vos bords seront arrondis jusqu’à former un rond (ce que je ne vous conseille pas).
  • Style des boutons en survol : vous pouvez effectuer les mêmes réglages que le sous menus précédent quand un utilisateur posera le curseur de la souris sur le bouton avant de cliquer ou non. Cela permet à l’internaute de bien visualiser le bouton avant de cliquer.

Blog

J’avoue que je n’utilise ce menu que très rarement. Il vous permet de configurer vos articles (police de texte, couleur des liens, etc…). Moi je préfère utiliser, quand je crée un article, la fonction utiliser le modèle d’un article précédent. C’est plus pratique d’utilisation et plus souple.

Styles sur Mobile

Pour configurer Divi, ce menu est extrêmement utile. Quand j’ai commencé à utiliser Divi, je ne le configurai jamais mais à force que l’on me dise que mon site sur mobile était pas terrible, je m’y suis mis. De plus sachez que c’est une tendance de fond et que de plus en plus vos sites devront être Mobile friendly ou responsive.

  • Tablette & Téléphone : vous allez pouvoir modifier les hauteurs des lignes, de la section mais surtout la taille des textes pour les textes et surtout pour les titres. C’est extrêmement utile
  • Menu sur Mobile : vous pourrez modifier la couleur du texte et de l’arrière plan. J’avoue que je l’utilise jamais…

Menu styles sur Mobile

Palettes de couleurs

Je l’utilise pas et j’avoue que je ne sais pas vraiment à quoi cela sert…

Menus, Widgets & Page d’accueil

Il vous permet de définir vos menus de navigation pour configurer Divi. Pour ma part, je préfère utiliser le tableau de bord WordPress pour faire la même opération d’autant que la mise en forme ne se fait pas à cet endroit. A éviter.

Idem pour les widgets.

Idem pour la page d’accueil.

CSS additionnel

Pour configurer Divi, vous pouvez ajouter du code CSS pour tout votre site. Si vous ne savez pas ce qu’est le CSS, ne touchez à rien. Par contre, si vous voulez faire un peu de CSS, je vous conseille de le faire page par page ou alors dans le menu option.

Conclusion

Et voilà, nous arrivons à la fin de la personnalisation du thème. Vous pouvez bien sûr si vous en avez envie passer beaucoup de temps à personnaliser votre thème. Pour ma part, je vous conseille de faire le strict minimum pour que votre site soit en ligne le plus rapidement possible. Vous pourrez toujours par la suite revoir les réglages.

Dans notre prochain article nous allons aborder la personnalisation des modules, l’éditeur de rôles et si on a le temps la bibliothèque toujours super utile pour gagner du temps…