Avmystifierade termer för layouts i WordPress (snabbreferens)

Att förstå WordPress-layouttermer kan vara svårt för nybörjare. När du arbetar med din webbplats kan du stöta på termer som används av designers och utvecklare som verkar förvirrande till en början.

Vi har sett många WordPress-användare kämpa med dessa tekniska ord, men när du väl förstår deras betydelse blir det mycket lättare att navigera på din WordPress-webbplats. Att känna till de rätta termerna hjälper dig också att kommunicera mer effektivt med utvecklare och designers.

I den här guiden kommer vi att dela upp de vanligaste WordPress-layouttermerna. Med denna snabbreferens kommer du att känna dig mer säker på att hantera din webbplats layout som ett proffs.

Varför lära sig WordPress Layout Termer?

WordPress-teman styr utseendet och layouten på din webbplats. Beroende på vilket tema du väljer kan du anpassa det på flera olika sätt.

Du kan anpassa teman som stöder den fullständiga webbplatsredigeraren genom att besöka sidan Utseende ” Redigerare.

Om du använder ett klassiskt tema (ett tema som för närvarande inte stöder hela Site Editor) kan du customize det genom att besöka sidan Appearance ” Customize.

Detta kommer att starta temat customizer, som gillar detta:

Alla högst upp WordPress tem an har alternativ för att ändra din webbplats design med hjälp av temat customize eller hela site editor, men dina alternativ är limiterade beroende på temat.

Du kan använda WordPress page builders tillägg som SeedProd för ännu mer flexibilitet.

SeedProd allow you att enkelt skapa custom layouts med hjälp av enkla drag and drop tools utan att skriva någon kod.

SeedProd har också dussintals mallar som du kan använda som utgångspunkter. Det stöder WooCommerce, som hjälper dig att skapa layouter för din webbutik.

När du skapar en webbplatslayout kan du dock stöta på obekanta termer inom webbdesign.

Om du lär dig dessa termer för webbplatslayout kommer du att förstå byggstenarna i WordPress-webbplatsdesign, så att du lättare kan skapa vilken design du än kan tänka dig.

Låt oss avmystifiera dessa vanliga WordPress layout termer för att lära dig vad de betyder och hur du använder dem. Här är en snabb lista över de begrepp och termer som vi kommer att förklara i den här artikeln:

Förstå en typisk layout i WordPress

De flesta websites använder en mycket bekant layout. Det ser ut ungefär så här:

Det översta området på en website anropas header, följt av ett content-område och sedan en footer längst ner på sidan.

Layouten kan skilja sig åt beroende på vilken page en användare viewar.

En WordPress-bloggsida kan t.ex. innehålla 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 tala om var och en av dessa huvudsektioner mer i detalj.

Header i WordPress layout

Rubriken i en WordPress layout är den högsta upp sektionen på varje page. Den innehåller vanligtvis din website-logotyp, rubrik, navigationsmenyer, ett search-formulär och andra viktiga element som du vill att användarna ska se först.

Så här ser sektionen header ut på WPBeginner.

Custom Header i WordPress Themes

Många populära WordPress-teman innehåller ytterligare funktioner för att anpassa rubrikområdet i din WordPress-layout, vilket ibland kallas en anpassad rubrik.

Om du använder ett block theme med support för Site Editor kan du ändra header genom att clicka på header area i Site Editor.

Härifrån kan du customize headern så som du gillar den. You can change colors and the navigation menu and add blocks like search, site logo, buttons, and more.

Du hittar de anpassade rubrikinställningarna under fliken ”Rubrikalternativ” för klassiska teman.

Beroende på ditt WordPress theme kan du kanske lägga till en full width image i headern med en tagline eller en call-to-action knapp.

Vissa WordPress themes kan allow you to change the logo’s position, navigation menus, and header images.

Customize Bakgrund i WordPress

Some WordPress themes also allow you to easily change the background color or use a background image for your website.

Om du använder ett theme med support för Site Editor kan du ändra bakgrundsfärgen genom att gå till ”Styles” i hela Site Editor.

Välj helt enkelt alternativet ”Colors” i panelen Styles.

Efter det kan du klicka på ”Background” för att välja en bakgrundsfärg för din website.

För klassiska themes beror settings på utvalda funktioner i your theme.

Många klassiska themes kommer med stöd för custom bakgrund. Du hittar dessa inställningar i alternativen ”Colors” eller ”Background Image” i theme customizer.

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

För mer details, you can see our guides to adding a background image in WordPress or changing the background color in WordPress.

Innehållsområde i WordPress

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

För en custom homepage layout, kan content sektionen innehålla en call-to-action följt av tjänster eller produkter, testimonials och annan viktig information.

Onlinebutiker använder vanligtvis detta area för att främja pågående försäljning, utvalda produkter, bästsäljande objekt med mera.

Å andra sidan kan en webbplats med mycket content, som en blogg eller en site för magasin, använda en layout med mycket content.

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

Så här ser layouten för WPBeginners blogg page ut.

Den visar upp vårt mest populära content med en call-to-action för användare att gå med i vår email list. (Se: andra metoder vi använder för att utöka vår email list)

Som standard använder WordPress en blogg layout som visar dina senaste inlägg på bloggen som front page på din website.

However, you can change that setting and use any page as the front page of your website.

Gå till sidan Inställningar ” Läsning och välj ” En statisk sida ” under alternativet ”Din startsida visas”.

Därefter kan du välja en sida som du vill använda som startsida och en annan som bloggsida.

För mer detaljer, se vår guide om hur du skapar en separat page för dina blogginlägg i WordPress.

Glöm inte att klicka på knappen ”Save Changes” för att lagra dina inställningar.

Nu kan du edit den page du valt som din homepage och skapa en custom homepage layout.

Sidebar i WordPress layouts

Som namnet antyder visas sidebars vanligtvis på content-områdets högra eller vänstra sida.

I WordPress är sidebars också widget-ready areas. Det innebär att du kan add to widgets till detta area och visa element som gillar archives, nyhetsbrev, kategorier, populärt content och mycket mer.

För att redigera dina sidofält går du till sidan Utseende ” Widgets. Härifrån kan du lägga till block i sidofälten och redigera dem efter eget tycke och smak.

Det är dock inte alla themes i WordPress som har widget-klara areas eller sidebars.

Om you cannot see a Widgets menu under Appearance, then your theme does not support sidebars or have any widget-ready areas.

Area för footer i WordPress layouts

Området footer visas under innehållsområdet längst ner i en page layout.

Om du använder ett WordPress-tema med stöd för Site Editor kan du editera area i footern genom att clicka på den.

Du kan också edit a area för footern genom att click a på ”Patterns” i Site Editor navigation. The footer area kommer att appear under the ’Template Parts’ menu item.

När du redigerar footer area i Site Editor kan du add to block för att visa olika element.

You kan till exempel lägga till en lista över dina viktigaste pages, visa en navigation menu, lägga till ett kontaktformulär med mera.

Om du använder ett klassiskt tema finns det en god chans att det levereras med ett widgetområde i sidfoten.

Gå bara till appearance ” Widgets page och leta efter ett widgetområde för footer.

Like the site editor, you can use blocks to add different elements to footer widgets in your theme.

Undrar du vad du ska lägga till i footern på din site? Se vår checklista över saker som ska addas till footern på din site i WordPress.

Andra komponenter i en layout för WordPress

Nu ska vi titta på några av komponenterna i en WordPress layout som du kan add to your header, content, sidebar, or footer sections. Det är dessa block som hjälper dig att skapa en fungerande layout.

Navigering av menyer i WordPress

Navigationsmenyer eller menyer är horisontella eller vertikala listor med länkar. De flesta websites har minst en primär navigation menu i header area.

Vissa websites använder dock flera menyer för navigation i Header area.

WordPress tillåter dig också att displayed navigation menyer som en widget. Dessa menyer visas som en vertikal lista med links, och du kan placera dem i sidebar eller footer widget areas.

För mer detaljer, se vår guide om hur du lägger till navigations menyer i WordPress.

Använda widgetar i en layout i WordPress

Om ditt WordPress Theme har stöd för widgets kan du använda dem för att ändra layouten på din website. Och med block widgets kan ditt theme nu också använda block i widgetar-områdena.

You can add widgets to your WordPress website’s widget-ready areas or sidebars. Vissa WordPress teman kommer med flera widget-klara områden för att add widgetar eller block.

WordPress levereras med flera built-in widgets och block som du kan använda. Många populära tillägg till WordPress har också sina egna widgetar och block.

Du kan till exempel använda widgets/block för att add to listor med populära inlägg, ett kontaktformulär, bannerannonser, social media feeds med mera.

Du kan se alla dessa widgets genom att besöka sidan Appearance ” Widgets i WordPress admin area.

Obs: Om ditt tema inte har widgetområden kanske du inte ser sidan ”Widgets” i WordPress adminområde.

Mer detaljer finns i vår guide om hur du lägger till och använder widgetar i WordPress.

Använda Block i layouts i WordPress

WordPress använder block editor för att skriva content, hantera widget areas eller editera din website. Den använder block för alla vanliga webbelement, vilket är anledningen till att den anropas block editor.

Denna editor är utformad för att hjälpa dig att skapa beautiful layouts för din WordPress inlägg och pages med hjälp av block.

Det finns olika typer av block för de vanligaste elementen i alla typer av content. You can add to paragraphs, headings, images, galleries, video embeds, columns, tables, and more, till exempel.

Detta allow you att skapa olika layouts för varje post eller page på din WordPress website utan att installera ett plugin eller ändra ditt theme.

Featured Images i layouts i WordPress

Om du besöker WPBeginners hemsida kommer du att märka miniatyrbilder bredvid varje artikeltitel. Dessa kallas för utvalda bilder.

WordPress allow you to set featured images for your posts and pages. Ditt WordPress theme använder sedan dessa images i olika areas på din website.

För att lära dig mer, se vår guide om hur du lägger till featured images i WordPress.

Cover Images i WordPress

En cover image är vanligtvis en bred bild som används som cover photo för en new section i ett blogginlägg eller på en page.

You can add it to your post or page using the Cover block. Cover block allows you also to use a background color instead of an image.

För att lära dig mer, se vår detaljerade guide om skillnaden mellan cover image och featured image.

Använda mönster i WordPress Editor

Patterns är samlingar av förbestämda block som du kan använda för att snabbt add to olika sections till dina layouts.

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 hela Site Editor i din WordPress Theme och layout på din website.

Starta bara Site Editor så kommer du att se mönster i alternativen ”Design”.

Varje mönster är en samling block som är ordnade i en viss order för vanligt förekommande layouts.

Ditt WordPress theme kan innehålla flera mönster. Du kan också hitta fler mönster i WordPress Patterns Library.

Vill du save dina design sections? You save your egna blockarrangemang som patterns och återanvända dem senare.

Det är en relativt ny funktion, så det finns bara en begränsad uppsättning mönster tillgängliga. Men i takt med att fler WordPress-teman och plugins lägger till sina mönster i blockredigeraren kommer fler alternativ att bli tillgängliga.

Du kan läsa vår guide om hur du använder blockmönster i WordPress för att lära dig mer.

Lägga till knappar i WordPress layout

Knappar spelar en viktig roll i modern design och layouts för webbplatser. De ger användarna en clear call-to-action, vilket hjälper dig att öka din verksamhet och konverteringar.

Standard Block Editor levereras med ett knapp-block som du kan använda i alla WordPress post eller page eller i Site Editor.

Ditt WordPress-tema kan också innehålla inställningar för call-to-action-knappar i temaanpassaren. De mest populära insticksprogrammen för sidbyggare i WordPress innehåller också knappar i olika stilar.

Du kan även lägga till knappar för click-to-call i WordPress med ett plugin.

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

Använda Customize CSS i layouter i WordPress

CSS är det språk för Styling som används för att skapa websites. Ditt WordPress-tema och dina tillägg kommer med sina egna CSS-regler, men då och då kanske du vill ändra små saker som textfärg, fontstorlek eller bakgrundsfärg.

Det är här som customize CSS kommer in i bilden. WordPress gör det lättare för dig att spara dina egna customize CSS-regler.

Om du använder ett tema med stöd för Site Editor, går du bara till sidan Appearance ” Editor för att starta Site Editor.

Klicka på en template för att börja edit, och klicka sedan på knappen ”Styling” högst upp till höger på vyn.

Detta kommer att visa panelen ”Styles” i den högra colonnen. Härifrån rullar du ner och klickar på tabben ”Additional CSS”.

Detta kommer att visa en text box där du kan add to din ytterligare CSS kod.

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

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

Gå bara till sidan Appearance ” Customize och klicka sedan på tabben ’Additional CSS’.

Härifrån kan du add to dina custom CSS-regler, och du kommer att kunna se dem tillämpas i live preview.

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

Normalt, om du använder standardmetoderna, sparas din custom CSS-kod med dina temainställningar. Om du ändrar ditt theme inaktiveras din customize CSS-kod.

Ett bättre sätt att lagra din anpassade CSS i WordPress är att använda pluginet WPCode. Det är det bästa kodsnuttspluginet för WordPress, så att du enkelt kan lägga till anpassade kodsnuttar utan att förstöra din webbplats.

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

Efter aktivering, gå till Code Snippets ” + Add New från WordPress adminpanelen.

Sedan hoverar du över alternativet ”Add Your Custom Code (New Snippet)” i biblioteket med code snippets och klickar på knappen ”Use snippet”.

Därefter, högst upp på sidan, add a title for your custom CSS snippet. Det kan vara vad som helst som hjälper dig att identifiera koden.

Därefter skriver du eller klistrar in din custom CSS i boxen ”Code Preview” och ställer in ”Code Type” genom att välja alternativet ”CSS Snippet” från dropdown-menyn.

Bläddra sedan ner till avsnittet ”Insertion” och välj metoden ”Auto-Insert” om du vill köra koden på hela din WordPress-webbplats.

Du kan välja metoden ”Shortcode” om du bara vill köra koden på specifika pages eller posts.

Slutligen återvänder du till toppen av sidan, växlar till ”Active” och klickar på knappen ”Save Snippet”.

Detta kommer att save din custom CSS code snippet.

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

Termer för layouts i page builders i WordPress

Det enklaste sättet att bygga custom WordPress layouts för dina landing pages är genom att använda en WordPress page builder.

Vi rekommenderar att du använder SeedProd. Det är det mest nybörjarvänliga WordPress page builder tillägget på marknaden.

Andra page builders använder liknande termer för gemensamma tools och funktioner.

Använda templates i page builders i WordPress

Templates är det snabbaste sättet att skapa en layout för en webbsida. Alla populära page builders-plugins kommer med ett gäng färdiga templates som du kan använda som utgångspunkt.

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

Moduler och Block i WordPress Page Builders

Like the blocks in the standard WordPress editor, page builders plugins also use blocks.

Vissa page builders kan anropa dem moduler eller element, men de är i princip samma sak.

Men page builders plugins kommer med fler block än standard editor. Till exempel innehåller SeedProd block för rekommendationer, WooCommerce-block, Google Maps, kontaktformulär, Facebook embeds och mycket 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 Sections i dina layouts i WordPress

I likhet med funktionen ”Patterns” i standard editor är en Section en uppsättning block som grupperas för att omedelbart skapa gemensamma områden på en website.

Till exempel kan du vanligtvis använda en header section, hero image, prissättningstabeller och mer.

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

Bonusresurser

Nedan följer några ytterligare resurser för nybörjare som behandlar grunderna i WordPress-design mer detaljerat:

• Så här lägger du till dummy-innehåll för temautveckling i WordPress
• WordPress Teman – en lathund för nybörjare
• Så här hittar du vilka filer som ska redigeras i WordPress Theme
• Nybörjarguide till WordPress mallhierarki (fusklapp)
• Så här skapar du enkelt ett anpassat WordPress-tema (utan kod)

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.