- \n
- \u00c4ndra teckensnittsfamiljen, teckenstorleken och f\u00e4rgen p\u00e5 valfri text<\/li>\n
- \u00c4ndra bakgrundsf\u00e4rger och bilder<\/li>\n
- Justera avst\u00e5ndet mellan alla element<\/li>\n<\/ul>\n
Och det \u00e4r bara ett urval av de fantastiska anpassningar som \u00e4r m\u00f6jliga.<\/p>\n
Vad \u00e4r inte CSS Hero?<\/h2>\n
Du kan inte skapa nya mallar eller helt nya layouter med CSS Hero. Det \u00e4r vad sidbyggare som Elementor<\/a> \u00e4r till f\u00f6r.<\/p>\n
I allm\u00e4nhet, om du vill g\u00f6ra en f\u00f6r\u00e4ndring p\u00e5 din webbplats som kr\u00e4ver att du l\u00e4gger till nytt inneh\u00e5ll, \u00e4r CSS Hero inte r\u00e4tt verktyg. Om du vill g\u00f6ra en rent visuell modifiering som att \u00e4ndra f\u00e4rg eller storlek p\u00e5 ett element, \u00e4r CSS Hero perfekt.<\/p>\n
Hur man anv\u00e4nder CSS Hero<\/h2>\n
\u00c4ven om det kommer med massor av alternativ, \u00e4r det faktiskt v\u00e4ldigt enkelt att anv\u00e4nda CSS Hero<\/a>.<\/p>\n
Klicka h\u00e4r f\u00f6r att prova CSS Hero sj\u00e4lv<\/a><\/p>\n
Installation<\/h3>\n
CSS Hero laddas upp via Plugins-menyn precis som alla andra plugin. N\u00e4r den \u00e4r installerad visas en knapp som ber dig att skaffa en licensnyckel.<\/p>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bab38c4.png\")
<\/a><\/p>\nGenom att klicka p\u00e5 den h\u00e4r knappen kommer du till en sida p\u00e5 deras webbplats med en annan knapp att klicka p\u00e5, och sedan aktiveras licensen.<\/p>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bca53eb.png\")
<\/a><\/p>\nDet kan inte bli enklare.<\/p>\n
Gr\u00e4nssnittet<\/h3>\n
N\u00e4r CSS Hero har aktiverats kommer din webbplats att ha ett nytt Edit with CSS Hero-objekt lagt till i administrat\u00f6rsverktygsf\u00e4ltet.<\/p>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0be832d5.png\")
<\/a><\/p>\nGenom att klicka p\u00e5 detta kommer du till CSS Hero-designgr\u00e4nssnittet.<\/p>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c0c755d.png\")
<\/a><\/p>\nJag visar upp CSS Hero med v\u00e5rt gratis Ignite-<\/a> tema<\/p>\n
Gr\u00e4nssnittet liknar Customizer (behandlas i v\u00e5r grundl\u00e4ggande anpassningsguide<\/a> ). Det finns en panel till v\u00e4nster med anpassningsverktygen och en f\u00f6rhandsvisning till h\u00f6ger som uppdateras live n\u00e4r du g\u00f6r \u00e4ndringar. Liksom Customizer \u00e4r ingen av dessa \u00e4ndringar synliga f\u00f6r dina bes\u00f6kare f\u00f6rr\u00e4n du klickar p\u00e5 knappen Spara och publicera.<\/p>\n
V\u00e4lj ett element<\/h3>\n
Anpassningsprocessen med CSS Hero b\u00f6rjar med att v\u00e4lja ett element.<\/p>\n
N\u00e4r du flyttar musen runt f\u00f6rhandsgranskningen av webbplatsen ser du en bl\u00e5 kontur som definierar valbara element. Genom att klicka p\u00e5 ett element kan du redigera det. S\u00e5 h\u00e4r v\u00e4ljer jag rubriken f\u00f6r Ignite-temat:<\/p>\n
Anpassa webbplatselement<\/h3>\n
N\u00e4r ett element har valts l\u00e4ggs de anpassningsbara egenskaperna till i den v\u00e4nstra panelen.<\/p>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c41dda0.png\")
<\/a><\/p>\nSamma egenskaper \u00e4r tillg\u00e4ngliga f\u00f6r alla element<\/p>\n
Det h\u00e4r \u00e4r alla olika anpassningar du kan g\u00f6ra f\u00f6r alla element med CSS Hero.<\/p>\n
L\u00e5t oss ta en n\u00e4rmare titt p\u00e5 n\u00e5gra av dessa egenskaper s\u00e5 att du kan f\u00e5 en uppfattning om hur den kan anv\u00e4ndas f\u00f6r att anpassa din webbplats.<\/p>\n
Byt typsnitt<\/h4>\n
Med rubriken markerad kan jag v\u00e4lja alternativet Typografi och sedan v\u00e4lja ett nytt teckensnitt. Det valda teckensnittet kommer automatiskt att till\u00e4mpas p\u00e5 all text som finns i rubriken. Detta \u00e4r mycket snabbare \u00e4n att f\u00f6rs\u00f6ka tilldela ett teckensnitt till menyn eller webbplatsens titel individuellt.<\/p>\n
CSS Hero ger dig tillg\u00e5ng till en upps\u00e4ttning systemteckensnitt (teckensnitt installerade p\u00e5 ditt operativsystem) och n\u00e5gra av de mest popul\u00e4ra typsnitten fr\u00e5n Google Fonts<\/a>. Det finns ocks\u00e5 en "font manager" som l\u00e5ter dig l\u00e4gga till alla teckensnitt fr\u00e5n Google Fonts till din webbplats med ett knapptryck.<\/p>\n
\u00c4ndra textf\u00e4rger<\/h4>\n
En annan vanlig anpassning som CSS Hero kan hantera \u00e4r att \u00e4ndra f\u00e4rgen p\u00e5 texten p\u00e5 webbplatsen.<\/p>\n
F\u00f6r att \u00e4ndra textf\u00e4rgen f\u00f6r ett element p\u00e5 webbplatsen, v\u00e4lj det, v\u00e4lj alternativet Typografi och klicka p\u00e5 f\u00e4rginst\u00e4llningen. CSS Hero ger dig en enkel f\u00e4rgv\u00e4ljare som du kan anv\u00e4nda f\u00f6r att snabbt \u00e4ndra f\u00e4rg.<\/p>\n
Anpassa kanter<\/h4>\n
Ignite-temat har en orange kant l\u00e4ngst upp p\u00e5 sidan. Detta \u00e4r lika l\u00e4tt att \u00e4ndra som vilken textf\u00e4rg som helst med CSS Hero<\/a>.<\/p>\n
Jag kan v\u00e4lja rubriken, v\u00e4lja alternativet Kanter och sedan v\u00e4lja ikonen f\u00f6r den \u00f6vre kanten f\u00f6r att endast redigera den \u00f6vre kanten. F\u00e4rgen kan \u00e4ndras med samma f\u00e4rgv\u00e4ljaralternativ som \u00e4r tillg\u00e4ngligt f\u00f6r att \u00e4ndra textf\u00e4rger.<\/p>\n
L\u00e4gg till en bakgrundsbild<\/h4>\n
Du kan \u00e4ndra bakgrundsf\u00e4rgen f\u00f6r alla element eller anv\u00e4nda en bakgrundsbild.<\/p>\n
Om du vill ha en strukturerad look kan du l\u00e4gga till en liten bakgrundsbild och f\u00e5 den att upprepas vertikalt och horisontellt. Du kan ocks\u00e5 skapa en statisk bakgrundsbild som fyller upp hela bakgrunden p\u00e5 webbplatsen. CSS Hero ger dig alla kontroller du beh\u00f6ver f\u00f6r att l\u00e4gga till en bakgrundsbild med vilken placering och storlek du vill ha.<\/p>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c873f76.png\")
<\/a><\/p>\n\u00c4ven om du kan ladda upp vilken bild du vill, har CSS Hero ocks\u00e5 en integration med Unsplash<\/a> som ger dig tillg\u00e5ng till tusentals gratis, h\u00f6guppl\u00f6sta fotografier vilket \u00e4r extremt bekv\u00e4mt.<\/p>\n
Justera avst\u00e5ndet<\/h4>\n
Den sista anpassningsfunktionen i CSS Hero jag ska t\u00e4cka \u00e4r avst\u00e5ndsegenskaperna.<\/p>\n
Marginal anv\u00e4nds f\u00f6r att skapa utrymme mellan element. Till exempel kan jag minska utrymmet ovanf\u00f6r den h\u00e4r knappen och \u00f6ka utrymmet under den med egenskapen margin CSS.<\/p>\n
\u00c5 andra sidan anv\u00e4nds stoppning f\u00f6r att skapa utrymme inuti element. Jag kan \u00f6ka stoppningen p\u00e5 alla fyra sidor av knappen f\u00f6r att g\u00f6ra den st\u00f6rre och l\u00e4ttare att klicka.<\/p>\n
Och vet du vad som \u00e4r \u00e4nnu mer imponerande?<\/p>\n
Dessa \u00e4ndringar till\u00e4mpas automatiskt p\u00e5 alla "L\u00e4s mer"-knappar p\u00e5 webbplatsen, s\u00e5 jag beh\u00f6ver bara g\u00f6ra denna justering en g\u00e5ng.<\/p>\n
Ytterligare alternativ<\/h2>\n
CSS Hero har ocks\u00e5 sektioner f\u00f6r att \u00e4ndra kantradie (rundade h\u00f6rn) och liststilar, men du kommer inte att anv\u00e4nda dessa lika ofta.<\/p>\n
Det finns ocks\u00e5 en extrasektion som inneh\u00e5ller n\u00e5gra slumpm\u00e4ssiga egenskaper som opacitet, boxskuggor och synlighet (d\u00f6lj alla element) f\u00f6r att n\u00e4mna n\u00e5gra.<\/p>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0cc7fd09.png\")
<\/a><\/p>\nSka du anv\u00e4nda CSS Hero?<\/h2>\n
Om du bara har en handfull tweaks att g\u00f6ra kan det vara sv\u00e5rt att motivera k\u00f6pet av ett nytt plugin. Om du till exempel bara vill \u00e4ndra storleken p\u00e5 din webbplatstitel kan du antagligen skicka ett e-postmeddelande till utvecklaren av ditt tema f\u00f6r att f\u00e5 ett CSS-utdrag f\u00f6r att g\u00f6ra detta.<\/p>\n
Som sagt, CSS Hero kostar bara $29 vilket g\u00f6r det mycket prisv\u00e4rt. Alternativet \u00e4r att ta reda p\u00e5 saker p\u00e5 egen hand som kan ta timmar. Du kommer inte att kunna anlita en utvecklare f\u00f6r att arbeta p\u00e5 din webbplats f\u00f6r $29.<\/p>\n
Klicka h\u00e4r f\u00f6r att kolla in CSS Hero nu<\/a><\/p>\n
Om du ofta kommer p\u00e5 att du vill g\u00f6ra anpassningar av din webbplats tycker jag att en licens f\u00f6r flera webbplatser \u00e4r v\u00e4l motiverad f\u00f6r att s\u00e4kerst\u00e4lla att du alltid kan g\u00f6ra de \u00e4ndringar du vill i din webbplatsdesign.<\/p>\n
Sammanfattningsvis \u00e4r CSS Hero<\/a> ett utm\u00e4rkt verktyg f\u00f6r webbplatsanpassning och fyller en viktig nisch. F\u00f6r drastiska webbplatsanpassningar vill du v\u00e4lja ett nytt tema<\/a> eller l\u00e4ra dig hur du anv\u00e4nder en sidbyggare<\/a>.<\/p>\n
Klicka h\u00e4r f\u00f6r att hitta fler s\u00e4tt att anpassa din webbplats<\/a>.<\/p>\n