Hur man enkelt lägger till boxskugga i WordPress (4 sätt)

En skuggbox är ett av de enklaste sätten att lägga till djup och betoning på element på din WordPress-webbplats. Vi kan skapa denna effekt med bara några rader CSS.

Med det sagt, även om det är enkelt, har vissa WPBeginner-läsare bett om tips om hur man implementerar det effektivt, särskilt om de inte är bekväma med kodning.

I den här artikeln visar vi dig flera sätt att enkelt lägga till boxskuggor i WordPress, steg för steg. 

Varför lägga till boxskuggor i WordPress?

En boxskugga, ibland även känd som en skuggskugga, är en visuell effekt som får det att se ut som om något på skärmen kastar en skugga.

Vi tenderar att uppmärksamma objekt som verkar vara närmare oss. Med det i åtanke lägger många webbplatsägare till boxskuggor till sitt viktigaste innehåll för att få det att se ut som att det svävar ovanför sidan.

Om du till exempel lägger till en stor skugga till en uppmaning till handling-knapp, kommer den att se fysiskt närmare besökaren ut, vilket fångar deras uppmärksamhet.

Med det sagt, låt oss se hur du kan lägga till skuggor till din WordPress-blogg eller webbplats. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda.

• Metod 1. Lägg till en boxskugga med kod (mer kontroll)
• Metod 2. Lägg till en skugga med ett gratis plugin
• Metod 3. Lägg till en skuggning av rutan med en sidbyggare (enkelt)
• Metod 4. Lägg till en skuggning av rutan med CSS Hero (avancerat)
• Lär dig fler sätt att lägga till unika designer på din WordPress-webbplats

Metod 1. Lägg till en skuggbox med kod (mer kontroll)

Om du lägger till en skuggeffekt på varje WordPress-block kan det göra din webbplats rörig och förvirrande. Med det i åtanke bör du bara lägga till en box-skugga till sidans viktigaste element.

Du bör också hålla boxskuggorna konsekventa över hela din webbplats. Det bästa sättet att göra detta är genom att definiera stilen i CSS med hjälp av WPCode.

WPCode är det bästa pluginet för kodavsnitt som används av över 1 miljon WordPress-webbplatser. Det gör det enkelt att lägga till anpassad kod i WordPress utan att behöva redigera functions.php-filen.

Med WPCode kan även nybörjare redigera sin webbplats kod utan att riskera misstag och stavfel som kan orsaka många vanliga WordPress-fel.

Det första du behöver göra är att installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Kodavsnitt » Lägg till kodavsnitt.

Här ser du alla färdiga WPCode-snuttar som du kan lägga till på din webbplats. Dessa inkluderar en snutt som låter dig helt inaktivera kommentarer, ladda upp filtyper som WordPress normalt inte stöder, inaktivera bilagesidor, och mycket mer.

Håll helt enkelt muspekaren över 'Lägg till din anpassade kod (nytt utdrag)' och klicka sedan på '+ Lägg till anpassat utdrag' när det visas.

Därefter måste du välja kodtyp från listan med alternativ som visas på skärmen.

För den här handledningen behöver du lägga till anpassad CSS i WordPress, så välj 'CSS-utdrag' som kodtyp.

Nu kommer du att dirigeras till sidan Skapa anpassad kodsnutt.

Till att börja med, skriv in en titel för det anpassade kodavsnittet. Detta kan vara vad som helst som hjälper dig att identifiera avsnittet i WordPress-instrumentpanelen.

Kopiera sedan och klistra in följande kodavsnitt i rutan 'Code Preview':

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

I ovanstående kodavsnitt kan du behöva ersätta px-värdena beroende på vilken typ av skugga du vill skapa.

För att hjälpa dig, här är vad de olika px-värdena betyder, från vänster till höger:

• Horisontell förskjutning. När du ställer in ett positivt värde, skjuts skuggan åt vänster. Om du skriver in ett negativt värde som -5px, kommer skuggan att skjutas åt höger. Om du inte vill lägga till en horisontell förskjutning kan du använda 0px istället.
• Vertikal förskjutning. Om du använder ett positivt värde kommer skuggan att skjutas nedåt. Om du anger ett negativt värde kommer skuggan att skjutas uppåt. Om du inte vill förskjuta skuggan vertikalt, ange bara 0px.
• Oskärperadius. Detta gör skuggan oskarp så att den inte har några hårda kanter. Ju högre värde, desto större oskärpa. Om du föredrar att använda skarpa kanter, skriv in 0px.
• Spridningsradie. Ju högre värde, desto större är skuggans spridning. Detta värde är valfritt, så hoppa över detta om du inte vill visa en spridning.
• Färg. Även om grått är den vanligaste färgen för skuggor, kan du använda vilken färg du vill genom att skriva in en hexkod. Om du är osäker på vilken kod du ska använda, kan du utforska olika färger med hjälp av en resurs som HTML Color Codes.

När du är nöjd med kodavsnittet, scrolla till sektionen 'Infogning'. WPCode kan lägga till din kod på olika platser, som efter varje inlägg, endast frontend, eller endast admin.

För att använda den anpassade CSS-koden över hela din WordPress-webbplats, klicka på ‘Auto Insert’ om det inte redan är valt. Öppna sedan rullgardinsmenyn ‘Location’ och välj ‘Site Wide Header.’

Därefter är du redo att skrolla till toppen av skärmen och klicka på växlingsknappen 'Inaktiv', så att den ändras till 'Aktiv'.

Klicka slutligen på ‘Spara kodavsnitt’ för att göra CSS-kodavsnittet live.

Nu kan du lägga till den anpassade CSS-klassen till valfritt block.

I WordPress blockredigerare, välj helt enkelt det block där du vill lägga till en boxskugga. Klicka sedan i den högra menyn för att expandera sektionen 'Avancerat'.

Här ser du fält där du kan lägga till olika klasser.

I ‘Ytterligare CSS-klass(er)’ skriver du in shadow-effect.

När du är redo att publicera boxskuggan, klicka bara på knappen 'Publicera' eller 'Uppdatera'.

Nu när du besöker din webbplats kommer du att se boxskuggan live.

Förutom att lägga till en boxskugga kan du också använda WPCode för att ändra textfärgen eller till och med anpassa stilen på dina blockcitat i WordPress-teman med CSS.

Metod 2. Lägg till en boxskugga med hjälp av ett gratis plugin

Om du inte är bekväm med att skriva kod, kanske du föredrar att skapa skuggor med hjälp av Drop Shadow Box. Detta kostnadsfria plugin låter dig lägga till skuggboxar till alla block med hjälp av WordPress inbyggda sida- och inläggsredigerare.

Först måste du installera och aktivera pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Det finns inga inställningar att konfigurera, så du kan börja använda detta plugin direkt.

För att lägga till en skuggbox, klicka helt enkelt på '+' ikonen och börja skriva 'Drop Shadow Box'. När rätt block visas, klicka på det för att lägga till det på sidan eller inlägget.

Detta lägger till skuggan som en tom ruta, så nästa steg är att lägga till innehåll.

För att göra detta, fortsätt och klicka på '+' inuti Drop Shadow Box-blocket.

Lägg sedan helt enkelt till det block du vill använda och konfigurera det som vanligt.

Till exempel, i följande bild har vi lagt till ett Bildblock och valt en bild från WordPress mediebibliotek.

När det är gjort, klicka för att välja blocket "Drop Shadow Box". I menyn till höger ser du alla inställningar du kan använda för att styla detta block.

WordPress ställer in skuggans bredd automatiskt men du kan ändra detta genom att öppna rullgardinsmenyn "Width" och sedan välja antingen "Pixels" eller "%"

Du kan sedan ändra storlek på den med hjälp av inställningarna som visas.

Pluginet Drop Box Shadow kommer med några olika effekter som böjda kanter och en iögonfallande 'Perspektiv'-effekt.

För att förhandsgranska de olika effekterna, öppna helt enkelt rullgardinsmenyn ‘Effekt’ och välj från listan. Förhandsgranskningen uppdateras automatiskt så att du kan prova olika stilar för att se vad du föredrar.

Du kan också ändra om pluginet visar skuggan inuti rutan, utanför rutan eller båda med hjälp av omkopplarna 'Inside Shadow' och 'Outside Shadow'.

Efter det kan du ändra färgen på boxen och ramen med hjälp av inställningarna under rubriken ‘Färger’.

Var bara medveten om att 'Bakgrund' hänvisar till insidan av Drop Shadow Box, medan 'Kant' visas utanför blocket.

Om du vill skapa en mjukare, böjd skuggruta kan du aktivera omkopplaren 'Rounded corners'. Slutligen kan du ändra justeringen och utfyllnaden, liknande hur du anpassar andra block i WordPress.

För att skapa fler box-skuggor, följ bara samma process som beskrivs ovan.

När du är nöjd med hur sidan ser ut, klickar du helt enkelt på 'Uppdatera' eller 'Publicera' för att göra alla dina nya boxskuggor live.

Metod 3. Lägg till en skuggning med en sidbyggare (enkelt)

Om du vill lägga till skuggor till landningssidor, anpassade startsidor eller någon del av ditt WordPress-tema, rekommenderar vi att du använder ett sidbyggarplugin.

SeedProd är den bästa dra-och-släpp WordPress sidbyggaren. Den låter dig designa anpassade landningssidor och till och med skapa ett anpassat WordPress-tema utan att behöva skriva en enda rad kod.

Det låter dig också lägga till boxskuggor till valfritt block med dess avancerade dra-och-släpp-redigerare.

Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till SeedProd » Landningssidor i din WordPress-instrumentpanel.

SeedProd kommer med över 300+ professionellt designade mallar som är grupperade i kategorier. Längst upp ser du kategorier som låter dig skapa vackra "kommer snart"-sidor, aktivera underhållsläge, skapa en anpassad inloggningssida för WordPress och mer.

Alla SeedProds mallar är lätta att anpassa, så du kan använda vilken design du vill.

När du hittar en mall du vill använda, för bara muspekaren över den och klicka på bockmarksikonen.

Du kan nu skriva in ett namn för din landningssida i fältet ‘Sidnamn’. SeedProd kommer automatiskt att skapa en ‘Sid-URL’ med hjälp av sidnamnet.

Det är smart att inkludera relevanta nyckelord i din URL där det är möjligt, eftersom detta hjälper sökmotorer att förstå vad sidan handlar om. Detta kommer ofta att förbättra din WordPress SEO.

För att ändra sidans automatiskt genererade URL, skriv helt enkelt in text i fältet 'Sid-URL'.

När du är nöjd med informationen du har angett klickar du på ‘Spara och börja redigera sidan.’ Detta laddar SeedProd-sidbyggargränssnittet.

Denna enkla dra-och-släpp-byggare visar en liveförhandsgranskning av din sidlayout till höger. Till vänster finns en meny som visar alla olika block och sektioner du kan lägga till på sidan.

När du hittar ett block som du vill lägga till, dra och släpp det helt enkelt på din mall.

För att anpassa ett block, fortsätt och klicka för att välja det blocket i SeedProd-redigeraren. Menyn till vänster kommer nu att visa alla inställningar du kan använda för att anpassa blocket.

Till exempel, om du klickar på ett rubrikblock, kan du skriva din egen text, eller ändra textfärgen och teckenstorleken.

När du bygger sidan kan du flytta runt block i din layout genom att dra och släppa dem. För mer detaljerade instruktioner, se vår guide om hur man skapar en landningssida med WordPress.

För att skapa en box-skugga, klicka för att välja ett block i SeedProd-sidredigeraren. Inställningarna i menyn till vänster kan variera mellan block, men du behöver vanligtvis klicka på en flik som heter 'Avancerat'.

Leta här efter en rullgardinsmeny för 'Skugga' under sektionen 'Stilar'. Öppna helt enkelt denna rullgardinsmeny och välj en skuggstil som Hairline, Medium eller 2X Large.

Förhandsgranskningen uppdateras automatiskt, så du kan prova olika stilar för att se vad som ser bäst ut på din sidadesign.

Om du inte vill använda någon av de färdiga stilarna, klicka på 'Anpassad'.

Detta lägger till några nya inställningar där du kan ändra färg, oskärpa, spridning och position för den anpassade skuggan.

När det är klart kan du fortsätta arbeta med sidan genom att lägga till fler block och boxskuggor.

När du är nöjd med hur sidan ser ut, klicka på knappen 'Spara' och välj sedan 'Publicera' för att göra den live.

Metod 4. Lägg till en skuggbox med CSS Hero (avancerat)

Om du inte är bekväm med att arbeta med kod men ändå vill skapa avancerade boxskuggor, kan du prova CSS Hero. Detta premiumplugin låter dig finjustera varje del av ditt WordPress-tema utan att behöva skriva en enda rad kod.

CSS Hero låter dig skapa en unik skugga för varje block, så det är också ett utmärkt val om du vill skapa många olika skuggeffekter. Du kan lära dig mer om pluginet i vår CSS Hero-recension.

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.

Efter aktivering ser du en knapp 'Fortsätt till produktaktivering' högst upp på skärmen. Klicka på den knappen.

Detta tar dig till CSS Hero-webbplatsen där du kan logga in på ditt konto och få en licensnyckel. Följ helt enkelt instruktionerna på skärmen, så kommer du att omdirigeras tillbaka till din webbplats med några få klick.

Klicka sedan på texten 'CSS Hero' i WordPress adminverktygsfält.

Detta öppnar CSS Hero-redigeraren.

Som standard har CSS Hero-redigeraren en WYSIWYG-förhandsgranskning av din webbplats och en vänsterpanel där du kan redigera varje element i din webbdesign.

Om du upptäcker att du inte är på sidan där du vill lägga till boxskuggan, kan du växla från 'Redigera'-läge till 'Navigera'-läge.

Detta gör att du kan interagera med navigeringsmenyer, länkar och annat innehåll som vanligt.

Du kan nu navigera till sidan eller inlägget där du vill lägga till skuggan.

Så fort du når den sidan, fortsätt och växla till 'Redigera'-läget igen.

När det är gjort, klicka på stycket, bilden, knappen eller något annat innehåll där du vill lägga till en boxskugga.

I panelen till vänster, klicka på 'Extra'.

Du kan nu fortsätta och klicka på 'Skapa skugga'.

Detta visar alla inställningar du kan använda för att skapa en skuggbox.

Till att börja med kan du ändra om skuggan visas inuti eller utanför blocket med hjälp av inställningarna för ‘Skuggposition’.

Här har vi valt 'Utanför' för att skuggan ska visas utanför själva bilden.

Efter att ha fattat detta beslut kan du finjustera skuggans orientering med den lilla pricken i rutan 'Orientering'.

Dra och släpp helt enkelt punkten till en ny position för att se den flyttas i förhandsgranskningen.

När du är nöjd med skuggans position kan du ändra dess färg, oskärpa och spridning.

CSS Hero kommer att visa dessa ändringar omedelbart, så du kan prova olika inställningar för att se vad som ser bäst ut.

För att lägga till en boxskugga till andra block, följ bara samma process som beskrivs ovan.

När du är nöjd med hur sidan ser ut, klicka på 'Spara' för att göra ändringarna live.

Lär dig fler sätt att lägga till unika designer på din WordPress-webbplats

Metoderna ovan ger en bra grund för att lägga till boxskuggor i WordPress. Men vad händer om du vill uppnå ännu mer unika och kreativa effekter?

I följande artiklar hittar du hjälpsamma guider om hur du lägger till olika designelement på din webbplats:

• Hur man lägger till bildeffekter vid hovring i WordPress – Den här guiden utforskar olika hovringseffekter du kan skapa för dina bilder, vilket gör din webbplats mer engagerande och interaktiv för besökare.
• Hur man enkelt lägger till CSS-animationer i WordPress – Animationer, tillsammans med boxskuggor, kan skapa en dynamisk och visuellt tilltalande användarupplevelse, som fångar dina besökares uppmärksamhet och håller dem engagerade.
• Hur man lägger till en parallaxeffekt i vilket WordPress-tema som helst – Genom att integrera parallaxeffekter kan du förstärka illusionen av djup och skapa en mer uppslukande webbplats.
• Hur man skapar en anpassad formdelare i WordPress – Den här artikeln visar hur du skapar unika former för att visuellt separera sektioner av ditt innehåll.
• Hur man enkelt skapar en responsiv slider i WordPress – Den här guiden lär dig hur du skapar sliders för att visa upp ditt innehåll på ett attraktivt och utrymmesbesparande sätt.
• Hur man lägger till en animerad bakgrund i WordPress – Att lägga till animerade bakgrunder kan skapa en unik och visuellt intressant användarupplevelse.

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du lägger till en boxskugga i WordPress. Du kanske också vill lära dig hur man tar bort oanvänd CSS i WordPress och hur man optimerar leveransen av WordPress CSS.

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.