Comment recréer un exemple élégant de séparateur de section de sujet en utilisant Divi

Le séparateur de section fait partie de la mise à jour attendue de Divi, qui modifie l’apparence globale de tout site Web. Le blog Divi Update bulletin contient de nombreux exemples de design qui nous permettent de retenir notre souffle. Pour vous aider à démarrer avec ces nouvelles partitions, nous vous montrerons comment recréer ces exemples. Non seulement vous pouvez les utiliser dans votre site Web ou dans votre prochain projet, mais vous pouvez aussi vous renseigner sur le fonctionnement des séparateurs de partitions dans Divi. Avant de vous montrer tous les exemples et comment les recréer, il y a des choses que vous devez savoir (et comprendre) avant de commencer:
Toujours commencer chaque partie en sélectionnant la couleur de fond vous pouvez toujours ajouter un fond gradué au – dessus de la couleur de fond, mais la couleur de fond doit avoir une différence de couleur entre les parties adjacentes qui permet à un séparateur inférieur de choisir la couleur de la partie suivante de la même façon. Cette différence de couleur permet à l’espaceur supérieur de choisir la couleur de la section précédente. Nous ne recréerons que la partition de chaque échantillon. Regardons le bon côté. Regardons rapidement les différents échantillons que nous recréerons. Après chaque exemple Showcase, vous trouverez un bouton qui vous guidera dans les étapes du tutoriel pour cet exemple particulier.
Exemple 1 Recréer cet exemple # 2 Recréer cet exemple # 3 Recréer cet exemple # 4 Recréer cet exemple # 5 Recréer cet exemple # 6 Recréer cet exemple # 7 Recréer cet exemple # 8 Recréer cet exemple comment recréer un exemple de séparateur de section en utilisant Divi Recréer l’exemple 1 Section 1 couleurs de fond nous avons mentionné au début de cet article que vous devriez commencer par choisir une couleur de fond pour votre section, même si vous ajoutez un fond gradué
Dans la section suivante. Une chose qui peut vous aider à le faire est de garder la couleur claire du séparateur. Voici les paramètres requis pour le séparateur inférieur de la section I: style du séparateur: trouver la couleur du séparateur dans la liste: hauteur du séparateur transparent: 282 Px séparateur horizontal répétitif: 0x inversion du séparateur: disposition du séparateur horizontal: contenu en haut de la Section Section 2 couleur de fond nous sélectionnons \
Ensuite, nous utilisons un diviseur inférieur qui correspond au diviseur supérieur et effectuons les réglages suivants: style du séparateur: trouver la couleur du séparateur dans la liste: hauteur du séparateur transparent: 337 Px séparateur horizontal répétitif: 0,75 x séparateur horizontal supérieur et inférieur: disposition du séparateur horizontal: contenu de la section suivante Section 3 couleurs de fond dans la dernière section de cet exemple, ajoutez « # 474ab6 » comme couleur de fond. Fond de gradient pour améliorer notre exemple, nous utilisons le fond de gradient suivant sur la couleur de fond: première couleur: # 474ab6deuxième couleur: # 9271f6type de gradient: direction de gradient linéaire: 180 degrés position de départ: 0% position f
Et la dernière section de l’arrière – plan utilise \
Trier: 1 Disposition des séparateurs: sous le contenu du chapitre Recréer l’exemple # 8 Section 1 couleur de fond ajouter d’abord « \ # fcfcfc » comme couleur de fond pour la section 1. Passez à l’onglet conception, ouvrez la Sous – catégorie séparateurs et utilisez les séparateurs suivants: style séparateur: trouver dans la couleur séparateur: hauteur du séparateur transparent: 69 Px (bureau), 46 Px (tablette), 38 Px (téléphone) Liste Section 2 couleurs de fond une fois cet exemple terminé, ajoutez « # 770fff » comme couleur de fond pour la section 2. Dans cet article, nous examinons quelques sections merveilleuses qui peuvent être ajoutées à n’importe quel type de site. Recréer ces exemples vous donne un aperçu rapide de la façon dont les partitions fonctionnent et comment les utiliser pour impressionner les visiteurs et tirer le meilleur parti du site que vous créez sans utiliser aucun logiciel d’édition de photos. Si vous avez des questions ou des suggestions; Assurez – vous de laisser un commentaire dans la section commentaires ci – dessous!