Elementor Page Builder – alt hvad du behøver at vide!

Billede af Antonio Riveras
Antonio Riveras

Udarbejdet med støtte fra:

Perplexity
Notion
Claude

Indledning:

Sidebyggere er efterhånden blevet standard til WordPress, og de findes i mange forskellige varianter. Elementor er en af de mest populære sidebyggere, der findes, og en af mine favoritter.

Det kan være svært at begynde at bruge en så avanceret page builder som Elementor, og derfor vil jeg i det følgende indlæg gennemgå, hvad Elementor er for noget, og hvad du skal tænke på, før du begynder at bruge det.

Hvad er Elementor?

Elementor er et plugin, der er en træk-og-slip “sidebygger” – og erstatter den grundlæggende WordPress-editor Gutenberg med en live frontend-editor.

Med dette kan du oprette komplekse layouts visuelt og designe din websted live, uden at skulle skifte mellem redigeringen og forhåndsvisningen.

  • Med Elementor kan du altså via drag-and-drop skabe komplexe layouts på din hjemmeside uden at skulle kode.
  • Du kan skabe unikke layouts på din hjemmesides undersider, som adskiller sig markant fra det, du får, hvis du installerer WordPress og et standardplugin/tema.
  • Du får en separat grænseflade og et bedre overblik over, hvordan dine ændringer vil se ud, før du trykker på Opdater/Udgiv-knappen.
  • Der kræves ingen programmeringskendskaber for at udarbejde et visuelt tiltalende layout.
  • Det fungerer med alle WordPress-temaer, så du kan beholde det, du godt kan lide ved dit tema, og samtidig få alle de fede funktioner, der findes i Elementor.

Fordele ved Elementor:

Elementor leveres med en lang række nyttige moduler indbygget – med mulighed for at tilkøbe flere. Det er dog normalt ikke nødvendigt.

Med Elementor får du blandt andet:

  • Omkring 90 forskellige moduler, f.eks. overskrifter, afgrænsere, tekstblokke, billedmoduler, kundeanmeldelser osv…
  • Træk-og-slip-funktionen, der giver dig mulighed for at flytte objekter, som du vil, og placere dem, hvor du vil.
  • SEO-venligt, uanset hvordan du vælger at strukturere dit layout.
  • Et bibliotek med foruddefinerede layouts, som du kan tage udgangspunkt i.
  • Pro-versionen (mod betaling), som giver dig mulighed for at styre dit temas kernefunktioner, såsom sidefoden og sidehovedet.
  • WooCommerce Builder – en funktion, der giver dig mulighed for også at styre udseendet på din webshop – dvs. produktoversigten og layoutet for dine enkelte produkter.

Fordelen ved Elementor er, som sagt, den indbyggede funktion, der giver dig mulighed for at foretage visuelle ændringer i realtid – med øjeblikkelig feedback på det, du gør. Nu behøver du ikke længere skifte frem og tilbage mellem backend og frontend =)

Men for at være lidt mere konkret – hvilke moduler kan du bruge, og hvordan ser det ud?

Modulerne (også kaldet elementer)

Du finder alle de moduler, du har brug for, under fanen »Elements«. Der findes moduler til bl.a. overskrifter, billeder, gallerier, tekstblokke, anmeldelser osv. Du kan også bruge de indbyggede widgets, der følger med dit hovedtema.

Ud over at tilføje moduler får du også mulighed for at tilpasse modulernes udseende ved hjælp af standardfarver, baggrunde, margener, indrykning, skrifttyper osv.

Hvis noget skulle gå galt – ja, så har du en udvidet version af den indbyggede revisionshåndtering, der findes i WordPress.

Du kan meget nemt vende tilbage til en tidligere version af din side – hvis du skulle komme til at lave en fejl!

[mailpoet_form id=”3″]

Omkostninger

Elementor er helt gratis – men ligesom mange andre WordPress-plugins findes der en Pro-version, som koster penge. Prisen afhænger af, hvilke behov du mener, du har. Men helt ærligt – du vil med stor sandsynlighed ikke få brug for at købe Pro-versionen.

Men lad os alligevel se på, hvad du kan få, HVIS du beslutter dig for at købe den:

  •  +50 forskellige moduler
  • +300 forskellige sideskabeloner
  • Theme Builder (til at ændre sidefod og sidehoved)
  • WooCommerce Builder
  • Visual Form Builder (lav din egen formular)
  • Tilpasset CSS til hvert modul (hvis du har kendskab til CSS, kan dette være en fordel; ellers er det overflødigt)

På nuværende tidspunkt er dette priserne for Pro-versionen af Elementor.

Kursus i Elementor

Hvordan bruger man det?

Så synes jeg, vi skal se nærmere på, hvordan Elementor bruges – rent praktisk.

I bund og grund er Elementor et WordPress-plugin. Det er ganske vist et lidt mere avanceret plugin, men ligesom alle andre plugins skal du Start med at installere det.

Derudover er der et par indstillinger, du skal konfigurere. Jeg springer det over i dette indlæg, da der er så få ting at indstille, at du sagtens kan udforske det på egen hånd.

Når du nu går til en side og skal til at redigere, vil du blive mødt af din standard Gutenberg-blokeditor – med mulighed for i stedet at vælge “Rediger med Elementor”

Når du klikker på knappen, åbnes Elementor-brugergrænsefladen

Elementor-grænseflade

Det, du ser, er:

  1. Hovedsektionen – din visuelle fremstilling af siden
  2. Alle tilgængelige moduler
  3. Indstillinger
  4. Genvej til alle moduler
  5. Globale indstillinger for siden
  6. Revisioner – forskellige gemte varianter af layouts
  7. Responsive tilstande (computer, tablet, mobil)
  8. Forhåndsvis
  9. Udgiv

Ret standard – ikke sandt?

For at kunne opbygge et layout skal du, kort sagt, forstå, hvordan du rent strukturelt skal opbygge siden.

Sådan ser det ud:

Din side -> Sektion -> Kolonner -> Indhold -> Styling (Udseende)

Start med at trykke på plus-knappen, og tilføj derefter dine kolonner

Fortsæt derefter med at indsætte nogle tilgængelige moduler.

Jeg lader dig eksperimentere her – vi går videre!

Foruddefinerede layouts

Er du ligesom mange andre glad for at tage udgangspunkt i færdige layouts og strukturer? Så kan du bruge Elementors foruddefinerede layouts.

Der findes rigtig mange af disse layouts. Over 150 i gratisversionen og over 300 i betalingsversionen af Elementor.

Det gælder ikke kun for enkelte sider på din hjemmeside – du kan også få såkaldte Elementor Kits, som er en samling af layouts med undersider, der følger det samme design.

På denne måde kan du hurtigt lave en komplet hjemmeside.

Ligesom med mange andre temaer og sidebyggere har du altid mulighed for at gemme dine egne layouts (også kaldet skabeloner) for senere at genbruge dem på en anden del af din hjemmeside.

Er Elementor noget for dig?

Jeg vil starte med at tage udgangspunkt i mig selv. I løbet af min tid som webdesigner og webudvikler har jeg været vidne til store forandringer.

Fra at kode mine egne templates til altid at tage udgangspunkt i et tema, når jeg bygger hjemmesider til mine kunder.

Jeg foretrækker den dag i dag at bruge et avanceret tema og selv kode hjemmesidens udseende med CSS.

For mig går det hurtigere at skrive en linje kode for at få et resultat frem end at “klikke mig frem” og trykke på knapper for at opnå det samme.

Men det er bare fordi, jeg har arbejdet med det her så længe.

Når det er sagt, er jeg ret imponeret over Elementor. Det er en avanceret sidebygger, som jeg har haft lejlighed til at arbejde med et par forskellige kundeopgaver og det er faktisk gået bedre end forventet.

Elementor er den page-builder, der er nemmest at finde ud af, og som også giver dig flest funktioner, og som samtidig er gratis.

Hvis du ikke kan CSS/HTML så anbefaler jeg dette plugin frem for alle andre sidebygere. Uden tvivl.

Jeg anbefaler det til dig, der gerne vil designe en hjemmeside, uden egentlig at være designer.

Er du mere som mig? og kan lide at kode dit udseende frem med CSS – ja, så skal du måske kigge et andet sted.

Men…..Jeg vil alligevel hævde, at Elementor kan være en fordel for dig, selvom du kender til CSS/HTML. Dette er et plugin, der indlæses hurtigt og ikke bremser din hjemmeside, trods dets avancerede funktionalitet.

Det kan ske, at jeg går over fra mit yndlingstema Enfold (som har sin egen indbyggede sidebygger) til Elementor – eller i det mindste holde Elementor i tankerne til fremtidige projekter og ikke binde mig til et bestemt tema.

Resumé

En sidebygger som Elementor er så avanceret, at jeg personligt kan anbefale den til alle, der vil kaste sig ud i at opbygge deres eget layout.

Ligesom med alt andet er der en indlæringskurve, og det er helt klart en fordel, hvis du har tidligere erfaring med WordPress og andre sidebyggere.

Elementor findes i en gratisversion og en betalt version (Elementor Pro), hvor den største forskel er, at du i Pro-versionen får adgang til omkring 150+ moduler at arbejde med, sammenlignet med 90+ moduler i gratisversionen.

Du kan også tage udgangspunkt i foruddefinerede layouts/skabeloner, hvilket betyder, at du aktiverer funktionen og får en komplet hjemmeside med undersider, som igen har færdige layoutstrukturer.

Så er det op til dig at fjerne og tilpasse layoutet efter din egen smag. Betragt det som om, du arbejder dig “baglæns” frem til det ønskede layout.

Elementor fungerer med alle temaer, så det er op til dig at vælge et, du kan lide, og forbinde det med sidebyggeren.

Det hjælper altid, hvis du kan CSS/HTML – men med dette tema kan du opnå et flot og avanceret layout uden nogen form for kendskab til kodning!

Fortæl os om dit projekt