Så här editerar du en WordPress homepage (enkelt och effektivt)

Vill du skapa en customizer homepage för din WordPress site?

Som standard visas blogginläggen på WordPress homepage, men du kan editera den så att den visar något annat. Din homepage kan t.ex. vara en landing page som visar dina produkter och tjänster.

I den här artikeln visar vi hur du enkelt kan editera och customize din homepage i WordPress.

Vad är WordPress homepage?

Din homepage är ”front page” på din website i WordPress. Det är den första page som dyker upp när en användare besöker ditt domain name.

Om du till exempel skriver in www.wpbeginner.com i din webbläsare kommer du att hamna på vår websites homepage, där du kan se våra senaste blogginlägg:

Varför ska man editera WordPress homepage?

Om du har bestämt dig för att skapa en blogg är det helt logiskt att bara visa dina blogginlägg på homepage.

Men vad händer om du använder WordPress för att bygga en website för småföretag eller till och med för att run en online store? I sådana fall kanske du föredrar att lyfta fram dina produkter eller främja dina alternativ på din homepage.

Här är ett exempel på en företagswebbplats homepage från OptinMonster, det bästa WordPress popup plugin där ute. Deras webbplats har en bra blogg, men det är inte fokus för deras homepage. Istället har de en riktigt clear call-to-action.

Kanske har du redan försökt att ställa in en custom page som homepage i WordPress, men du kämpar för att få det att se rätt ut.

Om så är fallet är du på rätt plats.

Vi kommer att ta dig steg för steg genom att skapa en homepage och customize den för att matcha dina behov. På så sätt kan du göra ett bra första intryck och uppmuntra dina besökare att vidta de actions som är viktigast för din sites uppdrag.

Det kan innebära att du köper en digital produkt från you, registrerar dig för att gå med på din membership site eller donerar till din fundraising campaigns.

Vi kommer att täcka några olika metoder som du kan använda för att skapa din customizer WordPress homepage.

Du kan använda dessa links för att hoppa direkt till de olika delarna av tutorialen:

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

Editera din homepage med Theme Customize

Några av de bästa WordPress themes kommer att skapa en homepage design för dig, och ge alternativ så att du enkelt kan editera den.

Du kan hitta dessa alternativ genom att besöka Appearance ” Customize på admin sidebar. Detta kommer att starta WordPress theme customize med en live preview av your theme.

Theme Customize kommer att ha olika alternativ för olika teman. Din preview och de tillgängliga alternativen kan se olika ut beroende på vilket theme du använder. Vi använder det gratis temat Hestia i det här exemplet.

Om du vill editera någon del av homepage klickar du bara på den blå ikonen med pennan bredvid. Här editerar vi image, text och knapp högst upp på homepage.

Om du vill ta bort ett avsnitt från homepage, behöver du bara klicka på den blå ögoniconen i det övre vänstra hörnet av det avsnittet.

Du kan också ta bort sections och add to dem igen med hjälp av tabben ”Frontpage Sections”.

När du är nöjd med din homepage måste du klicka på knappen ”Publicera” för att göra den live.

Så här ser vår homepage ut, live på the website:

Att använda ditt temas built-in alternativ är det snabbaste sättet att ställa in din homepage. Men vissa themes kanske inte har så många alternativ, eller ej, du kanske inte är nöjd med hur din homepage ser ut.

Oroa dig inte, det finns många andra sätt för dig att editera din homepage och ge den det utseende du vill ha.

Editera din homepage med Block Editor

WordPress block editor är ett enkelt sätt att skapa en custom homepage, även om det är begränsat av ditt temas design.

För att använda block editor går du till vyn Pages ” All Pages och editar sidan ”Home” som du skapade tidigare.

Nu kan du börja skapa content till din page.

I den här delen av tutorialen ska vi använda några enkla block för att skapa en grundläggande homepage.

Först ska vi add to ett välkomstmeddelande till page. Du kan göra det genom att klicka på page och börja skriva. WordPress skapar automatiskt ett block med ett stycke åt dig.

Om du vill göra texten större är det enkelt att göra det i blockinställningarna till höger. Klicka bara på en av de förinställda storlekarna, eller så kan du klicka på ikonen ”Set custom size” och skriva vilken storlek du gillar.

Du kan också ändra färgen på din text genom att använda alternativen ”Color” för texten eller bakgrunden.

Därefter lägger vi till en image på page. Det gör du genom att clicka på (+)-symbolen och sedan välja blocket Image.

Du hittar den i Media section, eller så kan du söka efter den med hjälp av sökfältet.

You kan välja en image från ditt mediabibliotek eller uploada en new.

Därefter har vi add to ytterligare ett block med texten ”Kolla in våra senaste posts här”.

Vi har sedan add to ett ”Latest Posts” block, som vi har ställt in för att visa inläggets excerpt och featured images, samt postens titlar. Du kan få reda på mer om blocket Senaste inlägg i vår tutorial om att displayed senaste inlägg i WordPress.

Du kan add to så många block som du vill på din homepage. You kanske också vill använda en ”full width” eller ”no sidebars” template för din page om ditt theme har en sådan.

När du till exempel använder temat Astra kan du customize sidans layout från panelen Astra Settings. Andra themes kan innehålla en section i fönstret Document settings.

När du är nöjd med din homepage ska du klicka på knappen ”Update” eller ”Publicera” högst upp till höger på vyn för att lägga in dina ändringar.

Så här ser vår slutförda homepage ut:

Vad händer om du vill gå längre med din homepage? Ett alternativ är att prova några av dessa bästa plugins för block för WordPress för att add new funktionalitet, till exempel ett kontaktformulär, rekommendationer, reviews och mer.

Ett annat bra alternativ är att använda en kraftfullare theme builder eller page builder för WordPress för att skapa något som ser snyggt och professionellt ut.

I de kommande delarna av denna tutorial kommer vi att täcka SeedProd, en temabyggare, och Divi av Elegant Themes, en page builder.

Editera din homepage med ett tillägg för Theme Builder

Det enklaste sättet att edit din homepage är att använda SeedProd. Det är det bästa tillägget för temabyggare i WordPress och kan skapa beautiful website layouts och customize templates utan att skriva någon kod.

Du kan använda SeedProd för att skapa ett helt eget WordPress theme, inklusive en egen homepage template.

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

Vid aktivering måste du enter din license key. Du hittar denna information under your account på SeedProds website.

Därefter kan du använda SeedProd för att enkelt skapa ett WordPress theme, inklusive en helt custom homepage from scratch.

Skapa ett Custom WordPress Theme

Du kan skapa ett new theme i SeedProd genom att navigera till sidan SeedProd ” Theme Builder. Här kommer du att använda ett av SeedProds färdiga themes som utgångspunkt. Detta kommer att ersätta ditt befintliga WordPress theme med en new, customize design.

Du kan göra det genom att clicka på knappen ”Themes”.

You will be shown a list of professionally designed themes that are designed for different types of websites. Det finns till exempel templates som heter ”Modern Business”, ”Marketing Agency” och ”Mortgage Broker Theme”.

Ta en titt på alternativen och välj ett som bäst matchar dina behov genom att clicka på ikonen med bocken. För denna tutorial väljer vi temat ”Digital Strategy”.

När du har valt ett theme kommer SeedProd att generera alla templates som du behöver. Det kommer att inkludera en template för din statiska homepage, samt en template för din bloggs index page.

Edit av templates för homepage

SeedProd gör det enkelt att edit någon av dessa templates med hjälp av en drag and drop page builder.

Klicka bara på länken ”Edit Design” som finns under templaten ”Homepage”. Detta kommer att öppna templates i SeedProd’s visual editor.

Denna enkla drag and drop builder kommer att visa en live preview av din page till höger och en toolbar till vänster. You can add new blocks by dra them onto the page, rearrange them by dra them up and down with your mouse, and customize any block by clicking on it.

Notice that the template has already provided an attractive layout and added plenty of relevant content on the page. Nu behöver du bara editera den så att den passar din website.

När du hoverar med musen över ett block visas en toolbar.

Om du clickar på blocket kan du justera dess Settings i den vänstra rutan.

När du till exempel clickar på headlinen kan du edit texten, ändra justering, ändra storlek på fonten med mera.

När du ändrar en inställning kan du omedelbart se det i Preview till höger.

Vi ändrar till exempel texten till ”All About WordPress”.

När du har gjort detta kan du klicka på ikonen ”Blocks” högst upp på sidan med inställningar. Då kommer du tillbaka till vyn Blocks.

Därefter ska vi editera texten till knappen. You can click on the button labeled ”What we do” and edit the text to say ”See the courses”.

Nu rullar vi ner på vår homepage tills vi kommer till listan med punkter om de produkter och tjänster som you erbjuder.

Du kan editera dessa på samma sätt, genom att clicka på ett block och redigera texten.

Din homepage ska nu se ut ungefär som screenshotet under.

Om du behöver lägga till fler detaljer kan du lägga till ytterligare en row med punktlistor genom att clicka på den blå ”+”-iconen längst ner.

SeedProd templates kan ha inkluderat fler sections än du kan använda. Du kan enkelt ta bort block eller sections som du inte behöver genom att clicka på trash iconen.

Till exempel kan du hovera musen över sektionen ”Trusted By” på homepage. När toolbaren appear kan du clicka på Trash icon för att delete den sectionen.

Längst ner på homepage finns en section med Vanliga frågor. Detta skapades med hjälp av ett Accordion block, vilket gör det enkelt att customize de frågor och svar du vill ha med på din homepage.

När du klickar på blocket kan du editera texten för varje fråga och svar.

När du har slutfört customize din homepage, se till att du klickar på knappen ”Save” högst upp på vyn. Sedan kan du återgå till listan med templates genom att clicka på ikonen ”X”.

Som du kan se gör SeedProds templates, drag and drop-gränssnitt och användbara block det perfekt för att editera din websites homepage. För ännu fler idéer, ta en titt på vår guide om hur du skapar en landing page med WordPress.

Edit the Blog Index Template (templates för bloggindex)

Du kan edit din blogg index template på ett liknande sätt. Du kan lära dig hur du gör detta genom att besöka vår guide om hur du skapar en separat page för blogginlägg i WordPress.

Om du använder metod 2 ska du rulla ner till section om att customize din blogg page. Här lär du dig hur du lägger till nya block med hjälp av drag and drop och hur du ändrar inställningarna för varje block på page.

Vi visar dig hur du redigerar Inläggslista-blocket för att lista dina inlägg i flera kolumner och visa eller dölja den featured image för dina inlägg.

Det finns Settings för hur många posts som ska visas och om ett excerpt ska visas. Du kan också filtrera indexet efter post type, category, tag/ged eller auktorisering och ändra sorteringsorder.

Aktivering av temat SeedProd

När du har slutfört att customize templates måste du publicera det nya custom temat. Helt enkelt toggle inställningen ”Enable SeedProd Theme” till positionen ”YES”.

Om du inte redan har ändrat inställningarna för din WordPress Home page och blogg, kommer du att se ett message. När du klickar på knappen ”OK” kommer dessa Settings att ändras åt dig.

You can now visit your website to view your new home page.

Editera din homepage med ett page builders tillägg

Divi är ett populärt WordPress page builder plugin. Det kommer med en WordPress tema och en page builder plugin med dussintals underbara templates.

Du kan använda page builders från Divi med vilket tema som helst. För denna tutorial kommer vi att använda den med Divi-temat.

Först måste du downloada, installera och aktivera Divi temat från Elegant Themes. Detta inkluderar Divi builder, så du behöver inte installera det separat. You will need to enter your användarnamn and API key under Divi ” Theme Options ” Updates in order to access the layout packs.

Om du behöver hjälp med att installera temat kan du ta en titt på vår steg-för-steg guide om hur du installerar ett WordPress-tema.

När du har fått Divi temat och page builder igång kan du ställa in din homepage. Gå först till menyn Pages i din WordPress dashboard och edit sedan den homepage vi skapade tidigare.

Innan du börjar editera din homepage är det en bra idé att byta till ”Blank Page”-mallen under ”Template”-panelen till höger. På så sätt kommer din homepage inte att ha en sidebar, rubrik, menu eller några andra standardelement.

Därefter kan du klicka på knappen ”Use The Divi Builder” högst upp på vyn.

Nu måste du klicka på knappen ”Edit With The Divi Builder” i mitten av vyn.

Du bör nu se Divi:s välkomstvy. Den innehåller en video tutorial om hur man använder Divi, en kort beskrivning av hur man kommer igång och knappar för att antingen börja bygga din page eller ta en rundtur i Divis funktioner.

Vi klickar på knappen ”Start Building” längst ner på sidan.

Därefter ser du en rad olika alternativ som du kan använda för att skapa din page. Vi föreslår att du använder en färdig layout som grund för din homepage. Det gör det väldigt snabbt och enkelt att skapa din homepage.

Divi har ett imponerande utbud av olika layouts att välja mellan. Det finns hundratals olika layout-paket, och vart och ett av dessa har flera olika layouts för pages inklusive homepages.

Du kan söka igenom dessa genom att skriva in en search term, eller så kan du kontrollera boxarna för att bara view layouts som passar vissa kategorier.

Vi kommer att använda layouten ”Travel Blog” för att skapa vår homepage.

Klicka först på det paket som du vill använda:

Därefter ser du en description av layout-paketet, plus de olika layouts för pages som är available. Du kommer förmodligen att vilja använda ”Home” -sidan eller ”Landing” -sidan för din hemsida. Vi kommer att välja alternativet ”Hem”.

När du har valt din layout klickar du på knappen ”Use This Layout” längst ner på sidan.

Divi importerar automatiskt layouten åt dig. Du kommer sedan att se den live på din page, precis som den kommer att visas på din site. För att editera någon del av den klickar du helt enkelt på den.

Divi använder ett system med row (uppdelat i columns) och moduler för att skapa din page. Med textmoduler kan du clicka på texten och skriva in vad du vill direkt på vyn.

Här har vi ändrat headern och texten under den:

För andra moduler kan du föra muspekaren över dem och clicka på ikonen ”Module Settings” för att editera dem.

Här editerar vi en av nummerräknarna:

Du kan ta bort moduler och row på samma sätt, med hjälp av ikonen för trash.

Du kommer troligen att vilja använda dina egna images på din homepage. Du kan ändra dessa genom att editera modulinställningarna.

Observera att bilden högst upp är inställd som bakgrund för en Fullwidth Header Module, så du måste ändra den under Content ” Background för den modulen:

När du är nöjd med de ändringar du har gjort på din page kan du klicka på ”Save” längst ner på vyn.

Ibland kommer den längst ner raden av knappar att vara dold.

Om du inte kan se dem måste du klicka på den lila knappen ”…” för att öppna dem.

Så här ser vår page ut live på the website:

Settings för din homepage i WordPress

Som standard visar WordPress dina blogginlägg på homepage.

Det innebär att när du har skapat och customize din homepage, måste du berätta för din WordPress site att visa den page när någon besöker din domän.

Låt oss ta en titt på hur du ställer in en separat homepage och blogg page i WordPress.

Först går du helt enkelt till Pages ” Add New och namnger din nya page Blogg. Efter det kan du gå vidare och publicera den tomma sidan.

När din homepage och din blogg är klara måste du säga till WordPress att börja använda dessa pages.

Du kan göra detta genom att gå till Settings ” Läsa page i din WordPress admin area. Du måste välja alternativet ”En statisk page” under section ”Your homepage displays”. Därefter går du vidare och väljer dina home page- och blogg-sidor.

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

WordPress kommer automatiskt att visa dina senaste posts på blogginläggets page. För mer details, you can see our guide on how to create a separate blog page in WordPress.

Nu är det klart! Du har skapat en snygg homepage i WordPress och konfigurerat den utan problem. Se vår ultimata guide om hur du redigerar en WordPress-webbplats för steg-för-steg-instruktioner om hur du redigerar andra area på din site.

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du redigerar en WordPress homepage. Du kanske också vill ta en titt på vår guide om de tillägg du måste ha för WordPress och våra tips om hur du förbättrar sökmotorsoptimeringen 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.