Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här skapar du en Custom Page i WordPress

Vill du skapa en custom page i WordPress?

En customize page låter dig använda en annan layout än resten av din website. Många WordPress-webbplatser använder custom page layouts för sina försäljningssidor, landing pages, webinar pages, med mera.

I den här artikeln visar vi dig hur du enkelt skapar en customize page i WordPress.

How to create a custom page in WordPress

Varför skapa en Custom Page i WordPress?

Varje gång du skapar en new page kontrollerar your WordPress theme hur sidan ser ut med hjälp av en template-fil.

Denna template page.php påverkar alla enskilda pages som du skapar i WordPress. Men du kanske inte vill använda samma design varje gång.

Landing pages har ofta ett annat content jämfört med vanliga pages, till exempel en stor hero image eller en call-to-action (CTA). Det innebär att de ofta ser helt annorlunda ut än resten av din website.

Att försöka skapa unika mönster med hjälp av standardmallen för page kan dock ta mycket tid. Du är också limitad av page.php templates och kanske inte kan skapa exakt den design du vill ha. Detta kan göra det svårt att få bra resultat. Om du till exempel bygger en försäljningssida kanske du inte får många konverteringar på grund av dålig siddesign.

Med det sagt, låt oss se hur du kan skapa en customize page i WordPress, med exakt den design, layout och content du vill ha. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda.

Metod 1. Hur man skapar en Custom Page i WordPress med hjälp av Block Editor (inget plugin obligatoriskt)

Block Editor gör det enkelt att designa dina egna templates med hjälp av de tools du redan känner till.

Detta är ett bra val om du har planer på att återanvända samma design på flera pages, eftersom du helt enkelt kan tillämpa samma template. Om du vill skapa en helt unik design är ett annat alternativ att skapa sidan som vanligt och sedan editera layouten med hjälp av Full Site Editor, som vi kommer att täcka i metod 2.

Tänk bara på att dessa metoder endast fungerar med block-baserade themes som ThemeIsle Hestia Pro eller Twenty Twenty-Three. Om du inte har ett block-baserat theme rekommenderar vi att du använder en page builder istället.

För att börja öppnar du bara en page eller post. Sedan väljer du tabben ”Page” i menyn till höger och klickar på texten bredvid ”Template”.

How to create a custom theme using the built-in WordPress template

De alternativ du ser kan variera beroende på ditt WordPress-tema, men texten kommer vanligtvis att visa ”Page”, ”Default template” eller liknande.

I popupen som visas klickar du på ikonen ”Add Template”.

How to create a custom WordPress template

I popupen som visas skriver du in ett namn för din template och klickar sedan på ”Create”.

Namnet är bara för din referens så du kan använda vad du vill.

Creating a new template in the WordPress block editor

Detta öppnar templates editor, som fungerar på samma sätt som WordPress content editor.

Om du vill add to block till designen av din custom page klickar du bara på den blå knappen ”+”. Du kan sedan dra and drop för att add to block.

Editing a WordPress template using the block-based editor

Du kan add to content till ett block eller ändra dess format med hjälp av de välbekanta tools för redigering av post i WordPress. Du kan till exempel skriva in text i ett ”Heading”-block, tillämpa fet formatering eller ändra text från H2 till H3.

Du kan också skapa en customize page med hjälp av mönster. Patterns är samlingar av block som ofta används tillsammans, t.ex. en lista över händelser, en image med en caption eller en pristabell.

De mönster du ser varierar beroende på ditt WordPress theme, men du kan se vilka mönster som finns tillgängliga genom att clicka på tabben ”Patterns”.

A selection of patterns in the WordPress editor

Du kan antingen dra and drop ett block pattern till din layout eller click på mönstret för att lägga till det längst ner i din template. När du är nöjd med hur templaten ser ut klickar du på knappen ”Publicera” och sedan på ”Save”.

Du kan nu tillämpa denna template på vilken page som helst. Öppna helt enkelt sidan i Editorn och klicka sedan på texten bredvid ”Template”.

I popupen som visas, select the template the template the template you just created.

Changing the WordPress template

När du har gjort det kan du add to content till sidan, precis som med alla andra sidor i WordPress.

Metod 2. Hur man skapar en Custom Pagemed hjälp av Full-Site Editor (endast block-baserade teman)

Om du använder ett blockbaserat theme kan du också skapa en custom page med hjälp av full-site editor. Detta allow you att ändra layouten på en enskild page, utan att skapa en custom template.

Med det i åtanke är detta ett bra val om du vill skapa en helt unik design som du inte kommer att återanvända på någon annan page.

För att komma igång skapar du helt enkelt sidan som vanligt genom att gå till Pages Add New. Du kan sedan skriva in en titel, lägga till kategorier och tags, ladda upp en featured image och göra alla andra ändringar du vill.

När du är nöjd med den grundläggande page, save dina ändringar och sedan head över till Appearance Editor.

Opening the WordPress full-site editor (FSE)

Som standard visar den fullständiga Site Editor ditt temas hemmamall.

I menyn till vänster klickar du på ”Pages”.

Editing a page layout using the full-site editor (FSE)

Nu ser du alla pages som du har skapat på din website WordPress.

Leta bara upp den page du vill göra om och gör ett click.

Create a custom page design using the full-site editor (FSE)

WordPress kommer nu att visa en preview av designen.

För att gå vidare och edit denna template, click på den lilla penna iconen.

Create a custom page design using the block-based editor

Du kan nu editera sidans layout med hjälp av verktygen för hela Site Editor. Du kan till exempel klicka på den blå ”+”-knappen för att add new block, eller click för att select något block som du vill customize.

När du är nöjd med de ändringar du har gjort, clickar du på knappen ”Save”.

Create a custom page design using the block-based editor

Nu, om du besöker den här page på your website, kommer du att se den nya siddesignen i action.

Metod 3. Skapa en Customize Page i WordPress med hjälp av SeedProd (rekommenderas)

Tidigare skapade du en customize page genom att skriva kod, vilket inte var särskilt nybörjarvänligt. Om du gjorde ett misstag med din HTML-, CSS- eller PHP-kod kunde det orsaka vanliga WordPress error eller till och med förstöra din site helt.

Med detta i åtanke rekommenderar vi att du använder en page builder istället.

SeedProd är den bästa drag-and-drop page buildern för WordPress. Den levereras med mer än 350 templates, vilket allow you att skapa customizes pages utan att skriva någon kod.

Om du använder en custom page för att få fler konverteringar, så fungerar SeedProd med många populära tredjeparts tools som du kanske redan använder för att få konverteringar. Detta inkluderar marknadsföringstjänster för e-post högst upp, WooCommerce, Google Analytics och mer.

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

Note: Det finns också en gratis version av SeedProd som allow you att skapa customize pages oavsett din budget. Men för den här guiden kommer vi att använda SeedProd Pro eftersom den har många fler templates och integreras med all de bästa tjänsterna för e-postmarknadsföring.

Efter att ha aktiverat pluginet kommer SeedProd att be om din license key.

SeedProd license key

You can find this information under your account on the SeedProd website. När du har enter nyckeln klickar du på knappen ”Verify Key”.

Välj en custom page template

När du har gjort det, gå till SeedProd ” Landing Pages och klicka på knappen ’Add New Landing Page’.

SeedProd's page design templates

Du kan nu välja en template för din custom page.

SeedProds templates är organiserade i olika kampanjtyper som ’lead’, ’squeeze’ och ’coming soon’. Du kan klicka på tabbarna högst upp på vyn för att filtrera templates baserat på kampanjtyp.

The SeedProd template library

Om du vill börja från scratch har SeedProd också en tom template som du kan använda.

Om du vill titta närmare på en design håller du bara muspekaren över templaten och klickar sedan på ikonen med förstoringsglaset.

Previewing a ready-made template

När du hittar en design som du gillar klickar du på ”Choose This Template”. Vi använder mallen ”Course Sales Page” i alla våra images, men du kan använda vilken template du vill.

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

En beskrivande URL hjälper också sökmotorer att förstå vad sidan handlar om så att de kan visa den för rätt användare, vilket förbättrar din sökmotorsoptimering i WordPress.

För att ge din custom page bästa möjliga chans att appear i relevanta sökresultat kan du add to eventuella keywords som saknas i URL:en. Mer detaljer finns i vår guide om hur du söker efter keywords.

Creating a custom page for your WordPress website

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

Designa din custom page

SeedProd kommer nu att öppna din valda template i sin användarvänliga drag and drop editor. Du kommer att se en live preview av din page till höger, och några block inställningar till vänster.

The SeedProd courses template

För att customize ett block klickar du bara för att välja det i page editor. I den vänstra toolbaren visas då alla inställningar för det blocket.

I Följer image ändrar vi texten i ett ”Headline”-block.

Editing the headline for your custom page

Du kan formatera texten, ändra justering, add to links med mera med hjälp av inställningarna i menyn till vänster.

Det är också lätt att edit images med hjälp av SeedProd page builder. Klicka bara på ett ”Image” block och använd inställningarna för att lägga till alt-text, ladda upp en new image eller göra andra ändringar.

Editing images in a custom page design

Om du vill ta bort ett block från custom page klickar du bara på för att välja det blocket.

Klicka sedan på ikonen för papperskorgen i mini-toolbaren.

Removing a block from a SeedProd custom page

För att add new block till din design, hitta bara ett block i menyn till vänster och dra det sedan till Editorn.

Du kan sedan klicka för att välja block och göra ändringar i menyn till vänster.

Adding a social sharing block to WordPress

SeedProd kommer också med ”Sections”, som är row- och block templates som kan hjälpa dig att skapa en custom page, snabbt. Om du till exempel skulle designa en Google Ads landing page, kan du använda SeedProds färdiga Hero, Call-to-action eller Features sections.

För att se all available sections, klicka på tabben ”Sections”.

SeedProd's ready-made sections

För att titta närmare på en section, hoverar du musen över den och klickar sedan på magnifying glass icon.

När du hittar en section som du vill add to i din design, för du bara muspekaren över den och klickar sedan på den lilla iconen ”+”.

Adding a section to a custom page

Detta addar section till längst ner på din page. Du kan flytta både sections och blocks runt din design med drag and drop.

Om you gör ett misstag eller ändrar dig, så oroa dig inte. You can reverse your last change by clicking on the ”Undo” button at the bottom of the left-hand toolbar.

Här hittar du också en knapp för att göra om, revisionshistorik, navigation i layouten och globala inställningar.

The SeedProd global settings bar

Dessa extra knappar gör det enkelt att skapa en customize page i WordPress.

Längst ner i toolbaren hittar du också en knapp för mobil preview som allow you to view the mobile version of the custom page.

Previewing a custom page on mobile

Detta kan hjälpa you att designa en custom page som ser lika bra ut på mobila devices som den gör på din dator.

När du är nöjd med din custom page är det dags att publicera den genom att clicka på dropdown-pilen bredvid ”Save” och sedan välja alternativet ”Publicera”.

Publishing a custom page

Din customize page kommer nu att gå live på din WordPress blogg.

Om du vill redigera den custom sidan vid någon tidpunkt, gå bara till SeedProd ” Landing Pages i din WordPress dashboard. Du kan sedan hitta den page som du vill ändra och klicka på dess ”Edit”-länk.

Fine-tuning a custom page in WordPress

Detta kommer att öppna designen i SeedProds editor, redo för dig att göra dina ändringar.

Metod 4. Använda Thrive Architect för att skapa en Custom Page i WordPress

Du kan också skapa en customize page med hjälp av Thrive Architect. Thrive Architect är en annan populär drag-and-drop page builder för WordPress.

Den levereras med över 300 professionellt utformade templates som är utformade för att hjälpa dig att få fler konverteringar.

Custom page example built with Thrive Architect

Först måste du installera och aktivera pluginet Thrive Architect. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering, gå till Pages ” Add New i din WordPress adminpanel för att skapa en custom page. Klicka sedan på knappen ”Launch Thrive Architect”.

Launch Thrive Architect

Därefter kan du välja om du vill skapa en vanlig sida eller en pre-built landing page.

Vi rekommenderar att du clickar på ”Pre-built Landing Page” eftersom det ger dig tillgång till alla Thrive landing page templates. Dessa templates är helt anpassningsbara, så du kan finjustera dem så att de passar din WordPress website.

Choose the Pre-built Landing Page option in Thrive Architect

När du hittar en uppsättning som du gillar, klickar du bara för att välja den.

I den följande bilden väljer vi ”Smart Landing Page Sets.

Pick a template for your custom page in Thrive Architect

På nästa vy måste du välja en specifik template från uppsättningen.

Välj en template genom att clicka på den och sedan trycka på knappen ”Tillämpa template”.

Apply Thrive Architect template

Detta kommer att öppna templaten i Thrive Architect Editor. Härifrån kan du enkelt customize page template för att matcha din blogg, website eller online store.

Som exempel kan du ändra ”Heading” genom att clicka på den och sedan skriva in your egen custom message.

Customize page elements in Thrive Architect

Du kommer nu att se alla alternativ för customize i menyn till vänster. Här kan du ändra typografi, fontstorlek, färg, format och mycket mer.

From the left-hand panel, you can also adjust other settings for your custom page, such as the layout, background style, borders, animations, and scrolla behavior, just to name a few.

Customize page settings in Thrive Architect

I likhet med SeedProds block kommer Thrive Architect med många pre-built element som du kan add to din custom page.

För att add a new element to the page, click on the ”Add Element (+)” button on the right-hand side of the screen.

Click the Add Element button

Du kan nu välja mellan element som gillar images, knappar, lead generation-formulär, pristabeller, nedräkningstimer och mycket mer.

För att add to ett element drar du det från höger menu och släpper det på din page.

Drag and drop elements onto your page

Återigen kan du edit alla nya element som du addar till din page genom att clicka på dem.

När du är nöjd med hur sidan ser ut klickar du på pilen (^) bredvid knappen ”Save Work”. Klicka sedan på alternativet ”Save and Return to Post Editor”.

Save custom page in Thrive Architect

Du kan sedan save the page som ett draft eller publicera den så att den visas på din website i WordPress.

När din customize page är publicerad kan you besöka din site för att se den i action.

Publish custom page

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar en customize page i WordPress. Du kanske också vill se vår guide om hur du ökar trafiken på din blogg, och våra expertval av de bästa tilläggen för kontaktformulär 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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

233 kommentarerLämna ett svar

  1. Dennis Muthomi

    I prefer the SeedProd method because it comes with over 350 templates to choose from, making it easy for me to find a design that matches my website.
    The method using block editor does not have templates to start with.

  2. Rajee Pandi

    awesome. I think it is not free. Thank you so much.

    • WPBeginner Support

      There is a paid option but 1 and 2 are free options :)

      Administratör

  3. Moinuddin Waheed

    Using seedprod for making a custom page is promising as it takes less efforts and makes awesome looking design in no time.
    Thanks for this guide, I have been already using seedprod to many of my websites and utilising this feature.

  4. Brend

    Thanks for the great article. I often use your site for assistance with WordPress.
    I followed your tutorial to manually create a new template file. When selecting the template there is no CSS attached to the page. Did I miss something?

    • WPBeginner Support

      It would depend on the specific theme you’re using, if you check with your theme’s support they should be able to let you know why their CSS is not being applied to your page properly.

      Administratör

  5. Muhammed

    Perfect article.
    I have a q
    can i make a custom page and then make it the main website page or Home page?
    I don’t like to have too much content in my firs page and i want to make every thing in the main home page by my own ( i mean with HTML, CSS, JS ).
    is there any way to do that?

    • WPBeginner Support

      For customizing everything in that manner you would want to look at the method for manually creating a page template :)

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.