forside-gutenberg.mp4

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.