Avant de se lancer dans une mise en page pour ton site avec le thème Divi, il va falloir configurer les options de Divi. C’est ce que je te propose de faire en passant en revue les différentes options de l’onglet général.
Ces options se trouvent dans le menu Divi -> Options du thème.
Voici les options que l’on peut paramétrer dans l’onglet général :
Clique sur mettre en ligne pour envoyer ton logo sur le serveur. Je te conseille de choisir une image de taille raisonnable pour ne pas encombrer ta barre de menu. Néanmoins, tu pourras ajuster sa taille dans le personnaliseur de thème.
Même chose que pour le logo, tu pourras envoyer le favicon sur le serveur.
Pour rappel, une favicon est une icône informatique symbolisant un site web. Ces icônes sont créées et/ou utilisées par les concepteurs des sites internet. Les navigateurs web peuvent utiliser la favicon dans la barre d'adresse, les signets, les onglets ou encore les autres raccourcis.
Tu pourras utiliser l’outil favicon.cc pour créer ton favicon.
En activant cette option, ta barre de navigation restera en haut de la page même si tu défiles ta page verticalement.
Active cette option si tu veux remplacer la galerie WordPress par défaut par la galerie avec le style Divi.
Si tu préfères utiliser un plugin de galerie, dans ce cas tu devrais désactiver cette option.
Cette option est plutôt intéressante. En fonction de la charte graphique, tu utiliseras toujours les mêmes couleurs pour ton site. Il suffit de les paramétrer ici pour les avoir sous la main dans le personnaliseur de thème par exemple. Plus besoin de faire un copier / coller des valeurs RVB ou hexadécimales pour récupérer une couleur.
Pour illustrer ton article, cette option permettra de récupérer la première image trouvée dans ton article. Si au contraire tu as l’habitude d’ajouter « une image à la une », alors tu pourras laisser cette option désactivée.
Par défaut, Divi crée des extraits de tes articles pour en faire des aperçus. Si tu souhaites montrer les articles dans leur intégralité, active cette fonction.
Choisi ici le modèle de page que tu souhaites pour afficher la barre latérale. Tu pourras la placer à droite ou à gauche. Tu peux sélectionner « fullwidth » (pleine largeur) si tu souhaites ne pas avoir de barre latérale.
Tu auras besoin d'une clé API Google Maps si tu souhaites utiliser correctement le module « Carte » de Divi. Je te renvoie sur la documentation en ligne du module « carte » si tu souhaites en savoir plus pour créer une clé API Google.
Cette option permet d’améliorer les performances du site si tu utilises le module Google Maps.
Tu peux désactiver cette option si tu ne souhaites pas utiliser des polices de Google.
Active ou désactive l’affichage des icônes dans le pied de page du site.
Renseigne ici les adresses de tes profils ou pages de réseaux sociaux et/ou de ton flux RSS (généralement sous la forme : http://www.tonsite.com/feed/).
Les champs suivants concernent l’affichage du nombre d’articles dans une page catégorie, archive, recherche et tags.
Tu peux également préciser le nombre de produits que tu souhaites afficher sur une page si tu as installé WooCommerce.
Par défaut, le format est probablement anglophone sous la forme M j,Y. Je te recommande de l’écrire sous cette forme « j F Y » si tu souhaites un affichage de la date en français.
Tu peux te référer au codex si tu souhaites afficher la date d’une autre manière.
Active cette option si tu souhaites saisir un extrait personnalisé dans le champ prévu à cet effet lors de la rédaction d’un article.
Cette option permet d’afficher les éléments de shortcodes de manière responsive, qui s’adaptent aux différentes tailles d’écran.
Active Google Fonts pour d'autres langues que l'anglais.
Ajoute un bouton situé en bas à droite de la page et permet de remonter rapidement en haut de page.
Active cette option pour obtenir un défilement fluide avec la molette de la souris.
En activant cette option, tu remettras Divi en anglais aussi bien en back office qu’en front office.
Cette option permet de supprimer les espaces et les sauts de lignes des fichiers Javascript. Cela permet d’alléger les fichiers et donc d’améliorer le chargement des pages du site.
Même chose que ci-dessus, mais pour les fichiers CSS.
Ce dernier champ est réservé aux connaisseurs… Il permet de personnaliser le site en ajoutant du code CSS.
Nous avons fait le tour des options générales de Divi. Je pense que tu laisseras le réglage de la plupart des options par défaut. Néanmoins, le plus important était d’ajouter un logo, de régler la palette de couleur et d’ajouter les liens des différents réseaux sociaux.
Bonjour, j'adore vos explications, merci beaucoup pour les ânes 🙂 ! j'essaye de changer la couleur des liens actifs sur mon module de barre laterale (widget menu-gallery) sur mes pages galerie, en personnalisant le css, et ça ne marche pas, je m'arrache les cheveux : voila ce que j'ai rajouté, je ne comprend pas le pb, auriez vous une solution ? merci beaucoup par avance !
#menu-gallery a:hover {
color: #b30473 !important;
}
#menu-gallery a:active {
color: #b30473 !important;
}
Bonjour,
Pour le lien actif, essayez plutôt ceci :
#menu-gallery li.current-menu-item>a
En espérant que ça fonctionne mieux 😉
merci, je met ça comme code ?
#menu-gallery li.current-menu-item>a
{
color: #b30473 !important;
}
ca marche merci beaucoup ! je suis heureuse !
Bonjour, merci pour vos explications je cherche partout comment personnaliser le bouton "retour vers le haut" mais je ne trouve pas grand chose, y'a t'il une solution à ca ? (sans entrer dans le CSS si possible..) Merci beaucoup!
Bonjour Hanna, sans le CSS, ça me parait compliqué...
Bonjour, sur divi existe-t-il un moyen de supprimer les infos qui s'affichent sous les images d'une galerie ?
Merci.
Bonne journée.
Bonjour, oui dans le module galerie, dans l'onglet contenu -> élément, on peut désactiver l'affichage du titre et de la légende.