Comment créer des transitions de conception d'arrière-plan transparentes entre les éléments Divi

Créer des transitions de conception d'arrière-plan transparentes entre les éléments Divi est un excellent moyen d'améliorer la conception de votre site Web Divi. L'idée est de créer des conceptions d'arrière-plan assorties (à la fois pour une ligne et une section) qui partagent la même taille et la même position par rapport à la largeur du navigateur (en utilisant les unités de longueur vw). Cela vous permet de faire la transition de manière transparente d'un dégradé, d'un motif et d'un masque d'arrière-plan entre une ligne et une section de manière créative. Par exemple, vous pouvez avoir un motif ou une transition de masque dans différentes couleurs sans perdre l'alignement global et l'aspect symétrique du dessin.

Dans ce didacticiel, nous allons utiliser les options de conception d'arrière-plan intégrées de Divi pour créer une transition de conception d'arrière-plan transparente entre une section et une ligne Divi. L'application et la polyvalence de cette conception sont illimitées, amenant les options de conception d'arrière-plan de Divi à un tout autre niveau !

Commençons.

Aperçu

Voici un bref aperçu de la conception que nous allons créer dans ce didacticiel.

Voici quelques exemples de conceptions supplémentaires qui sont possibles avec seulement quelques modifications simples des masques et des motifs d'arrière-plan.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur le design de ce tutoriel, vous devrez d'abord le télécharger à l'aide du bouton ci-dessous. 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 nouvel abonné, vous recevrez encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis ! Si vous êtes déjà sur la 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 les fichiers

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.

TÉLÉCHARGER

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 :

1. Accédez à la bibliothèque Divi.
2. Cliquez sur le bouton Importer en haut de la page.
3. Dans la popup de portabilité, sélectionnez l'onglet import
4. 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).
5. 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 :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option "Construire à partir de zéro".

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Création d'une transition de conception d'arrière-plan transparente entre une section et une ligne Divi

Partie 1 : Création d'un titre en tant que contenu fictif

Avant de commencer à concevoir nos arrière-plans, nous devons ajouter un titre en tant que contenu fictif. Pour commencer, ajoutez une ligne à une colonne à la section par défaut de la page.

Ajoutez ensuite un module de texte à la ligne.

Ajoutez un titre H1 au contenu du corps.

Sous l'onglet conception, mettez à jour la conception du texte du titre comme vous le souhaitez. Pour cette conception, il est utile d'ajouter une unité de longueur VW pour la taille du texte d'en-tête afin qu'il s'adapte de manière fluide avec le reste de la conception.

2. Conception de l'arrière-plan de la section

Ajout d'un rembourrage VW à la section

Une fois le titre fictif en place, ouvrez les paramètres de section et mettez à jour l'espacement comme suit :

• Rembourrage : haut 15vw, bas 15vw

Ajout du dégradé d'arrière-plan à la section

Maintenant que nous avons plus d'espace pour travailler, nous sommes prêts à ajouter notre conception d'arrière-plan à la section. Sous l'onglet Dégradé, ajoutez les points de dégradé suivants :

• Arrêt dégradé 1 : #4f0f75 (à 0 %)
• Arrêt dégradé 2 : #2843c9 (à 25 %)
• Arrêt dégradé 3 : #4ae2e0 (à 50 %)
• Arrêt dégradé 4 : #3881ff (à 75 %)
• Arrêt dégradé 5 : #4f0f75 (à 100 %)

Ajout d'un motif d'arrière-plan à la section

Sous l'onglet Pattern, mettez à jour les éléments suivants :

• Motifs : rayures diagonales
• Couleur du motif : rgba (79, 15, 117, 0,23)
• Transformation de motif : Rotation
• Taille du motif : taille personnalisée
• Largeur du motif : 7vw
• Hauteur du motif : 5vw
• Origine de la répétition du motif : Centre

Remarque : Assurez-vous d'utiliser l'unité de longueur VW pour la largeur et la hauteur du motif. Et assurez-vous également de définir l'origine répétée sur "centre". Cela gardera le motif d'arrière-plan au même endroit que le motif d'arrière-plan que nous ajouterons à la ligne plus tard.

Ajout d'un masque d'arrière-plan à la section

Sous l'onglet Masque, ajoutez ce qui suit :

• Masque d'arrière-plan : tache de calque
• Couleur du masque : rgba (0,0,0,0,7)
• Taille du masque : 100 vw
• Position du masque : centre

Remarque : Tout comme pour le patron, nous devons donner une taille au masque en utilisant l'unité de longueur VW. Il faut aussi donner au masque une position centrale.

3. Conception de l'arrière-plan de la ligne

Copiez et collez l'arrière-plan de la section dans l'arrière-plan de la ligne

Pour accélérer le processus de conception de l'arrière-plan de la ligne, copiez les paramètres d'arrière-plan de la section.

Collez ensuite l'arrière-plan sur la ligne existante.

À ce stade, vous pouvez déjà voir comment le motif d'arrière-plan et le masque sur la ligne constituent une transition transparente vers l'arrière-plan de la section. Il semble que la ligne ait un arrière-plan transparent, mais il s'agit en fait du même motif et du même masque utilisés dans la section avec la même taille et la même position.

Ajuster la taille et le rembourrage de la ligne à l'aide de VW

Ensuite, nous devons donner à notre ligne une largeur personnalisée en utilisant l'unité de longueur VW. Mettez à jour les éléments suivants :

• Largeur : 75vw
• Max-Largeur: 75vw
• Rembourrage : 10vw en haut, 10vw en bas, 10vw à gauche, 10vw à droite

Présentation de l'espacement et du dimensionnement en unités de longueur VW

Jusqu'à présent, nous avons ajouté des valeurs d'espacement et de position dans notre mise en page en utilisant l'unité de longueur VW. Voici une illustration rapide des valeurs actuellement utilisées.

Jusqu'à présent, nous avons une transition transparente entre l'arrière-plan de la ligne et l'arrière-plan de la section pour les motifs et les masques. Ensuite, nous allons mettre à jour le dégradé d'arrière-plan de la ligne afin qu'il soit également transparent.

Ajuster les arrêts de dégradé sur la ligne

Ensuite, nous devons ajuster les arrêts de dégradé sur l'arrière-plan de la ligne pour une transition transparente vers le dégradé d'arrière-plan de la section. Sous l'onglet dégradé, nous allons conserver les trois arrêts de dégradé du milieu hérités de l'arrière-plan de la section) et supprimer le premier et le dernier arrêt de dégradé. Positionner ensuite la première butée à 0% et la troisième butée à 100%. Une fois cela fait, vous devriez avoir les dégradés suivants.

• Arrêt dégradé 1 : #2843c9 (à 0 %)
• Arrêt dégradé 2 : #4ae2e0 (à 50 %)
• Arrêt dégradé 3 : #3881ff (à 100 %)

Ajouter une ombre de boîte à la ligne

Pour donner un peu d'élévation à la conception et souligner la transition transparente de l'arrière-plan, nous pouvons ajouter une ombre de boîte à la ligne.

• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 0px
• Force du flou de l'ombre de la boîte : 4vw
• Couleur de l'ombre de la boîte : rgba (0,0,0,0,5)

Ajuster la couleur du motif d'arrière-plan de la ligne

Maintenant que nous avons tous les éléments d'arrière-plan à leur place, nous pouvons commencer à ajuster les couleurs pour un design plus créatif. Sous l'option de modèle pour la ligne, mettez à jour les éléments suivants :

• Couleur du motif : rgba (255,255,255,0.23)

Ajuster la couleur du masque d'arrière-plan de ligne

Nous pouvons également mettre à jour la couleur du masque pour la ligne pour vraiment faire ressortir le design ! Sous l'onglet masque, mettez à jour les éléments suivants :

• Couleur du masque : #ffffff
• Masque de transformation : Imverti

Résultat final

Voyons le résultat final.

Plus de possibilités

Voici quelques exemples de conceptions supplémentaires qui sont possibles avec seulement quelques modifications simples des masques et des motifs d'arrière-plan.

Dernières pensées

La clé pour créer des transitions de conception d'arrière-plan transparentes dans Divi est d'utiliser judicieusement ces unités de longueur VW. Tout d'abord, nous devons créer une conception d'arrière-plan de section qui s'adapte à la largeur de la fenêtre d'affichage du navigateur (à partir d'une position centrée sur la page). Une fois cela fait, nous pouvons utiliser le même design d'arrière-plan sur une ligne. Après cela, nous avons juste à faire quelques ajustements au dégradé et aux couleurs pour un design incroyable. Espérons que cette technique ajoutera une autre compétence de conception utile pour les projets futurs

J'ai hâte de vous entendre dans les commentaires.

Acclamations!