Vill du göra designjusteringar som WordPress inbyggda anpassningsverktyg eller till och med sidbyggare inte erbjuder? CSS Hero-pluginet låter dig anpassa dessa svåråtkomliga element utan att röra någon kod.
Vi använder ofta CSS Hero själva när vi behöver justera specifika designelement – som hover-effekter, komplexa avstånd eller subtila animationer – som vanligtvis kräver anpassad CSS. Det är perfekt för de visuella justeringar som verkar enkla men vanligtvis kräver kodningskunskaper.
I denna CSS Hero-recension visar vi dig hur du använder CSS Hero för att enkelt anpassa din webbplats utseende. Oavsett om du finjusterar knappstilar eller justerar komplexa layouter, gör detta verktyg avancerad anpassning tillgänglig för alla.
Här är en översikt över de ämnen vi kommer att täcka:
- Vad är CSS Hero?
- Är CSS Hero en WordPress sidbyggare?
- Hur man använder CSS Hero för att anpassa ditt WordPress-tema
- Hur man ångrar ändringar i CSS Hero
- Anpassa din webbplats för mobila enheter med CSS Hero
- Är CSS Hero kompatibel med alla WordPress-teman?
- Vilka plugins är kompatibla med CSS Hero?
Vad är CSS Hero?
CSS Hero är ett premium WordPress-plugin som låter dig designa ditt eget WordPress-tema utan att skriva en enda kodrad (ingen HTML eller CSS krävs).
Du kan snabbt ångra ändringar i din WordPress-design, vilket gör det extremt hjälpsamt för nybörjare. Alla ändringar sparas som ett ytterligare stylesheet, så du kan uppdatera ditt WordPress-tema utan att behöva oroa dig för att förlora ändringarna.
Du kommer att finna CSS Hero lika bra om du är designer eller utvecklare. Det fungerar bra med alla populära WordPress-teman och ramverk. Du kan snabbt ändra ett tema eller ett barn-tema och exportera det till en kunds webbplats.
Hur vi använde och testade CSS Hero
Vi har faktiskt redan använt CSS Hero i många av våra WordPress-handledningar. Det har blivit vår lösning när läsare behöver göra specifika designjusteringar utan att koda.
Här är några exempel:
- Hur man lägger till anpassade stilar till WordPress-widgets
- Hur man stylar WordPress-navigeringsmenyer (uppdaterad)
- Hur man stylar enskilda kategorier olika i WordPress
För den här recensionen tog vi ett extra steg och installerade CSS Hero på en ny testwebbplats. Vi gick igenom varje funktion och tillämpade olika anpassningar. Denna noggranna testning hjälper oss att upptäcka nya funktioner eller begränsningar som vi kan ha missat i vår dagliga användning.
Varför lita på WPBeginner? 📣
Vi har spårat WordPress-anpassningsverktyg sedan 2009 och testat varje större lösning som kommer ut på marknaden. Med så många plugins tillgängliga förstår vi hur överväldigande det kan vara att välja rätt för din webbplats.
Våra rekommendationer kommer från verkliga tester och praktisk erfarenhet. Viktigast av allt är att vi ständigt uppdaterar vår kunskap i takt med att WordPress utvecklas. När verktyg som CSS Hero släpper nya funktioner eller uppdateringar, kommer vi att utvärdera dem och dela våra resultat med dig.
För mer information kan du kolla in våra redaktionella riktlinjer.
Är CSS Hero en WordPress sidbyggare?
Nej – CSS Hero och sidbyggare tjänar olika syften. CSS Hero är specifikt utformad för att göra stiljusteringar på dina befintliga temeelement, medan sidbyggare är för att skapa helt nya sidlayouter.
Tänk på CSS Hero som ett verktyg för designanpassning. Det låter dig finjustera färgscheman, avstånd, typografi och andra visuella element utan att röra koden, men det hjälper dig inte att bygga nya sidor från grunden.
För att skapa anpassade layouter, landningssidor eller försäljningssidor vill du ha en ordentlig sidbyggare som SeedProd. Det är vår rekommenderade lösning som låter dig bygga vilken typ av sida som helst med hjälp av dra-och-släpp-block, förgjorda mallar och kraftfulla designkontroller.
Du kan kolla in vår SeedProd-recension för mer information.
Hur man använder CSS Hero för att anpassa ditt WordPress-tema
Först måste du installera och aktivera pluginet CSS Hero. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Eftersom CSS Hero är ett premium WordPress-plugin måste du betala 29 USD för en enskild webbplats. Med det sagt, vi tycker att priset är helt värt investeringen, med tanke på den tid och besvär det kommer att spara dig.
Du kan använda kupongkoden CSS Hero kupong WPBEGINNER för att få en särskild rabatt på 34%. Om du köper PRO-planen får du 40% rabatt med samma kod.
Efter aktivering kommer du att omdirigeras för att hämta din CSS Hero licensnyckel. Följ instruktionerna på skärmen, och du kommer att omdirigeras tillbaka till din webbplats med några få klick.
CSS Hero syftar till att ge dig ett WYSIWYG (what you see is what you get) gränssnitt för att redigera ditt tema.
Besök helt enkelt din WordPress-webbplats medan du är inloggad, så kommer du att märka CSS Hero-knappen i WordPress adminfält.
Att klicka på knappen konverterar din webbplats till en liveförhandsgranskning.
Du kommer nu att kunna se CSS Hero-redigeraren. Den har en verktygsfält upptill och nertill, en vänster kolumn och en liveförhandsgranskning av din webbplats.
Flytta sedan musen över ett element som du vill redigera, och CSS Hero kommer att markera det för att visa var du är.
Att klicka på den väljer det elementet och visar dess egenskaper i den vänstra kolumnen.
Dessa kommer att inkludera vanliga CSS-egenskaper för det valda elementet, som bakgrund, typografi, kantlinjer, marginaler och mer.
Du kan klicka på vilket objekt som helst för att expandera det och sedan redigera CSS-egenskaperna med ett enkelt användargränssnitt.
När du gör ändringar dyker den anpassade CSS:en magiskt upp nedanför.
Om du lär dig CSS, kommer du att finna det hjälpsamt att se hur olika CSS-ändringar tillämpas med resultatet i förhandsgranskningen i realtid.
Har du problem med att hitta royaltyfria bilder för din webbplats?
CSS Hero har också en inbyggd Unsplash-integration, som låter dig bläddra, söka och använda vackra fotografier i din webbplats design.
CSS Hero kommer också med några färdiga kodavsnitt som du kan applicera på olika element på din webbplats.
Växla till fliken 'Snippets' i den vänstra kolumnen, så ser du en massa vanliga element listade där.
Du kan klicka för att välja ett element, och CSS Hero kommer att visa dig olika stilvariationer.
Klicka på knappen 'Set Params' för att redigera en stil du gillar, och klicka sedan på knappen 'Apply' för att lägga till den i ditt tema.
En annan cool sak som CSS Hero kan göra är att anpassa ett specifikt element på enskilda inlägg eller vissa malltyper. För att göra detta, navigera till inställningen 'Val-läge' längst upp till vänster på skärmen. Detta avgör hur brett dina anpassningar kommer att tillämpas:
- Normalt: Dina ändringar påverkar varje förekomst av det elementet på hela din webbplats
- Endast detta: Ändringar gäller endast det specifika element du redigerar
- Mall-/arkivtyper: Ändringar gäller alla sidor som använder den mallen (som kategorisidor)
Denna flexibilitet låter dig göra riktade designändringar exakt där du behöver dem, utan att påverka andra delar av din webbplats.
När du gör ändringar på din webbplats sparar CSS Hero automatiskt dessa ändringar men publicerar dem inte.
För att tillämpa dessa ändringar på din live-webbplats, klicka på knappen ‘Spara och publicera’ längst ner till höger på skärmen.
Hur man ångrar ändringar i CSS Hero
En av de bästa funktionerna i CSS Hero är möjligheten att ångra alla ändringar du gör när som helst.
CSS Hero håller en historik över alla ändringar du gör i ditt tema. Klicka helt enkelt på historikknappen i CSS Heros verktygsfält för att se listan över ändringar. Denna knapp ser ut som en liten klocka.
Du kan klicka på ett datum och en tid för att se hur din webbplats såg ut vid den tidpunkten. Om du vill återgå till det tillståndet, spara eller fortsätt redigeringen från den punkten.
Detta betyder inte att ändringar du gjorde efter den tidpunkten kommer att försvinna. De kommer fortfarande att lagras; du kan också återgå till den tidpunkten. Enklare än så blir det inte.
Men tänk om du bara vill ångra ändringar du har gjort på ett specifikt objekt?
I så fall behöver du inte använda historikverktyget. Klicka på elementet du vill återställa till en tidigare version och klicka sedan på knappen 'Återställ'.
Detta kommer att återställa objektet till standardinställningarna som definieras av ditt WordPress-tema.
Anpassa din webbplats för mobila enheter med CSS Hero
Den mest utmanande aspekten av webbdesign är enhetskompatibilitet. Du måste se till att din webbplats ser lika imponerande ut på alla enheter och skärmstorlekar.
Webbdesigners använder olika verktyg för att testa webbläsar- och enhetskompatibilitet. Lyckligtvis för dig kommer CSS Hero med ett inbyggt förhandsgranskningsverktyg.
Välj en mobil-, surfplatta- eller stationär enhet i verktygsfältet högst upp. Förhandsgranskningsområdet ändras till den enheten. Du kan också växla mellan lägena 'Redigera' och 'Navigera' för att dölja andra verktygsfält.
Att växla till 'Redigera'-läget gör att du kan redigera din webbplats medan du förhandsgranskar den för mobila enheter. Detta verktyg är praktiskt för att finjustera ditt temas design för mobiler och surfplattor.
Är CSS Hero kompatibel med alla WordPress-teman?
Den officiella CSS Hero-webbplatsen har en ständigt växande lista över kompatibla teman. Denna lista inkluderar många av de bästa gratis WordPress-teman.
Den har också de mest populära premiumteman från butiker som Divi, CSSIgniter, Themify, StudioPress, Astra, och fler.
Vad händer med teman som inte finns på listan över temakompatibilitet?
CSS Hero levereras med en funktion som kallas Rocket Mode Auto-detection. Om du använder ett tema som inte ingår i listan över temakompatibilitet, kommer CSS Hero automatiskt att börja använda Rocket Mode.
Rocket Mode försöker gissa CSS-väljarna från ditt tema. Detta fungerar perfekt mestadels. Om ditt tema följer WordPress kodstandarder, då kommer du att kunna redigera nästan allt.
Du kanske också vill kontakta din temautvecklare och be dem att ge kompatibilitet med CSS Hero.
Vilka plugins är kompatibla med CSS Hero?
CSS Hero testas regelbundet med topp WordPress-plugins för kompatibilitet.
Dessa inkluderar kontaktformulärspluginer, populära sidbyggare, WooCommerce och andra.
Om du använder ett WordPress-plugin som genererar en utdata som inte kan redigeras av CSS Hero, kan du be plugin-utvecklaren att åtgärda det. De behöver inte göra mycket för att ge kompatibilitet med CSS Hero.
För mer information, se vår guide om hur du korrekt ber om WordPress-support och får den.
Vi hoppas att du fann vår CSS Hero-recension 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-temabyggarna.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Dennis Muthomi
Den här CSS Hero-recensionen är otroligt omfattande och hjälpsam! Jag uppskattar särskilt den detaljerade förklaringen av hur den skiljer sig från sidbyggare som SeedProd. Som någon som har kämpat med CSS-anpassning tidigare är möjligheten att göra ändringar utan kodning och enkelt ångra dem en "game changer".
Den inbyggda Unsplash-integrationen och förhandsgranskningen av enhetskompatibilitet är fantastiska funktioner som jag skulle vilja prova.
Den här recensionen har övertygat mig om att prova CSS Hero.
Tack för en så informativ och välstrukturerad recension!
Jiří Vaněk
Detta är ett mycket användbart verktyg. Ibland, när jag behövde ändra något på min webbplats, kämpade jag med att använda Firefox inspektionsverktyg eller olika utvecklarverktyg från andra webbläsare för att hitta CSS-klassen jag behövde justera, vilket ofta tog lång tid. Sedan var jag tvungen att förlita mig på AI-assisterad CSS-redigering eftersom jag inte förstår CSS själv. Detta förändrar spelet helt för sådana ändringar och förenklar allt enormt. Bra verktyg!
THANKGOD JONATHAN
Tack för inlägget. Du har gjort det riktigt enkelt med detta plugin att anpassa Wordpress-webbplatsen. Jag kommer verkligen att prova CSS Hero någon gång.
Ralph
Jag hade 3 webbplatser i över 10 år på WordPress och jag rörde aldrig CSS. Jag försökte eftersom jag var tvungen att fixa något som jag inte kunde göra i temabyggaren, men det blev aldrig bra. Alla handledningar var superkomplexa och hjälpte inte riktigt personer som inte är bekanta med kodning.
Bra att veta att det nu finns alternativ som kan hjälpa mindre tekniskt kunniga personer att göra det de bara vill göra, utan att behöva lära sig nya färdigheter bara för att fixa några småsaker.
WPBeginner Support
Glad we could share this plugin with you
Admin
Frank Biganski
Jag har nästan tio års erfarenhet av WordPress och är ganska kunnig om CSS. Jag kan inte skriva det men jag kan implementera det med hjälp.
Jag köpte CSS Hero-pluginet eftersom de anger att det fungerar med LearnPress LMS-pluginet. Men efter att ha provat det fann jag att pluginet inte fungerar med LMS.
Jag pratade med min mycket erfarna temautvecklare (WPExplorer) och han uppgav, kort sagt, att LearnPress-pluginet är komplext och något dåligt skrivet, vilket gör att CSS Hero-pluginet inte fungerar korrekt.
CSS Hero utlovar en 30 dagars pengarna-tillbaka-garanti, men efter att ha kontaktat dem två gånger och två veckor senare har jag fortfarande inte hört tillbaka från någon på CSS Hero.
Var bara försiktig med garantin eftersom det verkar som att jag måste försöka kontakta mitt kreditkortsföretag och försöka avbryta.
WPBeginner Support
Tack för att du delar med dig av din erfarenhet, bara för säkerhets skull, se till att eventuella meddelanden de kan ha skickat inte hamnar i din skräppostmapp.
Admin
Claire Smith
Hej där,
Fungerar CSS Hero med pluginet Simple Membership, vet du? Tack så mycket
WPBeginner Support
Du bör kontakta CSS Hero för frågor om aktuella konflikter.
Admin
Richard
Jag startade precis en ny webbplats och har varit galet frustrerad över oförmågan att anpassa teman särskilt mycket. Många av kontrollerna är låsta bakom betalning för ett tema, men jag är inte ens säker på om jag gillar temat tillräckligt för att riskera att betala för det eftersom jag inte kan redigera allt tillräckligt. Kommer CSS Hero att låta mig kringgå köp av teman och redigera gratisversionerna?
WPBeginner Support
Det skulle bero på de anpassningar du letar efter, CSS Hero kommer säkert att hjälpa dig att anpassa din webbplats utan behov av ett betalt tema. Du kanske vill titta på deras demosida på deras webbplats för att se vad pluginet kan göra.
Admin
Michael
Fantastiskt hur bra det här är i recensionen. Kanske har det något att göra med alla affiliatelänkar som du har strött ut för att tjäna pengar på hänvisningar?
Jag säger inte att pluginet inte är bra, men den här typen av recensioner är svåra att ta på allvar. Om det verkligen var bra kunde du säga det, men att säga att det är bra på samma sida som att försöka tjäna pengar på att sälja det gör att det verkar som en mycket stor betald redaktionell reklam för detta plugin.
WPBeginner Support
Hej Michael,
På WPBeginner rekommenderar vi bara produkter som vi har använt och testat. Se vår friskrivningssida för att lära dig mer om hur vi tjänar pengar på den här webbplatsen.
Admin
Art
Jag är lite förvirrad över varför du skulle använda CSS Hero med en temabyggare som Elementor eller Divi, förutom att se koden som används för ett visst element. Missar jag något?
Jon Seager
Hej tack för att jag får vara den första frågeställaren. Har fortfarande problem med att visa dem utan bildrutan på huvudsidan, men på sidan för enskilda produkter kunde jag ta bort bilden och sedan trycka bort platshållaren från skärmen åt vänster. Den trycktes inte riktigt bort, men det tillät texten att börja från en mer respektabel utgångspunkt.
Jag skulle fortfarande älska att prata med någon som har tillräckligt med ledig tid för att låta mig anställa mig på en uppgiftsbaserad relation. Jag skulle behöva lite hjälp med att göra en bättre sökfält med från och till datum och sedan mycket mer arbete att göra och skulle behöva en partner att dela upp uppgifterna och arbeta tillsammans.
Samuel Lin
Hej, jag tycker att wpbeginner är väldigt hjälpsamt för nybörjare som jag.
En av undersajterna under min multisite hade installerat Affinity-temat som vi älskar väldigt mycket.
Men när vi lade till Buddypress-pluginet slösar visningen av buddypressgruppadministratörer och moderatorer mycket utrymme, särskilt på mobilen.
Kan vi ändra layouten för BP under Affinity med CSS Hero?
Tack,
Sam
WPBeginner Support
Hej Samuel,
Vi är inte säkra, vänligen kontakta plugin-utvecklaren för att få veta om någon har provat det med BuddyPress och Affinity.
Admin
Erik
Hej där,
är detta plugin kompatibelt med Slider Revolution (5.4) och Visual Composer?
Det kan vara ett snabbare sätt att arbeta med detta – än med andra… i vissa fall.
Kul att höra från dig!
Erik
Louis
Kan inte hitta CSS HERO i plugins
WPBeginner Support
Hej Louis,
CSS Hero är ett betalplugin som finns tillgängligt från dess egen webbplats.
Admin
AnnaD
Hej
Jag har köpt det här pluginet men kan inte använda det: CSS Hero är inte aktivt
men jag kan inte hitta hur jag kan aktivera det...
Enn
Hej,
Mycket bra översikt och pluginet i sig ser verkligen användbart ut. Jag har laddat ner CSS Hero, men kan inte starta det på min dator. Är det här pluginet endast avsett för Mac?
Med vänliga hälsningar,
Enn
WPBeginner Support
Hej Enn,
Nej, det är ett WordPress-plugin och skulle fungera på vilken WordPress-installation som helst.
Admin
Jerry
Jag upptäckte nyligen WPB. Även om jag har varit en underhållare av WP-sajter i flera år, upptäcker jag att jag lär mig något nytt varje gång jag tittar på en av dina handledningar. Tack. Jag uppskattar dina ansträngningar.
WPBeginner Support
Hej Jerry,
Tack för de vänliga orden. Glöm inte att följa oss på Twitter för fler WordPress-tips och handledningar.
Admin
Al
Kommer detta plugin att ta bort menyerna på ett Pavillioin-tema, ett av standardteman för Wordpress? Jag förstår hur det är lite som firebug genom att du kan identifiera den del av koden du vill ändra, men detta plugin kommer faktiskt att tillåta dig att ändra det utan att kunna kod, eller hur? Men kommer det att ta bort menyn istället för att ändra färg eller plats eller vad som helst.
Tack
Anthony
Hej,
Jag köpte ett WordPress-tema från Theme Forest och laddade upp temat till min WordPress-byggare. Webbplatsen hostas av InMotion Hosting. Min fråga är, eftersom jag använder WordPress webbplatsbyggare för att arbeta med min webbplats, kommer den knappen fortfarande att visas längst upp till höger på min webbplats så att jag kan redigera innehållet när jag använder WordPress webbbyggare, efter att jag har installerat pluginet för CSS Hero? Eller måste jag hosta min webbplats för att ha den möjligheten? Jag tror inte att det spelar någon roll om någon annan hostar min webbplats, eller hur? Så länge jag använder WordPress-byggaren? Jag är lite okunnig om detta och lär mig allt eftersom. Tack
WPBeginner Support
Hej Anthony,
Om ditt tema följer standardmässiga bästa praxis för WordPress-kodning, kommer du att kunna använda det med CSS Hero utan problem. Om du inte kan det, kontakta ditt temas support.
Admin
Derek
Jag har precis återvänt till en WordPress-sida för att uppdatera, men CSSHERO-pluginet fungerar inte trots att det är synligt på sidan. Ingenting händer när jag för muspekaren över innehåll, även om CSSHero verkar vara aktivt. Pluginet är aktivt (V 2.1), men jag märkte att den aktuella versionen är 2.3 men ingen uppmaning att uppdatera?
WPBeginner Support
Hej Derek,
Vänligen kontakta pluginets supportteam. För en snabb lösning kan du manuellt ladda upp pluginets zip-fil.
Admin
THE VIP
Är det inte samma sak som Chrome Dev Tools.... Jag hittade inga betydande skillnader mellan CDT och CSS Hero....
BTW kupongkoden fungerar inte för mig heller ???
Jitka Hruzova
Jag har Yuuta gratis tema. Just nu behöver jag detta för att kunna ändra storlek på min logotyp på webbplatsen (att använda jetpack är hemskt, det infogar logotypen men den är liten och jag kan inte ändra storlek eller något) kommer det att fungera för mig?
Phermiki Phawa
Hur gör jag min blogg mobilvänlig?
Bhaskar Dhiman
Herr, hur kan vi komprimera temakoden manuellt? Jag använder Newspaper 7.
Darshan Gajara
Wow! Det är en riktig hjälte.
Andy V.
Kan CSS Hero användas med premiumteman som köpts på WordPress.com?
WPBeginner Support
Nej, det kan inte användas på WordPress.com. Se vår guide om skillnaden mellan självhostad WordPress.org vs gratis WordPress.com-blogg.
Admin
Juergen | webbeetle
Jag följde länken och kom till en sida med "Prisplaner"... Ett stort nej-nej för mig! Jag förstår att detta är det mest effektiva sättet för ett företag att tjäna pengar, men jag har inga planer på att prenumerera på någon "plan" – förutom mitt webbhotell (där jag slutade vara en "lojal kund" när tjänsten och laddningstiderna inte är rätt).
CSS Hero
Det finns ingen automatisk prenumeration – du kan förnya varje år om du vill ha pluginuppdateringar – men produkten kommer att fortsätta att fungera där den installerades – utan att betala varje år.
Tom
Köpte din plugin, den första sidan jag provade den på Wordpress Stella Magazine Theme... fungerade inte.
Jag är besviken
Vad kan vi göra?
WPBeginner Support
Vänligen kontakta CSS Hero-support.
Admin
Tom Tortorici
Om du ändrar egenskaperna för, säg, h2, kan du ändra det för bara en instans eller en sida, eller kan det bara ändra alla h2:or på hela webbplatsen?
WPBeginner Support
Det kan göra båda. Till exempel kan du skapa en anpassad klass för h2-taggar på en viss sida.
Admin
Juliette
Fantastiskt! Det är verkligen vad jag behöver.
Fungerar som en dans med DIVI och GENESIS!
Monnie
Hej, rabattkoden verkar inte fungera.
Redaktionell personal
I just tried it, and it seems to be loading just fine. Can you please try again
Admin
Louise Findlay
Ja. Jag har letat efter något sådant här ett tag.
Saurabh Chatterjee
Är det gratis? om inte, finns det någon annan visuell CSS-redigerare som denna, som är gratis?
Redaktionell personal
Detta är inte gratis som anges i artikeln. Nej, du kommer inte att hitta någon gratis visuell redigerare som denna.
Admin