Last ned her:
Litt nyare versjon uten kvit font som deafult:
https://www.spacemoped.com/wp-content/uploads/2023/11/Scrollyteller186img.zip
Forrige versjon, tekst over bilder blir kvit:
https://www.spacemoped.com/wp-content/uploads/2023/10/scrollyTeller185img.zip
Enda en versjon oppdatert 06.12.2023:
Denne har litt forbedra bildeskift som forhåpentligvis fiksar at ett tredje bide av og til var synleg under fade mellom to bilder. Den har også litt meir utvikla CSS med ei ny klasse for tekst med kvit bakgrunnsboks:
https://www.spacemoped.com/wp-content/uploads/2023/12/scrollyTeller195img.zip
Scrollyteller er eit under tema (child theme) basert på gratisversjonen av Generatepress. Generatepress er et bra tema med masse fleksibilitet for layout, typografi, fargevalg osv. Målet med Scrollyteller er at visuell historiefortelling i WordPress skal være så enkelt og gratis som mogleg. Eg anbefaler og å installere Generateblocks som er en bra plugin for å kontrollere Layout og litt andre ting. Eg anbefalar å droppe sidebyggeverktøy (page builders) som feks Elementor som er generelt kjent for å gi dårleg ytelse, og som tvingar deg inn i eit gigantisk dashboard som lever sitt eget liv inne i WordPress.
Visuell historiefortelling og interaksjon
Scrollyteller lar deg sette fullskjermbilder i en linær narrativ sammenheng saman med andre element (tekst, bilder, grafikk, figurer osv.) som kan scrolle over bakgrunnen for å drive historien. Å bruke det er ganske enkelt, trur eg(?), du må følge nokre steg for innstillingar i WordPress/generatepress og så markere elementa som skal bidra til historien med eit spesifikt css-klassenavn (meir om det seinare). For å drive historien framover må brukaren scrolle framover eller bakover. Scrollinga har blitt testa for ganske vill scrolling og ser ut til å takle det, men ta kontakt hvis du opplever rusk. gauheg@oslomet.no
Sånn lagar du ei histore
Dette er en teknisk gjennomgang. Som i all historifortelling må du ha noko å fortelle, og så gjerne masse opptak i form av lyd, bilder, skisser, grafikk, geodata, video* eller noko anna. Hvis du har det kan kanskje Scrollyteller hjelpe deg å fortelle historia på en billig/gratis og relativt enkel måte. Det fins betalløysingar som fiksar dette og masse meir, men altså for $$$. Eg har ikkje sett noko gratis til WordPress enda for da ville eg brukt det heller en å lage det sjølv. Forsett hvis du likar gratis.
Sjekkliste:
- Ein ganske ny WordPress installasjon m. admin rettigheter
- Scrollyteller temaet installert
- Bilder for bakgrunn
- Store bilder, anbefalt 2560px bredde ca 70% jpeg komprimering
- For grafikk bruk .PNG format med 2560px bredde
- Hvis du har vektor, eksportér til .PNG eller kanskje <svg> kan funke i en generateblock container?
- Anbefalt: Generateblocks for layout kontroll.
Steg 1. – Lag ei ny side
Logg in i WordPress og lag ei ny side.
Inne på sideredigering må du velge at sida skal ha full bredde sånn at vi kan ha bilder som dekker heile skjermen:
- Hvis høgremenyen ikkje er synleg, trykk tannhjulet oppe til høgre.
- Sørg for at Page / Side tabben er valgt.
- Under valget ‘Content Container’ velg ‘Full width’.
Steg 2. – Lag historien
Eg trur dette er ganske lett. Det fungerer sånn:
Legg inn så mange bilder du vil ha i historien. Du kan legge inn alle med ein gang, eller ta det etterkvart.
For kvart bilde som skal være fullskjerm må du:
- Velge ‘Full size’ som størrelse.
- Gi bildet eit CSS-klassenavn:
- I høgremenyen, velg ‘Block’. Sørg for at du har valgt riktig ‘Block’ på sida, altså bildet ditt.
- Velg Scale: Cover
- Scroll heilt ned og klikk på ‘Advanced’
- I tekstboksen ‘Additional CSS Class(es) skal du skrive ‘bgimage’ sånn:
No veit Scrollyteller at dette bildet skal fungere som bakgrunnsbilde når enkelte element er på sida.
Tips om bilder: Bildet bør helst ha en sentrert komposisjon for å fungere på ulike skjermstørrelsar. Store flater i eit bilde kan bli brukt som bakgrunn for overliggande tekst.
Eit bilde må ha minst eit element som skal scrolle over bildet. Det kan ofte være en liten tekstbit. Du kan dele opp lengre tekstar på fleire tekstelement (paragrafar, overskrifter) som lagar historien. Det går også an å ha en lengre meir kompakt tekst som i layout kan ligne meir på ei bokside. Du kan også bruke mindre bilder eller grafiske element som kan scrolle over sida.
For å lage eit enkelt eksempel skal vi ha tre tekstelement som skal scrolle over eit bilde:
Scrollyteller fungerer sånn at du først må sette inn bildet som skal i fullskjerm og så gi det klassenavn ‘bgimage’ som beskrive over.
Etter fullskjermbildet og før neste bilde må du sette inn alle element som skal scrolle over bildet. Dei skal ha klassenavn ‘swoosh’.
Sett inn tre paragraf element med litt tekst, gi kvart element klassenavn ‘swoosh’
Sett inn minst eit bakgrunnsbildet til (så du har minst to) og det klassenavn ‘bgimage’.
Lag fleir ‘swoosh’ tekstar osv.
Velg ‘Save draft’
Velg ‘Preview’
Fungerte det? Hvis ja les vidare. Hvis nei 🙁 send epost til gauheg@oslomet.no
Det var egentlig det. Sett inn så mange bilder du trenger i historien din og lag swoosh tekst.
Men vent litt no, det er litt til. Les vidare hvis du vil ha meir kontroll på Layout.
3. Layout på ‘swoosh’ element som scrollar over
Dette er klassenavn i Scrollyteller som du kan bruke for å plassere teksten til høgre, venstre eller sentrert med redusert breidde. Dette kan du bruke uten å installere Generateblock. Her er CSS klassene i generatepress:
rightie – plassérer elementet på høgre side
leftie – plassérer elementet på venstre side
centrist – plassérer elementet i midten og tar ca. en tredel av skjermbredden
halfwidth -plassérer elementet i midten og tar ca. halve skjermbredden
bookie – Passar for en lengre tekstbit og brukar en mindre fontstørrelse. Brukar svart serif tekst over en kvit delvis gjennomsiktig bakgrunnsboks.
Her er full CSS:
.rightie{
padding-left: 0%;
width: 40%;
left: 50%;
}
.centrist{
padding-left: 32%;
padding-right: 32%;
/*width: 40%;*/
/*left: 30%;*/
}
.halfwidth{
padding-left: 20%;
padding-right: 20%;
font-size: 1em;
}
.bookie{
font-size: 1.2em;
color: black;
background-color:rgba(255,255,255,0.6);
text-shadow:0px 0px 16px rgba(255,255,255,0.4);
font-family: serif;
padding: 2em;
text-align: left;
}
.leftie{
padding-right: 0%;
width: 40%;
left: 10%;
}Protip: Du kan også legge til din egen CSS klasse for å få meir kontroll på uttrykket. Du kan legge til CSS klasser i din installasjon av temaet ved å gå til: Appearance > Customize Additional CSS
Layout kontroll med Generateblocks, og litt om CSS
Ved å bruke Generateblocks får du masse kontroll på en relativt intuituv måte. En fint ting med Generateblocks er at du må forholde deg til relativt vanlege web element med vanlege egenskapar, men du kan gjere det på en meir intuitiv måte enn feks. med koding. For eksempel er den mest ‘vanlige’ blokktypen en container, som er omtrent det same som et div element som du kan justére med CSS. Husk at uansett kor fint dashboardet du brukar er (samme om det er Wix, squarespace, WordPress, Elementor, Generateblocks eller noko anna) så endar alle innstillingar opp som HTML/CSS, derfor bør du skjønne html/css hvis du vil drive med web. Eg meinar at Generateblocks kunnskap gir litt meir forståelse av web enn feks. Wix og elementor.
Repsonsive nettsider
Responsive betyr at sida tilpassar seg skjermen den er på. Når vi lagar nettsider bør visning på mobil ha topp prioritet. Det enklaste er å bruke emulert mobilvisning med developer tools i nettlesaren. Eg anbefalar å bruke chrome (Hvis du kan leve med Google) og/eller firefox som nettlesarar.
- Dev tools i Chrome: Høgreklikk og velg ‘Inspect. Eller hurtigtast F12 (Win / Lin) Ctrl + Shift + i (Win / Lin) Cmd + Opt + i (Mac)
- Dev tools i Firefox: : Høgreklikk og velg ‘Inspect. Eller hurtigtast F12 (Win / Lin) Ctrl + Shift + i (Win / Lin) Cmd + Opt + i (Mac)
For å sjå sida i emulert mobilvisning må du klikke
Enkelt eksempel: margin-left og max-width, CSS og Generateblocks
På ei nettside er det fint å kunne plassére og kontrollere tekst og andre element horisontalt. Vertikalt er det meir vanleg at feks. tekst tar den plassen det tar og det kan variére litt med skjermstørrelsen, men horisontalt er det fint å ha kontroll. Tekst som går fra venstre bildekant til høgre bildekant er ikkje så lesbar på store skjermar (pc / tv) mens på små mobilskjermar vil vi som regel bruke en større del av skjermbreidda for teksten. I CSS (ved å lage klasser som dei over) og i Generateblocks kan vi kontrollere dette.
max-width er en enkel regel for å kontrollere maksimal breidde på eit element. Du kan bruke ulike einheiter (units) for å begrense skjermbredden. Eg anbefalar px (pikslar) eller kanskje em (1em = 1 ‘tegnstørrelse’).
margin-left er nyttig fordi vi leser fra venstre til høgre. Her kan du godt bruke feks 20%, 40%, 60% som enhet for store skjermar og så redusére det for mindre skjermar. Det kan du fikse i Generateblocks.
Generateblocks eksempel – bruk Container elementet
Hiv du feks. vil ha ei rekke ‘swoosh’ element er det sannsynlig at du vil ha dei plassért likt på sida. Da er det greit å putte alle elementa inn ei eit container element og så kan du styre horisontal plassering og maks bredde for alle ved å justere containeren dei er inne i. Sånn gjer du det:
- Klikk på ‘+’ for å velge blokktype
- Velg type ‘Container’ frå generateblocks.
- Gi container elementet max-width: 400px og left-margin: 40%
- Juster max-width og left-margin og prøv deg fram for å finne noko som fungerer med di historie og dine bilder.
- 50-70 tegn på ei linje er regna for å gi bra lesbarheit
- Plasser nye element (tekst, bilder, grafikk osv) inn i container blocken.
- Gi kvart element css-klasse ‘swoosh’
- Når du er ferdig med å legge innhald i containeren trykker du på blå firkant for å kome til container elementet, så Enter.
- Legg inn nytt bakgrunnsbilde, ny container med nye ‘swoosh’ osv…
Det er masse meir du kan prøve med generateblocks. Du kan feks. plassére container eller element til høgre eller venstre for å skape en dialog effekt, litt som sms visning på en mobil. Men da må du være ekstra obs på kor høgre-venstre plasséringa fungerer nettopp på mobil, og kanskje gjere egne tilpasingar for mobilskjerm. Som bringer oss til…
Tilpassing til mobilskjerm
Emulert mobilvisning via developer tools i chrome/firefox er veldig nyttig og masse bedre enn wordpress sine verktøy for å teste mobil layout. Bruk developer tools masse! Sånn startar du det:
En stor fordel med generateblocks er nettopp at du kan sette egne instillingar for mobilvisning. Dette er også vanleg i CSS ved å bruke noko som heiter ‘media queries’. Meir om det i MOKV2400 hvis du endar opp der.
Du kan tilpasse alle(?) generateblocks element til mobilvisning og det er ganske enkelt. Desse blokkene har ei egen rekka tabbar rett under ‘Page | Block’ som viser tre ikon: PC, nettbrett og mobil. Klikke på enheten du vil tilpasse til og sett egne posisjoneringsverdiar for mobil. Det er feks ikkje så god idé å ha margin-left: 40% på mobilskjerm, da får du en veldig slank paragraf. max-width kan derimot være lik på mobil og pc visning. Husk at sjølv om du velger ‘mobil’ i generateblocks bør du sjekke at det faktisk ser bra ut på mobil ved å bruke preview og så teste med developer tools.