Så här skapar du en customize home page i WordPress (3 metoder)

Vill du skapa en custom homepage som verkligen visar upp din site i WordPress? Första intrycket är viktigt och på WPBeginner har vi hjälpt otaliga användare att skapa iögonfallande homepages som engagerar besökare.

Standard WordPress homepage (även om den är funktionell) är ofta inte det mest inbjudande sättet att välkomna din publik. You want a homepage that highlights your best content, products, or services. En design som fängslar och håller dem kvar på din site.

I den här guiden kommer vi att gå igenom 3 enkla sätt att skapa en customize homepage i WordPress, även om you aldrig har gjort det förut.

Vad är en homepage?

En homepage är den första page som visitorerna ser när de skriver in ditt domain name. För många människor är denna homepage deras introduktion till ditt företag, blogg eller website.

En bra homepage får besökarna att vilja lära sig mer om din website. Den ger också enkel tillgång till de links, search-fält och menyer som hjälper visitorerna att hitta intressant content.

Standard homepage i WordPress visar dina senaste blogginlägg, vilket kan passa bra för personliga bloggar eller hobbybloggare.

Men om du run ett företag med din WordPress website kanske du vill skapa en custom homepage istället för att lyfta fram dina produkter och tjänster.

Den goda nyheten är att WordPress gör det enkelt att visa en custom page som din homepage istället för standardlistan med senaste inlägg.

Hur ställer jag in en Customize Page som WordPress Homepage?

I den här guiden kommer vi att visa dig några olika sätt att skapa en customize homepage. Oavsett vilken metod du använder måste du dock ändra dina WordPress Settings efter att du har skapat den statiska homepage.

För att göra det, gå bara till Settings ” Läsa i WordPress dashboard.

Här rullar du till ”Your homepage settings” och väljer ”A static page”.

Du kan nu öppna ”Homepage” dropdown och välja den page som du vill använda som new homepage.

Sedan rullar du bara längst ner på vyn och klickar på ”Save Changes”. Du kan nu besöka din site för att se den nya customize homepage live.

Om du har en blogg ska du se till att skapa en separat page för att visa dina blogginlägg. Annars kommer besökarna att ha svårt att hitta dina senaste bloggar.

Med detta sagt, låt oss se hur du kan designa en customize homepage i WordPress. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

Video Tutorial

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

Metod 1: Skapa en Custom Homepage Template med hjälp av Block Editor (inget plugin obligatoriskt)

Om du använder ett block theme kan du designa en custom homepage template med hjälp av hela Site Editor.

Den här metoden fungerar inte med alla teman, så om du ej använder ett block-baserat WordPress-tema måste du använda någon av de andra metoderna som täcks i den här guiden.

Om du vill ha mer information om hur du använder hela Site Editor kan du kontrollera vår guide för nybörjare om redigering av hela WordPress-webbplatser.

Börja med att skapa en new page eller öppna en befintlig page som du vill använda som homepage. I menyn till höger klickar du på tabben ”Page” och väljer sedan länken som visas bredvid ”Template”.

Den exakta texten på linken kan variera beroende på vilken template du använder.

En popup kommer nu att visas med din nuvarande template.

Gå bara vidare och klicka på ikonen ”New Template”.

I popupen ger du din template ett namn. Namnet är bara för din referens, så du kan använda vad du vill.

Därefter går du vidare och klickar på ”Skapa” för att starta hela Site Editor.

Templates Editor fungerar på samma sätt som den vanliga WordPress Block Editor.

För att add block till din customize homepage klickar du bara på den blå ”+”-knappen. You can then drag and drop any block onto your layout.

Eftersom vi skapar en custom homepage, kommer du vanligtvis att vilja börja med att lägga till en stor hero image, till exempel din websites logga eller banner.

För att göra detta, hitta bara blocket Image i menyn till vänster och lägg sedan till det i din layout med drag and drop.

Du kan nu antingen välja en image från mediabiblioteket i WordPress eller uppladare en new file från din dator.

För att få mer engagement kanske du vill visa de senaste kommentarerna på din homepage genom att lägga till ett block med Latest Comments.

För More information, vänligen se vår guide om hur du visar comments på homepage av your WordPress theme.

En bra homepage hjälper besökarna att hitta intressant content. Med detta sagt är det en bra idé att add to ett Navigation block till din customize homepage.

För att lära dig mer, vänligen se vår Step-by-Step guide om hur du lägger till custom navigation menyer i WordPress teman.

När du har lagt till ett block måste du clicka för att selecta det i din layout. Du kan sedan konfigurera blocket med hjälp av settings i menyn till höger och knapparna i miniverktygfältet.

För att bygga din custom homepage, fortsätt helt enkelt att lägga till fler block och konfigurera dem sedan med hjälp av alla inställningar i Site Editor.

Till exempel kanske du vill add to block som Latest Posts, Search, Social Icons, Tag Cloud, med mera.

När du är nöjd med hur templates ser ut klickar du på knappen ”Publicera”.

Den page som du skapade tidigare kommer nu att använda den new homepage template. Du kan nu säga till WordPress att använda denna page som din homepage genom att följa den process som beskrivs ovan.

Metod 2: Skapa en customize hemsida i WordPress med hjälp av en page builder (rekommenderas)

WordPress block editor allow you to create a custom homepage using the tools you’re already familiar with. Den fungerar dock inte med all themes och är limit vad gäller flexibilitet och funktioner.

Dessutom, även om WordPress theme customize finns för icke-block theme-användare, är det inte det mest användarvänliga alternativet, eftersom det inte kommer med en drag and drop-funktion.

Om du vill skapa en helt custom homepage som fungerar med alla WordPress teman, behöver du ett page builder plugin.

För den här metoden kommer vi att använda SeedProd. Det är det bästa page builder tillägget på marknaden och allow you att skapa en custom homepage med hjälp av en enkel drag and drop editor.

Det kommer också med 300+ professionellt designade templates och färdiga block som du kan använda på din homepage.

Det första du behöver göra är att installera och aktivera SeedProd plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vid aktivering måste du enter din license key.

You can find this information in your account on the SeedProd website. När du har enter license key, gå vidare och klicka på knappen ”Verify Key”.

Skapa en ny homepage med SeedProd

I detta skede måste du besöka SeedProd ” Pages och klicka på knappen ’Add New Landing Page’.

Efter det är det dags att välja en template för din customize homepage. SeedProd har massor av professionellt utformade templates som du kan customize baserat på din WordPress sites behov.

För att välja en template, hoverar du bara musen över den och klickar sedan på ikonen ”Checkmark”.

Vi använder templaten ”Juicy Sales Page” i alla våra images, men you can use any design.

Gå sedan vidare och skriv in ett namn för den customize homepage. SeedProd kommer automatiskt att skapa en URL baserat på sidans Rubrik, men du kan ändra denna URL till vad du vill.

När du är nöjd med den information du har enter klickar du på knappen ”Save and Start Editing the Page”.

Därefter kommer du att tas till SeedProd drag and drop page builder, där du kan customize din template.

SeedProd editor visar en live preview av din design till höger och några block editor inställningar till vänster.

I menyn till vänster finns också block som du kan dra till din layout.

Du kan till exempel dra and drop enkla block som knappar och images eller använda avancerade block som nedräkningstimer, kontaktformulär, delningsknappar med mera.

För att customize ett block klickar du bara för att välja det i din layout.

Den vänstra menyn visar nu alla alternativ för customize för att konfigurera det blocket. You can also change the page’s background colors, add background images, or change the color scheme and fonts to better matcha your brand.

Du kan även använda CSS-animationer för att fånga besökarens uppmärksamhet.

Till att börja med kommer du att vilja ersätta alla placeholder images med dina egna foton eller din customze logga. För att göra detta klickar du bara för att selecta ett Image block i live preview.

I menyn till vänster klickar du på knappen ”Select Image”.

Du kan nu antingen välja en image från mediabiblioteket i WordPress eller uppladare en new file från din dator.

SeedProd levereras med ”Sections”, som är samlingar av block som ofta används tillsammans.

SeedProd har till exempel en header, hero image, call-to-action, testimonials, kontaktformulär, Vanliga frågor, features, footer sections, och mer. Dessa kan hjälpa dig att skapa en custom homepage, snabbt.

För att titta igenom de olika sektionerna klickar du bara på tabben ”Sections”. För att få en preview av en section, hoverar du bara musen över den och clickar sedan på magnifying glass icon.

För att add to the section till your design, click on ”Choose This Section”.

Detta kommer att add to section längst ner på din homepage.

Du kan flytta runt sektioner och block i din layout med hjälp av drag and drop.

När du är nöjd med hur din homepage ser ut, glöm inte att clicka på knappen ”Save” för att store dina ändringar.

Anslut din homepage till en tjänst för e-postmarknadsföring

Om you plan to run an email marketing campaign, the homepage is one of the best places to display your signup form.

Det fantastiska med SeedProd är att det gör det super enkelt att ansluta din homepage till populära e-postmarknadsföringstjänster som Constant Contact.

För att göra detta klickar du bara på tabben ”Connect” och väljer sedan din provider för email-tjänster.

SeedProd kommer nu att visa hur du ansluter homepage med din email marketing tjänst.

Om din provider inte finns med i listan, oroa dig inte. SeedProd arbetar med Zapier, som fungerar som en bro mellan SeedProd och mer än 3000+ andra appar.

Bara rulla till ”Other” section och hovera över ”Zapier”. När knappen ”Anslut” visas, ge den ett klick och följ sedan instruktionerna på skärmen för att ansluta SeedProd och Zapier.

Publicera din hemsida för SeedProd

När du har gått igenom all tidigare steg är du redo att publicera din customize homepage. Klicka bara på tabben ”Page Settings”.

Det finns fler alternativ under tabben Page Settings som du kanske vill titta på. Du kan till exempel ändra sökmotorsoptimering, edit sidans titel och ansluta en custom domän.

När du är nöjd med hur sidan är uppbyggd går du vidare och väljer tabben ”Allmänt”.

You can now click on the ’Page Status’ toggle to change it from ’Draft’ to ’Publicera’.

Nu behöver du bara heada över till Settings ” Läsa och ställa in den här sidan som din nya custom homepage.

Metod 3: Skapa manuellt en Customize Homepage i WordPress (kodning obligatorisk)

Ett annat sätt att skapa en custom homepage är att använda kod, vilket ger you fullständig control över hur din website ser ut. Denna metod kan dock vara komplicerad, och kodningsmisstag kan orsaka allsköns vanliga error i WordPress.

Med det i åtanke rekommenderar vi inte den här metoden för Beginnare.

Ditt WordPress theme består av många olika filer. Vissa av dessa filer anropas templates, och de kontrollerar hur olika area på din website ser ut. För mer information, vänligen se vår WordPress mall-hierarki fusklapp.

En av dessa templates är anropad front page.php.

Om ditt theme har den här templates kommer WordPress automatiskt att använda den för att visa homepage. Det innebär att du kan skapa en custom homepage genom att editera den här filen eller ersätta den med en new fil.

För att komma igång behöver du en FTP-klient som FileZilla, eller så kan du använda filhanteraren som tillhandahålls av din WordPress hosting provider.

Om det är första gången du använder FTP kan du läsa vår kompletta guide om hur du ansluter till din site med FTP.

När du har anslutit till servern går du till /wp-content/themes/ och öppnar sedan foldern för ditt aktuella WordPress theme.

Om den här foldern redan har en front page.php-fil kan du gå vidare och öppna den filen i en textredigerare som Notepad. Du kan sedan göra de ändringar du vill genom att editera koden.

Om your theme inte har en front page.php-fil kan du skapa en new fil med namnet front-page.php.

Efter det behöver du bara uploada front page.php till det aktuella temats folder på ditt WordPress webbhotell account.

Så snart du har uploadat den här filen kommer WordPress att börja använda den för att displayed din homepage. Men eftersom filen är helt tom kommer du att se en tom page som din homepage.

För att fixa detta öppnar du bara filen i en app med textredigerare och börjar lägga till HTML-kod.

Om du börjar med en tom fil kan du save time genom att använda den befintliga koden och templates i ditt WordPress theme.

Till exempel är det vanligtvis vettigt att inkludera temats header och footer.

I Följer exempelkod har vi tagit bort content och sidebar samtidigt som vi hämtar temats templates för header och navigation:

<?php /*
This page is used to display the static frontpage.
*/
 
// Fetch theme header template
get_header(); ?>
    <div id="primary" <?php astra_primary_class(); ?>>
 
    <div class="custom-homepage-container"> 
 
    You custom homepage code goes here
 
    </div> 
 
    </div><!-- #primary -->
//Fetch the theme footer template
<?php get_footer(); ?>

Upptäck fler experttips för att Customize WordPress Pages och Posts

Vill du ha ännu mer control över din website i WordPress och göra fler customizes till dina pages och posts? Kontrollera dessa artiklar under:

• Så här displayed du populära posts efter views i WordPress
• Anatomin för en Landing Page med hög konvertering
• Hur man Customize WooCommerce Produkt Sidor (Ingen Kod Metod)
• Så här skapar du en Customize Archives Page i WordPress
• Hur man visar mest kommenterade posts i WordPress
• Så här ordnar du enkelt om posts i WordPress (steg för steg)
• Hur man gör (fast)klistrade inlägg i WordPress
• Så här visar du senaste inlägg från en specifik kategori i WordPress
• Hur man döljer en publicerad post från homepage i WordPress

Vi hoppas att den här artikeln har hjälpt dig att skapa en customize homepage i WordPress. Du kanske också vill se våra expertval av de bästa tillägg för populära inlägg för WordPress och vår artikel om de viktigaste pages som varje blogg i WordPress bör ha.

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.