Comment utiliser les entrées CSS personnalisées intégrées de Divi pour une édition réactive avancée

Divi dispose d'une fonction d'édition de conception responsive intégrée qui permet d'ajuster extrêmement facilement le style de votre site Web sur l'écran d'un ordinateur de bureau, d'une tablette ou d'un téléphone (sans connaître CSS). Une partie de l'édition réactive intégrée de Divi comprend une méthode simplifiée pour apporter des modifications de conception réactives plus avancées à l'aide de CSS personnalisé. C'est beaucoup plus pratique que de devoir s'appuyer sur une feuille de style externe avec des requêtes multimédias. Vous pouvez même apporter des ajustements visuels au CSS en temps réel pour chacun des écrans de l'appareil, éliminant ainsi une grande partie des conjectures de la conception réactive.

Dans ce didacticiel, je vais vous montrer comment apporter des modifications de conception réactives pratiques à l'aide de CSS personnalisé afin que vous puissiez effectuer des retouches de conception avancées qui peuvent ne pas être disponibles dans les options de conception intégrées de Divi.

Commençons.

Points d'arrêt intégrés de Divi pour l'édition réactive

Divi dispose de trois points d'arrêt réactifs généraux (points où la conception change en fonction de la largeur du navigateur) qui sont intégrés aux paramètres de n'importe quel élément du Divi Builder. Ces trois points d'arrêt sont principalement destinés à faciliter les paramètres de conception spécifiques pour les écrans de bureau, de tablette et de téléphone.

Les trois principaux points d'arrêt réactifs de Divi pour les écrans de bureau, de tablette et de téléphone sont les suivants :

• Ordinateur de bureau : 981 pixels et plus
• Tablette : entre 980px et 768px
• Mobile : 767 pixels et moins

Ces trois points d'arrêt sont les mêmes dans tous les onglets de conception réactive du générateur Divi, pas seulement pour les CSS personnalisés avancés. Ainsi, chaque fois que vous déployez les onglets de conception réactive, tout style effectué sous ces onglets sera affiché dans la plage de ces trois principaux points d'arrêt réactifs.

En outre, il convient de mentionner que ces points d'arrêt généraux pour l'affichage des appareils ne sont pas les seuls points d'arrêt intégrés à la structure du thème Divi. Vous pouvez en apprendre davantage sur ceux-ci sur notre article sur l'identification des points d'arrêt réactifs de Divi.

Comprendre les zones de saisie CSS personnalisées de Divi

Lorsque vous personnalisez un élément (section, ligne ou module) dans le générateur Divi, chaque option de conception correspond (ou cible) une partie spécifique de cet élément. Par exemple, lors de l'édition d'un module de texte, vous pouvez cibler n'importe quelle partie de ce module à l'aide des paramètres intégrés (c'est-à-dire la police du titre 2, le remplissage à gauche, etc.).

De même, lorsque vous personnalisez un élément Divi (section, ligne ou module) à l'aide des zones de saisie CSS personnalisées avancées, chaque zone de saisie correspondra (ou ciblera) l'ensemble ou certaines parties de cet élément Divi. Le nombre de boîtes CSS personnalisées disponibles variera en fonction de l'élément que vous stylisez. Un module de texte ne peut avoir que trois zones de saisie d'éléments CSS personnalisés (avant, principal et après), mais un module d'appel à l'action aura des zones supplémentaires pour le titre, la description et le bouton. C'est parce que le module a plus de parties qui peuvent être ciblées dans cet élément de module.

Voici une illustration des différentes zones de saisie CSS personnalisées disponibles pour le module Call to Action.

Chaque zone de saisie CSS personnalisée cible une classe CSS spécifique au sein de l'élément. Pour voir la classe ciblée pour un élément particulier, survolez simplement l'élément et cliquez sur l'icône en forme de point d'interrogation. Là, vous verrez la classe CSS ciblée.

Par conséquent, vous n'avez pas besoin d'ajouter une classe CSS à votre extrait CSS dans la zone de saisie. Si vous le faites, le code ne fonctionnera pas.

Au lieu de cela, ajoutez simplement les propriétés CSS directement à la zone que vous souhaitez appliquer à la classe déjà ciblée.

Comment ajouter un CSS personnalisé aux points d'arrêt de conception réactive

Pour accéder aux trois principaux points d'arrêt de conception réactive pour l'une des zones de saisie CSS, survolez simplement l'élément et cliquez sur l'icône de la tablette. Ensuite, vous verrez les trois onglets de conception réactive.

Il ne vous reste plus qu'à utiliser les onglets pour ajouter du CSS à l'un des trois écrans d'appareil (ordinateur de bureau, tablette et téléphone).

Par exemple, supposons que vous souhaitiez que le bouton promotionnel pour un appel à l'action s'étende sur toute la largeur du module sur tablette et téléphone, mais pas sur ordinateur de bureau. Vous devez sélectionner l'onglet de la tablette sous la zone de saisie du bouton Promo et ajouter « afficher : bloquer ; ».

Notez que lorsque vous sélectionnez l'onglet tablette, le mode d'affichage Divi Builder passe au mode d'affichage tablette (une largeur de 768 pixels) pour un meilleur aperçu de ce à quoi ressemblera votre conception en temps réel.

Les appareils plus petits héritent du CSS des appareils plus grands par défaut

Par défaut, le code appliqué à l'onglet de la tablette sera également hérité par l'écran du téléphone. Pour nous aider à nous le rappeler, Divi ajoute un code d'espace réservé gris à la zone de saisie avec le même code qui a été ajouté à l'écran de la tablette.

La raison pour laquelle l'affichage du téléphone hérite de l'affichage de la tablette est que le point d'arrêt réel (requête multimédia) pour l'affichage de la tablette sur le backend est défini sur "max-width: 980px;" ce qui signifie que le code ajouté à la tablette sera également appliqué au téléphone car l'écran du téléphone fait moins de 980 pixels de large. Donc, si vous souhaitez appliquer un style différent au téléphone, vous devrez ajouter un code supplémentaire dans la zone de saisie de l'onglet téléphone.

REMARQUE : si vous ajoutez également du CSS personnalisé à l'écran du téléphone, Divi modifiera intelligemment la requête multimédia pour la tablette sur le backend pour la plage plus précise entre 768px et 980px (ou largeur max : 980px et largeur min : 768px).

Ce que le CSS personnalisé est appliqué sur le backend

Disons que nous ajoutons un CSS personnalisé aux trois onglets réactifs (ordinateur de bureau, tablette et téléphone).

Sur desktop, on positionne le bouton en bas à droite du module.

Sur tablette, nous supplantons le code du bureau et étendons simplement le bouton sur toute la largeur du module.

Sur le téléphone, nous supplantons le CSS de la tablette et retournons l'affichage à la normale.

Si nous inspectons le CSS sur le backend, vous pouvez voir que Divi organise le code avec les media queries suivantes pour que vous n'ayez pas à le faire :

Bureau :

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

Tablette:

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

Téléphone

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

Comment le CSS est-il stocké dans Divi ?

Dans le cadre des optimisations de vitesse intégrées de Divi, tous les styles dans le Divi Builder (y compris le CSS personnalisé) seront combinés, minimisés et stockés sous forme de fichier CSS statique pour un chargement de page plus rapide. Donc, si vous souhaitez éviter d'ajouter du CSS personnalisé via un thème enfant, vous pouvez profiter des entrées CSS réactives intégrées sans avoir à vous soucier de ralentir votre site.

Pour en savoir plus, consultez notre article sur comment accélérer votre site Divi.

Dernières pensées

Espérons que cet article vous aidera à comprendre un peu mieux comment tirer parti des zones de saisie CSS personnalisées intégrées de Divi pour apporter des modifications de conception réactives pratiques à votre site Web.

Pour la plupart des gens, il n'y aura pas besoin de s'aventurer dans l'onglet avancé pour ajouter du CSS personnalisé à votre conception. Divi a tellement d'options intégrées que même les utilisateurs avancés auront rarement besoin d'utiliser du CSS personnalisé. Cependant, si le moment vient où vous avez besoin d'un style avancé, il est utile de savoir à quel point il est facile de le faire dans Divi.

Quelle a été votre expérience avec les entrées CSS personnalisées de Divi ?