Sélectionner une page


Divi a une édition de conception réactive intégrée qui facilite la personnalisation du style de votre site Web sur un ordinateur de bureau, une tablette ou un téléphone (sans connaissance de CSS). Une partie de l’édition responsive intégrée de Divi comprend une méthode simplifiée pour apporter des modifications de conception personnalisées avancées à l’aide de CSS personnalisé. C’est beaucoup plus pratique que de devoir compter sur une feuille de style externe avec des requêtes multimédias. Vous pouvez même ajuster visuellement le CSS en temps réel pour chacun des écrans de l’appareil, ce qui simplifie considérablement la conception réactive.

Dans ce didacticiel, je vais vous montrer comment utiliser le CSS personnalisé pour apporter des modifications de conception pratiques et réactives 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 un montage réactif

Divi a 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 d’un élément dans 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:

  • Bureau: 981px et plus
  • Tablette: entre 980px et 768px
  • Mobile: 767px et moins

Édition réactive avancée

Ces trois points d’arrêt sont les mêmes sur tous les onglets de conception réactive de Divi Builder, pas seulement pour les CSS personnalisés avancés. Chaque fois que vous déployez les onglets de conception réactive, le style effectué sous ces onglets apparaîtra dans la zone de ces trois principaux points d’arrêt réactifs.

Édition réactive avancée

Il convient également de noter que ces points d’arrêt généraux d’affichage des appareils ne sont pas les seuls points d’arrêt intégrés à la structure du thème Divi. Pour plus d’informations, consultez notre article sur Identifier les points d’arrêt réactifs de Divi.

Comprendre les champs de saisie CSS personnalisés de Divi

Lorsque vous personnalisez un élément (section, ligne ou module) dans Divi Builder, chaque option de conception correspond (ou cible) une partie spécifique de cet élément. Par exemple, si vous modifiez un module de texte, vous pouvez utiliser les paramètres intégrés pour cibler n’importe quelle partie de ce module (par exemple, police de titre 2, espacement à gauche, etc.).

Lorsque vous personnalisez un élément Divi (section, ligne ou module) à l’aide des champs de saisie CSS personnalisés avancés, chaque champ de saisie correspond (ou cible) tout ou partie de cet élément Divi. Le nombre de champs CSS personnalisés disponibles dépend de l’élément que vous concevez. Un module de texte ne peut avoir que trois champs de saisie personnalisés pour les éléments CSS (avant, après et après). Cependant, un module pour appeler des actions contient des champs supplémentaires pour le titre, la description et le bouton. En effet, il y a plus de parties dans le module qui peuvent être ciblées dans cet élément de module.

Voici une illustration des différents champs de saisie CSS personnalisés disponibles pour le module Appel à l’action.

Édition réactive avancée

Chaque champ de saisie CSS personnalisé cible une classe CSS spécifique dans l’élément. Pour voir à quelle classe un élément particulier est destiné, placez simplement le pointeur de votre souris sur l’élément et cliquez sur le point d’interrogation. Là, vous pouvez voir quelle classe CSS est ciblée.

Édition réactive avancée

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

Édition réactive avancée

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

Édition réactive avancée

Ajout de CSS personnalisé aux points d’arrêt de la conception réactive

Pour accéder aux trois principaux points d’arrêt de la conception réactive pour l’un des champs 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 adaptative.

Édition réactive avancée

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

Par exemple, supposons que vous souhaitiez que le bouton promotionnel d’appel à l’action capture toute la largeur du module sur la tablette et le téléphone, mais pas sur le bureau. Sélectionnez l’onglet Tablette sous le champ de saisie Bouton promotionnel et sélectionnez «afficher: bloquer»; Ajouter.

Notez que lorsque vous sélectionnez l’onglet Tablette, le mode d’affichage de Divi Builder passe en mode d’affichage Tablette (768 pixels de large) pour un meilleur aperçu de votre conception en temps réel.

Édition réactive avancée

Appareils plus petits Par défaut, héritez du CSS des appareils plus grands

Par défaut, le code appliqué à l’onglet Tablette est également appliqué à l’écran du téléphone. Pour nous rappeler cela, Divi ajoute un code d’espace réservé gris dans le champ de saisie avec le même code qui a été ajouté à l’écran de la tablette.

Édition réactive avancée

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 dans le backend est défini sur « max-width: 980px ». Cela signifie que le code ajouté à la tablette sera également appliqué au téléphone car l’écran du téléphone mesure 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 le champ de saisie de l’onglet Téléphone.

REMARQUE: Si vous ajoutez également du CSS personnalisé à l’écran du téléphone, Divi modifie intelligemment la requête multimédia pour les tablettes dans le backend vers la plage plus précise entre 768px et 980px (ou la largeur maximale: 980px et la largeur minimale: 768px).

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

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

Sur le bureau, nous positionnons le bouton dans le coin inférieur droit du module.

Édition réactive avancée

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

Édition réactive avancée

Sur le téléphone, nous écrasons le CSS de la tablette et restaurons l’affichage normal.

Édition réactive avancée

Si nous vérifions le CSS dans le backend, vous pouvez voir que Divi organise le code avec les requêtes multimédias suivantes afin 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éphoner

@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 enregistré dans Divi?

En tant que partie Les optimisations de vitesse intégrées de DiviTous les styles de Divi Builder (y compris le CSS personnalisé) sont combinés, minimisés et enregistrés sous forme de fichier CSS statique pour accélérer le chargement de la page. Donc, si vous souhaitez contourner l’ajout de CSS personnalisé via un thème enfant, vous pouvez profiter des entrées CSS réactives intégrées sans vous soucier de ralentir votre site Web.

Vous pouvez trouver plus d’informations dans notre article sous comment accélérer votre site Divi.

Dernières pensées

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

Pour la plupart des utilisateurs, il n’est pas nécessaire de passer à l’onglet Avancé pour ajouter du CSS personnalisé à votre thème. Divi a tellement d’options intégrées que même les utilisateurs avancés trouvent rarement le besoin d’utiliser du CSS personnalisé. Cependant, si vous avez besoin d’un style avancé, il est utile de savoir à quel point c’est facile à faire dans Divi.

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





Source link

Recent Posts