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
Tablette
Téléphone
Deuxième exemple – Forme d’image linéaire
Bureau
Tablette
Téléphone
Troisième exemple – Forme d’image elliptique
Ordinateur de bureau
Tablette
Téléphone
Quatrième exemple – Forme d’image conique
Ordinateur de bureau
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
Ensuite, allez dans l’onglet Design et modifiez les paramètres d’espacement comme suit :.
- Padding (Top et Bottom) : 10 %
Ajouter une ligne
Ensuite, ajoutez une ligne avec la structure de colonne ci-dessous.
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
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 Texte
Ensuite, ajoutez un module Texte à la colonne de gauche.
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.
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.
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.
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)
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
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
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
- 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
Télécharger DIVI Maintenant !!!
Tablette
Téléphone
Deuxième exemple – Forme d’image linéaire
Ordinateur de bureau
Télécharger DIVI Maintenant !!!
Tablette
Téléphone
Troisième exemple – Forme d’image elliptique
Ordinateur de bureau
Télécharger DIVI Maintenant !!!
Tablette
Téléphone
Quatrième exemple – Forme d’image conique
Ordinateur de bureau
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.
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.
…
