Hur man skapar customize layouts i WordPress med Elementor

Att designa egna sidlayouter i WordPress kan verka som en stor utmaning. Många människor oroar sig för att det krävs kodningskunskaper för att skapa unika mönster. Det kan vara frustrerande om du vill anpassa utseendet på din webbplats.

Som tur är behöver du inte kunna någon kod med Elementor. Elementor är en dra-och-släpp WordPress-sidbyggare som gör det enkelt och intuitivt att designa layouter. Även nybörjare kan skapa fantastiska sidor med bara några klick.

Vi har hjälpt våra läsare att anpassa sina webbplatser med Elementor i flera år. Så vi känner till de enklaste och mest effektiva sätten att få det att fungera för dig.

I den här artikeln guidar vi dig genom stegen för att skapa anpassade WordPress-layouter snabbt och enkelt med 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 egna sidmallar eller till och med bygga ett barntema för din webbplats. Majoriteten av WordPress-användarna är dock inte utvecklare, så det här alternativet fungerar inte för dem.

Så skulle det inte vara bra om du bara kunde designa sidlayouter med hjälp av ett dra-och-släpp-gränssnitt?

Detta är precis vad Elementor gör. Det är ett drag-and-drop WordPress Page Builder-plugin som gör att du enkelt kan skapa dina egna anpassade WordPress-layouter 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 mallar som du kan ladda ner direkt och använda som utgångspunkt. Det fungerar med alla standardkompatibla WordPress-teman och är kompatibelt med alla populära WordPress-plugins.

För mer information kan du kolla in vår fullständiga Elementor-recension.

Med detta i åtanke ska vi visa dig hur du skapar anpassade WordPress-layouter med Elementor. Här är en snabb översikt över alla steg som vi guidar dig genom:

Låt oss komma igång!

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 inläggstyper. Som standard är det aktiverat för dina WordPress-inlägg och sidor.

Om du har anpassade inläggstyper på din webbplats 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 ”Spara ändringar” för att spara dina inställningar.

Skapa customize layouts för WordPress med Elementor

Först måste du skapa en ny sida eller ett nytt inlägg på din WordPress-webbplats. På skärmen för redigering av inlägg kommer du att se den nya knappen ”Redigera med 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 lägga till sektioner och bygga din sida från grunden eller välja en mall.

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 mall genom att klicka på knappen ”Add Template”.

Då visas en popup-ruta där du kan se de olika tillgängliga mallarna. Du bör leta efter en mall som liknar det du vill ha för din sidlayout.

I vårt exempel tittar vi på mallar för 404-sidor.

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 layouter byggs med hjälp av sektioner, kolumner och widgets. Sektioner är som rader eller block som du placerar på din sida.

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

Du kan lägga till vad som helst i dina kolumner och sektioner med hjälp av Elementor-widgetar. Dessa widgetar är olika typer av innehållsblock som du kan placera i dina Elementor-sektioner.

Det finns en omfattande uppsättning widgets tillgängliga som täcker alla populära webbdesignelement som du kan tänka dig. Välj helt enkelt en widget och släpp den i ditt avsnitt eller din kolumn.

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.

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

Då kommer du tillbaka till innehållsredigeraren. Du kan nu spara din WordPress-sida eller publicera den på din webbplats.

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.

Redigera helt enkelt den sida som du vill spara som en mall med Elementor. I Elementor Builder-gränssnittet klickar vi på pilen bredvid knappen ”Publicera”.

Du kommer nu att se fler alternativ för att spara ditt inlägg. Klicka bara på alternativet ”Spara som mall”.

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

När du har angett namnet klickar du bara på knappen ”Spara”.

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.

Bonus tips: Elementor-alternativ för att skapa anpassade layouter

Förutom Elementor finns det andra landningssidor och webbplatsbyggare som gör att du kan skapa anpassade layouter för din webbplats.

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.