CSS Hero pour WordPress : allié ou ennemi pour votre site ?

CSS Hero - Plugin WordPress
Cela faisait longtemps que je voulais tester CSS Hero pour WordPress !

Vous savez, ce plugin premium qui permet de modifier à la volée n’importe quel élément de votre page web depuis le front-end de votre site. Et bien, c’est chose faite puisque Fabrice m’a donné cette opportunité. Dans cet article, nous allons le découvrir ensemble…

Tour d’horizon du plugin CSS Hero

Tout d’abord, il vous faudra acheter une licence sur le site officiel de CSS Hero, ensuite vous pourrez télécharger les dossiers du plugin afin de les envoyer vers votre serveur via FTP ou bien directement depuis l’upload d’extensions disponible dans l’administration de votre site. Enfin, vous devrez activer le plugin à l’aide de votre clé personnelle. À présent, lorsque vous vous rendrez du côté du Front-End de votre site, vous verrez apparaître un nouveau bouton bleu, avec un icône “éclair”, dans le coin supérieur droit de votre écran.

CSS Hero - Front End

En cliquant sur celui-ci, vous activerez CSS Hero et un menu vertical va apparaître. C’est à partir de celui-ci que vous pourrez commencer vos customisations… Ce menu est composé de 9 onglets que nous allons survoler ensemble :

1. L’éditeur principal

Inspecteur CSS Hero - 1
Lorsque vous sélectionnez cet outil, vous pourrez survoler votre page et chaque élément modifiable se mettra en surbrillance. De ce fait, vous pourrez facilement commencer votre customisation. Attention, les options sont nombreuses et il vous faudra inscrire vos modifications au bon endroit.

2. L’inspecteur pro

Inspecteur CSS Hero - 2
En sélectionnant cet outil, une fenêtre apparaitra en bas de votre écran et vous donnera la possibilité d’écrire vous même votre CSS. C’est à partir d’ici que vous gèrerez les “Media Queries”, les règles CSS inhérentes à chaque type d’écran. De plus, vous pourrez exporter votre code de façon basique ou minimifiée. Cet outil est de loin le plus efficace et le plus performant qu’offre CSS Hero, toutefois il n’est disponible qu’à partir de la version “personal” à 59$ht/an.

3. Le mode “device”

Inspecteur CSS Hero - 3
Cet outil vous permettra également de gérer vos différents types d’écran, mais à la différence de “l’inspecteur pro” vu précédemment, ici vous ne pourrez pas écrire le code de façon manuelle. Vous passerez alors par l’outil “éditeur principal” pour sélectionner votre élément et le modifier via les options proposées.

4. L’historique des changements

Inspecteur CSS Hero - 4
Cet outil recense l’historique des modifications que vous aurez effectuées. Vous pourrez facilement trouver vos différentes versions en fonction de la date et de l’heure de vos sauvegardes. Cela pourra certainement vous servir.

5. Les presets

Inspecteur CSS Hero - 5
Avec cet outil, vous pourrez sauvegarder des configurations, des styles “pré-faits” afin de vous en servir ultérieurement – sur d’autres pages par exemple – vous permettant ainsi de garder une homogénéité du design et de gagner du temps.

6. Les outils

Inspecteur CSS Hero - 6
L’onglet “Tools” vous proposera 3 options :

  • la première étant de récupérer les styles par défaut de votre thème (dans le cas où vous ne seriez pas satisfait du résultat obtenu),
  • la deuxième vous permettra d’effacer votre historique,
  • la troisième vous donnera la possibilité de voir le code CSS généré de façon basique ou minimifiée et éventuellement de l’exporter (copier-coller).

7. L’onglet des partages, du mode plein écran et de fermeture du plugin.

Inspecteur CSS Hero - 7/8/9
Ces trois derniers onglets vous permettront de faire la promotion de CSS Hero sur vos réseaux sociaux, de passer en mode plein écran et de sortir du mode CSS Hero pour revenir au mode normal.

Si vous désirez en savoir plus sur CSS Hero, regardez cette vidéo :

 

Les avantages à utiliser CSS Hero

Bien sûr qu’il y a des avantages à utiliser CSS Hero !

Notamment si vous n’y connaissez rien en langage CSS et HTML et que vous ne souhaitez pas approfondir le sujet mais également pour parvenir à changer certains éléments qui donnent du fil à retordre lorsqu’on essai de les modifier de manière traditionnelle…

On peut aussi utiliser certains styles pré-faits, c’est une option plutôt sympa… Sans oublier qu’il est très facile de faire marche-arrière si le rendu final ne nous convient pas grâce à l’onglet dédié au “versionning” (historique des changements) ou au bouton “reset”.

Enfin, avec CSS Hero, il est vraiment facile de définir les règles CSS associées à chaque type d’écran, l’écriture de la partie responsive gérée par les Media Queries devient alors un jeu d’enfant…

 

Les inconvénients apportés par CSS Hero

Le premier des inconvénients est certainement le tarif ! En effet, il faudra souscrire à une licence annuelle de 29$ht pour pouvoir utiliser CSS Hero sur 1 seul site, “l’inspecteur pro” quant à lui arrive dès la formule 5 sites pour 59$ht par an.

Ce n’est pas vraiment excessif mais ce qui me gêne c’est le fait que les styles CSS générés sont stockés dans le plugin… Cela signifie que si vous désactivez le plugin sur le site et bien … SURPRISE ! Votre customisation disparait comme neige au soleil ! Cela sous-entend que vous serrez tenu de renouveler votre abonnement chaque année à moins d’en exporter le CSS généré pour le stocker au sein de vos fichiers de thème.

Ensuite, on se pose la question “existentielle” du poids généré par le plugin… J’ai alors fais un petit test Pingdom. Bien que je ne soit pas non plus spécialiste en la matière, le résultat est sans équivoque : sur une simple page – où j’ai effectué moins d’une dizaine d’actions à l’aide de CSS Hero – le temps de chargement a presque doublé passant de 498ms à 916ms et 4 requêtes on été ajoutées, la preuve ci-dessous :

Test Pingdom Tools

Enfin, il faut garder à l’esprit que CSS Hero peut être en conflit avec votre site ! Pensez donc à vérifier la compatibilité avec votre thème et vos plugins avant de l’acheter.

 

Et sinon… Comment modifier le CSS sans CSS Hero ?

Inspecteur Firefox

Toutefois, il vous restera la bonne vieille méthode ! Si vous êtes tout nouveau dans le web et notamment sur WordPress, sachez que vous pouvez parvenir au même résultat obtenu avec CSS Hero en seulement 5 étapes :

  1. Du côté du front-end, faites un clic-droit sur l’élément que vous souhaitez modifier et choisissez “examiner l’élément” (sous Firefox) ou “inspecter” (sous Chrome). Un panneau va s’ouvrir.
  2. Sélectionnez le petit symbole de l’inspecteur, placé en haut à gauche du panneau.
  3. Survolez votre page jusqu’à mettre en surbrillance l’élément que vous souhaitez modifier. Cliquez dessus.
  4. Sur la droite du panneau, vous pourrez effectuer vos modifications afin d’obtenir un résultat en temps réel. Ne craignez pas de faire des erreurs, l’inspecteur n’agit pas sur votre site, il effectue les changements dans le navigateur seulement…
  5. Ensuite, vous pourrez reporter ces résultats dans l’onglet Apparence > Personnaliser > CSS additionnel dans l’administration de votre site WordPress.

Je ne vous cache pas qu’il faudra avoir quelques connaissances … Vous pouvez faire un tour sur ce site qui explique très bien le mécanisme du langage CSS ou bien sur celui-ci qui est une référence en la matière…

 

En bonus : CSS Hero Animator

CSS HERO Animator

En parcourant le site de CSS Hero, j’ai découvert l’existence d’un plugin gratuit permettant d’ajouter facilement n’importe quelle animation CSS sur n’importe quel élément de la page. Cela m’a remémoré un billet que j’avais écris il y a quelques temps sur la manière d’intégrer des animations à l’aide d’Animate CSS. Ayant testé les deux, je trouve CSS Hero Animator très efficace puisqu’il rend l’intégration ultra facile et vous fera gagner du temps !

 

En conclusion

On trouvera toujours deux écoles : pour / contre, et ce, pour n’importe quel domaine ! Toutefois, CSS Hero a soulevé quelques réflexions :

  • si on utilise la version “1 site”, cela sera-t-il suffisant puisque l’inspecteur pro n’est pas inclus dans l’offre ?
  • si on souscrit à la version “5 sites” ou même à la version “999 sites”, on est sensé être un “pro”, n’est-ce pas ? Aura-t-on donc vraiment besoin de ce plugin dans ce cas ?

En fait, l’idéal serait que l’inspecteur pro soit disponible séparément de CSS Hero…
Et vous, qu’en pensez-vous ?

wpformation
NE MANQUEZ PLUS RIEN !
Inscrivez-vous pour recevoir le meilleur de WordPress dans votre boîte de réception, chaque mois.

Nous ne spammons pas ! Consultez notre politique de confidentialité pour plus d’informations.

A propos de l'auteur...

Avatar de Lycia Diaz

Lycia Diaz

Consultante et formatrice WordPress, j'adore découvrir, tester et partager mes expériences. Mais ce qui me passionne, c'est entreprendre & accomplir de nouveaux projets comme la rédaction de mon livre "Je crée mon site avec WordPress" aux Éditions Eyrolles et l'animation de mes deux blogs : la-webeuse.com et astucesdivi.com.

7 commentaires pertinents à ce jour ;)

  • merci beaucoup pour le test de ce plugin et pour la proposition de l’alternative que représente CSS Hero Animator. J’ai néanmoins une question, le code obtenu par l’utilisation de CSS Hero Animator n’est-il pas trop lourd?

  • Bonjour Lycia et merci pour votre article
    j’ai utilisé Css Hero il y a quelques années sur certains de mes sites WordPress et à l’époque, cela m’a beaucoup aidé,
    Je reviens juste sur le point où vous dites que l’on ne peut pas conserver le CSS généré si on désactive le plugin.
    Ce n’est pas totalement exact. Certes la désactivation fait disparaître la customisation. Pour y remédier, il suffit très simplement, avant la désactivation, de copier le CSS, accessible sous l’onglet “tools” puis “show generated CSS” – Il est même possible d’exporter le CSS généré ! Il n’y a a plus qu’à le reporter sur l’espace prévu par son thème pour les ajouts de CSS.On n’a alors plus besoin du plugin (cf la doc de l’éditeur : http://www.csshero.org/docs/show-generated-css/)

  • bonjour,
    oui le code généré par le plugin est assez lourd : l’auteur a bien comparé et avec ce plugin le temps de chargement a presque doublé ce qui n’est pas bon du tout !

  • @Patricia : oui merci Patricia pour la précision mais je l’explique également dans l’article, dans le chapitre “Les inconvénients apportés par CSS Hero” (c’est en caractères gras)…

  • Merci pour cet article mais franchement autant utiliser l’outil de développement Gratuit de chrome ou firefox qui demande certes quelques connaissances CSS, mais même avec CSSHERO c’est loin d’être inutile..

  • Bonsoir @donibane, pour répondre à votre question : je ne pense pas que CSS Hero Animator alourdisse votre site… à vérifier tout de même !

  • Punaise modifier l’article d’après les commentaires je trouve ça génial !
    Presque aucun rédacteur ne le fait. Du coup c’est un vrai échange.
    Merci Lycia.