5 conceptions d'inscription par e-mail que vous pouvez créer avec le module d'inscription par e-mail de Divi

Nous aimons tous les nouveaux abonnés à notre liste de diffusion. Et l'un des principaux moyens d'obtenir de nouveaux abonnés est de fournir à vos visiteurs un formulaire d'inscription par e-mail bien conçu. C'est pourquoi dans ce tutoriel, je vais vous montrer comment réaliser cinq designs différents avec le module d'inscription par e-mail Divi pour vous aider à stimuler votre imagination sur ce qui est possible avec ce module puissant et flexible.

Aperçu

Voici un aperçu des cinq conceptions du module d'inscription par e-mail Divi que nous aborderons aujourd'hui.

#1 Shadow Stacks

Commencez à concevoir #1

#2 Opt-in grand et minimal

Commencez à concevoir #2

#3 Maigre opt-in

Commencez à concevoir #3

#4 Réserver Offre Opt-in

Commencez à concevoir #4

#5 Opt-in du cadre découpé

Commencez à concevoir #5

Ce dont vous avez besoin pour commencer

Abonnez-vous à notre chaîne Youtube

Pour ce tutoriel, vous n'aurez besoin que de Divi. Nous allons construire chacun à partir de zéro, donc pas besoin d'une mise en page prédéfinie. Cependant, j'utiliserai quelques images de certains de nos packs de mise en page, mais vous pouvez utiliser les vôtres si vous le souhaitez.

En outre, il est important de savoir que vous ne pourrez pas voir les champs du formulaire d'inscription sur le site en direct tant que vous n'aurez pas attribué un fournisseur/une liste de messagerie à votre module d'inscription par e-mail. Vous pouvez le faire dans vos paramètres d'option de messagerie sous Compte de messagerie.

Passons maintenant à ces conceptions !

#1 Shadow Stacks

Cette conception ajoute deux ombres de boîte au module d'inscription par e-mail Divi pour un effet d'empilement unique qui fait ressortir le formulaire. La première ombre de boîte est ajoutée au module d'inscription par e-mail et la deuxième ombre de boîte est ajoutée à la ligne qui a une taille et une bordure personnalisées pour que cela fonctionne.

Voici comment c'est fait.

Créez d'abord une nouvelle section avec une ligne à une colonne et ajoutez le module d'inscription par e-mail à la ligne.

Ouvrez les paramètres d'inscription par e-mail et mettez à jour les éléments suivants :

Couleur d'arrière-plan : #1a0a38
Disposition : corps en haut, forme en bas
Champs Coins Arrondis : 0px
Orientation du texte : Centre
Poids de la police du titre : léger
Taille du texte du titre : 36px
Couleur du texte du bouton : #ffffff
Couleur d'arrière-plan du bouton : #00ac69
Largeur de la bordure du bouton : 0px
Rayon de la bordure du bouton : 0px
Rembourrage personnalisé : 3vw en haut, 3vw en bas, 5vw à gauche, 5vw à droite

Ajoutons maintenant notre première couche d'ombre de boîte derrière notre module d'inscription par e-mail.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 25px
Position verticale de l'ombre de la boîte : -25 px
Couleur de l'ombre : rgba(26,10,56,0.82)

Ajoutons maintenant un petit extrait de CSS personnalisé afin de supprimer le rembourrage gauche qui est ajouté au formulaire par défaut. Accédez à l'onglet avancé et ajoutez le CSS suivant sous le formulaire d'inscription.

padding-left: 0px !important;

Cela prend en charge les paramètres du module d'inscription par e-mail. Modifions maintenant notre ligne. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Largeur personnalisée : 600px
Rembourrage personnalisé : 25 pixels en haut, 0 pixels en bas, 25 pixels à droite
Largeur de la bordure inférieure : 25px
Couleur de la bordure inférieure : rgba(0,0,0,0)
Largeur de la bordure gauche : 25px
Couleur de la bordure gauche : rgba(0,0,0,0)

Nous pouvons maintenant ajouter l'ombre de la boîte à la ligne.

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 50px
Position verticale de l'ombre de la boîte : -50px
Force de propagation de l'ombre de la boîte: -25px
Couleur de l'ombre : rgba (26,10,56,0,55)

Voyons maintenant la conception finale.

#2 Opt-in grand et minimal

Cette conception d'inscription par e-mail est minimale, propre et grande. Les champs du formulaire s'adaptent à la taille du navigateur afin qu'il soit parfait sur tous les appareils. Et ce n'est pas trop gros qu'il oblige l'utilisateur à faire défiler.

Voici comment procéder.

Créez d'abord une nouvelle section avec une ligne à une colonne et ajoutez le module d'inscription par e-mail à la ligne.

Ouvrez les paramètres d'inscription par e-mail et mettez à jour le contenu pour inclure votre texte de titre et de pied de page.

Mettez ensuite à jour l'arrière-plan avec une couleur ou une image sombre :

Couleur de fond : #121212
Image de fond : Ceci est facultatif. J'en utilise un du Podcast Layout Pack

Avant de passer à l'onglet de conception pour plus de personnalisation, nous devons faire de la place pour les grands éléments de formulaire que nous ajouterons. Pour ce faire, accédez aux paramètres de la ligne et mettez à jour les éléments suivants :

Largeur personnalisée : 100 %

Astuce : L' utilisation d'une largeur personnalisée à 100 % est un excellent moyen de vous assurer que votre conception n'a pas de marge à droite ou à gauche sur mobile. Si vous utilisez l'option « Make Fullwidth », votre largeur maximale sera de 89 %, vous aurez donc toujours des marges sur mobile.

Revenez maintenant dans les paramètres du module d'activation des e-mails et mettez à jour la conception suivante :

Disposition : corps en haut, forme en bas

Couleur d'arrière-plan du champ de formulaire : rgba(0,0,0,0)
Champs Coins Arrondis : 0px
Largeur de la bordure inférieure des champs : 2px
Couleur de la bordure inférieure des champs : #ffffff

Orientation du texte : Centre

Police du titre : Lato
Poids de la police du titre : léger
Style de police du titre : TT
Taille du texte du titre : 4vw
Hauteur de la ligne de titre : 1 em

Couleur du texte du champ : #ffffff
Police de champ : Lato
Poids de la police du champ : léger
Taille du texte du champ : 3,5 vw
Espacement des lettres de champ : 0,1 em
Hauteur de la ligne de champ : 1,3 em

Espacement des lettres du corps : 0.5em

Taille du texte du bouton : 4vw
Rayon de la bordure du bouton : 0px
Espacement des lettres des boutons : 0,1 em
Police des boutons : Lato
Poids de la police : léger
Rembourrage personnalisé : 10vw en haut, 10vw en bas, 10vw à gauche, 10vw à droite

Notez l'utilisation de l'unité de longueur vw pour la taille de la police combinée à l'unité de longueur em pour la hauteur des lignes et l'espacement des lettres. Cela permet au texte et à la conception de s'adapter de manière transparente lors du réglage de votre navigateur.

La dernière étape consiste à inclure quelques extraits de CSS personnalisés pour peaufiner la conception. Accédez à l'onglet Avancé et ajoutez le CSS personnalisé suivant sous Champs de formulaire d'inscription :

font-size: 3.5vw;

Cela permettra à la taille du texte lors de la saisie de correspondre au texte de l'espace réservé dans vos champs de formulaire.

Ajoutons ensuite une marge personnalisée au-dessus du bouton pour lui donner un peu de répit. Ajoutez ce qui suit sous le bouton S'abonner :

margin-top: 3.5vw;

Voyons maintenant la conception finale.

#3 Maigre opt-in

Cette prochaine conception sera certainement une solution populaire pour les entreprises et les blogs qui cherchent à économiser de l'espace vertical sur leurs publications ou leurs pages de destination. Même si le module Email Opt-in de Divi est le meilleur pour les formulaires verticaux plus traditionnels, vous pouvez réellement convertir le formulaire en un formulaire horizontal maigre avec juste un petit extrait de CSS.

Voici comment procéder.

Créez une nouvelle section avec une ligne à une colonne et ajoutez le module d'inscription par e-mail à la ligne.

Ouvrez les paramètres d'inscription par e-mail et mettez à jour le contenu pour inclure un titre mais rien d'autre.

Mettez ensuite à jour le design avec un arrière-plan et une couleur de bouton comme suit :

Couleur de fond : #54677d
Disposition : corps en haut, forme en bas
Orientation du texte : Centre
Couleur d'arrière-plan du bouton : #b0c94f
Largeur de la bordure du bouton : 0px

Il est maintenant temps pour le CSS personnalisé. Étant donné que nous voulons la conception de formulaire maigre uniquement sur le bureau (et non sur mobile), nous ajouterons le CSS à la page (sous les paramètres de la page) en utilisant un ID CSS personnalisé pour cibler le style du formulaire.

Pour ce faire, allez dans l'onglet avancé et donnez au module d'opt-in un identifiant CSS personnalisé.

ID CSS : maigre

Cela sera utilisé pour cibler ce formulaire avec le CSS externe que nous ajouterons à la page.

Ouvrez maintenant les paramètres de la page Divi Builder et ajoutez le CSS suivant sous l'onglet Avancé.

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Étant donné que Divi utilise déjà flex pour styliser le formulaire sur le backend, ce CSS supprime la propriété flex-wrap qui entraîne l'alignement vertical des champs du formulaire. Le résultat est une disposition horizontale des champs de formulaire. L'ajustement de la propriété flex-basis à 23 % définit essentiellement la largeur de chacun des champs du formulaire. Et parce que nous avons ajouté le CSS dans une requête multimédia, la conception ne se produira que sur le bureau avec la mise en page par défaut du formulaire affiché sur le mobile.

Voici la conception finale.

#4 Réserver Offre Opt-in

Cette conception intègre quelques images dans le module d'inscription par e-mail dans le but de promouvoir une offre de livre gratuite pour l'inscription. Pour ce faire, il vous suffit d'ajouter une image à l'aide de l'éditeur wysiwyg intégré pour ajouter une description et du contenu de pied de page. Il est vrai que vous pouvez réaliser cette même conception en combinant le module d'inscription par e-mail avec d'autres modules dans une rangée de deux colonnes, mais j'ai pensé qu'il serait utile de montrer comment tout faire dans le même module.

Voici comment procéder.

Créez une nouvelle section avec une ligne à une colonne et ajoutez le module d'inscription par e-mail à la ligne.

Ouvrez les paramètres d'inscription par e-mail et restez dans l'onglet contenu.

Sous description, raccourcissez le texte par défaut à quelques phrases seulement. Ajoutez ensuite une image de votre médiathèque en cliquant sur le bouton Ajouter un média.

Vous voulez vous assurer que l'image ne dépasse pas environ 200 pixels de large. Pour cet exemple, j'utilise la taille moyenne de l'image.

Sous Pied de page, ajoutez quelques phrases pour le contenu du texte du pied de page, puis cliquez sur le bouton Ajouter un média pour ajouter une image de logo sous le texte (ceci est bien sûr facultatif).

Pour vous assurer que l'image est centrée, définissez l'option d'alignement sur centre lors de l'ajout de l'image à partir de la bibliothèque multimédia.

Vous êtes maintenant prêt à mettre à jour le reste de la conception. Commencez par donner au module une image d'arrière-plan et un dégradé d'arrière-plan au-dessus de l'image pour rendre le texte plus lisible.

Image de fond : [ajouter une image]
Couleur d'arrière-plan du dégradé gauche : rgba(0,0,0,0.5)
Couleur du dégradé de fond à droite : rgba(0,0,0,0.5)
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Ensuite, mettez à jour le reste de la conception comme suit :

Couleur du texte du bouton : #333333
Couleur d'arrière-plan du bouton : #ffcb7a
Largeur de la bordure du bouton : 0px
Espacement des lettres des boutons : 5px
Poids de la police : Ultra gras
Style de police : TT
Largeur : 700px
Alignement du module : centre
Rembourrage personnalisé : 3vw en haut, 3vw en bas, 3vw à gauche, 3vw à droite

Voici la conception finale.

#5 Opt-in du cadre découpé

Cette technique de conception simple est un excellent moyen de donner à votre e-mail opt-in un look unique. L'astuce consiste à utiliser des séparateurs de section qui ont la même couleur que l'arrière-plan de la section. Ensuite, en ajustant la hauteur des séparateurs, vous pouvez superposer le formulaire d'inscription par e-mail afin de découper les bords de manière unique pour un bel effet de cadrage.

Voici comment faire.

Créez une nouvelle section avec une ligne à une colonne et ajoutez le module d'inscription par e-mail à la ligne.

Ouvrez les paramètres d'inscription par e-mail et donnez à votre module un dégradé d'arrière-plan.

Couleur d'arrière-plan du dégradé gauche : #8300e9
Dégradé d'arrière-plan à droite : #06c8ff
Type de dégradé : Radial
Direction radiale : en haut à gauche

Ensuite, mettez à jour le reste de la conception comme suit :

Poids de la police du titre : gras
Taille du texte du titre : 36px
Largeur : 70 % (ordinateur de bureau), 100 % (tablette et smartphone)
Alignement du module : centre
Rembourrage personnalisé : 6vw en haut, 6vw en bas, 6vw à gauche, 6vw à droite
Coins arrondis : 50px en haut à gauche, 0px en haut à droite, 50px en bas à droite, 0px en bas à gauche

Enregistrez vos paramètres.

Mettez ensuite à jour vos paramètres de ligne avec une largeur personnalisée.

Largeur personnalisée : 100 %

Nous sommes maintenant prêts à personnaliser le paramètre de section pour ajouter notre effet de cadre découpé avec ces diviseurs de section.

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

Couleur d'arrière-plan : #222222

Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : #222222 (assurez-vous que cela correspond à la couleur d'arrière-plan de la section)
Hauteur du diviseur supérieur : 12vw (ordinateur de bureau), 150px (tablette et smartphone)
Disposition du diviseur supérieur : au-dessus du contenu de la section

Style de séparateur inférieur : voir capture d'écran
Couleur du séparateur inférieur : #222222 (assurez-vous que cela correspond à la couleur d'arrière-plan de la section)
Hauteur du séparateur inférieur : 12vw (ordinateur de bureau), 150px (tablette et smartphone)
Répétition horizontale du diviseur inférieur : 0.8x
Bas diviseur Flip: vertical et horizontal
Disposition des séparateurs inférieurs : au-dessus du contenu de la section

Voyons maintenant la conception finale.

Consultez l'article sur la création de conceptions de cadres uniques pour en savoir plus sur cette technique de conception.

Dernières pensées

Ces conceptions d'inscription par e-mail ne sont vraiment que la pointe de l'iceberg lorsque vous pensez à toutes les options de style disponibles dans Divi. J'ai volontairement gardé les conceptions assez simples pour vous donner les grandes lignes de ce que vous pouvez faire. N'hésitez pas à explorer vous-même des designs plus raffinés en ajoutant de nouvelles polices, couleurs et effets de survol. Et n'oubliez pas de vous amuser dans le processus.

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

À votre santé!