Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 901.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits.

Souhaitez vous créer des transitions d’arrière-plan 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.

Cela vous permet de faire la transition 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 une transition de motif ou de masque dans différentes couleurs sans perdre l’alignement global et l’aspect symétrique de la conception.

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

Commençons.

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

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

Voici quelques autres exemples de conceptions qui sont possibles avec seulement quelques modifications simples aux masques et aux motifs d’arrière-plan.

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

Créer une nouvelle page avec Divi Builder

Pour commencer, vous devrez effectuer les opérations suivantes :

A partir du tableau de bord de WordPress, rendez vous sur Pages > Add New pour créer une nouvelle page.

lignes Divi converties en onglets

Donnez lui un titre qui a du sens pour vous et cliquez sur Use Divi Builder

Cliquez ensuite sur Start Buiding (Build From Scratch)

lignes Divi converties en onglets

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

Création d’une transition transparente en arrière-plan entre une section Divi et une ligne

Création d’un en-tête en tant que contenu fictif

Lire aussi : Divi : Comment créer des onglets avec effet au survol à partir des lignes

Avant de nous lancer, nous devons ajouter un en-tête en tant que contenu fictif. Pour commencer, ajoutez une ligne d’une colonne à la section par défaut de la page.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer Facilement et Gratuitement n'importe quel design de site Web ou blog avec un look professionnel. Arrêtez de payer cher pour un site internet que pouvez faire vous-même.

Ajoutez ensuite un module Texte à la ligne.

Ajoutez un texte de taille H1.

Sous l’onglet Design, mettez à jour le design du texte d’en-tête comme vous le souhaitez.

  • Font : Roboto Condensed
  • Font Weight : Bold
  • Style : TT
  • Text Alignment : Centré
  • Text Color : #000000
  • Heading Text Size : 4vw
  • Letter Spacing : 0.1em
  • Line Height : 1.3em

Conception de l’arrière-plan de la section

Ajout du rembourrage à la section

Une fois que le faux en-tête est en place, ouvrez les paramètres de section et mettez à jour l’espacement comme suit :

  • Padding (Top et Bottom) : 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 Backgound Gradient, ajoutez les points de dégradé suivants :

  • Gradient Stops :
    • 0% : #4f0f75 (à 0 %)
    • 25% : #2843c9 (à 25 %)
    • 50% : #4ae2e0 (à 50 %)
    • 75% : #3881ff (à 75 %)
    • 100% : #4f0f75 (à 100 %)

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

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

  • Pattern : Diagonal Stripes
  • Pattern Color : rgba(79,15,117,0.23)
  • Transform : Rotation
  • Pattern Size : Custom Size
  • Width : 7vw
  • Height : 5vw
  • Pattern Repeat Origin : Center

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 « center ». 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 Background Mask, ajoutez les éléments suivants :

  • Background Mask : Layor Blob
  • Mask Color : rgba(0,0,0,0.7)
  • Mask Width : 100vw
  • Position : Center

Remarque : Tout comme avec le motif, nous devons donner au masque une taille en utilisant l’unité de longueur VW. Nous devons également donner au masque une position centrale.

Conception de l’arrière-plan de la ligne

Copier et coller l’arrière-plan de la section sur l’arrière-plan de la ligne

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

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

Voulez-vous vendre vos produits sur internet ?

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress et créez facilement votre boutique en ligne. Parfait pour les débutants.

À 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 rangée à l’aide de VW

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

  • Width : 75vw
  • Max Width: 75vw
  • Padding (Top, Bottom, Left et Right) : 10vw

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 dans le dégradé d’arrière-plan de la section.

Sous l’onglet Background Gradient, nous allons conserver les trois points 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é.

Ensuite, positionnez le premier arrêt à 0% et le troisième arrêt à 100%. Une fois cela fait, vous devriez avoir les dégradés suivants.

  • Gradient Stops
    • 0% : #2843c9
    • 50% : #4ae2e0
    • 100% : #3881ff

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 rangée.

  • Box Shadow : voir capture d’écran
  • Vertical Position : 0px
  • Box Shadow Blur Strength: 4vw
  • Shadow Color : 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 Background Pattern de la ligne, mettez à jour les éléments suivants :

  • Pattern Color : rgba(255,255,255,0.23)

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

Nous pouvons également mettre à jour la couleur du masque pour la ligne afin de vraiment rendre le design plus marquant.

Sous l’onglet Background Mask, mettez à jour les éléments suivants :

  • Mask Color : #ffffff
  • Mask Transform : inversé

Résultat final

Voyons le résultat final.

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

Télécharger DIVI maintenant !!!

Plus de possibilités

Voici quelques autres exemples de conceptions qui sont possibles avec seulement quelques modifications simples aux masques et aux motifs d’arrière-plan.

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

Consulter également : Divi : Comment utiliser le « Gradient Builder » pour embellir vos images

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

Télécharger DIVI maintenant !!!

Conclusion

La clé pour créer des transitions de conception d’arrière-plan transparentes dans Divi est d’utiliser ces unités de longueur VW à bon escient.

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 la même conception d’arrière-plan sur une ligne. Après cela, nous avons juste 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.

Nous espérons que ce tutoriel vous inspirera pour vos prochains projets Divi. Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.

Vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet.

N’hésitez pas à consulter également notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

%d blogueurs aiment cette page :