Tutoriels WordPress de confiance, quand vous en avez le plus besoin.
Guide du débutant pour WordPress
WPB Cup
25 millions+
Sites web utilisant nos plugins
16+
Années d'expérience WordPress
3000+
Tutoriels WordPress par des experts

CSS Hero Review : La personnalisation du design WordPress simplifiée

Vous voulez apporter des modifications de conception que le personnaliseur intégré de WordPress ou même les constructeurs de pages n'offrent pas ? Le plugin CSS Hero vous permet de personnaliser ces éléments difficiles d'accès sans toucher à aucun code.

Nous utilisons souvent CSS Hero nous-mêmes lorsque nous devons ajuster des éléments de conception spécifiques – tels que les effets de survol, les espacements complexes ou les animations subtiles – qui nécessitent normalement du CSS personnalisé. C'est parfait pour ces ajustements visuels qui semblent simples mais nécessitent généralement des connaissances en codage.

Dans cet avis sur CSS Hero, nous vous montrerons comment utiliser CSS Hero pour personnaliser facilement l'apparence de votre site Web. Que vous ajustiez les styles de boutons ou que vous modifiiez des mises en page complexes, cet outil rend la personnalisation avancée accessible à tous.

Revue de CSS Hero, outil de conception web pour WordPress

Voici un aperçu des sujets que nous aborderons :

Qu'est-ce que CSS Hero ?

CSS Hero est un plugin WordPress premium qui vous permet de concevoir votre propre thème WordPress sans écrire une seule ligne de code (aucun HTML ou CSS requis).

Vous pouvez annuler les modifications apportées à la conception de votre conception WordPress rapidement, ce qui la rend extrêmement utile pour les débutants. Toutes les modifications sont enregistrées sous forme de feuille de style supplémentaire, vous pouvez donc mettre à jour votre thème WordPress sans craindre de perdre les modifications.

Vous trouverez CSS Hero tout aussi bon si vous êtes un designer ou un développeur. Il fonctionne bien avec tous les thèmes WordPress populaires et frameworks. Vous pouvez rapidement modifier un thème ou un thème enfant et l'exporter sur le site Web d'un client.

Comment nous avons utilisé et testé CSS Hero

Nous utilisons déjà CSS Hero dans plusieurs de nos tutoriels WordPress. C'est devenu notre solution de prédilection lorsque les lecteurs ont besoin d'apporter des ajustements de conception spécifiques sans coder.

Voici quelques exemples :

Pour cette évaluation, nous avons pris une mesure supplémentaire et installé CSS Hero sur un nouveau site de test. Nous avons parcouru chaque fonctionnalité et appliqué diverses personnalisations. Ces tests approfondis nous aident à identifier toute nouvelle capacité ou limitation que nous aurions pu manquer dans notre utilisation quotidienne.

Pourquoi faire confiance à WPBeginner ? 📣

Nous suivons les outils de personnalisation WordPress depuis 2009, testant chaque solution majeure qui arrive sur le marché. Avec autant de plugins disponibles, nous comprenons à quel point il peut être écrasant de choisir celui qui convient à votre site Web.

Nos recommandations proviennent de tests réels et d'une expérience pratique. Plus important encore, nous mettons constamment à jour nos connaissances à mesure que WordPress évolue. Lorsque des outils comme CSS Hero publient de nouvelles fonctionnalités ou mises à jour, nous les évaluerons et partagerons nos conclusions avec vous.

Pour plus d'informations, vous pouvez consulter nos directives éditoriales.

CSS Hero est-il un constructeur de pages WordPress ?

Non – CSS Hero et les constructeurs de pages servent des objectifs différents. CSS Hero est spécifiquement conçu pour apporter des ajustements de style à vos éléments de thème existants, tandis que les constructeurs de pages servent à créer des mises en page entièrement nouvelles.

Considérez CSS Hero comme un outil de personnalisation de design. Il vous permet de modifier les schémas de couleurs, l'espacement, la typographie et d'autres éléments visuels sans toucher au code, mais il ne vous aidera pas à créer de nouvelles pages à partir de zéro.

Page de destination de CSS Hero

Pour créer des mises en page personnalisées, des pages de destination ou des pages de vente, vous aurez besoin d'un constructeur de pages approprié comme SeedProd. C'est notre solution recommandée qui vous permet de construire n'importe quel type de page en utilisant des blocs par glisser-déposer, des modèles préconçus et de puissants contrôles de conception.

Vous pouvez consulter notre avis sur SeedProd pour plus d'informations.

Le plugin de création de pages WordPress SeedProd

Comment utiliser CSS Hero pour personnaliser votre thème WordPress

Tout d'abord, vous devez installer et activer le plugin CSS Hero. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Comme CSS Hero est un plugin WordPress premium, vous devez payer 29 $ pour un seul site. Cela dit, nous pensons que le prix vaut totalement l'investissement, compte tenu du temps et des tracas qu'il vous fera économiser.

Vous pouvez utiliser le code de coupon CSS Hero WPBEGINNER pour obtenir une réduction spéciale de 34%. Si vous achetez le plan PRO, le même code vous donnera une réduction de 40%.

Après l'activation, vous serez redirigé pour obtenir votre clé de licence CSS Hero. Suivez les instructions à l'écran, et vous serez redirigé vers votre site en quelques clics.

CSS Hero vise à vous fournir une interface WYSIWYG (ce que vous voyez est ce que vous obtenez) pour éditer votre thème.

Visitez simplement votre site Web WordPress pendant que vous êtes connecté, et vous remarquerez le bouton CSS Hero dans la barre d'administration de WordPress.

Bouton CSS Hero dans la barre d'outils d'administration WordPress

Cliquer sur le bouton convertira votre site en un aperçu en direct.

Vous pourrez maintenant voir l'éditeur CSS Hero. Il a une barre d'outils supérieure et inférieure, une colonne de gauche et un aperçu en direct de votre site Web.

Interface utilisateur de CSS Hero

Ensuite, passez votre souris sur un élément que vous souhaitez modifier, et CSS Hero le mettra en surbrillance pour indiquer où vous êtes.

Cliquer dessus sélectionnera cet élément et affichera ses propriétés dans la colonne de gauche.

Propriétés que vous pouvez modifier pour un élément

Celles-ci incluront les propriétés CSS courantes pour l'élément sélectionné, comme l'arrière-plan, la typographie, les bordures, l'espacement, et plus encore.

Vous pouvez cliquer sur n'importe quel élément pour l'agrandir, puis modifier les propriétés CSS à l'aide d'une interface utilisateur simple.

Propriétés d'arrière-plan

Au fur et à mesure que vous apportez des modifications, le CSS personnalisé apparaît comme par magie ci-dessous.

Si vous apprenez le CSS, vous trouverez utile de voir comment les différentes modifications CSS sont appliquées avec le résultat dans l'aperçu en direct.

Aperçu du code CSS

Vous avez du mal à trouver des images libres de droits pour votre site web ?

CSS Hero dispose également d'une intégration Unsplash intégrée, vous permettant de parcourir, rechercher et utiliser de belles photographies dans la conception de votre site web.

Intégration Unsplash

CSS Hero est également livré avec des extraits prêts à l'emploi que vous pouvez appliquer à différents éléments de votre site Web.

Passez à l'onglet « Extraits » dans la colonne de gauche, et vous verrez un tas d'éléments courants listés là.

Utiliser des extraits

Vous pouvez cliquer pour sélectionner un élément, et CSS Hero vous montrera différentes variations de style.

Cliquez sur le bouton « Définir les paramètres » pour modifier un style que vous aimez, puis cliquez sur le bouton « Appliquer » pour l'ajouter à votre thème.

Appliquer un style d'extrait

Une autre chose intéressante que CSS Hero peut faire est de personnaliser un élément spécifique sur des articles individuels ou certains types de modèles. Pour ce faire, accédez au paramètre « Mode de sélection » en haut à gauche de l'écran. Cela détermine l'étendue de vos personnalisations :

  • Normal : Vos modifications affectent toutes les instances de cet élément sur votre site
  • Uniquement celui-ci : Les modifications s'appliquent uniquement à l'élément spécifique que vous modifiez
  • Types de modèles/archives : Les modifications s'appliquent à toutes les pages utilisant ce modèle (comme les pages de catégorie)

Cette flexibilité vous permet d'apporter des modifications de conception ciblées exactement là où vous en avez besoin, sans affecter d'autres parties de votre site.

Passage en mode sélection de catégorie dans CSS Hero

Lorsque vous apportez des modifications à votre site web, CSS Hero enregistre automatiquement ces modifications mais ne les publie pas.

Pour appliquer ces modifications à votre site web en direct, cliquez sur le bouton « Enregistrer et publier » dans le coin inférieur droit de l'écran.

Enregistrer et publier vos modifications

Comment annuler les modifications dans CSS Hero

L'une des meilleures fonctionnalités de CSS Hero est la possibilité d'annuler toutes les modifications que vous apportez à tout moment.

CSS Hero conserve un historique de toutes les modifications que vous apportez à votre thème. Cliquez simplement sur le bouton d'historique dans la barre d'outils de CSS Hero pour voir la liste des modifications. Ce bouton ressemble à une petite horloge.

Révisions de l'historique

Vous pouvez cliquer sur une date et une heure pour voir à quoi ressemblait votre site à ce moment-là. Si vous souhaitez revenir à cet état, enregistrez ou reprenez la modification à partir de ce point.

Cela ne signifie pas que les modifications que vous avez apportées après ce point disparaîtront. Elles seront toujours stockées ; vous pouvez également revenir à ce moment-là. Il n'y a pas plus simple que ça.

Mais que faire si vous ne voulez annuler que les modifications apportées à un élément particulier ?

Dans ce cas, vous n'avez pas besoin d'utiliser l'outil d'historique. Cliquez sur l'élément dont vous souhaitez rétablir une version antérieure, puis cliquez sur le bouton « Réinitialiser ».

Réinitialiser les modifications pour un élément

Cela ramènera l'élément aux paramètres par défaut définis par votre thème WordPress.

Personnaliser votre site pour les appareils mobiles dans CSS Hero

L'aspect le plus difficile de la conception web est la compatibilité avec les appareils. Vous devez vous assurer que votre site est aussi impressionnant sur tous les appareils et toutes les tailles d'écran.

Les concepteurs web utilisent divers outils pour tester la compatibilité des navigateurs et des appareils. Heureusement pour vous, CSS Hero est livré avec un outil de prévisualisation intégré.

Sélectionnez un appareil mobile, une tablette ou un ordinateur de bureau dans la barre d'outils supérieure. La zone de prévisualisation changera pour cet appareil. Vous pouvez également basculer entre les modes « Modifier » et « Naviguer » pour masquer les autres barres d'outils.

Aperçu sur différents appareils

Passer en mode « Modifier » vous permettra de modifier votre site tout en le prévisualisant pour les appareils mobiles. Cet outil est pratique pour ajuster la conception de votre thème pour les mobiles et les tablettes.

CSS Hero est-il compatible avec tous les thèmes WordPress ?

Le site officiel de CSS Hero propose une liste de thèmes compatibles en constante expansion. Cette liste comprend plusieurs des meilleurs thèmes WordPress gratuits.

Il propose également les thèmes premium les plus populaires de boutiques comme Divi, CSSIgniter, Themify, StudioPress, Astra, et plus encore.

Qu'en est-il des thèmes qui ne figurent pas sur la liste de compatibilité des thèmes ?

CSS Hero est doté d'une fonctionnalité appelée Détection automatique du mode Rocket. Si vous utilisez un thème qui n'est pas inclus dans la liste de compatibilité des thèmes, CSS Hero commencera automatiquement à utiliser le mode Rocket.

Le mode Rocket essaie de deviner les sélecteurs CSS de votre thème. Cela fonctionne parfaitement la plupart du temps. Si votre thème respecte les normes de codage de WordPress, vous pourrez modifier presque tout.

Vous pouvez également contacter le développeur de votre thème et lui demander de fournir la compatibilité avec CSS Hero.

Quels plugins sont compatibles avec CSS Hero ?

CSS Hero est régulièrement testé avec les plugins WordPress les plus populaires pour assurer la compatibilité.

Ceux-ci incluent des plugins de formulaire de contact, des constructeurs de pages populaires, WooCommerce, et d'autres.

Si vous utilisez un plugin WordPress qui génère une sortie non modifiable par CSS Hero, vous pouvez demander à l'auteur du plugin de corriger cela. Il n'a pas besoin de faire beaucoup pour assurer la compatibilité avec CSS Hero.

Pour plus de détails, consultez notre guide sur comment demander correctement le support WordPress et l'obtenir.

Nous espérons que vous avez trouvé notre avis sur CSS Hero utile. Vous pourriez également consulter notre guide ultime sur l'amélioration de la vitesse et des performances de WordPress pour les débutants et notre comparaison des meilleurs constructeurs de thèmes WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

Avis : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons percevoir une commission. Voir comment WPBeginner est financé, pourquoi c'est important et comment vous pouvez nous soutenir. Voici notre processus éditorial.

La boîte à outils WordPress ultime

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tout professionnel devrait posséder !

Interactions des lecteurs

49 CommentsLeave a Reply

  1. Cette critique de CSS Hero est incroyablement complète et utile ! J'apprécie particulièrement l'explication détaillée de la façon dont elle diffère des constructeurs de pages comme SeedProd. En tant que personne qui a eu du mal avec la personnalisation CSS par le passé, la possibilité d'apporter des modifications sans coder et de les annuler facilement est révolutionnaire.
    L'intégration intégrée d'Unsplash et l'aperçu de la compatibilité des appareils sont des fonctionnalités fantastiques que je voudrais essayer.

    Cette critique m'a convaincu d'essayer CSS Hero.
    Merci pour une critique aussi informative et bien structurée !

  2. C'est un outil très utile. Parfois, quand j'avais besoin de modifier quelque chose sur mon site web, j'avais du mal à utiliser l'outil d'inspection de Firefox ou divers outils de développement d'autres navigateurs pour trouver la classe CSS que je devais ajuster, ce qui prenait souvent beaucoup de temps. Ensuite, j'ai dû recourir à l'édition CSS assistée par IA car je ne comprends pas le CSS moi-même. Cela change complètement la donne pour de telles modifications et simplifie grandement tout. Excellent outil !

  3. Merci pour la publication. Vous avez rendu la personnalisation d'un site WordPress vraiment simple avec ce plugin. J'essaierai vraiment CSS Hero un jour.

  4. J'ai eu 3 sites web pendant plus de 10 ans sur WordPress et je n'ai jamais touché au CSS. J'ai essayé car je devais corriger quelque chose que je ne pouvais pas faire dans le constructeur de thème, mais cela ne s'est jamais bien terminé. Tous les tutoriels étaient super complexes et n'aidaient pas vraiment les personnes qui ne sont pas familières avec le codage.

    Bon à savoir qu'il existe maintenant des alternatives qui peuvent aider les personnes moins douées techniquement à faire ce qu'elles veulent, sans apprendre une nouvelle compétence juste pour corriger quelques petites choses.

  5. J'ai près de dix ans d'expérience avec WordPress et je connais un peu le CSS. Je ne peux pas l'écrire mais je peux l'implémenter avec de l'aide.

    J'ai acheté le plugin CSS Hero car ils indiquent qu'il fonctionnera avec le plugin LearnPress LMS. Cependant, après l'avoir essayé, j'ai constaté que le plugin ne fonctionne pas avec le LMS.

    J'ai parlé avec mon développeur de thèmes très expérimenté (WPExplorer) et il a déclaré, en bref, que le plugin LearnPress est écrit de manière complexe et quelque peu médiocre, ce qui empêchera le plugin CSS Hero de fonctionner correctement.

    CSS Hero indique une garantie de remboursement de 30 jours, mais après les avoir contactés deux fois, et deux semaines plus tard, je n'ai toujours pas eu de nouvelles de qui que ce soit chez CSS Hero.

    Soyez juste prudent avec la garantie car il semble que je devrai contacter ma société de carte de crédit et essayer d'annuler.

    • Merci d'avoir partagé votre expérience, juste pour être sûr, veuillez vous assurer que tous les messages qu'ils ont pu envoyer ne sont pas dans votre dossier spam.

      Admin

  6. Bonjour,

    Est-ce que CSS Hero fonctionne avec le plugin Simple Membership, le savez-vous ? Merci beaucoup

    • Vous devriez vérifier auprès de CSS Hero pour toute question concernant les conflits actuels.

      Admin

  7. Je viens de lancer un nouveau site web et je suis extrêmement frustré par l'impossibilité de personnaliser beaucoup les thèmes. Beaucoup de contrôles sont verrouillés derrière un paiement pour un thème, mais je ne suis même pas sûr d'aimer suffisamment le thème pour risquer de le payer car je ne peux pas tout modifier suffisamment. CSS Hero me permettra-t-il de contourner l'achat de thèmes et de modifier les versions gratuites ?

    • Cela dépendra des personnalisations que vous recherchez, CSS Hero vous aidera certainement à personnaliser votre site sans avoir besoin d'un thème payant. Vous voudrez peut-être jeter un œil à leur page de démonstration sur leur site pour voir ce que le plugin est capable de faire.

      Admin

  8. Incroyable à quel point c'est bon dans l'avis. Peut-être que cela a quelque chose à voir avec tous les liens d'affiliation que vous avez parsemés tout au long pour en tirer de l'argent de référence ?

    Je ne dis pas que le plugin n'est pas bon, mais ce genre d'avis est difficile à prendre au sérieux. S'il était vraiment bon, vous pourriez le dire, mais dire qu'il est bon sur la même page que celle où vous essayez de gagner de l'argent en le vendant donne l'impression d'une très grosse publicité éditoriale payante pour ce plugin.

  9. Je suis un peu confus quant à la raison pour laquelle vous utiliseriez CSS Hero avec un constructeur de thème comme Elementor ou Divi, autre que pour voir le code utilisé pour un certain élément. Est-ce que je manque quelque chose ?

  10. Bonjour, merci de me permettre d'être le premier à poser une question. J'ai toujours des problèmes pour les afficher sans la boîte d'image sur la page principale, mais sur la page du produit unique, j'ai pu supprimer l'image puis faire glisser le placeholder hors de l'écran vers la gauche. Il ne s'est pas vraiment fait glisser, mais cela a permis au texte de commencer à un point de départ plus respectable.

    J'aimerais toujours parler à quelqu'un qui a assez de temps libre pour me permettre de l'embaucher sur une base de tâches. J'aurais besoin d'aide pour créer une meilleure barre de recherche avec des dates de début et de fin, puis beaucoup plus de travail à faire et j'aurais besoin d'un partenaire pour diviser les tâches et travailler ensemble.

  11. Salut, j'ai trouvé que wpbeginner est vraiment utile pour les débutants comme moi.
    L'un des sous-sites de mon multisite avait installé le thème Affinity que nous aimons beaucoup.
    Mais lorsque nous avons ajouté le plugin Buddypress, l'affichage des administrateurs et modérateurs de groupe buddypress prend beaucoup de place, surtout sur mobile

    Pouvons-nous modifier la mise en page de BP sous Affinity en utilisant CSS Hero ?
    Merci,
    Sam

  12. Bonjour,

    Ce plugin est-il compatible avec Slider Revolution (5.4) et Visual Composer ?
    Cela pourrait être une façon plus rapide de travailler avec celui-ci – qu'avec les autres… dans certains cas.

    J'ai hâte d'avoir de vos nouvelles !
    Erik

  13. Bonjour
    J'ai acheté ce plugin mais je ne peux pas l'utiliser : CSS Hero n'est pas actif
    mais je ne trouve pas comment l'activer…

  14. Salut,
    Très belle présentation et le plugin lui-même semble vraiment utile. J'ai téléchargé CSS Hero, mais je n'arrive pas à le démarrer sur mon ordinateur. Ce plugin est-il uniquement destiné aux Mac ?

    Cordialement,

    Enn

  15. J'ai découvert WPB récemment. Bien que je sois un mainteneur de sites WP depuis plusieurs années, je découvre quelque chose de nouveau à chaque fois que je consulte l'un de vos tutoriels. Merci. J'apprécie vos efforts.

  16. Ce plugin supprimera-t-il les menus sur un thème Pavillioin, l'un des thèmes WordPress standard ? Je vois comment il est un peu comme Firebug dans le sens où vous pouvez identifier la partie du code que vous voulez changer, mais ce plugin vous permettra réellement de le changer sans connaître le code, n'est-ce pas ? Mais supprimera-t-il le menu au lieu de changer la couleur ou l'emplacement ou autre chose ?

    Merci

  17. Bonjour,

    J'ai acheté un thème WordPress sur Theme Forest et j'ai téléchargé le thème sur mon constructeur WordPress. Le site est hébergé par InMotion Hosting. Ma question est, puisque j'utilise le constructeur de site WordPress pour travailler sur mon site, après avoir installé le plugin pour CSS Hero, ce bouton apparaîtra-t-il toujours en haut à droite de mon site pour que je puisse modifier le contenu lorsque j'utilise le constructeur de site Web WordPress ? ou dois-je héberger mon site pour avoir cette capacité ? je ne pense pas que cela ait d'importance si quelqu'un d'autre héberge mon site, n'est-ce pas ? tant que j'utilise le constructeur WordPress ? je suis un peu ignorant à ce sujet et j'apprends au fur et à mesure. Merci

    • Salut Anthony,

      Si votre thème suit les meilleures pratiques de codage standard de WordPress, vous pourrez l'utiliser avec CSS Hero sans aucun problème. Si ce n'est pas le cas, veuillez contacter le support de votre thème.

      Admin

  18. Je viens de revenir sur un site WordPress pour le mettre à jour, mais le plugin CSSHERO ne fonctionne pas, même s'il est visible sur la page. Rien ne se passe lorsque je survole le contenu, même si CSSHero semble actif. Le plugin est actif (V 2.1) mais j'ai remarqué que la version actuelle est 2.3 mais aucun avis de mise à jour ?

  19. N'est-ce pas la même chose que Chrome Dev Tools…. Je n'ai trouvé aucune différence considérable entre CDT et CSS Hero….

    D'ailleurs, le code promo ne fonctionne pas non plus pour moi ???

  20. J'ai le thème gratuit Yuuta. Pour l'instant, j'ai besoin de pouvoir modifier la taille de mon logo sur le site web (utiliser Jetpack est terrible, il insère le logo mais il est petit et je ne peux modifier ni la taille ni quoi que ce soit). Est-ce que cela va fonctionner pour moi ?

  21. Monsieur, comment pouvons-nous compresser le code du thème manuellement ? J'utilise Newspaper 7.

  22. J'ai suivi le lien et je suis arrivé sur une page avec "Plans tarifaires"... Un grand non pour moi ! Je comprends que ce soit le moyen le plus efficace pour toute entreprise de gagner de l'argent, mais je n'ai pas l'intention de m'abonner à un quelconque "plan" – autre que mon hébergement web (où j'ai arrêté d'être un "client fidèle" lorsque le service et les temps de chargement ne sont pas corrects).

    • Il n'y a pas d'abonnement automatique – vous pouvez renouveler chaque année si vous souhaitez des mises à jour du plugin – mais le produit continuera de fonctionner là où il a été installé – sans payer chaque année.

  23. J'ai acheté votre plugin, le premier site sur lequel je l'ai essayé avec le thème Wordpress Stella Magazine... ça n'a pas fonctionné.
    Je suis déçu
    Que pouvons-nous faire ?

  24. Si vous modifiez les propriétés de, disons, h2, pouvez-vous le modifier pour une seule instance ou une seule page, ou cela ne peut-il changer que tous les h2 du site ?

  25. Incroyable ! C'est vraiment ce dont j'ai besoin.
    Ça marche à merveille avec DIVI et GENESIS !

  26. Est-ce gratuit ? sinon, existe-t-il un autre éditeur visuel CSS comme celui-ci, qui est gratuit ?

Laisser un commentaire

Merci d'avoir choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.