Comment créer des zones de contenu stylisées dans Divi pour des conseils, des informations, des avertissements et plus (téléchargement GRATUIT)
Publié: 2021-06-20Les zones de contenu stylisées pour des choses comme des conseils, des avertissements et d'autres informations importantes sont des atouts pratiques pour tout site Web ou blog. Ils constituent un moyen efficace et pratique de présenter un contenu important avec une conception cohérente que les utilisateurs apprécieront. Par exemple, vous pouvez avoir besoin d'une conception de zone de contenu pour mettre en évidence un conseil clé dans un didacticiel ou pour avertir les utilisateurs d'un problème potentiel.
Dans ce tutoriel, nous allons vous montrer comment créer 3 conceptions de zones de contenu dans Divi. Ces conceptions de boîtes de contenu peuvent facilement être modifiées avec de nouvelles icônes, de nouveaux schémas de couleurs et/ou du contenu pour répondre à tous les besoins. Une fois que nous vous avons montré comment concevoir les boîtes, nous vous montrerons comment utiliser les préréglages globaux de Divi pour faciliter le déploiement d'une nouvelle boîte de contenu préconçue en quelques clics. Aucun plugin n'est nécessaire !
Commençons!
Aperçu
Aujourd'hui, nous allons construire ces 3 conceptions de boîtes de contenu principales dans Divi.
Avec ces 3 conceptions de boîtes de contenu principales, vous pourrez effectuer des personnalisations faciles (comme des icônes, des couleurs et du texte) pour créer des conceptions de boîtes de contenu sans fin pour toutes les occasions.
Voici 36 exemples que nous incluons dans notre téléchargement GRATUIT ci-dessous.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les 36 modèles de boîtes de contenu, vous devez d'abord télécharger la mise en page à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création des conceptions de la zone de contenu dans Divi
Avant de commencer à concevoir nos zones de contenu, ajoutons une nouvelle ligne à une colonne à la section par défaut du Divi Builder.
Conception de la boîte de contenu #1
Pour créer la première zone de contenu, ajoutez un module de présentation à la colonne.
Sous l'onglet Contenu, mettez à jour les éléments suivants :
- Utiliser l'icône : OUI
- Icône : voir capture d'écran
- Couleur d'arrière-plan : #ffffff
- Dégradé de fond à gauche : #00529b
- Couleur de fond de dégradé à droite : #bde5f8
- Direction du gradient : 90 degrés
- Position de départ : 3 em
- Position finale : 0%
Sous l'onglet Conception, mettez à jour le style de l'icône comme suit :
- Couleur de l'icône : #ffffff
- Alignement Image/Icône : Gauche
- Utiliser la taille de la police de l'icône : OUI
- Taille de la police de l'icône : 2 em
Ensuite, mettez à jour les styles de texte comme suit :
- Couleur du texte du titre : #00529b
- Taille du texte du titre : 1,5 em
- Hauteur de la ligne de titre : 2 em
- Couleur du corps du texte : #bde5f8
- Taille du corps du texte : 1em
- Hauteur de la ligne du corps : 2 em
Une fois les styles de texte en place, mettez à jour la taille et le remplissage comme suit :
- Largeur du contenu : 100 %
- Largeur maximale : 700 px
- Alignement du module : Centre
- Rembourrage: 2em haut, 2em bas, 5em gauche, 2em droite
Ajoutez ensuite une subtile ombre de boîte au texte de présentation comme suit :
- Box Shadow : voir capture d'écran
- Position verticale de l'ombre de la boîte : 0px
- Force du flou d'ombre de la boîte: 88px
- Force de propagation de l'ombre de la boîte: -10px
- Couleur de l'ombre : rgba(0,0,0,0.17)
Sous l'onglet Avancé, nous allons donner à l'icône de présentation un style personnalisé afin qu'elle ait une forme de cercle avec des couleurs d'arrière-plan et de bordure qui correspondent à la couleur de dégradé d'arrière-plan gauche utilisée précédemment. Nous allons également positionner l'icône avec une position absolue afin de pouvoir la placer exactement où nous voulons sans prendre de place réelle dans le document.
Pour ajouter le style personnalisé, collez le code CSS suivant dans la zone CSS de l'image Blurb :
position:absolute; margin-bottom: 0px; border: 0.5em solid #00529b !important; border-radius:50%; background: #00529b; transform: translateX(-3.75em);
REMARQUE : lors de la modification du schéma de couleurs de la zone de contenu (ou du module de présentation), nous devrons également mettre à jour les couleurs utilisées dans le CSS de l'image Blurb pour la bordure et l'arrière-plan de l'icône.
Voyons le résultat final.
Conception de la boîte de contenu #2
Pour créer notre deuxième conception de zone de contenu, dupliquez le module de présentation précédent pour démarrer la conception afin que nous puissions apporter quelques modifications.
Pour cette conception, nous allons centrer verticalement l'icône sur le côté gauche du texte de présentation en utilisant la propriété CSS grid.
Sous l'onglet Conception, remplacez le CSS de l'image Blurb par ce qui suit :
margin-bottom: 0px;
Ajoutez ensuite le CSS suivant à la zone CSS de contenu Blurb :
display: grid; align-items: center; justify-content: center; grid-template-columns: 5em auto; grid-gap: 2em;
La largeur de la colonne de gauche dans la grille (celle contenant l'icône) est définie sur 5em , et la colonne de droite contenant le titre et le corps du texte est définie sur auto . Nous devons faire correspondre la largeur de la couleur du dégradé de gauche à la colonne de grille de largeur 5em contenant l'icône. Pour ce faire, mettez à jour les éléments suivants :
- Position de départ : 5 em
Sous l'onglet Conception, mettez à jour l'alignement et la taille de l'icône :
- Alignement image/icône : centre
- Taille de la police de l'icône : 3 em
Maintenant, nous n'avons plus besoin du rembourrage gauche, alors retirez-le.
Maintenant, tout devrait être bien aligné. Découvrez le résultat final.
Conception de la boîte de contenu #3
Pour créer le troisième design de zone de contenu, dupliquez le deuxième module de présentation (zone de contenu) que nous venons de terminer.
Une fois le deuxième texte de présentation dupliqué, ouvrez les paramètres du texte de présentation en double.
Sous l'onglet Conception, modifiez la couleur de l'icône :
- Couleur de l'icône : rgba(255,255,255,0.3)
Ensuite, nous allons ajouter un texte d'étiquette vertical sur l'icône en ajoutant un CSS personnalisé au pseudo-élément avant (ce qui vous permet essentiellement d'attacher un design et/ou un contenu supplémentaire avant l'élément du module de présentation).
Pour ajouter le libellé, collez le CSS suivant dans la zone Avant CSS :
content: 'key tip'; bottom:50%; font-size: 1em; line-height: 1em; letter-spacing: 0.4em; position:absolute; transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important; transform-origin: bottom left; color: #fff; font-family: inherit; font-weight: bold; text-transform: uppercase; z-index:1;
Nous allons également faire pivoter l'icône pour qu'elle corresponde au texte vertical pivoté. Pour ce faire, ajoutez le CSS suivant dans la zone CSS de l'image Blurb :
margin-bottom: 0px; transform: rotateZ(-90deg);
Voici le résultat final.
Mise à jour de la conception
Mettre à jour la taille des éléments de la zone de contenu en modifiant la taille du corps du texte
Chacune des boîtes de contenu est construit en utilisant la plupart du temps l'unité de longueur em (em est par rapport à la taille de la police du corps de la racine de l'élément). Pour cette raison, la taille des zones de contenu sera mise à l'échelle de manière transparente lors de l'ajustement de la taille du corps du texte dans les paramètres de conception intégrés de Divi.
Mettre à jour les couleurs CSS personnalisées
Pour la conception de la zone de contenu n ° 1, nous avons ajouté une couleur d'arrière-plan et de bordure personnalisée à l'icône avec un CSS personnalisé. Assurez-vous de mettre à jour les couleurs utilisées pour la propriété de bordure et d'arrière-plan afin qu'elles correspondent au schéma de couleurs de votre propre conception.
Mise à jour du texte de l'étiquette
Pour la conception de la zone de contenu n ° 3, nous avons ajouté une étiquette avec un CSS personnalisé sur le pseudo-élément avant . Pour mettre à jour le texte, modifiez simplement la valeur de la propriété content dans la zone Avant CSS.
Rendre les Content Box réutilisables dans Divi
Enregistrer le module dans la bibliothèque Divi
Il existe deux manières principales de rendre les modules réutilisables dans Divi. La première consiste à enregistrer le module (ou n'importe quel élément) dans la bibliothèque Divi.
Une fois l'élément enregistré dans la bibliothèque, vous pouvez le retrouver dans la bibliothèque Divi lors de l'ajout d'un nouvel élément à une page.
Utiliser les préréglages globaux
La deuxième façon principale de rendre un module réutilisable dans Divi est de créer un préréglage global pour ce module. Une fois que vous avez enregistré la conception d'un module en tant que préréglage global, vous pouvez facilement ajouter ce préréglage global à n'importe quelle autre instance de ce même module.
Dans ce cas, nous pouvons ouvrir les paramètres de chacune de nos zones de contenu (ou modules de présentation) et créer un nouveau préréglage global pour chacun. Pour ce faire, ouvrez les paramètres du module Blurb et cliquez sur l'option prédéfinie en haut. Transformez ensuite les paramètres du module en un nouveau préréglage à partir de styles personnalisés.
Nommez le nouveau préréglage comme vous le souhaitez et enregistrez-le.
Répétez ces étapes pour chaque préréglage de module de présentation que vous souhaitez créer.
Pour créer plus de zones de contenu à l'avenir, ajoutez simplement un nouveau module de présentation et sélectionnez l'icône que vous souhaitez utiliser. Activez ensuite l'un des préréglages téléchargés en cliquant sur la liste déroulante des préréglages en haut et en sélectionnant un préréglage de votre choix.
Résultats finaux
Voici un dernier aperçu des 3 principaux modèles de boîtes de contenu que nous avons construits.
Et voici 36 modèles que vous pourrez créer avec quelques personnalisations faciles que nous incluons dans notre téléchargement GRATUIT ci-dessus.
Dernières pensées
Les zones de contenu stylisées que nous avons créées peuvent être un atout de conception utile pour tout site Web ou blog. Vous pouvez profiter des puissantes options de conception de Divi pour modifier les zones de contenu afin de les adapter à n'importe quelle conception. De plus, avec la possibilité de les enregistrer et de les télécharger dans la bibliothèque Divi et/ou de créer des préréglages globaux, vous pourrez déployer ces boîtes de contenu quand vous le souhaitez en quelques clics. Espérons que ceux-ci vous seront utiles.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!