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

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.

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

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

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”

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

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

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

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.

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 :

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 ?

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

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 ?