Så bygger du en proffsig WordPress-sajt med Elementor

 

Fördelen med en pagebuilder

Att bygga en sajt i WordPress är enkelt. Du väljer ett tema du gillar, klickar på installera och sedan är det bara att köra. Men för dig som vill kunna styra struktur och design på dina villkor, skapa en personligare profil eller sätta upp en proffsig företagssajt, krävs mer än ett fint gratistema.

 

De verktyg som finns för att bygga sajter i WordPress har i dag blivit väldigt kraftfulla och kompetenta och det finns flera alternativ att välja mellan. Några av de populäraste ”page-builders” för WordPress som finns i dag är Beaver Builder, Elementor och WPBakery.

 

I den här guiden har vi valt att fokusera på Elementor, men kolla gärna in de andra alternativen också för att se vilken som passar dina behov. I stora drag fungerar de alla på samma sätt.

 

Vad är Elementor?

Elementor är ett plugin till WordPress som ger dig möjlighet att styra utformningen av de flesta delarna på din WordPress-sajt på ett sätt som inte är möjligt om du bara använder ett tema. Visst går det att styra utseendet en hel del med bara ett tema installerat på din WordPress-sajt, men du är väldigt begränsad till vad du kan göra med strukturen.

 

Med en page-builder som Elementor kan du från grunden välja hur dina sidor eller blogginlägg ska se ut. Du kan till exempel göra mallar som styr hur alla dina bloggposter ska se ut, bygga enskilda sidor där du väljer var olika element ska visas, samt skapa både sidhuvud (header) och sidfot (footer). Vill du flytta rubriken över första bilden? Lägga till spalter? Styra alla marginaler och bredder? Inga problem.

Det som gör Elementor så användbart är dels enkelheten, dels att du kan du styra hur din sajt ser ut utifrån olika variabler. Du kan till exempel göra en mall för hur artiklar som har en viss tagg ska se ut, eller göra en toppmeny som ser ut på ett visst sätt och visas på vissa sidor, men inte andra.

 

Bygg responsiva sajter

Att i dag bygga en sajt som inte fungerar bra i mobilen är snudd på brottsligt. En styrka med Elementor är att i princip alla element du lägger till kan utformas för både dator, mobil och surfplatta – och du ser hur det blir direkt. Det går till exempel att visa och dölja olika element, eller ändra marginaler, typsnitt bildstorlekar och andra detaljer beroende på om läsaren besöker din sajt via datorn eller via mobilen.

 

Elementor finns både i en begränsad gratisversion och i en betalversion med alla funktioner. Betalversionen är utan tvekan bättre, men du klarar dig med gratisversionen om du har enklare behov. 

 

Pris för Elementor: Gratis (begränsad), ca 600 kronor/år (en sajt), ca 2 000 kronor/år (25 sajter), ca 4 000 kronor/år (tusen sajter).

 

WordPress Gutenberg

WordPress egna “visual editor”, Gutenberg, låter dig också strukturera element direkt i editorn. Men den är fortfarande långt ifrån lika kompetent som de renodlade pagebuilders som finns. 

 

Det är möjligt att WordPress i framtiden kommer att komma ikapp tredjepatrts-pagebuilders, men det lär dröja. Gutenberg har funnits i fyra år och är ännu undermåligt vad gäller designmöjligheter (om du inte kan koda).

Fördelar med Elementor

Drag & drop. I pagebuilders kan du flytta runt element fritt och även lägga in olika block i varandra.
Live-redigering. Få en live-visualisering över hur dina ändringar kommer att se ut på sajten innan du sparar det skarpt.
Fler moduler. WordPress har ett gäng smarta moduler och widgets du kan stoppa in på din sajt, men en pagebuilder har ännu fler.
Friare design. Med WordPress kan du lägga till css och i viss mån styra utseendet, men du är väldigt låst till det tema du valt. Med en pagebuilder kan ta över designen helt, om du så önskar.

Nackdelar med elementor

Icke optimal kod. Pagebuilders som Elementor lägger till mängder av extra kod på dina sidor. Detta kan göra sajten långsammare och svårare att optimera för Google. Här kan du läsa mer om hur du optimerar din sajt för Google (SEO).
Inlåst. När du har byggt en hel sajt med Elementor är det inte helt enkelt att göra sig av med tillägget. Om du exemplvis slutar betala för pro-versionen slutar (förstås) pro-elementen på din sajt att fungera. Att fixa all styling igen kan vara ett stort projekt.

 

Sammanfattningsvis går det att säga så här: Ska du bara ha en enklare blogg räcker det oftast med WordPress och ett tema. Ska du bygga en företagssajt, eller en mer personlig sajt där statiska sidor är viktigare (och inte kan koda) är en pagebuilder att föredra. Du kan spara mycket tid och enkelt göra riktigt snygga sajter själv!

 

Nästa sida: Nu kör vi – så bygger du en sajt i Elementor!

 

Bygga en sida i Elementor

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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. 

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.

 

Anpassa för mobilen

Om vi tar sajten vi byggde i steget innan som exempel. I datorn ser allting bra ut, men i mobilen kan vi konstatera att det inte ser riktigt lika bra ut. Här är en jämförelse av översta blocket med ingångsbild och text på datorn, jämfört med i mobilen:

Som tur är så är det enkelt att anpassa för både mobil och surfplatta i Elementor. För att ändra till mobilt redigeringsläge klickar du på den lilla skärmikonen längst ner till vänster (1) och väljer “Mobile” i menyn som kommer upp (se bild nedan). 

 

Tips: Du kan lägga till ännu fler brytpunkter än de vanliga desktop, surplatta och mobil. I WordPress-admin går du till Elementor – Inställningar – Experiments och aktiverar Additional Custom Breakpoints. Du kan lägga nu lägga till sex ytterligare brytpunker om du vill göra sajten optimal för alla skärmstorlekar. Lägg till dessa under Site settings – active breakpoints (läs mer här).

 

Beroende på vilket läge du väljer så kommer sajten visas därefter. För att vara säker på att du bara redigerar saker så som de visas i mobilen, håll utkik efter den lilla symbolen som visar vilket läge olika inställningar påverkar. Datorikon – desktop, surfplatta eller mobil. 

 

Klicka på den lilla symbolen längst ned på sidan som föreställer en dator och mobil. Du får då upp de olika brytpunkterna i en meny överst på sajten och kan växla mellan dem. Bredvid inställningar visas också vilket läge som påverkas när du redigerar. Om ingen symbol visas kommer inställningen påverka alla skärmstorlekar.

 

Anpassa alla delar av sajten för mobilen

När vi har bytt till mobilläge är det dags att anpassa sajten för mobilen. Det gör du helt enkelt genom att klicka på respektive element som inte ser bra ut, och ändra om dessa.

 

I vårt exempel ändrade vi rubrikstorleken till 60 pixlar och ändrade Minimum height på blocket som innheåller bakgrundsbilden till 560 pixlar. Loggan drogs ned i storlek och sedan trixade vi runt lite med storlekar för text och ikoner i blocket under huvudrubriken.

 

När du är nöjd gör du likadant med övriga delar av sajten där det ser konstigt ut i mobilen. Vill du även anpassa för surfplattor så gör du likadant, men väljer Tablet under Responsive mode (bild ovan).

 

Visa/dölja hela block i mobilen

En annan väldigt användbar funktion som gör Elementor till ett mycket vasst verktyg för sajtbyggaren är möjligheten att skapa helt unika block för dator, surfplatta eller mobil. Det betyder att du kan anpassa väldigt detaljerat hur saker ska visas på olika skärmar.

 

Om du till exempel bara vill ha knappar med nedladdningslänkar från Google Play och App Store när besökaren kommer från mobilen, eller anpassa bakgrundsbilder utifrån skärmstorlek, då är det enkelt fixat. Så här gör du:

 

Vill du ha två olika ingångsblock på sajten så bygger du helt enkelt två block precis som tidigare i denna guide. Det ena anpassar du för dator, det andra för mobil. Nu visas båda blocken på sajten, och så vill vi ju inte ha det. 

Klicka på det block som du vill ska visas i datorn och välj sedan Hide on mobile under Advanced – Responsive. Gör samma sak på det block du vill visa i mobilen, men välj Hide on desktop och Hide on tablet.

 

Voilà. Du har nu fortfarande två block i redigeringsläget, men på sajten visas bara ett av dem, beroende på om du använder mobil eller dator.

 

 

 

Villkorsstyrda mallar

Här går vi igenom fördelarna med mallar, eller templates som det kallas i Elementor, som låter dig utforma en mall som styr designen över hela sajten.

 

Men bäst av allt – du kan styra alla mallar i Elementor utifrån givna villkor. Det betyder till exempel att du kan ha en mall för alla bloggposter som har en viss kategori/tagg. Du kan ockstå ställa in så att olika headers visas beroende på vilken sida du är på.
 

 

Skapa en mall – välj var den ska visas

Det finns flera typer av mallar att välja mellan i Elementor. Du hittar mallarna genom att gå till Elementor Templates – Theme builder i admin-läget i WordPress.

De olika mallar du kan bygga är:

 

Header/Footer – bygg en egen header och/eller footer om du inte är nöjd med ditt temas dito.
Single Post – designa bland annat hur dina blogginlägg/poster ska se ut.
Single Page – styr vanliga, statiska WordPress-sidor.
Archive – utforma automatgenererade sidor på din sajt, så som tagg-, kategori-, och författarsidor.
Search results. Som det låter. Utforma sökresultatsidor.
Loop Item – Bygg en del av en sida som du sedan kan infoga på olika ställen på sajten. Ger mer frihet att utforma hur exempelvis inlägg ska visas, jämfört med standard-blocket för bloggposter.

 

När du har valt vilken typ av mall du vill ha trycker du Create. Då kommer du till redigeringsläget. Här fungerar det precis som den statiska sida vi byggde tidigare. Du drar in de element du vill ha från widgetmenyn till vänster. 

När du trycker på Update kommer du att få upp ett val (bild ovan) där du kan ställa in var mallen ska visas och vad den ska påverka. Du kan ändra detta i efterhand genom att klicka på den lilla pilen bredvid Update och välja Display Conditions.

Här finns massor av smarta val. Bland annat kan du visa en typ av mall för bloggposter taggade med en viss tagg. Du kan också bygga specifika mallar för enskilda sidor och inlägg på din sajt. Eller så lämnar du den som den är, så visas den på alla sidor eller inlägg, beroende på vilken mall du valt. 

 

Här är tre exempel på smarta saker du kan göra med mallar:
 

 

1. Strukturera om dina bloggposter och inlägg

Bloggposterna/artiklarna du har på din WordPress-sajt får sitt utseende beroende på vilket tema du har installerat. Det finns många snygga teman, men de är ganska låsta i sin struktur. Med Elementor och dess mallar är det möjligt att ändra det mesta.

 

Med mallen Single Post från Elementor bygger du om dina bloggposter så att de passar din smak. Här väljer var du vill ha rubriker någonstans, vilken information som ska visas (byline, datum, kommentarer, med mera), hur många och hur breda spalter du ska ha, och mycket mer. 

Med Elementors Templates ser du också direkt hur dina ändringar kommer att se ut, tack vare möjligheten att läsa in dynamiskt innehåll. Det betyder att om du vill ändra utseendet på bloggposter så läser Elementor in dina faktiska bloggposter i editorn, vilket gör det enkelt att se hur alla förändringar kommer att se ut, utan att du behöver publicera dina ändringar först.
 

 

2. Bygg en egen header

Headern styrs generellt utifrån vilket WordPress-tema du har valt. Många teman brunkar inkludera några olika alternativ att välja på, men de flesta saknar större redigeringsmöjligheter. Med mallen Header i Elementor kan du komma runt detta och helt enkelt bygga en egen header. 

 

Det går förstås även att bygga en egen sidfot på samma sätt med mallen Footer. 
 

 

3. Stajla alla tråkiga taggsidor i ett kick

Startsida och inlägg är de sidor som är roligast att jobba med på en sajt/blogg. Det finns dock massor av viktiga sidor som lätt glöms bort – de tråkiga automatgenererade sidorna. Varje blogg har i dag massor av sidor som samlar innehåll utifrån specifika urval. Det kan vara en tagg, artikelförfattare, kategorier och sökresultat. 

 

Med mallen Archive blir det superenkelt att fixa snygg och smart design även för alla dessa sidor. Du kan ha en mall för alla, eller styra specifikt per tagg och andra villkor.