Elementor Page-builder er et intuitivt værktøj som gør det hurtigt og enkelt at opsætte indhold på hjemmesider. Med den brugervenlige drag/drop funktionalitet kan du hurtigt styre layout på din hjemmeside, og med de mange indstillinger kan du nemt personliggøre din hjemmeside – uden at skulle kode.
De mange muligheder kan dog hurtigt virke uoverskuelige, og derfor får du i denne Elementor guide en grundig introduktion til de mest basale muligheder i Elementor.
Elementor Guide 2023 – Indhold
Sådan opretter du en side med Elementor
- Opret en ny side
- Rediger med Elementor
- Opret sektion med elementor
- Vælg indhold til dine kolonner
- Tilpas indhold
Sådan gør du din hjemmeside responsiv
Tre Elementor begreber du skal kende
En hjemmeside bygget med Elementor Page builder består af tre grundlæggende elementer, som du skal kende effekten af før du går i gang.
Sektion: En container som kan indeholde kolonner og widgets
Kolonne: En container som kan indeholde widgets
Widgets: Individuelle elementer på siden
Eksempler på widgets i Elementor Page-builder:
- Heading
- Tekst
- Billede
- Video
- Knap
- Ikon
- Ikonliste
- Google Maps
- Sociale ikoner
- Kontaktformular
…og mange flere
De mange tilgængelige widgets kan nemt trækkes ind i din kolonne som er placeret i din sektion, og du kan på den måde hurtigt opbygge din side.
Sådan opretter du en side med Elementor
Nu har du en ide om hvor langt du kan nå med Elementor, og det er tid til at se nærmere på hvordan. Vi tager i denne Elementor guide udgangspunkt i en normal indholdsside på en hjemmeside, som skal opbygges med Elementor Page-builder. De følgende skridt i denne guide forudsætter selvfølgelig, at du har Elementor installeret på din hjemmeside.
1. Opret en ny side
Gå til “Sider” > “Tilføj Ny” i dit WordPress administrationspanel.
Indtast titlen på din side.
2. Rediger med Elementor
Tryk på den blå knap øverst i skærmbilledet med teksten “Rediger med Elementor”.
3. Opret sektion med elementor
Du bliver nu præsenteret for en side med et ikon med et rødt plus samt et ikon med et mappeikon. For at tilføje en sektion til din side skal du klikke på det røde plus.
Nu får du præsenteret valgmuligheder for at strukturere din opsætning i en eller flere kolonner. Vælg den opsætning der passer til dit design – dette kan ændres efterfølgende.
Kolonner opdeler Elementor sektioner. I dette eksempel oprettes to kolonner til indhold
Du får nu vist din nye opsætning på siden. I dette eksempel har vi valgt en sektion med to kolonner.
4. Vælg indhold til dine kolonner
Du har nu mulighed for at indsætte indhold på sin side. Det gør du ved at bruge widgets som er vist i venstre side af skærmen. Find den widget som du vil indsætte og træk den ind i kolonnen.
I dette eksempel vælger vi at indsætte en Overskrift i venstre kolonne.
5. Tilpas indhold
I venstre side af skærmen bliver du nu præsenteret for indstillingerne til din widget. For at ændre teksten på din overskrift, ændrer du blot i feltet “Titel”.
6. Gem side
Når du har foretaget dine ændringer til siden vælger du “Udgiv” nederst til venstre, og din side er nu offentliggjort på din hjemmeside.
Tilpas Widgets i Elementor
Udover at du kan ændre i det viste indhold i dine widgets, har du også mulighed for at tilpasse udseende, placeringer og endda tilknytte animationer til dine Elementor Widgets.
Vi tager udgangspunkt i Overskrift widget’en som vi indsatte tidligere.
I venstre side af skærmen finder du indstillingerne for den enkelte widget. Vises disse ikke, skal du først vælge din indsatte widget ved at klikke på den.
I toppen finder du tre faner. Indhold, Stil og Avanceret.
Indhold-fanen bruges til at kontrollere indholdet af din widget. I dette eksempel kan du ændre i teksten, som vises som overskrift på din side, ved at ændre i teksten i feltet “Titel”.
Du har desuden mulighed for at indsætte et link, samt at vælge om teksten skal være venstrestillet, centreret eller højrestillet.
Du kan også definere HTML tag (H1, H2, H3 m.fl.), samtidig med at du kan vælge størrelse på din overskrift ud fra prædefinerede størrelser.
Stil-fanen bruges til at definere farve, font, og dekoration af din tekst. Du kan vælge frit mellem farver med farvevælgeren, eller indsætte din HEX kode. Typografi feltet styrer font, tekststørrelse, vægten af din font og elementer som linjeafstand m.m. Du kan også indsætte tekst skygge og vælge blandingstilstand i denne fane.
Avanceret-fanen giver dig adgang til de mere avancerede indstillinger for din widget. Her kan du bl.a. definere margin og padding på dit indhold. Du har mulighed for at opsætte indgangs animationer, mouse-tracking og mange andre animationseffekter, og du har mulighed for endnu mere avancerede funktioner som bl.a. betinget visning af elementet.
Disse tre faner går igen på alle elementer i Elementor, og du vil derfor også kunne finde disse faner hvis du markerer kolonner og sektioner. Der vil dog være forskellige muligheder for tilpasning, alt efter hvilket element du har markeret.
Sådan gør du din hjemmeside responsiv med Elementor
En af de rigtig gode features ved Elementor er, at du nemt og hurtigt kan gøre din hjemmeside responsiv. Som standard er elementerne mere eller mindre mobilvenlige, men du har mulighed for at tilpasse yderligere i designet, og tilpasse det forskellige skærmstørrelser. Det hele foregår i Elementors visuelle arbejdsrum, og du behøver ikke at kode for at få din hjemmeside til at vises korrekt på mindre skærmstørrelser.
De elementer du for det meste kommer til at bruge når du gør din side mobilvenlig er margin, padding og tekststørrelse. Men er der elementer på siden som ikke nødvendigvis behøver at vises på en mobil version eller tablet, har du også mulighed for at skjule dem helt fra denne version.
Vælg hvilken skærm du vil designe til
Elementor giver dig mulighed for at vælge mellem tre skærmstørrelser du kan tilpasse. Desktop, Tablet eller Mobil. I indstillingerne for din sektion, kolonne eller widget kan du vælge den skærmstørrelse, som du vil tilpasse designet til.
Vælger du, som her i eksemplet “Mobil”, vil din forhåndsvisning skifte til mobilvisning, og du kan nu tilpasse dit element specifikt til den skærmstørrelse.
Under Avanceret-fanen har du mulighed for helt at fjerne visningen af et element. Klik på vælgeren under “Responsive” og til- eller fravælg visningen af dit element.
Elementet bliver nu sløret i din forhåndsvisning, hvilket indikerer at på den skærmstørrelse du nu tilpasser, vises elementet ikke.
Vil du gennemse hele din side i en mobil- eller tablet visning, kan du i nederste venstre hjørne af skærmen vælge hvilken skærmstørrelse din forhåndsvisning skal være.
Når du vil afslutte den responsive forhåndsvisning, klikker du på X’et i øverste højre hjørne.
Skal du have hjælp til at opsætte din side i Elementor, eller synes du at der mangler noget i denne Elementor guide? Kontakt os her for hjælp og sparring.