INNFØRING DIVI:
GRUNNLEGGENDE:
ARBEID MED INNLEGG:
Annet arbeid:
Fikse feil…
1 – Logge inn
- For å logge inn på din nettside skriver du «/admin» bak rot-domenet.
- Eksempel: dittdomene.no/admin
2 – Kontrollpanel
- Kontrollpanelet er det første du møter når du logger deg inn. Dette kalles også for «Back-end». Her har du oversikten over ditt nettsted. Hva som er synlig i venstre-menyen og på kontrollpanelet avhenger av nettsiden din, hvilken tilgang du har, og hvilke applikasjoner/utvidelser som er installert.
- Du kan flytte på elementene du ser her i oversikten, eller du kan skjule de du ikke trenger ved å trykke på visningsinnstillinger oppe i høyre hjørne. Den som oftest er den viktigste modulen i oversikten her er Google Analytics Dashboard – denne viser en grei oversikt over statistikk for nettsiden din. Du kan endre visning og se forskjellig typer statistikk ved å endre i nedtrekksmenyene til denne modulen.
- Til venstre ser du oversikt over hva du har tilgang til på nettsiden. De som oftest er av betydning her er:
- Innlegg: Her vises oversikten av blogginnlegg, nyhetsartikler, eller andre typer saker som er satt opp for dere. Du kan gå inn her å gjøre endringer på Yoast SEO modulen, eller evt andre «Back-end» endringer som ikke gjøres i «Front-end».
- Media: Her alle filene som er lastet opp til nettsiden. Dere kan laste opp filer, slette, gjøre justeringer på filer osv her. Merk at et bilde vil ikke endres i «Front-end» (på nettsiden, det folk ser) dersom du sletter og laster opp nytt bilde i biblioteket. For å endre bilder i Front-end må man bruke redigeringsmodus. Se eget punkt om dette.
- Sider: Her ligger oversikt over alle sidene/undersidene som er satt opp for nettsiden din. Du kan gå inn her å gjøre endringer på Yoast SEO modulen, eller evt andre «Back-end» endringer som ikke gjøres i «Front-end».
- Prosjekter: Dette er et alternativ til «innlegg», som ofte brukes til referansesaker, prosjekter, kundecaser eller liknende. Denne seksjonen kan gå under flere navn, og brukes avhengig av nettsiden og oppsett.
3 – Enkel redigering av tekst
- For å gjøre enkle endringer i tekst må du først være logget inn. Det finnes flere fremgangsmåter for å redigere tekst, men vi fokuserer på den enkleste her.
- Oppe i venstre hjørne vil du se navnet på nettsiden din. Trykk på denne og du vil komme til nettsidens forside.
- Om du holder musen over navnet vil du få en drop-down som sier «vis nettside» – du kan også trykke på denne.
- MERK: at du kan trykke på dette navnet for å komme tilbake til kontrollpanelet når du er i «Front-end»
- Naviger deg til siden/innlegget du ønsker å gjøre endringer på og trykk deretter på «Aktiver Visuell Bygger» oppe på verktøylinjen. Denne aktiverer nettsidebyggeren som brukes på våre nettsider, altså «Divi».
- Finn frem til teksten du ønsker å redigere, og du kan velge å gjøre endringer på flere måter:
- Trykke på teksten du ønsker å redigere og gjøre endringene direkte, eller
- Trykke på tannhjulet i grå modul/tekstmodul for å få opp mer alternativ.
- Denne måten minner litt om Word, og flere av elementene her er de samme.
- Når endringene er gjort kan du lagre endringene ved å trykke på «Lagre» nede til høyre.
- Merk: Dersom du ikke ser «lagre» i høyre hjørne, se om du må trykke på den lilla sirkelen nederst i midten av skjermen først for å åpne menyen.
- Avslutt så den visuelle byggeren i verktøyslinjen i toppen.
4 – Endring av bilder
- Det finnes oftest to forskjellige måter å endre bilder på. Et bilde kan være en «bildemodul», eller det kan være en «bakgrunn».
- Dersom det er en bildemodul:
- Naviger til siden du ønsker å endre bildet på.
- Aktiver visuell bygger.
- Lokaliser bildet du skal endre, og trykk på det grå tannhjulet til bildemodulen.
- Du kan nå laste opp et bilde, eller du kan finne et eksisterende bilde i mediebiblioteket.
- Merk at du kan gjøre flere design-tilpasninger med bildet under «utforming»-fanen – men stort sett avhenger visningen av bildet av hvordan formatet på bildet er. Altså – landskapsbilder/horisontale bilder kan ikke gjøres om til vertikale/portrett-bilder – dette må gjøres før bildet lastes opp.
- TIPS: Du kan bruke online tjenesten birme.net til å endre bilder enkelt online.
- Når bildet er endret kan du lagre endringene og avslutte den visuelle byggeren i verktøylinjen i toppen.
- Dersom det er et bakgrunnsbilde:
- Naviger til siden du ønsker å endre bildet på.
- Aktiver visuell bygger.
- Lokaliser bildet du skal endre, og trykk på det grønne tannhjulet til radmodulen, eller eventuelt det blå eller oransje tannhjulet for seksjonen.
- Finn hvor det står «bakgrunn» – her skal du normalt se et bilde dersom det er brukt et bilde som bakgrunn.
- Det kan være at du må trykke på bilde-ikonet for å se selve bildet.
- Endre bildet her ved å finne nytt i mediebiblioteket eller laste opp.
- Du kan velge å endre bildets posisjon og diverse andre ting her om ønskelig.
- Lagre endringene og avslutt visuell bygger.
5 – Seksjoner, rader, moduler
- For å gjøre mer avanserte endringer trengs det litt mer grunnleggende kunnskap om Divi, hvordan strukturen fungerer, og hva de forskjellige betyr for design. Du finner en god innføring ved å følge denne linken.
Seksjoner er de «ytterste» områdene på nettsiden, og er er byggesteinene som inneholder rader og moduler. De har enten fargen blå, oransje, lilla eller lysegrønn. Hvilken farge de har avhenger av hvordan nettsiden har blitt designet/satt opp av oss.
- Blå: Dette er ordinære seksjoner, de som oftest blir brukt og de du oftest vil se.
- Oransje: Kalles for spesielle seksjoner, eneste forskjellen er hvordan innholdet behandles.
- Lilla: Dette er fullbredde-seksjoner, og brukes kanskje til forsiden spesielt, eller til spesielle gallerier/slideshow.
- Lysegrønn: Dette er globale seksjoner som deles over flere undersider på nettsiden. Det er best at du vet hva du gjør før du gjør endringer i seksjoner eller moduler som er lysegrønne i farge.
Rader/kolonner er det som ligger inne i seksjonene for å definere struktur/design/layout på siden. Her justerer man kolonnebredde og antall kolonner. Disse har fargen grønn. De vil være lysegrønne dersom de er globale.
Moduler er innholdet på siden, og kan være f.eks tekst-modul, bilde-modul, nedtellere, kontaktskjema, osv osv – det finnes 30+ moduler (avhengig om det er tredjeparts-utvidelser på nettsiden). Disse har fargen grå. De vil være lysegrønne dersom de er globale.
Alle elementer har ikoner oppe i venstre hjørne. De samme ikonene går stort sett igjen på seksjoner, rader, og moduler. Ikonene er nokså selvforklarende, men de viktigste er nok pilene/flytt, tannhjulet, dupliser og søppelbøtta/slett. Tannhjulet gir deg flere innstillinger/valg for det aktuelle elementet.
En kan legge til seksjoner, rader og moduler ved å trykke på «+»-tegn som man finner rundt omkring.
Anbefaler at dere tar en gjennomgang temaets egen veiledning som er linket til øverst i dette punktet. Den gir en god innførelse i hvordan temaet fungerer.
6 – Gjøre endringer i meny
Dersom du legger til nye sider, eller ønsker å gjøre endringer i meny generelt har du en del muligheter. Videoen over viser en oversikt over noen av tingene du kan gjøre:
- Legge til nye menypunkter
- Endre rekkefølgen på meny-strukturen
- Legge innlegg i menyen
- Legge til eksterne linker i menyen
- Åpne disse i nytt vindu ved å manuelt krysse av for dette
Noen nettsider har flere type menyer, f.eks hovedmeny, footer-meny, egen produktmeny, osv. Man får da opp muligheten til å velge hvilken meny man vil redigere. Det kommer ikke frem i videoen da demosiden bare har en meny.
Man kan også lage helt nye menyer, samt gjøre andre ting mtp styling – men dette kommer ikke frem i videoen da det anses som mer avansert funksjonalitet.
7 – Opprette ny side (kopiere en eksisterende, og laste inn mal)
Videoen over viser hvordan man oppretter en ny side ved å kopiere en eksisterende side. Stort sett vil det være jobb for viderekomne å opprette nye sider og arbeide med nytt innhold, men av og til er en del av jobben vi gjør at vi lager maler på design til nye sider. Videoen viser i tillegg hvordan man legger den nye siden inn på hovedmenyen, samt hvordan man kan legge til rader og kopiere moduler.
Videoen under viser hvordan man henter inn en side fra en lagret mal. Alle kunders nettsider er forskjellige, og basert på hvilke design og layout som er levert vil arbeidet med sider være forskjellige for alle kunder. I tillegg viser filmen under hvordan du kan slette alt innhold på en side, og laste inn mal på nytt.
8 – Lage et innlegg med standard WordPress Editor (anbefalt)
Den anbefalte (og enkleste) måten å legge til et innlegg er å bruke WordPress sin standard editor. For å lage et nytt innlegg følger du prosessen i videoen over. Se gjerne stikkordform av prosessen under her også:
- Når et nytt innlegg opprettes får du valget mellom å bruke Divi Editor eller Standard Editor. Det enkleste er å bruke Standard Editor, også kjent som Gutenberg Editor.
- MERK: Dersom du bruker Divi editor for å lage et innlegg vil alt innholdet bli slettet om du bytter tilbake til Standard Editor.
- Prosessen for å lage et innlegg forklart kort er:
- Lag en tittel.
- Velg Standard Editor.
- Tildel kategori for innlegget eller lag en ny.
- Velg et fremhevet bilde fra biblioket eller last opp fra datamaskinen din.
- Skriv artikkelen og legg til evt bilder (se punkt nedenfor)
- Lagre kladd, eller publiser innlegget.
- For å legge inn flere avsnitt, bilder eller gallerier i innlegget ditt gjør du som følger:
9 – Lage/redigere et innlegg med Divi Editor
I noen tilfeller kan det lønne seg å bruke Divi byggeren/editor til å lage (og jobbe med) innlegg. Dette er kanskje en bedre måte å jobbe på dersom man ønsker mer fleksibilitet, og når man har mer erfaring med WordPress og Divi generelt, og er komfortabel med Divi byggeren og de mulighetene den gir. Når man bruker Divi byggeren jobber man med innlegget litt på samme måte som man gjør med resten av nettsiden – altså i Divi sitt grensesnitt.
Av og til ønsker man også å ha spesielle layouts og design på blogg-innleggene, da kan også Divi være et bedre alternativ enn standard WordPress Editor. Men i utgangspunktet skal Standard Editor være godt nok (og enklest) for de aller fleste.
MERK at dersom du først har begynt å jobbe i Divi editor på et innlegg, så kan man ikke gå tilbake til standard WordPress editor – da mister man alt innholdet i innlegget. Man kan derimot konvertere et innlegg laget med standard editor til å bruke Divi editor uten å miste innhold.
Det er ikke så enkelt å skrive en bruksanvisning for Divi editor ettersom de aller fleste blogger som bruker dette har en form for spesiell/unik tilpasning. Men videoen over gir et inntrykk av hva som kan gjøres med Divi byggeren i forbindelse med innlegg.
10 – Endre URL på side eller innlegg
En URL, eller adressen, til en side kan endres hovedsakelig på to forskjellige metoder. Videoen over viser begge disse to metodene. Merk at dersom det finnes intern-linker på siden som linker til disse undersidene må også disse oppdateres manuelt for å peke til ny url.
Merk også at dersom siden har blitt delt på f.eks Facebook, så vil folk få en «404»-melding om at siden ikke eksisterer om de klikker på Facebook-innlegger og du har endret url-en.
11 – Legge inn link / internlinking på siden / Link til PDF
For å linke til undersider eller f.eks PDF-dokumenter i tekstmoduler og andre plasser i Divi byggeren må det legges inn manuelle linker. Disse linkene må oppdateres dersom url-en/adressen endres senere.
I tekst-moduler fungerer det omtrent som med Word, man legger inn en hyperlink. For andre moduler finner man stort sett et eget felt for «link».
Man må da altså først finne adressen/linken/url-en man ønsker å linke til. Er det snakk om en PDF, må denne først lastes opp i medie-biblioteket, for så å hente ut link. Er det snakk om en underside, må du hente ut link fra undersiden. Normalt sett henter vi ut liken som er bak domenet ditt. F.eks dersom nettsiden din er «www.minnettside.no/link-til-underside» henter vi ut «/link-til-underside/».
Videoen over viser hvordan man linker til undersider eller eksterne sider i moduler og tekstmodul.
Videoen under viser hvordan man kan linke til en PDF:
12 – Arbeid med SEO (Yoast SEO)
Alle sider og innlegg har helt nederst i back-end en «Yoast SEO»-modul. Med denne modulen kan man påvirke hvordan siden eller innlegget fremstår i søk når noen finner den i f.eks Google søk. Man kan skrive en tittel, en metabeskrivelse, samt at man kan velge hvilket bilde som skal vises når siden eller innlegget deles på f.eks Facebook.
Man kan også skrive inn et nøkkelord, eller en nøkkelfrase som det også kalles (keyword / keyphrase). Det er viktig å ikke blande dette med hvordan man jobbet med nøkkelord i «gamle dager». Før pleide man å putte så mange nøkkelord man kunne i en artikkel – men det er ikke lenger slik det fungerer. Gjør man det i dag kan man risikere at det får negative konsekvenser. Det man skriver inn i feltet for nøkkelord / nøkkelfrase i dag er et kort begrep eller et ord som beskriver innholdet på siden. Altså, et oppsummerende ord eller frase. Dersom siden f.eks handler om «De beste turløypene i Rogaland» så kan nøkkelordet/nøkkelbegrepet være «Beste turløyper Rogaland». Helt enkelt og kort, og ofte i samtråd med tittelen på siden eller innlegget.
MERK at denne modulen har ikke noe med å klatre høyere i søkeresultater å gjøre nødvendigvis, men den hjelper søkemotoren å forstå hva siden/innlegget handler om, samt gjør den mer tiltalende for de som ser den i søkeresultatene.
Dette bør gjøres for alle viktige sider og innlegg du har på nettsiden din.
Nedenfor her viser hva Yoast SEO modulen gjør i Google, altså definerer overskrift og beskrivelse slik søkere vil se det:
13 – Dele på facebook – viktige ting å huske på + feilsøking
Når man deler en side på Facebook henter Facebook inn det første den finner av informasjon på siden. Ofte er ikke dette det man vil vise med posten eller siden man deler. Derfor finnes det, i samme modul som nevnt over – YOAST Seo, en funksjon hvor man kan definere hva Facebook skal hente ut av informasjon på siden. For å finne denne må du først finne «YOAST SEO» på siden i «back-end». Denne ligger ofte under selve innholdet/editoren. Trykk på pilen til høyre på modulen om den ikke er åpen, og trykk så på «Social». Her er det noen felter du kan fylle inn for å fortelle Facebook hva som skal hentes: Tittel, beskrivelse og et bilde (må være mimimum 1200px). Oppdater siden etter at du har lagt dette inn.
Dersom du allerede har prøvd å dele siden på Facebook før du har definert disse feltene nevnt over må du tømme historikken til Facebook. Facebook har en historikk som gjør at informasjonen ikke endres om du prøver å dele på nytt. Du kan tømme historikken ved å benytte Facebook Debugger Tool. Lim inn URL i feltet her, og trykk «debug». Vent til den har jobbet ferdig, og trykk så «Scrape Again». Dette gjør at Facebook henter ut informasjon på nytt. Du skal nå se at ny informasjon hentes ut. Dersom ikke alt kommer ved første klikk kan du trykke «Scrape Again» et par ganger til. Etter du har gjort dette kan du dele innlegget på Facebook og alt skal være OK. Husk å laste inn Facebook på nytt før du deler igjen.
Hvordan fanen til Facebook i Yoast SEO ser ut:
14 – Endre i forskjellige skjermstørrelser
Av og til ønsker vi at et element skal oppføre eg annerledes på en mobil-skjerm enn på en datamaskin. Derfor har vi noen valg som gjør at vi enkelt kan overstyre visningen på dataskjerm, tablet/nettbrett, og mobil. Merk at det bør ikke tukles med om dere ikke vet hva dere gjør, da vi ofte har forhåndssatt f.eks tekst til å følge et visst design. Men i teorien har man mulighet til å tilpasse alle seksjoner, rader og moduler til forskjellige skjermstørrelser.
Når man trykker på tannhjulet på hvilken som helst seksjon, rad, modul vil man komme inn på innstillingene. På de aller fleste felt her inne vil man ved å holde musen over tittelen på en innstilling, f.eks «tekststørrelse» (som i videoen over) få opp et «mobil-ikon». Trykker man på dette vil man få opp tre faner, en for desktop, en for tablet, og en for mobil. Trykker man på disse fanene kan man gjøre justeringer basert op skjermstørrelsen.
Tips – Skjule noe på mobil?
Høyreklikk på modul, rad eller seksjon som du ønsker å skjule og velg «deaktiver/deactivate» og marked i rødt de skjermstørrelsene hvor det skal skjules. Du finner også dette valget ved å trykke på de tre prikkene helt til høyre når man holder over en modul, rad eller seksjon:
15 – Tilbakestille moduler / rader / seksjoner
Har du opplevd at en rad, seksjon eller modul har havnet «på avveie», og kanskje ligger plassert feil/inntil kanten av skjermen? Eller er det noe som ser merkelig ut etter at du gjorde noen endringer? Da kan det være at du ved et uhell har tuklet med innstillinger for avstand eller plassering for en modul, rad eller seksjon. I videoen over viser vi hvordan du kan tilbakestille moduler, rader og seksjoner til standard verdier.
På alle moduler, rader og seksjoner – om du holder musen over dem – vil du se en del forskjellige ikoner. Trykker du på tannhjulet kan du gå inn i innstillinger og kikke om det er noen plass det er noen verdier som ikke skal være der. Ofte ligger «feilen» i «spacing/avstand» eller «sizing/størrelse». Også når du holder musen over modul, rad eller seksjon vil du se at helt til høyre er det tre prikker. Trykk på disse prikkene og finn valget for å «tilbakestille modul/rad/seksjon stiler».