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 kommer till layoutdesign. Det bör dock noteras att denna lösning inte är lämplig för alla. Detta är anledningen till att vi i den här handledningen kommer att introducera dig mer till Wordpress plugin Elementor, som är en Wordpress plugin freemium (gratis, men kan utökas 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. Vara en Wordpress plugin, den senare 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 | Modulerna WooCommerce (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.
Om du har den här sidan på skärmen har du installerat korrekt Elementor-plugin. 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 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.
Du behöver bara klicka på den för att gå till registreringssidan och klicka på Aktivera.
Du behöver normalt din bekräftelsida om din licens är giltig.
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.
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).
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
Sektioner i Elementor är grupper av block av funktionalitet 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 plugin WooCommerce aktiverat, så här ser vårt gränssnitt ut.
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.
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.
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.
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.
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.
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.
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.
Detta gör att du enkelt kan gå tillbaka.
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.
Knappen "Inställningar" låter dig ändra vissa alternativ som är specifika för sidan, t.ex. titel, bild eller status bland andra.
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.
