-
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.