Le guide ultime du personnalisateur de thème Divi

Le module de personnalisation de thème Divi est un outil puissant et pratique pour personnaliser le thème Divi. Comme le Visual Builder, le Divi Theme Customizer permet des personnalisations visuelles frontales et des modifications de conception qui éliminent le jeu de devinettes du processus de personnalisation. S'il est utilisé efficacement, cet outil peut être un excellent gain de temps et un tremplin pour de futurs projets.

La publication d'aujourd'hui est destinée à vous aider à mieux comprendre le fonctionnement du personnalisateur de thème afin que vous puissiez l'utiliser pour augmenter la productivité de vos projets futurs. Je couvre presque toutes les options disponibles dans le personnalisateur de thème en mettant l'accent sur les options spécifiques à Divi. D'une certaine manière, cet article sert de document de documentation qui offre des explications détaillées et des conseils de conception en cours de route. Je vais également vous montrer comment exporter les paramètres de personnalisation à utiliser sur votre prochain projet.

Nous avons beaucoup de choses à couvrir, alors commençons par le début.

Construit avec WordPress à l'esprit

Le thème Customizer a été introduit dans WordPress 3.4. Cette fonctionnalité pratique permet aux utilisateurs de WordPress de prévisualiser les modifications apportées à leurs thèmes en temps réel, puis d'enregistrer ces modifications en un clic. Ce qui prenait auparavant plusieurs fenêtres et d'innombrables actualisations, peut désormais être effectué rapidement dans une seule fenêtre de navigateur.

Voici un exemple des options de personnalisation de thème sur le thème TwentySeventeen :

Comme vous pouvez le voir, de nombreuses fonctionnalités de WordPress qui résidaient auparavant dans différentes pages du backend de WordPress (Identité du site, Menus, Widgets, etc.) sont désormais accessibles dans ce personnalisateur frontal en un seul endroit.

D'autre part, le personnalisateur de thème Divi a été conçu comme une version améliorée de ce personnalisateur de thème avec toutes sortes d'options spécifiques à Divi. Pour les utilisateurs, cela rend le processus de personnalisation de Divi beaucoup plus facile. Et le fait que vous puissiez réellement voir les personnalisations lors de l'édition (simultanément) en fait un outil de conception pratique.

Le personnalisateur de thème Divi possède toujours de nombreuses options de personnalisation WordPress standard, mais il en a aussi beaucoup plus.

Comme vous pouvez le voir, de nombreux autres paramètres ont été ajoutés au personnalisateur de thème Divi. Commençons maintenant à les explorer plus en profondeur.

réglages généraux

Lorsque vous commencez à personnaliser votre thème, je pense qu'il est préférable de commencer par le haut avec les paramètres généraux et de continuer vers le bas.

Identité du site

Cette section n'est pas propre à Divi. C'est un endroit pratique pour changer le titre et le slogan de votre site. Vous pouvez également saisir une icône de site qui est utilisée pour les navigateurs et les applications, différente de l'icône favicon que vous pouvez ajouter dans les options du thème Divi.

Paramètres de mise en page

Les paramètres de mise en page vous permettent d'ajuster le cadre de votre thème en déterminant l'espace entre les sections et les lignes et la largeur maximale de votre section de contenu principal.

ACTIVER LA MISE EN COFFRET

Ici, vous pouvez transformer votre site en une mise en page de boîte qui encadre le contenu de votre site et expose un arrière-plan qui peut être personnalisé.

LARGEUR DU CONTENU DU SITE WEB

C'est ici que vous pouvez définir la largeur maximale de votre section de contenu. Étant donné que votre contenu est sur une mise en page réactive, il s'adaptera à des tailles plus petites mais ne s'étendra pas au-delà de la largeur maximale définie ici.

La valeur par défaut est définie sur 1080px. C'est une bonne largeur pour la plupart des ordinateurs portables et de bureau standard.

LARGEUR DE GOUTTIÈRE DU SITE WEB

La largeur de la gouttière correspond à la quantité d'espace horizontal (marge) entre les colonnes de chaque ligne.

Les valeurs facultatives pour la largeur de gouttière vont de 1 à 4.

1 représente une marge nulle entre les colonnes.
2 représente une marge de droite de 3 % entre les colonnes.
3 représente une marge de droite de 5,5% entre les colonnes.
4 représente une marge de droite de 8% entre les colonnes.

UTILISER LA LARGEUR DE LA BARRE LATÉRALE PERSONNALISÉE

Cela définit la largeur de la barre latérale par défaut pour votre thème. Cela s'applique à toutes les pages de votre thème qui ont une barre latérale et qui ne sont pas construites à l'aide du Divi Builder.

SECTION ET HAUTEUR DE RANG

Ces options ajustent la quantité d'espacement vertical (espacement supérieur et inférieur) pour chaque section et rangée.

Par défaut, le rembourrage de la section est de 50px en haut et en bas . Pour la ligne, le remplissage par défaut est de 30 pixels en haut et en bas . Cependant, en modifiant le remplissage de section ou de ligne à l'aide du personnalisateur, la valeur de remplissage se transforme en un pourcentage qui correspond au nombre sur la molette d'options sur le personnalisateur de thème.

Par exemple, « 0 » représente 0 % du remplissage supérieur et inférieur, « 1 » représente 1 % du remplissage supérieur et inférieur, « 2 » représente 2 %, et ainsi de suite. Le pourcentage de remplissage est basé sur la largeur du conteneur (la section ou la rangée). Donc, si la largeur réelle de la section est de 1080px et que vous avez défini la hauteur de la section sur 1, cela signifie que vous aurez…

1080px x 0,01 = 10,8px

… 10.8px de rembourrage en haut et en bas.

Les options vont de 0 à 10, vous pouvez donc avoir jusqu'à 10 % de rembourrage.

THÈME COULEUR D'ACCENT

Avant de commencer à modifier les couleurs de vos autres éléments, vous devez d'abord les modifier . Une fois que vous l'avez modifié, enregistrez et publiez vos paramètres et actualisez votre page. Maintenant, la couleur d'accent du thème mise à jour devrait avoir rempli d'autres éléments automatiquement.

La mise à jour de la couleur d'accent du thème mettra également à jour les éléments suivants :

• Couleur du lien du corps
• Couleur de l'en-tête du widget
• Couleur de la puce du widget
• Couleur de survol des icônes sociales du pied de page
• Couleur par défaut des icônes
• Couleur du lien actif du menu de pied de page
• Couleur d'arrière-plan du menu secondaire
• Couleur d'arrière-plan Slide In et Fullscreen Header Style
• Icône de menu hamburger pour la couleur du menu mobile
• Couleur du lien actif du menu principal
• Couleur de la ligne du menu déroulant
• Couleur d'arrière-plan du menu secondaire
• Couleur d'arrière-plan du menu déroulant secondaire
• Couleur d'arrière-plan du menu secondaire
• Couleur du lien du menu principal actif
• Couleur du lien actif du menu de pied de page

Typographie

C'est l'un des aspects les plus importants de votre site Web qui a tendance à être négligé par les utilisateurs et les développeurs. Ne faites pas l'erreur de négliger ces options. Obtenir ces détails correctement peut faire une grande différence. Prendre le temps de définir votre typographie par défaut pour votre thème peut également vous faire gagner du temps à long terme car vous n'aurez pas à faire de personnalisations au niveau du module.

CORPS DU TEXTE TAILLE

Cela modifie le corps de texte par défaut de votre thème. La taille par défaut est 14px.

Conseil de conception : il semble que 14 pixels soit un peu trop petit pour une taille de corps de texte standard. Vous ne devriez vraiment pas aller à moins de 16 pixels pour la taille de police de votre corps de base. Ceux d'entre nous qui ont près de 40 ans et plus vous remercieront. Même la plupart des navigateurs utilisent 16px comme taille de police de base standard.

HAUTEUR DE LIGNE DE CORPS

La hauteur de ligne de chaque ligne de texte.

Conseil de conception : la hauteur de la ligne est mesurée dans la valeur de longueur « em ». La valeur par défaut de Divi est de 1,7 em pour le corps du texte. Cette valeur em est meilleure qu'une valeur en pixel (px) car elle est basée sur la taille de police actuelle de l'élément et est donc mise à l'échelle avec la valeur inline parent (ou dans notre cas, la taille de police actuelle). La valeur « 1,7 em » représente essentiellement 1,7 fois la taille de police actuelle. Donc, si votre taille de police actuelle est de 16px, la hauteur de ligne sera de 27,2px. Cela vous donne 5,6 pixels d'espace supplémentaire en haut et 5,6 pixels en bas. Cela semble être un bon début (espace entre les lignes de copie) pour la lisibilité.

TAILLE DU TEXTE DE L'EN-TÊTE

Divi vous permet de définir votre taille de texte d'en-tête h1 par défaut ici. Cela affecte des éléments de Divi comme les titres du module d'en-tête pleine largeur. Si vous souhaitez ajuster la taille des autres niveaux d'en-tête (h2, h3, etc…), je vous suggère de les ajouter dans des CSS supplémentaires (ceci est traité plus loin dans l'article).

Conseil de conception : dans la plupart des cas, vous n'aurez qu'un seul en-tête par page, alors faites en sorte que cela compte. Considérez-le comme le titre sur la couverture d'un livre. C'est la première chose qu'une personne remarque. Et, contrairement au slogan populaire, les gens jugent toujours les livres par leurs couvertures, surtout dans ce cas.

La valeur par défaut pour la taille du texte de l'en-tête est 30px. C'est une bonne taille sûre pour commencer. D'autant plus que certains titres nécessiteront une copie plus longue. Cependant, j'ai tendance à graviter vers une taille d'en-tête plus grande pour s'adapter à la taille croissante des écrans de moniteur. De plus, la plupart des clients ont besoin de sites Web avec des titres simples et courts comme « À propos de nous » et « Nous contacter », qui ont une meilleure apparence avec des tailles de police plus grandes. J'aime définir mes en-têtes h1 sur au moins 48px .

ESPACEMENT DES LETTRE D'EN-TÊTE

L'espacement des lettres ajuste l'espace horizontal entre les lettres. La valeur Espacement des lettres de l'en-tête affecte tous les niveaux d'en-tête (h1, h2, h3, h4, h5, h6), les citations et les titres des diapositives.

Astuce de conception : C'est une bonne technique de conception pour réduire l'espacement des lettres pour un texte plus grand et augmenter l'espacement des lettres pour un texte plus petit . En ce qui concerne les en-têtes, le texte plus volumineux avec un poids de police plus important (gras) peut mieux paraître avec un espacement des lettres réduit de -1px.

Cependant, si vous mettez ce même en-tête en majuscule, vous constaterez peut-être que l'augmentation de l'espacement des lettres à 1-2px sera meilleure.

HAUTEUR DE LIGNE DE TÊTE

Tout comme pour la valeur d'espacement des lettres, la valeur de la hauteur de la ligne d'en-tête affecte tous les niveaux d'en-tête (h1, h2, h3, h4, h5, h6), les blockquotes et les titres des diapositives. En raison de la taille de police plus grande, 1em est le paramètre par défaut. Je pense qu'une hauteur de ligne comprise entre 1 em et 1,3 em a l'air bien, surtout lorsque l'en-tête passe à deux lignes ou plus.

STYLE DE POLICE D'EN-TÊTE

Utilisez ces options pour modifier le style de police de vos en-têtes.

POLICE EN-TÊTE ET CORPS

La police par défaut dans Divi est Open Sans , mais le module de personnalisation de thème Divi propose près d'une centaine de polices ! Tirez parti de ces polices intégrées et testez celles qui fonctionnent le mieux pour votre thème.

Conseil de conception : pour vous inspirer des associations de polices, vous pouvez consulter fontpair.co qui aide à associer les polices Google. Divi ne prendra pas en charge toutes ces polices prêtes à l'emploi, mais vous pouvez rechercher celles que Divi prend en charge pour voir les appariements qui fonctionnent bien ensemble.

COULEUR DU LIEN DU CORPS

La couleur du lien du corps est héritée par la couleur d'accent de votre thème. Mais vous pouvez toujours le changer ici.

Astuce de conception : si vous le souhaitez, vous pouvez ajouter un attribut de soulignement pour tous vos liens de corps à l'aide de CSS supplémentaire (voir la fin de l'article).

COULEUR DU TEXTE DU CORPS

Ici, vous pouvez changer la couleur de votre corps de texte. Les blogs populaires comme le New York Times et le Smashing Magazine utilisent #333333 pour la couleur de leur corps de texte. Cela a tendance à mieux se lire sur un fond blanc à mon avis.

COULEUR DU TEXTE DE L'EN-TÊTE

Ici, vous pouvez changer la couleur de vos en-têtes. Si vous vous en tenez à une nuance de noir, j'irais un peu plus sombre que le corps du texte pour le faire ressortir un peu. Quelque chose comme #121212 fonctionnerait.

Fond

Cette option définit l'arrière-plan de votre thème. Pour le thème Divi, cette option ne s'applique vraiment qu'à la mise en page de la boîte . La couleur d'arrière-plan par défaut est le blanc (#ffffff) sauf si vous la modifiez ici. Vous pouvez également ajouter une image de fond si vous le souhaitez.

C'est tout pour les paramètres de mise en page. Une fois la mise en page en place, vous pouvez commencer à examiner des éléments plus spécifiques.

Entête de navigation

L'en-tête et le menu de navigation sont probablement l'élément le plus important de votre thème. Cette section a beaucoup d'options pour créer presque n'importe quel type d'en-tête que vous voulez.

Format d'en-tête

Style d'en-tête

Les quatre styles d'en-tête peuvent donner à votre site Web un tout nouveau look en un seul clic. Ces styles incluent Centré, Logo en ligne centré, Glissement et Plein écran.

Vous pouvez également ajouter une navigation verticale à votre site, ce qui peut être une caractéristique unique. Et, vous pouvez choisir de masquer la navigation jusqu'à ce que vous fassiez défiler. Cela serait utile pour un site à page unique qui souhaite mettre en évidence plus de contenu au-dessus de la ligne de flottaison sans la distraction de la barre de navigation.

Barre de menus principale

Votre barre de menu principale est le menu principal à l'intérieur de l'en-tête de votre site Web. Vous pouvez complètement personnaliser l'apparence de votre menu principal.

Conseil de conception : vous devez vraiment savoir quels seront les liens de votre menu avant de commencer à perfectionner le menu avec le Divi Theme Customizer. N'oubliez pas que vous allez créer un menu réactif, alors prenez le temps de vous assurer que le menu a fière allure sur toutes les tailles d'écran. Vous pouvez le faire en cliquant sur les icônes de l'appareil en bas du personnalisateur ou en ajustant simplement la taille de votre navigateur. Si vous êtes intéressé, vous pouvez découvrir comment corriger votre navigation réactive ici.

Faire toute la largeur

Cela étend le menu sur toute la largeur de la fenêtre du navigateur.

Masquer l'image du logo

Si vous le souhaitez, vous pouvez masquer complètement l'image du logo de votre menu.

Hauteur du menu

Ici, vous pouvez modifier la hauteur du menu comme vous le souhaitez. Cependant, veillez à ne pas augmenter la hauteur de votre menu, car vous pourriez gaspiller de précieux biens immobiliers sur un menu au lieu du contenu de votre page d'accueil.

Hauteur maximale du logo

Ici, vous pouvez augmenter ou diminuer le pourcentage de largeur maximale de votre logo pour l'agrandir ou le réduire.

Taille du texte, espacement des lettres, police, style de police, couleur du texte, couleur du lien actif

Ces options vous permettent de personnaliser les liens de menu comme vous le souhaitez.

Couleur de l'arrière plan

Cela vous permet de changer la couleur de fond de votre menu principal.

Astuce de conception : si vous utilisez les couleurs semi-transparentes (ou complètement transparentes) pour votre en-tête, Divi chevauchera automatiquement l'en-tête sur la section en dessous de manière transparente. Cela crée un effet assez cool. Par exemple, il s'agit d'un style d'en-tête centré avec un arrière-plan transparent et un en-tête pleine largeur directement en dessous. Remarquez comment Divi ajuste automatiquement l'image d'arrière-plan pour qu'elle s'intègre parfaitement derrière l'en-tête :

Paramètres du menu déroulant

Votre menu déroulant n'a pas à hériter du style du menu principal. Ici, vous pouvez créer un design unique pour votre menu déroulant. Vous pouvez même ajouter une animation personnalisée lors de l'affichage du menu déroulant.

Barre de menus secondaire

Ici, vous pouvez personnaliser votre barre de menu secondaire en utilisant les options fournies.

Lorsqu'elle est activée, la barre de menu secondaire se trouve au-dessus de la barre de menu principale tout en haut de votre navigateur. Il peut contenir des éléments supplémentaires, notamment une adresse e-mail, des liens vers les réseaux sociaux et un menu secondaire.

Par défaut, le menu secondaire restera masqué à moins que vous n'entriez dans un menu secondaire ou que vous n'ajoutiez des éléments dans la section Éléments d'en-tête. Vous devrez peut-être enregistrer et actualiser le personnalisateur de thème pour voir le menu.

Paramètres de navigation fixes

La navigation fixe fait référence à l'état du menu « fixe » ou bloqué en haut de la fenêtre du navigateur lorsque l'utilisateur fait défiler la page vers le bas. Par défaut, la navigation fixe rétrécit en hauteur pour fournir une plus grande fenêtre d'affichage pour l'affichage du contenu du site.

Conseil de conception : vous pouvez également définir la couleur d'arrière-plan de votre menu principal fixe sur une couleur semi-transparente pour révéler une partie du contenu qui se cache derrière. Cela le rend encore moins intrusif mais toujours accessible.

Éléments d'en-tête

Les éléments d'en-tête sont des éléments supplémentaires que vous pouvez ajouter à votre en-tête. Ces éléments incluent des icônes sociales, une icône de recherche, un numéro de téléphone et un e-mail. Hormis l'icône de recherche, tous ces éléments seront affichés dans le menu secondaire.

Icônes sociales

Par défaut, Divi affiche des icônes pour Facebook, Twitter, Google+ et RSS. Vous pouvez modifier ces profils dans les options du thème de Divi.

Bas de page

Par défaut, la section de pied de page est masquée à moins qu'elle ne soit renseignée par du contenu. De plus, le pied de page ne doit pas être confondu avec la barre inférieure qui est affichée par défaut tout en bas du site et comprend les crédits de pied de page et les icônes sociales.

Disposition

Ici, vous pouvez choisir entre 5 mises en page pour votre section de pied de page.

Vous pouvez également définir une couleur d'arrière-plan de pied de page qui est définie sur #222222 par défaut.

Astuce de conception : Cette section sera affichée sur toutes les pages de votre site (sauf si vous choisissez un modèle de page vierge). Par conséquent, il est logique de rendre la couleur plus neutre afin qu'elle corresponde à toutes les pages de votre site.

Widgets

Si vous avez ajouté des widgets à vos sections de pied de page, vous pouvez styliser l'apparence de ces widgets ici.

Les widgets ne sont pas propres à Divi. Ceux-ci sont intégrés à wordpress et peuvent être trouvés dans le tableau de bord wordpress sous Apparence > Widgets . Là, vous pouvez voir quatre zones de pied de page où vous pouvez ajouter des widgets. Tous les widgets que vous ajoutez à ces sections s'afficheront dans votre zone de pied de page.

Cependant, vous pouvez également accéder aux zones de widgets sans jamais avoir à quitter le personnalisateur de thème (l'une de mes choses préférées à ce sujet).

Éléments de pied de page

Ici, vous pouvez choisir d'afficher vos icônes sociales sur votre barre inférieure, tout comme dans le menu secondaire.

Menu de pied de page

Si vous avez un menu de pied de page, vous pouvez le styliser ici.

Barre inférieure

La barre inférieure se trouve tout en bas de votre site Web et affiche par défaut vos crédits de pied de page et vos icônes sociales. Ici, vous pouvez personnaliser le style de ces éléments, notamment en modifiant la taille et la couleur de la police des icônes sociales.

Modifier les crédits de pied de page

Vous pouvez également remplacer les crédits de pied de page par défaut par le code HTML de votre choix dans cette zone.

Boutons

Cette section contrôle ce que vous voulez que les styles de boutons par défaut soient.

Style de boutons

Ici, vous pouvez personnaliser le style de vos boutons pour votre thème. Je ne vais pas entrer dans les détails de chaque option ici. Vous pouvez consulter notre documentation sur le module de boutons pour plus d'informations sur la façon de styliser les boutons.

Couleur du texte

Si vous remarquez, par défaut, la couleur du bouton est héritée par la couleur d'accent du thème définie dans les paramètres généraux. Ceci est uniquement pour les modules dont le texte est défini sur "sombre". Et les boutons sont blancs lorsque le texte du module est réglé sur « clair ». Mais, dès que vous définissez une couleur de texte personnalisée pour vos boutons, cette couleur est définie pour les versions de texte sombre et claire dans un certain module.

Conseil de conception : laissez votre couleur d'accent de thème définir la couleur du texte de vos boutons afin de pouvoir conserver la possibilité d'ajouter des versions sombres et claires de votre bouton dans vos modules.

Style de survol des boutons

C'est ici que vous pouvez personnaliser le style de l'état de survol de vos boutons.

Il est important que les utilisateurs comprennent que ce qu'ils s'apprêtent à cliquer est en fait un bouton. L'ajout d'un effet de survol renforce cela dans leurs esprits et les encourage à interagir. Par défaut, Divi ajoute un fond clair et anime une icône de flèche à droite. Mais, vous pouvez le changer en ce que vous voulez.

Conseil de conception : que vous changiez l'arrière-plan en une couleur plus foncée ou plus claire n'est pas aussi important que de simplement vous assurer que le bouton change d'une manière ou d'une autre. Vous pouvez également augmenter l'espacement des lettres ou ajuster le rayon de la bordure pour donner à votre bouton un effet unique au survol.

Blog

Poster

Cette section modifie le style du contenu de l'en-tête du message dans un seul message. Cela ne change pas l'apparence de vos extraits de blog sur votre page de blog ou votre module de blog. Parfois, les en-têtes de vos articles de blog devront être différents des en-têtes du reste de votre site. C'est là que vous feriez ces ajustements.

Si vous choisissez d'utiliser le module Post Header, ces options ne seront pas efficaces.

Styles mobiles

J'adore cette rubrique. Ici, vous pouvez ajuster l'apparence de votre site sur les appareils mobiles et voir les résultats en temps réel.

Styles de tablette et de téléphone

Vous pouvez sélectionner Tablette ou Téléphone et la fenêtre à droite du Personnalisateur s'ajustera automatiquement pour vous montrer à quoi ressemble la page sur l'appareil. Ensuite, tout comme nous l'avons fait dans Paramètres généraux sous Disposition, vous pouvez ajuster la hauteur de la section, la hauteur de la ligne, la taille du corps du texte et la taille du texte de l'en-tête.

Astuce de conception n°1 : Une personnalisation que j'aime faire pour les dispositions de téléphone consiste à définir la hauteur de la ligne sur « 0 ». Cela crée un meilleur flux de contenu lors du défilement sur un téléphone, car il supprime cet espacement entre les lignes.

Conseil de conception n° 2 : Trouvez une échelle de polices adaptée à votre site. Voici un bon que j'aime suivre pour mes en-têtes :

Bureau : 48px

Tablette : 40 pixels

Téléphone : 32 pixels

Menu mobile

Ne négligez pas cela ou vous risquez de manquer la création d'un en-tête complètement unique pour votre menu mobile. Vous pouvez masquer le logo uniquement sur les appareils mobiles et modifier les couleurs d'arrière-plan et de texte.

Schémas de couleurs

Ceux-ci peuvent être pratiques pour une solution rapide. Mais je ne conseillerais pas d'utiliser les schémas de couleurs si vous prévoyez de modifier certaines de ces couleurs plus tard dans le personnalisateur de thème. Une fois définies, ces couleurs ne peuvent pas être remplacées dans le Customizer car le CSS généré contient la règle !important.

À mon avis, il est préférable de laisser cet ensemble par défaut.

Menus et widgets

Vous n'avez plus à modifier aveuglément vos menus ou widgets dans le tableau de bord wordpress. Vous pouvez désormais ajouter et personnaliser ces éléments et les voir prendre vie sur votre page en temps réel. J'aime le confort !

Page d'accueil statique

Par défaut, WordPress affiche votre dernier message sur votre page d'accueil (page d'accueil). Vous pouvez changer cela pour qu'il s'agisse de la page statique de votre choix dans cette section. Et vous pouvez également désigner votre page de messages (ou page de blog).

Je ne le savais pas avant d'écrire cet article, mais vous pouvez en fait déployer une nouvelle page à partir du personnalisateur de thème pour servir de page d'accueil ou de page de blog sans jamais avoir à quitter le personnalisateur.

CSS supplémentaire

La section CSS supplémentaire offre une excellente occasion de mettre la touche finale à la configuration de votre thème. Quels que soient les changements de style que le personnalisateur de thème Divi ne peut pas contrôler, vous pouvez le faire ici avec du CSS personnalisé. Parce que le Customizer vous permet de voir les changements CSS en temps réel, vous pouvez apporter les ajustements nécessaires à votre thème beaucoup plus facilement que d'aller et venir sur une feuille de style externe.

Exemples CSS supplémentaires

Exemple 1 : Ajuster la taille de tous les en-têtes

Un bon exemple de CSS supplémentaire serait le style de vos balises d'en-tête restantes. Divi vous permet de personnaliser le paramètre de votre police d'en-tête, mais cela ne concerne que vos en-têtes h1. Vous pouvez utiliser la zone CSS supplémentaire pour saisir le reste des personnalisations des balises d'en-tête (h2, h3, h4, etc.). J'aime utiliser l'échelle suivante : 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Exemple n° 2 : Faire correspondre le remplissage du bas du paragraphe avec la hauteur de la ligne du corps

Si vous définissez la hauteur de ligne du corps du texte sur 1,7 em, vous pouvez également définir la même valeur pour votre remplissage inférieur entre les paragraphes afin de conserver une grille de base et un rythme vertical cohérents. En d'autres termes, la distance entre les paragraphes est égale à la hauteur de la ligne. Pour ce faire, il vous suffit d'ajouter les éléments suivants :

p { padding-bottom: 1.7em}

Étant donné que la valeur de longueur em est basée sur la taille de police parent, si vous modifiez la taille de police de base en quelque chose d'autre dans le personnalisateur de thème, la valeur 1.7em s'ajustera en conséquence.

Exemple 3 : ajouter un attribut de soulignement à vos liens

Ajoutez un attribut de soulignement aux liens du corps.

a {
    text-decoration: underline;
}

Exportation et importation des paramètres de personnalisation de Divi pour votre prochain projet

Les personnalisateurs de thème Divi ont une option de portabilité qui permet aux utilisateurs d'exporter ou d'importer des paramètres de personnalisation. Cela présente une excellente opportunité pour les développeurs de créer une sorte de modèle de paramètre de personnalisation à utiliser dans leurs futurs projets.

Tout d'abord, je suggère de prendre le temps de déterminer les personnalisations que vous avez tendance à apporter lors de la création d'un site Web. Une fois que vous avez identifié ces paramètres, vous pouvez entrer ces personnalisations dans Divi Theme Customizer, puis exporter ces paramètres afin d'avoir une longueur d'avance sur vos prochains projets. Pourquoi continuer à faire les mêmes choses encore et encore quand vous pouvez déjà le faire ? De plus, cela vous aidera à vous assurer de ne pas sauter de personnalisations importantes.

Pour exporter vos paramètres, cliquez sur l'icône de portabilité en haut de Divi Theme Customizer.

Donnez un nom au fichier d'exportation et cliquez sur le bouton « Exporter les paramètres de personnalisation de Divi »

Vous pouvez maintenant utiliser ce fichier .json à l'avenir en cliquant sur la même icône de portabilité dans Divi Theme Customizer et en sélectionnant Importer au lieu d'exporter. Ensuite, tout ce que vous avez à faire est de télécharger le fichier .json et de cliquer sur « Importer les paramètres de personnalisation de Divi ».

Et c'est tout.

Que comprennent les paramètres de personnalisation de Divi ?

Les paramètres de personnalisation incluent essentiellement tout dans les 7 premières sections.

1. réglages généraux
2. Entête de navigation
3. Bas de page
4. Boutons
5. Blog
6. Styles mobiles
7. Schémas de couleurs

Les 4 dernières sections sont spécifiques à WordPress et ne seront pas transférées aux autres installations Divi. Ces rubriques comprennent :

1. Menus
2. Widgets
3. Page d'accueil statique
4. CSS supplémentaire

Il est important de noter que le CSS supplémentaire ne s'applique pas. Vous comptez peut-être sur ces paramètres pour gagner du temps lors de votre prochaine version. Si tel est le cas, je suggère de créer un thème enfant avec ce CSS afin que vous puissiez l'ajouter avec vos paramètres de personnalisation sur votre prochain projet.

Comment les styles de personnalisation Divi sont stockés

Pour Divi Customizer (avec Divi Options et Divi Builder), Divi sert des ressources CSS statiques qui peuvent être mises en cache par les navigateurs pour réduire le temps de chargement des pages. Cela signifie que les styles ne sont pas imprimés sur la page mais stockés dans un fichier CSS statique séparé. Chaque fois que vous enregistrez vos paramètres de personnalisation, le fichier CSS statique est mis à jour. Cela inclut également tout CSS supplémentaire que vous avez ajouté.

Pensées de clôture

Le Divi Theme Customizer est livré avec des options assez puissantes et le processus de personnalisation est à la fois pratique et agréable à utiliser. Et acquérir une meilleure compréhension de ce que ces options peuvent faire améliorera certainement la façon dont vous créez des sites Web avec Divi. Si vous ne l'avez pas déjà fait, prenez le temps d'explorer quels seraient vos paramètres de base optimaux pour un projet, connectez-les au personnalisateur et créez un fichier d'exportation. Vous serez surpris du coup de pouce (et de la confiance) que cela vous donnera au démarrage d'un nouveau projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!