Avmystifierade termer för layouts i WordPress (snabbreferens)

Försöker du förstå vad termerna för layouts i WordPress betyder?

Många Beginnare stöter på termer och vokabulär för WordPress layout när de arbetar med sina websites. Det här är ord som används av designers och utvecklare, och genomsnittliga användare kan tycka att de är förvirrande.

I den här guiden kommer vi att förklara några av de vanligaste termerna för layouts i WordPress. Detta kommer att hjälpa dig att förstå den lingo som används för WordPress website layouts och arbeta på din website gillar en total Pro.

Varför lära sig WordPress Layout Termer?

WordPress personuppgiftsansvariga themes kontrollerar utseendet på din website. Beroende på vilket theme du använder kan du customize det på flera olika sätt.

För teman som har support för hela Site Editor kan du customize dem genom att besöka sidan Appearance ” Editor .

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.

Det har också dussintals templates som du kan använda som utgångspunkter. Dessutom har SeedProd support för WooCommerce, som också hjälper dig att skapa layouts för din online store.

Men när du arbetar med att skapa en layout för din website kan du stöta på termer inom webbdesign som du kanske inte känner till.

Om du lär dig dessa termer för layout av webbplatser kommer du att förstå byggstenarna för design av WordPress-webbplatser 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.

Till exempel kan en page på en WordPress blogg innehålla en sidebar bredvid content area.

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 kommer med ytterligare funktioner för att customize the header area of your WordPress layout. Den här funktionen anropas ibland som en custom header.

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.

För klassiska themes kan du hitta inställningarna för customizer header under tabben ’Header Options’.

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 kommer direkt efter headern i layouten på en site. Det är här sidans huvudsakliga content 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 excerpt och images, den kan visa ett anmälningsformulär för nyhetsbrev för att bygga en email list, eller använda content discovery areas för att hjälpa användare 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å bara till Settings ” Lä sa page och välj ’En statisk sida’ under alternativet ’Your homepage displays’.

Efter det kan du välja en page som du vill använda som homepage och en annan som page för din blogg.

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 editera dina sidebar måste du gå till sidan Appearance ” Widgets. Härifrån kan du add block till dina sidebars och edit dem som du gillar.

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 är det stor chans att ditt theme kommer med ett area för widgetar i footern.

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.

Note : Du kanske inte ser sidan ”Widgets” i WordPress admin area om ditt theme inte har några widgetar.

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 homepage kommer du att notera thumbnails images bredvid varje artikeltitel. Dessa anropas featured images.

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 när du skriver content och redigerar posts och pages.

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 utvald funktion, så en begränsad uppsättning mönster finns tillgängliga. Fler alternativ kommer dock att bli tillgängliga i takt med att fler teman och tillägg till WordPress addar sina mönster till block editor.

För att lära dig mer kan du se vår guide om att använda block patterns i WordPress.

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.

Din WordPress tema kan också komma med en call-to-action knapp inställningar i temat customize. De mest populära plugins för page builders i WordPress har också knappar i olika stilar som du kan använda.

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 clicka på knappen ”Save” för att store dina ändringar när du är slutförd.

Om du använder ett klassiskt WordPress-tema kan du add to your custom CSS i temats customizer.

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 custom CSS i WordPress är genom att använda WPCode plugin. Det är det bästa WordPress code snippet plugin som gör att du enkelt kan lägga till custom code snippets utan att bryta din site.

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.

Rulla sedan ner till ”Insertion” section och select ”Auto-Insert” method om du vill köra koden över hela din WordPress website.

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

Slutligen går du tillbaka högst upp på sidan, togglar omkopplaren till ”Active” och klickar sedan 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.

Till exempel har SeedProd templates för olika typer av sidor som du kan behöva, inklusive landing pages, försäljningssidor, 404-sidor, coming soon-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.

You can use blocks to create your own layouts, move them around, and play around to find out what works best for your business.

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 tillägg för page builders i WordPress kan använda olika termer för dem. I SeedProd anropas de till exempel som sections, medan Beaver Builder kallar dem saved rows och columns.

Vi hoppas att den här artikeln hjälpte dig att lära dig mer om de termer som används i WordPress layouts. Du kanske också vill kontrollera vår guide om hur du lär dig WordPress gratis på en vecka eller vår jämförelse av de bästa företagen för webbhotell för WordPress.

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.