Cinq façons uniques de modéliser les formulaires de contact Divi

Les coordonnées sont un élément important de nombreux sites Web. Leur objectif principal est d’être intuitif et d’aider les visiteurs à se connecter facilement. Mais cela ne signifie pas que tous les contacts doivent apparaître d’une manière prédéfinie. Vous pouvez facilement combiner une expérience intuitive avec un beau design. C’est exactement ce que nous allons faire dans cet article. Nous partagerons 5 modèles uniques de formulaire de contact Divi que vous pouvez créer en utilisant les options intégrées de Divi. Allons – y! L’aperçu des éléments du formulaire de contact Divi Desktop nous permet de commencer par examiner les éléments du formulaire de contact Divi Desktop. Il s’agit de l’apparence du formulaire de contact Divi conçu sur un écran plus petit: 5 méthodes uniques de modélisation des formulaires de contact Divi Abonnez – vous à notre canal YouTube créer des formulaires de contact 1 Ajoutez un nouveau fond de gradient de section et commençons par le premier exemple! Ajouter une nouvelle section, aller aux paramètres de fond et ajouter un fond de rampe. Couleur 1: # 4c00ff couleur 2: # ffd400 type de gradient: radial: coin inférieur gauche position de départ: 34% position finale: 34% L’espacement va ensuite aux paramètres d’espacement et ajoute des valeurs de remplissage personnalisées.
Remplissage supérieur: 200 Px remplissage inférieur: 200 px Ajouter une nouvelle ligne – structure de colonne ajouter une nouvelle ligne en utilisant la structure de colonne suivante: Couleur de fond de colonne 1 sans ajouter de module, ouvrez les paramètres de ligne et ajoutez un fond de rampe pour la colonne 1. Colonne 1 couleur de fond: rgba (255255255,0,55) Colonne image de fond 1 ajoute également une image de fond à la première colonne. Colonne 1 image de fond dupliquée: non dupliquée colonne 1 image de fond mélangée: écran Couleur de fond de la colonne 2 e A C
La deuxième colonne est une couleur de fond blanche.
Colonne 2 couleur de fond: # FFFFFF Redimensionner modifie le prochain réglage de redimensionnement. Hauteur de la colonne d’équilibrage: Oui L’espacement supprime également toutes les écoutilles personnalisées par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Rayon de bord de colonne ajoutez un rayon de bord aux deux colonnes de l’onglet avancé. Rayon limite: 10px; Ajouter des formulaires texte à la colonne 1 ajouter du contenu il est temps de commencer à ajouter divers formulaires! Ajoutez un formulaire texte dans la première colonne qui contient certains de vos choix. Paramètres du texte, puis allez aux paramètres du texte et faites quelques modifications.
Police de texte: correspond à la couleur du texte: # 333333 taille du texte: 100 Px hauteur de la ligne de texte: 1EM direction du texte: Centre L’espacement ajoute également des valeurs de remplissage personnalisées. Remplissage supérieur: 600 pixels remplissage inférieur: 100 pixels Boîte d’ombre pour ajouter de la profondeur au dessin, utilisez des ombres fines. Intensité du flou de l’ombre de la boîte: 80 Px force de diffusion de l’ombre de la boîte: – 16px couleur de l’ombre: rgba (0,0,0,0,3) Ajouter le module image à la colonne 2 charger l’image PNG en ajoutant le module image à la colonne 2. Téléchargez l’image PNG de votre choix. Redimensionner modifie les paramètres de taille de ce module. Largeur: 25% (bureau), 50% (tablette), 60% (téléphone) Alignement du module: milieu L’espacement crée une superposition avec une marge supérieure négative. Marge supérieure: – 60% Ajouter un formulaire Texte 1 à la colonne 2 ajouter du contenu sous le formulaire image ajouter un formulaire texte qui contient du contenu. Paramètres de texte modifier les paramètres de texte de ce module. Police de texte: couleur du texte satisfaite: # 333333 taille du texte: 44px direction
Nombre de textes: centré Ajouter le formulaire de texte 2 à la colonne 2 ajouter le contenu ajouter le formulaire de texte suivant. Les paramètres de texte modifient également les paramètres de texte de ce module. Police de texte: arial text color: # ffd400 text size: 18px text letter Spacing: 2px Text Direction: Center Ajouter une marge inférieure après l’espacement. Marge inférieure: 100 pixels Ajoutez le formulaire de contact à la colonne 2 et activez l’option créer une largeur totale dans les champs nom et courriel. Le dernier formulaire dont vous avez besoin est le formulaire de contact. Avant d’effectuer toute autre action, ouvrez les champs nom et courriel et modifiez la mise en page.
Créer une largeur totale: Oui Ajouter un champ objet pour créer ce dessin, nous avons ajouté un autre champ à l’objet. Désactive la prochaine option de code de vérification. Voir les codes de vérification: Non Paramètres du texte champs du formulaire certains changements ont été apportés aux paramètres du texte des champs du formulaire pour ce formulaire de contact. Champ de formulaire couleur de fond: rgba (255255255,0) Champ de formulaire caractère: arial champ de formulaire poids de la police: couleur claire champ de formulaire taille du texte: 16px espacement des lettres champ de formulaire: 2px Paramètres du bouton nous changeons également l’apparence du bouton.
Utiliser un style personnalisé pour les boutons: Oui couleur du texte du bouton: # ffd400 largeur de la bordure du bouton: 0px espacement des lettres du bouton: 2px caractères du bouton: arial style de police: couleur du soulignement: # 4c00ff L’espacement ajoute des valeurs de remplissage personnalisées plus tard. Remplissage en bas: 100 Px remplissage à gauche: 50 Px remplissage à droite: 50 px Bordure et ajouter une mince bordure inférieure pour chaque champ. Largeur du bord inférieur: 2px couleur du bord inférieur: # efefefefef Espacement des champs individuels enfin et surtout, ajouter une marge inférieure pour chaque singos
Champ autre que le champ message.
Marge inférieure: 20 pixels Créer un formulaire de contact 2 Ajoutez une nouvelle section de fond de gradient dans l’exemple suivant! Ajouter une nouvelle section avec un fond de gradient. Color 1: # 562fef Color 2: # FFFFFF Gradient Type: Linear start position: 50% end position: 50% L’espacement ajoute des valeurs de remplissage personnalisées aux paramètres d’espacement dans cette section. Remplissage supérieur: 200 Px remplissage inférieur: 200 px Ajouter une nouvelle ligne – structure de colonne ajouter une nouvelle ligne en utilisant la structure de colonne suivante: Sans ajouter de module, ouvrez les paramètres de ligne et ajoutez une couleur de fond à la ligne.
Couleur de fond: # FFFFFF La colonne 2 ajoute l’arrière – plan de la rampe à la deuxième colonne de la ligne suivante. Color 1: # 9932ff Color 2: # 562ef column 2 Gradient Type: Linear column 2 gradient direction: 160 Degrees Le redimensionnement modifie également les paramètres de taille de ligne. Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 hauteur de colonne égale: Oui L’espacement ajoute ensuite des valeurs d’espacement personnalisées. Remplissage supérieur: 0px remplissage inférieur: 0px remplissage supérieur colonne 1: 100 Px remplissage inférieur colonne 1: 50 Px remplissage gauche: 50 Px remplissage droit colonne 1: 50 Px remplissage supérieur colonne 2: 100 Px remplissage inférieur colonne 2: 100 Px remplissage gauche colonne 2: 50 Px remplissage droit colonne 2: 50 px La bordure ajoute \
Première colonne. Paramètres de texte modifier les paramètres de texte de ce module. Poids de la police de texte: style de police de texte super gras: couleur du texte en majuscules: # 562ef Suze texte: 100 pixels (bureau), 80 pixels (tablette), 60 pixels (téléphone) espacement des lettres de texte: – 10px hauteur de la ligne de texte: 1EM L’espacement augmente également la marge inférieure. Marge inférieure: 50 pixels Ajoutez le formulaire de contact à l’élément de colonne 1. Le deuxième formulaire dont nous avons besoin dans la première colonne est le formulaire de contact. Lorsque vous ajoutez un module, désactivez l’option afficher le Code de vérification. Voir les codes de vérification: Non Ensuite, changez la couleur de fond du champ de formulaire. Couleur de fond du champ de formulaire: # FFFFFF Vous pouvez également utiliser les paramètres du bouton pour créer un bouton d’icône au lieu d’un bouton qui contient du texte. Utiliser un style personnalisé pour les boutons: Oui taille du texte du bouton: 73 Px couleur du texte en bas: rgba (0,0,0,0) souris à travers les boutons couleur de fond: rgba (255255255,0) Largeur de la bordure du bouton: 0px couleur de l’icône du bouton: # 9932ff afficher uniquement les boutons souris à travers L’icône: Non Enfin, ajoutez une ombre mince à chaque champ. Boîte d’ombre floue forcée: 36px boîte d’ombre floue forcée: – 14px couleur d’ombre: rgba (0,0,0,0,3) Le premier formulaire requis pour ajouter un formulaire texte à la colonne 2 ajouter du contenu la deuxième colonne est un autre formulaire texte. Paramètres de texte après avoir ajouté du contenu, modifiez les paramètres de texte de ce formulaire. Poids de la police de texte: Super gras couleur du texte: # FFFFFF taille du texte: 23px espacement des lettres du texte: – 1px Ajouter le module Blurb # 1 à la colonne 2 ajouter du contenu le deuxième module dont nous avons besoin est le module Blurb. Continuer à saisir des informations sur le compte
X Ajouter une structure de colonne de ligne # 2 la deuxième ligne nécessaire pour compléter cet exemple contient la structure de colonne suivante: Sans ajouter de module, ouvrez les paramètres de ligne et ajoutez un fond de rampe. Couleur 1: # 11ce84 couleur 2: # 10c77f type de gradient: direction de gradient linéaire: 160 degrés position de départ: 50% position finale: 50% Le redimensionnement modifie également les paramètres de taille. Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 hauteur de colonne égale: Oui L’espacement ajoute des valeurs de remplissage personnalisées plus tard. Remplissage supérieur: 150 Px remplissage inférieur: 100 Px remplissage gauche: 50 Px remplissage droit: 50 px Border va ensuite à la configuration de Border et ajoute 20px à chaque coin. Utilisez également le bord inférieur. Largeur du bord inférieur: 10 Px couleur du bord inférieur: # 1ba35a La boîte d’ombre complète le réglage de la ligne en ajoutant des ombres fines. Intensité du flou de l’ombre de la boîte: 80 Px force de diffusion de l’ombre de la boîte: – 24 Px couleur de l’ombre: rgba (0,0,0,0,3) Ajoutez le formulaire de contact à la colonne 1 et activez l’option créer toute la largeur dans le champ Nom et courriel. Le premier formulaire dont nous avons besoin dans la première colonne de cette ligne est le formulaire de contact. Ouvrez le champ Nom et courriel et modifiez les paramètres de mise en page. Créer une largeur totale: Oui Désactive le Code de vérification suivant. Voir les codes de vérification: Non Paramètres du bouton et modification des paramètres du bouton. Utilisez un style personnalisé pour les boutons: Oui couleur du texte du bouton: # ffffffff couleur 1: # 3a0e3 couleur 2: # 3491ce type de gradient: direction de gradient linéaire: 155deg position de départ: 50% position de fin: 50% largeur du bord du bouton: 0px rayon du bord du bouton: 10 px force de diffusion de l’ombre de la boîte:
2x Shadow color: # 0a60af Nous ajoutons également un filet \
Ou les paramètres suivants: utiliser un style personnalisé pour les boutons: Oui taille du texte du bouton: 88 Px couleur du texte du bouton: rgba (255255255,0) souris à travers la couleur de fond du bouton: rgba (255255255,0) Largeur de la bordure du bouton: 0px couleur de l’icône du bouton: \ e60085 afficher seulement la souris à travers l’icône du bouton: Oui La dimension e est utilisée avec les valeurs de dimension pour s’assurer que la conception correspond à toutes les dimensions de l’écran. Largeur: 42% (bureau), 50% (tablette), 77% (téléphone) Alignement du module: milieu L’espacement se poursuit en ajoutant des valeurs d’espacement personnalisées au module. Marge inférieure: 200 Px marge gauche: 50 Px marge droite: 50 px Bordure et ajouter \