Comment faire preuve de créativité avec l'arrière-plan de votre icône Blurb dans Divi

Les modules Blurb font partie des éléments les plus polyvalents que vous puissiez trouver dans Divi. Dans cet article, nous allons vous montrer comment aller plus loin et faire preuve de créativité avec l'arrière-plan de l'icône de présentation. Nous utiliserons une combinaison de modules de présentation, de modules de texte et de modules d'appel à l'action. Ces conceptions uniques sont parfaites pour les pages de services et les pages de catégories de produits. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement le résultat des trois exemples sur différentes tailles d'écran.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Exemple #3

Bureau

Mobile

Téléchargez les exemples d'arrière-plan de l'icône Blurb GRATUITEMENT

Pour mettre la main sur les exemples d'arrière-plans d'icônes de présentation gratuits, vous devez d'abord les 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 chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! 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éinscrit » ni ne recevrez 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 ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le 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 !

Abonnez-vous à notre chaîne Youtube

Étapes générales

Ajouter une nouvelle section

Fond

Pour recréer ces conceptions d'arrière-plan de présentation créatives, ouvrez une nouvelle page ou ajoutez une nouvelle section à une page existante. Avant d'ajouter une ligne, ajoutez une couleur d'arrière-plan à votre section.

• Couleur d'arrière-plan : #f7f7f7

Espacement

Ajoutez également des rembourrages haut et bas personnalisés à la section.

• Rembourrage haut et bas : 120px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Avant d'ajouter des modules, ajustez la taille de la ligne.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Ensuite, ajustez le rembourrage dans les paramètres d'espacement.

• Rembourrage supérieur : 8vw
• Rembourrage inférieur : 15vw
• Rembourrage gauche et droit : 12vw

Colonne 1

Une fois que vous avez terminé de modifier les paramètres de ligne, apportez quelques modifications à la première colonne.

Fond

Tout d'abord, ajoutez un fond blanc.

• Couleur de fond : Blanc #ffffff

Frontière

Ensuite, ajoutez un rayon de bordure.

• Coins arrondis : 2vw aux quatre coins

Boîte ombre

Enfin, ajoutez une boîte-ombre.

• Box-Shadow : Première option
• Force du flou de l'ombre de la boîte : 47 px

Cloner la ligne deux fois

Il reste une dernière étape avant de commencer à ajouter des modules. Clonez la ligne deux fois.

Recréer l'exemple #1

Ajouter le module Blurb à la colonne 1

Effacer le contenu par défaut

Maintenant que nous avons configuré nos lignes et colonnes, nous pouvons commencer à ajouter des modules à la colonne 1 de la première ligne. Tout d'abord, ajoutez un module de présentation et effacez tout le titre et le corps du texte par défaut.

Choisissez l'icône

Ensuite, choisissez une icône au lieu d'une image.

• Icône : Lien

Fond

Ajoutez une couleur d'arrière-plan noire au module de présentation.

• Couleur de fond : Noir # 000000

Paramètres des icônes

Ensuite, modifiez les paramètres de l'icône.

• Couleur de l'icône : jaune #edf000
• Placement de l'icône : en haut
• Taille de la police de l'icône :
  • Ordinateur de bureau : 3vw
  • Tablette : 11vw
  • Téléphone : 13vw

Dimensionnement

Continuez en ajustant le dimensionnement du module.

• Largeur du contenu : 100 %
• Largeur:
  • Ordinateur de bureau : 11vw
  • Tablette : 19vw
  • Téléphone : 22vw

Espacement

Ajoutez également des valeurs d'espacement.

• Marge supérieure : -5vw
• Marge inférieure : 0vw
• Marge gauche : -1vw
• Rembourrage supérieur et rembourrage inférieur : 4vw

Frontière

Pour donner à l'icône une forme unique, ajoutez un rayon de bordure à chacun des coins, à l'exception de celui en bas à gauche.

• Coins arrondis : 50vw, 0vw dans le coin inférieur gauche.

Boîte ombre

Enfin, ajoutez une ombre de boîte.

• Box-Shadow : Première option
• Force du flou de boîte-ombre : 50px

CSS personnalisé

L'icône a, par défaut, une marge inférieure qui lui est attachée. Pour nous en débarrasser, nous allons ajouter une seule ligne de code CSS à la boîte CSS personnalisée de l'image de présentation.

• Image Blurb : marge inférieure : 0px ;

margin-bottom: 0px;

Ajouter un module de texte à la colonne 1

Ajouter du contenu H3

Sous l'icône, ajoutez un module de texte avec du contenu H3 de votre choix.

Fond

Accédez aux paramètres d'arrière-plan et ajoutez un arrière-plan dégradé.

• Arrière-plan : Dégradé
• Couleur 1 : Transparent
• Couleur Deux : Jaune #edf000
• Direction du gradient : 180 degrés
• Position de début et de fin : 74 %

Texte du titre

Ensuite, stylisez le texte H3.

• Titre du texte Niveau d'en-tête : H3
• Police H3 : Josefin Sans
• Alignement H3 : Centre
• Couleur de la police H3 : noir #oooooo
• Taille du texte H3 :
  • Ordinateur de bureau : 2,4 vw
  • Tablette : 3.4vw
  • Téléphone : 4.8vw
• Espacement des lettres H3 : 0em

Dimensionnement

Dans les paramètres de dimensionnement, ajustez la largeur pour la tablette et le téléphone.

• Largeur:
  • Tablette : 50 %
  • Téléphone : 60 %

Espacement

Continuez en allant dans les paramètres d'espacement et en ajustant les valeurs de marge.

• Marge gauche et droite : 5vw
• Rembourrage supérieur : 1vw

Transformer

Enfin, faites pivoter le module avec les options de transformation.

• Transformer Traduire :
  • axe x : -20vw
  • axe y : 13vw
• Transformer la rotation : première option, 280 degrés

Ajouter un module d'appel à l'action à la colonne 1

Supprimer le contenu du titre par défaut, ajouter un bouton et du contenu textuel

Le prochain et dernier module dont nous avons besoin dans la colonne 1 est un module d'appel à l'action. Ajoutez du contenu de votre choix et supprimez la copie du titre.

Ajouter un lien

Ajoutez un lien pertinent au bouton.

Fond

Assurez-vous que l'arrière-plan n'a pas de couleur.

Le corps du texte

Ensuite, accédez à l'onglet Conception et modifiez les paramètres du corps du texte.

• Police du corps : texte cramoisi
• Alignement du corps du texte : à gauche
• Couleur du corps du texte : gris foncé #666666
• Taille du corps du texte :
  • Ordinateur de bureau : 1.2vw
  • Tablette : 2.6vw
  • Téléphone : 3.1vw
• Hauteur de la ligne du corps : 1,8 em

Bouton

Modifiez également les styles des boutons.

• Taille du texte du bouton :
  • Ordinateur de bureau : 1vw
  • Tablette : 2vw
  • Téléphone : 3vw
• Couleur du texte du bouton : gris très foncé #3f3f3f
• Couleur de la bordure du bouton : gris très foncé #3f3f3f
• Police des boutons : Josefin Sans
• Marge du bouton : 3vw
• Rembourrage des boutons en haut et en bas : 1vw
• Rembourrage des boutons gauche et droit : 3vw

Espacement

Complétez les paramètres du module en ajoutant des rembourrages à gauche et à droite.

• Rembourrage gauche et droit : 7vw

Supprimer la colonne deux et cloner la colonne 1

Ajuster les paramètres dans la colonne 2

Maintenant, revenez aux paramètres de ligne et supprimez la deuxième colonne. Immédiatement après, clonez la première colonne. Dans les prochaines étapes, nous ajusterons quelques paramètres dans la colonne dupliquée.

Module de présentation

Commencez par changer la couleur de l'icône du module de présentation.

• Couleur de l'icône : Aqua #00ffd4

Module de texte

Modifiez ensuite l'arrière-plan dégradé et copiez le module de texte.

• Couleur de fond : Aqua #00ffd4
• Modifier le contenu

Recréer l'exemple #2

Ajouter le module Blurb à la colonne 1

Supprimer le contenu par défaut

Passons au deuxième exemple ! Ajoutez un module de présentation à la colonne 1 et supprimez tout le contenu par défaut.

Choisissez l'icône

Ensuite, choisissez une icône.

Fond

Maintenant, ajoutez une couleur de fond jaune.

• Couleur de fond : Jaune #edf000

Icône

Continuez en modifiant les paramètres de l'icône dans l'onglet Conception.

• Couleur de l'icône : blanc #ffffff
• Placement de l'icône : en haut
• Taille de la police de l'icône :
  • Ordinateur de bureau : 3vw
  • Tablette : 11vw
  • Téléphone : 12vw

Dimensionnement

Une fois la couleur et l'arrière-plan stylisés, ajustez la taille du module.

• Largeur du contenu : 100 %

Espacement

Modifiez également les paramètres d'espacement.

• Marge inférieure : 0vw
• Marge gauche et droite : 3vw
• Rembourrage supérieur et inférieur : 2vw

Frontière

Ajoutez ensuite un rayon de bordure à chaque coin.

• Coins arrondis : 2vw aux quatre coins

Boîte ombre

Complétez la conception du module en ajoutant une subtile ombre de boîte.

• Box-Shadow : Première option

Supprimer l'ombre de la boîte et la couleur d'arrière-plan de la colonne 1

Ouvrez ensuite les paramètres de la colonne 1 et supprimez la couleur d'arrière-plan et l'ombre de la boîte.

CSS personnalisé

Supprimez la marge inférieure par défaut appliquée à l'icône de présentation en ajoutant une seule ligne de code CSS à l'onglet avancé.

• Image Blurb : marge inférieure : 0px ;

margin-bottom: 0px;

Ajouter un module d'appel à l'action à la colonne 1

Ajouter un contenu de titre, un contenu de corps et un contenu de bouton

Sous le module de présentation, ajoutez un module d'appel à l'action et insérez le contenu de votre choix.

Ajouter un lien

Ajoutez un lien au bouton suivant.

Fond

Continuez en ajoutant un fond blanc.

• Couleur de fond : Blanc #ffffff

Texte du titre

Dans l'onglet Conception, stylisez le texte du titre H3.

• Titre Titre Niveau : H3
• Police H3 : Josefin Sans
• Couleur de la police H3 : gris très foncé #3f3f3f
• Taille H3 :
  • Ordinateur de bureau : 2vw
  • Tablette : 4vw
  • Téléphone : 6vw
• Hauteur de la ligne H3 : 2,3 em

Le corps du texte

Ensuite, stylisez le corps du texte.

• Police du corps : texte cramoisi
• Alignement du corps du texte : à gauche
• Couleur du corps du texte : gris foncé #666666
• Taille du corps du texte :
  • Ordinateur de bureau : 1.1vw
  • Tablette : 2.2vw
  • Téléphone : 3.1vw
• Hauteur de la ligne du corps : 1,8 em

Bouton

Passez aux paramètres du bouton et stylisez le bouton comme suit :

• Taille du texte du bouton :
  • Ordinateur de bureau : 1vw
  • Tablette : 2vw
  • Téléphone : 3vw
• Couleur du texte du bouton : gris très foncé #3f3f3f
• Police des boutons : Josefin Sans
• Largeur de la bordure du bouton : 2 x
• Couleur de la bordure du bouton : gris très foncé #3f3f3f
• Bouton Haut et Bas Marge : 3vw
• Rembourrage des boutons en haut et en bas : 1vw
• Rembourrage des boutons gauche et droit : 3vw

Espacement

Maintenant, ajustez l'espacement.

• Marge inférieure : -1vw
• Rembourrage supérieur : 6vw
• Rembourrage gauche et droit : 7vw

Frontière

Ensuite, arrondissez les coins dans les paramètres de bordure.

• Coins arrondis : 2vw

Boîte ombre

Enfin, ajoutez une ombre de boîte.

• Box-Shadow : Première option
• Force du flou de boîte-ombre : 50px

Supprimer la colonne deux et cloner la colonne 1

Ajuster les paramètres dans la colonne 2

Semblable à l'exemple précédent, accédez aux paramètres de ligne et supprimez la deuxième colonne. Dupliquez la première colonne et ajustez quelques paramètres.

Module de présentation

Changez l'arrière-plan du module de présentation du jaune à l'aqua.

• Couleur de l'icône d'arrière-plan : Aqua #00ffd4

Module d'appel à l'action

Modifiez également le contenu et le lien du module d'appel à l'action.

• Modifier le contenu du titre
• Modifier le lien

Recréer l'exemple #3

Ajouter le module Blurb à la colonne 1

Supprimer le contenu par défaut

Passons au prochain et dernier exemple ! Ajoutez un module de présentation à la colonne 1 et effacez le contenu par défaut.

Choisissez l'icône

Choisissez un icône.

Fond

Ajoutez un fond jaune vif au module.

• Couleur de fond : Jaune #f7f426

Icône

Rendez l'icône noire et ajustez son emplacement

• Couleur de l'icône : noir #000000
• Placement de l'icône : à gauche
• Taille de la police de l'icône :
  • Ordinateur de bureau : 3vw
  • Tablette + Téléphone : 8vw

Dimensionnement

Continuez en modifiant la largeur et la hauteur du module.

• Largeur du contenu : 100 %
• Hauteur: 23vw

Espacement

De plus, ajustez les paramètres d'espacement.

• Marge gauche : 3vw
• Marge droite : 25vw
• Rembourrage supérieur : 2vw
• Rembourrage gauche : 1vw

Frontière

Ajoutez également un rayon de bordure.

• Coins arrondis : 2vw à tous les coins

Boîte ombre

Ensuite, ajoutez une ombre de boîte.

• Box-Shadow : Première option

Transformer

Enfin, repositionnez le module à l'aide des valeurs de conversion de transformation personnalisées.

• axe x : -6vw
• axe y : 1vw

Supprimer la couleur d'arrière-plan et l'ombre de la boîte de la colonne 1

Accédez aux paramètres de la colonne 1 et supprimez la couleur d'arrière-plan et l'ombre de la boîte.

Ajouter un module d'appel à l'action à la colonne 1

Ajouter un titre, un corps et du contenu de bouton

Sous le module de présentation, ajoutez un module d'appel à l'action. Ajoutez du contenu de votre choix.

Ajouter un lien

Ensuite, ajoutez un lien au bouton.

Fond

Pour styliser le module d'appel à l'action, commencez par ajouter une couleur d'arrière-plan noire.

• Couleur de fond : Noir #oooooo

Texte du titre

Ajustez ensuite les paramètres de texte H3.

• Titre Titre Niveau : H3
• Police H3 : Josefin Sans
• Couleur de la police H3 : jaune vif #f7f426
• Taille de la police H3 :
  • Ordinateur de bureau : 2vw
  • Tablette : 4vw
  • Téléphone : 6vw
• Hauteur de la ligne H3 : 2,3 em

Le corps du texte

Modifiez également les paramètres du corps du texte.

• Police du corps : texte cramoisi
• Alignement du corps du texte : à gauche
• Couleur du corps du texte : blanc #000000
• Taille du corps du texte :
  • Ordinateur de bureau : 1.2vw
  • Tablette : 2.2vw
  • Téléphone : 3.1vw
• Hauteur de la ligne du corps : 1,8 em

Bouton

Ensuite, stylisez le bouton comme suit.

• Taille du texte du bouton :
  • Ordinateur de bureau : 1vw
  • Tablette : 2vw
  • Téléphone : 3vw
• Couleur du texte du bouton : Aqua #00ffd4
• Couleur de la bordure du bouton : Aqua #00ffd4
• Police des boutons : Josefin Sans
• Marge supérieure et inférieure des boutons : 3vw
• Rembourrage des boutons en haut et en bas : 1vw
• Rembourrage des boutons gauche et droit : 3vw

Dimensionnement

Passez aux paramètres de dimensionnement et apportez quelques modifications.

• Largeur: 90%
• Alignement du module : Centre

Espacement

Modifiez également les paramètres d'espacement.

• Marge supérieure : -9vw
• Rembourrage supérieur : 5vw
• Rembourrage gauche et droit : 7vw

Frontière

Ouvrez ensuite les paramètres de bordure et ajoutez un rayon de bordure à chacun des coins.

• Coins arrondis : 2vw

Boîte ombre

Nous utilisons également une ombre de boîte subtile.

• Box Shadow : première option

Transformer Traduire

Enfin, repositionnez le module d'appel à l'action en modifiant les paramètres de traduction de transformation.

• axe y : -18vw

Supprimer la colonne deux et cloner la colonne 1

Ajuster les paramètres dans la colonne 2

Maintenant que la première colonne est prête, nous allons supprimer la seconde et dupliquer la première. Ensuite, nous ajusterons certains détails du contenu et des couleurs.

Module de présentation

Dans les paramètres du module de présentation, changez l'arrière-plan du jaune à l'aqua.

• Couleur de l'icône d'arrière-plan : Aqua #00ffd4

Module d'appel à l'action

Dans les paramètres du module d'appel à l'action, modifiez le contenu du titre, la couleur du titre et la couleur du bouton. N'oubliez pas de modifier également le lien du bouton et le tour est joué !

• Couleur du texte du titre : Aqua #00ffd4
• Teneur
• Couleur du bouton : #00ffd4

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Exemple #3

Bureau

Mobile

Conclusion

Comme vous l'avez vu dans cet article, les arrière-plans d'icônes de présentation peuvent rendre vos conceptions de présentation beaucoup plus intéressantes. En utilisant des modules de présentation associés à un appel à l'action et à des modules de texte, il existe de nombreuses possibilités créatives. Ces styles de conceptions sont parfaits pour les vitrines de services ou les sections de produits. Qu'est-ce que tu penses? Dites le nous dans les commentaires.