I julekalenderen vår i 2020 satte vi opp en forside som besto av flere seksjoner. Den gangen brukte vi flere plugins for å oppnå ønsket utseende på siden. I dag har blokkredigering(eller Gutenberg som det ofte kalles) blitt et mye bedre verktøy, og jeg trenger ikke en eneste utvidelse for å sette opp samme layout. Resultatet blir så og si identisk, men nå skal vi gjøre alt med standard blokker i WordPress.
Vi går rett på sak! Vi skal sette opp det som ofte kalles en «Hero section» i denne videoen. Det betyr rett og slett et stort bilde, med en tittel og kanskje et par knapper. Vår side skal i alle fall ha det 😉
Theme brukt i videoen: Astra(gratis)
Plugins: Ingen
Er du klar?
Vi starter med å opprette en side. Jeg har kalt min for «Hjem» og jeg har valgt å skjule tittel. Det tar seg sjelden bra ut med en tittel øverst på siden, over en hero seksjon. I Astra har du et valg nederst i høyre sidebar som lar deg deaktivere tittel. Har du et annet theme og har installert EditorsKit, så har du et valg litt lengre opp i sidebaren under «Dokument» hvor du kan skjule tittel.
Blokker brukt i videoen over
«Section» – dette er den første blokka vi legger til, den kommer fra Ultimate Addons for Gutenberg, og det er denne som skal ha et bakgrunnsbilde. Klikk på «Background», velg bilde og hent opp et bilde fra mediabiblioteket. Jeg velger full bredde, både i høyre sidebar og på selve blokka.
For å legge til tittel og knapper og posisjonere dem riktig, legger vi til en ny «Section» blokk inni den forrige. Her lar vi innstillingene være i fred, ingen full bredde hverken her eller der.
Inni denne plasserer vi en «Advanced Heading», også en Ultimate Addons for Gutenberg blokk. Denne blokka har både en tittel, en skillelinje og en beskrivelse.
Under denne legger vi til et skilleelement, bare for å skape litt avstand mellom tittel og knapper(vi gjør det i motsatt rekkefølge i videoen, men det har ingen praktisk betydning). Et «skilleelement» er en av standardblokkene i WordPress.
Så kommer knappene. Her bruker vi standardblokka i WordPress som heter «Knapper». Den første knappen vil få samme styling som knapper generelt har i themet ditt. Min er brun med hvit tekst. Klikk på plusstegnet ved siden av knappen for å legge til en til. Her har jeg valgt å invertere fargene, så denne blir hvit med brun tekst. (Hvis du ikke har lagt inn din egen fargepalett, så ser du hvordan du gjør det i en av våre gratistreninger(se link nederst på siden).
Nå har vi innholdet på plass og trenger bare å tilpasse padding, så vi ser mere av bakgrunnsbildet. Klikk i ytterkant av den første seksjonen og legg til ca 300px i padding på topp og bunn.
Tilpasning for mobil og nettbrett
Som regel kreves det litt justering av padding på bakgrunnsbildet for å få det til å se bra ut på nettbrett og mobil. Klikk på «Avstand» på ytterste «Section» blokka. Der vil du se tre små ikoner, desktop, nettbrett og mobil. Du kan tilpasse padding individuelt på de tre størrelsene.
I dette tilfellet har jeg valgt 300px på desktop, 200px på nettbrett og 80px på mobil. Her må du tilpasse best mulig i forhold til det bakgrunnsbildet du har valgt.
Husk at bakgrunnsbilder alltid må tåle en viss beskjæring. Det skal fungere både i høydeformat på mobil og i breddeformat på en stor skjerm. Et portrettbilde vil sjelden fungere, så velg bilder som faktisk tåler beskjæring. Naturfoto, abstrakte bilder, og bilder med mye luft rundt hovedmotivet kan også fungere. Her er et par linker som kan være nyttige når det gjelder nettopp bakgrunnsbilder:
