Créer des éléments de bloc dans la conception de page Divi en utilisant le module texte Divi

Les formulaires texte sont un élément important de toute conception de page que vous créez en utilisant Divi, et je suis sûr que nous pouvons tous être d’accord. En général, ils sont utilisés pour afficher le texte de façon simple. Mais vous pouvez également utiliser le texte pour créer des éléments de conception étonnants. Dans les blogs précédents, nous vous avons montré comment utiliser le texte pour améliorer la conception du Web. Dans ce tutoriel, nous continuerons à ajouter des options pour concevoir des pages et utiliser des formulaires texte. Comme vous le savez ou non, différents types de texte peuvent être combinés dans le même format de texte. De plus, un formulaire peut contenir plusieurs titres, paragraphes, liens, etc. Dans cet article, nous utiliserons tous ces types de texte pour créer des blocs étonnants dans la conception de page.
Allons – y! Aperçu avant d’aller plus loin dans ce tutoriel, examinons les résultats finaux sur différents écrans de taille. Allons – y! Ajouter une nouvelle couleur de fond de section générale commence par ajouter une nouvelle section générale à la page en cours de traitement. Ensuite, ouvrez la section paramètres et changez la couleur de fond. Couleur de fond: # 000000 Espacement allez aux paramètres d’espacement dans la section suivante et ajoutez des valeurs de remplissage personnalisées. Remplissage en haut: 280 pixels (bureau), 150 pixels (tablette et téléphone) remplissage en bas: 280 pixels (bureau), 150 pixels (tablette et téléphone) Après avoir ajouté une nouvelle ligne – structure de colonne modifier les paramètres de la section, ajouter une nouvelle ligne en utilisant la structure de colonne suivante: Redimensionnez sans ajouter de module, activez le réglage de ligne et laissez la ligne prendre toute la largeur de l’écran dans le réglage de taille. Rendre cette ligne pleine largeur: Oui utiliser une largeur de gouttière personnalisée: Oui
Largeur du fossé de drainage: 1 Espacement Enfin, ajoutez un remplissage personnalisé aux paramètres d’espacement. Colonne de remplissage à gauche 1: 100 Px (bureau et tablette), 50 Px (téléphone) colonne de remplissage personnalisée 2: 50 Px colonne de remplissage personnalisée 3: 50 px Il est temps d’ajouter un formulaire de texte d’en – tête à la zone de contenu de la colonne 1! Le premier module dont nous avons besoin dans la première colonne est le module texte. Ajoutez du contenu H2 à la boîte de contenu. Configuration du texte H2 puis aller à la configuration du texte H2 et apporter quelques modifications: titre 2: police: code source pro title font style 2: capital title text Color 2: # FFFFFF title 2 text size: 100 Px title 2 letter Spacing: 24px L’espacement réduit l’espace en haut en utilisant une marge supérieure négative.
Marge supérieure: – 50 pixels Le deuxième formulaire requis pour ajouter un formulaire de texte descriptif à la première colonne des paramètres de texte de la colonne 1 est un formulaire de texte descriptif. Après avoir ajouté du contenu, allez aux paramètres du texte et faites quelques modifications: police de texte: code source pro couleur du texte: # FFFFFF direction du texte: alignement Vous pouvez également réduire la largeur du formulaire texte. Largeur: 68% Enfin, l’espacement e crée un espace entre le formulaire de texte et le formulaire de texte précédent dans les paramètres d’espacement.
Marge supérieure: 200 pixels (bureau), 100 pixels (tablette et téléphone) marge inférieure: 100 pixels (tablette et téléphone) Ajouter un module bloc de texte à la zone de contenu de la colonne 2 – il est temps de passer à la deuxième colonne! Ici, nous allons créer des éléments de bloc sous forme de texte. Une partie importante de ce travail est de construire correctement les boîtes de contenu. Sur l’écran d’impression ci – dessous, vous pouvez voir que nous utilisons le titre H3, ti
Il y a aussi un paragraphe et un lien. Entre le titre H4 et le paragraphe, nous avons réservé un espace supplémentaire. Couleur de fond ajoute une couleur de fond noire au formulaire de texte. Couleur de fond: # 000000 Paramètres de texte nous modifierons chaque type de texte individuellement. Commencez par modifier les paramètres du paragraphe. Caractères de texte: code source pro Direction du texte: couleur du texte à gauche: clair Lier aux paramètres du texte, puis apporter d’autres modifications aux paramètres du lien. Style de police du lien: majuscules et soulignements couleur du soulignement du lien: # FFFFFF couleur du texte du lien: # edf000 taille du texte du lien: 16 Px espacement des lettres du lien: 3px Titre 3 Paramètres de texte les titres H3 dans la zone de contenu nécessitent les paramètres suivants: titre 3 style de police: majuscules titre 3 taille du texte: 33 px Le réglage du texte de la rubrique 4 se poursuit en ouvrant le réglage du texte H4 et en y apportant quelques modifications. Couleur du texte titre 4: # 4f4f4f titre 4 taille du texte: 19 Px titre 4 espacement des lettres: – 1px Pour créer la forme exacte que nous voulons, nous allons réduire la largeur du formulaire texte. Largeur: 88% (bureau), 60% (tablette), 90% (téléphone) Espacement nous devons également modifier les paramètres d’espacement. Marge gauche: 200 Px (tablette) Remplissage supérieur: 50 Px remplissage inférieur: 50 Px remplissage gauche: 50 Px remplissage droit: 50 px Bordure ensuite, ajoutez une bordure mince au formulaire de texte. Largeur de la bordure: 2px couleur de la bordure: # 424242 Enfin, ajoutez une ombre de couleur. Frame Shadow horizontal position: 19 Px Frame Shadow vertical position: 16 Px Frame Shadow Spread Force: – 4px Shadow color: # f2ff00 Clonage
A copiez le module de texte de bloc deux fois et placez – le dans la colonne 3 pour gagner du temps. Nous clonerons le module de texte de bloc créé deux fois et placerons les deux modules de texte de bloc dupliqués dans la troisième colonne de la ligne. Changez le formulaire de texte rouge changez la couleur du texte lié ouvrez le premier formulaire de texte dans la troisième colonne et changez la couleur du lien. Couleur du texte du lien: # e02b20 Changez l’espacement, puis allez au réglage de l’espacement et ajoutez la marge supérieure. Marge supérieure: – 150 pixels (bureau), – 20 pixels (tablette), 50 pixels (téléphone) Changer la couleur de l’ombre de la boîte change la couleur de l’ombre de la boîte à la même couleur que celle utilisée pour lier le texte. Couleur de l’ombre: # e02b20 Changer le formulaire de texte bleu changer la couleur du texte lié change également la couleur du lien pour le deuxième formulaire de texte dans la troisième colonne.
Couleur du texte du lien: # 0ff3ff Changez la taille changez les paramètres de taille plus tard. Dimensions: 67% (bureau), 60% (tablette), 90% (téléphone) Pour modifier l’espacement et créer un chevauchement entre ce module et les deux autres modules de texte, utilisez une valeur de marge personnalisée. Marge supérieure: – 20 pixels (bureau), – 30 pixels (tablette), 50 pixels (téléphone) Marge gauche: – 160 pixels (bureau), 200 pixels (tablette), 0 pixels (téléphone) Changez la boîte de couleur de l’ombre enfin, changez la couleur de l’ombre de la boîte au même bleu que le texte du lien, et vous avez terminé! Couleur de l’ombre: # 0ff3ff Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Vous avez été étonné par le nombre de conceptions uniques que vous pouvez réaliser en utilisant des modules texte avec les options intégrées de Divi. Aucun code CSS supplémentaire n’est requis. Dans cet article, nous vous montrons comment utiliser différents types de texte pour créer