Introduksjon
Når Elementor er installert og konfigurert etter oppskriften i del 9, er redigeringsverktøyet klart til bruk.
Den beste måten å lære seg Elementor på er å lage en realistisk seksjon og se hva hver enkelt innstilling påvirker. Deretter bruker du den samme fremgangsmåten etter hvert som siden vokser. I denne veiledningen ser vi på detaljene i redigeringsverktøyet og viser deg hvordan du går fra en blank side til en seksjon på hjemmesiden som er nær publiseringsklar.
Trinn 1 — Åpne redigeringsverktøyet
- I WordPress-kontrollpanelet, gå til Sider → Legg til side.
- Gi siden en ordentlig tittel, for eksempel “Hjem” eller “Tjenester”.
- Klikk Redigér med Elementor.
Siden lastes inn på nytt i Elementors visuelle redigeringsverktøy.
Dette ser du
- Topplinjen viser funksjoner du sannsynligvis kommer til å bruke mye. Ikonene for ulike enheter lar deg veksle mellom forhåndsvisning for datamaskin, nettbrett og mobil. Struktur-knappen åpner en trevisning av siden. Publiser-knappen lagrer resultatet.
- I panelet til venstre kan du enten legge til widgets eller redigere det valgte elementet. Når ingenting er valgt, vises widgetbiblioteket. Når du klikker på en overskrift, en knapp eller en beholder skifter panelet til innstillingene for det aktuelle elementet.
- Arbeidsflaten i midten er en forhåndsvisning av siden i sanntid. I stedet for å redigere et skjema på backend-siden og håpe at det ser riktig ut i frontend, jobber du direkte på selve siden mens du ser den.
Eldre Elementor-veiledninger omtaler ofte Navigator-panelet. I de nyeste versjonene av Elementor heter dette panelet Struktur.
Trinn 2 — Start med én ekte hjemmeside-seksjon
I Elementor er de fleste sideoppsettene bygget opp av gjenbrukbare seksjoner (hero, funksjoner, anbefalinger osv). Hver seksjon er plassert i en beholder.
Vi kan illustrere dette ved hjelp av en enkel “hero”-seksjon med en overskrift, et kort avsnitt og én knapp.
Legg til beholderen
Klikk +-knappen på arbeidsflaten og velg en Beholder. For den første hero-seksjonen bør du gjøre det enkelt og bruke én enkelt beholder.
Du kan tenke på beholderen som en ramme. Den styrer bredden, margene, avstanden og bakgrunnen for alt som befinner seg inni den.
Legg til innholdet
Forsikre deg om at beholderen er valgt, og legg til disse tre widgetene i rekkefølge:
- Overskrift
- Tekstbehandler
- Knapp
Dette gjenspeiler de tre valgene du kommer til å ta om igjen og om igjen på hele resten av siden:
- Innhold. Hva hører til i beholderen?
- Struktur. Hvordan er seksjonen plassert og tilpasset?
- Handling. Hva er det neste den besøkende skal gjøre?
Bruk beholder-innstillingene før du formaterer hver enkelt widget
Nybegynnere formaterer ofte hver enkelt widget én etter én, og oppdager først senere at hele seksjonen fortsatt ser ubalansert ut. Elementor fungerer bedre når du starter på beholdernivå.
Velg den ytre beholderen og se på disse innstillingene først:
- Innholdets bredde. Dette bestemmer hvor stor plass innholdet kan ta i bredden. For de fleste bedriftssider er innhold i rammer lettere å lese enn tekst som går helt ut til kanten av siden.
- Min. høyde. Dette gir avsnittet nok plass vertikalt til å se harmonisk ut.
- Avstand. Avstand gir luft inne i seksjonen. Hvis for eksempel en overskrift ligger helt inntil kanten, skyldes det som regel at det ikke er angitt avstand.
- Mellomrom. Mellomrom styrer avstanden mellom elementene. Det er bedre enn å plassere skillelinje-widgets overalt.
- Justify Content og Align items. Disse innstillingene bestemmer hvor i seksjonen innholdet skal plasseres. Et hero-banner kan fungere både med sentrert og venstrejustert innhold.
Når du er fornøyd med utseendet på beholderen kan du gå videre til utformingen av overskrifter, tekst og knapper.
Vaner som kan spare tid
I det videre arbeidet med siden er det noen grunnleggende vaner som gjør Elementor mye enklere å håndtere.
Bruk Mellomrom til å regulere avstanden mellom elementer som tilhører samme beholder. Det er best å ikke endre margene på widgeter, bortsett fra hvis ett enkelt element bevisst skal bryte mønsteret. Sider som er bygget med individuelle marger er mye vanskeligere å rydde opp i senere.
Bruk beholdere til oppsett og widgeter til innhold. Hvis en seksjon virker for bred, for trang eller feil justert, bør du sjekke beholderen før du begynner å tukle med overskriften eller knappen. Det er vanligvis den ytre strukturen som er årsaken til problemet.
Sjekk også selve sideoppsettet hvis arbeidsflaten virker innrammet eller for smal. Både Astras og Elementors egne sideinnstillinger kan påvirke den tilgjengelige bredden.
Trinn 3 — Angi farger og skrifttyper for hele nettstedet på et tidlig tidspunkt
Når den første seksjonen ser OK ut, klikker du på den runde Elementor-logoen øverst til venstre og åpner Nettstedsinnstillinger fra menyen. Det er i de globale innstillingene at enkeltstående designvalg blir til et gjennomført utseende for hele nettstedet.
- Med Globale farger kan du definere fargepaletten én gang for alle. En kaféside kan for eksempel ha en kremfarget bakgrunn, mørk espressofarget tekst og en dempet grønn aksentfarge på knappene.
- Globale skrifer fungerer på samme måte for typografi. Velg én font for overskrifter og én for brødtekst, og hold deg til disse. Siden fremstår umiddelbart mer helhetlig når alle seksjoner bruker det samme begrensede utvalget av skrifttyper.
Ensartede skrifttyper og farger gjør en bedre jobb enn dekorative effekter.
Når disse grunnleggende elementene er på plass, kan du velge hvor på siden du vil ha et tydeligere visuelt fokus.
Trinn 4 — Lag siden i ryddige etapper
Når hero-seksjonen er på plass er det logisk å legge til andre standard elementer, for eksempel:
- en kort innledning
- en enkel funksjonsoversikt
- en blokk med anbefalinger eller vurderinger
- en oppfordring til handling
Legg til en seksjon, sjekk avstand og bredde, og gå videre til den neste.
Elementor gjør det fristende å hoppe rett til animasjoner, skillelinjer og ekstra widgets før sidens grunnstruktur er på plass. Motstå den fristelsen. En enkel side med tydelig hierarki og veldefinerte mellomrom er alltid bedre enn en som er alt for tettpakket. Lag først et solid fundament, så kan du legge til kule effekter senere.
Når bør du bruke maler?
Maler og nettsidepakker kan være nyttige hvis du vil ha et raskt design-oppsett. De er ikke obligatoriske, og de erstatter ikke kunnskap om redigeringsverktøyet.
Hvis du importerer en mal bør du bruke den som utgangspunkt, ikke som ferdig design. Bytt ut teksten, bytt ut bildene, sjekk avstandene og fjern alt som kompliserer siden uten å forbedre den.
Ignorer inntil videre
Elementor tilbyr et enormt utvalg av widgets, i tillegg til mange Pro-widgets og tilleggsprogrammer fra tredjeparter. Det kan gi inntrykk av at en god side oppnås ved å legge til stadig flere elementer.
Det stemmer ikke.
Selv med et lite antall widgets kan du oppnå utrolig mye når du skal lage din første publiseringsklare side.
- Overskrift
- Tekstbehandler
- Knapp
- Bilde
- Skillelinje
- Ikon
- Beholder
Hvis du begynner å bruke slidere, tellere, flytende knapper og animasjoner før siden fungerer godt uten dem, blir resultatet som regel dårligere.
Trinn 5 — Endringsloggen er ditt sikkerhetsnett
Elementor registrerer alle endringer du gjør. Hvis du ved et uhell sletter en seksjon eller endrer avstanden slik at oppsettet blir ødelagt, kan du gå tilbake til forrige versjon uten å måtte starte på nytt.
Klikk Tidligere versjoner-ikonet i toppmenyen (klokkeikonet) for å åpne historikkpanelet.
Panelet har to faner.
- Valg viser alle endringene du har gjort i løpet av den aktuelle økten. Hvis du klikker på en handling i listen, går siden tilbake til slik den så ut på det tidspunktet. Dette er detaljert angre-funksjon som er mer presis enn Ctrl+Z, siden du kan se hva som faktisk ble endret i hvert enkelt trinn.
- Tidligere versjoner viser alle versjoner av siden som er blitt lagret eller publisert. Hver versjon er tidsstemplet og knyttet til brukeren som lagret den. Klikk på en versjon for å forhåndsvise den, og klikk deretter på Bruk for å gjenopprette den versjonen, eller Forkast for å gå tilbake til den nåværende siden.
Valg-listen tømmes når du forlater redigeringsverktøyet. Versjoner lagres i databasen slik at du kan komme tilbake flere dager senere og fortsatt gjenopprette en side til en tidligere versjon.
Lagre ofte
Hver gang du klikker på Lagre utkast eller Publiser lagrer WordPress en ny versjon. Hvis du har skrevet halvparten av en side og vil gjøre endringer du ikke er helt trygg på, bør du lagre først. Det gir deg et godt utgangspunkt å gå tilbake til hvis eksperimentet ikke går som planlagt.
Konklusjon
Nå som du har laget en ferdig seksjon og sett hvordan siden ble bedre gjennom små, synlige endringer virker forhåpentligvis Elementor mindre avskrekkende.
I den neste artikkelen skal vi se nærmere på de elementene som vises på alle sider på nettstedet. Del 11 omhandler den overordnede strukturen rundt Elementor-innholdet ditt, inkludert hvordan Astra og Elementor fordeler oppgavene i et realistisk oppsett.
Neste trinn: