Vill du upptäcka och förstå hur Elementor-gränssnittet ser ut? Den här guiden är för dig.
Att designa en webbplats med ett professionellt utseende var inte för alla, speciellt vi alla hade intrycket att vi absolut måste vara proffs på kodning och webbdesign.
Nuförtiden ser vi nya verktyg växa fram för WordPress-ekosystemet, för att kunna erbjuda en allt enklare lösning för att designa en webbplats inom räckhåll för även de mest nybörjare.
När det gäller utformningen av WordPress-layouter var vi redan tvungna att skicka in plugin-programmet Visual Composer, vilket verkligen är ett av de bästa verktygen när det kommer till layoutdesign.
Det bör dock noteras att denna lösning inte passar alla. Det är därför vi i denna handledning introducerar dig till Elementor WordPress-plugin, som är en freemium WordPress-plugin (gratis, men kan utökas under prenumeration).
Innehållsförteckning
Var hittar du Elementor för WordPress
Vi överväger på allvar att få dig att se pluginens potential, och den gratis lösningen hjälper dig att komma igång utan att betala ett öre. Den här gratis lösningen finns tillgänglig på WordPress.org. Eftersom det är ett WordPress-plugin är det installerat som alla andra plugin från instrumentpanelen.
Om plugin lyckas fullständigt tillfredsställa dig, kommer du att kunna få fullständig licens med alla funktioner på webbplatsen officiell elementor.
Huvudfunktioner i Elementor
Elementor är en av de mest populära sidbyggarna för WordPress, och av goda skäl. Med sina robusta funktioner och intuitiva gränssnitt erbjuder den en kraftfull lösning för att skapa professionella webbplatser utan behov av kodningskunskaper. Här är en översikt över huvudfunktionerna i Elementor som gör det oumbärligt för alla WordPress-användare:
Dra och släpp Visual Editor : Elementor erbjuder en intuitiv visuell redigerare som låter dig designa sidor genom att dra och släppa element. Du kan se förändringar i realtid, vilket gör det mycket lättare att anpassa din webbplats.
Rich widgets : Med ett brett utbud av widgets tillgängliga låter Elementor dig lägga till olika element på dina sidor, som knappar, gallerier, karuseller, formulär och mer. Pro-versionen utökar denna funktionalitet med avancerade widgets som kontaktformulär, skjutreglage och portföljer.
Fördefinierade mallar : Elementor erbjuder ett bibliotek med färdiga mallar som kan användas som utgångspunkt för dina sidor. Dessa mallar täcker olika stilar och behov, vilket gör det enkelt att skapa estetiskt tilltalande och funktionella sidor.
Temaredaktör : Med Elementor Pro kan du anpassa inte bara innehållet på dina sidor, utan även sidhuvuden, sidfötter och andra övergripande delar av din webbplats tack vare den inbyggda temaredigeraren. Detta gör att du kan skapa visuell konsekvens över hela din webbplats.
Skapa inläggsmallar : Funktionen för att skapa inläggsmall låter dig designa layouter för specifika inläggstyper, som blogginlägg eller WooCommerce-produkter. Det här alternativet är särskilt användbart för att skapa konsekventa design för olika typer av innehåll.
Popup-byggare : Elementor Pro innehåller en popup-byggare som låter dig skapa anpassade popup-fönster för annonser, registreringsformulär eller andra besöksinteraktioner. Du kan definiera visningsvillkor för att exakt rikta in dig på din målgrupp.
Avancerade layoutkontroller : Elementor erbjuder avancerade kontroller för typografi, marginaler, avstånd och responsiv layout. Du kan justera layouten på din webbplats för olika enhetstyper, vilket säkerställer en optimal användarupplevelse på mobil, surfplatta och dator.
Support och dokumentation : Elementor ger omfattande support, med detaljerad dokumentation, online handledningar och en aktiv community. Pro-användare drar nytta av direkt premiumsupport, vilket säkerställer snabb och effektiv hjälp med att lösa eventuella problem.
Tillägg och integrationer : Elementor är kompatibelt med en mängd plugins och integrationer, vilket gör det möjligt att lägga till ytterligare funktionalitet på din webbplats. Oavsett om du vill integrera marknadsföringsverktyg, SEO-plugins eller e-handelslösningar, gör Elementor det enkelt att utöka din webbplats kapacitet.
Här är en tabell som sammanfattar Elementors funktioner.
| särdrag | Elementor gratis | Elementor Pro |
| Dra och släpp sidredigerare | Ja | Ja |
| Fördefinierade mallar | Ja | Ja |
| Grundläggande widgets | Ja | Ja |
| Pro-widgets | Ej | Ja |
| Redaktör för sidhuvud och sidfot | Ej | Ja |
| Skapa inläggsmallar | Ej | Ja |
| Skapa WooCommerce-mallar | Ej | Ja |
| Popup-byggare | Ej | Ja |
| Stöd för widgetar från tredje part | Ej | Ja |
| Tekniskt stöd | Ej | Ja |
| Marknadsföringsfunktioner (formulär | Ej | Ja |
| Tillgång till premium mallbibliotek | Ej | Ja |
| Avancerade effekter och animationer | Ej | Ja |
| Granskning och säkerhetskopieringsverktyg | Ej | Ja |
| Skapande av formulär | Ej | Ja |
| Avancerad typografikontroll | Ej | Ja |
| Responsiv layoutkontroll | Ej | Ja |
| Tillgång till regelbundna uppdateringar | Ja | Ja |
Observera att detta är en något uttömmande lista över de olika funktionerna som erbjuds av plugin-programmet. Du hittar mer information i utforska deras hemsida.
Kom igång med Elementor
Att komma igång med Elementor är snabbt och enkelt, även om du är ny på att bygga WordPress-webbplatser. Följ dessa steg för att konfigurera Elementor och börja designa dina sidor som ett proffs.
Vi kommer inte att täcka hela installationsprocessen här. Eftersom detta är ett WordPress-plugin har installationsproceduren redan förklarats i en tidigare handledning.
Installerar Elementor
- Få åtkomst till din WordPress Dashboard: Logga in på din WordPress adminpanel.
- Navigera till tillägg: Gå till "Tillägg" och klicka sedan på "Lägg till".
- Sök efter Elementor: Skriv "Elementor" i sökfältet. Du hittar Elementor (gratisversion). För att komma igång, installera och aktivera gratisversionen.
- Installera Elementor: Klicka på "Installera nu" och sedan på "Aktivera" när installationen är klar.
Efter installationen kommer du dock att föras till insticksprogrammets hemsida.
Om du har den här sidan på skärmen har du installerat Elementor-pluginet. Vi använder för närvarande den fullständiga versionen för denna handledning, men gränssnittet bör inte skilja sig alltför mycket från gratisversionen.
Innan jag går vidare till redigeringsgränssnittet kommer jag att bjuda in dig att registrera din licens. Detta är endast giltigt för dem som har valt Pro-versionen.
Om du har gratisversionen kan du komma åt nästa avsnitt. För att registrera din licens kommer du att märka ett meddelande på WordPress som uppmanar dig att registrera din licens.
Så klicka bara på Uppgradera nu för att komma till registreringssidan och klicka på Aktivera.
Du kommer normalt att se din bekräftelsesida om din licens är det Aktiva.
Om du inte kommer till den här sidan uppmanar jag dig att kontakta utvecklarna av plugin-programmet för mer information hjälp med problemet.
Elementor-gränssnitt
Elementors gränssnitt är designat för att ge en smidig och intuitiv användarupplevelse, vilket gör det enkelt att skapa och anpassa dina WordPress-sidor. Här är en detaljerad översikt över huvuddelarna av Elementors gränssnitt, tillsammans med visuella exempel som hjälper dig att bättre förstå varje element.
Arbetsområdet (innehållsområdet)
La ArbetszonEller innehållsområde, är det centrala utrymmet där du bygger och visar din sida. Det är här du lägger till och redigerar widgets och sektioner. Layouten visas i realtid, så att du kan se ändringar när de sker.
Panelen Widgets
Le widgetpanel finns till vänster om gränssnittet. Den innehåller olika element som du kan dra och släppa på arbetsområdet. Widgets är organiserade i kategorier, såsom "Allmänt", "Grundläggande", "Layout" etc., för att göra det lättare att hitta och lägga till element på din sida.
Elementor-widgetgrupper
Elementor Widget Groups är grupper av funktionsblock som Elementor erbjuder. Antalet avsnitt beror på om du använder den fullständiga versionen och om du använder WooCommerce, Yoast SEO eller andra kompatibla plugins.
Beroende på dessa förhållanden kommer du att ha fler eller färre avsnitt i ditt gränssnitt. Eftersom vi använder den fullständiga versionen med WooCommerce-plugin aktiverat, är det så här vårt gränssnitt ser ut.
Översta verktygsfältet
La översta verktygsfältet innehåller viktiga alternativ som:
- Logotyp : Visar i en meny funktioner som: temabyggare, historik, kontoinställningar, kortkommandon, etc.
- Knapp för att lägga till element: Låter dig visa panelen med widgets som ska infogas på sidorna
- Knapp för webbplatsinställningar: Visar många globala inställningar för webbplatsalternativ
- Strukturknapp: Låter dig se den övergripande strukturen på din sida och navigera genom den utan bekymmer. Om din sida har flera kapslade avsnitt kommer denna funktion att vara till stor hjälp för dig.
- Sidrubrik/artikel: Visar titeln på sidan eller artikeln samt dess status (utkast, publicerad, etc.)
- Mobil navigationsmeny : Låter dig växla mellan skrivbord, surfplatta och mobilvy. Detta är viktigt för att säkerställa att din design är lyhörd och väl anpassad för alla enhetstyper.
- Sidinställningar : Åtkomst till sidinställningar, inklusive layoutalternativ och stilinställningar.
- Publicera/Uppdatera : Sparar och publicerar ändringar som gjorts på sidan.
- Prévisualisation : Symboliseras av ett öga och låter dig se hur din sida beter sig i en verklig situation.
Så till vänster har du de olika widgetarna som pluginet erbjuder och till höger har du realtidsförhandsvisningen av dina ändringar. I den här handledningen använder vi det kostnadsfria Hello-temat från Elementor.
Hur man använder Elementor
Skapa din första sida
Elementor fungerar på WordPress-sidor och inlägg. Oavsett om du använder det klassiska gränssnittet eller det nya Gutenberg-gränssnittet, kommer du att se en knapp som uppmanar dig att använda Elementor-byggaren.
- Skapa en ny sida: Gå till "Sidor" och klicka på "Lägg till".
- Namnge din sida: Ge din sida en titel och publicera den.
- Redigera med Elementor: Klicka på knappen "Redigera med Elementor" för att starta Elementors visuella redigerare.
I praktiken behöver du inte alltid redigera dina inlägg med Elementor. Jag inbjuder dig därför att endast använda plugin på sidor.
Genom att klicka på knappen kommer du åt Elementors designgränssnitt som ger en känsla av déjà vu (för dem som använder WordPress Customizer).
Hur man lägger till widgets till Elementor Editor
Dra widgets som titlar, bilder, knappar och mer från den vänstra panelen till innehållsområdet. Du kan justera inställningarna för varje widget genom att klicka på den.
Anpassa widgets: Klicka på widgeten för att öppna dess anpassningsalternativ. Du kan justera text, bilder, färger, storlekar och mer.
Använd mallar: För att påskynda processen, använd de fördefinierade mallarna. Klicka på mappikonen för att komma åt mallbiblioteket, där du kan välja en mall och importera den med ett klick.
Praktiska fall
Hur man placerar ett Elementor-block
När du expanderar en sektion hittar du Elementor-widgets. De olika Elementor-widgetarna placeras med "Drag & Drop" i det markerade området med streckade linjer.
Hur man väljer layout för en sektion i Elementor
Innan du lägger till en Elementor-widget bör du tänka på att välja en layout genom att klicka på "+"-knappen i det markerade avsnittet.
Beroende på dina behov väljer du den layout som passar bäst.
När du väl har valt en layout har du en representation av det avsnittet på samma markerade område. Det här avsnittet kommer att visa samma antal kolumner som motsvarar ditt val. I mitt fall valde jag en kolumn med 2 kolumner.
De olika kolumnerna med ett "+"-tecken inuti är de områden som kan acceptera Elementor-widgets.
Om du lägger till ett Elementor-block utan att först välja en layout, kommer den enstaka kolumnlayouten att väljas som standard.
Elementor-sektioner kan ordnas om sinsemellan, enligt samma princip om " Dra och släpp".
Du kan också ta bort ett avsnitt om du inte längre vill använda det.
Här är ett exempel på ett avsnitt som innehåller två block, nämligen titelblocket och textblocket.
Hur man använder andra designverktyg
När du är klar med din design är en av de saker du vill göra att spara ditt arbete. Du hittar det här alternativet längst ner i avsnittet som visar de olika Elementor-sektionerna.
Du kan välja mellan att spara direkt (Publicera) och att spara som ett utkast eller som en mall. Vi kommer att utforska dessa olika punkter mer senare.
När du designar kanske du också vill förhandsgranska ändringar utan det extra gränssnittet i Elementor. Allt du behöver göra är att klicka på ögonikonen i den övre raden i Elementor-redigeraren.
Det händer att under designen uppstår ett fel (en ofrivillig åtgärd).
I det här fallet erbjuder Elementor dig en historik som låter dig navigera genom alla dina handlingar.
Ta bort de åtgärder du vill ångra från listan
Detta gör att du enkelt kan gå tillbaka.
den " inställningar » låter dig ändra vissa alternativ som är specifika för sidan, till exempel titel, utvald bild eller status bland annat.
FAQ
Vad är Elementor?
Elementor är en dra-och-släpp-sidbyggare för WordPress, som låter användare designa webbplatser visuellt utan kodning. Det erbjuder ett intuitivt gränssnitt med dra-och-släpp-verktyg för att lägga till och anpassa element på dina sidor.
Är Elementor gratis?
Elementor erbjuder en gratisversion med tillräcklig grundläggande funktionalitet för att skapa enkla webbsidor. Pro-versionen, tillgänglig via prenumeration, erbjuder avancerade funktioner som ytterligare widgets, premiummallar och omfattande anpassningsalternativ.
Vilka är fördelarna med Pro-versionen av Elementor?
Pro-versionen av Elementor erbjuder avancerade widgets, professionella mallar, djupare designalternativ och möjligheten att skapa anpassade sidhuvuden, sidfötter och arkiv. Det möjliggör också förbättrad integration med tredjepartsverktyg och marknadsföringsfunktioner.
Hur installerar jag Elementor på min WordPress-webbplats?
För att installera Elementor, gå till WordPress-instrumentpanelen, klicka på "Plugins" och sedan på "Lägg till". Sök efter "Elementor" i sökrutan, klicka sedan på "Installera nu" och slutligen "Aktivera". Du kan också installera Elementor Pro genom att ladda ner ZIP-filen från Elementors webbplats och importera den via “Plugins” > “Lägg till” > “Ladda upp plugin”.
Hur använder man Elementor för att skapa en sida?
Efter att ha installerat Elementor, gå till en sida eller inlägg i din WordPress-instrumentpanel och klicka på "Redigera med Elementor". Du kommer att tas till Elementor-redigeraren där du kan dra och släppa widgets och sektioner för att designa din sida. Använd de vänstra panelerna för att lägga till och anpassa element på din sida.
Är Elementor kompatibelt med alla WordPress-teman?
Ja, Elementor är designad för att vara kompatibel med de flesta WordPress-teman. För optimal integration rekommenderas det dock att använda teman som utformats specifikt för Elementor, som erbjuder ökad kompatibilitet och flexibilitet.
Kan jag använda Elementor för att bygga en e-handelssida?
Ja, Elementor är kompatibelt med WooCommerce, vilket gör att du kan skapa och anpassa produktsidor, butikssidor och mallar för kassasidor. Pro-versionen erbjuder WooCommerce-specifika widgets för att förbättra utseendet på din onlinebutik.
Hur kan jag förhandsgranska ändringar som gjorts med Elementor?
Du kan förhandsgranska dina ändringar genom att klicka på knappen "Förhandsgranska" i Elementor-redigeraren. Detta gör att du kan se hur din sida kommer att se ut innan du publicerar ändringarna live.
Erbjuder Elementor teknisk support?
Ja, Elementor erbjuder teknisk support via forum, kunskapsbas och biljettsystem för Pro-användare. Du kan också komma åt detaljerade tutorials och guider på den officiella Elementors webbplats.
Kan jag använda tredjepartstillägg med Elementor?
Ja, Elementor är kompatibelt med många tredjepartstillägg som lägger till ytterligare funktioner och widgets. Du kan installera dem som Wordpress plugins normala för att utöka Elementors möjligheter.
Resurser som liknar den här artikeln
- Hur man skapar ett formulär med Elementor friSkaffa Elementor Pro nu!!!
- Hur man skapar popup-fönster med Elementor
- Elementor Gratis vs Elementor Pro: Detaljerad jämförelse av funktioner
- Elementor : Hur man byter bild med ett knapptryck
- Hur man skapar en layout med Elementor
Slutsats
Elementor är en kraftfull och mångsidig lösning för att skapa exceptionella WordPress-sidor utan behov av kodning. Med sitt intuitiva gränssnitt och robusta funktioner tillåter det både nybörjare och proffs att designa attraktiva och funktionella webbplatser på nolltid.
Genom att förstå huvuddelarna av Elementors gränssnitt kommer du att kunna navigera effektivt i redigeraren, använda widgets optimalt och anpassa varje aspekt av dina sidor för att möta dina specifika behov.
den arbetsområden, widgetpaneler, och andra verktyg är designade för att ge maximal flexibilitet med bibehållen användarvänlighet. Genom att integrera sektioner och kolumner sömlöst och dra fördel av stil- och layoutalternativ kan du förvandla din vision till verklighet.
Glöm inte att dra nytta av förhandsgranskningsfunktioner i realtid för att säkerställa att din design ser bra ut på alla enheter. Med Elementor blir varje projekt en möjlighet att skapa en webbplats imponerande som verkligen sticker ut.
För fler tips och handledningar om hur du använder Elementor, prenumerera på vår blogg och håll utkik efter de senaste uppdateringarna och tipsen. Dela den här artikeln med andra WordPress- och webbdesignentusiaster för att hjälpa dem att förverkliga den fulla potentialen hos Elementor.
Börja utforska de oändliga möjligheterna som Elementor erbjuder dig nu och förvandla dina idéer till en fängslande webbdesign!
