WordPress Layoutter Förklarade (Snabb Referens)

När vi först började designa webbplatser med WordPress, bombarderades vi av nya termer som "headers", "footers" och "widgets". Det kändes som att lära sig ett helt nytt språk bara för att bygga en enkel webbplats.

Nu, efter att ha hjälpt miljontals WordPress-användare under de senaste 16+ åren, har vi inte bara bemästrat dessa termer utan också upptäckt de enklaste sätten att förklara dem för nybörjare.

Om du fortfarande är förvirrad över vad dessa layouttermer betyder (och hur de fungerar tillsammans), oroa dig inte. Du är inte ensam, och du är på rätt plats.

I den här enkla guiden bryter vi ner alla viktiga WordPress-layouttermer i enkla, lättförståeliga förklaringar som du kan referera till när som helst.

En snabb notering om layout i WordPress

När du lär dig om WordPress-layouter kommer du att stöta på olika termer beroende på hur du bygger din webbplats. Detta varierar beroende på om du använder teman som stöder fullständig webbplatsredigering, en klassisk themes anpassningsfunktion, eller plugins för sidbyggare i WordPress.

Till exempel, med Full Site Editor hittar du layoutalternativ under Utseende » Redigerare:

Medan du i klassiska teman använder Theme Customizer under Utseende » Anpassa.

Så här ser det ut:

För mer designflexibilitet väljer många användare sidbyggare som SeedProd, som erbjuder dra-och-släpp-gränssnitt.

De kommer också vanligtvis med funktioner som standardverktygen i WordPress inte har, som extra och avancerade block att lägga till ditt innehåll.

Även om dessa verktyg kan använda olika termer och gränssnitt, förblir de grundläggande layoutkoncepten desamma. Att förstå dessa kärnbegrepp hjälper dig att skapa bättre WordPress-designer och till och med en anpassad layout oavsett vilka verktyg du använder.

Låt oss utforska dessa viktiga WordPress-layouttermer och se hur de fungerar på olika plattformar. Här är vad vi kommer att täcka:

• Förstå en typisk layout i WordPress
• Header Area
• Bakgrundsbild/färg
• Innehållsområde
• Sidofältsområde (valfritt)
• Sidfotsområde
• Andra komponenter i en WordPress-layout
• Navigationsmeny
• Widgets (Klassiska teman)
• Block
• Utvalda bilder
• Omslagsbilder
• Blockmönster
• Knappar
• Anpassad CSS
• Layouttermer i WordPress sidbyggare
• Använda mallar i WordPress sidbyggare
• Moduler och block i WordPress sidbyggare
• Använda sektioner i WordPress sidbyggare
• Vanliga frågor
• Bonusresurser

Förstå en typisk layout i WordPress

Tänk på en webbplats layout som ett vänligt brev. Ett brev har en hälsning högst upp (sidhuvudet), huvudmeddelandet i mitten (innehållsområdet) och en signatur längst ner (sidfoten).

De flesta webbplatser följer samma enkla struktur. Det ser ut ungefär så här:

Beroende på vilken sida en användare tittar på kan layouten skilja sig åt.

Till exempel kan en WordPress-bloggsida inkludera ett sidofält bredvid innehållsområdet.

Denna grundläggande layout är fylld med andra element, som vi kommer att diskutera senare i den här artikeln.

Låt oss först prata om var och en av dessa huvudsektioner mer i detalj.

Sidhuvuds-område

Rubriken i en WordPress-layout är den övre delen av varje sida. Den innehåller vanligtvis din webbplatslogotyp, titel, navigeringsmenyer, ett sökformulär och andra viktiga element som du vill att användarna ska se först.

Här är hur sidhuvudssektionen ser ut på WPBeginner.

Anpassad rubrik i WordPress-teman

Många populära WordPress-teman inkluderar ytterligare funktioner för att anpassa sidhuvudsdelen av din WordPress-layout, vilket ibland kallas ett anpassat sidhuvud.

Anpassa sidhuvudet i ett blocktema

Om du använder ett blocktema med stöd för webbplatsredigerare, kan du ändra rubriken genom att klicka på rubrikområdet i webbplatsredigeraren.

Härifrån kan du anpassa sidhuvudet efter eget tycke. Du kan ändra färger, justera navigeringsmenyn och lägga till block som sökning, webbplatslogotyp, knappar och mer.

Anpassa sidhuvudet i ett klassiskt tema

För klassiska teman hittar du vanligtvis dessa inställningar i temats anpassningsfunktion. Leta efter en sektion som heter 'Rubrik', 'Rubrikalternativ' eller 'Webbplatsidentitet'.

Beroende på ditt WordPress-tema kan du kanske lägga till en helsidesbild i sidhuvudet med en slogan eller en knapp för "call-to-action".

Vissa WordPress-teman kan tillåta dig att ändra logotypens position, navigeringsmenyer och sidhuvudsbilder.

Bakgrundsbild/färg

Vissa WordPress-teman tillåter dig också att enkelt ändra bakgrundsfärgen eller använda en bakgrundsbild för din webbplats.

Ändra bakgrunden i ett blocktema

Om du använder ett tema med stöd för webbplatsredigeraren kan du ändra bakgrundsfärgen genom att gå till 'Stilar' i redigeraren för hela webbplatsen.

Välj helt enkelt alternativet 'Färger' från panelen Stilar.

Därefter kan du klicka på 'Bakgrund' för att välja en bakgrundsfärg för din webbplats.

Ändra bakgrunden i ett klassiskt tema

För klassiska teman beror inställningarna på ditt temas funktioner.

Många klassiska teman levereras med stöd för anpassad bakgrund. Du hittar dessa inställningar under alternativen 'Färger' eller 'Bakgrundsbild' i temaanpassaren.

Ofta är dessa alternativ begravda inuti andra flikar, och du måste leta runt för att hitta dem.

För mer information kan du se dessa relaterade guider om hur man lägger till en bakgrundsbild i WordPress eller hur man ändrar bakgrundsfärgen i WordPress.

Innehållsområde

Innehållsområdet finns direkt efter sidhuvudet i en webbplatslayout. Det är där sidans huvudinnehåll visas.

För en anpassad startsidelayout kan innehållssektionen inkludera en "call-to-action" följt av tjänster eller produkter, vittnesmål och annan viktig information.

Onlinebutiker använder vanligtvis detta område för att marknadsföra pågående reor, utvalda produkter, bästsäljande artiklar och mer.

Å andra sidan kan en innehållsrik webbplats som en blogg eller tidningswebbplats använda en innehållstung layout.

Den kommer att visa de senaste artiklarna med utdrag och bilder, visa en anmälningsformulär för nyhetsbrev för att bygga en e-postlista, eller använda områden för innehållsupptäckt för att hjälpa användare att hitta fler sätt att spendera tid på webbplatsen.

Här är hur WPBeginners bloggsidelayout ser ut.

Det visar vårt mest populära innehåll med en uppmaning till användare att gå med i vår e-postlista. (Se: andra metoder vi använder för att växa vår e-postlista)

Som standard använder WordPress en blogglayout som visar dina senaste blogginlägg som startsida för din webbplats.

Du kan dock ändra den inställningen och använda en enskild sida som startsida för din webbplats.

Gå till sidan Inställningar » Läser och välj ‘En statisk sida’ under alternativet ‘Din startsida visar’.

Därefter kan du välja en sida att använda som din startsida och en annan för din bloggsida.

För mer information, se vår guide om att skapa en separat sida för dina blogginlägg i WordPress.

Glöm inte att klicka på knappen 'Spara ändringar' för att spara dina inställningar.

Nu kan du redigera sidan du valde som din startsida och skapa en anpassad startsidelayout.

Sidofältsområde (valfritt)

Traditionellt sett visas sidofält på höger eller vänster sida av innehållsområdet.

Med det sagt väljer många moderna webbplatser nu renare layouter utan sidofält – särskilt för företagssidor och landningssidor.

Sidofält i klassiska teman

I klassiska WordPress-teman är sidofält områden som är redo för widgets där du kan lägga till widgets som arkiv, nyhetsbrevsanmälningsformulär, kategorier och populärt innehåll.

Du hittar dessa alternativ under sidan Utseende » Widgets.

Sidofält i blockteman

För blockteman fungerar sidofält annorlunda. Medan dessa teman kan inkludera sidofältsområden, använder de block istället för traditionella widgets.

Du kan anpassa dessa direkt via Webbplatsredigeraren, vilket ger mer flexibla designalternativ.

Tänk på att vissa moderna WordPress-teman kanske inte alls inkluderar sidofältsområden, utan istället fokuserar på layouter med full bredd och innehållsfokus.

För mer information om hur du använder sidofält kan du läsa vår ultimata guide till WordPress-sidofältsknep.

Sidfotsområde

Sidfotsområdet visas under innehållsområdet längst ner i en sidlayout.

Om du använder ett WordPress-tema med stöd för webbplatsredigeraren kan du redigera sidfotsområdet genom att klicka på det.

Det är här du kommer att arbeta med mallkomponenter. Tänk på mallkomponenter som återanvändbara block för sektioner som din rubrik och sidfot.

Det bästa är att du kan redigera dem en gång, och de uppdateras överallt på din webbplats.

För att redigera din sidfot, gå till Utseende » Redigerare för att starta webbplatsredigeraren. Därifrån väljer du 'Mönster' från menyn till vänster och scrollar ner till avsnittet 'Mallkomponenter' för att hitta och klicka på din sidfot.

När du redigerar sidfotsområdet i webbplatsredigeraren kan du lägga till valfria block för att visa olika element.

Du kan till exempel lägga till en lista över dina viktigaste sidor, visa en navigeringsmeny, lägga till ett kontaktformulär och mer.

Om du använder ett klassiskt tema är chansen stor att det kommer med ett widgetområde för sidfoten.

Gå helt enkelt till sidan Utseende » Widgets och leta efter ett widget-område för sidfoten.

Precis som webbplatsredigeraren kan du använda block för att lägga till olika element i sidfotswidgetar i ditt tema.

Undrar du vad du ska ha i sidfoten på din webbplats? Se vår checklista med saker att lägga till i sidfoten på din WordPress-webbplats.

Andra komponenter i en WordPress-layout

Därefter kommer vi att titta på några av komponenterna i en WordPress-layout som du kan lägga till i dina sektioner för sidhuvud, innehåll, sidofält eller sidfot. Dessa är byggstenarna som hjälper dig att skapa en fungerande layout.

Navigationsmeny

Navigationsmenyer eller menyer är horisontella eller vertikala listor med länkar. De flesta webbplatser har minst en primär navigeringsmeny i sidhuvudsdelen.

Vissa webbplatser använder dock flera navigeringsmenyer i sidhuvudet.

WordPress låter dig också visa navigeringsmenyer som en widget. Dessa menyer visas som en vertikal lista med länkar, och du kan placera dem i sidofält eller i widgetområdena för sidfoten.

För mer information, se våra guider om hur man lägger till navigeringsmenyer i WordPress och hur man stylar navigeringsmenyer i WordPress.

Widgets (Klassiska teman)

Om ditt WordPress-tema stöder widgets kan du använda dem för att ordna om din webbplatslayout. Dessutom, med block-widgets, kan ditt tema nu även använda block i widgetområdena.

Du kan lägga till widgets i din WordPress-webbplats widget-redo områden eller sidofält. Vissa WordPress-teman levereras med flera widget-redo områden för att lägga till widgets eller block.

WordPress levereras med flera inbyggda widgets och block som du kan använda. Många populära WordPress-plugins tillhandahåller också sina egna widgets och block.

Du kan till exempel använda widgets/block för att lägga till listor över populära inlägg, ett kontaktformulär, bannerannonser, flöden från sociala medier och mer.

Du kan se alla dessa widgets genom att besöka sidan Utseende » Widgets i WordPress adminområde.

Notera: Om ditt tema inte har widgetområden kanske du inte ser sidan 'Widgets' i WordPress-administrationsområdet.

För mer information, se vår guide om hur man lägger till och använder widgets i WordPress.

Block

WordPress använder blockredigeraren för att skriva innehåll, hantera widgetområden eller redigera din webbplats. Den använder block för alla vanliga webelement, vilket är anledningen till att den kallas blockredigeraren.

Den här redigeraren är utformad för att hjälpa dig att skapa vackra layouter för dina WordPress-inlägg och sidor med hjälp av block.

Det finns olika typer av block för de vanligaste elementen i alla typer av innehåll. Till exempel kan du lägga till stycken, rubriker, bilder, gallerier, videoinbäddningar, kolumner, tabeller och mer.

Detta gör att du kan skapa olika layouter för varje inlägg eller sida på din WordPress-webbplats utan att installera ett plugin eller ändra ditt tema.

I blockteman kan samma block även ersätta traditionella widgets i områden som sidofält, sidhuvuden och sidfötter.

Utvalda bilder

Om du besöker WPBeginners startsida kommer du att märka miniatyrbilder bredvid varje artikelrubrik. Dessa kallas utvalda bilder.

WordPress låter dig ställa in utvalda bilder för dina inlägg och sidor. Ditt WordPress-tema använder sedan dessa bilder på olika områden på din webbplats.

För att lära dig mer, se vår guide om hur man lägger till utvalda bilder i WordPress.

Omslagsbilder

En omslagsbild är vanligtvis en bred bild som används som omslagsfoto för en ny sektion i ett blogginlägg eller en sida.

Du kan lägga till den i ditt inlägg eller din sida med hjälp av Omslagsblocket. Omslagsblocket låter dig även använda en bakgrundsfärg istället för en bild.

För att lära dig mer, se vår detaljerade guide om skillnaden mellan omslagsbild och utvald bild.

Blockmönster

Mönster är samlingar av förarrangerade block som du kan använda för att snabbt lägga till olika sektioner i dina layouter.

Du kan använda mönster för att skriva innehåll och redigera inlägg och sidor.

På samma sätt kan du använda mönster i fullständiga webbplatsredigeraren i ditt WordPress blocktema och webbplatslayout.

Starta helt enkelt webbredigeraren, så ser du mönster under alternativen 'Design'.

Varje mönster är en samling block arrangerade i en viss ordning för vanliga layouter.

Ditt WordPress-tema kan komma med flera mönster. Du kan också hitta fler mönster i WordPress Mönsterbibliotek.

Vill du spara dina designsektioner? Du sparar dina egna blockarrangemang som mönster och återanvänder dem senare.

Blockmönster är en kraftfull funktion i WordPress, och du kan hitta tusentals gratis alternativ i den officiella WordPress Pattern Directory.

Allt eftersom fler WordPress-teman och plugins lägger till sina egna mönster, fortsätter detta bibliotek att växa.

Du kan se vår guide om att använda blockmönster i WordPress för att lära dig mer.

Knappar

Knappar spelar en viktig roll i modern webbdesign och layouter. De ger användarna en tydlig uppmaning till handling, vilket hjälper dig att växa din verksamhet och dina konverteringar.

Standardblockredigeraren levereras med ett Knappblock som du kan använda i alla WordPress-inlägg eller sidor eller inuti webbplatsredigeraren.

Ditt WordPress-tema kan också inkludera inställningar för call-to-action-knappar i temaanpassaren. De flesta populära WordPress-sidbyggarplugins inkluderar också knappar i olika stilar.

Du kan till och med lägga till klickbara telefonknappar i WordPress med ett plugin.

För mer information, se vår guide om hur man lägger till call-to-action-knappar i WordPress.

Anpassad CSS

Tänk på CSS (Cascading Style Sheets) som färgen och dekorationerna för din webbplats. Det är koden som styr visuella detaljer som färger, typsnitt och avstånd.

Ditt WordPress-tema och dina plugins kommer med sina egna CSS-regler, men du kanske vill ändra små saker som textfärg eller teckenstorlek. Det är här anpassad CSS kommer in.

WordPress gör det superenkelt för dig att spara dina egna anpassade CSS-regler.

Lägga till anpassad CSS i ett blocktema

Om du använder ett blocktema med stöd för webbplatsredigeraren, gå till sidan Utseende » Redigerare.

Från huvudredigeringsinstrumentpanelen, klicka helt enkelt på ikonen 'Stilar' i det övre högra hörnet. Detta öppnar panelen 'Stilar' i den högra kolumnen.

Härifrån, scrolla ner och klicka på fliken 'Ytterligare CSS'. Detta visar en textruta där du kan lägga till din CSS-kod.

Glöm inte att klicka på knappen 'Spara' för att lagra dina ändringar när du är klar.

Lägga till anpassad CSS i ett klassiskt tema

Om du använder ett klassiskt WordPress-tema kan du lägga till din anpassade CSS i temaanpassaren.

Gå helt enkelt till sidan Utseende » Anpassa och klicka sedan på fliken 'Ytterligare CSS'.

Härifrån kan du lägga till dina anpassade CSS-regler, och du kommer att kunna se dem tillämpade i liveförhandsgranskningen.

Lägga till anpassad CSS i WordPress med hjälp av ett plugin

Normalt, om du använder standardmetoderna, sparas din anpassade CSS-kod med dina temainställningar. Att byta tema inaktiverar din anpassade CSS-kod.

Ett bättre sätt att lagra din anpassade CSS i WordPress är att använda WPCode-pluginet. Det är det bästa pluginet för kodavsnitt i WordPress, som låter dig enkelt lägga till anpassade kodavsnitt utan att skada din webbplats.

Först måste du installera och aktivera pluginet WPCode. För detaljer, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till Code Snippets » + Lägg till ny från WordPress admin-instrumentpanelen.

Håll sedan muspekaren över alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)' i biblioteket med kodavsnitt och klicka på knappen 'Använd kodavsnitt'.

Lägg sedan till en titel för ditt anpassade CSS-utdrag högst upp på sidan. Detta kan vara vad som helst som hjälper dig att identifiera koden.

Skriv eller klistra sedan in din anpassade CSS i rutan 'Kodförhandsgranskning' och ställ in 'Kodtyp' genom att välja alternativet 'CSS-utdrag' från rullgardinsmenyn.

Scrolla sedan ner till avsnittet 'Infogning' och välj metoden 'Automatisk infogning' om du vill köra koden på hela din WordPress-webbplats.

Du kan välja metoden 'Kortkod' om du bara vill köra koden på specifika sidor eller inlägg.

Slutligen, gå tillbaka till toppen av sidan, växla omkopplaren till 'Aktiv' och klicka på knappen 'Spara utdrag'.

Detta sparar din anpassade CSS-kodsnutt.

För mer om detta ämne, se vår fullständiga guide om hur man lägger till anpassad CSS i WordPress.

Layouttermer i WordPress sidbyggare

Det enklaste sättet att bygga anpassade WordPress-layouter för dina landningssidor är att använda en WordPress-sidbyggare.

Vi rekommenderar att använda SeedProd. Det är det mest nybörjarvänliga pluginet för WordPress-sidbyggare på marknaden.

Andra sidbyggare använder liknande termer för vanliga verktyg och funktioner.

Använda mallar i WordPress sidbyggare

Mallar är det snabbaste sättet att skapa en webbsideslayout. Alla populära sidbyggarplugins kommer med en mängd färdiga mallar som du kan använda som utgångspunkt.

Till exempel har SeedProd mallar för olika sidtyper, inklusive landningssidor, försäljningssidor, 404-sidor, kommande sidor och mer.

Moduler och block i WordPress sidbyggare

Precis som blocken i standardredigeraren för WordPress använder sidbyggarplugins också block.

Vissa sidbyggare kan kalla dem moduler eller element, men de är i princip samma sak.

Sidbyggarplugins levereras dock med fler block än standardredigeraren. Till exempel inkluderar SeedProd block för vittnesmål, WooCommerce-block, Google Maps, kontaktformulär, Facebook-inbäddningar och mer.

Du kan använda block för att skapa dina egna layouter, flytta runt dem och experimentera för att avgöra vad som fungerar bäst för din verksamhet.

Använda sektioner i WordPress sidbyggare

Liknande funktionen 'Mönster' i standardredigeraren är ett avsnitt en uppsättning block som grupperats för att omedelbart skapa vanliga områden på en webbplats.

Till exempel kan du vanligtvis använda en sidhuvudssektion, hjältebild, prislistor och mer.

Olika WordPress-sidbyggarplugins kan använda olika termer för dem. Till exempel kallar SeedProd dem sektioner, och Beaver Builder kallar dem sparade rader och kolumner.

Vanliga frågor

Här är några frågor som ofta ställs av våra läsare om WordPress-layouter:

Vad är skillnaden mellan ett block och en widget i WordPress?

Block är de grundläggande byggelementen du använder för att skapa innehåll i WordPress-redigeraren, som stycken, bilder eller knappar.

Widgets användes traditionellt för att lägga till specifika innehållsmoduler i områden utanför sidans huvudinnehåll, som sidopaneler och sidfötter.

I moderna blockbaserade teman kan block nu användas i vilket widget-redo område som helst, vilket ger dig mycket mer flexibilitet och gör det klassiska widget-systemet mindre vanligt.

Kan jag ha en annan layout för varje sida?

Ja, det kan du absolut. WordPress blockredigerare låter dig skapa unika layouter för varje inlägg och sida. Du kan ordna kolumner, lägga till olika block och strukturera innehåll hur du vill på en sida-för-sida-basis.

För ännu mer kontroll kan sidbyggarplugins som SeedProd låta dig designa helt anpassade sidor från grunden som är helt oberoende av ditt temas standardlayout.

Kommer alla WordPress-teman med ett sidofält?

Nej, alla teman inkluderar inte ett sidofält.

Många moderna designer fokuserar på en ren, helsideslayout för en mer fokuserad användarupplevelse, särskilt på landningssidor och företagswebbplatser.

De flesta mångsidiga teman erbjuder dock fortfarande en sidopanel som ett alternativ som du kan aktivera eller inaktivera via temaanpassaren eller webbplatsredigeraren.

Bonusresurser

Följande är några ytterligare resurser för nybörjare som täcker grunderna i WordPress-design mer i detalj:

• Hur man lägger till dummy-innehåll för temautveckling i WordPress
• WordPress tema-fuskblad för nybörjare
• Hur man hittar vilka filer man ska redigera i WordPress-tema
• Nybörjarguide till WordPress mallhierarki (fuskblad)
• Hur du enkelt skapar ett anpassat WordPress-tema (utan kod)

Vi hoppas att den här artikeln hjälpte dig att lära dig om termerna som används i WordPress-layouter. Du kanske också vill kolla in vår guide om att lära dig WordPress gratis på en vecka eller bokmärka vår WordPress-ordlista, en nybörjarvänlig ordbok över WordPress-termer.

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.