Hur man skapar anpassade WordPress-layouter med Elementor

Att designa dina egna anpassade sidlayouter i WordPress kan verka som en enorm utmaning. Många oroar sig för att skapa unika designer kräver kodningskunskaper. Detta kan vara frustrerande om du vill anpassa ditt webbplatsutseende.

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

Vi har hjälpt våra läsare att anpassa sina webbplatser med Elementor i flera år. Så vi vet 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 snabbt och enkelt skapa anpassade WordPress-layouter med Elementor.

Varför och när behöver du anpassade WordPress-layouter?

Många gratis och premium WordPress-teman kommer med flera layoutval för olika typer av sidor. Ibland kommer dock ingen av dessa layouter att uppfylla dina krav.

Om du kan koda i PHP, HTML och CSS, då kan du skapa egna sidmallar eller till och med bygga ett barn-tema för din webbplats. Majoriteten av WordPress-användare är dock inte utvecklare, så detta alternativ fungerar inte för dem.

Så, vore det inte bra om du bara kunde designa sidlayouter med ett dra-och-släpp-gränssnitt?

Det är precis vad Elementor gör. Det är ett dra-och-släpp WordPress-sidbyggarplugin som låter dig enkelt 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 anpassade layouter med en liveförhandsgranskning. Den levereras med många färdiga moduler för alla typer av webbdesignelement.

Elementor har flera professionellt utformade mallar som du omedelbart kan ladda 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 läsa vår fullständiga Elementor-recension.

Med det i åtanke visar vi dig hur du skapar anpassade WordPress-layouter med Elementor. Här är en snabb översikt över alla steg vi kommer att guida dig igenom:

1. Kom igång med Elementor
2. Skapa anpassade WordPress-layouter med Elementor
3. Skapa dina egna mallar i Elementor
4. Bonustips: Elementor-alternativ för att skapa anpassade layouter

Låt oss börja!

Kom igång med Elementor

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

Därefter behöver du installera och aktivera Elementor-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du besöka sidan Elementor » Inställningar för att konfigurera plugin-inställningarna.

Här kan du aktivera Elementor för olika inläggstyper. Som standard är den aktiverad för dina WordPress-inlägg och sidor.

Om du har anpassade inläggstyper på din webbplats, kommer dessa också att visas här, och du kan aktivera dem också.

Du kan exkludera eller inkludera användarroller som kan använda Elementor när du skriver inlägg eller sidor. Som standard är sidbyggaren endast aktiverad för administratörer.

Glöm sedan inte att klicka på knappen 'Spara ändringar' för att lagra dina inställningar.

Skapa anpassade WordPress-layouter med Elementor

Först måste du skapa en ny sida eller ett nytt inlägg på din WordPress-webbplats. På redigeringsskärmen för inlägget kommer du att märka den nya knappen 'Redigera med Elementor'.

Att klicka på den startar Elementors användargränssnitt, där du kan redigera din sida med Elementors dra-och-släpp-sidbyggare.

Du kan lägga till sektioner och bygga din sida från grunden eller välja en mall.

Mallar ger dig ett snabbt och enkelt sätt att komma igång. Elementor levereras med flera professionellt designade mallar som du kan anpassa så mycket du vill.

Låt oss börja med en mall genom att klicka på knappen 'Lägg till mall'.

Detta öppnar ett popup-fönster 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å 404-sidmallar.

Nu behöver du klicka för att välja den mall du gillar och sedan klicka på knappen 'Infoga' för att lägga till den på din sida.

Elementor kommer nu att ladda mallen åt dig.

Du kan nu börja redigera mallen för att matcha dina behov. Peka och klicka helt enkelt på vilket element som helst för att välja det, så visar Elementor dess inställningar i den vänstra kolumnen.

Hur Elementor-layouter fungerar

Nu ska vi prata om hur Elementor-layouter 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 sektion kan ha flera kolumner, och varje sektion och kolumn kan ha sina egna stilar, färger, innehåll och så vidare.

Du kan lägga till vad som helst i dina kolumner och sektioner med hjälp av Elementor-widgets. Dessa widgets ä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 du kan tänka dig. Välj helt enkelt en widget och släpp den i din sektion eller kolumn.

Du kan lägga till bilder, text, rubriker, bildgallerier, videor, kartor, ikoner, vittnesmål, bildspel, karuseller och mycket mer.

Du kan också lägga till standard WordPress-widgets och till och med widgets skapade av andra WordPress-plugins på din webbplats. Till exempel, om du använder WPForms för att skapa olika formulär för din webbplats, då kan du använda dess widget i Elementor.

När du är klar med redigeringen kan du klicka på pilen bredvid knappen 'Publicera' för att se olika sparaalternativ.

Du kan nu förhandsgranska din sida eller gå till WordPress-instrumentpanelen.

Detta tar dig tillbaka till innehållsredigeraren. Du kan nu spara din WordPress-sida eller publicera den på din webbplats.

Skapa dina egna mallar i Elementor

Elementor låter dig spara dina egna anpassade layouter som mallar. På så sätt kan du återanvända dina egna mallar för att skapa nya sidor ännu snabbare i framtiden.

Redigera helt enkelt sidan du vill spara som en mall med Elementor. I Elementors redigeringsgränssnitt, låt oss klicka på pilen bredvid knappen 'Publicera'.

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

Detta öppnar ett popup-fönster där du behöver ange ett namn för din mall.

Efter att ha angett namnet klickar du bara på knappen 'Spara'.

Nästa gång du skapar en anpassad sidlayout kan du välja den från fliken 'Mina mallar'.

Allt du behöver göra är att klicka på knappen 'Infoga' för din anpassade sidlayout.

Du kan också exportera den här mallen och använda den på andra WordPress-webbplatser med Elementor.

Klicka helt enkelt på ikonen med 3 punkter och klicka sedan på alternativet 'Exportera'.

Härifrån kan du ladda ner mallen till din dator.

Bonustips: Elementor-alternativ för att skapa anpassade layouter

Förutom Elementor finns det andra landningssidor och webbplatsbyggare som låter dig skapa anpassade layouter för din webbplats.

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

• SeedProd är den bästa dra-och-släpp WordPress webbplatsbyggaren som låter dig skapa anpassade layouter för dina landningssidor. Det finns över 300 mallar för teman eller landningssidor att välja mellan. SeedProd erbjuder också massor av anpassningsalternativ och block för att skapa fantastiska sidor. För mer information kan du se vår kompletta SeedProd-recension.
• Divi är ett visuellt tema och sidbyggare. Det har funnits i branschen i över 14 år och erbjuder olika funktioner för att skapa WordPress-layouter, inklusive ett layoutbibliotek. Det finns massor av anpassningsalternativ i den visuella byggaren, och du behöver inte redigera någon kod.
• Thrive Architect är en kraftfull och nybörjarvänlig sidbyggare som du kan använda för att skapa vackra layouter. Den levereras med över 352 mallar och många anpassningsalternativ. Du kan använda dess visuella byggare på framsidan för att redigera alla element på sidan. För mer information, se vår Thrive Architect-recension.
• Beaver Builder är en annan populär dra-och-släpp-sidbyggare för WordPress. Den är enkel att använda, och du kan enkelt ställa in layouter för sidor och inlägg med hjälp av Beaver Builder. Den erbjuder också förbyggda mallar för landningssidor, men det finns inte 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 anpassade WordPress-layouter med Elementor. Du kanske också vill se vår expertjämförelse av Elementor vs. Divi vs. SeedProd och våra val för bästa programvaran för webbdesign.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.