Commentaire de yellowpencil: Éditeur CSS visuel pour les débutants WordPress

Ou changer sa position. Faites glisser et déposer pour redimensionner. De même, vous pouvez utiliser glisser – déposer pour redimensionner certains éléments de l’aperçu visuel. Conception réactive. Vous pouvez voir un aperçu réactif et apporter des changements de style qui ne s’appliquent qu’à cet appareil. Mode wireframe. Ce mode pratique permet un réglage facile de la disposition en cachant les visuels et en n’affichant que des fils simples. Annuler \/ restaurer et réviser l’historique. Cela vous permet de vous déplacer facilement d’avant en arrière au besoin. Éditeur CSS direct. Si vous connaissez déjà CSS, vous pouvez également apporter des modifications directement dans l’éditeur de code. Une des meilleures choses est que le crayon jaune peut tout gérer. C’est – à – dire que vous pouvez l’utiliser pour modéliser les thèmes WordPress et la sortie de tout plug – in que vous utilisez.
Utilisez l’exercice yellowpencil: pour utiliser l’exercice yellowpencil, j’a i créé une nouvelle page, veuillez nous contacter en utilisant le formulaire de contact wpforms. Je vais maintenant le rédiger, ainsi que mon menu thématique, afin que vous puissiez voir comment fonctionne yellowpencil. Lorsque vous ouvrez l’interface yellowpencil, voici ce qui suit: 1 – cette barre latérale vous aide à accéder à différents modes, tels que le mode de conception réactive ou le mode wireframe. 2 – Voici un aperçu en direct de la page que vous éditez. Lorsque vous changez de style, vous les verrez immédiatement reflétés dans cet aperçu en direct. 3 – une fois l’élément sélectionné, un nouveau style est défini ici. Sélectionner un élément (2 modes) yellowpencil vous offre deux façons de sélectionner un élément:
Inspecteur flexible: lorsque vous utilisez un inspecteur flexible, tous les éléments de ce type sont sélectionnés. Par exemple, si vous cliquez sur un lien de menu en utilisant l’Inspecteur flexible, vous pouvez appliquer le même style à tous les liens de menu. Inspecteur unique: lorsqu’un seul inspecteur est utilisé,
Vous ne sélectionnerez que cet élément spécifique. Par exemple, si vous cliquez sur un lien de menu en utilisant un seul inspecteur, vous ne pouvez appliquer un style qu’à ce lien. Voici un exemple: Si j’utilise un vérificateur flexible pour sélectionner un lien de menu et ajouter une bordure, vous verrez qu’il s’applique à tous les éléments de menu: Voici maintenant l’apparence de ces mêmes styles lors de l’utilisation d’un seul inspecteur (Notez que seuls les liens du menu principal peuvent obtenir des bordures): C’est donc une fonctionnalité très utile dès le début pour vous assurer que vous pouvez toujours choisir le projet exact que vous voulez. Le sélecteur CSS devient complexe, mais il peut changer de mode pour le rendre simple. Utilisez le panneau latéral Pour styliser les éléments comme vous l’avez vu ci – dessus, Mais examinons de plus près comment les styles des éléments fonctionnent. Pour chaque projet, yellowpencil vous offre les onglets suivants:
Text background Border fill Border Edge radius location Size animation shadow box extra (plus les fonctionnalités ci – dessus pour les développeurs, telles que l’opacité, la position de déplacement, le curseur, etc.) Par exemple, pour ajouter une petite ombre de boîte dans le champ du module d’entrée, il suffit d’aller à l’onglet ombres de boîte et d’effectuer les modifications en utilisant les contrôles d’interface simples: Mais c’est ma fonction préférée. Si vous voulez changer la taille d’un élément, vous pouvez utiliser le même panneau latéral. Ou, vous pouvez simplement faire glisser et déposer comme ceci: De même, vous pouvez utiliser glisser – déposer pour déplacer certains éléments (cela ne fonctionne pas pour chaque élément, mais vous pouvez déplacer la plupart des choses). Par exemple, il est facile de déplacer un titre de page: La fonctionnalité glisser – déposer n’est pas seulement unique au plug – in Visual CSS Editor, mais elle est également utile pour changer l’apparence de la page. Juste là.
Animation d’événements pour: Explorez d’autres paramètres yellowpencil Enfin, yellowpencil fournit d’autres contrôles utiles dans sa zone de configuration. Dans l’onglet personnalisation, vous pouvez voir tous les CSS personnalisés que vous avez ajoutés. Vous pouvez également exporter tous les CSS en cliquant sur le bouton: Cela signifie que vous ne serez jamais bloqué et que vous pouvez arrêter d’utiliser le crayon jaune à tout moment. Plus important encore, l’onglet paramètres vous permet de choisir si vous souhaitez inclure un CSS personnalisé comme un CSS dynamique en ligne ou un fichier CSS externe statique: Combien coûte un crayon jaune? La version Premium de yellowpencil que j’ai commentée est disponible sur codecanyon pour seulement 26 $et a une note de 4.77 étoiles sur plus de 10 000 ventes. Il existe également une version Lite gratuite sur WordPress. Org, si tu veux essayer. Il contient beaucoup des fonctionnalités de base que vous voyez ci – dessus, mais il n’y a pas beaucoup d’options. Cependant, cette version gratuite est un excellent moyen de jouer avec le plugin pour voir si vous l’aimez. Donc, si vous décidez de passer à pro, 26 $n’est pas vraiment une économie. Du point de vue des non – développeurs, yellowpencil yellowpencil est le meilleur plug – in visuel personnalisé CSS que j’ai jamais utilisé. Si vous êtes un développeur, vous voudrez peut – être voir CSS Hero parce qu’il a quelques fonctionnalités centrées sur le développeur dans la dernière version. Mais pour les utilisateurs réguliers, je préfère yellowpencil parce que: localiser et redimensionner le glisser – déposer est très pratique. Le modèle de conception réactive fonctionne bien. Il est également plus facile pour les utilisateurs occasionnels de comprendre comment fonctionne le point d’arrêt yellowpencil. Obtient plusieurs contrôles de conception pour chaque projet. Si vous êtes intéressé, visitez WordPress. Org pour jouer à la version gratuite. Si vous préférez, envisagez d’acheter la version pro. Obtenir un stylo jaune
Si vous souhaitez apprendre un peu de CSS par vous – même, consultez notre guide de démarrage WordPress CSS.