Om du är en av de många Beginnare som vill customize din WordPress site design utan att röra CSS, då har du tur.
CSS Hero plugin för WordPress allow you to customize the design without touching a single line of code.
I denna uppdaterade CSS Hero review, kommer vi att visa dig hur du använder CSS Hero för att customize din website och varför vi anser att det är ett av de tillägg som varje WordPress nybörjare bör prova.
Our CSS Hero Review
CSS Hero är ett premium WordPress plugin som allow you att designa your egen WordPress theme utan att skriva en enda rad kod (ingen HTML eller CSS obligatorisk).
Du kan snabbt ångra ändringar, vilket är till stor hjälp för Beginnare. Alla ändringar sparas som en extra stylesheet, så att du kan update your WordPress theme utan att behöva oroa dig för att ändringarna ska gå förlorade.
Du kommer att tycka att CSS Hero är lika bra om du är designer eller utvecklare. Det fungerar bra med alla populära teman och ramverk för WordPress. Du kan snabbt ändra ett tema eller barntema och exportera det till en kunds website.
CSS Hero kan save you tid och frustration när du gör design customizes.
CSS Hero vs. page builders i WordPress
CSS Hero är ett designverktyg och inte en idealisk lösning för att skapa landing pages eller skapa ett custom WordPress theme from scratch.
Det fungerar med ditt WordPress theme och allow you to customize CSS utan att skriva CSS-kod.
Å andra sidan tillåter ett WordPress page builder plugin dig att skapa landing pages och customize layouts oavsett vilket WordPress theme du använder.
Pro Tips: Om du vill skapa landing pages, försäljningssidor, produktsidor och mer, rekommenderar vi att du använder SeedProd. Det är den bästa page builder plugin för WordPress, allow you to design high-converting and beautiful pages for your website quickly.
Hur man använder CSS Hero för att Customize ditt WordPress Theme
Först måste du installera och aktivera CSS Hero plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.
Det är ett premium WordPress plugin med priser från $29 för en enda site (helt värt investeringen, med tanke på den tid och krångel det kommer att save you).
Du kan använda CSS Hero kupongkod: WPBEGINNER för att få en specialrabatt på 34% rabatt. Om du köper Pro planen, kommer samma kod att ge dig en 40% rabatt.
Du kommer att omdirigeras för att få din CSS Hero License key vid aktivering. Följ instruktionerna på skärmen och du kommer att redirectas tillbaka till din site med några clicks.
CSS Hero syftar till att ge dig ett WYSIWYG-gränssnitt (vad du ser är vad du får) för att editera ditt theme.
Besök bara din WordPress website när du är inloggad, så kommer du att notera knappen CSS Hero i WordPress admin bar.
Om du klickar på knappen konverteras din site till en live preview.
Du kommer nu att kunna se CSS Hero Editor. Den har en toolbar högst upp och längst ner, en vänster column och en live preview av din website.
Därefter för du muspekaren till ett element som du vill editera, och CSS Hero markerar det för att visa var du är.
Om du klickar på den väljer du elementet och visar dess egenskaper i den vänstra colonnen.
Dessa kommer att innehålla vanliga CSS-egenskaper för det valda elementet, gillar bakgrund, typografi, gränser, avstånd och mer.
Du kan clicka på ett objekt för att förstora det och sedan editera CSS-egenskaperna med hjälp av ett enkelt användargränssnitt.
När du gör ändringar visas den anpassade CSS:en magiskt under.
Om du lär dig CSS kommer du att tycka att det är bra att se hur olika CSS-ändringar tillämpas med resultatet i Live Preview.
Har du problem med att hitta gratis images till din website?
CSS Hero har också en built-in Unsplash-integration, vilket allow you att browsing, search, and use beautiful photographs in your website’s design.
CSS Hero kommer också med några färdiga snippor som du kan tillämpa på olika element på din website.
Byt till tabben ”Snippets” i den vänstra colonnen, så kommer you att se en massa vanliga element listade där.
Du kan clicka för att välja ett element, och CSS Hero visar dig olika stilvarianter.
Klicka på knappen ”Set Params” för att edit en Styling som you gillar och klicka sedan på knappen ”Tillämpa” för att add to den till your theme.
När du gör ändringar på din website kommer CSS Hero att autospara dessa ändringar men ej publicera dem.
För att tillämpa dessa ändringar på din website klickar du på knappen ”Save and Publicera” längst ner till höger på vyn.
Hur man ångrar ändringar i CSS Hero
En av de bästa funktionerna i CSS Hero är möjligheten att när som helst ångra alla ändringar du gör.
CSS Hero håller en historik över alla ändringar du gör i ditt theme. Klicka bara på knappen Historik i toolbaren i CSS Hero för att se listan över ändringar. Den här knappen gillar en liten klocka.
You can click on a date and time to see what your site looked like at that time. Om du vill återgå till det tillståndet, save eller återuppta edit från den punkten.
Det betyder inte att ändringar som you gjort efter den tidpunkten kommer att försvinna. De kommer fortfarande att vara lagrade; you can also revert to that time. Det blir inte enklare än så.
Men tänk om du bara vill återställa ändringar som du har gjort på ett visst objekt?
I så fall behöver du inte använda historikverktyget. Klicka på det element som du vill återställa till en tidigare version och klicka sedan på knappen ”Återställ”.
Detta kommer att ändra objektet tillbaka till standardinställningarna som definieras av ditt WordPress-tema.
Customize din webbplats för mobila enheter i CSS Hero
Den mest utmanande aspekten av webbdesign är kompatibilitet med enheter. You need to ensure your site looks equally impressive on all devices and screen sizes.
Webbdesigners använder olika tools för att testa kompatibilitet med webbläsare och enheter. Tur för dig, CSS Hero kommer med ett built-in preview tool.
Välj bara mellan mobila enheter, surfplattor och stationära enheter i toolbaren högst upp. The preview area kommer att ändras till din valda device. Du kan också toggle mellan lägena ”Edit” och ”Navigation” för att dölja andra toolbars.
Switching to the ”Edit” mode will allow you to edit your site while previewing it for mobile devices. Det här verktyget är praktiskt för att tweaka ditt temas design för mobiler och surfplattor.
Kompatibilitet med CSS Hero Theme
Den officiella CSS Hero website har en ständigt växande lista över kompatibla themes. Denna lista innehåller många av de bästa gratis WordPress themes.
Det har också de mest populära premiumteman från butiker som Astra, Divi, CSSIgniter, Themify, StudioPress och mer.
Hur är det med themes som ej finns med på Theme Compatibility List?
CSS Hero kommer med en utvald funktion som anropas Rocket Mode Auto-detection. Om du använder ett theme som ej finns med i temats kompatibilitetslista kommer CSS Hero automatiskt att börja använda Rocket Mode.
Rocket Mode försöker gissa CSS-selektorerna från your theme. Detta fungerar perfekt för det mesta. Om ditt theme följer WordPress kodningsstandarder kommer du att kunna edit nästan allt.
You may also want to contact your theme developer and ask them to provide compatibility with CSS Hero.
Vilka tillägg är kompatibla med CSS Hero?
CSS Hero testas regelbundet med de bästa tillägg till WordPress för kompatibilitet.
Dessa inkluderar plugins för kontaktformulär, populära page builders, WooCommerce och andra.
Om du använder ett tillägg till WordPress som genererar en output som inte kan editeras av CSS Hero, kan du be författaren till tillägget att fixa det. De behöver inte göra mycket för att tillhandahålla kompatibilitet med CSS Hero.
För mer detaljer, se vår guide om hur man korrekt ber om support för WordPress och får det.
Vi hoppas att du tyckte att vår CSS Hero review var användbar. Du kanske också vill se vår ultimata guide om att förbättra WordPress hastighet och prestanda för nybörjare och vår jämförelse av de bästa WordPress page builders för att designa ditt tema och webbplatsens sidor utan att använda CSS.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
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.
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
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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?
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.
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.
Administratör
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
Louis
Can’t find CSS HERO in the plugins
WPBeginner Support
Hey Louis,
CSS Hero is a paid plugin available from its own website.
Administratör
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 …
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
WPBeginner Support
Hi Enn,
No, it is a WordPress plugin and would work on any WordPress installation.
Administratör
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.
WPBeginner Support
Hi Jerry,
Thank you for kind words. Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Administratör
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
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.
Administratör
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.
Administratör
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 ???
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?
Phermiki Phawa
How to make my blog become friendly with mobiles?
Bhaskar Dhiman
sir how we can compress the theme coding manually ? i am using newspaper 7.
Darshan Gajara
Wow! It’s a real hero.
Andy V.
Can CSS Hero be used with premium themes purchased on WordPress.com?
WPBeginner Support
No it cannot be used on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administratör
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.
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 ?
WPBeginner Support
Please contact CSS Hero support.
Administratör
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.
Administratör
Juliette
Amazing! It’s really what I need.
Working like a charm with DIVI and GENESIS!
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
Administratör
Louise Findlay
Yes. I have been looking for something like this for a while.
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.
Administratör