Comment créer une option d'e-mail collante dans Divi qui attire l'attention

Les options de position collante de Divi vous permettent de rendre n'importe quel élément de votre page collant. Cela vous permet de corriger des éléments sur la page à certains intervalles lorsque l'utilisateur fait défiler la page afin qu'ils restent visibles plus longtemps. Et pour vous les blogueurs, il est tout à fait logique d'ajouter un e-mail persistant à votre modèle de publication pour une manière subtile, mais efficace, de garder cette forme importante au premier plan.

Dans ce didacticiel, nous allons vous montrer comment ajouter un e-mail persistant à votre modèle de publication de blog Divi qui attire plus d'attention et, espérons-le, attire plus de prospects. Nous vous montrerons même comment ajouter un effet de survol contextuel à l'inscription aux e-mails persistants !

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez GRATUITEMENT le modèle de publication Sticky Email Optin

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le 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 !

Comment télécharger le modèle de publication avec l'option d'e-mail collant sur votre site

Pour télécharger le modèle, accédez au Divi Theme Builder dans le backend de votre site Web WordPress.

Ensuite, dans le coin supérieur droit, vous verrez une icône avec deux flèches. Cliquez sur l'icône.

Accédez à l'onglet d'importation, téléchargez le fichier JSON que vous avez pu télécharger dans cet article et cliquez sur « Importer des modèles Divi Theme Builder ».

Une fois que vous avez téléchargé le fichier, vous remarquerez un nouveau modèle avec une nouvelle zone de corps qui a été attribuée à Tous les messages. Enregistrez les modifications de Divi Theme Builder dès que vous souhaitez que le modèle soit activé.

Passons au tutoriel, voulez-vous ?

Partie 1 : Importez le modèle d'article de blog prédéfini

Pour ce tutoriel, nous allons utiliser le modèle d'article de blog pour le pack de mise en page Business Consultant de Divi que vous pouvez télécharger à partir de cet article de blog.

Une fois le fichier zip téléchargé, vous devrez le décompresser et importer le fichier dans Divi Theme Builder.

Voici comment procéder…

1. accédez à Divi > Générateur de thèmes.
2. Cliquez sur l'icône de portabilité en haut à droite.
3. Sélectionnez l'onglet d'importation dans la fenêtre contextuelle de portabilité.
4. Choisissez le fichier json dans le fichier que vous avez téléchargé.
5. Cliquez sur le bouton Importer.

Partie 2 : Ajout de l'option d'e-mail persistant au modèle

Une fois le fichier JSON importé, cliquez sur l'icône de modification pour modifier la disposition du modèle de corps personnalisé.

Au bas de la mise en page du modèle de publication, vous trouverez la section avec le formulaire d'inscription par e-mail que nous utiliserons pour notre inscription par e-mail persistant.

Pour cet exemple, nous voulons la position collante de l'inscription par e-mail dans une section afin que l'utilisateur ne voie pas l'inscription par e-mail tant qu'il n'a pas fait défiler jusqu'à la section avec l'inscription par e-mail persistante. Cependant, comme l'inscription par e-mail se trouve dans sa propre section, l'inscription par e-mail n'aura pas assez de place pour bouger. Par conséquent, nous devons l'amener dans la section ci-dessus qui contient la section des commentaires afin que l'inscription par e-mail survole cette section avant de s'immobiliser à sa place d'origine.

Ajouter une nouvelle ligne dans la section ci-dessus

Pour ce faire, créez une nouvelle ligne à une colonne directement sous la ligne contenant le module de commentaires.

Ajouter un style de ligne

Ouvrez ensuite les paramètres de la nouvelle ligne et ajoutez une couleur d'arrière-plan comme suit :

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

Sous l'onglet Conception, mettez à jour la taille et l'espacement suivants de la ligne :

• Largeur : 100 %
• Largeur maximale : 100 %
• Marge : 15vw haut
• Remplissage : 0px en haut, 0px en bas

Déplacer l'inscription par e-mail vers une nouvelle ligne

Une fois le style de ligne en place, déplacez l'inscription par e-mail dans la section inférieure dans la nouvelle ligne que vous venez de créer.

Supprimez la section du bas (nous n'en avons plus besoin).

Mettre à jour l'inscription par e-mail avec Sticky Position

Ensuite, ouvrez les paramètres d'inscription par e-mail maintenant dans la nouvelle ligne et mettez à jour les options de position du bâton comme suit :

• Position collante : coller au fond
• Limite supérieure collante : section

Cela entraînera le maintien de l'inscription par e-mail au bas de la fenêtre du navigateur lors du défilement de la section avant de s'arrêter dans sa ligne parente.

Mettre à jour le style d'activation des e-mails

Sous l'onglet Conception, mettez à jour la mise en page de l'inscription par e-mail comme suit :

• Disposition : corps en haut, forme en bas

Mettez ensuite à jour le style suivant :

• Taille du texte du titre : 32 px
• Largeur maximale : 600 px
• Alignement du module : Centre

Définissez ensuite le style d'animation sur aucun.

Résultat

À ce stade, nous pouvons vérifier le résultat en affichant un article dans une autre fenêtre de navigateur.

Ajouter un style de position collante

Lorsque l'opt-in par e-mail est en position collante, nous pouvons ajouter un style spécifique au module qui ne s'appliquera qu'à l'état collant. Cela nous permet d'ajouter différents schémas de couleurs pour compenser le fond blanc pour le faire ressortir un peu plus.

Pour ajouter une couleur d'arrière-plan différente pour l'état collant, ouvrez les paramètres d'inscription par e-mail et sélectionnez l'icône de vignette (icône collante) à côté de l'option d'arrière-plan. Cliquez ensuite sur l'onglet collant et ajoutez la couleur d'arrière-plan suivante :

• Couleur d'arrière-plan (collante) : #282828

Continuez ce même processus pour ajouter un style collant aux options suivantes sous l'onglet Conception :

• Couleur du texte du titre (collant) : #ffffff
• Couleur du corps du texte (collant) : #ffffff
• Largeur maximale (collante): 500px
• Rembourrage (collant) : 18px en haut, 30px en bas, 30px à gauche, 30px à droite

Résultat

Voyons maintenant le résultat sur un post en direct.

Ajouter un effet de survol à l'inscription aux e-mails persistants

Pour ajouter un effet de survol sur l'opt-in des e-mails persistants, ouvrez les paramètres d'opt-in des e-mails et mettez à jour la traduction de la transformation du bâton comme suit :

• Transformer traduire l'axe des Y (collant) : 85 %

Cela réduira l'inscription par e-mail (en dehors de la fenêtre d'affichage) de 85 % de sa propre hauteur, exposant juste assez de l'inscription par e-mail pour que l'utilisateur puisse survoler le titre.

Ajoutez ensuite un état de survol à l'option de transformation afin que la position de transformation de la transformation revienne à sa position d'origine lors du survol :

• Transformer Traduire l'axe Y (survol): 0%

Résultat

Voici le résultat final.

Résultats finaux

Voici les trois versions de notre en-tête collant que nous avons construit.

Dernières pensées

Heureusement, Divi facilite l'ajout d'options de courrier électronique persistant à votre site. Cela libère plus de temps pour peaufiner la conception de votre élément collant pour des façons plus uniques d'afficher votre formulaire. Espérons que cette technique vous servira bien dans les projets de blog à venir.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!