Créer une section de formulaire de contact en plein écran réactif en utilisant & # 39; Zoomez sur l’animation de défilement

Pour de nombreux sites, la partie contact de la page est la destination idéale pour les visiteurs. Il est évident que la plupart des gens \/ entreprises veulent que leurs visiteurs les contactent pour poursuivre leurs activités. C’est pourquoi il est important d’optimiser cette section pour une meilleure conversion. Une façon est de créer une disposition de formulaire de contact plein écran qui permet aux utilisateurs de voir facilement les coordonnées. Dans ce tutoriel, nous créerons une mise en page partielle du formulaire de contact plein écran que vous pouvez utiliser sur n’importe quelle page du site Divi. Nous utiliserons également des paramètres de conception réactifs utiles pour personnaliser la mise en page afin de maintenir une mise en page parfaite en plein écran, même sur les petits téléphones.
Allons – y! Voici un aperçu rapide de la Section du formulaire de contact en plein écran réactif que nous allons créer. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Https:
\/ \/ Utu. Be \/ 5qt9j95ume8
Abonnez – vous à notre canal YouTube, importez la mise en page dans la Bibliothèque Divi et allez à la Bibliothèque Divi. Cliquez sur le bouton importer. Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet importer, puis sélectionnez les fichiers téléchargés à partir de votre ordinateur. Puis cliquez sur le bouton importer. Une fois terminé, la disposition de la section est disponible dans Divi Builder. N’oubliez pas qu’il s’agit d’une mise en page de partition, de sorte que lorsque vous créez une nouvelle partition dans le constructeur, vous devez ajouter cette mise en page à une page, un billet ou un modèle. Voir le bas de l’article pour savoir comment ajouter une mise en page à une page.
Commençons le tutoriel. Pour commencer, vous devez faire ce qui suit: si ce n’est pas déjà fait, installez et activez le thème Divi. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Tout d’abord, nous utiliserons Divi Builder pour ajouter la mise en page par défaut à la nouvelle page. Cela accélérera la conception afin que nous puissions nous concentrer sur ce dont nous avons besoin pour créer une section entièrement écran et réactive avec un formulaire de contact. Ensuite, nous ajouterons un effet de défilement pour fusionner tout à la fin.
Ajouter une mise en page par défaut après avoir cliqué pour modifier la page en utilisant Divi Builder, sélectionnez l’option sélectionner la mise en page par défaut. Trouvez ensuite la mise en page de la page de contact de l’entraîneur d’affaires et cliquez sur le bouton utiliser cette mise en page. Une fois la mise en page chargée sur la page, ouvrez les paramètres de mise en page en haut de la mise en page et mettez à jour ce qui suit: couleur de fond: No 3550a0 Hauteur de la section et du rembourrage hauteur minimale: 600 Px hauteur: 104 VH rembourrage: 0px haut, 0px bas L’une des clés du projet est de régler la hauteur à au moins 100 VH (100%)
Tests: 7vh (bureau), 5vh (tablette et téléphone) Titre 3 taille du texte: 2vh (bureau), 3vh (tablette), 12px (téléphone) Marges marges: 3vh en bas Configuration du formulaire de contact maintenant, nous allons continuer à utiliser l’unit é de longueur VH pour ajuster la conception réactive du formulaire de contact. Ouvrir les paramètres du formulaire de contact et mettre à jour ce qui suit: paramètres du champ marges du champ: 3vh paquets de mouches: au – dessus de 2vh, au – dessous de 2vh taille du texte du champ: 2.5 VH Taille du texte du bouton taille du texte du bouton: 2vh Largeur maximale: aucune La dernière étape de l’ajout d’un design d’effet de défilement est l’effet de défilement, qui transforme une partie du formulaire de contact en vue plein écran lorsque vous faites défiler la page. Pour ce faire, ouvrez à nouveau les paramètres de la section et mettez à jour ce qui suit:
Sur l’onglet redimensionner vers le haut et vers le bas… Activer l’échelle supérieure et inférieure: s Échelle initiale: 60% (0%) Échelle moyenne: 60% (70%) Échelle finale: 100% (100%) Ceci complète la conception de la partie du formulaire de contact plein écran. Mais avant de voir le résultat final, ajoutons – le à une page du site. Utilisez la section formulaire de contact plein écran du site pour enregistrer une partie de la mise en page dans la Bibliothèque Divi avant d’ajouter cette partie à une autre page de notre site. Nous devons d’abord enregistrer une partie de la mise en page dans la Bibliothèque Divi. Pour ce faire, cliquez sur l’icône ajouter à la bibliothèque dans le menu partiel. Ensuite, nommez la mise en page et cliquez sur le bouton Enregistrer dans la bibliothèque. La disposition des partitions est maintenant disponible dans la Bibliothèque Divi pour une utilisation future. Ajouter une mise en page à une page à partir de la Bibliothèque Divi, ajouter une mise en page d’un formulaire de contact plein écran à une page (ou un message)
) dans Divi, ouvrez pour éditer la page en utilisant 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 de la bibliothèque et sélectionnez une disposition de section enregistrée (mon formulaire de contact plein écran) dans la liste. Résultats finaux examinons maintenant les résultats finaux. C’est sur le Bureau. Voici la tablette (En fait iPad pro). C’est sur le téléphone (En fait iPhone 5). Notez que même si l’écran est court, le contenu est toujours disponible en plein écran. J’espère que la Section des formulaires de contact en plein écran vous aidera à créer des formulaires \/ sections de contact à haut taux de conversion pour votre site Web. Il est important de garder à l’esprit que le contenu est toujours suffisamment concis pour être facilement visible, même sur les petits téléphones. Certaines des principales techniques de conception réactive utilisées dans cette mise en page sont également utiles lorsque vous apportez des changements à n’importe quelle conception sur le site. Pour en savoir plus sur ce sujet, consultez notre billet sur la façon de concevoir des formulaires de contact réactifs dans Divi en utilisant les unités de longueur VW et VH. J’ai hâte d’entendre vos commentaires. Bonjour!