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 donner des formes à vos images à l’aide du générateur de dégradé de Divi ?

Les masques d’image sont souvent utilisés pour ajouter des formes intéressantes aux images. Ils permettent à l’image de voir à travers la forme, donnant à la page un élément de design unique. 

Avec le Gradient Builder de Divi, vous n’avez pas forcément besoin d’utiliser des masques pour créer des formes. Au lieu de cela, vous pouvez utiliser les Gradient Stops et les paramètres pour les créer ! 

Dans cet article, nous verrons comment embellir vos images avec le Gradient Builder de Divi pour vous aider à ajouter des designs uniques à vos images.

Commençons.

Aperçu

Voyons tout d’abord ce que nous allons créer dans ce tutoriel sur différentes tailles d’écran.

Premier exemple – Forme d’image circulaire

Ordinateur de bureau

donner des formes à vos images à l'aide du générateur de dégradé de Divi

Tablette

Téléphone

Deuxième exemple – Forme d’image linéaire

Bureau

donner des formes à vos images à l'aide du générateur de dégradé de Divi

Tablette

Téléphone

Troisième exemple – Forme d’image elliptique

Ordinateur de bureau

donner des formes à vos images à l'aide du générateur de dégradé de Divi

Tablette

Téléphone

Quatrième exemple – Forme d’image conique

Ordinateur de bureau

donner des formes à vos images à l'aide du générateur de dégradé de Divi

Tablette

Téléphone

Conception de la mise en page avec Divi

Commençons par créer la mise en page que nous utiliserons dans tous les exemples. Cette mise en page peut être utilisée comme section héros. 

Il comprendra un titre et une description d’un côté et l’image de l’autre. Nous utiliserons ensuite cette mise en page et cette image pour les exemples.

Personnaliser la rubrique

Tout d’abord, créez une nouvelle page Divi et personnalisez la section. Ouvrez les paramètres de la section et changez la couleur d’arrière-plan en #f0f3fb.

  • Background : #f0f3fb
Créer la mise en page

Ensuite, allez dans l’onglet Design et modifiez les paramètres d’espacement comme suit :.

  • Padding (Top et Bottom) : 10 %
Créer la mise en page

Ajouter une ligne

Ensuite, ajoutez une ligne avec la structure de colonne ci-dessous.

Ajouter une ligne

Accédez aux paramètres de la ligne, dans l’onglet Design, accédez à l’option Sizing et modifiez les paramètres de dimensionnement.

  • Use Custom Gutter Width : YES
  • Max Width : 1 480 pixels
Ajouter une ligne

Paramètres de la première colonne

Dans l’onglet Content de la ligne, ouvrez les paramètres de la première colonne de la ligne, accédez à l’onglet Design. Modifier l’espacement comme suit.

  • Padding (Left et Right) : 9% Gauche, Droite
Paramètres du premier module de texte

Paramètres du premier module Texte

Ensuite, ajoutez un module Texte à la colonne de gauche.

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.

Paramètres du premier module de texte

Sélectionnez Heading 4 pour le texte du contenu et ajoutez le contenu de votre corps.

  • Texte : « Bienvenue sur BlogPasCher »

Ensuite, allez dans l’ onglet Design et modifiez les paramètres du titre.

  • Font : Montserrat
  • Font Weight : Bold
  • Style : TT
  • Text Color : #1d4eff
  • Text Size : Desktop 16 px, Tablet 14 px, Phone 12 px
  • Letter Spacing : 0,3 em
  • Line Height : 1,6 em

Faites défiler jusqu’à Spacing et modifiez la marge inférieure.

  • Margin (Bottom) : 0px

Paramètres du deuxième module Texte

Ensuite, ajoutez un module Texte sous le premier.

Paramètres du deuxième module de texte

Définissez le type de texte sur « Heading 1 » et ajoutez le contenu de votre corps.

  • Contenu : « Planifiez votre avenir financier »

Ensuite, sélectionnez l’ onglet Design et modifiez les option du titre.

  • Font : Montserrat
  • Font Weight : Gras
  • Text Color : #0f1154
  • Taille: 80px Desktop, 40px Tablet, 24px Phone
  • Hauteur de ligne : 110 %

Paramètres du troisième module Texte

Ensuite, ajoutez un module Texte sous le second.

Paramètres du troisième module de texte

Laissez le type de texte à « Paragraph » et ajoutez le contenu de votre corps.

  • Corps : contenu

Ensuite, allez dans l’ onglet Conception et modifiez les paramètres du texte.

  • Text Font : Roboto
  • Font Weight : moyen
  • Text Color : #000000
  • Text Size : 18 px (Desktop et Tablet), 14 px (Phone)
  • Line Height : 180 %

Enfin, faites défiler jusqu’à Espacement et définissez la marge inférieure. Fermez les paramètres du module.

  • Margin (Bottom) : 0px

Paramètres du module Image

Maintenant, ajoutez un module Image à la colonne de droite.

Tout d’abord, supprimez l’image factice en cliquant sur la corbeille ou sur l’icône de réinitialisation au-dessus de l’image.

Découvrez les meilleurs outils pour votre site Web

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Ensuite, faites défiler vers le bas Bakground , sélectionnez l’onglet Image et ajoutez votre image. Laissez tous les paramètres d’image à leurs valeurs par défaut. L’image ne montrera pas grand-chose au début. Nous réglerons cela au fur et à mesure.

Ensuite, sélectionnez l’ onglet Style et faites défiler jusqu’à Spacing.

  • Margin (Desktop) : -10 % (Top), -30 % (Left), 10% (Right)
  • Padding (Top et Bottom) : 300px
  • Margin (Tablet/Phone) : 0 % (Top), 0 % (Left et Right)
  • Padding (Phone) : 150px(Top et Bottom)
Paramètres du module d'images

Exemples d’images façonnées avec Gradient Builder de Divi

Premier exemple – Forme circulaire

Notre premier exemple donne à l’image une forme circulaire avec un trou au centre.

Ouvrez les paramètres du module Image et faites défiler jusqu’à Background . Sélectionnez l’ onglet Background Gradient et définissez 6 arrêts de dégradé :

  • Premier arrêt : 0 %, #f0f3fb
  • Deuxième : 45 %, #f0f3fb
  • Troisième (au-dessus du deuxième) : 45 %, rgba(41,196,169,0)
  • Quatrième : 69 %, rgba(250,255,214,0)
  • Cinquième (au-dessus du quatrième) : 69 %, #f0f3fb
  • Sixième : 100 %, #f0f3fb
  • Type : Circular
  • Position : Center
  • Unit : Percent
  • Place Gradient Above Background Image : YES

Deuxième exemple – Forme linéaire

Voici un aperçu du deuxième exemple de forme d’image. Cet exemple place des lignes diagonales sur l’image.

Ouvrez les paramètres, faites défiler jusqu’à Backgound et sélectionnez l’onglet Background Gradient. Ajoutez quatre arrêts de dégradé :

  • Premier arrêt : 0 %, #f0f3fb
  • Deuxième : 5 %, #f0f3fb
  • Troisième (au-dessus du deuxième) : 5 %, rgba(175,175,175,0)
  • Quatrième : 13 %, rgba(41,196,169,0)
  • Type : Linear
  • Direction : 150 degrés
  • Repeat Gradient : YES
  • Gradient Unit : Percent
  • Place Gradient Above Background Image : YES
générateur de dégradé de Divi

Troisième exemple – Forme elliptique

Voici notre troisième exemple de forme d’image. Celui-ci utilise une forme elliptique.

Ouvrez les paramètres du module Image et faites défiler jusqu’à Background . Sélectionnez l’ onglet Background Gradient et créez quatre arrêts de dégradé :

  • Premier arrêt : 0 %, #f0f3fb
  • Deuxième : 9 %, #f0f3fb
  • Troisième (au-dessus du deuxième) : 9 %, rgba(175,175,175,0)
  • Quatrième : 21 %, rgba(41,196,169,0)
  • Type : Elliptical
  • Gradient Position : Top Left
  • Repeat Gradient : YES
  • Gradient Unit : Percent
  • Place Gradient Above background Image : YES
générateur de dégradé de Divi

Quatrième exemple – Forme Conique

Notre quatrième exemple utilise « Conical » pour créer une forme d’image unique.

Ouvrez les paramètres du module Image, faites défiler jusqu’à Background et sélectionnez l’onglet Background Image. Celui-ci a 5 Gradient Stops :

  • Premier arrêt : 23 %, #f0f3fb
  • Deuxième : 35 %, #f0f3fb
  • Troisième (au-dessus du deuxième) : 35 %, rgba(41,196,169,0)
  • Quatrième : 65 %, rgba(250,255,214,0)
  • Cinquième (au-dessus du quatrième) : 65 %, #f0f3fb
générateur de dégradé de Divi
  • Type : Conical
  • Gradient Direction : 180 degrés
  • Gradient Position : Bottom
  • Unité : Pourcentage
  • Place Gradient Above Background Image : YES

Résultats finaux

Toutes les mises en page se sont bien passées. Les formes d’image se démarquent et les images sont toujours faciles à comprendre. Tous sont responsive, ils ont donc fière allure sur n’importe quel appareil.

Premier exemple – Forme d’image circulaire

Ordinateur de bureau

donner des formes à vos images à l'aide du générateur de dégradé de Divi

Télécharger DIVI Maintenant !!!

Tablette

Téléphone

Deuxième exemple – Forme d’image linéaire

Ordinateur de bureau

donner des formes à vos images à l'aide du générateur de dégradé de Divi

Télécharger DIVI Maintenant !!!

Tablette

Téléphone

Troisième exemple – Forme d’image elliptique

Ordinateur de bureau

donner des formes à vos images à l'aide du générateur de dégradé de Divi

Télécharger DIVI Maintenant !!!

Tablette

Téléphone

Quatrième exemple – Forme d’image conique

Ordinateur de bureau

donner des formes à vos images à l'aide du générateur de dégradé de Divi

Télécharger DIVI Maintenant !!!

Tablette

Téléphone

Conclusion

Ceci est notre regard sur la façon de façonner vos images avec le Gradient Builder de Divi. 

Plus de 11 millions d'outils à télécharger

Envato Elements propose les meilleures ressources pour créer et développer tous les aspects de votre site internet. Vous y trouverez des millions de templates WordPress, des ressources graphiques, audio et bien plus encore. Parfait pour les débutants.

Le Gradient Builder peut créer des formes d’image intéressantes. Jouer avec les arrêts de dégradé, essayer différents types de dégradé et activer la répétition de dégradé sont d’excellents moyens de créer de nouveaux designs. 

Assurez-vous de vérifier vos conceptions sur toutes les tailles d’écran et de faire des ajustements si nécessaire.

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, en consultant 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 :