Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Avis sur CSS Hero : Outil de personnalisation du Design sur mesure de WordPress

Si vous faites partie des nombreux débutants qui souhaitent personnaliser le design de leur site WordPress sans toucher au CSS, vous avez de la chance.

L’extension CSS Hero pour WordPress vous permet de personnaliser le design sans toucher à une seule ligne de code.

Dans cet Avis CSS Hero mis à jour, nous allons vous afficher comment utiliser CSS Hero pour personnaliser votre site Web et pourquoi nous pensons que c’est l’une des extensions que tout débutant WordPress devrait essayer.

Reviewing CSS Hero, web design tool for WordPress

Avis sur notre bannière d’accroche CSS

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

Vous pouvez annuler les modifications rapidement, ce qui est extrêmement utile pour les débutants. Toutes les modifications sont enregistrées en tant que feuille de style supplémentaire, ce qui vous permet de mettre à jour votre thème WordPress sans craindre de perdre les modifications.

Vous trouverez CSS Hero aussi bien pour les développeurs/développeuses que pour les designers. Il fonctionne bien avec tous les thèmes et frameworks WordPress courants. Vous pouvez rapidement modifier un thème ou un thème enfant et l’exporter vers le site d’un client.

Outil de personnalisation CSS peut vous faire gagner du temps et vous épargner des frustrations lorsque vous personnalisez votre design.

CSS Hero vs. les constructeurs de pages WordPress

Outil de personnalisation, CSS Hero n’est pas la solution idéale pour créer des pages d’atterrissage ou réaliser un thème WordPress personnalisé à partir de zéro.

Il fonctionne avec votre thème WordPress et vous permet de personnaliser le CSS sans écrire de code CSS.

D’autre part, un plugin de constructeur de page WordPress vous permet de créer des pages d’atterrissage et de personnaliser les mises en page quel que soit le thème WordPress que vous utilisez.

Astuce de pro : Si vous voulez faire des pages d’atterrissage, des pages de vente, des pages de produits, et plus encore, nous vous recommandons d’utiliser SeedProd. C’est le meilleur plugin de constructeur de page WordPress, vous permettant de concevoir rapidement de belles pages à fort taux de conversion pour votre site.

Comment utiliser CSS Hero pour personnaliser votre thème WordPress

Tout d’abord, vous devez installer et activer la bannière d’accroche CSS Hero. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Il s’agit d’une extension WordPress premium dont les prix commencent à 29 $ pour un seul site (cela vaut totalement l’investissement, compte tenu du temps et des tracas qu’elle vous enregistrera).

Vous pouvez utiliser le code promo CSS Hero: WPBEGINNER pour obtenir une remise spéciale de 34% inactif. Si vous achetez l’offre PRO, le même code vous permettra d’obtenir une remise de 40%.

Vous serez redirigé pour obtenir votre clé de licence CSS Hero lors de l’activation. Suivez les instructions à l’écran, et vous serez redirigé vers votre site en quelques clics.

CSS Hero a pour but de vous fournir une interface WYSIWYG (what you see is what you get) pour modifier votre thème.

Il vous suffit de vous connecter à votre site WordPress en étant connecté, et vous remarquerez le bouton CSS Hero dans la barre d’administration de WordPress.

CSS Hero button in WordPress admin toolbar

En cliquant sur le bouton, vous obtiendrez une Prévisualisation en direct de votre site.

Vous pouvez maintenant voir l’éditeur/éditrices CSS Hero. Il dispose d’une barre d’outils supérieure et inférieure, d’une colonne de gauche et d’une prévisualisation en direct de votre site.

CSS Hero user interface

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

En cliquant dessus, l’élément est sélectionné et ses propriétés sont affichées dans la colonne de gauche.

Properties you can edit for an element

Il s’agit des propriétés CSS courantes de l’élément sélectionné, telles que l’arrière-plan, la typographie, les bordures, l’espacement, etc.

Vous pouvez cliquer sur n’importe quel article pour le déplier et modifier les propriétés CSS à l’aide d’une interface/utilisatrice simple.

Background properties

Au fur et à mesure des modifications, le CSS personnalisé apparaît comme par magie en 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 la Prévisualisation directe.

CSS code preview

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

CSS Hero dispose également d’une intégration Unsplash, vous permettant de parcourir, rechercher et utiliser de magnifiques photographies dans la conception de votre site.

Unsplash integration

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

Passez à l’onglet « Extraits » dans la colonne de gauche, et vous verrez un tas d’éléments communs répertoriés.

Use snippets

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

Cliquez sur le bouton « Réglages » pour modifier un style qui vous plaît, puis cliquez sur le bouton « Appliquer » pour l’ajouter à votre thème.

Apply a snippet style

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

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

Save and publish your changes

Comment annuler des modifications dans la bannière d’accroche CSS

L’une des meilleures fonctionnalités de CSS Hero est la possibilité d’annuler à tout moment les modifications effectuées.

CSS Hero conserve un historique de toutes les modifications que vous apportez à votre thème. Il suffit de cliquer 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.

History revisions

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 apportées après cette date disparaîtront. Elles seront toujours stockées ; vous pouvez également revenir à ce moment-là. Il n’y a rien de plus simple.

Mais qu’en est-il si vous souhaitez uniquement annuler les modifications apportées à un article particulier ?

Dans ce cas, il n’est pas nécessaire d’utiliser l’outil historique. Cliquez sur l’élément que vous souhaitez ramener à une version antérieure, puis cliquez sur le bouton « Réinitialiser ».

Reset edits for an element

Cette modification ramène l’article aux Réglages par défaut définis par votre thème WordPress.

Outil de personnalisation de votre site pour les Appareils mobiles avec la bannière d’accroche CSS

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

Les concepteurs de sites Web utilisent divers outils pour tester la compatibilité des navigateurs et des appareils. Heureusement pour vous, CSS Hero est doté d’un outil de prévisualisation intégré.

Il suffit de choisir entre les appareils mobiles, les tablettes et les ordinateurs de bureau dans la barre d’outils supérieure. La zone de prévisualisation se modifie en fonction de l’appareil sélectionné. Vous pouvez également permuter entre les modes « Modifier » et « Naviguer » pour masquer les autres barres d’outils.

Preview on different devices

Le passage au mode  » Modifier  » vous permet de modifier votre site tout en le prévisualisant pour les appareils mobiles. Cet outil est pratique pour ajuster le design de votre thème pour les mobiles et les tablettes.

Compatibilité du thème CSS Hero

Le site officiel de CSS Hero propose une liste de thèmes compatibles qui ne cesse de s’allonger. Cette liste comprend un grand nombre des meilleurs thèmes WordPress gratuits.

Il dispose également des thèmes premium les plus populaires de boutiques comme Astra, Divi, CSSIgniter, Themify, StudioPress, et bien d’autres.

Qu’en est-il des thèmes qui ne figurent pas dans 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 ne figure pas dans la liste de compatibilité des thèmes, CSS Hero utilisera automatiquement le mode Rocket.

Rocket Mode 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, alors vous serez en mesure de modifier presque tout.

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

Quelles extensions sont compatibles avec CSS Hero ?

CSS Hero est régulièrement testé avec les principales extensions WordPress pour en assurer la compatibilité.

Il s’agit notamment des extensions de formulaires de contact, des constructeurs de pages les plus répandus, de WooCommerce, etc.

Si vous utilisez une extension WordPress qui génère une sortie qui n’est pas modifiable par CSS Hero, vous pouvez demander à l’auteur/autrice de l’extension de corriger cela. Ils n’ont pas besoin de faire grand-chose pour assurer la compatibilité avec CSS Hero.

Pour plus de détails, consultez notre guide sur la façon de demander correctement un support WordPress et de l’obtenir.

Nous espérons que vous avez trouvé notre avis sur CSS Hero utile. Vous pouvez é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 pages WordPress pour concevoir votre thème et les pages de votre site sans utiliser de CSS.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

48 commentairesLaisser une réponse

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. THANKGOD JONATHAN

    Thank you the post. You have made it really simple with this plugin to customize WordPress site. I will really try CSS Hero sometime.

  3. Ralph

    I had 3 websites for over 10 years on wordpress and I never touched CSS. I tried as I had to fix something that i couldn’t do in theme builder but that never turned around good. All tutorials were super complex and didn’t really help people who are not familiar with coding.

    Good to know there are alternatives now that can help less tech savy people to do what they just want to do, without learning new skill just to fix few small thing.

    • WPBeginner Support

      Glad we could share this plugin with you :)

      Administrateur

  4. Frank Biganski

    I have nearly ten years’ experience with WordPress and somewhat knowledgabe with CSS. I cannot write it but I can implement it with help.

    I purchased the CSS Hero plugin as they state it will work with LearnPress LMS plugin. However, after giving it a go, I found the plugin does not work with the LMS.

    I spoke with my very experienced theme developer (WPExplorer) and he stated, in short terms, the LearnPress plugin is complexly and somewhat poorly written, which will make the CSS Hero plugin not function properly.

    CSS Hero states a 30 day money back guarantee however after contacting them twice, and two weeks later, I still have not heard back from anyone at CSS Hero.

    Just beware about the warranty as it seem I will have to try and contact my credit card company and try to cancel.

    • WPBeginner Support

      Thank you for sharing your experience, just to be safe please be sure that any messages they may have sent are not caught in your spam folder.

      Administrateur

  5. Claire Smith

    Hi there,

    Does CSS Hero work with the Simple Membership plugin do you know? Many thanks

    • WPBeginner Support

      You would want to check with CSS Hero for any questions about current conflicts.

      Administrateur

  6. Richard

    I just started up a new website and have been crazy frustrated with the inability to customize themes very much. A lot of the controls are locked behind paying for a theme, but I’m not even sure if I like the theme enough to risk paying for it because I can’t edit everything enough. Will CSS Hero let me sidestep buying themes and edit the free versions?

    • WPBeginner Support

      It would depend on the customizations you are looking for, CSS hero will certainly help you customize your site without the need for a paid theme. You may want to take a look at their demo page on their site to see what the plugin is able to do.

      Administrateur

  7. Michael

    Amazing how good this is in the review. Maybe it’s got something to do with all of the affiliate links that you’ve got peppered throughout it to make referral money from it?

    I’m not saying that the plugin isn’t good, but these sort of reviews are hard to take seriously. If it was really good you could say so, but saying that it’s good on the same page as trying to make money from selling it makes it seem like a very big paid editorial advertisement for this plugin.

    • WPBeginner Support

      Hi Michael,

      At WPBeginner, we only recommend products that we have used and tested. Please see our disclaimer page to learn more about how we make money on this website.

      Administrateur

  8. Art

    I’m a little confused as to why you would use CSS Hero with a theme builder like Elementor or Divi other than seeing the code that is use for a certain element. Am I missing something?

  9. Jon Seager

    Hi thanks for letting me be the first questiner. Still have broblems showing them w/o the image box on the main page but on the single product page I was able to ditch the image then sqoosh the placehold off the screen to the left. It didn’t really squoosh but it did allow the text to start at a more respectable starting point.

    I would still love to speak to someone that has enough free time to allow me to hire on a task based relationship. I could use some help making a better searchbar with to and from date and then some plus much more work to do and could use a partner to divie up the tasks and work together.

  10. Samuel Lin

    Hi, found wpbeginner is really helpful for beginner as I am.
    One of the subsite under my multisite had installed with Affinity theme which we love very much.
    But when we added Buddypress plugin, the display of buddypress group admins and mods is wasting a lot of space especially on mobile

    Can we modify the layout of BP under Affinity using CSS Hero?
    Thanks,
    Sam

    • WPBeginner Support

      Hi Samuel,

      We are not sure, please contact the plugin author to learn if someone has tried it with BuddyPress and Affinity.

      Administrateur

  11. Erik

    Hello there,

    is this plugin compatible with Slider revolution (5.4) and Visual Composer?
    It could be a faster way in working with this – than with the others… in some cases.

    Love to hear from you!
    Erik

  12. Louis

    Can’t find CSS HERO in the plugins

  13. AnnaD

    Hello
    I’ve perchased this plugin but can’t use it: CSS Hero isn’t active
    but I can’t finf the way where can I activate it …

  14. Enn

    Hi,
    Very nice overview and the plugin itself looks really useful. I have downloaded the CSS Hero, but not able to start it up on my computer. Is this plugin meant for Mack only?

    Regards,

    Enn

  15. Jerry

    I just recently discovered WPB. Though I have been a WP site maintainer for several years i find that I am learning something new every time i view one of your tutorials. Thanks. I appreciate your efforts.

  16. Al

    Will this plug in remove the menus on a Pavillioin theme, one of the standard WordPress themes? I see how it is kind of like firebug in that you can identify the part of the code you want to change but this plug in will actually allow you to change it without knowing code, right? But will it remove the menu instead of changing color or location or whatever.

    Thanks

  17. Anthony

    Hi,

    I purchased a wordpress theme from theme forest and uploaded the theme to my wordpress builder. The site is being hosted by inmotion hosting. My question is, since i am using the wordpress site builder to work on my site, after I install the plug in for CSS Hero, will that button still appear on the top right of my site so i can edit the content when im using the wordpress web builder? or do i have to host my site to have that capability? i dont think it matters if someone else is hosting my site correct? as long as im using the wordpress builder? little ignorant to this and so im learning as I go. Thanks

    • WPBeginner Support

      Hi Anthony,

      If your theme follows the standard WordPress coding best practices then you will be able to use it with CSS Hero without any problems. If you cannot, then please contact your theme’s support.

      Administrateur

  18. Derek

    I have have just returned to a wordpress site to update but the CSSHERO plugin does not work even though it is visible on the page. Nothing happens when I hover over content even though CSSHero seems to be active. The plug in active (V 2.1) but I noticed that the current version is 2.3 but no notice to update?

    • WPBeginner Support

      Hi Derek,

      Please contact the plugin’s support team. For a quick work around, you can manually upload the plugin’s zip file.

      Administrateur

  19. THE VIP

    Isn’t it is same as Chrome Dev Tools….I didn’t found any considerable differences b/w CDT n CSS hero….

    BTW coupon code is not working for me too ???

  20. Jitka Hruzova

    I have Yuuta free theme. atm, I need this to be able to modify size, of my logo on the website ( using jetpack is terrible, it inserts the logo but it is a small and I can modify size or anything) is it going to work for me?

  21. Phermiki Phawa

    How to make my blog become friendly with mobiles?

  22. Bhaskar Dhiman

    sir how we can compress the theme coding manually ? i am using newspaper 7.

  23. Darshan Gajara

    Wow! It’s a real hero.

  24. Andy V.

    Can CSS Hero be used with premium themes purchased on WordPress.com?

  25. Juergen | webbeetle

    I followed the link and came to page with « Pricing Plans »… A big no-no for me! I understand that this is the most efficient way for any business to make money, but I have no plans to subscribe to any « plan » – other than my website hosting (where I stopped to be a « loyal customer » when the service and load times aren’t right).

    • CSS Hero

      There is no automatic subscription – you can renew every year if you want plugin updates – but the product WILL continue to work where it was installed – without paying each year.

  26. Tom

    Purchased your plugin, the first site i tried it on WordPress Stella Magazine Theme……didn’t fly.
    I’m disappointed
    What can we do ?

  27. Tom Tortorici

    If you’re changing the properties of, say, h2, can you change it for just one instance or one page, or can it only change all the h2’s throughout the site?

    • WPBeginner Support

      It can do both. For example you can create a custom class for h2 tags on a particular page.

      Administrateur

  28. Juliette

    Amazing! It’s really what I need.
    Working like a charm with DIVI and GENESIS!

  29. Monnie

    Hi, the discount code doesn’t seem to be working.

    • Editorial Staff

      I just tried it, and it seems to be loading just fine. Can you please try again :)

      Administrateur

  30. Louise Findlay

    Yes. I have been looking for something like this for a while.

  31. Saurabh Chatterjee

    Is it free ? if not, is there is any other visual css editor like this , which is free of cost ?

    • Editorial Staff

      This is not free as stated in the article. No you will not find any free visual editor like this one.

      Administrateur

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon 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.