Si vous voulez aller au-delà des limites des options de thème et de plugin pour vraiment personnaliser l’apparence de chaque élément sur votre site WordPress, CSS est le moyen de le faire.

Mais – comme nous l’avons déjà écrit ici – le gros problème avec CSS est que, bien qu’il soit puissant, il nécessite des connaissances particulières qui le mettent hors de portée des débutants.

Ainsi, vous disposez de ce langage de style puissant, mais seuls les utilisateurs avancés peuvent en bénéficier. Que faire…?

Entrer, JauneCrayon. YellowPencil est un plugin qui rend l’édition CSS plus accessible aux utilisateurs débutants et avancés en offrant une interface visuelle pour vous aider à styliser chaque élément de votre site, y compris le thème et le contenu du plugin.

Avec YellowPencil, vous pourrez facilement personnaliser la sortie de votre thème et de votre plug-in à l’aide du pointer-cliquer, du glisser-déposer et d’une interface graphique.

Et dans ma revue YellowPencil, je vais vous montrer comment cela fonctionne et partager certaines de mes propres réflexions.

Revue YellowPencil : Voici tout ce qu’il fait

Voici les détails pratiques sur la façon dont YellowPencil s’y prend pour rendre le CSS plus accessible à tous les utilisateurs de WordPress…

Tout d’abord, YellowPencil vous permet de modifier le CSS de deux manières différentes :

  • Interface graphique – c’est ce que la plupart des utilisateurs choisiront. Il vous suffit de cliquer sur l’élément que vous souhaitez modifier et d’utiliser les menus déroulants simples, les sélecteurs de couleurs et d’autres options pour effectuer des modifications.
  • Éditeur de code – si vous êtes familier avec CSS, vous pouvez ajouter directement votre propre code. C’est toujours pratique car l’outil d’inspection permet de saisir facilement le bon sélecteur CSS.

YellowPencil comprend également une conception réactive facile. Vous pouvez appliquer des styles CSS à des requêtes multimédias spécifiques pour un site plus réactif. Et vous pouvez également modifier le fonctionnement de vos requêtes multimédias, si vous le souhaitez (si vous n’êtes pas familier, une requête multimédia vous permet essentiellement de cibler les choix de style sur des appareils spécifiques, comme un smartphone ou une tablette).

Les autres fonctionnalités utiles incluent :

  • Redimensionnement visuel – vous pouvez redimensionner des éléments comme vous redimensionnez une image dans Microsoft Word.
  • Glisser-déposer – vous pouvez faire glisser et déposer des éléments individuels sur votre page.
  • Mode filaire – cela facilite l’agencement des mises en page sans que des éléments esthétiques ne gênent.
  • Outil d’animation – appliquer des animations au(x) élément(s) sélectionné(s)
  • Défaire refaire – en cas d’erreur.

Travaux pratiques avec YellowPencil : modification de ma page

Maintenant que vous savez ce que fait YellowPencil, prenons cet examen YellowPencil un peu plus pratique.

J’ai configuré une page de test construite avec Élémentaire et le Astra thème, qui devrait fournir un bon exemple de la façon dont YellowPencil fonctionne avec les thèmes et la sortie du plugin.

Un aperçu rapide de l’interface YellowPencil

Vous pouvez lancer l’interface YellowPencil soit depuis l’éditeur WordPress habituel, soit via la barre d’outils WordPress.

Une fois dans l’interface, vous verrez un aperçu en direct de votre site, ainsi que l’interface YellowPencil sur les côtés gauche et droit :

crayon jaune revoir l'interface

  • 1 – c’est ici que vous pouvez changer les sélecteurs, changer de mode réactif, accéder à l’éditeur de code source, etc.
  • 2 – une fois que vous avez sélectionné un élément, c’est là que vous appliquerez réellement les styles.

Utilisation de l’outil Inspecteur YellowPencil

YellowPencil vous offre trois options différentes pour contrôler ce qui se passe lorsque vous cliquez sur un élément. Cela vous permet essentiellement de contrôler ce que vous souhaitez modifier :

  • Le curseur – cela vous permet d’interagir avec votre site Web comme si vous étiez un visiteur régulier. Par exemple, vous pouvez cliquer sur un lien pour charger une nouvelle page à modifier.
  • Inspecteur flexible – cela sélectionne tout éléments d’une classe. Par exemple, si vous cliquez sur un lien dans votre menu de navigation, vous pourrez styliser tout liens du menu de navigation.
  • Inspecteur unique – cela sélectionne uniquement l’élément spécifique sur lequel vous cliquez. Par exemple, cela vous permettrait de styliser uniquement un lien spécifique dans votre menu de navigation, au lieu de tous les liens du menu de navigation.

sélecteurs

Éléments de style avec YellowPencil

Ok, maintenant stylisons certains éléments. Cela me donnera également l’occasion de vous montrer plus en détail la différence entre les inspecteurs flexibles et les inspecteurs uniques.

Disons que vous utilisez le flexible inspecteur de cliquer sur un lien du menu de navigation. Maintenant, vous obtenez un tas d’options sur le côté droit où vous pouvez appliquer de nouveaux styles :

tout sélectionner

Si vous voulez, par exemple, ajouter une bordure, vous n’avez qu’à utiliser le Frontière options de style. Et juste comme ça, chaque lien de menu a une nouvelle bordure :

frontière

Si vous vouliez seulement ajouter une bordure au Mon compte lien, vous pouvez choisir d’utiliser le Célibataire inspecteur à la place. Cela ressemblerait plus à ceci :

sélectionnez-en un

Au total, YellowPencil vous donne 50+ CSS options à ajouter à vos conceptions, réparties sur :

  • Texte
  • Arrière plan
  • Marge
  • Rembourrage
  • Frontière
  • Rayon de bordure
  • Position
  • Taille
  • Animation
  • Boîte ombre

La Position et Taille les options sont particulièrement intéressantes. Si tu choisis Position, vous obtenez non seulement des commandes simples pour gérer la position de l’élément, mais vous pouvez également le faire glisser et le déposer sur l’écran :

De même, en choisissant Taille permet de redimensionner un élément par glisser-déposer…

Lire la suite : cliquez ici

Dans la même catégorie :