Comment appliquer indirectement le séparateur de section Divi à un projet (Partie 1: lignes)

Ajoutez une nouvelle couleur de fond de section aux modules que vous ajoutez à la ligne pour créer une nouvelle page ou ouvrir une page existante. Ensuite, ajoutez la section normale, ouvrez ses paramètres et ajoutez \ Séparateur supérieur # 1 ouvrez plus tard l’onglet conception et ajoutez le séparateur supérieur à la zone. Comme nous l’avons mentionné dans la section méthodes de cet article, vous devez certainement utiliser la même couleur comme séparateur de partition et arrière – plan. De cette façon, le séparateur n’apparaît pas dans la partition elle – même: style du séparateur: trouver la hauteur du séparateur dans la liste: 600 Px (bureau), 400 Px (tablette et téléphone) disposition du séparateur: sous le contenu de la partition Espacement nous ajouterons également de l’espace supplémentaire en haut et en bas de la section en ajoutant « 80 Px » à ces options de remplissage. Après avoir ajouté un nouveau paramètre de section de changement de structure de colonne de ligne, ajoutez une ligne avec la structure de colonne suivante: Couleur de fond avant d’ajouter un formulaire, ouvrez les paramètres de ligne et utilisez \ Ajouter un formulaire de texte vide pour chaque cercle à la colonne 1 laisser la zone de contenu vide et nous pouvons maintenant commencer à ajouter le formulaire. Nous commencerons par la première colonne. Le premier formulaire que nous devons ajouter est un formulaire texte vide. Ouvrez la Sous – catégorie arrière – plan et utilisez rgba (13489248.0,67) comme couleur de fond pour ce module. Espacement nous utiliserons des marges personnalisées pour que ce formulaire de texte blanc chevauche les lignes et les sections. Nous utiliserons également la marge supérieure pour créer des formes: marge supérieure: – 200 Px marge droite: 300 Px marge gauche: – 300 Px marge supérieure: 600 px Border pour créer un cercle à partir de cette forme, nous devons également ajouter 500 Px à chaque coin de la Sous – catégorie border. Enfin, selon vos préférences, vous pouvez également ajouter des ombres de boîte à la forme. Ajoutez un formulaire de texte d’en – tête aux paramètres de texte de la colonne 1 directement sous le formulaire de texte vide et ajoutez un autre formulaire de texte avec un en – tête. Allez à l’onglet conception et appliquez les paramètres de texte suivants: poids de la police de texte: style de police de texte super gras: couleur du texte en majuscules: # FFFFFF taille du texte: 82 Px (bureau), 60 Px (tablette), 45 Px (téléphone) hauteur de la ligne de texte: 1emtext direction: Centre Espacement nous écraserons ce module et les modules de texte vides précédents en ajoutant \
Enfin, pour créer un espace entre le titre du module texte, la ligne et la description du module texte, nous ajouterons les marges personnalisées suivantes: marge supérieure: 50 Px marge inférieure: 100 Px (bureau), 0 Px (tablette et téléphone) Ajouter un module image à la colonne 2 télécharger l’image
Tous les modules dont nous avons besoin dans la première colonne. Le seul module dont nous avons besoin dans le deuxième module est le module image. Nous avons téléchargé une illustration gratuite que vous pouvez télécharger en visitant les billets de blog du paquet de mise en page des paiements numériques, en faisant défiler vers le bas et en téléchargeant des ressources d’image. Nous ajouterons également un remplissage plus élevé dans ce module d’image: marge supérieure: 100 pixels (bureau), 50 pixels (tablette et téléphone) Séparateur de section # 2 changer le style de séparateur vous pouvez appliquer n’importe quel séparateur de section à ce dessin. Dans l’aperçu, nous avons partagé les trois séparateurs supérieurs, qui sont superbes dans ce design. Le premier est appliqué dans les étapes générales de cet article, mais vous pouvez facilement le changer au style de séparateur suivant: Changez la hauteur du séparateur, mais la hauteur du séparateur varie légèrement selon la taille de l’écran:
Hauteur de séparation: 600 pixels (bureau), 500 pixels (tablette), 400 pixels (téléphone) Conséquences Séparateur de zone # 3 changer le style du séparateur voulez – vous prévisualiser le style du troisième séparateur affiché dans la zone? Trouvez – le dans le style séparateur: Ce séparateur contient les hauteurs de séparateur suivantes pour différentes tailles d’écran: hauteur du séparateur: 600 pixels (bureau), 500 pixels (tablette), 400 pixels (téléphone) Conséquences Aperçu maintenant que nous avons terminé toutes les étapes et appliqué différents styles de séparateurs, regardons enfin les résultats sur les différents écrans de taille: C’est la première partie de cet article! Nous avons indirectement créé un résultat étonnant en utilisant le segmenteur. Une chose importante à garder à l’esprit à propos de cet article est que vous devez utiliser la même couleur pour les séparateurs et une partie de l’arrière – plan. Dans la deuxième partie de cet article, nous vous montrerons comment appliquer indirectement le séparateur de section à un module. Si vous avez des questions ou des suggestions
I. assurez – vous de laisser vos commentaires dans la section commentaires ci – dessous!