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

Hur man skapar customize layouts i WordPress med Elementor

Vill du skapa dina egna customize page layouts i WordPress?

Elementor är en drag and drop WordPress page builder som allow you att enkelt designa custom WordPress layouts utan att ha någon kodningskunskap.

I den här artikeln visar vi dig hur du enkelt kan skapa custom WordPress layouts med Elementor med bara några click.

How to create custom WordPress layouts with Elementor

Varför och när behöver du customize layouts för WordPress?

Många gratis och premium WordPress teman kommer med multiple choice av layouts för olika typer av pages. Ibland kan dock ingen av dessa layouts uppfylla dina obligatoriska krav.

Om du vet hur man kodar i PHP, HTML och CSS kan du skapa dina egna page templates eller till och med bygga ett barntema för din site. Majoriteten av WordPress användare är dock inte utvecklare, så det här alternativet fungerar inte för dem.

Skulle det inte vara bra om du bara kunde designa layouts för pages med hjälp av ett drag-and-drop-gränssnitt?

Detta är precis vad Elementor gör. Det är ett drag and drop WordPress page builder plugin som allow you att enkelt skapa dina egna custom WordPress layouts utan några kodningskunskaper.

WordPress + Elementor är en kraftfull kombination som erbjuder ett intuitivt användargränssnitt som låter dig bygga customize layouts med en live preview. Den levereras med många färdiga moduler för alla typer av webbdesignelement.

Elementor har flera professionellt utformade templates som du omedelbart kan hämta och använda som utgångspunkt. Det fungerar med alla standardkompatibla WordPress teman och är kompatibelt med alla populära WordPress tillägg. För mer detaljer, kontrollera vår kompletta Elementor review.

Med detta sagt, låt oss ta en titt på hur man skapar customize WordPress layouts med Elementor.

Kom igång med Elementor

Först måste du köpa Elementor Pro plugin. Det är den betalda versionen av det gratis Elementor pluginet och ger dig tillgång till ytterligare funktioner och 1 års support.

Därefter måste du installera och aktivera Elementor plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering måste du besöka Elementor ” Settings page för att konfigurera plugin-inställningarna.

Enable Elementor for different posts

Här kan du aktivera Elementor för olika post typer. Som standard är det aktiverat för dina WordPress-poster och pages. Om du har custom post types på din site kommer de också att visas här, och du kan aktivera dem också.

You can exclude or include user roles that can use Elementor when writing posts or pages. Som standard är page buildern aktiverad endast för administratörer.

Glöm sedan inte att klicka på knappen ”Save changes” för att spara dina settings.

Skapa customize layouts för WordPress med Elementor

Först måste du skapa en new page eller post på din WordPress site. På vyn för redigering av post kommer du att notera den nya knappen ”Edit with Elementor”.

Edit with Elementor

Om du klickar på den startar Elementors användargränssnitt, där du kan edit din page med hjälp av Elementors drag-and-drop page builder.

Du kan add to sections och bygga din page from scratch, eller så kan du välja en template.

Edit a page with Elementor

Templates ger dig ett snabbt och enkelt sätt att komma igång. Elementor levereras med flera professionellt utformade templates som du kan customize så mycket du vill.

Låt oss börja med en template genom att clicka på knappen ”Add Template”.

Detta kommer att visa en popup där du kan se de olika templates som finns tillgängliga. Du bör leta efter en template som liknar det du vill ha för din page layout.

I vårt exempel tittar vi på templates för 404 pages.

Select a template in Elementor

Nu måste du klicka för att välja den template du gillar och sedan klicka på knappen ”Insert” för att lägga till den på din page.

Elementor kommer nu att hämta templaten åt dig.

Du kan nu börja editera templates för att matcha dina behov. Peka och click på ett element för att selecta det och Elementor kommer att visa dig dess inställningar i den vänstra colonnen.

Point any element and edit it

Hur Elementor Layouts fungerar

Låt oss nu prata om hur Elementor layouts fungerar.

Elementor layouts är uppbyggda med hjälp av sections, columns och widgets. Sections är som row eller block som du placerar på din page.

Varje section kan ha flera columns, och varje section och column kan ha sina egna stilar, färger, content och så vidare.

Du kan add to vad som helst i dina Column och Sections med hjälp av Elementor widgets. Dessa widgetar är olika typer av block med content som du kan placera i dina Elementor sections.

Välj helt enkelt en widget och släpp den i din section eller column. Det finns en omfattande uppsättning widgetar available som täcker alla populära webbdesignelement som du kan tänka dig.

Add blocks to the layout

You can add to images, text, headings, image galleries, videos, maps, icons, testimonials, sliders, carousels, and so much more.

Du kan också lägga till standard WordPress widgets och även de widgetar som skapats av andra WordPress tillägg på din site. Om du till exempel använder WPForms för att skapa olika formulär för din site, kan du använda dess widget i Elementor.

När du är klar med edit kan du clicka på pilen bredvid knappen ”Publicera” för att viewa olika alternativ för save.

Click the save options

Note: Om du sparar en layout publiceras inte sidan på din site i WordPress, men den sparas.

Du kan nu previewa din page eller gå till WordPress dashboard.

Då kommer du tillbaka till WordPress post editor. Du kan nu save din WordPress page eller publicera den på din website.

Update or publish page edited with Elementor

Skapa dina egna templates i Elementor

Elementor allow you to save your own custom layouts as templates. På så sätt kan du återanvända dina egna templates för att skapa nya pages ännu snabbare i framtiden.

Du behöver bara editera den page som du gillar att save som template med Elementor.

I Elementor Builder-gränssnittet klickar du på pilen bredvid knappen ”Publicera”. Du kommer nu att se fler alternativ för att save your post. Klicka helt enkelt på alternativet ”Save as Template”.

Save as template option in Elementor

Detta kommer att visa en popup där du måste ange ett namn för din template.

När du har enter namnet klickar du på knappen ”Save”.

Save your page to library

Nästa gång du skapar en customize page layout kommer du att kunna välja den från tabben ”My Templates”.

Allt du behöver göra är att klicka på knappen ”Insert” för din custom page layout.

View page layout in library

Du kan också exportera denna template och använda den på andra WordPress webbplatser med Elementor.

Klicka bara på ikonen med 3 prickar och klicka sedan på alternativet ”Exportera”.

Export page layout template

Härifrån kan du downloada templates till din dator.

Elementor Alternativ för att skapa Custom Layouts

Förutom Elementor finns det andra landning pages och website builders som låter dig skapa custom layouts för din site.

Här är några av de bästa Elementor-alternativen du kan använda:

  • SeedProd är den bästa drag-and-drop WordPress website builder som låter dig skapa customize layouts för dina landing pages. Det finns 300+ teman eller templates för landing pages att välja mellan. SeedProd erbjuder också massor av customize alternativ och block för att skapa fantastiska pages. För mer detaljer kan du se vår kompletta SeedProd review.
  • Divi är en visual builder för tema och page builder. Det har funnits i branschen i över 14 år och erbjuder olika funktioner för att skapa layouter för WordPress, inklusive ett layoutbibliotek. Det finns många alternativ för customize i den visuella buildern, och du behöver inte editera någon kod.
  • Thrive Architect är en kraftfull och nybörjarvänlig page builder som du kan använda för att skapa beautiful layouts. Den levereras med 352+ templates och många alternativ för customomize. Du kan använda dess front-end visual builder för att edit alla element på sidan. För mer detaljer, se vår Thrive Architect review.
  • Beaver Builder är en annan populär drag and drop page builder för WordPress. Den är lätt att använda och du kan enkelt skapa layouts för pages builders och posts med Beaver Builder. Den erbjuder också pre-built templates för landing pages, men det finns ej lika många som med SeedProd eller Divi.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar custom WordPress layouts med Elementor. Du kanske också vill se vår expertjämförelse av Elementor vs. Divi vs. SeedProd och våra val för den bästa programvaran för webbdesign.

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

23 kommentarerLämna ett svar

  1. Syed Balkhi

    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. Moinuddin Waheed

    I have seen elementor grow from the very close lenses ever since it was created seven years earlier.
    it gives very easy to use interface for everyone to make visually aesthetic and appealing websites.
    it also helps make complex design a piece of cakewalk.
    But honestly speaking, I have had bad experience in terms of its load and performance.
    ever since I have left using it, I never chose it again.
    I am utilising seedprod now a days and some block based builders using full site editor feature.
    but nevertheless, elementor is very good for everyone just starting out with wordpress website.

    • Jiří Vaněk

      The speed of the website is a certain trade-off for using Elementor, as it makes web creation much easier for you. When WordPress first introduced Gutenberg, I stopped using it for a while. The block editor was a nightmare for me. I didn’t understand it and found it complicated. Then I discovered Elementor, and thanks to it, I returned to WordPress and was happy that building websites through WordPress was simple again, like before. Yes, in some cases, Elementor can slow down the website, but it’s more about the overall setup of the website rather than a direct issue with Elementor. However, I believe that if it weren’t for Elementor, many people wouldn’t use WordPress at all due to the complexity of the Gutenberg Editor.

  3. Allin

    Is it bad to switch back and forth between customizer and elementor when building a website — does this somehow weaken the site? I am using Astra theme

    • WPBeginner Support

      You would want to stay with one editor as changing back and forth could change the markup you’ve added in your content.

      Administratör

    • Jiří Vaněk

      It is not a good practice. As with writing an article. If someone jumps from elementor to gutenberg, it usually results in throwing styles around and the result is bad. It is good to stick to only one method at a time.

  4. Lindy Warrell

    I’ve been too scared to install Elementor in case it messes with my theme. Does it? If not, I may well try it as I find Gutenberg blocks very limiting for setting out or designing my own pages.

    • WPBeginner Support

      By default it shouldn’t, if you reach out to Elementor they can let you know how it will react with your theme :)

      Administratör

  5. J M Das

    The Post is very useful. I am having a Property Listing website. I use Impress Listing Plugin for this. How to use the Custom Layouts or Templates created thus, in place of the default Listing Page. The info on the page says, that the Custom Layouts or Template has to be added the theme directory. How to do it. I am using a Child theme.

  6. Elaine Wright

    Where does Elementor store its CSS in the file tree directory? Where can I find the file(s) it edits?

    Does it store anything in the database?

    I’ve looked for an answer to this for quite a while and can’t find anything.

    Thanks!

  7. Yula

    Thant was extremely helpful! thank you! Saved me a lot of work

  8. Erwin

    Are you saying you don’t need a to make a child theme when you use elementor?
    What will happen if you update the theme?

    • Editorial Staff

      Elementor is a page builder and it’s settings are stored in the plugin. It will work with any theme.

      Administratör

  9. andre

    is it possible to edit child theme, using elementor? specially in category layout.
    coz, even though i have a nice design in my ”home” page, but when i shift to category, the design wont fit on the home page style.

  10. Monique

    I’m trying to create my executive page with pictures and bio. How do I get started with that with Elementor?

  11. David Liou

    Does that mean you need to upgrade your account to business type? Because personal version doesn’t support template uploads.

  12. Alex

    Is the resulting site responsive? Other similar apps boast they help create fully responsive sites and have found they are a complete let down.

    • Tenika

      I used the free version to design my homepage and it is fully responsive. This is a really great plugin and it does everything you could need in the free version! It’s so good that I plan to purchase the pro version just to support and thank the developer for such a useful plugin.

  13. Rodney Lacambra

    Great walkthrough using the Elementor drag & drop page builder. Haven’t tried this one but it’s worth it.

    This could be a great alternative for the SiteOrigin page builder

    Thanks for sharing. Overall, nice to have for creating custom layouts with WordPress.

    ~Rod

  14. Deepak

    I am using elementor in my blog and it shows me error ”Internet server not found” when I going to edit my page with this plugin.

    • Tenika

      You should check their support page on their website. It has a lot of helpful troubleshooting tips.

  15. Victorvijau

    Thanks for the post.I have been looking for a plugin for this purpose to build a page for my site
    Thanks a lot

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.