Comment créer une fenêtre contextuelle de coin de formulaire de contact fixe avec les options de dimensionnement de 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 ajouter une fenêtre contextuelle de coin de formulaire de contact fixe à votre page en utilisant les options de dimensionnement de Divi. Cette approche vous aidera à mettre en place un formulaire de contact qui suit les visiteurs tout au long de leur séjour sur votre site web, sans avoir besoin d'un plugin supplémentaire !

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

1. Téléchargez la page de destination du pack de mise en page du chiropraticien

Ajouter une nouvelle page

Commencez par créer une nouvelle page. Une fois que vous avez nommé la page et l'avez publiée, passez à Visual Builder.

Télécharger la page de destination du pack de mise en page du chiropraticien

Téléchargez ensuite la page de destination du pack de mise en page du chiropraticien. Bien que nous utilisions cette mise en page spécifique, vous pouvez faire fonctionner la technique sur n'importe quelle page sur laquelle vous travaillez.

2. Commençons à recréer !

Ajouter une nouvelle section au bas de la page

Nous allons consacrer une toute nouvelle section au formulaire de contact fixe pop-up au clic. Ajoutez cette section au bas de votre page.

Couleur de l'arrière plan

Ouvrez les paramètres de la section et utilisez une couleur de fond entièrement transparente. Plus tard dans cet article, nous corrigerons toute la section. L'utilisation d'une couleur d'arrière-plan transparente garantira que tout ce qui apparaît sous le conteneur de section est visible.

• Couleur d'arrière-plan : rgba(255,255,255,0)

Dimensionnement

Passez à l'onglet Conception et modifiez la largeur de la section sur différentes tailles d'écran.

• Largeur : 37 % (ordinateur de bureau), 95 % (tablette), 100 % (téléphone)
• Alignement de la section : à droite

Espacement

Supprimez ensuite le rembourrage supérieur par défaut.

• Rembourrage supérieur : 0px

Classe CSS

Nous devrons également donner à notre nouvelle section une classe CSS personnalisée. Plus tard dans l'article, nous utiliserons cette classe CSS pour ajouter du code JQuery et CSS.

• Classe CSS : section ouverte

Indice Z par défaut

Pour nous assurer que la section apparaît au-dessus de tout le contenu de la page, nous allons augmenter l'index z de la section dans les paramètres de visibilité.

• Indice Z : 99

Hover Z Index

Ajoutez également la même valeur d'index z au survol.

• Indice Z : 99

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Ajouter un module de présentation

Laisser les boîtes de contenu vides

Le premier et le seul module dont nous avons besoin dans cette rangée est un module Blurb. Assurez-vous de laisser les zones de titre et de contenu vides.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Couleur de l'arrière plan

Changez également la couleur d'arrière-plan du texte de présentation.

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

Paramètres des icônes

Passez à l'onglet Conception et appliquez les paramètres d'icône suivants :

• Couleur de l'icône : #ff5f24
• 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 : 46 px (ordinateur de bureau), 30 px (tablette), 25 px (téléphone)

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement sur différentes tailles d'écran.

• Largeur : 140 px (ordinateur de bureau), 105 px (tablette), 80 px (téléphone)
• Alignement du module : à droite

Espacement

Nous ajouterons également des valeurs de remplissage haut et bas personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 50 pixels (ordinateur de bureau), 35 pixels (tablette), 25 pixels (téléphone)
• Rembourrage inférieur : 20 pixels (ordinateur de bureau), 10 pixels (tablette), 0 pixels (téléphone)

Frontière

Pour créer une forme circulaire, nous devrons ajouter une valeur élevée à chacun des coins dans les paramètres de bordure. Nous utilisons '500px'.

Boîte ombre

Nous ajouterons également une ombre de boîte subtile pour permettre à la forme circulaire d'apparaître.

• Force du flou d'ombre de la boîte: 80px

Animation

Ouvrez ensuite les paramètres d'animation et supprimez l'animation de l'icône.

• Animation d'icône : aucune animation

Classe CSS

Enfin, ajoutez une classe CSS au module Blurb. Plus tard dans cet article, nous utiliserons cette classe CSS pour faire fonctionner la fonction de clic.

• Classe CSS : contact-ouvert

Ajouter la ligne n° 2

Structure des colonnes

Passons au deuxième rang ! Utilisez la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan blanche.

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

Frontière

Ajoutez ensuite un rayon de bordure « 39px » à chacun des coins.

Boîte ombre

Et complétez les paramètres de la ligne en ajoutant une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px

Ajouter un formulaire de contact

Éléments

Le seul module dont nous avons besoin dans cette rangée est un module de formulaire de contact. Une fois que vous avez ajouté le module, désactivez le captcha dans les paramètres des éléments.

• Afficher le Captcha : Non

Des champs

Passez à l'onglet Conception et modifiez la couleur d'arrière-plan des champs dans les paramètres des champs.

• Couleur d'arrière-plan des champs : rgba(0,126,255,0.13)

Bouton

Continuez en stylisant le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 16px
• Couleur du texte du bouton : #FFFFFF
• Couleur d'arrière-plan du bouton : #ff5f24
• Largeur de la bordure du bouton : 2px
• Couleur de la bordure du bouton : rgba(0,0,0,0)
• Rayon de la bordure du bouton : 0px
• Police des boutons : Karla
• Poids de la police du bouton : gras
• Rembourrage supérieur des boutons : 14 px
• Rembourrage inférieur des boutons : 14 px
• Remplissage du bouton gauche : 20 px
• Remplissage du bouton droit : 20px

Espacement

Et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 30px
• Rembourrage inférieur : 30px
• Rembourrage gauche : 40 px
• Rembourrage droit : 40 px

Ajouter un module de code

Insérer le code JQuery

Une fois que vous avez terminé le module de formulaire de contact, il est temps de faire fonctionner la fonction de clic ! Ajoutez un module de code à la deuxième ligne de la section et insérez les lignes suivantes de code JQuery entre les balises de script, comme vous pouvez le voir dans l'écran d'impression ci-dessous :

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

Modifier les paramètres de section

Hauteur

Continuez en ouvrant les paramètres de la section. Modifiez la hauteur sur différentes tailles d'écran.

• Hauteur : 190 px (ordinateur de bureau), 140 px (tablette), 125 px (téléphone)

Élément principal par défaut

Ajoutez du code CSS personnalisé à l'élément principal de la section à côté pour le fixer dans le coin inférieur droit.

bottom: 0;
right: 0;
position: fixed;

Survolez l'élément principal

Assurez-vous d'ajouter également la position fixe à l'élément principal de survol.

position: fixed;

Ajouter un code CSS personnalisé à la page

Ouvrir les paramètres de la page

Pour compléter l'effet de basculement, nous devrons également ajouter un peu de code CSS à la page. Ouvrez les paramètres de la page.

Ajouter un CSS personnalisé

Allez dans l'onglet avancé et ajoutez les lignes de code CSS suivantes :

.section-open-active {
height: auto !important;
}

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 ajouter un formulaire de contact fixe à vos pages en utilisant les paramètres de dimensionnement de Divi. Vous pouvez faire en sorte que cette approche fonctionne sur tout type de site Web que vous créez. 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.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.