Comment styliser les icônes Blurb comme accents de conception pour le contenu dans Divi

L'utilisation d'icônes de présentation comme accents de conception peut donner à votre mise en page un design unique auquel vous n'avez peut-être jamais pensé auparavant. En plus de positionner l'icône d'un module de présentation pour chevaucher un module de texte, vous pouvez utiliser l'arrière-plan et la bordure du module de texte pour styliser l'icône. Cela crée un bel accent de conception qui encadre le contenu tout en donnant à vos icônes un design tout à fait unique.

Dans ce tutoriel, je vais vous montrer comment styliser les icônes de présentation comme accents de conception pour votre contenu dans Divi.

Plongeons dedans !

Aperçu

Voici quelques exemples de la conception que nous allons construire dans ce tutoriel.

Téléchargez les exemples de mises en page pour ce didacticiel

Pour mettre la main sur la mise en page gratuite des motifs d'accent du module de présentation, vous devez d'abord la télécharger à 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 le fichier

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.

TÉLÉCHARGER

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 !

Initiation à la création de la conception à partir de zéro

Pour commencer, créez une nouvelle page et donnez un titre à votre page. Déployez ensuite le constructeur Divi sur le front-end. Ajoutez une section régulière avec une ligne à une colonne. Avant d'ajouter votre premier module, mettez à jour les paramètres de ligne avec les éléments suivants :

Utiliser une largeur de gouttière personnalisée : OUI
Largeur de gouttière personnalisée : 1

Cela éliminera toutes les marges personnalisées entre les modules.

Création du module de texte

Ajoutez ensuite un module de texte à l'intérieur de la ligne.

Mettez à jour le module de texte avec le texte de remplissage suivant :

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

Styliser le module de texte

Mettez maintenant à jour le reste du paramètre du module Texte comme suit :

Couleur d'arrière-plan : #ffffff

• Police du titre 2 : Nunito
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Style de police : TT
• Titre 2 Couleur du texte : #f24a5b
• Titre 2 Taille du texte : 42px (ordinateur de bureau), 32px (tablette), 22px (téléphone)
• En-tête 2, espacement des lettres : 16px
• Titre 2 Hauteur de ligne : 1,3 em

• Largeur : 500 px (ordinateur de bureau), 490 px (tablette)
• Alignement du module : centre
• Rembourrage personnalisé (bureau): 40px haut, 40px bas, 50px gauche, 50px droite
• Rembourrage personnalisé (téléphone): 20px à gauche, 20px à droite
• Largeur de la bordure : 10 px
• Couleur de la bordure : #ffffff

Étant donné que nous superposerons le module de texte avec des icônes de présentation, nous devons nous assurer que le module de texte se trouve au-dessus des icônes dans l'ordre de l'espace z. Pour ce faire, nous devons d'abord ajouter l'extrait de code CSS suivant à la zone CSS de l'élément principal du module de texte :

position: relative;

Définissez ensuite la valeur z-index sur 1.

Maintenant, ce module de texte se placera au-dessus de tous les autres modules qui se chevauchent, ce qui est important pour la conception.

Création de l'icône de présentation

Nous sommes maintenant prêts à créer la première icône de présentation. Pour ce faire, nous devons d'abord ajouter un module de présentation et le faire glisser vers le haut du module de texte. Supprimez ensuite le contenu fictif (le texte du titre et le corps du texte) et cliquez pour utiliser une icône au lieu d'une image pour le texte de présentation.

Mettez ensuite à jour les paramètres de conception suivants :

• Couleur de l'icône : #2ea3f2
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 100 px
• Marge personnalisée : 0px en bas (cela supprime la marge inférieure par défaut entre les modules ; pas nécessaire si vous utilisez une largeur de gouttière de ligne de 1)

Ensuite, puisque nous n'utilisons aucun texte avec le module (uniquement l'icône), nous pouvons nous débarrasser de la marge inférieure par défaut sous l'icône de présentation. Pour ce faire, ajoutez le CSS personnalisé suivant à la zone CSS de l'image Blurb :

CSS de l'image de présentation :

margin-bottom: 0px

Dupliquer l'icône Blurb

Avant de commencer à positionner le texte de présentation, commençons par dupliquer le module de présentation et faites glisser le duplicata sous le module de texte. Vous devriez maintenant avoir une icône de présentation au-dessus et en dessous du module de texte.

Positionnement des icônes Blurb à l'aide de Transform Translate

Pour positionner les icônes de présentation, nous allons utiliser les options de transformation de Divi qui nous permettent de placer le module de présentation avec l'icône où nous voulons sur la page.

Positionnement de l'icône de présentation #1

Pour positionner l'icône de présentation supérieure, ouvrez les paramètres du module de présentation et mettez à jour les éléments suivants :

• Transformer Traduire l'axe X (bureau): -242px
• Transformer Traduire l'axe Y (bureau): 50px
• Transformer Traduire l'axe X (téléphone) : -170px

Positionnement de l'icône de présentation #2

Avant de positionner cette icône de présentation, agrandissons-la un peu. Pour ce faire, ouvrez les paramètres du module de présentation et modifiez la taille de la police de l'icône à 150px.

Positionnez ensuite l'icône de présentation en mettant à jour les options de transformation suivantes :

• Transformer Traduire l'axe X (bureau): 242px
• Transformer Traduire l'axe Y (bureau): -100px
• Transformer Traduire l'axe X (téléphone) : 190px

Création de la ligne à deux colonnes

Pour créer la colonne suivante, dupliquez la ligne existante et modifiez la disposition des colonnes de la ligne en une disposition à deux colonnes (1/2 1/2).

Ensuite, utilisez la fonction multisélection de Divi pour sélectionner les trois modules dans la colonne de gauche, puis copiez-les et collez-les dans la deuxième colonne.

Ensuite, supprimez l'icône de présentation du bas dans la première colonne.

Alignement des icônes de présentation dans la colonne 2

Pour les icônes Blurb de la colonne 2, nous devons déplacer l'icône du haut vers la gauche et l'icône du bas vers la droite. Nous pouvons le faire simplement en modifiant la valeur de l'axe X Transform Translate.

Ouvrez les paramètres du module de présentation pour le module de présentation supérieur dans la colonne 2 et mettez à jour les éléments suivants :

• Transformer Traduire l'axe X (bureau): 242px
• Transformer Traduire l'axe X (téléphone) : 170px

Fondamentalement, tout ce que vous faites est de changer ces valeurs de négatives à positives pour les déplacer dans la direction opposée le long de l'axe des x.

Ensuite, mettez à jour la valeur de traduction de la transformation pour le module de présentation du bas dans la colonne 2 comme suit :

• Transformer Traduire l'axe X (bureau): -242px
• Transformer Traduire l'axe X (téléphone) : -190px

Mettre à jour les styles de module de texte dans la deuxième ligne

La deuxième rangée de contenu sert de sous-ensemble de services en vedette. Par conséquent, nous voulons que la taille de la police du titre soit différente et plus petite que notre en-tête. Pour mettre à jour les deux modules de texte en même temps, utilisez la multisélection pour sélectionner les deux modules de texte. Ensuite, mettez à jour les éléments suivants :

Modifiez le contenu de l'en-tête h2 pour lire « Service ».

• Titre 2 Taille du texte : 28px (ordinateur de bureau), 22px (tablette), 18px (téléphone)

Enregistrer les paramètres.

Ouvrez maintenant le modal des paramètres du module de texte dans la colonne 2 et mettez à jour les éléments suivants :

• Orientation du texte : à droite

Ajuster l'espacement de la mise en page

À l'heure actuelle, il y a probablement un peu trop d'espace blanc (ou négatif) entre les deux lignes de contenu. Pour supprimer une partie de cet espace, nous pouvons ajouter une marge inférieure négative au module de présentation inférieur dans la rangée supérieure comme suit :

• Marge personnalisée : -100px en bas

Résultat final

Voyons maintenant le résultat final.

Essayer d'autres icônes

Pour essayer différentes icônes pour votre mise en page, vous pouvez utiliser la fonction de recherche et de remplacement. Ouvrez les paramètres de présentation pour l'une des présentations contenant votre icône. Ensuite, faites un clic droit sur l'icône dans le modal des paramètres et sélectionnez Rechercher et remplacer.

Dans la fenêtre contextuelle Rechercher et remplacer, mettez à jour les éléments suivants :

• Dans : Cette section
• Remplacer par : [sélectionner une nouvelle icône]

Après cela, cliquez sur le bouton Remplacer.

Cela changera tous les textes de présentation de votre section par un nouveau.

Voici quelques exemples de mise en page utilisant différentes icônes.

Dernières pensées

L'ajout d'icônes de présentation comme accents de conception à votre contenu est un exemple de la façon dont deux modules peuvent être combinés pour créer un design complètement unique. Dans ce cas, l'arrière-plan et la bordure du module de texte servent de superposition partielle aux icônes environnantes. Le résultat est unique et ouvre la porte à l'exploration de plus de variantes de conception. N'hésitez pas à explorer différentes icônes et combinaisons de couleurs pour créer quelque chose pour vos propres besoins.

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

À votre santé!