Comment concevoir le module de contact réactif dans Divi en utilisant les unités de longueur VW et VH

Les formulaires Web sont essentiels au succès du site. C’est logique, étant donné que la plupart des activités en ligne dépendent du choix d’adhérer à des formulaires tels que les courriels et les formulaires de contact pour gagner de l’argent en créant des listes de courriels et en communiquant avec des acheteurs potentiels. Maintenant, nous devons nous assurer que les modules réactifs que nous avons conçus sont bons pour tous les navigateurs et appareils mobiles. Dans ce tutoriel, je vais vous montrer comment concevoir des formulaires de contact réactifs en utilisant les unités de longueur VW et VH de Divi. Nous discuterons de la façon de redimensionner et d’espacer les champs d’entrée et les boutons en fonction de la largeur et de la hauteur du navigateur. Cela vous permettra de maximiser la visibilité du module sur tous les appareils, même pour une visualisation horizontale sur votre téléphone mobile.
Pour ce faire, nous utiliserons les paramètres intégrés de Divi qui vous permettent de personnaliser facilement le texte, les champs et les boutons du formulaire. On y va. Un voyeur. Bureau Comprimés Téléphone (portrait) Téléphone (horizontal) Téléchargement gratuit de la mise en page du formulaire de contact réactif (y compris le formulaire d’activation par courriel réactif!) Pour maîtriser les graphiques 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à
Droite: \ # fdb15b Ensuite, nous utilisons la longueur unitaire VW pour redimensionner la ligne pour l’adapter au navigateur. Largeur: 66vw (bureau), 66vw (tablette), 100% (téléphone) largeur maximale: 66vw (bureau), 66vw (tablette), 100% (téléphone) hauteur minimale: 100vh (téléphone) remplissage: 0px en haut et 0px 66vw en bas maintiennent les lignes à environ les deux tiers de la largeur de L’ouverture du navigateur. Une valeur de 100vh sur l’écran du téléphone garantira que la hauteur de la ligne correspond à la hauteur du viewport du téléphone (facultatif, mais bien tactile, la zone de contenu de la ligne est mieux visible sur le téléphone).
Notez que le poids de ligne est fixé à 100% (au lieu de 100 VW). C’est parce que 100vw ne tient pas compte de la largeur de la barre de défilement lors du défilement d’une page. Il est donc préférable d’utiliser des pourcentages pour les affichages de pleine largeur. Lorsque vous créez un formulaire de contact, vous pouvez ajouter le formulaire de contact à cette ligne. Après avoir ajouté le formulaire de contact, mettez à jour le contenu avec le titre et désactivez CAPTCHA. Titre: contactez – nous afficher le Code de vérification: Non Créez un champ pleine largeur pour cet article je vais utiliser le champ pleine largeur. Cela me permettra d’ajouter un espacement constant entre les champs (parce que float n’est pas utilisé) et de fournir une largeur personnalisée pour chaque champ pour une conception unique plus tard. Ouvrez maintenant les paramètres des champs nom et courriel et définissez l’option créer toute la largeur à S. Les champs optimisés pour la conception réactive sont maintenant retournés aux paramètres du formulaire de contact. Nous pouvons maintenant personnaliser les champs du module en unités de longueur VW et VH. Mise à jour comme suit: couleur du texte du champ: # 333333 marges de champ (bureau et tablette): 2vw en haut, 2vw en bas marges de champ (téléphone): 2vh en haut, 2vh en bas imbot
Ensuite, ajoutez un peu de remplissage au formulaire de contact en utilisant les unités de longueur VW et ajoutez une ombre de cadre dans le champ de formulaire comme suit: remplissage (bureau): 3vw haut, 3vw bas, 5vw gauche, 5vw droite remplissage (téléphone): 5vh haut, 5vh bas, 3vh gauche, 3vh right button Box Shadow: see capture d’écran horizontal Box Shadow Location: 2em vertical Box Shadow Location: 0.4em Shadow color: rgba (245104,69,0.29) Résultats à ce jour Bureau Comprimés Téléphone (portrait) Téléphone (horizontal) Ajustez la largeur des champs du module pour obtenir des options de conception uniques, et vous pouvez personnaliser la largeur de chaque champ. Ouvrez les paramètres du champ Nom et mettez à jour la largeur comme suit: largeur: 50% (bureau), 100% (téléphone) Ouvrez ensuite les paramètres du champ e – mail et mettez à jour la largeur comme suit: largeur: 65% (bureau), 100% (téléphone) Ensuite, ouvrez le champ message pour définir et mettre à jour la largeur comme suit: largeur: 80% (bureau), 100% (téléphone) Pour que le bouton formulaire de contact réponde à la largeur totale, nous devons d’abord ajouter le CSS personnalisé suivant à la zone d’entrée du bouton Contact: largeur: 97%; Puis ouvrez la configuration de la page et ajoutez le CSS personnalisé suivant:. Et _ contact Bottom Container {
Flotteur: aucun;
} Maintenant que nous avons terminé, veuillez vérifier le résultat final du module de réponse. Notez comment le formulaire de contact est redimensionné lorsque vous ajustez la largeur du navigateur sur votre bureau et votre tablette, et comment il s’adapte à la conception lorsque vous ajustez la hauteur de la fenêtre sur votre téléphone. Bureau Comprimés Téléphone (portrait) Téléphone (horizontal) Utilisez les mêmes paramètres de conception pour le module d’activation des courriels que vous pouvez utiliser
Les mêmes unités de longueur VW et VH sont utilisées pour concevoir le module d’activation des courriels de réponse. Voici une capture d’écran de la conception d’un formulaire d’activation par courriel inclus dans le téléchargement gratuit de cet article. Bureau Comprimés Téléphone (portrait) Téléphone (horizontal) En utilisant les unités de longueur VW et VH, nous pouvons créer un formulaire de contact réactif (ou n’importe quel module Divi) qui est beau sur tous les navigateurs et appareils mobiles de toutes tailles. Lorsque vous ajustez la largeur du navigateur, la conception réactive Redimensionne en douceur les éléments du module. De plus, si vous utilisez des unités de longueur VH sur l’écran du téléphone, vous pouvez même optimiser les modules d’affichage vertical et horizontal du téléphone. N’oubliez pas de consulter le téléchargement gratuit pour obtenir un exemple de travail de formulaire de contact réactif et d’activation par courriel. J’espère que cet article vous donnera des conseils sur la façon de créer des modules bien adaptés pour votre prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!