Som exempel bygger vi en enkel startsida för vårt hittepå-företag Floskelakuten AB. Sajten som vi bygger kommer att se ut så här. Klicka på bilden för att se hela sajten, eller här (pdf).

Bygga sajt pagebuilder wordpress

Saker att tänka på innan du börjar använda Elementor:

  • Kolla att andra plugin som du absolut vill använda är kompatibla med Elementor.
  • Om du vill sluta använda och avinstallerar en page-builder, i detta fall Elementor, på din sajt så kommer all form du byggt att försvinna. Allt innehåll (text och bilder) finns dock kvar.

Tips:

  • Allt du gör i Elementor går att ångra med ctrl+z (cmd+z på Mac) så var inte rädd för att leka runt i verktyget.
  • Det finns möjlighet att välja flashiga animationer till de flesta block i Elementor. Det är kul, men använd sparsamt. 

Innan du kan börja med Elementor behöver du förstås en Wordpressajt att installera det på. Det finns två alternativ: Antingen skapar du ett konto direkt på Wordpress.com (kostar 250 kronor/månad för businessversionen som krävs för att kunna installera tillägg), eller så skaffar du ett konto på något webbhotell.

Webbhotell går att få från några tior i månaden och uppåt, och då ingår Wordpressinstallation. De flesta webbhotell erbjuder i dag något som kallas "one click installer" för Wordpress, vilket gör installationen enkel..

När du har fixat ditt Wordpresskonto laddar du ner och installerar Elementor.

Nu kör vi! 

Bygga en sajt – steg för steg

Vi börjar med det mest grundläggande – bygga en statisk sida. För att göra det börjar du med att skapa en ny sida i Wordpress precis som vanligt. Gå in under Pages (Sidor) och välj Add new (Lägg till ny). Men istället för att infoga text och bilder på sidan du nu skapat trycker du på knappen Edit with Elementor.

Elementor pages

Du kommer nu till en tom mall varifrån du bygger allt som ska visas på sidan. I vänsterspalten hittar du alla komponenter du kan välja att dra in på sidan (använder du gratisversionen har du färre alternativ). Det är också här redigeringsmöjligheterna för de olika widgetarna visas.

1. Första blocket – lägga till kolumner

På mitten av sidan ser du ett plus och en mapp i en inramad yta. Vill du bygga blocket från grunden trycker du på pluset och väljer en struktur, kolumner, för just detta block. Det här är grunden i hela byggandet. Du kan stoppa in kolumner i kolumner för att få till den design du vill ha. Om du exempelvis vill att blocket ska sträcka sig över hela sajten väljer du först en kolumn, sedan kan du dra in fler kolumner om det behövs.

Elementor pagebuilder block
I Elementor bygger du enkelt block och kolumner på din sajt med ett knapptryck.

Du har också alternativet att utgå från en mall istället för att bygga allt från grunden. Tryck i så fall på mappikonen och välj blocks (en del av en sida), pages (hel sida) eller My templates (här sparas mallar som du gjort).

Vi väljer en kolumn för detta block som ska bli toppen av sidan. Självklart vill vi ha en stor ingångsbild som fångar besökaren och ger en bild av vad vårt företag står för. Vi väljer en bild med vågor i en solnedgång från royaltyfria sajten Pixabay.com. Vill du hellre ha något rörligt är det även möjligt att lägga in en videoloop från exempelvis Youtube som bakgrund. Klicka i så fall på videoikonen.

2. Ingångsbild

För att lägga bilden som en bakgrund i det block vi skapat högerklickar du på blocket och väljer Edit section. I vänsterspalten får du nu upp de alternativ du har för detta block. Klicka på fliken Style och ladda upp bilden under Background – image. Välj Repeat – no repeat och size – cover.

Ladda upp bild Elementor
Bakgrundsbild. Innan du har ställt in höjden på blocket bilden ligger i, visas bara en liten del av bilden överst.

Nu syns en liten del av bilden på sajten, men vi vill att hela ska synas. Klicka på fliken Layout och ställ in Height – Min Height till en höjd som känns bra. (vi går in på hur du mobilanpassar sajten lite senare)

3. Text

Vi har nu en fin ingångsbild, men vi måste förstås också lägga till en text för att verkligen fånga våra besökare. Klicka på de nio små rutorna i högra hörnet av vänstermenyn för att komma till Widgets. Dra in Heading till kolumnen.

Elementor rubrik

För att ändra saker som typsnitt, storlek och färg klickar du på rubrikfältet och går in under Style – Typography i vänstermenyn. Vet du att du vill använda vissa typsnitt över hela sajten går du istället till Global style som du hittar om du klickar på menyknappen i vänstra hörnet av vänsterspalten (de tre strecken) och sedan Site settings. Här kan du välja färger och typsnitt som återkommer över hela sajten.

För att texten ska synas lite bättre kan du lägga på ett semitransparent lager över bilden. Gå till redigera blocket där du har bakgrundsbilden och välj Style – Background Overlay. Vi valde en svart färg som är 50 procent transparent (0.5).

4. Text med ikoner

Nu har vi en fräsig rubrik, men vi vill också ha några poppiga värdeord. Dra in Inner Section-widgeten under rubriken. Som standard blir det två kolumner, men eftersom vi vill ha tre så högerklickar vi i hörnet på den ena kolumnen och väljer Add new column.

Elementor Icon List page builder

I de tre kolumnerna drar du in widgeten Icon List. Klickar du på respektive Icon List-block så får du upp redigeringsmöjligheter i vänsterkolumnen och kan välja typ av ikon, färger, typsnitt och annat.

Tips: Elementor använder Font awesome vilket kan sega ner laddningstider för sajten. Använder du några få borde det inte vara några problem. Det bästa är dock att ladda upp egna ikoner i svg-format.

5. Logotyp

Vi vill förstås ha med vår logotyp också. Det är enkelt gjort. Dra in Image-widgeten över ingångsrubriken och ladda upp logotypen.

Logotyp Wordpress Elementor pagebuilder

Nu är första blocket klart. Nästa steg blir att utforma resterande block besökarna ser när de skrollar nedåt. Principen den samma, så vi går snabbt igenom vilka block vi använt och hur vi gjorde det.

Block 2 – tre textpuffar med bild

Här har vi valt att lägga tre puffar till andra sidor om företaget. Det finns färdiga block för att visa rubrik-, text- och bildblock.

Puffar Elementor

1. Klicka på pluset, Add new section, och välj en kolumn.
2. Dra in widgeten Inner Section i kolumnen du nyss skapat. Högerklicka i hörnet på en av kolumnerna och välj Add new column.
3. Välj och dra in Image Box (hittas under General i widgetmenyn) i en av kolumnerna.
4. Klicka på boxen för att få upp redigeringsalternativ i vänstermenyn. Ställ in allt så du vill ha det. Repetera i de andra kolumnerna, eller kopiera och klistra in den box du precis skapat.
5. Dra in elementet Button i botten av varje kolumn och redigera så som du vill ha det. 

Block 3 – användarrecensioner

Ett företag är ingenting utan nöjda kunder. Här lade vi in ett block med recensioner från ett gäng fiktiva personer.

Testimonial Elementor

1. Klicka på pluset, Add new section, och välj fyra kolumner.
2. Dra in widgeten Testimonial från vänstermenyn (under General) i varje kolumn. Redigera sedan dessa så som du vill att de ska se u och vad som ska stå.
3. Högerklicka på huvud kolumnen ute i kanten och välj Edit column. Ställ Content Width till Full width. Under fliken Advanced kan du öka top och bottom padding för att få mer luft i kolumnen.

Block 4 – prisblock (Pro)

Den här typen av prisblock för att jämföra olika nivåer av sina tjänster är väldigt vanligt i dag, så ett sådant måste vi förstås ha. Observera att den här widgeten kräver Pro-versonen av Elementor, men är du lite händig kan du bygga något liknande själv. Det finns också andra tillägg som ger dig denna funktion, till exempel Elementor Addon Elements.

Prisbox Wordpress

1. Klicka på pluset, Add new section, och välj en kolumn.  
2. Dra in widgeten Inner Section i kolumnen du nyss skapat. Högerklicka i hörnet på en av kolumnerna och välj Add new column. Nu har du tre kolumner.
3. Dra in widgeten Price Table i varje kolumn.
4. Klicka på den box du vill redigera, och ställ in allt i vänsterspalten.
5. Vill du ha en rubrik över alltsammans drar du bara in widgeten heading över de tre prisboxarna, men i samma kolumn som de ligger i.

Block 5 – karta och sociala knappar

Självklart vill vi visa alla ställen som kunder kan nå oss på. Vi väljer att visa det med en karta från Google Maps, samt ikoner som leder till vårt företags olika sidor i sociala medier.

Sociala ikoner pagebuilder Wordpress

1. Klicka på pluset, Add new section, och välj en kolumn.  
2. Dra in Widgeten Google Maps (under Basic) och ställ in adress.
3. Dra in Widgeten Social Icons (under General) och välj vilka du vill ska visas och vart de ska länkas.

Göra sidan till din startsida

För att välja den sida du just skapat till startsida på din Wordpress-sajt behöver du lämna Elementor och gå tillbaka till Wordpress admin-gränssnitt.

Startsida wordpress

1. I Wordpress-admin, välj Settings - Reading.
2. Klicka i A static page och välj sidan du skapat i rullmenyn. 
3. Tryck på spara.

Då är sidan nästan klar, men det återstår en viktig detalj – anpassa den för mobilen. På nästa sida går vi igenom hur.