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

234 kommentarerLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    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.

  3. Moinuddin Waheed says

    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 says

    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 says

      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 says

    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 says

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

      Administratör

  6. Patricia Reed says

    Is there a way to use an existing page (including all its content and images) and use this plugin to remove the menu and title link?

    • WPBeginner Support says

      We show two plugins in this guide, you can certainly recreate a page using them for what it sounds like you want.

      Administratör

  7. Teresa Cuervo says

    Excellent Article!
    Just one question. After you finish the landing page do you still need the plugin in the plugin folder or is it safe to delete after you create the page.

  8. Edmond says

    Hello,

    Thank you for the easy tutorial. It worked so well.

    I have one question though. How do you make the custom page you create have its own separate sitemap on the website´s sitemap.xml? Like for example in wpbeginner.com´s sitemap the /hosting-sitemap.xml etc. is it a custom page?

  9. Jorge says

    I´ve already done this before and it worked, I know that many things can remove the file from where it was but my problem is that it doesn´t allow me to do it again. When I upload the custom page to the server it doesn´t appear on the template options when editing the page. Does someone knows how to solve this?

    • WPBeginner Support says

      The most common reason you would want to check is that you haven’t used the same template name and that you’ve uploaded the file to the correct location.

      Administratör

  10. AJAY KUMAR says

    How do we change header path, as I have 2 different headers, so in my custom template I want to use other header, please let me know, how to call or bring header

    • WPBeginner Support says

      That would depend on your specific theme and would require some coding knowledge that would not be beginner-friendly.

      Administratör

  11. Bas says

    What happens to your custom templates when you update your theme? Since you’re creating that new template within the theme folder. Will the new template be gone?

  12. ammar says

    Hi,

    Great article ! I already create the page template and now I want to make this page only page that does’nt have sidebar when i use this page template. How? Can you help me?

    Thank you.

    • WPBeginner Support says

      It would depend on your current theme, if you reach out to your theme’s support they should be able to assist

      Administratör

  13. Pete Zajonc says

    Hi-

    So close. I have zipped my php file created in notpad++. The contents are the 1 line of code at the top of this article. I click add new theme and upload the zip file. When I click install it starts ok but ends in error. Can you suggest a fix? How do I add the style.css stylesheet? (Sorry, I’m a newbie!)

    • WPBeginner Support says

      You would want to go through the article again, this guide is for creating a new page for your current theme not an entirely new theme :)

      Administratör

  14. Okoji says

    Thanks for this. It was helpful.

    I want to know if there is a way to remove the wordpress header without messing up the page.

    • WPBeginner Support says

      It would depend on your specific theme for any issues that would cause. You would likely want to test on a local installation or on a staging environment to see if it would break anything.

      Administratör

    • WPBeginner Support says

      Page templates control the area around the content, the editor under Pages>Add New is for the content on the page.

      Administratör

  15. terry says

    Thanks for this tutorial! Is it possible to edit the custom page with Elementor? I get an error ”The preview cannot be loaded.”

    • WPBeginner Support says

      You may need to recreate the custom page template with Elementor or reach out to Elementor’s support and they should be able to assist :)

      Administratör

  16. Val says

    Hi – my problem is the template dropdown menu does not display. The theme displays only: Page attributes / parent / order — whereas I need it to display: Page attributes / parent / Template / order. Do you know how I can get the templates dropdown to display?

    • WPBeginner Support says

      Your theme may not have page templates by default as otherwise, they would be under the Page Attributes section.

      Administratör

  17. shadab awan says

    thank you admin for always writing great articles on WordPress and SEO.i have a question to ask i hope you help me.

    Can we use PHP, Osclass Or Other themes in a WordPress Created classified website?

    Thanks

  18. Ramsey says

    Please, i need your assistance, i have my website build myself but i am having issues which i know you can help me cause i built my site watching all your videos and article. i want to create the home page then use the home on my MENU on my website so that when people finish reading an article and they want to return home they can easily click on home and return to the home page. please, i need your help on this.

    • WPBeginner Support says

      If you’re using the block editor then you would want to ensure you’re editing the document. If it is not displaying correctly then you would want to double check the file name and that the file was correctly added to your files.

      Administratör

  19. Marie says

    Hi, maybe a stupid question but do I have to create a child theme for this? Or is it protected from theme updates because it is a separately built page?

    • WPBeginner Support says

      It would be best to use a child theme for this as it would be a file not found in the most recent version of the theme when you’re updating

      Administratör

  20. Pedro says

    Hi! And thanks for your incredibly helpful and resourceful page! I’ve read lots of articles and learned a lot around your site :)

    Using your guide I created my custom page for my ”blog” section (page with the most recent posts that doesn’t have the slider or other features that the Home page has).

    My website is bilingual, so I’d like to translate this custom page to my second language… and I can’t find the way to do it.

    Your help would be much appreciated.

    Thanks in advance!

    • Andrew says

      You can add an HTML page to the website but I wont be a part of the theme. It has to be a .PHP to be part of the theme.

  21. Catherine says

    I had the same problem. Try another theme, and make sure you upload the file in the right directory. You can see the directory on top when you add a sample page.

    • kartik rawal says

      at the top you see screen options just click on it and check the box says page attributes and now you can see template option

  22. Rakesh Roy says

    Nice and helpful instructions, but i want to load template from my plugin, when i add the .php file inside my plugin wordpress not showing the drop down .

  23. Isabelle Hunter says

    Thank you!!! This is so clear and simple and straight forward. I was able to set up a new page temple in under 5 min. I really appreciate what you guys do – and whoever did this video has a great voice and speaks very well for instructions.

  24. Edgar Mlowe says

    Thanks a lot for this, this post helped while i was creating a custom them which needed me to create a number of custom pages. thumbs up for this!

  25. Jens Eckervogt says

    Great tutorial!

    I love to see how do you have to create custom pages :) Like table ( flex-wrap with div or about page.

    I already made AboutMe-Page with css-embedded picture and more custom pages. That is really excellent! WordPress makes us rich, right?

    WordPress is like darling / sweetheart :P Because we want make our blog-websites with money from internet.

    And how do I fix contactform of WPForm? Why does WPForm not send e-mail to my google mail. I want try if it works.

    Thanks for nice explanations with your nice videos. I am really happy because you save my life and make me reality.

    Best kind regards,

    Jens Eckervogt

  26. Dave says

    Are plugins compatible with custom page templates?

    For example, if I were to add custom content directly to my page template via a text editor, then upload and select it for the appropriate page (say contact page), how would a plugin (say a contact form), be placed into the custom page?

    Thanks

  27. Vandana says

    Hi I’m converting HTML template to WORDPRESS,in the i have nave menu like Home,About Us,Courses,Gallery etc,i’m not getting anything when i click on these pages,please help me out

  28. Paddy O says

    Hey.. I needed this to create a page with no header and footer etc different to my template and with a little tweaking it worked perfeclty. Great. Thanks, P

  29. Manpreet Kaur says

    Hello, Thanks Wpbeginner for all the tutorials. With your tutorials I build a website for the very first time by myself and its going great. I learned so much from you guys.

  30. Jason says

    Hey i want to make a WordPress page that goes like this : domain.com/something/PageHere

    I cant do that by edditing the permalink, any advice?

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.