Comment combiner des masques d'arrière-plan avec des séparateurs de section dans Divi
Publié: 2022-08-15La combinaison de masques d'arrière-plan avec des séparateurs de section dans Divi ajoute une autre couche de créativité à un arsenal déjà puissant d'options de conception d'arrière-plan. Si vous n'avez pas beaucoup d'expérience avec les options d'arrière-plan de Divi, vous manquez certainement quelque chose. Une option pratique, mais puissante, vous donne la possibilité d'ajouter un masque d'arrière-plan à votre dégradé d'arrière-plan (ou image) en quelques clics. En plus des options d'arrière-plan, les séparateurs de section permettent également aux utilisateurs d'améliorer leurs conceptions d'arrière-plan.
Dans ce tutoriel, nous allons vous montrer comment combiner des masques d'arrière-plan avec des séparateurs de section dans Divi. Nous vous donnerons des instructions étape par étape sur la façon de réaliser une conception d'arrière-plan pour une section Divi en utilisant cette technique. De plus, nous expliquerons même comment créer des conceptions alternatives avec seulement quelques ajustements simples.
Prendre plaisir!
Aperçu
Voici un aperçu des dessins de ce tutoriel.
Le concept
Le concept de base de ce didacticiel consiste à combiner un masque d'arrière-plan et des séparateurs de section pour créer des formes de masque encore plus uniques.
Tout d'abord, nous ajoutons un masque d'arrière-plan.
Ensuite, nous ajoutons des séparateurs de section pour compléter la forme du masque de manière créative.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Gagner
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 nouveau
abonné, vous recevrez encore plus de bonté Divi et un pack Divi Layout gratuit tous les lundis ! Si vous êtes déjà sur le
liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas "réabonné" ou ne recevrez pas d'e-mails supplémentaires.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack de mise en page ultime Divi Landing Page, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-nous 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.
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 !
Pour importer la mise en page de la section dans votre bibliothèque Divi, procédez comme suit :
- Accédez à la bibliothèque Divi.
- Cliquez sur le bouton Importer en haut de la page.
- Dans la popup de portabilité, sélectionnez l'onglet import
- Choisissez le fichier de téléchargement sur votre ordinateur (assurez-vous d'abord de décompresser le fichier et d'utiliser le fichier JSON).
- Cliquez ensuite sur le bouton d'importation.
Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.
Passons au tutoriel, d'accord ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez procéder comme suit :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option "Construire à partir de zéro".
- Ayez maintenant une toile vierge pour commencer à concevoir dans Divi !
Comment combiner des masques d'arrière-plan et des séparateurs dans Divi
1. Ajouter la taille et l'espacement de la section
Pour commencer, nous allons ajouter la taille et l'espacement à la section existante dans le constructeur. Nous allons suspendre l'ajout d'une ligne ou de tout contenu afin de pouvoir nous concentrer sur la conception de l'arrière-plan de la section
Ouvrez les paramètres de la section. Sous l'onglet Conception, mettez à jour la taille et l'espacement comme suit :
- Hauteur minimale : 50 vw
- Rembourrage : 0px en haut, 0px en bas
L'utilisation de l'unité de longueur VW pour la hauteur peut sembler étrange. Cependant, puisque nous allons utiliser l'unité de longueur VW pour dimensionner nos éléments d'arrière-plan, cela garantira que la conception s'adapte de manière fluide sur différentes largeurs de navigateur.
2. Créez le dégradé d'arrière-plan
Une fois que la section a une certaine hauteur, nous sommes prêts à ajouter le dégradé d'arrière-plan à la section. Cela nous donnera une couleur d'arrière-plan afin que nous puissions présenter le combo masque d'arrière-plan et diviseur plus tard.
Sous l'onglet Contenu, cliquez sur l'onglet Dégradé d'arrière-plan sous les options d'arrière-plan. Ajoutez ensuite un dégradé comme suit :
- Arrêt couleur 1 : #1a2a6c (à 20 %)
- Couleur Stop 2 : #b21f1f (à 60%)
- Arrêt couleur 2 : #fdbb2d (à 100 %)
3. Créez le masque d'arrière-plan
Maintenant que nous avons un dégradé de couleurs, nous sommes prêts à créer un masque d'arrière-plan.
Sous l'onglet Masque d'arrière-plan, mettez à jour les éléments suivants :
- Masque : Chevrons
- Couleur du masque : #000
- Masque de transformation : Inversé
- Rapport d'aspect du masque : voir la capture d'écran
4. Ajouter les séparateurs d'arrière-plan de section
Une fois notre masque en place, nous pouvons modifier davantage la forme du masquage en utilisant des séparateurs de section. Dans cet exemple, nous allons ajouter un séparateur de section en demi-cercle en haut et en bas. Cela compressera le masque d'arrière-plan pour qu'il ressemble davantage à un dessin de flèche fantaisie.
Pour ce faire, cliquez sur l'onglet Conception et ajoutez les séparateurs suivants :
Tout d'abord, ajoutez un séparateur supérieur sous l'onglet Haut.
- Style de diviseur : Voir la capture d'écran
- Couleur du diviseur : #000
- Hauteur du diviseur : 10 vw
Ensuite, ajoutez un séparateur inférieur sous l'onglet Bas.
- Style de diviseur : Voir la capture d'écran
- Couleur du diviseur : #000
- Hauteur du diviseur : 10 vw
- Retournement du diviseur : Retournement vertical
Le résultat
Voici le résultat jusqu'à présent.
Ajuster les options d'arrière-plan et les séparateurs pour plus de conceptions
Maintenant que vous avez l'idée de base en place, nous pouvons facilement jouer avec les séparateurs de la section des options d'arrière-plan pour créer plus de motifs.
Conception alternative #1
Pour notre première conception alternative, nous allons faire pivoter le masque d'arrière-plan existant et remplacer les séparateurs de section en demi-cercle par des triangles.
Pour ce faire, ouvrez les paramètres de section existants, cliquez sur l'onglet Masque d'arrière-plan et mettez à jour les éléments suivants :
- Masque de transformation : retournement vertical, rotation
- Rapport d'aspect du masque : voir la capture d'écran
Ensuite, mettez à jour les séparateurs de section comme suit :
Séparateur supérieur
- Style de diviseur : Voir la capture d'écran
- Hauteur du diviseur : 13 vw
Séparateur inférieur
- Style de diviseur : Voir la capture d'écran
- Hauteur du diviseur : 13 vw
- Inverser le diviseur : désactiver
Le résultat
Voici le résultat.
Conception alternative #2
Pour notre deuxième et dernière conception alternative, nous allons remplacer le masque Chevrons par le masque Diagonal Bars 2 et lui donner également un nouveau séparateur de section supérieure pour ajouter un subtil effet de swooshing au design.
Pour ce faire, ouvrez les paramètres de section existants, cliquez sur l'onglet Masque d'arrière-plan et mettez à jour les éléments suivants :
- Masque : Barres diagonales 2
- Masque de transformation : retournement horizontal
- Rapport d'aspect du masque : voir la capture d'écran
Ensuite, mettez à jour les séparateurs de section comme suit :
Séparateur supérieur
- Style de diviseur : Voir la capture d'écran
- Retournement du diviseur : Retournement horizontal
Séparateur inférieur
- Style de diviseur : Aucun
Le résultat
Voici le résultat.
Résultats finaux
Pour vous donner une meilleure idée de ce à quoi ces arrière-plans ressembleront avec du contenu, j'ai ajouté une ligne à une seule colonne avec un grand titre positionné au centre de la section. J'ai également ajouté un design supplémentaire pour chacun qui comprend une image avec un mode de fusion.
Vérifie-les!
Pour explorer les paramètres utilisés pour le contenu et les images, n'hésitez pas à télécharger la mise en page gratuite de ce tutoriel (voir ci-dessus) qui comprend chacun des designs.
Dernières pensées
La combinaison de masques et de séparateurs de section pour les conceptions d'arrière-plan ouvre davantage de possibilités pour créer des formes uniques pour ces masques intégrés. N'hésitez pas à explorer différentes combinaisons par vous-même. Espérons que cela vous sera utile pour votre propre site Web ou votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
Acclamations!