Comment créer des popups de coin de contenu verrouillé avec Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment créer des fenêtres contextuelles de coin de contenu verrouillé avec Divi et le Resort Layout Pack. Le concept d'un formulaire d'option de contenu verrouillé est simple. Les gens doivent entrer leur adresse e-mail et dès qu'ils le font, le contenu caché sera révélé. Vous pouvez utiliser ce contenu caché pour partager un code de réduction par exemple. Pour que tout cela se produise, nous allons utiliser le plugin Bloom et ajouter le shortcode du formulaire d'option de contenu verrouillé à un module de texte que nous styliserons comme une fenêtre contextuelle. Le module de texte inclura également une animation avec un délai d'animation pour faire apparaître le module de texte comme s'il s'agissait d'une fenêtre contextuelle.

Allons-y !

Aperçu

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

Bureau

Mobile

Installer le plugin Bloom

Télécharger Bloom

La première chose à faire est de télécharger le plugin Bloom. Si vous êtes déjà membre d'Elegant Themes, vous pouvez trouver le plugin en vous rendant dans l'espace membres. Là, vous pourrez télécharger le fichier zippé. Si vous n'êtes pas encore membre d'Elegant Themes, vous devrez d'abord acheter un abonnement.

Télécharger et installer Bloom

Une fois que vous avez téléchargé Bloom, vous pouvez continuer et le télécharger sur votre site Web WordPress en allant dans Plugins > Ajouter un nouveau et en cliquant sur « Télécharger le plugin » en haut de la page.

Ensuite, téléchargez le fichier compressé et cliquez sur « Installer maintenant ».

N'oubliez pas d'activer le plugin une fois qu'il est également téléchargé.

Configurer le formulaire Bloom Optin

Ajouter un nouveau formulaire de contenu verrouillé

Nous pouvons maintenant commencer à créer le formulaire de contenu verrouillé que nous utiliserons, plus tard dans cet article, dans notre conception Divi ! Accédez à votre tableau de bord WordPress > Bloom > Formulaires optin et créez un nouveau formulaire optin.

Continuez en sélectionnant le type d'option « Contenu verrouillé » et passez aux paramètres de configuration.

Paramètres de configuration

Une fois que vous êtes dans les paramètres de configuration, vous devrez donner un nom à votre nouveau formulaire d'inscription. Vous devrez également sélectionner un fournisseur de messagerie de votre choix et saisir les détails d'authentification.

Paramètres de conception

L'étape suivante consiste à concevoir le formulaire. Plus tard dans la publication, nous allons utiliser le shortcode du formulaire optin dans un module de texte que nous styliserons, nous n'avons donc pas besoin que trop de paramètres soient appliqués au formulaire optin lui-même. Assurez-vous de laisser les zones de titre et de contenu du message d'activation vides. Modifiez également l'orientation de l'image.

• Orientation de l'image : aucune image

Faites défiler la page vers le bas et apportez des modifications supplémentaires au style d'activation et à la configuration du formulaire.

• Couleur d'arrière-plan : #ffffff
• Orientation du formulaire : formulaire en bas

Nous modifions également les paramètres de style du formulaire.

• Orientation des champs de formulaire : champs de formulaire empilés
• Couleur d'arrière-plan du formulaire : #f4f4f4
• Couleur du bouton : #ffffff
• Couleur du texte du bouton : foncé
• Choisissez le style de bord de formulaire : deuxième option

Créer un design avec Divi

Ajouter une nouvelle ligne

Structure des colonnes

On peut désormais passer au Divi Builder ! Allez-y et créez une nouvelle page en utilisant la page d'accueil du Resort Layout Pack. Une fois la mise en page téléchargée, continuez en ajoutant une nouvelle ligne en haut de la deuxième section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et apportez quelques modifications aux paramètres de dimensionnement.

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

Espacement

Accédez ensuite aux paramètres d'espacement et ajoutez « 0px » au rembourrage supérieur et inférieur de la ligne. Cela limitera l'espace occupé par la nouvelle ligne que nous avons ajoutée.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter un module de texte

Ajouter du contenu H3

Le seul module dont nous avons besoin pour créer la fenêtre contextuelle du coin de contenu verrouillé est un module de texte. Ajoutez un titre H3 de votre choix à la zone de contenu.

Ajouter un shortcode de formulaire d'option de contenu verrouillé

Ensuite, retournez au plugin Bloom et copiez le shortcode du formulaire optin que vous avez créé dans la partie précédente de ce tutoriel.

Ajoutez le contenu que vous souhaitez voir apparaître une fois que les utilisateurs ont rempli le formulaire d'inscription. Dans l'exemple ci-dessous, vous pouvez remarquer que nous partageons un code de coupon, mais vous pouvez partager tout type d'informations que vous souhaitez.

Couleur de l'arrière plan

Accédez ensuite aux paramètres d'arrière-plan du module et ajoutez une couleur d'arrière-plan complètement blanche.

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

Paramètres de texte

Passez à l'onglet Conception et modifiez ensuite les paramètres de texte.

• Police de texte : Open Sans
• Couleur du texte : #0f87ff
• Taille du texte : 15 pixels

Paramètres de texte H3

Modifiez également la police utilisée pour votre copie H3.

• Police de la rubrique 3 : affichage Gilda

Espacement

Et pour donner une forme au module, nous allons ajouter des valeurs de marge et de remplissage personnalisées. Nous modifions également toutes ces valeurs pour que le design corresponde à la taille d'écran utilisée par vos visiteurs.

• Marge supérieure : -17vw
• Marge de gauche : 65vw (ordinateur de bureau), 37vw (tablette), 3vw (téléphone)
• Marge de droite : 0px
• Rembourrage supérieur : 5vw (ordinateur de bureau), 11vw (tablette), 13vw (téléphone)
• Rembourrage inférieur : 5vw, 11vw (tablette), 13vw (téléphone)
• Rembourrage gauche : 6vw (ordinateur de bureau), 11vw (tablette), 16vw (téléphone)
• Rembourrage droit : 6vw (ordinateur de bureau), 11vw (tablette), 16vw (téléphone)

Frontière

Continuez en allant dans les paramètres de bordure du module de texte et ajoutez « 500vw » à chacun des coins, à l'exception de celui en bas à droite.

Boîte ombre

Ajoutez une ombre de boîte à côté pour faire apparaître le module de texte.

• Force de flou d'ombre de boîte : 150px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Animation

Enfin, nous ajoutons également une animation qui va de droite à gauche pour créer l'effet popup.

• Répétition de l'animation : une fois
• Direction de l'animation : Gauche
• Durée de l'animation : 500 ms
• Délai d'animation : 1000 ms
• Intensité de l'animation : 16%

Cloner la ligne

Une fois que vous avez terminé de créer la première fenêtre contextuelle de coin de contenu verrouillé, vous pouvez continuer et cloner la ligne entière.

Placez la ligne en double ici :

Supprimer le rembourrage inférieur de la section

Retirez le rembourrage inférieur de la section dans laquelle vous avez placé la rangée.

• Rembourrage inférieur : 0px

Modifier les paramètres d'espacement du module de texte

Ensuite, ouvrez les paramètres du module de texte et modifiez les valeurs de marge personnalisées.

• Marge gauche : 0vw
• Marge droite : 65vw (ordinateur de bureau), 37vw (tablette), 3vw (téléphone)

Modifier les coins arrondis du module de texte

Assurez-vous de modifier également les coins arrondis. Nous utilisons '500vw' pour chacun des coins, à l'exception de celui en bas à gauche.

Modifier les paramètres d'animation du module de texte

Enfin, changez la direction de l'animation vers la droite et le tour est joué !

• Direction de l'animation : à droite

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

Dernières pensées

Dans cet article, nous vous avons montré comment créer des fenêtres contextuelles de coin de contenu verrouillé avec Divi, le plugin Bloom et le Resort Layout Pack. Vous pouvez utiliser cette technique pour convaincre les gens de faire partie de votre liste de diffusion en offrant un code promo qui apparaît une fois qu'ils ont rempli le formulaire. Ce tutoriel fait partie de notre initiative de conception Divi en cours, où nous essayons de mettre quelque chose de plus dans votre boîte à outils de conception chaque semaine. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!