Sådan bruger du Elementor
Elementor er en højt brugerdefineret hjemmeside “blok designer”. Det hedder en blok designer fordi at det faktisk er sådan man sætter en hjemmeside sammen, ved hjælp af blokke eller kasser. Forskellen imellem Elementor og andre populære hjemmeside design værktøjer, er at blokkene er forudlavet i Elementor og kan herefter styles direkte, så man kan få det ønskede udsende af de forskellige elementer man hiver ind.
Her går vi igennem hvad de forskellige ting i Elementor gør, hvad man kan og hvordan man gør.
Steffen Rysgaard
Front-End udvikler og Webdesigner
Skrevet 26-04-2023
Hvor henter jeg Elementor?
Du henter Elementor som et plugin, herefter installerer du. Vær opmærksom på at det ikke er sikkert at Elementor virker med alle temaer og derfor kan det være nødvendigt at skifte tema, for at bruge Elementor.
Hvordan redigerer jeg en side med Elementor?
Når du har hentet og installeret Elementor, kan du bruge det. Du bruger Elementor på en side, ved at gå ind på den side og så trykke “rediger med Elementor”.
Herefter vil Elementor åbne siden i Elementors “view”, hvor du har Elementor menuen til rådighed. Når siden åbner vil den enten være tom eller hvis det er en side der allerede er udfyldt, vil du kunne se den nuværende side og struktur.
Sådan bygger du en side op:
Når du skal lægge noget ind på siden, så skal du trykke i det lyserøde plus på siden. Her får du så et valg om hvordan strukturen af det felt du opretter skal være. Her skal du tage højde for, hvor meget der skal være på siden. Som udgangspunkt skal du enten lave en enkelt eller todelt blok.
For at holde øje med dine lag, skal du åbne navigatoren, den fortæller dig hvor du er i setup af siden, hvilken “blok” du lige nu har markeret.
Hvis navigator menuen ikke allerede ligger ude i højre side af skærmen, så kan du åbne den nede i venstre bund af menuen (se billedet over). Navogator menuen er din bedste assistent i at få indblik i hvad der foregår.
Blokke i Elementor fungerer sådan her
Når du lægger en struktur ind, så laves der først og fremmest en ramme, dette kaldes en sektion. En sektion indeholder noget og afgrænser hvordan det starter og slutter (den røde pil).
Hver sektion deles så op i de bokse du ønsker at der skal være ved siden af hinanden. Disse hedder kolonner (grøn pil)
Hver Kolonne har et plus, du kan trykke på, for at lægge noget ind i (orange pil). Du kan også bare trække det fra Elementor menuen i siden.
Vil du have flere bokse i den ene side end den anden? så kan du indsætte en indersektion fra Elementor menuen.
Sådan indsætter du en indersektion
Ved at indsætte en indersektion fra Elementor menuen i venstre side, i en af kolonnerne, kan du tilføje flere bokse til den ene side, uden at påvirke den anden side af din sektion.
Hvis du vil tilføje endnu en boks, kan du højreklikke på kolonnen og duplikere kolonnen.
Hvis du vil tilføje endnu en boks, kan du højreklikke på kolonnen og duplikere kolonnen. I dette tilfælde vil denne inder sektion gå fra to til tre kolonner.
Sammenspillet med sektioner, inder sektioner fungerer således:
Hele dette billede er en sektion. det er delt op i 2 kolonner og inde i midten af højre kolonne er der sat en indersektion ind.
På denne måde kan vi have et helt tekst felt i venstre side og i højre side kan der være først et billede der fylder hele kolonnen, så en inder sektion i to dele, der indeholder tekst og et billed og herefter et billede der fylder hele kolonnen igen.
På denne måde kan du designe din side og sørge for at de forskellige elementer har en bestemt størrelse. Hvis du ikke vil have mellemrum, kan du bare lade være med at udfylde en kolonne i en indersektion og derved, vil der bare være et gennemsigtigt mellemrum.
Nu har vi rundet hvordan du designer selve opsætningen af din side. Nu er det tid til at kigge på layout og herefter hvordan du styler de elementer du sætter ind.
Hvordan skjuler jeg titlen for en side i Elementor?
Sådan indsætter du elementer i dine kolonner
Nu kan du så indsætte elementer på din side, for at lave layoutet af din side, inden du styler den. Det gøres nemt med elementor, du tager de blokke du har behov for, i menuen til venstre og hiver dem derhen hvor du har behov for dem.
På billedet over ser du en sektion som den ser ud på hjemmesiden. og navigatoren ved siden af, hvor alt indholdet er åbent.
Herunder kan du på billedet se hvordan den er bygget op: Øverst i sektionen er der 1 kolonne, med en overskrift inden i.
Herefter kommer der en indersektion med 4 kolonner med en overskrift og en ikonliste i. Baggrunden (de grå bokse) er stylet i kolonnen, det kommer vi til senere, men egentlig er det bare en overskrift og en liste under.
I bunden er der så en tekst editor der er lagt ind uden en kolonne, med de to knapper (CTA) under. Det er hele opsætningen af billedet du ser over.
Uden styling, ville dette bare være sort tekst alt du ser visuelt er resultatet af styling. Altså farven i overskriften, boksen bag de forskellige lister og det faktum at teksten er hvid i boksen.
Sådan styler du dine elementer i Elementor
Når du trykker på dem kommer denne menu op i venstre side. Der er tre menuer: Layout/indhold, Stil og Avanceret.
Disse menuer styrer forskellige indstillinger til hvert element.
Layout/indhold
Her igennem styres den primære funktion ved det du har trykket på.
For kolonner og sektioner er det størrelsen og afstand osv. Spaltebredte er i dette tilfælde den % sektionen som kolonnen skal fylde. Dette bruges f.eks. hvis du vil have en kolonne til at fylde 1/3 og en til at fylde 2/3 i en sektion.
Prøv dig lidt frem med denne menu for at lære at styre den sidste del af layout.
Stil
Her styres det meste af det visuelle, ved det du er ved at style. Herigennem kan du f.eks. style en baggrund, du kan sætte kant om den og billeder, du kan bestemme tekstens størrelse, farve og du kan sætte ramme omkring elementer for at gør dem mere runde end bare at være firkantet.
Hover
Hover bruges til når noget skal skifte til en anden farve, når musen er over det. Dette kaldes interaktivitet og giver liv til din hjemmeside. Stylingen er det der gør en fin hjemmeside til en flot hjemmeside.
I elementor kan du style på stort set det hele og med lidt træning kan du lave visuelt flotte elementer på din hjemmeside.
Avanceret
Denne menu styrer også lidt layout og i stor grad det tekniske ved siden.
Her indsætter du margen og indvendig afstand, margen er afstand til de andre elementer og indvendig afstand er afstand fra kanten af det element og indad, det gør altså elementet mindre ind imod centret.
Hvis du vil ændre på kun en af tallene, skal du bare trykke på kæden ved siden af, som standard ændrer du på alle.
Z-Indeks
Bruges til at bestemme hvilket prioritet elementet har over andre elemeter. Hvis dit element går ind over andre eller ikke vil side fast til header eller footer, kan du prøve at skrive -10 her.
Bevægelseseffekter
Her kan du indstille effekter, hvis elementet skal bevæge sig ved en bestemt handling.
Responsive
Her styrer du indstillingerne for visning på forskellige enheder. Du kan f.eks. skjule noget for mobile enheder. Sørg for at begrænse mobile sider til at være så minimal som muligt. For at gøre dem optimeret til mobil.
F.eks. har PC udgaven af denne artikel en knap i bunden af venstre side, der får dig tilbage til toppen, så du kan læse videre i højre side. Imens at mobil udgaven bare er en lang artikel på en enkelt side. Vi har nemlig skjult knappen på responsive enheder. Da funktionen kun er nødvendig på PC udgaven.
Mobiloptimering
Når du har lavet din side, så gå den igennem på mobil og tablet version. En hjemmeside er som standard ikke optimeret til responsive enheder og derfor skal du gå siden ordentligt igennem, der kan være alvorlige fejl, der kan betyde at folk ikke bruger siden på mobilen enheder.
Der kan opstå mange fejl, nogle hjemmesider har over 80% trafik fra mobiler, derfor er mobiloptimering vigtigt.
For at åbne menuen for responsive enheder (Mobile enheder), skal du trykke på responsiv visning i bunden af Elementor menuen, som på billedet over.
Herefter vil der kommer en top menu på din skærm oppe i toppen. Her er det så muligt at ændre i de individuelle visninger, på de forskellige enheder.
Menuen ser ud som over, ved at trykke på de forskellige mobile enheder, kan du se hvordan det ser ud på disse og style på det specifikke udseende på den pågældende enhed.
Menuen ser ud som over, ved at trykke på de forskellige mobile enheder, kan du se hvordan det ser ud på disse og style på det specifikke udseende på den pågældende enhed.
På de ting du kan ændre specifikt på den responsive enhed du har valgt eller på PC, hvor der kun ændres på den enhed specifikt. Er der et symbol af enheden.
Symbolet betyder at du kun ændrer på denne opløsning/enhed. Hvis der ikke er et symbol for enheden, så ændres der på tværs af alle enheder.
Symbolet betyder at du kun ændrer på denne opløsning/enhed. Hvis der ikke er et symbol for enheden, så ændres der på tværs af alle enheder.
Afslutning
Nu har vi gået det tekniske igennem, så nu er det op til dig at prøve dig frem og lære hvordan du får din design stil frem.
God fornøjelse! – Wuo holdet
