Vill du lära dig hur man lägger till box-skuggor i WordPress?
Skuggor kan få ditt viktigaste innehåll att sticka ut och fånga besökarens uppmärksamhet. De kan också få platt webbdesign att se mer attraktiv och intressant ut.
I den här artikeln visar vi hur du enkelt lägger till boxskuggor i WordPress, steg för steg.
Varför lägga till box-skuggor i WordPress?
En skugglåda, ibland även känd som en skugga, är en visuell effekt som får det att se ut som att något på skärmen kastar en skugga.
Vi tenderar att ägna mer uppmärksamhet åt föremål som verkar närmare oss. Med det i åtanke lägger många webbplatsägare till skuggrutor 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 uppmaningsknapp kommer den att synas fysiskt närmare besökaren och drar deras uppmärksamhet.
Med det sagt, låt oss titta på hur du kan lägga till boxskuggor till din WordPress-blogg eller webbplats. Använd helt enkelt snabblänkarna nedan för att gå direkt till den metod du vill använda.
Metod 1. Hur man lägger till boxskuggor med kod (rekommenderas)
Om du lägger till en skuggeffekt till varje WordPress-block kan det få din webbplats att se rörig och förvirrande ut. Med det i åtanke bör du bara lägga till en skuggruta till de viktigaste elementen på sidan.
Du bör också hålla boxskuggorna konsekventa på hela din webbplats. Det bästa sättet att göra detta är genom att definiera stilen i CSS med hjälp av WPC-kod.
WPCode är den bästa plugin-koden för kodavsnitt som används av över 1 miljon WordPress-webbplatser. Gör det enkelt att lägga till anpassad kod i WordPress utan att behöva redigera filen functions.php.
Med WPCode kan även nybörjare redigera sin webbplatskod utan att riskera stavfel som kan orsaka många vanliga WordPress-fel.
Det första du bör göra är att installera och aktivera gratis WPCode-plugin. För mer information, se vår steg-för-steg-guide om hur du 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 ett utdrag som låter dig inaktivera kommentarer helt, ladda upp filtyper som WordPress vanligtvis inte stöder, inaktivera sidbilagor och mycket mer.
Håll musen över “Lägg till din anpassade kod” och klicka sedan på “Använd kodavsnitt” när det visas.
För att komma igång anger du en titel för ditt anpassade kodavsnitt. Det kan vara vad som helst som hjälper dig att identifiera kodavsnittet i WordPress-instrumentpanelen.
Du måste lägga till anpassad CSS till WordPress, så öppna rullgardinsmenyn “Code Type” och välj “CSS Snippet.”
Lägg till följande kodavsnitt i kodredigeraren:
.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}
I utdraget ovan kan du behöva byta ut 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 ett negativt värde som -5px, kommer skuggan att skjutas åt höger. Om du inte vill lägga till en horisontell rullning kan du använda 0px istället.
- Vertikal förskjutning. Om du använder ett positivt värde kommer skuggan att tryckas ner. Om du skriver ett negativt värde kommer skuggan att skjutas uppåt. Om du inte vill flytta skuggan vertikalt, skriv bara 0px.
- Oskarp radie. Detta blandar skuggan så att den inte har hårda kanter. Ju högre värde, desto större oskärpa effekt. Om du föredrar att använda skarpa kanter, skriv 0px.
- Förlängningsradie. Ju högre värde, desto större omfattning av skuggan. Detta värde är valfritt, så utelämna det om du inte vill visa en differential.
- Färg. Även om grå är den vanligaste färgen för skuggor, kan du använda vilken färg du vill genom att skriva en hexadecimal kod. Om du inte är säker på vilken kod du ska använda kan du utforska olika färger med hjälp av en resurs som HTML färgkoder.
När du är nöjd med utdraget, scrolla ner till avsnittet “Infoga”. WPCode kan lägga till din kod på olika platser, till exempel efter varje inlägg, bara i front-end eller bara i admin.
För att använda anpassad CSS-kod på hela din WordPress-webbplats, klicka på “Automatisk infogning” om den inte redan är vald. Öppna sedan rullgardinsmenyn “Plats” och välj “Sitewide Header.”
Efter det är du redo att rulla till toppen av skärmen och klicka på knappen “Inaktiv” så att den ändras till “Aktiv”.
Klicka slutligen på “Spara utdrag” för att aktivera CSS-kodavsnittet.
Nu kan du lägga till anpassad CSS-klass till vilket block som helst.
I WordPress-innehållsredigeraren väljer du helt enkelt blocket där du vill lägga till en boxskugga. Klicka sedan på den högra menyn för att expandera avsnittet “Avancerat”.
Här ser du fält där du kan lägga till olika klasser.
Skriv skuggeffekt i “Ytterligare CSS-klass(er)”.
När du är redo att publicera boxskuggan klickar du helt enkelt på knappen “Publicera” eller “Uppdatera”.
Om du nu besöker deras hemsida kommer du att se den levande boxskuggan.
Metod 2. Lägg till en Box Shadow med ett gratis plugin (snabbt och enkelt)
Om du inte är bekväm med att skriva kod kanske du föredrar att skapa skuggor med hjälp av Parallell skugglåda. Detta gratis plugin låter dig lägga till boxskuggor till alla block med hjälp av den inbyggda WordPress-sidan och inläggsredigeraren.
Först måste du installera och aktivera plugin-programmet. Om du behöver hjälp, kolla in vår guide om hur du 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 skugga, klicka helt enkelt på “+”-ikonen och börja skriva i “Skuggrutan”. När det högra blocket visas klickar du 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 lite innehåll.
För att göra detta, fortsätt och klicka på ‘+’ inuti Drop Shadow Box-blocket.
Lägg sedan till blocket du vill använda och konfigurera det normalt.
Till exempel, i bilden nedan lade vi till ett bildblock och valde en bild från WordPress mediebibliotek.
När du är klar klickar du för att välja Block Shadow Box. I menyn till höger ser du alla inställningar som du kan använda för att styla detta block.
WordPress ställer in bredden på skuggan automatiskt, men du kan ändra den genom att öppna rullgardinsmenyn “Bredd” och sedan välja “Pixlar” eller “%.”
Du kan sedan ändra dess storlek med hjälp av inställningarna som visas.
Drop Box Shadow-plugin kommer med några olika effekter, så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 och se vilken du föredrar.
Du kan också ändra om plugin-programmet visar skuggan inuti boxen, utanför boxen eller båda med knapparna ‘Inner Shadow’ och ‘Outer Shadow’.
Därefter kan du ändra färgen på rutan och kanten med hjälp av inställningarna under rubriken “Färger”.
Observera bara att “Bakgrund” hänvisar till insidan av skuggrutan, medan “Border” visas utanför blocket.
Om du vill skapa en mjukare, böjd skuggruta kan du aktivera alternativet “Rundade hörn”. Slutligen kan du ändra justering och utfyllnad, liknande hur du anpassar andra block i WordPress.
För att skapa fler boxskuggor, följ helt enkelt samma process som beskrivs ovan.
När du är nöjd med sidans utseende klickar du helt enkelt på “Uppdatera” eller “Publicera” för att ha alla skuggor för dina nya rutor aktiva.
Metod 3. Lägg till en boxskugga med hjälp av en sidbyggare (avancerat)
Om du vill lägga till boxskuggor till målsidor, anpassade hemsidor eller någon del av ditt WordPress-tema rekommenderar vi att du använder ett plugin för sidbyggare.
SemillaProd är den bästa dra och släpp WordPress-sidbyggaren. Det låter dig designa anpassade målsidor 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 alla block med hjälp av dess avancerade dra och släpp-redigerare.
Först måste du installera och aktivera SeedProd-plugin. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.
Notera: Det finns även en premiumversion av SeedProd som kommer med mer professionellt designade mallar, avancerade funktioner och WooCommerce-integration. Vi kommer dock att använda gratisversionen då den har allt du behöver för att lägga till box-skuggor i WordPress.
Efter aktivering, gå till SeedProd » Målsidor i din WordPress-instrumentpanel.
SeedProd kommer med över 150 professionellt designade mallar grupperade i kategorier. Överst ser du kategorier som låter dig skapa vackra kommande snart-sidor, aktivera underhållsläge, skapa en anpassad inloggningssida för WordPress och mer.
Alla SeedProd-mallar är lätta att anpassa, så att du kan använda vilken design du vill.
När du hittar en mall du vill använda, för bara musen över den och klicka på bockikonen.
Du kan nu skriva ett namn för din målsida i fältet “Sidnamn”. SeedProd kommer automatiskt att skapa en “Sid-URL” med hjälp av sidnamnet.
Det är smart att inkludera relevanta sökord i din URL när det är möjligt, eftersom det 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 den automatiskt genererade webbadressen till sidan, skriv helt enkelt i fältet “Sidadress”.
När du är nöjd med informationen du har angett, klicka på “Spara och börja redigera sidan.” Detta kommer att ladda SeedProds sidbyggargränssnitt.
Denna enkla dra och släpp-byggare visar en liveförhandsvisning 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 drar du och släpper det i mallen.
För att anpassa ett block, gå vidare och klicka för att välja det blocket i SeedProd-redigeraren. Den vänstra menyn visar nu alla inställningar du kan använda för att anpassa blocket.
Om du till exempel klickar på ett rubrikblock kan du skriva in din egen text eller ändra textfärg och teckenstorlek.
När du skapar sidan kan du flytta block runt layouten genom att dra och släppa dem. För mer detaljerade instruktioner, se vår guide om hur du skapar en målsida med WordPress.
För att skapa en boxskugga, klicka för att välja valfritt block i SeedProd-sideredigeraren. Inställningarna i den vänstra menyn kan variera mellan blocken, men vanligtvis måste du klicka på fliken “Avancerat”.
Leta här efter rullgardinsmenyn “Shadow” i avsnittet “Styles”. Öppna helt enkelt den här rullgardinsmenyn och välj en nyansstil som Hårlinje, Medium eller 2X Large.
Förhandsgranskningen uppdateras automatiskt, så du kan prova olika stilar för att se vilken som ser bäst ut i din siddesign.
Om du inte vill använda någon av de färdiga stilarna, klicka på “Anpassa”.
Detta lägger till några nya inställningar där du kan ändra färg, oskärpa, omfattning och position för den anpassade skuggan.
När detta är gjort kan du fortsätta arbeta på sidan genom att lägga till fler block och boxskuggor.
När du är nöjd med sidans utseende, klicka på knappen “Spara” och välj sedan “Publicera” för att publicera den.
Metod 4. Hur man lägger till en Box Shadow med CSS Hero (Premium Plugin)
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 justera 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 bra alternativ om du vill skapa många olika skuggeffekter.
Först måste du installera och aktivera CSS Hero-plugin. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.
Efter aktivering kommer du att se knappen “Fortsätt med produktaktivering” högst upp på skärmen. Gå vidare och klicka på den här knappen.
Detta tar dig till CSS Hero-webbplatsen där du kan logga in på ditt konto och få en licensnyckel. Följ bara instruktionerna på skärmen och du kommer att omdirigeras till din webbplats med några få klick.
Klicka sedan på texten “Anpassa med CSS Hero” i WordPress admin verktygsfält.
Detta öppnar CSS Hero-redigeraren.
Som standard öppnas en panel med alla inställningar du kan använda för att anpassa innehållet genom att klicka på något innehåll.
Detta är bra om du vill lägga till en skuggruta på din webbplatss anpassade hemsida. Men om du vill anpassa någon annan sida måste du byta från “Välj”-läge till “Navigera”-läge, eftersom detta gör att du kan interagera med navigeringsmenyer, länkar och annat innehåll som vanligt.
För att göra detta, klicka på knappen ‘Välj/Navigera’ i verktygsfältet för att få fram ‘Navigera’.
Nu kan du navigera till sidan eller inlägget där du vill lägga till skuggan.
Så snart du kommer till den sidan, gå vidare och klicka på knappen “Välj/Navigera” igen så att den visar “Välj”.
När du är klar klickar du på stycket, bilden, knappen eller något annat innehåll där du vill lägga till en boxskugga.
Klicka på “Extra” i den vänstra panelen.
Nu kan du gå vidare och klicka på “Skapa skugga”, som visar alla inställningar du kan använda för att skapa en boxskugga.
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’.
När du har fattat detta beslut kan du justera skuggans orientering med den lilla pricken i rutan “Orientering”.
Dra och släpp punkten till en ny position för att se den flyttas i liveförhandsvisningen.
När du är nöjd med skuggans position kan du ändra dess färg, smeta ut den och utöka den.
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 helt enkelt samma process som beskrivs ovan.
När du är nöjd med hur sidan ser ut klickar du på “Spara och publicera” för att publicera den.
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 du skapar en innehållsförteckning i WordPress eller kolla in vår lista över de bästa WordPress popup-plugins.
