Elementor tutorial för nybörjare – Fullständig guide

Elementor tutorial för nybörjare – Guide för att bygga rätt innehåll till din hemsida

Det här är en komplett Elementor tutorial för nybörjare som vill bygga innehåll till hemsidor.

Ifall du är som oss:

• Vill skapa visuellt fantastiska och hög funktionella hemsidor utan att lära sig programmering.
• Du vill enkelt kunna bygga och anpassa din egna WordPress hemsida.

Ifall punkterna ovan stämmer in på dig så passar Elementors drag and drop hemsidebyggare perfekt för dig. Elementor låter dig skapa, ändra, anpassa layouten för din WordPress hemsida utan att behöva koda.

Låt oss dyka in i det:

1. Vad är grunderna för webb content?

Ifall du är helt ny i WordPress så kan du starta med att läsa igenom vår artikel som är skriven bara för det.

Man skapar content genom WordPress byggs det genom sidor och inlägg. Det är viktigt att ha en balans mellan sidor och inlägg för att göra din hemsida så användarvänlig som möjligt. Sidor är ett bra sätt att addera tidlöst och statiskt content som inte behöver ett publiceringsdatum. Några exempel på sidor är “Hem”, “Om Oss” och “Kontakt”.

Inlägg ger dig möjligheten till att skapa mer dynamiskt content som har ett publiceringsdatum och som ständigt kan bli uppdaterat. Dessa inlägg läggs oftast under en blogg. Generellt sätt så är nyckeln till en framgångsrik hemsida att hålla en balans mellan sidor och inlägg, där dom tillsammans ska skapa högt engagemang hos besökarna på din hemsida.

2. Drag and drop – Den lättaste vägen till att bygga content för nybörjare.

Det finns flera olika premium teman på WordPress som kommer med olika layouter. Dock så finner många WordPress nybörjare att det är svårt att ändra och anpassa layouten själva. Som tur är finns det nu flera fantastiska drag and drop plugins på WordPress. Dom hjälper WordPress utvecklare att anpassa alla komponenter på deras hemsida utan att behöva skriva en rad HTML, CSS eller JavaScript.

3. Elementors – drag and drop

Elementor är ett drag and drop verktyg ger nya utvecklare möjligheten till att skapa professionella hemsidor. I grunden är Elementor ett live plugin. Vilket betyder att utvecklarna kan se förändringarna live på hemsidan samtidigt som de blir redigerade.
Användare kan skapa sektioner och enkelt välja antalet kolumner som dom vill ha för varje sektion. Elementor kommer med massvis med widgets som du sedan lägger in i kolumnerna, exempelvis foton, text, sliders, sociala medier o.s.v.
Vill du inte dedikera din tid för att skapa din egen layout? Elementor kan även hjälpa dig med detta, tack vare dess många ready-to-use mallar som enkelt kan infogas till din hemsida.

4. Skillnaderna mellan Elementor och Elementor Pro

I grund och botten är Elementor Pro en add-on som användare kan köpa för att få fler funktioner. Användare får då tillgång till över 30 extra widgets, så som Header & Footer builder, dynamic single post design, popup, form och WooCommerce widgets som enkelt kan integreras på din hemsida.
Utöver det ger Elementor Pro användare full tillgång till Elementor template bibliotek. Det betyder att du får tillgång till att välja mellan dussintals av bra alternativ som kan forma grunden till din framtida hemsida.

Men Elementor Pro är inte för alla. Till exempel, ifall du bara vill designa enkla men hög attraktivt content, så är gratis Elementor förmodligen det rätta alternativet för dig. Ifall du redan använder ett flexibelt tema, exempelvis WP Astra Pro, betyder det att du nog inte behöver de extrafunktioner som Elementor Pro erbjuder.

Ifall du å andra sidan menar att bygga mer komplext content och landningssidor eller vill inkorporera WooCommerce till din hemsida så är Elementor Pro det rätta valet för dig. I denna Elementor tutorial för nybörjare kommer Elementor Pro att användas.

5. Innan vi startar…

Innan vi startar med Elementor tutorial för nybörjare så kan vi förbereda material och göra några grunder.

Bestäm hemsidans färger och fonter. Till exempel primära, sekundära och text färger. Ifall du inte har någon idé om vilka färger du vill använda så kan ColorHunt vara ett bra verktyg att använda sig av. Elementor supportar alla fonter från Google Fonts.

• Förbered din logga.
• Bestäm hemsidans (sidornas) struktur, exempelvis:
  • Hem
  • Om
  • Tjänster
  • Kontakt
    • Blogg
      Inlägg 1
      Inlägg 2

• Förbered en design för din hemsida. Ibland kan ett koncept, en bild eller ett foto hjälpa dig att börja bygga din design.

6. WordPress form och upprensning

6.1. Byt permalänkar och strukturer

Inställningar -> Permalänkar -> Inläggsnamn.
Välj “Inläggsnamn” och spara ändringar. Dom ändrar stilen av din URL och hjälper till med SEO.

6.2. Radera alla inlägg

Inlägg-> Alla inlägg -> Välj alla inlägg -> Flytta till papperskorg.

6.3. Radera alla sidor>

Sidor -> Alla sidor -> Välj alla sidor -> Flytta till papperskorg.

6.4. Skapa nya sidor

Sidor -> Lägg till ny -> Namn på titel -> Publicera.
Skapa nya sidor enligt din struktur. Exempelvis Hem, Om, Tjänster, Kontakt och Blogg. Skriv din sidas titel namn och klicka publicera.

6.5. Ändra “Hem” inställningar

Inställningar -> Läsa -> Statisk sida -> Ändra startsida och inläggsida.
Ändra så att din startsida visar en statisk sida och välj sedan att startsidan visar sidan “hem” som du precis har skapat.

6.6. Skapa en meny

Utseende -> Menyer -> Skapa en ny meny -> Namn för meny -> Skapa meny-> Välj sidor att lägga in i menyn -> Klicka i primära meny -> Spara meny. Skapa en ny meny. Fyll i ett namn för menyn, exempelvis: ”Primär” meny och klicka skapa meny. Välj de sidor som du skapat sedan tidigare, som visar sig i den vänstra kolumnen och klicka lägg till i meny. Dom sidorna kommer att visas i högra kolumnen. Du kan använda drag and drop funktionen för att ändra positionerna på sidan. Kom ihåg att klicka i att göra det till den primära menyn och klicka tillslut på spara menyn.

När du är klar med det här steget har du gjort grunderna i WordPress inställningarna. Nästa steg är att lägga grunderna i Elementor Pro.

7. Elementor Tutorial – Inställningar

Elementor -> Inställningar. Du kan antingen lämna grund inställningarna helt eller så kan du prova runt lite. Vi kan rekommendera att använda grundinställningarna som tillkommer.

7.1. Elementor Editor

Sidor -> Ny sida -> Redigera med Elementor. Du kommer att bli förflyttad till Elementors sidbyggare.

• Huvudmeny -> Webbplatsinställningar.
• Globala färger. Välj 4 varumärkes färger som dina primära, sekundära, text och detalj färger.
• Globalt typsnitt. Välj en typsnitt grupp och dess storlek för varje typ av text.

8. Elementor Tutorial för nybörjare – Hur använder man det?

8.1. Editor Förklarad

Nu är vi klara med WordPress och börjar Elementor tutorial för nybörjare. Innan vi startar kan vi gå igenom vilka komponenter som finns inne i redigeraren. Det finns två grundläggande kolumner. Som vi kan se i bilden nedan så är de övre och undre actions bars, inklusive widget biblioteket placerade inne i kontrollpanelen (vänstra kolumnen). Den högra kolumnen är live förhandsvisning av sidan du arbetar med.

Kontrollpanelen har drag and drop widgets vilket betyder att du kan designa en sida i förhandsvisningen och allt som dyker upp där är en representativ bild om hur din faktiska hemsida ser ut. Den lilla “dölj panel” knappen låter dig bestämma själv ifall du vill se panelen eller maximera den högra kolumnen. Det finns även flera funktioner i nedre action bar:

1. Inställningar. Inställningarna för en sida eller ett inlägg.
2. Navigator. Visar en navigationspanel som hjälper dig att välja element på sidan.
3. Historik. Det här verktyget låter dig ångra ändringar som du gjort.
4. Responsivt läge. Här kan du se hur din hemsida ser ut på andra enheter såsom stationär data, mobiler och läsplatta. Du behöver se till så att din hemsida fungerar och ser bra ut i alla dessa tre lägen.
5. Förhandsgranska ändringar. Den här funktionen låter dig se hur din hemsida ser ut live.
6. Publicera. Här klickar du för att spara dina ändringar.
7. Spara alternativ. Extra alternativ för att spara din hemsida. Här kan du exempelvis spara din hemsida utan att publicera den.

8.2. Sektioner, Kolumner och Widget förklarade

En sida byggd i elementor består av tre grundelement: sektioner, kolumner och widgets. Sektioner är själva omslaget och sidor består av flera olika sektioner. Inne i sektioner finns det kolumner. En sektion kan därmed bestå av en eller flera kolumner. Nästa lager är att det finns widgets inne i kolumnerna som är visuella effekter som kan appliceras en och en. Exempel på widgets är heading, foton, sociala medier o.s.v.

Det finns mer än 80 stycken widgets att välja mellan i Elementor Pro. Fotot här under visar hur sektioner, kolumner och widgets ser ut.

8.3. Sektioner, kolumner och widgets egenskaper

• Layout egenskaper. Detta hanterar storleken av sektionerna och kolumnerna.
• Design egenskaper. Det här kontrollerar utseendet d.v.s. färg, bakgrundsbild, border, skuggor och typografi.
• Avancerade egenskaper. Erbjuder extra avancerade egenskaper t.e.x. marginaler och fyllning av ett element.
• Content egenskaper. Lägger till content i widgets t.e.x. bilder och text.

8.4. Extra Tips

Det finns extra funktioner som visas när du högerklickar på ett specifikt element. Ett användbart verktyg här är att kunna duplicera och kopiera den designen.

Bilden här nedanför visar en boxmodell som ett element har. Denna modell är något du måste ha i åtanke när du designar din sida.

• Content – Content/innehåll som elementet innehar såsom text och bilder.
• Fyllning – Ger en area runt om innehållet som är transparent.
• Border – En border som går runt om fyllningen och innehållet.
• Marginal – Ger en area runt om bordern som också är transparent.

Kom ihåg att varje fyllning, border och marginal har sidor uppe, nere, höger och vänster.

9. Elementor Tutorial – Skapa en header

Mallar -> Theme Builder -> Lägg till ny – > Välj mall typ -> Skriv ett namn för mallen -> Skapa mall -> Välj en mall -> Infoga. I det här steget ska du skapa en mall för din hemsida. Följ stegen nedanför.

Börja anpassa genom att bygga upp strukturen i headern. Här kan du bestämma hur många sektioner du behöver, hur många kolumner och inne i kolumnerna bestämmer du vilka widgets och vilka funktioner de ska ha. Sedan kan du börja designa utseendet eller stilen för varje element. Det absolut sista steget är att klicka på “spara alternativ” och välj “visa villkor”.

Lägg till villkor -> Inkludera -> Hela webbplatsen -> Spara och stäng. Nu är det dags för att lägga in headern till hela webbplatsen. Du kan skapa flera olika headers för olika typer av sidor och inlägg. Men detta är grunden som visas på alla sidor till en start.

10. Elementor Tutorial – Skapa footer

Mallar -> Theme Builder -> Sidfot -> Lägg till ny- > Välj sidfot -> skriv namn för mallen -> Skapa mall -> Välj mall -> Infoga -> Starta design -> Spara Alternativ -> Visa villkor. Det här steget är väldigt likt det tidigare steget när du skapade mallen till headern. Bara repetera de stegen för att skapa din footer mall.

11. Elementor Tutorial – Bygg sidor

Pages -> Hem -> Redigera med Elementor. Vi har redan designat mallar till både header och footer. Nu är det dags att skapa fundamentet för din hemsida vilket är sidor. I det här steget ska du designa varje sida som du skapat tidigare Hem, Om, Kontakt o.s.v. Arbetet är liknande med de du gjort tidigare under header och footer mallarna. Den enda skillnaden är att sidor innehåller fler sektioner som ska bli designade. Designa sektionerna en och en, för varje sektion gör du:

• Infoga sektion med antalet kolumner som du behöver.
• Drag & drop widgets till kolumnen du vill att den ska vara i.
• Infoga content i widgets exempelvis foton eller text.
• Ändra egenskaperna / stilen för sektionerna, kolumnerna och widgets.
• När du är nöjd med designen och klicka på publicera / uppdatera.
• Din hemsida är nu live.
• Repetera dom här stegen för varje sida som du skapat.

12. Elementor Tutorial – Bygg inlägg-mallar

Inlägg -> Lägg till ny -> Namnge inlägget -> Lägg in content -> Publicera. Repetera dessa steg för att skapa det antalet inlägg som du vill ha.

Mallar -> Theme Builder -> Singel -> Lägg till ny -> Välj Singel typ och namnge mallen -> Skapa mall -> Välj dom mallar -> Infoga. Detta är återigen en repetition av av hur man skapar mallar men specifikt för inlägg.

Det är dags att publicera mallen för dina inlägg. Design steget är det samma som under de tidigare processerna.

Sparalternativ -> Visa villkor -> Inkludera -> Inlägg -> Alla -> Spara & Stäng. Applicera mallen till alla inlägg som du har skapat. Du kan skapa flera olika mallar för olika typer av inlägg ifall du vill.

13. Elementor Tutorial – Kolla den responsiva designen för mobiler

Responsiv design menar designen av hemsidan när den är laddad i en annan enhet.
Ändra till olika enheters förhandsvisning för att kolla hur designen ser ut. Du behöver se över designen för olika läsplattor och mobiler. Du behöver göra det från både header/footer (punkt 7) , inlägg (punkt 9), sidor ( punkt 11) och inlägg (punkt 12).

Anpassa egenskaper för varje enhet. Klicka på iconen responsivt läge och välj ett av alternativen. När du har gjort det klickar du på ett specifikt element (sektion, kolumn, widget) för att sedan klicka i den översta action baren på avancerade inställningar. Där kommer det upp olika värden på elementet. Här kan du anpassa border, marginal, storlek o.s.v. så att det ser bra ut på den specifika enheten. Vi har även skrivit en artikel endast gällande responsiv design som du hittar här.

Nu är det dags för dig….

Det var allt för denna Elementor tutorial för nybörjare. Så försök bara att repetera dessa steg för att uppdatera dina sidor och inlägg. Repetera flera gånger om för att göra processen snabbare och lättare. Det är dags för dig att pröva dig fram och hitta din struktur och design så att den passar just nu hemsida. Våra erfarna utvecklare hjälper dig gärna ifall du stöter på problem. Ifall du vill få en mer hands-on utbildning inom detta så får du gärna kontakta oss så berättar vi precis hur din framtida hemsida kan se ut ifall den byggs genom Elementor.