Comment créer une section de formulaire de contact en plein écran réactive avec une animation de défilement avec zoom avant
Publié: 2020-05-01Pour de nombreux sites Web, la section contact de la page est la destination idéale pour les visiteurs. Pour énoncer l'évidence, la plupart des personnes/entreprises veulent que leurs visiteurs les contactent pour plus d'affaires. C'est pourquoi il est important d'optimiser cette section pour une meilleure conversion. Une façon de le faire est de créer une mise en page de formulaire de contact en plein écran qui donne à l'utilisateur une vue sans distraction des informations de contact.
Dans ce tutoriel, nous allons créer une disposition de section de formulaire de contact en plein écran que vous pouvez utiliser sur n'importe quelle page de votre site Divi. Nous personnaliserons également la mise en page avec des paramètres de conception réactifs utiles qui garderont cette mise en page plein écran superbe, même sur les petits téléphones.
Commençons!
Aperçu
Voici un aperçu de la section de formulaire de contact responsive en plein écran que nous allons créer.
Téléchargez la mise en page GRATUITEMENT
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 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.
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 !
https://youtu.be/5Qt9J95uME8
Abonnez-vous à notre chaîne Youtube
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder. N'oubliez pas qu'il s'agit d'une mise en page de section, vous devrez donc ajouter cette mise en page à une page, un article ou un modèle lors de la création d'une nouvelle section dans le générateur.
Voir le bas de l'article pour savoir comment ajouter la mise en page de la section à une page.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
Création de la disposition de la section de contact
Pour commencer, nous allons ajouter une mise en page prédéfinie à une nouvelle page à l'aide de Divi Builder. Cela accélérera la conception afin que nous puissions nous concentrer sur ce qu'il faut pour créer une section (avec un formulaire de contact) en plein écran et réactive. Ensuite, nous ajouterons l'effet de défilement pour tout rassembler à la fin.
Ajouter une mise en page prédéfinie
Une fois que vous avez cliqué pour modifier la page à l'aide du constructeur Divi, sélectionnez l'option « Choisir une mise en page prédéfinie ».
Recherchez ensuite la mise en page de la page de contact Business Coach et cliquez sur le bouton « Utiliser cette mise en page ».
Paramètres de section
Une fois la mise en page chargée sur la page, ouvrez les paramètres de la section tout en haut de la mise en page et mettez à jour les éléments suivants :
Fond
- Couleur de fond : #3550a0
Hauteur et rembourrage de la section
- Hauteur minimale : 600 px
- Hauteur: 104vh
- Remplissage : top 0px, bas 0px
L'une des clés de cette conception est de définir la hauteur sur au moins 100vh (100% de la hauteur de la fenêtre). Cela garantira que la section s'étendra sur toute la hauteur de la fenêtre du navigateur. Nous ajoutons une hauteur de 104vh afin d'avoir un peu d'espace supplémentaire lorsque l'utilisateur fait défiler la section.
La définition de la hauteur minimale à 600px est une hauteur de secours afin qu'aucun des éléments de la section ne soit masqué si jamais la hauteur du navigateur est trop petite. Cela devra être ajusté en fonction de la quantité de contenu que nous avons dans la section.
CSS personnalisé
Afin de centrer verticalement les lignes dans la section (idéal pour les sections plein écran), ajoutez le CSS personnalisé suivant à l'élément principal.
display:flex;flex-direction: column;
Ajouter un formulaire de contact
Pour ajouter le formulaire de contact à la section, faites-le glisser sous le module de texte existant de la section prédéfinie ci-dessous.
Supprimer les sections supplémentaires de la mise en page prédéfinie
Supprimez ensuite la section du bas afin que seule la section que nous construisons reste.
Personnalisation des éléments de section pour une conception réactive en plein écran
Maintenant que la mise en page de la section est terminée, nous sommes prêts à commencer à personnaliser le contenu (ou les éléments enfants) de la section avec un design réactif qui s'adaptera parfaitement à une section plein écran sur tous les appareils.
Nous utiliserons l'unité de longueur vh pour la plupart de la taille et de l'espacement du texte pour chacun des éléments. Cela aidera à garder les éléments visibles avec la mise en page plein écran, même sur de courts affichages de téléphone.
Paramètres de ligne
Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
- Largeur de gouttière : 1
- Largeur : 100 %
- Rembourrage : 0px en haut, 0px en bas, 7vh à gauche, 7vh à droite
Paramètres du module de texte
Ouvrez les paramètres du module de texte et mettez à jour les éléments suivants :
Taille du texte de l'en-tête
- Taille du texte du titre : 7vh (ordinateur de bureau), 5vh (tablette et téléphone)
- Titre 3 Taille du texte : 2vh (ordinateur de bureau), 3vh (tablette), 12px (téléphone)
Marge
- Marge : 3vh en bas
Paramètres du formulaire de contact
Nous allons maintenant continuer notre ajustement de conception réactive sur le formulaire de contact en utilisant l'unité de longueur vh. Ouvrez les paramètres du formulaire de contact et mettez à jour les éléments suivants :
Paramètres de champ
- Marge des champs : 3vh
- Rembourrage Fleids: haut 2vh, bas 2vh
- Taille du texte des champs : 2.5vh
Taille du texte du bouton
- Taille du texte du bouton : 2vh
Largeur
- Largeur maximale : aucun
Ajout des effets de défilement
La dernière étape de la conception est l'effet de défilement qui fera passer la section du formulaire de contact en vue plein écran lors du défilement de la page. Pour ce faire, ouvrez une nouvelle fois les paramètres de la section et mettez à jour les éléments suivants :
Sous l'onglet Mise à l'échelle vers le haut et vers le bas…
- Activer la mise à l'échelle vers le haut et vers le bas : OUI
- Échelle de départ : 60 % (à 0 %)
- Échelle moyenne : 60 % (à 70 %)
- Échelle de fin : 100 % (à 100 %)
Cela termine la conception de la section du formulaire de contact en plein écran. Mais avant de pouvoir voir le résultat final, ajoutons-le d'abord à l'une des pages du site Web.
Utilisation de la section Formulaire de contact en plein écran sur votre site Web
Enregistrer la mise en page de la section dans la bibliothèque Divi
Avant de pouvoir ajouter cette section à une autre page de notre site Web, nous devons d'abord enregistrer la mise en page de la section dans la bibliothèque Divi.
Pour ce faire, cliquez sur l'icône « Ajouter à la bibliothèque » dans le menu de la section. Donnez ensuite un nom à la mise en page et cliquez sur le bouton « Enregistrer dans la bibliothèque ».
Désormais, la disposition des sections sera disponible dans la bibliothèque Divi pour une utilisation future.
Ajouter une mise en page de section à la page à partir de la bibliothèque Divi
Pour ajouter la disposition de la section du formulaire de contact en plein écran à une page (ou à une publication) dans Divi, ouvrez pour modifier la page à l'aide de Divi Builder.
Cliquez ensuite pour ajouter une nouvelle section quelque part sur la page.
Dans la fenêtre contextuelle Insérer une section, cliquez sur l'onglet Ajouter à partir de la bibliothèque et sélectionnez la disposition de la section enregistrée dans la liste (la mienne s'appelle « Formulaire de contact plein écran »).
Résultat final
Voyons maintenant le résultat final.
Le voici sur le bureau.
Le voici sur tablette (iPad Pro en fait).
Le voici sur téléphone (iPhone 5 en fait). Notez que même si l'écran est vraiment court, le contenu tient toujours dans la vue plein écran.
Dernières pensées
J'espère que la section du formulaire de contact en plein écran vous aidera à créer un formulaire/une section de contact à fort taux de conversion pour votre propre site Web. La chose importante à garder à l'esprit est de toujours s'assurer et de garder le contenu suffisamment concis pour qu'il s'affiche également bien sur les petits téléphones. Certaines des principales techniques de conception réactive utilisées dans cette mise en page seront également utiles lors de la modification de toute conception de votre site Web.
Pour en savoir plus sur ce sujet, consultez notre article sur la façon d'utiliser les unités de longueur vw et vh pour concevoir un formulaire de contact réactif dans Divi.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!