Utiliser des images transparentes pour créer de superbes chevauchements de colonnes CTA avec Divi

Plus un CTA est visuellement attrayant, plus il y a de chances d'obtenir un meilleur taux de conversion. Il existe de nombreuses façons de concevoir vos CTA, mais dans cet article, nous vous montrerons comment créer de superbes conceptions de colonnes CTA avec des images semi-transparentes et des chevauchements de colonnes. Vous pouvez trouver les images semi-transparentes dans le dossier de téléchargement ci-dessous, mais n'hésitez pas à utiliser d'autres images. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçus

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la disposition des colonnes du CTA

Pour mettre la main sur la disposition gratuite des colonnes CTA, vous devrez d'abord la télécharger en utilisant le 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

Commençons à recréer !

Ajouter une nouvelle section

Fond

Commencez par créer une nouvelle page ou ajouter une nouvelle section régulière à une page existante. Ensuite, allez dans les paramètres de la section et ajoutez un fond dégradé.

• Arrière-plan : Dégradé
• Dégradé de fond de couleur 1 : gris très clair #efefef
• Couleur de dégradé de fond deux : blanc #ffffff
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 52 %
• Position finale : 50 %

Espacement

Passez à l'onglet Conception et ajustez le remplissage dans les paramètres d'espacement.

• Rembourrage supérieur et inférieur
  • Ordinateur de bureau : 0vw
• Rembourrage inférieur
  • Tablette + Téléphone : 70vw

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Ensuite, ajustez la largeur et la largeur maximale de la ligne.

• Largeur : 100 %
• Largeur maximale 100%

Ajouter un module de texte

Ajouter du contenu H2 et texte

Il est temps d'ajouter des modules ! Tout d'abord, ajoutez un module de texte et insérez du contenu H2 et paragraphe de votre choix.

Texte

Passez à l'onglet Conception et stylisez le texte comme suit :

• Police de texte : Open Sans
• Alignement du texte : Centre
• Couleur du texte : vert #5bba1b
• Taille du texte:
  • Ordinateur de bureau : 1.2vw
  • Tablette : 2.8vw
  • Téléphone : 3.6vw
• Espacement des lettres du texte : 0.2vw
• Hauteur de la ligne de texte : 1,8 em

Titre 2 Texte

Après avoir stylisé le texte du paragraphe, stylisez également le texte H2.

• En-tête : H2
• Poids de la police H2 : Doppio One
• Alignement du texte H2 : Centre
• Couleur du texte H2 : gris très foncé #3d3d3d
• Taille du texte H2 :
  • Ordinateur de bureau : 4.4vw
  • Tablette : 5.9vw
  • Téléphone : 6.9vw

Espacement

Et ajoutez un peu de rembourrage supérieur.

• Rembourrage supérieur : 212px

Ajouter un module diviseur

Visibilité

Sous le module de texte, ajoutez un module de séparation et définissez la visibilité sur « Oui ».

• Visibilité : Oui

Ligne

Changez ensuite la couleur du séparateur.

• Couleur de la ligne : gris foncé #545454

Dimensionnement

Maintenant, ajustez la taille du diviseur pour qu'il paraisse plus petit.

• Poids du diviseur : 4px
• Largeur : 9%
• Alignement du module : Centre

Espacement

Ajoutez également une marge supérieure négative.

• Marge supérieure:
  • Bureau : -40px
  • Tablette + Téléphone : -15px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne avec trois colonnes de taille égale. Ce sera la base de la conception de la colonne CTA.

Fond

Avant d'ajouter des modules, ajoutez un dégradé à l'arrière-plan pour les paramètres de ligne.

• Arrière-plan : Dégradé
• Dégradé de couleur d'arrière-plan un : blanc #ffffff
• Dégradé de couleur d'arrière-plan deux : transparent
• Type de dégradé : Radial
• Centre de direction radiale
• Position de départ : 42 %
• Position finale : 50 %

Dimensionnement

Maintenant, ajustez la taille de la ligne.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Accédez ensuite aux paramètres d'espacement et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 22vw
• Rembourrage inférieur : 10vw
• Rembourrage gauche et droit : 10vw

Paramètres de la colonne 1

Fond

Continuez en ouvrant les paramètres de la colonne 1 et ajoutez un fond dégradé.

• Arrière-plan : Dégradé
• Dégradé de fond de couleur un : bleu #2a4eed
• Couleur de dégradé de fond deux : bleu clair#91f5f7
• Type de dégradé : Linéaire
• Direction du dégradé : 38 deg
• Position de départ : 23 %

Frontière

Donnez ensuite à la colonne des coins arrondis dans les paramètres de bordure.

• Coins arrondis : 2vw à tous les coins

Boîte ombre

Ajoutez également une ombre de boîte subtile.

• Ombre de la boîte : deuxième option
• Position horizontale de l'ombre de la boîte : 6px
• Position verticale de l'ombre de la boîte : -10px
• Force de flou d'ombre de boîte : 50px

Débordements

Assurez-vous que les débordements de la colonne sont également visibles.

• Débordement horizontal et vertical : Visible

Paramètres de la colonne 2

Fond

Passez à la deuxième colonne et ajoutez le fond dégradé suivant :

• Arrière-plan : Dégradé
• Couleur de dégradé de fond un : #1ba038
• Couleur de dégradé de fond deux : #c6f727
• Type de dégradé : Linéaire
• Direction du dégradé : 38 deg
• Position de départ : 23 %

Frontière

Ajoutez également un rayon de bordure à la colonne.

• Coins arrondis : 2vw aux quatre coins

Boîte ombre

Avec une ombre de boîte subtile.

• Ombre de la boîte : deuxième option
• Position horizontale de l'ombre de la boîte : 6px
• Position verticale de l'ombre de la boîte : -10px
• Force de flou d'ombre de boîte : 50px

Transformer

Cette colonne est un peu plus haute que les autres. Pour créer cet effet, nous allons ajuster les paramètres de traduction de la transformation pour la colonne 2.

• Transformer Traduire :
  • Bureau : -8vw, axe y
  • Tablette + Téléphone : 30vw, axe y

Débordements

Rendez également visibles les débordements de cette colonne.

• Débordements horizontaux et verticaux : Visibles

Paramètres de la colonne 3

Fond

Passons à la prochaine et dernière colonne ! Ajoutez un fond dégradé.

• Arrière-plan : Dégradé
• Couleur de dégradé de fond un : #f0562c
• Couleur de dégradé de fond deux : #f1a526
• Type de dégradé : Linéaire
• Direction du dégradé : 38 deg
• Position de départ : 23 %

Frontière

Passez à l'onglet Conception et ajoutez un rayon de bordure à chaque coin.

• Coins arrondis : 2vw à tous les coins.

Boîte ombre

Ajoutez également une ombre de boîte.

• Ombre de la boîte : deuxième option
• Position horizontale de l'ombre de la boîte : 6px
• Position verticale de l'ombre de la boîte : -10px
• Force de flou d'ombre de boîte : 50px

Transformer

Sur des écrans plus petits, nous devrons repositionner la colonne à l'aide de valeurs de conversion de transformation personnalisées.

• Transformer Traduire :
  • Tablette + Téléphone : 60vw

Débordements

Enfin, ajustez les paramètres de débordement.

• Débordements horizontaux et verticaux : Visibles

Ajouter des modules d'images

Téléchargez une image semi-transparente découpée

Une fois que vous avez terminé tous les paramètres de colonne, il est temps d'ajouter des modules. Ajoutez un module d'image à la colonne 1 et téléchargez une image semi-transparente de votre choix. Vous pouvez trouver les images que nous avons utilisées dans le dossier zippé que vous avez pu télécharger au début de cet article.

Dimensionnement

Faites le module en pleine largeur.

• Forcer la pleine largeur : Oui

Espacement

Ajoutez ensuite des valeurs de marge et de remplissage personnalisées.

• Marge supérieure:
  • Ordinateur de bureau : -11vw
  • Tablette + Téléphone : -24vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau : 5vw
  • Tablette + Téléphone : 20vw

Échelle de transformation au survol

Nous ajoutons un effet de survol subtil à l'image en utilisant l'option d'échelle de transformation dans les paramètres de transformation.

• Échelle de transformation au survol : 120 % sur les deux axes.

Index Z

Pour nous assurer que l'image apparaît en haut de la colonne, nous allons augmenter la valeur de l'index z dans l'onglet avancé.

• Index Z : 1

Dupliquer et faire glisser des modules d'images

Maintenant, clonez deux fois le module image et placez les doublons dans les deux colonnes restantes. Ce processus est plus facile dans la vue filaire.

• Tout d'abord, dupliquez le module image deux fois
• Ensuite, faites glisser les nouveaux modules d'image vers les colonnes 2 et 3
• Télécharger différentes images

Ajouter des modules de texte

Ajouter du contenu H3

Sous l'image de la colonne 1, ajoutez un module de texte et insérez du contenu H3 de votre choix.

Titre 3 Texte

Passez à l'onglet Conception et stylisez les paramètres de texte H3.

• Texte du titre : H3
• Police H3 : Doppio One
• Poids de la police H3 : gras
• Alignement H3 : Centre
• Couleur du texte H3 : Blanc #ffffff
• Taille du texte H3 :
  • Ordinateur de bureau : 1.8vw
  • Tablette : 5vw
  • Téléphone : 6vw

Dupliquer et faire glisser des modules de texte

Clonez le module de texte deux fois et placez les doublons dans les deux colonnes restantes.

• Tout d'abord, dupliquez les modules de texte deux fois
• Ensuite, faites-les glisser sous les modules d'images dans les colonnes 2 et 3
• Modifier le contenu de chaque nouveau module de texte

Ajouter des modules de texte

Ajouter du contenu

Sous le module de titre, ajoutez un nouveau module de texte. Ajoutez du contenu de paragraphe à la zone de contenu.

Texte

Maintenant, stylisez le texte comme suit.

• Police de texte : Open Sans
• Couleur du texte : Blanc #ffffff
• Taille du texte:
  • Ordinateur de bureau : 0.6vw
  • Tablette : 2vw
  • Téléphone : 2.8vw
• Hauteur de la ligne de texte : 2,2 em

Espacement

Pour centrer le texte, ajustez l'espacement du module comme suit.

• Marge inférieure :
  • Ordinateur de bureau : 5vw
  • Tablette + Téléphone : 10vw
• Rembourrage gauche et droit
  • Ordinateur de bureau : 5vw
  • Tablette + Téléphone : 14vw

Dupliquer et faire glisser des modules de texte

Clonez le module de texte deux fois et faites glisser les doublons dans les deux colonnes restantes.

• Tout d'abord, dupliquez les modules de texte deux fois
• Ensuite, placez les doublons dans les colonnes 2 et 3
• Changer le contenu de chaque doublon

Ajouter des modules de boutons

Ajouter du contenu

Passons au dernier module ! Ajoutez un module de boutons à la colonne 1 avec une copie de votre choix.

Ajouter un lien

Insérez un lien dans les options de lien du module.

Alignement

Maintenant, alignez le module de boutons.

• Alignement : Centre

Styles de boutons

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 : bleu vif #2a4eed
• Couleur d'arrière-plan du bouton : blanc #ffffff
• Rayon de bordure de bouton: 50vw
• Police des boutons : Doppio One
• Poids de la police du bouton : gras
• Couleur de l'icône du bouton : bleu vif #2a4eed

Espacement

Façonnez le bouton et créez un chevauchement inférieur en ajoutant des valeurs de marge et de remplissage personnalisées dans les paramètres d'espacement.

• Marge inférieure :
  • Ordinateur de bureau : -1.5vw
  • Tablette : -4vw
  • Téléphone : -6vw
• Rembourrage supérieur et inférieur :
  • Ordinateur de bureau : 1vw
  • Tablette + Téléphone : 3vw
• Rembourrage gauche et droit
  • Ordinateur de bureau : 4vw
  • Tablette + Téléphone : 10vw

Boîte ombre

Enfin, ajoutez une ombre de boîte subtile au bouton.

• Ombre de la boîte : première option
• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 2px
• Force de flou d'ombre de boîte : 50px

Dupliquer et faire glisser les modules de boutons

Tout comme les modules précédents, clonez deux fois le bouton et placez les doublons dans les deux colonnes restantes de la ligne.

• Cloner deux fois le module de boutons
• Placer les doublons dans les colonnes 2 et 3

Bouton 2 Texte et couleur de l'icône

Modifiez le bouton et la couleur de l'icône du module de boutons dans la colonne 2.

• Couleur du texte du bouton : vert #1ba038
• Couleur de l'icône : #1ba038

Bouton 3 Texte et couleur de l'icône

Faites de même avec le bouton de la dernière colonne et le tour est joué !

• Couleur du texte du bouton : orange #f0562c
• Couleur de l'icône : #f0562c

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.

Bureau

Mobile

C'est un Wrap

Dans cet article, nous vous avons montré comment utiliser des images semi-transparentes pour créer une belle conception de colonne CTA. Nous avons utilisé les paramètres de débordement de la colonne Divi pour que les images et les boutons se chevauchent de manière transparente. Essayez d'utiliser ce design dans votre prochain projet Divi et dites-nous comment cela se passe dans la section commentaires !