Comment créer un CTA unique avec les options de motif d'arrière-plan et de masque de Divi

Le nouveau motif d'arrière-plan et les options de masque de Divi facilitent la création de sections d'appel à l'action (CTA) accrocheuses et uniques sur votre site Web. Vous pouvez combiner des images, des dégradés, des motifs et des masques avec de nombreuses options de personnalisation pour créer des arrière-plans uniques qui attireront l'attention de votre visiteur.

Dans ce tutoriel, nous allons vous montrer comment créer une section CTA unique avec les nouvelles options de motif d'arrière-plan et de masque de Divi.

Commençons!

Aperçu

Voici un aperçu de la section CTA que nous allons concevoir dans ce tutoriel.

Ce dont vous avez besoin pour commencer

Avant de commencer, installez et activez le thème Divi et assurez-vous d'avoir la dernière version de Divi sur votre site Web.

Allons-y.

Comment créer un CTA unique avec les options de motif d'arrière-plan et de masque de Divi

Créer une nouvelle page avec une mise en page prédéfinie

Pour notre tutoriel, nous utiliserons une mise en page prédéfinie de la bibliothèque Divi. Pour cette conception, nous utiliserons la page de destination Ice Cream Shop du pack de mise en page Ice Cream Shop.

Créez une nouvelle page, ajoutez un titre, puis sélectionnez l'option Utiliser Divi Builder.

Nous utiliserons une mise en page prédéfinie de la bibliothèque Divi pour cet exemple, alors sélectionnez Parcourir les mises en page.

Recherchez et sélectionnez la mise en page de la page de destination du magasin de crème glacée.

Sélectionnez Utiliser cette mise en page pour ajouter la mise en page à votre page.

Nous sommes maintenant prêts à construire notre conception.

Modification de la disposition du motif d'arrière-plan et du masque

Nous modifierons la section CTA de la saveur du mois à partir de cette mise en page. Apportons quelques modifications à notre mise en page pour le motif d'arrière-plan et la conception du masque.

Paramètres de ligne

Ouvrez Paramètres de ligne, puis sélectionnez Conception.

Sous Dimensionnement, égalisez les hauteurs de colonne.

• Égaliser les hauteurs de colonne : Oui

Sous Espacement, supprimez le rembourrage supérieur pour amener le cône en haut de la section.

• Rembourrage supérieur : 0px

Paramètres de la colonne 1

Sous l'onglet Contenu des paramètres de ligne, sélectionnez les paramètres de la colonne 1. Sous Arrière-plan, supprimez l'arrière-plan orange.

Paramètres de la colonne 2

Maintenant, sélectionnez les paramètres de la colonne 2. La conception originale a un espacement dont nous n'avons pas besoin, alors débarrassons-nous-en. Sous Conception, accédez à Espacement et supprimez le rembourrage supérieur.

Sélectionnez ensuite Avancé et ajoutez le CSS personnalisé suivant à l'élément principal afin que notre texte "saveur du mois" soit centré verticalement.

margin:auto;

Paramètres de section

Ouvrez les paramètres de la section. Sous Conception, sélectionnez Rembourrage. Ajustez le rembourrage de la section de sorte que le cône supérieur s'aligne tout en haut de la page.

• Rembourrage : 0px

Ajout d'un motif d'arrière-plan et d'un masque à la section CTA

Maintenant que notre mise en page a été modifiée, nous pouvons ajouter notre motif de fond et notre masque. Il existe une infinité d'options pour les motifs d'arrière-plan et les masques avec les nouvelles options de Divi, ce qui signifie que vous pouvez créer des designs uniques pour votre section CTA en quelques clics. Suivez-nous pour apprendre à concevoir un arrière-plan accrocheur avec ces paramètres.

Paramètres de couleur d'arrière-plan, de motif et de masque

Accédez aux paramètres d'arrière-plan de la section.

Sous l'onglet couleur, ajoutez un fond orange

• Couleur : #FFA256

Sous l'onglet Motif, définissez la forme et la couleur du motif.

• Forme: Confettis
• Couleur : #FF7D14

Ajoutons maintenant le masque. Sélectionnez l'onglet masque, puis ajoutez les paramètres comme suit :

• Forme : Blob d'angle
• Couleur du masque : #FFFFFF
• Transformation de masque : horizontale
• Rapport d'aspect du masque : Paysage
• Taille du masque : couverture

Ajustements de conception

Maintenant que notre arrière-plan est en place, apportons quelques derniers ajustements à la conception.

Ouvrez les paramètres du bouton "Acheter" et modifiez l'alignement sous l'onglet Conception.

• Alignement des boutons : à gauche

Modifiez la couleur d'arrière-plan de l'état de survol du bouton "Acheter" afin qu'il se détache sur l'arrière-plan orange.

• Arrière-plan du bouton au survol : #FF7D14

Nous allons également ajuster la disposition des rangées pour ajouter un peu plus d'espace entre le fond orange et la section "Saveur du mois" sur la droite. Modifiez la disposition de 1:1 à 3:2.

Et maintenant, la conception du bureau est terminée et vous avez appris à créer une section CTA unique avec le motif d'arrière-plan et les options de masque de Divi !

Rendre la section CTA responsive

Lorsque notre section CTA est affichée sur un téléphone ou une tablette, le contenu de la colonne 2 est empilé sous la colonne 1. Cela peut entraîner des problèmes de lisibilité avec notre conception. Faisons quelques ajustements pour optimiser notre contenu et notre conception pour les écrans plus petits en utilisant les paramètres réactifs intégrés de Divi.

Puisque nous voulons que le texte vienne avant les boutons, copiez le texte "Highlight Flavor of the Month" dans le module de texte "July Orange Chocolate". Assurez-vous de n'ajouter ce texte qu'aux versions pour téléphone et tablette.

• Remplacez le texte "Orange Chocolate" par H3.

Ensuite, nous apporterons quelques modifications au texte afin qu'il ressorte sur ce fond. Accédez à l'onglet Conception et apportez les modifications suivantes :

• Couleur du texte H2 (téléphone et tablette) : #000000
• Taille du texte H2 (téléphone et tablette): 30px
• Couleur du texte H3 (téléphone et tablette) : #000000
• Couleur du texte H4 (téléphone et tablette) : #000000

Allez maintenant dans les paramètres du module de texte original "Saveur du mois" et modifiez la visibilité afin qu'il ne soit visible que sur les appareils de bureau. Cela masquera le module de texte d'origine sur les appareils plus petits. Le texte Saveur du mois apparaîtra au-dessus du bouton, avec l'autre texte sur la page.

• Désactiver sur : téléphone et tablette

Ensuite, ouvrez les paramètres de la ligne puis ouvrez les paramètres de la colonne 1. Retirez le rembourrage droit et gauche.

• Rembourrage droit : 0px
• Rembourrage gauche : 0px

Accédez aux paramètres de la section, puis à l'arrière-plan, puis modifiez les paramètres du masque

• Masque de transformation : Inverser
• Rapport d'aspect du masque : Portrait

Et maintenant, vous avez créé une section CTA entièrement réactive avec un arrière-plan unique grâce aux options Motif d'arrière-plan et Masque de Divi.

Résultat final

Jetons un coup d'œil au résultat final.

Dernières pensées

Concevoir une section d'appel à l'action unique et accrocheuse est très facile, grâce aux puissantes options de motif d'arrière-plan et de masque de Divi. Libérez votre créativité en expérimentant différentes couleurs, motifs, masques et combinaisons de paramètres. Il est facile à concevoir et vous pouvez ajuster vos paramètres jusqu'à ce que vous trouviez le look parfait en quelques clics. Plus important encore, il est intégré directement dans Divi ! Plus besoin de concevoir des graphiques d'arrière-plan dans un autre programme. Vous pouvez appliquer les paramètres d'arrière-plan à d'autres sections, lignes et modules pour des conceptions encore plus uniques. Si vous souhaitez en savoir plus sur les fonctionnalités de motif d'arrière-plan et de masque de Divi, consultez notre didacticiel pour une section héros avec des masques et des motifs d'arrière-plan et apprenez à combiner le générateur de dégradés de Divi avec des masques et des motifs d'arrière-plan.

Comment avez-vous utilisé les options de motif de fond et de masque de Divi sur votre site Web ? Faites-nous savoir ce que vous avez créé dans les commentaires ci-dessous !