Vill du l\u00e4ra dig hur man l\u00e4gger till box-skuggor i WordPress?<\/p>\n
Skuggor kan f\u00e5 ditt viktigaste inneh\u00e5ll att sticka ut och f\u00e5nga bes\u00f6karens uppm\u00e4rksamhet. De kan ocks\u00e5 f\u00e5 platt webbdesign att se mer attraktiv och intressant ut.<\/p>\n
I den h\u00e4r artikeln visar vi hur du enkelt l\u00e4gger till boxskuggor i WordPress, steg f\u00f6r steg.<\/p>\n En skuggl\u00e5da, ibland \u00e4ven k\u00e4nd som en skugga, \u00e4r en visuell effekt som f\u00e5r det att se ut som att n\u00e5got p\u00e5 sk\u00e4rmen kastar en skugga.<\/p>\n Vi tenderar att \u00e4gna mer uppm\u00e4rksamhet \u00e5t f\u00f6rem\u00e5l som verkar n\u00e4rmare oss. Med det i \u00e5tanke l\u00e4gger m\u00e5nga webbplats\u00e4gare till skuggrutor till sitt viktigaste inneh\u00e5ll f\u00f6r att f\u00e5 det att se ut som att det sv\u00e4var ovanf\u00f6r sidan.<\/p>\n Om du till exempel l\u00e4gger till en stor skugga till en uppmaningsknapp kommer den att synas fysiskt n\u00e4rmare bes\u00f6karen och drar deras uppm\u00e4rksamhet. <\/p>\n Med det sagt, l\u00e5t oss titta p\u00e5 hur du kan l\u00e4gga till boxskuggor till din WordPress-blogg eller webbplats. Anv\u00e4nd helt enkelt snabbl\u00e4nkarna nedan f\u00f6r att g\u00e5 direkt till den metod du vill anv\u00e4nda.<\/p>\n Om du l\u00e4gger till en skuggeffekt till varje WordPress-block kan det f\u00e5 din webbplats att se r\u00f6rig och f\u00f6rvirrande ut. Med det i \u00e5tanke b\u00f6r du bara l\u00e4gga till en skuggruta till de viktigaste elementen p\u00e5 sidan.<\/p>\n Du b\u00f6r ocks\u00e5 h\u00e5lla boxskuggorna konsekventa p\u00e5 hela din webbplats. Det b\u00e4sta s\u00e4ttet att g\u00f6ra detta \u00e4r genom att definiera stilen i CSS med hj\u00e4lp av WPC-kod<\/a>.<\/p>\n WPCode \u00e4r den b\u00e4sta plugin-koden f\u00f6r kodavsnitt som anv\u00e4nds av \u00f6ver 1 miljon WordPress-webbplatser. G\u00f6r det enkelt att l\u00e4gga till anpassad kod i WordPress utan att beh\u00f6va redigera filen functions.php.<\/p>\n Med WPCode kan \u00e4ven nyb\u00f6rjare redigera sin webbplatskod utan att riskera stavfel som kan orsaka m\u00e5nga vanliga WordPress-fel.<\/p>\n Det f\u00f6rsta du b\u00f6r g\u00f6ra \u00e4r att installera och aktivera gratis WPCode-plugin<\/a>. F\u00f6r mer information, se v\u00e5r steg-f\u00f6r-steg-guide om hur du installerar ett WordPress-plugin.<\/p>\n Efter aktivering, g\u00e5 till Kodavsnitt \u00bb L\u00e4gg till kodavsnitt<\/strong>.<\/p>\n H\u00e4r ser du alla f\u00e4rdiga WPCode-snuttar som du kan l\u00e4gga till p\u00e5 din webbplats. Dessa inkluderar ett utdrag som l\u00e5ter dig inaktivera kommentarer helt, ladda upp filtyper som WordPress vanligtvis inte st\u00f6der, inaktivera sidbilagor och mycket mer.<\/p>\n H\u00e5ll musen \u00f6ver “L\u00e4gg till din anpassade kod” och klicka sedan p\u00e5 “Anv\u00e4nd kodavsnitt” n\u00e4r det visas. <\/p>\n F\u00f6r att komma ig\u00e5ng anger du en titel f\u00f6r ditt anpassade kodavsnitt. Det kan vara vad som helst som hj\u00e4lper dig att identifiera kodavsnittet i WordPress-instrumentpanelen.<\/p>\n Du m\u00e5ste l\u00e4gga till anpassad CSS till WordPress, s\u00e5 \u00f6ppna rullgardinsmenyn “Code Type” och v\u00e4lj “CSS Snippet.”<\/p>\n L\u00e4gg till f\u00f6ljande kodavsnitt i kodredigeraren:<\/p>\n I utdraget ovan kan du beh\u00f6va byta ut px-v\u00e4rdena beroende p\u00e5 vilken typ av skugga du vill skapa.<\/p>\n F\u00f6r att hj\u00e4lpa dig, h\u00e4r \u00e4r vad de olika px-v\u00e4rdena betyder, fr\u00e5n v\u00e4nster till h\u00f6ger:<\/p>\n N\u00e4r du \u00e4r n\u00f6jd med utdraget, scrolla ner till avsnittet “Infoga”. WPCode kan l\u00e4gga till din kod p\u00e5 olika platser, till exempel efter varje inl\u00e4gg, bara i front-end eller bara i admin.<\/p>\n F\u00f6r att anv\u00e4nda anpassad CSS-kod p\u00e5 hela din WordPress-webbplats, klicka p\u00e5 “Automatisk infogning” om den inte redan \u00e4r vald. \u00d6ppna sedan rullgardinsmenyn “Plats” och v\u00e4lj “Sitewide Header.”<\/p>\n Efter det \u00e4r du redo att rulla till toppen av sk\u00e4rmen och klicka p\u00e5 knappen “Inaktiv” s\u00e5 att den \u00e4ndras till “Aktiv”.<\/p>\n Klicka slutligen p\u00e5 “Spara utdrag” f\u00f6r att aktivera CSS-kodavsnittet.<\/p>\n Nu kan du l\u00e4gga till anpassad CSS-klass till vilket block som helst.<\/p>\n I WordPress-inneh\u00e5llsredigeraren v\u00e4ljer du helt enkelt blocket d\u00e4r du vill l\u00e4gga till en boxskugga. Klicka sedan p\u00e5 den h\u00f6gra menyn f\u00f6r att expandera avsnittet “Avancerat”.<\/p>\n H\u00e4r ser du f\u00e4lt d\u00e4r du kan l\u00e4gga till olika klasser.<\/p>\n Skriv skuggeffekt i “Ytterligare CSS-klass(er)”.<\/p>\n N\u00e4r du \u00e4r redo att publicera boxskuggan klickar du helt enkelt p\u00e5 knappen “Publicera” eller “Uppdatera”.<\/p>\n Om du nu bes\u00f6ker deras hemsida kommer du att se den levande boxskuggan.<\/p>\n Om du inte \u00e4r bekv\u00e4m med att skriva kod kanske du f\u00f6redrar att skapa skuggor med hj\u00e4lp av Parallell skuggl\u00e5da<\/a>. Detta gratis plugin l\u00e5ter dig l\u00e4gga till boxskuggor till alla block med hj\u00e4lp av den inbyggda WordPress-sidan och inl\u00e4ggsredigeraren.<\/p>\n F\u00f6rst m\u00e5ste du installera och aktivera plugin-programmet. Om du beh\u00f6ver hj\u00e4lp, kolla in v\u00e5r guide om hur du installerar ett WordPress-plugin.<\/p>\n Det finns inga inst\u00e4llningar att konfigurera, s\u00e5 du kan b\u00f6rja anv\u00e4nda detta plugin direkt.<\/p>\n F\u00f6r att l\u00e4gga till en skugga, klicka helt enkelt p\u00e5 “+”-ikonen och b\u00f6rja skriva i “Skuggrutan”. N\u00e4r det h\u00f6gra blocket visas klickar du p\u00e5 det f\u00f6r att l\u00e4gga till det p\u00e5 sidan eller inl\u00e4gget.<\/p>\n Detta l\u00e4gger till skuggan som en tom ruta, s\u00e5 n\u00e4sta steg \u00e4r att l\u00e4gga till lite inneh\u00e5ll.<\/p>\n F\u00f6r att g\u00f6ra detta, forts\u00e4tt och klicka p\u00e5 ‘+’ inuti Drop Shadow Box-blocket.<\/p>\n L\u00e4gg sedan till blocket du vill anv\u00e4nda och konfigurera det normalt.<\/p>\n Till exempel, i bilden nedan lade vi till ett bildblock och valde en bild fr\u00e5n WordPress mediebibliotek.<\/p>\n N\u00e4r du \u00e4r klar klickar du f\u00f6r att v\u00e4lja Block Shadow Box. I menyn till h\u00f6ger ser du alla inst\u00e4llningar som du kan anv\u00e4nda f\u00f6r att styla detta block.<\/p>\n WordPress st\u00e4ller in bredden p\u00e5 skuggan automatiskt, men du kan \u00e4ndra den genom att \u00f6ppna rullgardinsmenyn “Bredd” och sedan v\u00e4lja “Pixlar” eller “%.”<\/p>\n Du kan sedan \u00e4ndra dess storlek med hj\u00e4lp av inst\u00e4llningarna som visas.<\/p>\n Drop Box Shadow-plugin kommer med n\u00e5gra olika effekter, s\u00e5som b\u00f6jda kanter och en i\u00f6gonfallande “Perspektiv”-effekt.<\/p>\n F\u00f6r att f\u00f6rhandsgranska de olika effekterna, \u00f6ppna helt enkelt rullgardinsmenyn “Effekt” och v\u00e4lj fr\u00e5n listan. F\u00f6rhandsgranskningen uppdateras automatiskt s\u00e5 att du kan prova olika stilar och se vilken du f\u00f6redrar.<\/p>\n Du kan ocks\u00e5 \u00e4ndra om plugin-programmet visar skuggan inuti boxen, utanf\u00f6r boxen eller b\u00e5da med knapparna ‘Inner Shadow’ och ‘Outer Shadow’.<\/p>\n D\u00e4refter kan du \u00e4ndra f\u00e4rgen p\u00e5 rutan och kanten med hj\u00e4lp av inst\u00e4llningarna under rubriken “F\u00e4rger”.<\/p>\n Observera bara att “Bakgrund” h\u00e4nvisar till insidan av skuggrutan, medan “Border” visas utanf\u00f6r blocket.<\/p>\n Om du vill skapa en mjukare, b\u00f6jd skuggruta kan du aktivera alternativet “Rundade h\u00f6rn”. Slutligen kan du \u00e4ndra justering och utfyllnad, liknande hur du anpassar andra block i WordPress.<\/p>\n F\u00f6r att skapa fler boxskuggor, f\u00f6lj helt enkelt samma process som beskrivs ovan.<\/p>\n N\u00e4r du \u00e4r n\u00f6jd med sidans utseende klickar du helt enkelt p\u00e5 “Uppdatera” eller “Publicera” f\u00f6r att ha alla skuggor f\u00f6r dina nya rutor aktiva.<\/p>\n Om du vill l\u00e4gga till boxskuggor till m\u00e5lsidor, anpassade hemsidor eller n\u00e5gon del av ditt WordPress-tema rekommenderar vi att du anv\u00e4nder ett plugin f\u00f6r sidbyggare.<\/p>\n<\/span>Varf\u00f6r l\u00e4gga till box-skuggor i WordPress?<\/strong><\/span><\/h4>\n
<\/span>Metod 1. Hur man l\u00e4gger till boxskuggor med kod (rekommenderas)<\/strong><\/span><\/h4>\n
\n.shadow-effect {\nbox-shadow: 5px 5px 0px 2px #a9a1a1;\n}\n\n<\/pre>\n\n
<\/span>Metod 2. L\u00e4gg till en Box Shadow med ett gratis plugin (snabbt och enkelt)<\/strong><\/span><\/h4>\n
<\/span>Metod 3. L\u00e4gg till en boxskugga med hj\u00e4lp av en sidbyggare (avancerat)<\/strong><\/span><\/h4>\n