Hur man skapar anpassade WordPress-layouter med Elementor

Vill du skapa egna anpassade sidlayouter i WordPress? Elementor är en dra & släpp WordPress-sida byggare som gör att du enkelt kan skapa anpassade WordPress layouter utan att ha någon kodning kunskap. I den här artikeln visar vi hur du enkelt skapar anpassade WordPress-layouter med Elementor med några få klick.

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

Många gratis och premium WordPress-teman kommer med flera layoutalternativ för olika slags sidor. Men ibland kan ingen av dessa layouter uppfylla dina 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. Men majoriteten av WordPress-användare är inte utvecklare, så det här alternativet fungerar inte för dem.

Skulle det inte vara bra om du bara kan skapa sidlayouter med ett dra och släpp-gränssnitt?

Det här är exakt vad Elementor gör. Det är en dra och släpp WordPress-sida byggare plugin som gör att du enkelt kan skapa egna egna WordPress layouter utan någon kodning färdigheter.

Den har ett intuitivt användargränssnitt som låter dig skapa anpassade layouter med en live förhandsvisning. Den levereras med många färdiga moduler för alla typer av webbdesignelement.

Det finns flera professionellt utformade mallar som du direkt kan ladda och använda som utgångspunkt. Den fungerar med alla standardkompatibla WordPress-teman och är kompatibel med alla populära WordPress-plugins.

Med detta sagt, låt oss ta en titt på hur man skapar anpassade WordPress-layouter med Elementor.

Komma igång med Elementor

Först måste du köpa Elementor Pro plugin. Det är den betalda versionen av det kostnadsfria 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 information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Vid aktivering måste du besöka Elementor »Inställningar sida för att konfigurera insticksinställningar.

Här kan du aktivera Elementor för olika posttyper. Som standard är det aktiverat för dina WordPress-inlägg och sidor. Om du har egna posttyper på din webbplats så kommer de också att visas här, och du kan också aktivera dem.

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

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

Skapa anpassad WordPress Layout med Elementor

Först måste du skapa en ny sida (eller post) på din WordPress-webbplats. På skärmen för postredigering kommer du att märka den nya knappen "Edit with Elementor".

Genom att klicka på den startar Elementor användargränssnitt där du kan redigera din sida med Elementors drag och släpp sida byggare.

Nu kan du lägga till avsnitt och bygga din sida från början, eller du kan lägga till en mall.

Mallar är ett snabbare sätt att snabbt komma igång. Elementor kommer med flera professionellt utformade mallar som du kan anpassa så mycket du vill.

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

Detta kommer att ge upp en popup där du kommer att kunna se olika mallar som är tillgängliga. Du bör leta efter en mall som liknar vad du har i åtanke för din sidlayout.

Klicka nu för att välja den mall du vill och klicka sedan på knappen "Infoga" för att lägga till den på din sida.

Elementor laddar nu mallen för dig.

Du kan nu börja redigera mallen för att matcha dina behov. Peka enkelt på och klicka på något element för att markera det, och Elementor visar dess inställningar i den vänstra kolumnen.

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

Elementor layouter är byggda 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 egna stilar, färger, innehåll, etc..

Du kan lägga till något i dina kolumner och sektioner med Elementor-widgets.

Dessa widgets är olika slags innehållsblock som du kan placera i dina Elementor-sektioner.

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

Du kan lägga till bilder, text, rubriker, bildgallerier, videoklipp, kartor, ikoner, testimonialer, skjutreglage, karuseller och så mycket mer.

Du kan också lägga till standard WordPress-widgets och även de widgets som skapats av andra WordPress-plugins på din webbplats.

När du är klar med redigering kan du klicka på Spara-knappen för att spara dina ändringar.

Notera: Om du sparar en layout publiceras inte sidan på din WordPress-webbplats. Det sparar bara din sidlayout.

Nu kan du förhandsgranska din sida eller gå till WordPress-instrumentpanelen.

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

Skapa 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 bara den sida som du vill spara som en mall med Elementor.

I Elementor Builder-gränssnittet, klicka på mappikonen bredvid Spara-knappen och välj sedan "Spara mall".

Detta kommer att ge upp en popup där du måste ange ett namn för din mall och klicka på Spara-knappen.

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

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

Du kommer att behöva besöka Elementor »Bibliotek sida för att se dina sparade mallar. Ta musen över till ditt mallnamn och klicka sedan på länken Exportera mall.

När du har hämtat din mallfil kan du gå till bibliotekssidan på en annan WordPress-webbplats med Elementor och importera sedan din mall.

Det var allt tills vidare.

Vi hoppas att den här artikeln hjälper dig att lära dig hur du skapar anpassade WordPress-layouter med Elementor. Du kanske också vill se vår steg för steg guide för hur du snabbar på WordPress och höjer prestanda.

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