Gå till innehållet

Elementorhandledning: Introduktion av gränssnittet

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Att designa en professionell webbplats var inte för alla, speciellt eftersom vi alla kände att vi absolut behövde vara professionella för kodning och webbdesign. Numera ser vi nya verktyg som dyker upp för WordPress-ekosystemet för att ge en allt enklare lösning för att utforma en webbplats och detta inom de mest nybörjare räckhåll.

När det gäller utformningen av WordPress-layouter var vi redan tvungna att skicka in plugin-programmet Visual Composer, vilket definitivt är ett av de bästa verktygen när det gäller layoutdesign. Observera dock att den här lösningen inte passar alla. Detta är anledningen till att vi i den här guiden kommer att introducera dig mer till WordPress Elementor-plugin, som är ett freemium WordPress-plugin (gratis, men utökbart under prenumeration).

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. Att vara ett WordPress-plugin installeras 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.

Huvuddragen i Elementor

Innan du börjar guiden med en översikt över plugin kommer vi först att presentera dig för pluginens huvudfunktioner (gratisversion och fullständig version).

versionen gratis Full version
Flera kolumner Navigationsmeny, artikel
Moduler Texter, titlar WooCommerce-modul (produkter, kategorier)
Videomoduler, bild, karusell, gallerier, soundcloud Facebook-integration (sida, knapp, kommentarer)
Delningsmodul Tabell priser
HTML-modulen Portfölj, Form
Modul för WordPress-widgeten Forskningsmodul

 

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

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. Efter installationen kommer du dock att gå till plugins hemsida.

delementor.png presentationssida

Om du har den här sidan på skärmen har du installerat Elementor-tillägget. Vi använder för närvarande den fullständiga versionen för denna handledning, men gränssnittet borde inte vara alltför annorlunda än den fria versionen.

Innan jag går till redigeringsgränssnittet kommer jag att bjuda in dig att registrera din licens. Detta gäller endast de som har valt den fullständiga versionen. Om du har gratisversionen kan du gå till 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.

anmälningsplugin elementor.png

Du behöver bara klicka på den för att gå till registreringssidan och klicka på Aktivera.

registrering av en licens elementor.png

Du behöver normalt din bekräftelsida om din licens är giltig.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

aktiv licens elementor.png

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.

Hur man använder Elementor

Elementor arbetar på sidor och inlägg på WordPress. Oavsett om du använder det klassiska gränssnittet eller det nya Gutenberg-gränssnittet ser du en knapp som uppmanar dig att använda Elementor-byggaren.

constructor elementor.png

I praktiken behöver du inte alltid redigera dina inlägg med Elementor. Jag uppmanar dig därför att använda plugin endast på sidorna. Genom att klicka på knappen kommer du till Elementors designgränssnitt som ger en känsla av déjà vu (för dem som använder WordPress Customizer).

presentation interface elementor.png

Så du har till vänster de olika kontrollerna som erbjuds av plugin-programmet och till höger har du liveförhandsgranskningen av dina ändringar. I denna handledning använder vi tjugo sexton WordPress-temat.

Elementor sektioner

Elementor-sektioner ä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 mer eller mindre avsnitt på ditt gränssnitt. Eftersom vi använder den fullständiga versionen med WooCommerce-tillägget aktiverat, så ser vårt gränssnitt ut.

section elementor.png

Hur man placerar ett Elementor-block

När du har utvidgat ett avsnitt hittar du Elementor-blocken. De olika Elementor-blocken placeras av "Drag & Drop" på området markerat med streckade linjer.

lägg till block elementors.png

Hur man väljer en layout på Elementor

Innan du lägger till ett block på Elementor måste du komma ihåg att välja en layout genom att klicka på “+” i det markerade avsnittet.

välj en layout elementor.png

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Beroende på dina behov väljer du den layout som passar dig bäst. När du väl har valt en layout har du en representation av det avsnittet i samma område markerat. Detta avsnitt visar samma antal kolumner som motsvarar ditt val. I mitt fall valde jag en kolumn med tre kolumner.

elementorsektion med zone.png

De olika blocken med ett "+" -tecken inuti är de områden som kan acceptera Elementor-block. Om du lägger till ett Elementor-block utan att först välja en layout väljs layout för en kolumn som standard.

Elementorsektioner kan ordnas om varandra enligt samma "drag & drop" -princip. Du kan också ta bort ett avsnitt om du inte längre vill använda det.

flytta en sektion elementor.png

Här är ett exempel på ett avsnitt som innehåller två block, nämligen titelblocket och textblocket.

sektionselement med 2 blocs.png

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.

elementor.png backup

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.

Under din design kanske du också vill förhandsgranska ändringarna utan det extra gränssnittet för Elementor. Allt du behöver göra är att klicka på ögonikonen.

förhandsgranskning av ändringar elementor.png

Det händer att under designen uppstår ett fel (en ofrivillig åtgärd). I det här fallet erbjuder Elementor en historik som låter dig navigera genom alla dina handlingar.

åtgärder elementor.png

Detta gör att du enkelt kan gå tillbaka.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Alternativet “Browser”, som kommer strax före historik-knappen, låter dig ytterligare ändra de olika sektionerna i förhållande till webbläsaren som används av besökare. Detta alternativ ger dig tillgång till avancerad modifiering av sektionsstrukturer (kolumnbredd). Du måste göra ändringar här mycket noggrant.

webbläsaralternativ elementor.png

Knappen "Inställningar" låter dig ändra vissa alternativ som är specifika för sidan, t.ex. titel, bild eller status bland andra.

elementor.png inställningar

Det är det för denna handledning, vi kommer att utforska Elementor mer i vår nästa handledning. Tveka inte att titta på sajt officiel vilket ger mycket mer framgångsrika exempel.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
13 aktier
del6
tweet3
Enregistrer4