Heisan, det er Kristin her. I denne videoen
her skal vi se litt på hvordan vi kan bruke
Gutenberg til å sette opp en forside.
Gutenberg er altså den nye editoren i
WordPress versjon 5.0 som kom nå i desember.
Og det skal sies at det ikke er alle theme
som støtter alle funksjoner i Gutenberg
enda. Og hvis du har en veldig avansert
nettside med masse plugins og ekstra
tilpasninger, så anbefaler jeg at du venter
litt til med å oppgradere.
Men, jeg skal vise deg et eksempel på å
bruke et theme som støtter alle funksjoner
i Gutenberg. Det heter Atomic Blocks og er
et gratis theme du kan søke opp. Og det har
også en tilhørende plugins som heter
Atomic Blocks, den heter det samme. Den kan
også søkes opp via Utvidelser -> Legg til
ny. Den er gratis og den gir noen ekstra
muligheter i Gutenberg editoren.
Vi går rett på og starter på en ny side.
Jeg har opprettet en kladd her og kalt den
ny forside. I det themet her har vi tre
innebygde sidemaler, de finner du her nede.
Standardmal, Sidebygger og Full bredde.
Standardmalen og full bredde viser tittel
på siden, med litt padding over og under.
Det ønsker jeg ikke på forsiden. Derfor
bruker jeg sidebyggermalen, for den gir
meg et blankt "canvas" å jobbe med. Det
er som sagt ikke alle theme som har en
sidebygger mal, men jeg tror fler og fler
vil få det etterhvert. Vi skal starte med
å legge til en blokk. Gutenberg består jo
av blokker, vi legger til blokk etter blokk
ut fra hva slags innhold vi ønsker å
publisere. Så jeg starter med å klikke på
pluss tegnet for å legge til en blokk. Og
jeg velger den som heter "Dekke". Som du
ser her så kommer de mest brukte opp først,
men du har oversikt over alle tilgjengelige
blokker her. "Dekke" er en av de vanlige
blokkene, altså innebygget i standard
Gutenberg. Så vi kan klikke her også for
å få opp et såkalt "Dekke". Det jeg er ute
etter nå er et bilde som skal gå i full
bredde med en tekst som ligger over.
Jeg velger det solnedgang bildet her fra
Toscana, og da settes det inn et bilde og
et felt hvor jeg kan skrive inn en tittel.
Så jeg velger å skrive "Velkommen til
Toscanareiser AS. (Dette er bare en demoside,
jeg driver IKKE med reiser til Toscana :-))
Der har vi tittel på plass og når vi nå drar
musa over dette feltet så får jeg opp
den baren oppe her hvor jeg kan velge
utseende. Her kan du venstre, høyrejustere
eller midtstille, slik vi kunne i "gamle
dager". Men vi har også en mulighet
for å kjøre bred bredde eller full bredde.
Vi kan se på hva som er forskjellen. Jeg
kan velge bred bredde først og lagre og
forhåndsvise, og da ser du at bildet ikke
går helt ut til sidene. Men jeg ønsker at
bildet skal gå full bredde her, så jeg
klikker på full bredde her for å få bildet
til å gå helt ut til kantene. Og da er den
blokka egentlig klar. Som du ser så ligger
det noen valg på siden her. Når blokka er
valgt så står det "Blokk" her oppe og
alternativene du har dukker opp her sånn.
Her er det noe som kalles overlegg, dvs at
det legges et fargefilter oppå bildet. Og
hensikten med det er at teksten skal vises
tydelig. Hvis jeg hadde gått langt ned her,
så ser du at det ikke blir så mye kontrast
på selve teksten. Så jeg velger å justere
det filteret slik at jeg ser teksten tydelig.
Det er viktig i dette tilfellet. Bildet er
kun ment som dekor og ikke en viktig del
av selve innholdet. Du kan også velge ulike
farger. I det tilfellet her, så gir ikke det
noe godt resultat, men i noen tilfeller kan
det også fungere. Men jeg bruker svart
eller mørk grå i det tilfellet her. Da er den
ferdig, og vi skal legge til en ny blokk.
Og nå har jeg tenkt å bruke en av de blokkene
som følger med Atomic Blocks, så jeg klikker
på pluss tegnet igjen og scroller meg
ned til Atomic Blocks og velger Post
Grid, og den gjør at vi kan hente ut
innhold fra bloggen. Det innebærer
selvfølgelig at du HAR noen innlegg på
bloggen. Som du ser så får jeg inn 6
elementer og 2 kolonner og de legger seg
under hverandre. Jeg ønsker å ha kun 3
kolonner og 3 elementer synlig. Så jeg drar
i sliderene her til jeg får det resultatet
jeg ønsker. 3 elementer og 3 kolonner.
Som du ser så får vi litt "plassmangel" her
og jeg ønsker å kjøre den her også i bred
bredde. Den her kan du ikke kjøre i full
bredde, og det skal vi vel egentlig være
glad for. For hvis vi hadde gjort det, så
ville vi fått innhold som går heeeelt ut til
kantene på store skjermer, og det ser ikke
særlig bra ut. Så her har de tenkt litt for
oss på forhånd, og det er helt greit i
noen tilfeller. Så jeg velger bred bredde
for å vise dem på den måten her. Og så kan
du styre hva du vil vise ved å bruke de
valgene her. Du kan la vær å bruke
fremhevet bilde, hvis du ikke vil ha det
med. Da forsvinner det som du ser. Og jeg
kan la vær å bruke "post author", det er jo
kun jeg som skriver på denne bloggen så
det er ikke viktig å ha med. Så jeg tar
den vekk, og da står jeg igjen med dato og
utdrag og en såkalt "continue reading"
link. Den får du på norsk ved å skrive inn
Les mer.. her nede. Sånn! Da er egentlig
den grei. Vi kan lagre og kjøre en ny
forhåndsvisning. Og her har jeg bilde i full
bredde og utdrag fra bloggen. Det neste jeg
har tenkt å sette inn er også et element
som går i full bredde med grå bakgrunn.
Og så skal jeg ha to kolonner med et bilde
i den ene kolonnen og tekst i den andre
kolonnen. Og her også velger jeg en Atomic
Blocks blokk, som heter AB Container. Så jeg
klikker på den. Den vil du ikke se noe til
før du begynner å skrive noe. Jeg skal ha
inn en overskrift her og skriver inn
"Dette er en overskrift" og som du ser da
så får jeg opp paragraph ikonet på
venstre siden her. Jeg kan klikke på dette
feltet for å gjøre det om til en overskrift.
Og da ser du at jeg får opp h2, h3 og
h4. Jeg lar den stå på h2 fordi det er det
jeg ønsker å ha her sånn. Og selv om vi ikke
ser det så tydelig nå, så ligger det en
såkalt AB Container rundt dette
innholdet her. Så jeg fortsetter bare nå
og legger til en ny blokk med to kolonner.
Det er en av standardblokkene igjen som
ligger under oppsettelemener, så her klikker
jeg på kolonner og det settes automatisk
inn to kolonner. Og når jeg klikker på
innsiden her, så får jeg opp valgene for
de også, og jeg kan ha opptil 6 kolonner
om jeg ønsker det. Men her holder det med
2. Jeg vil ha et bilde i første kolonne så
jeg klikker på innsiden, klikker på
legg til blokk igjen og velger bilde.
Klikker på mediabibliotek igjen for å
hente opp et bilde. Jeg velger det her og
jeg kan skrive inn tekst i høyre kolonne,
bare ved å plassere markøren der. Jeg
kopierer inn litt "lorem ipsum" tekst bare
for å ha noe å fylle i feltet her. Da har jeg
overskrift, bilde og tekst som ligger inni
en såkalt AB Container. Jeg klikker nå på
utsiden av feltet og drar musa inn til jeg
ser den blå linja rundt hvor det står AB
Container oppe i høyre hjørne og da får jeg
opp valgmulighetene for den "containeren"
som disse elementene ligger i. Så jeg starter
med å legge inn en bakgrunnsfarge, jeg går
ned på "Background options" og bakgrunns-
farge og velger en lys gråfarge som bakgrunn.
I tillegg velger jeg å kjøre hele denne
blokka i full bredde. Her ser du at jeg har
to alternativer, midjustert eller full
bredde, så jeg velger full bredde. Men jeg
ønsker IKKE at innholdet skal gå helt ut
til sidene. Jeg skal vise deg hva som skjer
hvis jeg hadde lagret og forhåndsvist
nå. Så ser du, for det første, den her blir
"klint" helt opp til kanten, og bildet går
helt ut til kanten. Og det samme gjør
det her. Jeg ønsker å ha selve innholdet
i samme bredde som de blokkene som
ligger på oversiden. Derfor går jeg inn
her og justerer litt mer. Jeg vil ha litt
padding på toppen, over overskriften. Den
legger jeg på 3,5%. Du ser hva du gjør her,
til en viss grad i hvert fall. Også har vi
noe som heter "Inside container max width".
Den setter jeg på 1100px, og jeg tror
egentlig det er nok for å få denne blokka
her slik jeg ønsker å ha den. Så vi lagrer
kladd igjen, og forhåndsviser, og da ser du
at vi har fått riktig bredde. Det siste jeg
har tenkt å gjøre da, er å legge til en
tilsvarende blokk som den på toppen. Så jeg
legger til en ny blokk, et nytt "Dekke",
altså ett bilde som går i full bredde.
Velger mediabibliotek igjen, og her også
velger jeg full bredde for å få bildet helt
ut til kantene. Og jeg skriver inn en
tittel her også. Vi lagrer og så skal jeg
kjøre en forhåndsvisning på det. Og så
skal du få et lite stylingtips helt på
slutten her. Her sånn så ser du at det
blir en liten glippe mellom bildet og den
blokka med grå bakgrunnsfarge. Her er det
mulig å legge inn litt "custom styling" for
å justere det. Her kan vi legge inn en
egen CSS klasse på det feltet her sånn, og
så kan vi legge inn en negativ margin for
å fjerne denne "glippen" som ligger her.
Heng med! Det her er litt for avanserte
brukere, men det er ikke veldig vanskelig
så bare heng på så lære du kanskje noe
nytt. Her under "Avansert" så kan jeg
legge til en ekstra CSS klasse. Og jeg gir
den et navn. Den kan i prinsipp hete hva
som helst. Det må være sammenhengende
tekst med bindestrek mellom ordene. Og her
kaller jeg den for "bilde-sykkelferie".
Så lagrer vi igjen og går tilbake på
forhåndsvisning igjen. Og som du ser så
skjer det ingenting bare ved å legge til
en klasse. Vi må legge til litt mer her. Det
kan vi gjøre ved å klikk på "Tilpass", og
klikke på Ekstra CSS. Det vi har gjort nå
er å legge til en ekstra CSS klasse. En
klasse begynner alltid med et punktum.
Så selv om jeg har skrevet bilde-sykkelferie
i CSS feltet på baksiden, så må vi ha en
punktum foran, for at det skal fungere her.
Så skriver .bilde-sykkelferie, og så setter
jeg inn krølleparenteser. Det gjør du ved
å holde shift + alt + 8 på Mac. Og selve
stylingen skal inn mellom parentesene.
Jeg lager et linjeskift her og skriver inn
margin-top, og som du ser så får jeg litt
drahjelp, og det er marginen på toppen
jeg ønsker å justere her. Alltid kolon
bak. Vi kan scrolle litt ned så vi ser hva
vi faktisk gjør. Og her har jeg som sagt
tenkt å legge inn en negativ margin. Jeg
prøver meg på -10px til å begynne med,
og da ser du at bildet hopper litt opp.
Men det er ikke nok, så jeg legger til litt
til. Det er fortsatt en liten piksel igjen
her, så jeg justerer til -25px og dermed
er glippen tettet. Jeg avslutter linja med
semikolon. Nå kan vi publisere siden, og
lukke det vinduet her og da vil du se at
vi har en forside som fungerer ganske
greit. Det er selvfølgelig bare et eksempel.
Det kunne sikkert sett mye finere ut, men
du ser sikkert allerede nå at du har masse
muligheter her som du ikke hadde i den
gamle klassiske editoren til WordPress.
Jeg håper de ga deg noen tips til å komme
igang med å bruke Gutenberg.