Introduksjon
Hvis du har gått gjennom del 8 i denne veiledningsserien og funnet at blokkredigereren dekker alle behovene til nettstedet ditt, er det ingen regel som sier at du trenger en sidebygger.
Men hvis du stadig tenker “Jeg vet hvordan jeg vil at dette skal se ut, men jeg får det ikke til med blokkredigereren”, kan en sidebygger være til hjelp. Kanskje du vil ha tekst lagt over en bakgrunnsvideo med nøyaktig avstand, eller du trenger en pristabell som ser ut på en bestemt måte. Kanskje skal du overlate nettstedet til noen som helst vil dra og slippe elementer på et visuelt lerret. Elementor tar seg av alt dette.
I denne veiledningen gir vi en kort oversikt over de vanligste sidebyggerne, forklarer hvorfor denne veiledningsserien fokuserer på Elementor, viser hvordan du installerer og konfigurerer, og gir råd om valg av tema og utvidelser som sikrer at nettstedet ditt vil lastes raskt fra første stund.
Sidebyggere det er verdt å kjenne til
Sidebyggere er WordPress-utvidelser som gir deg et visuelt designverktøy i tillegg til den innebygde blokkredigereren i WordPress. Det finnes flere som det er verdt å vite om.
| Sidebygger | Best egnet for | Verdt å vite |
|---|---|---|
| Elementor | Nybegynnere og små bedrifter som ønsker visuell kontroll uten å måtte kode | Mye brukt, massevis av widgets, nyttig gratisversjon |
| Bricks | Utviklere som behersker CSS og ønsker et lett resultat | Utmerket arbeidsflyt, men bratt læringskurve |
| Divi | Hobbybrukere som liker livstidslisenser og et stort utvalg av maler | Tyngre sider og et proprietært kortkodesystem som gjør det vanskeligere å bytte senere |
| Oxygen | Utviklere som lager skreddersydde nettsteder fra grunnen av | Effektivt men komplekst, begrenset brukerfellesskap |
| Gutenberg | Nettsteder med fokus på innhold, blogger og brosjyresider med standardoppsett | Innebygd i WordPress, ingen ekstra sidestørrelse (omtalt i del 8) |
I denne veiledningsserien fokuserer vi på Elementor ettersom det er den mest brukte sidebyggeren blant kundene våre, men prinsippene for hosting og ytelse som omtales i resten av serien gjelder uansett hvilken sidebygger du velger.
Når er Elementor et bedre valg enn Gutenberg?
Elementor gir større fleksibilitet for prosjekter der design står i fokus. Hvis du skal lage en side der selve designet inngår i det du ønsker å formidle gir Elementor deg en grad av kontroll som blokker ikke kan måle seg med. Dette gjelder for eksempel fotoporteføljer, landingssider, nettsteder for designbyråer eller andre prosjekter der “tilnærmet riktig” avstand og plassering ikke holder mål.
Det er også hensiktsmessig når du trenger større designfleksibilitet og et bredere utvalg av widgets enn det blokkredigereren tilbyr som standard. Elementor Free dekker allerede mange behov, og betalingsversjonene gir deg tilgang til enda mer avanserte design- og markedsføringswidgeter.
Riktignok laster Elementor inn sitt eget CSS- og JavaScript-lag på alle sider der det er aktivt. Kapitlene om ytelse senere i denne serien (del 13 og fremover) tar for seg hvordan du kan håndtere dette, men det er alltid enklere å forbedre hastigheten på et lett nettsted enn på et mer komplekst.
Hvis du er usikker kan du lage de første sidene dine med blokkredigereren. Du kan legge til Elementor senere uten å miste noe innhold. Det motsatte, altså å fjerne Elementor når du først har laget sider med det, er en større jobb.
Elementor Free vs. Pro: Dette får du
Den gratis Elementor-utvidelsen gir deg et bredt utvalg av widgets, et bibliotek av maler, responsive redigeringsverktøy og et fullverdig dra-og-slipp-arbeidsområde. Du kan lage komplette nettsteder med det.
En del ting får du imidlertid bare med en betalingsversjon (Elementor Pro):
- Temabygger. I gratisversjonen styrer temaet topp- og bunntekster, maler for blogginnlegg og arkivoppsett. Elementor håndterer kun innholdet på siden.
- Innebygde skjemaer. Du trenger en egen utvidelse som WPForms eller Contact Form 7 for å lage kontaktskjemaer.
- Popup-vinduer. Kampanjeoverlegg og skjemaer for lead-innsamling får du kun med Pro.
- Bevegelseseffekter. Scrolleanimasjoner, parallax-bakgrunner, faste elementer og musesporingseffekter krever Pro.
- Det utvidede widget-settet. Elementor Pro inneholder dusinvis av ekstra widgets, blant annet avanserte karuseller, animerte overskrifter, prislister og WooCommerce-produktwidgets.
Elementor Pro er et tilleggsprogram som bygger på gratisversjonen av utvidelsen. Du må alltid ha begge installert. Hvis du deaktiverer gratisversjonen, slutter også Pro å fungere.
Når er gratisversjonen tilstrekkelig?
Hvis temaet ditt allerede håndterer topp- og bunntekster på en god måte (og det gjør Astra, som beskrevet i del 7), og du trenger visuell kontroll over sidene dine uten at det er nødvendig med tilpassede maler som brukes over hele nettstedet, kan den gratis versjonen av Elementor være alt du trenger.
Når er Pro-versjonen verdt prisen?
Pro er et fornuftig valg når du vil designe dine egne maler for topptekst, bunntekst og innlegg, eller når du trenger skjemaer, popup-vinduer eller WooCommerce-integrasjon via Elementor-grensesnittet. Theme Builder er hovedgrunnen til at mange brukere oppgraderer. I del 11 går vi gjennom hvor Astra håndterer dette arbeidet i gratisversjonen, og når Elementor Pro eventuelt blir et godt valg. Sjekk elementor.com/pricing for gjeldende priser.
Velg tema før du installerer
Selv om Elementor tar seg av det meste av det visuelle arbeidet spiller temaet ditt fortsatt en viktig rolle. Det håndterer den underliggende HTML-strukturen, standardtypografien som Elementor arver, og i gratisversjonen også topp- og bunnteksten som de besøkende ser.
- Hello Elementor-temaet et utviklet av Elementor som et blankt lerret. Temaet er svært lett og enkelt. Hvis du bruker Elementor Pro og planlegger å designe hvert element med Theme Builder, gir Hello deg et svært minimalistisk utgangspunkt uten noe som konkurrerer med ditt eget design. Hvis du ikke har Pro får du imidlertid en langt mindre ferdig nettstedsstruktur enn med Astra, så du må kanskje i større grad bygge opp rammen selv.
- Astra er det beste valget hvis du bruker gratisversjonen av Elementor. Astra inkluderer en fullverdig topp- og bunntekst, fleksible alternativer for layout ved hjelp av innebygde verktøy (se del 7), samt startmaler som fungerer med Elementor. Det er fortsatt minimalistisk, og gir deg et nettsted med et helhetlig utseende uten at du trenger Pro-versjonen for å få på plass den grunnleggende strukturen.
Unngå å bruke Elementor i kombinasjon med komplekse, allsidige temaer eller temaer som har sin egen sidebygger. Når to designsystemer prøver å styre den samme siden oppstår det lett konflikter, overflødig kode og unødvendig feilsøking.
Slik installerer du Elementor
Når temaet er på plass tar det omtrent et minutt å installere Elementor.
- I WordPress-kontrollpanelet for WordPress, gå til Utvidelser → Legg til utvidelse.
- Skriv “Elementor” i søkefeltet.
- Finn Elementor Website Builder (den fra Elementor.com) og klikk Installer nå. Etter noen sekunder endres knappen til Aktiver.
- Klikk Aktiver.
WordPress omdirigerer deg til velkomstskjermen i Elementor. Lukk alle veiviserne for konfigurering inntil videre, og gå i stedet til Elementor-dashbordet.
Elementor-dashbordet
Etter aktivering vises en ny Elementor-seksjon i menyen til venstre. Klikk på den for å se startsiden til Elementor.
Sidemenyen gir deg tilgang til Innstillinger, Maler (Lagrede maler, Theme Builder, Nettsidemaler) og, under System, verktøy som Systeminformasjon og Elementbehandling. Du finner en Oppgrader-melding for Pro, som du kan ignorere fram til du trenger Pro-funksjonene.
Hva er det viktigste i Elementor-dashbordet?
Ikke la deg overvelde – hurtigstartskjermen viser mye mer enn det du trenger til et nytt nettsted den første dagen. Nettstedsmaler, temabygger, flytende elementer, popup-vinduer, skrifttyper, ikoner og kode er reelle funksjoner i Elementor, men de utgjør på ingen måte en sjekkliste for nybegynnere som du må gjennom.
For et nytt nettsted basert på Astra er den praktiske fremgangsmåten enklere. Bruk Elementor til å lage innholdet på sidene, bruk Astra til å håndtere rammen som gjelder for hele nettstedet (for eksempel topp- og bunntekst), og bruk eventuelt nettstedsmaler som en valgfri snarvei hvis du vil ha et visuelt utgangspunkt som er raskt å sette opp. Theme Builder, popup-vinduer, flytende elementer og tilpasset kode er verktøy du kan ta i bruk senere, og noen av dem krever Pro-versjonen.
Det viktigste nå er selve redigeringsverktøyet, innstillingene for skrifttyper og farger, samt malalternativene – men bare hvis du ønsker et utgangspunkt i stedet for en tom side.
En logisk sekvens for å sette opp Elementor
Hvis du vil ha den korteste veien fra oppsett til et nettsted som er klart til publisering, bør du ta det i denne rekkefølgen:
- Konfigurer temaet og de grunnleggende standardinnstillingene i Astra.
- Lag hoveddelen av siden med Elementor.
- La topp- og bunnteksten være i Astra, med mindre det senere dukker opp en god grunn til å flytte dem over til Pro-elementer.
- Sjekk hvordan resultatet ser ut på nettbrett og mobil før du begynner å legge til flere widgets, effekter eller tilleggsfunksjoner.
Det er denne prosessen vi skal gå gjennom i de tre neste veiledningene i denne serien. De gir oversikt over designet og gjør det mye enklere å forstå hvilket verktøy som håndterer hver enkelt endring.
“Rediger med Elementor”-knappen
Det første du kanskje legger merke til, er at du nå har en ny blå Rediger med Elementor-knapp som vises i verktøylinjen i blokkredigereren når du redigerer en side eller et innlegg.
Når du klikker på knappen vil siden åpnes i Elementors visuelle redigeringsverktøy i stedet for blokkredigereren. Du kan veksle mellom de to. Sider som er redigert i Elementor viser fortsatt Rediger med Elementor-knappen når du går tilbake til WordPress-dashbordet, men du kan også når som helst åpne dem i den vanlige blokkredigereren.
Slik installerer du Elementor Pro (valgfritt)
Hvis du har kjøpt en Pro-lisens, kan du laste ned ZIP-filen med Pro-utvidelsen fra Elementor-kontoen din på elementor.com.
Gå deretter til Utvidelser → Legg til utvidelse → Last opp utvidelse, velg ZIP-filen og klikk Installer nå.
Etter installasjonen må du aktivere Pro-utvidelsen og koble til lisensen din via Elementor → Editor → Home → Connect & Activate. Husk at også gratisversjonen fortsatt må være aktivert. Pro-versjonen supplerer den eksisterende utvidelsen, den erstatter den ikke.
De første innstillingene du må konfigurere
Før du begynner å lage sider, åpner du Elementor → Innstillinger og sjekker to ting.
- Post Types styrer hvor “Rediger med Elementor”-knappen vises. Som standard er Elementor aktivert for både sider og innlegg. Hvis du bare vil bruke det på sider, fjerner du avkryssingsmerket for innlegg (“Posts”) her. Da vil blokkredigereren være standard for blogginnhold, og det er som regel det beste valget.
- Disable Default Colors og Disable Default Fonts avgjør om Elementor eller det aktive temaet ditt styrer standardinnstillingene for farger og typografi. Hvis du for eksempel har konfigurert merkevarefarger og skrifttyper i Astra (se del 7) kan du aktivere disse to alternativene for å instruere Elementor til å arve innstillingene fra Astra i stedet for å overstyre dem med sine egne standardinnstillinger. Da vil nettstedet ditt fremstå visuelt ensartet uten at du trenger å angi de samme skrifttypene to steder.
Elementor → Settings → Integrations er der du senere kan koble til Google Fonts, reCAPTCHA eller tjenester fra tredjeparter. Ingenting av dette haster for å komme i gang.
Selve den visuelle redigereren, containere, widgets og hvordan man bygger en ekte side er temaet for vår neste veiledning.
Unngå fellen med for mange utvidelser
Den vanligste nybegynnerfeilen blant Elementor-brukere er å installere for mange utvidelser. I WordPress-katalogen kan du finne dusinvis av “Essential Addons for Elementor”, “Premium Addons”, “Unlimited Elements” og lignende pakker, og alle legger til mellom 30 og 100 ekstra widgets.
Hver utvidelse registrerer sine egne skript og stilark, og mange vil laste inn disse ressursene på hver side enten du bruker widgetene deres eller ikke. Hvis du installerer flere slike tilleggspakker kan du derfor ende opp med å laste inn langt mer JavaScript og CSS enn nettstedet ditt egentlig trenger. Denne overbelastningen reduserer ytelsen både i redigeringsarbeidet og for de publiserte sidene.
Begynn med det som allerede er inkludert i Elementor. De fleste bedriftsnettsteder trenger et ganske begrenset utvalg av widgets. Hvis du oppdager at du trenger noe spesifikt som Elementor ikke tilbyr bør du heller installere én enkelt utvidelse for akkurat den widgeten. Ikke kjøp en pakke med 80 widgets bare for å løse ett enkelt problem.
Før du kjøper utvidelser bør du også dobbeltsjekke om funksjonen allerede finnes som standard i Elementor. Trekkspill (accordion), faner, stjernevurderinger, fremdriftslinjer og sosiale ikoner er allerede inkludert, selv om mange utvidelsespakker fortsatt markedsfører sine egne versjoner av de samme widgetene.
I del 13 til del 16 tar vi for oss ytelseseffektene av overflødig JavaScript og CSS i detalj.
Konklusjon
Elementor er verdt å bruke når prosjektet krever det. Et lett tema, riktige innstillinger og måtehold med utvidelser vil sikre god ytelse både i redigeringsverktøyet og på det ferdige nettstedet. Alt som skjer etter installasjonen, fra containere og widgets til å lage din første egentlige side, er tema for del 10.
Neste trinn: