Comment concevoir une section d'abonnement attrayante pour tout type de site Web avec Divi

L'une des principales raisons pour lesquelles les gens créent des sites Web est de trouver une nouvelle façon d'approcher leur public cible. Une fois que vous avez franchi cette première étape et commencé à créer un site Web, vous commencez à vous demander comment exactement vous pourrez entrer en contact avec vos clients potentiels. L'une des choses qui s'est avérée utile pour de nombreux propriétaires de sites Web est la création de listes. Il s'agit de collecter les adresses e-mail des visiteurs, de les transformer en prospects (et éventuellement en clients) grâce au marketing par e-mail.

Et avec la création de listes, vous créez des sections d'abonnement attrayantes sur votre site Web. Vous voulez que votre section d'abonnement soit accrocheuse et plus important encore, vous voulez que votre section d'abonnement se convertisse. Pour ce tutoriel, nous avons créé une superbe section d'abonnement qui attirera indéniablement l'attention de votre visiteur. Nous combinons un design élégant avec des arguments expliquant pourquoi s'inscrire à une liste de diffusion. En plus de cela, nous partagerons également trois palettes de couleurs parmi lesquelles vous pourrez choisir lors de la création du design.

Allons-y !

Abonnez-vous à notre chaîne Youtube

Aperçu

Avant de plonger dans le tutoriel, regardons le résultat sur différentes tailles d'écran.

Palette de couleurs #1

• Couleur n°1 : rgba (79,35,255,0.88)
• Couleur #2 : #e09900
• Couleur #3 : #4f23ff

Palette de couleurs #2

• Couleur n°1 : rgba (255,35,97,0,75)
• Couleur #2 : #e09900
• Couleur #3 : #d80e00

Palette de couleurs #3

• Couleur n°1 : rgba (41,17,147,0,75)
• Couleur #2 : #00ffd8
• Couleur #3 : #291193

Approcher

Choisissez l'une des palettes de couleurs ci-dessus (ou créez la vôtre) et utilisez ces couleurs tout au long du didacticiel. Nous ferons référence à la couleur 1, 2 ou 3 lorsque nous utiliserons une couleur dans nos paramètres. Nous faisons également chevaucher le module d'abonnement sur deux colonnes et nous soulignons les avantages de l'inscription à une liste de diffusion.

Recréer la section d'abonnement

Ajouter une nouvelle section

Diviseur supérieur

Ouvrez la page à laquelle vous souhaitez ajouter votre section d'abonnement et ajoutez une nouvelle section standard. Ouvrez immédiatement les paramètres de votre section et ajoutez le séparateur supérieur suivant :

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #FFFFFF
• Hauteur du diviseur : 200px
• Basculement du diviseur : vertical

Diviseur inférieur

Ajoutez le même type de séparateur au bas de votre section :

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #FFFFFF
• Hauteur du diviseur : 200px
• Basculement du diviseur : vertical

Espacement

Ouvrez ensuite les paramètres d'espacement et supprimez tout le rembourrage par défaut de votre section en ajoutant « 0px » au rembourrage supérieur et inférieur.

Ajouter une nouvelle ligne

Structure des colonnes

Maintenant que nous avons terminé avec tous les paramètres de section, nous pouvons ajouter une nouvelle ligne. Choisissez la structure de colonne suivante pour cela

Fond dégradé

Ouvrez vos paramètres de ligne et continuez en ajoutant l'arrière-plan dégradé suivant :

• Première couleur du dégradé : couleur n° 1
• Deuxième couleur du dégradé : couleur n° 2
• Direction du gradient : 123 degrés
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Continuez en ajoutant une image de fond de votre choix. Cette image d'arrière-plan n'apparaîtra qu'un peu. Choisissez également « Couverture » ​​comme taille de l'image d'arrière-plan.

Couleur de fond de la colonne 2

Ensuite, ajoutez 'rgba(255,255,255,0.87)' comme couleur d'arrière-plan de la colonne 2.

Dimensionnement

Nous allons également réduire l'espace entre les deux colonnes et faire en sorte que la ligne occupe toute la largeur de l'écran en appliquant les paramètres de dimensionnement suivants :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

La dernière chose que vous devrez faire dans les paramètres de ligne est d'ajouter un remplissage personnalisé :

• Rembourrage haut et bas : 0px
• Remplissage supérieur de la colonne 1 : 200 px
• Remplissage inférieur de la colonne 1 : 100px
• Remplissage supérieur de la colonne 2 : 300 pixels (ordinateur de bureau) 50 pixels (tablette et téléphone)
• Remplissage inférieur de la colonne 2 : 100 pixels (tablette et téléphone)
• Remplissage de la colonne 2 à gauche et à droite : 50px

Ajouter le module Blurb n° 1 à la colonne 1

Ajouter un titre de présentation

Commençons maintenant à ajouter nos modules ! Nous allons commencer par la première colonne en ajoutant un module Blurb. Une fois que nous aurons terminé de modifier ce module Blurb, nous réutiliserons également ses paramètres pour les deux autres. Après avoir ajouté un module Blurb, donnez-lui un titre.

Ajouter une icône de présentation

Ajoutez ensuite une icône à votre module Blurb. Nous avons utilisé l'icône suivante pour le premier module :

Paramètres des icônes

Modifiez l'apparence de l'icône en ajoutant les paramètres suivants :

• Couleur de l'icône : #FFFFFF
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 43 px

Paramètres du texte du titre

Nous n'utilisons qu'un titre de présentation. C'est pourquoi nous devrons modifier les paramètres de texte du H4 uniquement :

• Police du titre : Yeseva One
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #FFFFFF
• Espacement des lettres du titre : -1px

Dimensionnement

Nous allons également modifier la largeur de notre module Blurb en fonction des différentes tailles d'écran :

• Largeur du contenu : 150 px
• Largeur : 33 % (ordinateur de bureau), 40 % (tablette), 60 % (téléphone)
• Alignement du module : Centre

Espacement

Enfin, ajoutez également le remplissage personnalisé suivant à votre module Blurb :

• Rembourrage haut et bas : 50px

Cloner le module Blurb deux fois et modifier le module Blurb en vedette

Changer l'icône et le contenu

Vous pouvez maintenant cloner le module Blurb deux fois. Gardez-les tous dans la première colonne. Pour chacun des nouveaux modules Blurb, changez l'icône et le titre pour qu'ils correspondent au message que vous souhaitez envoyer.

Ajouter une couleur d'arrière-plan

Nous allons mettre en évidence le module Blurb du milieu. Pour ce faire, nous allons commencer par lui ajouter une couleur de fond blanc.

Changer la couleur du texte de l'icône et du titre

Nous allons également changer la couleur de l'icône et du titre H4 en « #000000 ».

Ajouter des coins arrondis

Ensuite, nous ajouterons « 5px » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Enfin, nous allons ajouter un peu de profondeur en utilisant la première option d'ombre de boîte.

Ajouter le module de texte n° 1 à la colonne 2

Paramètres de texte

Passons à la deuxième colonne ! Le premier module dont nous aurons besoin est un module de texte. Après avoir ajouté votre contenu, appliquez-lui les paramètres de texte suivants :

• Police du texte : Yeseva One
• Couleur du texte : #000000
• Taille du texte : 54 pixels
• Hauteur de la ligne de texte : 1 em

Ajouter le module de texte n° 2 à la colonne 2

Espacement

Juste en dessous de ce module de texte, nous allons ajouter un autre module de texte pour la description. Après avoir ajouté votre contenu, ajoutez « 20px » dans la marge supérieure.

Ajouter le module d'option de messagerie à la colonne 2

Couleur de l'arrière plan

Le prochain module que nous devrons ajouter est un module Email Optin. Une fois que vous l'avez ajouté, allez-y et changez la couleur d'arrière-plan en « rgba (255,255,255,0). »

Compte email

Ajoutez votre compte de messagerie en choisissant ensuite le fournisseur de services de votre choix.

Des champs

Continuez en ouvrant les paramètres du champ et désactivez les champs Prénom et Nom.

Paramètres de champ

Nous allons également modifier les paramètres du champ. Supprimez les coins arrondis en ajoutant « 0px » à chacun des coins. Ajoutez également la première option d'ombre de boîte.

Paramètres des boutons

Ensuite, modifiez l'apparence de votre bouton :

• Couleur du texte du bouton : #FFFFFF
• Couleur d'arrière-plan du bouton : Couleur n° 3
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Police des boutons : Yeseva One
• Afficher l'icône du bouton : Oui
• Couleur de l'icône du bouton : #FFFFFF
• Emplacement de l'icône du bouton : à gauche
• Afficher uniquement l'icône au survol pour le bouton : non
• Ombre de la boîte : sélectionnez la première option

Espacement

Enfin, faites en sorte que le module d'abonnement chevauche les deux colonnes en utilisant les paramètres d'espacement suivants :

• Marge supérieure : 20 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Marge de gauche : -60% (ordinateur de bureau et tablette), 0px (téléphone)
• Marge droite : 60 % (ordinateur de bureau), 50 % (tablette), 0 px (téléphone)

Ajouter le module de suivi des médias sociaux à la colonne 2

Ajoutez autant de réseaux sociaux que vous le souhaitez

Enfin, nous ajouterons un module de suivi des médias sociaux. Allez-y et ajoutez les réseaux sociaux que vous souhaitez voir apparaître.

Coins arrondis

Une fois que vous avez ajouté tous les réseaux sociaux, ajoutez « 50px » à chacun des coins dans les paramètres de bordure.

Espacement

Nous allons également pousser le module vers le bas en ajoutant « 50px » à la marge supérieure.

Changer la couleur d'arrière-plan de chaque réseau social individuellement

Enfin et surtout, changez la couleur d'arrière-plan de chacun des réseaux sociaux individuellement en « #000000 ».

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.

Dernières pensées

Les sections d'abonnement sont une partie importante de votre site Web. Ils vous aident à créer des listes de diffusion, à activer le marketing par e-mail et à transformer les prospects en visiteurs en un rien de temps. Dans cet article, nous vous avons montré comment créer une superbe section d'abonnement qui correspondra à tout type de site Web. Nous avons combiné l'utilisation d'un design magnifique avec les avantages de l'inscription. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!