Det er luke 4 i julekalenderen, og i dag går vi rett på sak! Vi skal sette opp det som ofte kalles en «Hero section». 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: Ultimate Addons for Gutenberg, Kioken Blocks og EditorsKit.

Har du disse tre, så vil du stort sett se det samme på din skjerm som du ser på min. Men det er hovedsaklig blokker fra Ultimate Addons for Gutenberg vi skal bruke her. Og du skal kunne lage en tilsvarende layout om du har et theme som lar deg bygge opp sider som går i full bredde.

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:

Hvordan løse utfordringen med bakgrunnsbilder?

Hva er den store forskjellen på et bakgrunnsbilde og et «vanlig» bilde?