Elementor

Elementor er en visuel page builder til WordPress, som gør det muligt at bygge og redigere sidens layout direkte i en grafisk editor. Elementor er altså ikke et CMS i sig selv. Det ligger oven på WordPress og giver et ekstra lag til design, struktur og genbrug af sider.

I stedet for kun at arbejde i WordPress' almindelige editor kan du trække elementer ind på siden, justere afstande, typografi, baggrunde og placering og se resultatet, mens du arbejder. Elementerne kaldes typisk widgets eller elementer, og de kan være alt fra overskrifter og billeder til knapper, formularer og mere avancerede funktioner. Det gør Elementor populært hos virksomheder, der ønsker mere visuel kontrol uden at håndkode hvert layout.

Det betyder ikke, at Elementor fjerner behovet for struktur. Tværtimod. Når et site bliver større, bliver det vigtigt at skelne mellem almindeligt indhold, globale indstillinger, skabeloner og funktioner fra andre WordPress-plugins. Hvis alt bliver designet individuelt på hver side, kan en tilsyneladende nem page builder ende med at gøre sitet tungt at vedligeholde.

Elementors nyere layoutmodel bygger på containere. En container holder widgets og eventuelt andre containere og kan styres med blandt andet Flexbox eller Grid. Det giver større frihed til at placere og omorganisere indhold og kan reducere behovet for de mange ekstra sektioner og kolonner, som ældre page-builder-opbygninger ofte brugte. Elementor beskriver selv containere som den nuværende måde at organisere og layoute sider på.

Det er også vigtigt at skelne mellem design i Elementor og et egentligt designsystem. Du kan sagtens vælge en blå farve på 40 forskellige knapper manuelt. Det gør ikke løsningen konsistent. Et mere robust setup bruger globale farver, typografi, layoutindstillinger og genbrugelige skabeloner, så en ændring kan udføres centralt i stedet for side for side.

Elementor kan bruges sammen med mange WordPress-temaer. I nogle løsninger bruges et meget let tema, mens Elementor står for størstedelen af det visuelle udtryk. Med Theme Builder kan man desuden arbejde med skabeloner til eksempelvis header, footer, indlæg, arkiver og produktsider. Dermed kan page builderen påvirke langt mere end en enkelt landingsside.

For virksomheden er den reelle fordel derfor ikke bare drag-and-drop. Det er muligheden for at kombinere WordPress' indholdsstyring med et visuelt designlag. Men jo mere af sitet der flyttes ind i page builderen, jo vigtigere bliver dokumentation, opdateringer og en klar opdeling mellem indhold og layout.

Start med at definere de dele af siden, der skal gå igen. Det kan være indholdsbredde, farver, fonte, knapper, formularfelter og afstande. Elementors Site Settings samler globale indstillinger for blandt andet design, layout og tema-styling. Brug dem som grundlag i stedet for at indstille de samme værdier igen på hver enkelt widget.

Byg derefter siderne med få, tydelige containere. En hero kan eksempelvis bestå af én hovedcontainer med en tekstcontainer og en billedcontainer. På desktop kan de ligge ved siden af hinanden, mens de på mobil kan stables. Her hænger Elementor direkte sammen med responsivt design: rækkefølge, bredde, afstand og typografi skal kontrolleres ved forskellige skærmstørrelser og ikke kun i én desktop-visning.

En praktisk arbejdsgang kan være:

1. Fastlæg globale farver, typografi og standardbredder.
2. Byg de vigtigste genbrugelige dele som skabeloner frem for kopier.
3. Brug containere med så enkel nesting som muligt.
4. Kontrollér desktop, tablet og mobil, mens layoutet stadig er enkelt.
5. Test formularer, knapper, menu, billeder og dynamisk indhold på frontend.
6. Kontrollér performance og Core Web Vitals, når det rigtige indhold og de rigtige billeder er på plads.

Hvis flere medarbejdere skal redigere sitet, bør de ikke nødvendigvis have fri adgang til alle designindstillinger. En redaktør, der bare skal rette tekst og billeder, har sjældent brug for at kunne ændre globale fonte eller erstatte sidens overordnede templates. Den slags adgang skal tænkes sammen med WordPress' brugerroller og den måde sitet skal drives på efter lancering.

Hold også øje med tredjeparts-addons. Elementor har et stort økosystem af udvidelser, som kan tilføje nye widgets og funktioner. Det kan være praktisk, men hvert ekstra plugin giver endnu en kodebase, der skal opdateres, testes og passe sammen med resten af løsningen. Installer ikke en stor widgetpakke for at få én enkelt effekt, hvis den samme opgave kan løses enklere.

Performance afhænger ikke kun af Elementor. Billeder, webfontes, tracking, tema, hosting, cache og tredjepartsscripts spiller også ind. Alligevel bør layoutet holdes så enkelt som muligt. Elementor peger selv på, at moderne containere kan reducere antallet af unødvendige wrapper-elementer sammenlignet med ældre sektion/kolonne-opbygninger.

Hvis du bygger en professionel hjemmeside til en virksomhed, bør redigerbarhed være en del af designbeslutningen. Kunden skal kunne ændre de ting, der giver mening, uden at risikere at flytte hele layoutet tre centimeter til højre. Det er ofte mere værd end at have 200 widgets til rådighed.

Ved større eller ældre Elementor-sites kan en teknisk gennemgang også betale sig. Der kan ligge gamle sektioner, kopierede widgets, forældede templates og plugins, som ingen længere ved, hvorfor er installeret. Et webbureau kan hjælpe med at skille nødvendigt indhold fra historisk bagage, før man begynder at redesigne.

Forestil dig en mindre rådgivningsvirksomhed med 35 undersider. Sitet er bygget i Elementor, og næsten alle sider har deres egen håndbyggede kontaktsektion. Telefonnummer, knapfarve og afstande er kopieret manuelt. Da virksomheden skifter telefonnummer og visuel identitet, skal medarbejderen rette de samme oplysninger mange steder.

I en ny struktur oprettes de centrale farver og fonte globalt. Kontaktsektionen bygges som en genbrugelig template, og de almindelige indholdssider bruger samme bredde og afstandssystem. Når telefonnummeret ændres, rettes det ét centralt sted. Når den primære farve ændres, opdateres de elementer, der refererer til den globale farve.

I et tænkt regneeksempel tager en manuel rettelse fire minutter på hver af 35 sider. Det er 140 minutters arbejde plus risikoen for at overse en side. Hvis samme indhold er samlet i en korrekt genbrugelig struktur, kan ændringen måske udføres og testes på et kvarter. Pointen er ikke det præcise minut-tal. Pointen er forskellen mellem kopier og system.

Virksomheden opdager samtidig, at mobilversionen af flere sider har fået særlige marginer, fordi en tidligere redaktør rettede problemer lokalt. I stedet for at lægge flere undtagelser ovenpå gennemgås containerstrukturen. Nogle elementer får en naturlig kolonneretning på mobil, mens andre får en fælles global afstand. Resultatet bliver enklere at forstå næste gang nogen skal rette siden.

Den samme tankegang gælder for UX og UI. En page builder kan gøre det hurtigt at tilføje effekter, men effekterne skal stadig hjælpe brugeren. En animation på hver overskrift eller seks forskellige knapstile gør ikke siden mere professionel. Et roligt system med tydeligt hierarki er ofte stærkere.

Se også vores guide til at skabe en brugervenlig hjemmeside, der fører til flere henvendelser. Den grundlæggende opgave er den samme, uanset om layoutet bygges i Elementor, Gutenberg eller kode: brugeren skal hurtigt kunne forstå siden og komme videre.

Den største faldgrube er at forveksle frihed med kvalitet. Fordi næsten alle elementer kan få egne farver, afstande, skrifter og responsive indstillinger, er det også muligt at skabe et site med hundredvis af små undtagelser. Det kan se rigtigt ud på én side og stadig være svært at vedligeholde.

En anden klassiker er at kopiere hele sider for at lave en ny. Kopien er hurtig i øjeblikket, men efter et år findes der måske 20 varianter af samme sektion. Når virksomhedens budskab ændres, skal ingen kun rette én template; de skal huske alle kopierne.

Pas også på widget-addons, animationer og scripts, der bliver installeret uden en klar opgave. Flere muligheder kan betyde mere JavaScript, mere CSS og flere steder, hvor en opdatering kan skabe konflikter. Test især efter opdateringer af Elementor, temaet og andre plugins.

En tredje faldgrube er kun at kontrollere designet i editoren. Frontend kan opføre sig anderledes på grund af cache, optimering, cookies eller andre scripts. Hvis en ændring ikke vises, er det ikke nødvendigvis Elementor, der har glemt den. Der kan ligge flere lag af cache mellem editoren og den besøgende.

Endelig kan en løsning blive unødigt låst til page builderens struktur. Indholdet ligger stadig i WordPress, men selve layoutet og mange funktioner kan være stærkt knyttet til Elementor. Hvis man senere vil skifte til en helt anden builder eller et specialtema, skal man regne med et reelt migreringsarbejde. Derfor bør platformvalget ses som en flerårig driftsbeslutning og ikke kun som spørgsmålet: Hvad er lettest at bygge forsiden i på fredag?

Elementor findes i forskellige planer og produktkombinationer, og funktioner kan flytte sig mellem gratis og betalte niveauer over tid. Derfor er det bedre at beskrive behovet først og derefter kontrollere den aktuelle plan end at bygge en løsning på en gammel liste over, hvad Pro indeholder.

Elementors Theme Builder kan bruges til at styre skabeloner for centrale dele af WordPress-sitet. Det betyder, at header, footer, indlæg og andre indholdstyper kan få visuelle templates uden at redigere traditionelle theme-filer direkte. Det er praktisk, men gør det ekstra vigtigt at vide, hvor et element kommer fra, når noget skal ændres.

Hvis et site skal kunne overtages af en anden leverandør, så dokumentér tema, centrale plugins, globale templates, specialkode og eventuelle licenser. Sørg også for, at virksomheden selv har administratoradgang og adgang til licens- og hostingkonti. En page builder skal gøre redigering lettere, ikke gøre ejerskabet uklart.

Elementor er bedst, når det bruges som et system og ikke som en uendelig samling af muligheder. Hold de globale valg globale, hold sidespecifikke valg lokale, og test ændringer på rigtige enheder. Så får virksomheden fordelene ved visuel redigering uden at betale for dem igen i form af oprydning.