Handledning för WordPress Elementor | En steg-för-steg-guide 2024

Du vill komma igång med Elementor och letar efter en WordPress Elementor handledning? Din sökning slutar här. I den här artikeln kommer jag att informera dig om allt du behöver veta om Elementor.

Från att installera den till att skapa en mycket snygg sida, kommer alla dina tvivel att lösas om du läser artikeln. Jag försäkrar dig; läsningen kommer inte att gå förgäves!

Men du behöver ett plugin för webbplatsbyggare för att ge din webbplats en professionell touch.

Hur får man det? Tja, jag använder Elementor för det. Elementor gör det extremt enkelt för mig att skapa en professionell webbplats med en enkel dra och släpp-funktion. 

Nyfiken på att veta mer om Elementor, kolla in min detaljerade Elementor recension.

Hur man installerar Elementor på WordPress

Tja, det finns två sätt på vilka du kan installera Elementor på WordPress. 

• Via den officiella hemsidan för Elementor

Gå till Elementors officiella webbplats och klicka på knappen Gratis nedladdning som visas på webbplatsen. 

Så fort du klickar på knappen Gratis nedladdning visas ett popup-fönster för att prenumerera på Elementors webbplats, och när du väl gör det kommer plugin-programmet automatiskt att börja ladda ner.

Du hittar en zip-fil nedladdad på din bärbara/dator. Gå nu till din WordPress-instrumentpanel och klicka på avsnittet Plugins > Lägg till nytt plugin > Ladda upp plugin

Välj Elementor-filen och ladda upp den till WordPress.

• Via WordPress-instrumentpanelen

Du kan också installera Elementor-plugin direkt från WordPress-instrumentpanelen. Gå bara till Plugin och sedan Add New Plugin

I det övre högra hörnet hittar du ett sökfält, skriv Elementor i sökfältet. Det allra första resultatet är vad du behöver installera i din WordPress. Klicka bara på installera och vänta på att plugin-programmet ska installeras. Aktivera insticksprogrammet så har du en fantastisk webbplatsbyggare redo för driftsättning.

Nu när du har Elementor installerat i din WordPress-instrumentpanel, låt oss ta en titt på funktionerna det ger.

Elementor-funktioner och deras användning för att bygga en webbsida

Listan över funktioner som Elementor tillhandahåller är aldrig sinande, så jag kommer att diskutera många viktiga funktioner i Elementor. Se till att du läser dem och prova dem senare.

Det finns två planer för Elementor The Free och The Pro. Som namnet antyder för Pro-planen måste du spela, men det finns flera funktioner som kommer med dess gratisplan också.

Jag börjar med att diskutera funktionerna i gratisplanen först, följt av Pro.

Elementor Free Plan-funktioner

Nödvändiga funktioner:

• Dra och släpp

Dra och släpp-funktionen i Elementor är mycket snabb och hjälper dig att göra designwebbsidor snabbare. Från att skapa en webbsideslayout till att finjustera, allt kan göras genom att bara dra och släppa.

Du behöver inte byta flik eller ändra sida för att designa dina sidhuvuden och sidfötter. Med Elementor kan du göra det på samma sida där din primära webbsida är.

Du kan kopiera och klistra in, till och med duplicera stilen eller funktionen du vill använda. Detta sparar tid för att bygga om samma funktion om och om igen.

Med sökfältsalternativet som tillhandahålls av Elementor, kan du enkelt navigera genom webbplatsen och nå önskad flik på några sekunder. Den här funktionen är verkligen användbar när du har en mycket lång sida att bygga.

Det finns tre alternativ för att spara din design, från att ta bort och få en säkerhetskopia. Du kan göra om/ångra de mönster du har gjort. Detta ger dig möjligheten att sortera A/B-testa sidan med dina observationer. 

Du kan besöka alla versioner i revisionsfliken, dvs. Du kan ta en titt på alla typer av design du har provat hittills på din webbsida och välja en tidigare version också om du inte gillar din nuvarande webbsida. 

Vill du testa många olika funktioner och se vad som fungerar? Inga problem med Elementor; du kan designa sidan i utkastläget, prova allt och ta sidan senare när du är helt redo att publicera sidan.

Hur man använder Elementor Dra och släpp-funktionen

Alla dra och släpp-funktioner är tillgängliga på vänster sida av sidan så snart du skapar en sida.

Efter att ha skapat en sida på WordPress och gett den en titel klickar du bara på redigera med Elementor, vilket tar dig till Live Editor för Elementor, som ser ut som bilden nedan.

I den andra bilden ovan kan du titta på dra och släpp-alternativen till vänster på sidan. Det finns många widgets du bara behöver scrolla ner, eller så kan du också söka efter en widget med hjälp av sökfältet överst.

• Mallar

Du får inbyggda designmallar med Elementor. Inte bara 5 eller 10, utan Elementor ger dig 100+ designmallar som är gratis att använda och mer när du uppgraderar till Pro-versionen.

Hur man väljer önskad mall för Elementors mallbibliotek

När du först ser att Elementor-byggarsidan öppnas, kommer du att se något av det slag som visas nedan:

Bilden är tagen från Elementors webbplats och är ganska självförklarande.

Så snart du klickar på alternativet Mapp kommer du att se en popup som visas nedan.

• widgets

Dra och släpp-widgetarna som följer med Elementor är otaliga. Några av dem är:

• Inre sektion: Låt oss dela upp en sektion i två.
• Rubrik: Släpp det här fältet på din webbsida för att koppla in en fängslande rubrik
• Bild: Lägg upp bilder på din webbsida med hjälp av denna widget
• Textredigerare: Mata in text på din webbsida med hjälp av en textredigeringswidget
• Video: Du kan använda en videowidget för att placera kvalitetsvideor på din sida. Det kommer att öka användarupplevelsen
• Knapp: Uppmaning är mycket viktigt för nästan hela webbplatsen, med knappar kan du sätta uppmaningen till åtgärder på din sida och länka dem till din produktmålsida.
• Stjärnbetyg: Stjärnbetyg är fördelaktigt för alla e-handelswebbplatser för att ge ett betyg till flera olika produkter den har att erbjuda.
• Divider: Hjälper din webbsida i indraget och genererar vitt utrymme för att öka användarupplevelsen.
• Ikoner: Med ikonwidgeten kan du lägga till catchy ikoner för sociala medier samt olika tjänster för att få din sida att se mer attraktiv ut.
• Räknare: Skapa en nedräkningstimer för dina produkter eller begränsade tilläggstjänster för att skapa brådska.
• Rekommendationer: Lägg till rekommendationer om dina produkter och tjänster för att skapa förtroende hos dina webbplatsbesökare.

Utöver detta finns det många andra widgets som bildkarusell, grundläggande galleri, flikar, kortkoder, HTML, menyrad etc. Se till att du tittar på alla funktioner efter att du har installerat plugin på WordPress.

Ta en titt på några av widgetarna som Elementor har nedan i bilden.

Hur man använder Elementor Widgets

För att använda Elementor Widgets:

Gå till instrumentpanelen i Elementor och titta på vänster sida av sidan. Det finns ett antal widgets som du kan dra och släppa på din webbsida och börja ditt arbete.

• Responsiv design och redigering

Med mobil-först-indexregeln som kommer fram i rampljuset ser Google till att den mobilvänliga sajten bara rankas högre på Google, och samma sak är nu fallet med andra SERP. 

Med Elementor behöver du inte oroa dig för mobilvänlighet eftersom alla mallar, oavsett om de är gratis eller betalda, är mobilresponsiva samt responsiva för surfplattor och stationära datorer. Du kan också redigera vilka funktioner dina användare kommer att se när de kommer åt från mobil eller dator. 

Du kan ge dem olika upplevelser på båda enheterna, även om denna praxis inte rekommenderas eftersom det ibland kan skapa förvirring i dina användares sinnen om varumärket.

Hur du ser dina webbsidors mobila respons

Längst ner i webbsidesbyggaren, i det nedre vänstra hörnet, ser du tre ikoner som har ett alternativ för att se din webbsida via dator, surfplatta och mobil. Webbplatsen kommer att se exakt likadan ut för andra användare efter att du har publicerat din webbplats.

Arbetsflödesfunktioner:

• Inget kodningskrav

Du behöver inte vara expert eller ens veta lite om kodning när du använder Elementor. Alla widgets som nämns ovan är dra och släpp, och du kan enkelt skapa en avancerad och snygg webbsida med dem. 

Elementor själv tar hand om kodningsdelen. Inte bara detta, koden som används är optimerad och förkortad så att den minskar laddningstiden för din webbsida - en mycket viktig faktor för att rankas i toppen.

• Navigatorfältet

Med hjälp av navigering kan du se strukturen du har designat på webbsidan, det vill säga sekvenseringen av din sida och flödet. Du kan ändra, ta bort och duplicera widgetarna om du vill också via navigeringsfältet.

Hur man använder navigationsfältet

För att använda Navigator, högerklicka bara på baksidan av din webbsida som öppnats med Elementor och klicka på Navigator. En popup kommer att visas, som visas i bilden nedan.

• Snabbtangenter

Snabbtangenter är genvägstangenterna till den stora widgeten som finns i Elementors instrumentpanel. Ta en titt på bilden för att se några av de förinställda snabbtangenterna.

• Inline redigeringsfunktion

Med Elementor behöver du inte skriva ditt innehåll någon annanstans och kopiera och klistra in och redigera stylingen av det. Du kan skriva direkt på WordPress-instrumentpanelen med önskad stil och spara din värdefulla tid.

Design egenskaper

• Globala typsnitt

Med hjälp av Elementor kan du ställa in en viss typsnittsstil för hela din webbplats med bara ett klick. Det spelar ingen roll om det är en rubrik, ett stycke, ett citat eller till och med en uppmaning. 

• Globala färger

På samma sätt, eftersom det globala teckensnittet är inställt, kan du ställa in färgen på hela webbplatstexten som densamma om det behövs.

• Bakgrundsgradienter

Med funktionen gradientfärg kan du lysa upp bakgrunden du ställer in för varje block och till och med din hemsida. Dessa gradientfärger gäller för varje sida du har på din webbplats.

• Bakgrundsvideor

Du kan använda videor som bakgrund med Elementor. Videor i bakgrunden kan verkligen lysa upp din webbsida.

Hur man använder designfunktioner i Elementor

Alla funktioner som nämns ovan kan enkelt hittas i Elementors instrumentpanel, och du kan använda dessa genom att bara klicka och testa vad som ser bra ut på din webbsida.

• Övriga funktioner
• Använd bakgrundsöverlagring
• Lägg bildspel i bakgrunden
• Skapa en duk för att få din sida att se levande ut
• Använd blandningslägen
• CSS-stylingfilter
• Formdelare
• Box skugga
• Ikoner
• Exportera SVG-ikoner från andra webbplatser

Layoutfunktioner

Du kan ändra webbsidans layout och optimera den för att se bra ut med olika funktioner som Elementor tillhandahåller, liksom sektionsbredd och -höjd, kolumnbredd, mellanrum och dess position.

Du kan också justera marginalerna och vadderingen, vilket är en mycket viktig funktion att ha på en webbsida. 

Elementor Pro Plan-funktioner

Essentials

Förutom gratisfunktionen har Elementor Pro ytterligare två funktioner att erbjuda.

1. Popup-byggare

Du kan skapa popup-fönster för registrering, för ett tidsbegränsat erbjudande, och även avsluta popup-fönster med avsikter för att öka din försäljning och göra din sida mer attraktiv.

Funktionen, liksom andra widgets, finns i Elementors instrumentpanel.

Med Popup-byggaren kan du bygga följande popup-fönster:

• E-post prenumeration
• Inloggningsformulär popup-fönster
• Marknadsförings- och försäljningsbanner popup-fönster
• Bly fånga
• Innehåll låser och visar popup-fönster
• Meddelanden
• Exit Intent
• Popup-fönster av typen välkomstmatta
• Relaterad produkt och merförsäljning

2. Temabyggare

Med Elementor Pro har du full kontroll över alla funktioner du använder på din webbplats. Du får designa 404-sidorna och dirigera dina användare till den sida du väljer. 

Du kan hantera sidhuvudet och sidfoten på samma sida som du designar på. Med kraftfull WooCommerce-integration kan du också optimera dina produktsidor.

Design egenskaper

1. Anpassad CSS

Med varje widget du lägger till kan du lägga till ett anpassat CSS-kodavsnitt för att göra innehållet mer personligt och attraktivt. Men för att använda den här funktionen bör du ha en anständig kunskap om CSS. 

Att använda den utan några förkunskaper kan gå söderut också. Så om du inte har färdigheterna bör du hålla dig borta från Custom CSS-funktionen.

2. Rörelseeffekter

Du kan lägga till fantastiska animationer och ge din webbplats en tecknad typ. Detta hjälper till att attrahera en specifik målgrupp och kan ibland vara mycket fördelaktigt. 

Hur man använder designfunktionen i Elementor

Tja, det är inte raketvetenskap. Precis som andra widgets kan du bläddra i instrumentpanelen och söka efter dem eller bara skriva in widgetnamnet i sökpanelen.

Marknadsföring

Dessa funktioner är de som saknas i den fria versionen av Elementor.

• Form -widget

Med Elementors formulärbyggare kan du göra olika ändringar och göra dina formulär intressanta och attraktiva att fylla i.

• Välj den layout du vill ha och avstånd ganska enkelt.
• 10+ fält att välja mellan, som du vill ha i ditt formulär.
• Välj bland många färger och typografi som passar och matchar webbsidans design och färgschema.
• Du kan också skapa dynamiska formulär
• Om du behöver ett långt formulär med formulärbyggare av Elementor kan du bygga det och dela upp det i flera steg så att användarna fyller i det på ett enkelt sätt.

• Testimonial karusell widget

• Du kan använda de fördesignade mallarna som följer med Pro-versionen av Elementor och göra en fantastisk rekommendationskarusell för ditt företag för att få fler konverteringar.
• Anpassa karusellens innehåll och layout. Ha full kontroll över karusellens utseende och inriktning.
• Anpassningsmallarna i Elementor Pro är enkla att använda och ger en användarvänlig upplevelse för både den som bygger den och den som ser den.

Hur man använder Testimonial Carousel Widget i Elementor Pro

• Sök efter Testimonial Slider i instrumentpanelens sökfält. Öppna widgeten och du kan börja med att skapa skjutreglaget direkt. Det finns två skal att välja mellan standarden och bubblan. Välj den du behöver enligt stylingen.
• Justera och slutför layouten för dina vittnesmål, vilket kan göras via 5 alternativ Bild inline, bild staplad, bilden ovan, bild vänster och bild höger.
• Välj stil och design enligt ditt färgschema och lägg till innehåll i reglaget.
• Du kan spela upp bilderna automatiskt på skjutreglaget, pausa det när användarna klickar på det eller ställa in en viss tid på alternativet för bildbyte. Jag föredrar att använda paus på interaktionsalternativet för mina rekommendationsreglage.
• Åtgärdslänkar

Du kan ansluta din webbplats till WhatsApp, google kalender och många fler appar med Elementor Pro.

Hur man använder åtgärdslänkar i Elementor Pro

• Gå till Elementor instrumentpanelen och sök efter länkfält, vilket är en av Pro-widgetarna Elementor har.
• Välj det dynamiska alternativet som är tillgängligt i det övre högra hörnet av widgetens popup-fönster.
• Välj kontaktadressen under åtgärdsalternativet.
• Lägg till alla detaljer som widgeten frågar om, så är du redo att integrera din kontaktplattform med din webbplats.

Theme Builder -funktion

• Dynamiskt innehåll
• Använd oklanderlig integration för att skapa en fantastisk dynamisk webbsida.
• Du kan lägga till dynamiska färger, bilder, till och med webbplatslogotyper och mycket mer på din webbsida.
• Det bästa är att du kan spara layouten för det dynamiska innehållet du skapade och använda det var som helst på hela webbplatsen.

Hur man använder dynamiskt innehåll med Elementor Pro

Jag kommer att visa exemplet med att använda en textredigerare och göra innehållet dynamiskt. Se till att du ser alla andra widgets och prova dem.

1. Öppna en textredigerare och skriv in den text du vill ha på din webbsida. Klicka nu på ikonen i det övre högra hörnet av redigeraren, som visas i bilden nedan.
2. När du klickar på ikonen ser du en lista med alternativ som visas via en rullgardinsmeny. Dessa klassificeras i post, arkiv och webbplats. Välj det alternativ du vill ha och påbörja ditt arbete omedelbart.
3. Nu för att ytterligare redigera rubriken på din sida, bör du klicka på en ikon, som är en skiftnyckel, som visas i bilden nedan.

I rutorna som visas i bilden ovan, dvs. före, efter och reserv, måste du sätta titeln före ändringen, en titel som ska vara efter ändringen och konsekvent innehåll som kommer att visas i stället för dynamiskt innehåll när det inte finns före och efter titeln.

Andra temabyggarfunktioner i Elementor Pro

• Visningsvillkor: Du kan bestämma vad som ska visas och var du vill visa
• Sidhuvud och sidfot: Bara genom att dra och släppa kan du anpassa din webbsidas sidhuvud och sidfot
• Sticky header: Lägg till en sticky header på specifika sidor eller för hela din webbplats globalt.
• 404-sida: Designa en anpassad 404-sida och omdirigera dina användare och publik till den sida du önskar.

Temainnehåll

• Navigationsmenyradswidget

• Det finns många stilalternativ som du kan välja mellan för din navigeringsfält.
• Dessa stilar är lyhörda för alla enheter, och du kan se dem på mobilversionen och göra nödvändiga ändringar om det behövs.
• Du kan animera din navbar med animering och hovringseffekter. Det lyser verkligen upp din sida.
• Du kan välja hur menyn ska placeras, dvs horisontellt, vertikalt, se den som helskärm, kanske prova hamburgeralternativet.

Hur man använder navigeringsmenyradens widget

1. Gå till instrumentpanelen och sök efter menyraden
2. Du kan ställa in din meny till horisontell, vertikal eller en rullgardinsmeny enligt stilen som ser bra ut på din webbplats.
3. Du kan också lägga till enkel och dubbel linje under varje menyinnehåll för att markera och till och med ändra färgen på texten via instrumentpanelen.

• Sök widget

Sökwidgeten kommer med tre skal: standard-, minimal- och helskärmssökningswidgeten.

Du kan justera sökfältets design samt knappen för att matcha din webbsidas stil.

Hur man använder sökfältet med Elementor Pro

Gå till Elementors instrumentpanel och leta efter sökfältswidgeten, välj den stil du vill ha, standard, helskärm eller minimal och ändra typografin och färgerna i sökfältet för att matcha ditt färgtema.

• Andra temainnehållsfunktioner du får med Elementor Pro

• Inläggswidget: Ändra utseendet på sidofältet genom att placera dina senaste inlägg där.
• WordPress-kommentarwidget: Med denna widget kan läsarna kommentera inlägget du har skrivit.
• Portföljwidget: Om du har många portföljer att visa, använd den här portföljwidgeten för att visa dem i en innovativ och attraktiv stil.

Alla dessa funktioner är tillgängliga i Elementors huvudinstrumentpanel, liknande andra widgets. Se till att du har en titt på alla dessa funktioner.

Elementor Pro-priser

Användarrecension 

Snabblänkar:

• Handledning för Elementor Pro
• BÄSTA ELEMENTORTILLÄGG
• Elementor Meny Anchor
• Duda vs Elementor

Vanliga frågor om WordPress Elementor Tutorial

✅Finns integrationerna tillgängliga med den kostnadsfria versionen av Elementor?

Är integrationerna tillgängliga med den kostnadsfria versionen av Elementor?

🤷‍♀️ Hur är det med Elementors kundtjänst?

Du kan välja att få Elementors kundtjänst med deras betalda såväl som deras gratisplan. Elementor behandlar alla sina kunder på samma sätt och samma procedur. Du kan kontakta dem via e-post eller ringa dem på det avgiftsfria numret. Det är tillrådligt att du mailar dem först, eftersom deras tekniker sedan kommer att ringa dig beroende på hur allvarlig problemet är.

👍Vad är den fria Elementor- eller Pro-versionen att föredra?

Det skulle hjälpa om du började med den kostnadsfria versionen av Elementor, skapar de grundläggande webbsidorna och gör din webbplats hel. Efter att du har sett att din webbplats får mycket trafik kan du byta till Elementor Pro eftersom detta kommer att öppna dörrar till oändliga möjligheter och även hjälpa dig i produktmarknadsföring med dess kraftfulla integrationer.

⁉️Hur lätt är det att använda Elementor / Är Elementor bra för nybörjare?

Elementor är den enklaste sidbyggaren att använda, men den kommer också med mest funktionalitet gratis. I grund och botten är det det perfekta gör-det-själv-alternativet för alla som vill skapa fantastiska webbdesigner utan någon kodning, HTML eller CSS-expertis.

☑️Är Divi bättre än Elementor?

Både Elementor och Divi tillhandahåller sofistikerade sidskapande funktioner. Elementor är tillgängligt gratis, och en PRO-utgåva är tillgänglig för $49. Divi kostar $89 per år och låter dig skapa ett oändligt antal webbplatser. Medan Divi Builder är intuitivt är Elementor snabbare att arbeta med. Vi rekommenderar Elementor.

👍Vilket är bättre Beaver Builder eller Elementor?

Beaver Builder saknar vissa av de mer sofistikerade anpassningsfunktionerna som finns i Elementor Pro och andra lösningar som Divi Builder men lyser i andra. Användargränssnittet laddas snabbt och har en enkel, lättförståelig stil. Detta påskyndar processen att skapa unika layouter. Vi rekommenderar Elementor.

📓Vilket är det bästa tillägget för Elementor?

Det finns mycket, men om du är en Elementor-användare som vill utöka funktionaliteten för den grundläggande sidbyggaren med kreativa komponenter och widgets, är Essential Addons värt ett försök. Dessutom inkluderar Essential Addons robust kundhjälp i form av livechatt och biljettsupport för att hjälpa dig att lösa eventuella problem.

Läs också:

• Bäverbyggare vs Divi
• Bäverbyggare vs Elementor

Slutsats: WordPress Elementor Tutorial 2024

En av de ledande programvara för webbdesign, Elementor, är en pålitlig och levande plattform att bygga din webbplats på. Från att skapa en grundläggande bloggsida till att skapa en snygg och hisnande produktmålsida, allt kan göras med Elementor.

Pro-versionen av Elementor har oändliga funktioner att arbeta med och ta din webbplats till en ny nivå. Det ger dig friheten att ha total kontroll över din webbplats också.

Du behöver inte vara en kodare för att använda Elementor. Att använda Elementor är lika enkelt som att lära sig att klicka och dra och släppa funktioner.

Ja, det tar lite tid att se alla funktioner och veta vilka funktioner som är användbara för din webbplats, men den tid du ägnar åt Elementor kommer att vara värd varje bit, det kan jag försäkra dig.

Så ge Elementor ett försök och låt mig veta din upplevelse genom att kommentera nedan! 

Populära videor från Elementor

Elementor på sociala medier

Page Builder Summit 2021 (@summit_camp) börjar imorgon! Skaffa din GRATIS biljett och prata med över 35 branschexperter inklusive @bpines1 . Kul att få sponsra detta fantastiska evenemang. Vi ses där! 💻🎉https://t.co/gDtFpUJLBH

— Elementor (@elemntor) Maj 9, 2021

Stig åt sidan och välkomna vår showcase för april 2021. 🏆🌷 Den här månaden applåderar vi 10 designbyråer från hela världen. Denna mångsidiga samling står för Elementors webbskapande talang runt om i världen. 🌎 https://t.co/bwwOUDQCuu

— Elementor (@elemntor) Maj 19, 2021