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.

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.

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”.

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.

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.

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.

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.

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.

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.

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”.

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”.

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.

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”.

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.