Comment modéliser une forme de gravité pour ressembler à Divi (+ aspect supplémentaire!)
En parlant du module plug – in WordPress, plusieurs options sont disponibles. Dans les tutoriels précédents sur le thème de l’élégance, j’ai partagé quelques clips css pour concevoir le style du plug – in Caldera forms. Caldera est une excellente option plug – in pour créer des formes libres, mais aujourd’hui nous allons partager quelques conseils de style pour les formes gravitationnelles. Gravity forms est l’un des plugins de création de modules avancés les plus populaires sur le site WordPress (sinon). Comme cet article est en fait un tutoriel de conception, je ne parlerai pas du plug – in lui – même, mais il y a déjà de très bons articles sur notre blog pour le faire:
Formulaires de classement – détailler les formulaires de classement de l’édition personnelle: une solution complète pour les modules WordPress 15 meilleurs plugins de modules WordPress comparer pourquoi modéliser d’abord votre forme? Ensuite, vous pouvez vous demander pourquoi quelqu’un devrait ou veut modéliser d’abord ses formulaires à partir de leur apparence par défaut. Il n’y a que quelques raisons à cela: Assurez – vous que les formulaires correspondent à l’apparence du site – Bien que la plupart des modules plug – in semblent propres et s’adaptent bien à n’importe quel site, ils semblent assez génériques. L’appariement des éléments d’un site Web indique que vous vous concentrez sur les détails et que vous vous concentrez sur la connexion esthétique de tout le contenu. Donnez à votre formulaire un aspect plus personnalisé: tant que vous pouvez personnaliser une partie du contenu du site, vous différencier et vous donner un peu d’unicité, mieux c’est. L’unicité peut montrer l’autorité ou le niveau de compétence – que vous soyez un concepteur web ou un freelance – la présentation de vos compétences sur un site Web montre clairement aux visiteurs que vous êtes capable d’un certain degré de personnalisation de conception, ce qui, à son tour, amène plus de clients. Apprendre! Chaque fois que vous modélisez un élément à l’aide d’un fragment CSS de notre blog
([type = Radio]:: non ([type = case à cocher]:: non ([type = soumettre]:: non ([type = bouton]:: non ([type = Image]:: non ([type = fichier])),
– Oui. Gform _ package text zone. Moyenne
– Oui. Gform _ package text zone. Grande
Contexte: rgba (0, 0, 0, 0);
Bordure supérieure: aucune;
Bordure gauche: aucune;
Bordure droite: aucune;
Bordure inférieure: 2px solide # 000;
Rayon limite: 0px! Important
}
– Oui. Gform \ u package UL. Gform _ Field Li. Gfield
Bord inférieur: 20px;
}
Saisissez [type = texte]: Focus,
Entrée Texte: Focus,
Entrée Titre: Focus,
Zone de texte: Focus {
Bordure inférieure: 2px solide # b5b5b5! Important
}
Style de bouton
– Oui. Gform _ package. Gform _ footer input. Boutons
– Oui. Gform _ package. Gform _ footer input [type = submit] {
Contexte: # a2d400;
Conversion de texte: Majuscules;
Bordure: 2px solide # 1d1d1d;
Remplissage: 7px 12px;
Curseur: pointeur;
Taille de la police: 18px;
Transition MOZ: 0,2 s pour l’ensemble;
– transition webkit: toutes les 0,2 secondes;
Transition: tous 0,2 s;
Rayon limite: 0! Important
}
Bouton – poussoir style de vol stationnaire
– Oui. Gform _ package. Gform _ footer input. Boutons: vol stationnaire,
– Oui. Gform _ package. Gfform _ footer input [type = commit]:
Contexte: # 1d1d1d;
Couleur: # FFF;
}
Style de section
– Oui. Gform \ u package H2. Titre de la section {
Taille de la police: normale;
Taille de la police: 2em;
}
– Oui. Gform _ package. Partie g {
Remplissage: 20px! Important
Bordure inférieure: aucune;
Contexte: # a2d400;
}
Radio gravitationnelle et cases à cocher
– Oui. Gform \ u package UL. Gfield _ checkbox liinput [type = checkbox],
– Oui. Gform \ u package UL. Gfield _ Radio Li input [type = Radio] {
Visibilité: cachée;
Marge: 0;
Largeur: 0! Important
}
– Oui. Gform \ u wrapper input [type = checkbox] + label,
– Oui. Gform \ u package input [type = Radio] + label {
Taille de la police: 16px;
}
Saisissez [type = case à cocher] + Étiquette: vol stationnaire,
Entrez [type = Radio] + Étiquette: stationnaire {
Curseur: pointeur;
}
Saisissez [type = case à cocher] + Étiquette: avant,
Entrez [type = Radio] + Étiquette: avant {
Famille de polices: \
Taille de la police: 30px;
Position: relative;
En haut: 0,3em;
Distance droite: 0,2em;
}
– Oui. Gform _ wrapper Li. GF \ u List \ u inline UL. Gfield _ checkboxli,
– Oui. Gform _ wrapper Li. GF \ u List \ u inline UL. Gfield _ Radio li {
Affichage: – MOZ inline;
Exposition