Comment créer des boîtes de contenu élégantes dans Divi pour des conseils, des informations, des alertes, etc. (téléchargement gratuit)

Le style de boîte de contenu pour les conseils, les rappels et d’autres informations importantes est une ressource utile pour tout site Web ou blog. Ils sont un moyen efficace et pratique d’afficher le contenu important dans un design cohérent que les utilisateurs apprécieront. Par exemple, vous pourriez avoir besoin d’une conception de boîte de contenu pour mettre en évidence les conseils clés dans les tutoriels ou pour avertir les utilisateurs des problèmes potentiels. Dans ce tutoriel, nous vous montrerons comment créer 3 cadres de contenu dans Divi. Vous pouvez facilement modifier la conception de ces boîtes de contenu pour répondre à vos besoins en utilisant de nouvelles icônes, des combinaisons de couleurs et \/ ou du contenu. Après vous avoir montré comment concevoir des boîtes, nous vous montrerons comment utiliser les presets globaux de Divi pour déployer facilement de nouvelles boîtes de contenu pré – conçues en quelques clics. Pas besoin de plug – in!
Allons – y! Aujourd’hui, nous construirons ces trois cadres de contenu principaux dans Divi. Avec ces trois principaux cadres de contenu, vous pouvez facilement personnaliser (comme les icônes, les couleurs et le texte) pour créer des cadres de contenu sans fin pour une variété d’occasions. Voici 36 exemples que nous avons fournis dans le téléchargement gratuit ci – dessous. Téléchargement gratuit mise en page pour obtenir les 36 cadres de contenu, vous devez d’abord télécharger la mise en page en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Abonnez – vous au communiqué de presse Divi et nous vous enverrons une copie de la dernière page d’atterrissage Divi par courriel.
Utilisez les propriétés de la grille CSS. Dans l’onglet conception, remplacer l’image Blurb CSS par ce qui suit: en bas de la marge: 0px;
Les CSS suivants sont ensuite ajoutés à la boîte CSS du contenu Blurb: display: Grid;
Aligner les éléments: Centre;
Aligner le contenu: centré;
Colonne du modèle de grille: 5em auto;
Espacement des mailles: 2 m; La largeur de la colonne de gauche (y compris la colonne avec l’icône) dans la grille est réglée à 5em, et la largeur de la colonne de droite (y compris le titre et le corps) est réglée à automatique. Nous devons faire correspondre la largeur de couleur du gradient de gauche à la colonne de grille qui contient l’icône avec une largeur de 5 em. Pour ce faire, mettre à jour ce qui suit:
Position de départ: 5em Sur l’onglet conception, mettre à jour l’alignement et la taille de l’icône: alignement de l’image \/ de l’icône: taille de la police de l’icône centrale: 3em On n’a pas besoin du rembourrage à gauche, alors Enlevez – le. Maintenant, tout devrait être bien aligné. Vérifiez le résultat final. Pour créer un troisième design de boîte de contenu, copiez le deuxième module Blurb que nous venons de terminer. Après avoir copié le deuxième flou, activez les paramètres pour copier le flou. Dans l’onglet conception, changez la couleur de l’icône:
Couleur de l’icône: rgba (255255255,0.3) Ensuite, nous ajouterons d’abord du texte d’étiquette verticale à l’icône en ajoutant un CSS personnalisé à l’élément fictif (ce qui vous permet essentiellement d’ajouter d’autres conceptions et \/ ou contenus avant l’élément du module Blurb). Pour ajouter une étiquette, collez le CSS suivant dans la boîte CSS avant: contenu: conseils clés;
En bas: 50%;
Taille de la police: 1EM;
Hauteur de la ligne: 1EM;
Espacement des lettres: 0,4 em;
Position: absolue;
Transformation: rotatez (- 90deg) translatex (- 50%) translatey (3em)! Important
Origine de la transformation: coin inférieur gauche;
Couleur: # FFF;
Famille de polices: héritage;
Taille de la police: en gras;
Conversion de texte: Majuscules;
Indice Z: 1;
Nous alternerons
Il y a aussi des icônes pour correspondre au texte vertical tourné. Pour ce faire, ajoutez le CSS suivant à la boîte CSS Blurb Image: en bas de la marge: 0px;
Transformation: rotatez (- 90 degrés); C’est le résultat final. Mettre à jour la taille des éléments de la boîte de contenu en changeant la taille du texte du corps chaque boîte de contenu est construite principalement en unités de longueur em (EM est lié à la taille de la police du corps de l’élément). Ainsi, lorsque vous redimensionnez le texte du corps dans les paramètres de conception intégrés de Divi, la boîte de contenu est parfaitement redimensionnée. Pour mettre à jour les couleurs CSS personnalisées pour la conception de la zone de contenu no 1, nous avons ajouté des couleurs de fond et de bordure personnalisées à l’icône CSS personnalisée. Assurez – vous que les couleurs utilisées pour les attributs de bordure et de fond sont mises à jour pour correspondre au schéma de couleurs conçu. Pour la conception de la boîte de contenu No 3, nous avons ajouté une balise CSS personnalisée à l’élément fictif précédent. Pour mettre à jour le texte, il suffit de modifier la valeur de la propriété content dans la boîte CSS avant. Rendre les boîtes de contenu réutilisables dans Divi il existe deux façons principales d’enregistrer les modules dans la Bibliothèque Divi pour les rendre réutilisables dans Divi. La première méthode consiste à enregistrer le module (ou tout élément) dans la Bibliothèque Divi. Une fois le projet sauvegardé dans la bibliothèque, vous pouvez le trouver dans la Bibliothèque Divi lorsque vous ajoutez un nouveau projet à la page. La deuxième façon principale d’utiliser un preset global pour rendre un module réutilisable dans Divi est de créer un preset global pour le module. Une fois que vous avez sauvegardé la conception du module en tant que preset global, vous pouvez facilement l’ajouter à n’importe quelle autre instance du M ême m
Odulo. Dans ce cas, nous pouvons ouvrir les paramètres de chaque boîte de contenu (ou module Blurb) et créer un nouveau preset global pour chaque boîte de contenu. Pour ce faire, ouvrez les paramètres du module Blurb et cliquez sur les options prédéfinies en haut. Les paramètres du module sont ensuite convertis du style personnalisé au nouveau preset. Nommez le nouveau preset au besoin et sauvegardez – le. Répétez ces étapes pour chaque preset de module Blurb que vous souhaitez créer. Pour créer plus de boîtes de contenu dans le futur, il suffit d’ajouter un nouveau module Blurb et de sélectionner l’icône à utiliser. Ensuite, activez l’un des presets chargés en cliquant sur le menu déroulant presets en haut et en sélectionnant le preset que vous avez sélectionné. Voici le dernier point de la conception des trois grandes boîtes de contenu que nous avons créées. Il y a 36 dessins que vous pouvez faire avec quelques personnalisations simples que nous avons inclus dans le téléchargement gratuit ci – dessus. Les boîtes de contenu stylisées que nous créons peuvent être des ressources de conception utiles pour n’importe quel site Web ou blog. Vous pouvez utiliser les puissantes options de conception de Divi pour modifier la boîte de contenu pour accommoder n’importe quel design. De plus, comme vous pouvez les enregistrer et les télécharger dans la Bibliothèque Divi et \/ ou créer des presets globaux, vous pouvez déployer ces boîtes de contenu à tout moment en quelques clics. J’espère que ça marchera. J’ai hâte d’entendre vos commentaires. Bonjour!