Utiliser le module de texte de Divi pour créer des éléments de bloc dans la conception de votre page Divi

Les modules de texte sont un élément essentiel de toute conception de page que vous créez avec Divi, je suis sûr que c'est quelque chose sur lequel nous pouvons tous être d'accord. Normalement, ils sont utilisés pour afficher du texte de manière simple. Mais vous pouvez également utiliser des modules de texte pour créer des éléments de conception époustouflants. Dans les articles de blog précédents, nous vous avons déjà montré comment utiliser du texte pour élever votre conception Web.

Dans ce didacticiel, nous continuerons à ajouter des options parmi lesquelles choisir lors de la conception d'une page et de l'utilisation des modules de texte. Comme vous le savez peut-être ou non, il existe plusieurs types de texte différents que vous pouvez combiner dans le même module de texte. De plus, un module peut contenir plusieurs titres, paragraphes, liens, etc. Dans cet article, nous allons utiliser tous ces types de texte à notre avantage pour créer de superbes éléments de bloc dans la conception de notre page.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat final sur différentes tailles d'écran.

Commençons!

Ajouter une nouvelle section régulière

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez actuellement. Ensuite, ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #000000

Espacement

Accédez ensuite aux paramètres d'espacement de votre section et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 280 pixels (ordinateur de bureau), 150 pixels (tablette et téléphone)
• Rembourrage inférieur : 280 pixels (ordinateur de bureau), 150 pixels (tablette et téléphone)

Ajouter une nouvelle ligne

Structure des colonnes

Une fois que vous avez terminé de modifier les paramètres de la section, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de ligne et faites en sorte que la ligne occupe toute la largeur de l'écran dans les paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Enfin, ajoutez un rembourrage personnalisé dans les paramètres d'espacement.

• Remplissage gauche de la colonne 1 : 100 pixels (ordinateur de bureau et tablette), 50 pixels (téléphone)
• Remplissage personnalisé de la colonne 2 : 50px
• Remplissage personnalisé de la colonne 3 : 50px

Ajouter un module de texte de titre à la colonne 1

Zone de contenu

Il est temps de commencer à ajouter les différents modules ! Le premier module dont nous aurons besoin dans la première colonne est un module de texte. Ajoutez du contenu H2 à la zone de contenu.

Paramètres de texte H2

Ensuite, allez dans les paramètres de texte H2 et apportez quelques modifications :

• Police de l'en-tête 2 : Source Code Pro
• Titre 2 Style de police : majuscule
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 100px
• Espacement des lettres de l'en-tête 2 : 24px

Espacement

Réduisez l'espace en haut en utilisant une marge supérieure négative.

• Marge supérieure : -50px

Ajouter le module de texte de description à la colonne 1

Paramètres de texte

Le deuxième module nécessaire dans la première colonne est un module de texte de description. Après avoir ajouté votre contenu, accédez aux paramètres de texte et apportez quelques modifications :

• Police de texte : Source Code Pro
• Couleur du texte : #ffffff
• Orientation du texte : Justifier

Dimensionnement

Réduisez également la largeur du module de texte.

• Largeur : 68 %

Espacement

Et enfin, créez un espace entre ce module de texte et le précédent dans les paramètres d'espacement.

• Marge supérieure : 200 pixels (ordinateur de bureau), 100 pixels (tablette et téléphone)
• Marge inférieure : 100 px (tablette et téléphone)

Ajouter un module de texte de bloc à la colonne 2

Zone de contenu

Il est temps de passer à la deuxième colonne ! Ici, nous allons utiliser des modules de texte pour créer des éléments de bloc. Une partie essentielle de la réalisation de ce travail consiste à structurer correctement la zone de contenu. Dans l'écran d'impression ci-dessous, vous pouvez voir que nous utilisons un titre H3, un titre H4, un paragraphe et un lien. Entre le titre H4 et le paragraphe, nous veillons à ce qu'il reste également de l'espace supplémentaire.

Couleur de l'arrière plan

Ajoutez une couleur d'arrière-plan noire au module de texte.

• Couleur d'arrière-plan : #000000

Paramètres de texte

Nous allons modifier chacun des types de texte individuellement. Commencez par modifier les paramètres de paragraphe.

• Police de texte : Source Code Pro
• Orientation du texte : à gauche
• Couleur du texte : clair

Paramètres de texte de lien

Ensuite, apportez des modifications supplémentaires aux paramètres du lien.

• Style de police du lien : majuscule et soulignement
• Couleur de soulignement du lien : #ffffff
• Couleur du texte du lien : #edf000
• Taille du texte du lien : 16px
• Espacement des lettres des liens : 3px

Titre 3 Paramètres de texte

Le titre H3 dans notre zone de contenu nécessite les paramètres suivants :

• Titre 3 Style de police : majuscule
• Titre 3 Taille du texte : 33px

Titre 4 Paramètres de texte

Continuez en ouvrant les paramètres de texte H4 et apportez-y également quelques modifications.

• Titre 4 Couleur du texte : #4f4f4f
• Titre 4 Taille du texte : 19px
• En-tête 4 Espacement des lettres : -1px

Dimensionnement

Pour créer la forme exacte que nous voulons, nous allons ensuite réduire la largeur du module de texte.

• Largeur : 88 % (ordinateur de bureau), 60 % (tablette), 90 % (téléphone)

Espacement

Nous devrons également modifier les paramètres d'espacement.

• Marge de gauche : 200 px (tablette)
• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Frontière

Ensuite, ajoutez une bordure subtile au module de texte.

• Largeur de la bordure : 2px
• Couleur de la bordure : #424242

Boîte ombre

Et pour finir, ajoutez une ombre de boîte colorée.

• Position horizontale de l'ombre de la boîte : 19px
• Position verticale de l'ombre de la boîte : 16px
• Force de propagation de l'ombre de la boîte: -4px
• Couleur de l'ombre : #f2ff00

Cloner le module de texte de bloc deux fois et le placer dans la colonne 3

Pour gagner du temps, nous allons cloner le bloc Text Module que nous avons créé deux fois et placer les deux doublons dans la troisième colonne de la ligne.

Modifications du module de texte rouge

Changer la couleur du texte du lien

Ouvrez le premier module de texte dans la troisième colonne et modifiez la couleur du lien.

• Couleur du texte du lien : #e02b20

Changer l'espacement

Ensuite, allez dans les paramètres d'espacement et ajoutez une marge supérieure.

• Marge supérieure : -150px (ordinateur de bureau), -20px (tablette), 50px (téléphone)

Changer la couleur de l'ombre de la boîte

Remplacez la couleur de l'ombre de la boîte par la même couleur que celle utilisée pour le texte du lien.

• Couleur de l'ombre : #e02b20

Modifications du module de texte bleu

Changer la couleur du texte du lien

Modifiez également la couleur du lien du deuxième module de texte dans la troisième colonne.

• Couleur du texte du lien : #0ff3ff

Modifier la taille

Modifiez ensuite les paramètres de dimensionnement.

• Dimensionnement : 67 % (ordinateur de bureau), 60 % (tablette), 90 % (téléphone)

Changer l'espacement

Et pour créer un certain chevauchement entre ce module et les deux autres modules de texte, jouez avec les valeurs de marge personnalisées.

• Marge supérieure : -20 px (ordinateur de bureau), -30 px (tablette), 50 px (téléphone)
• Marge de gauche : -160 px (ordinateur de bureau), 200 px (tablette), 0 px (téléphone)

Changer la couleur de l'ombre de la boîte

Pour finir, changez la couleur de l'ombre de la boîte en la même couleur bleue utilisée pour le texte du lien et vous avez terminé !

• Couleur de l'ombre : #0ff3ff

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Dernières pensées

Vous seriez étonné du nombre de conceptions uniques que vous pouvez réaliser en utilisant les modules de texte en combinaison avec les options intégrées de Divi. Aucun code CSS supplémentaire requis. Dans cet article, nous vous avons montré comment utiliser différents types de texte pour créer de superbes éléments de bloc sur la conception de votre page Divi. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!