Kolonner med bakgrunnsbilder og tekst med animasjonseffekt
I seksjon nummer 3 i denne forsiden vi jobber med, skal vi sette opp kolonner som har bakgrunnsbilder. I hver kolonne skal det være en tekst med animasjonseffekt.
Her er vi avhengig av å bruke noen plugins for å få ønsket utseende. Det er ikke mulig å legge til bakgrunnsbilder på WordPress sin kolonneblokk. Men vi kunne ha plassert en “Omslag” blokk i hver kolonne og lagt en tekst oppå. Det kunne gitt en lignende layout, men vi hadde ikke fått mulighet til å tilpasse marginer og padding individuelt pr kolonne ift skjermstørrelse f.eks. Så her velger jeg å bruke tre plugins for å få ønsket resultat.
Plugins brukt i denne videoen: Ultimate Addons for Gutenberg og Blocks Animation. Hvis du vil ha mulighet til å fjerne marginer, slik jeg gjør med overskrift og avsnitt her, så trenger du Kioken Blocks i tillegg.
Blokker brukt i videoen over
Vi skal bruke “Advanced Column” og “Section” fra Ultimate Addons for Gutenberg, og standardblokker for overskrift og avsnitt. I tillegg skal det legges til en animasjonseffekt på “Section” blokkene.
Vi starter med en “Advanced Columns” blokk fra UAG og velger fire like store kolonner. I første kolonne går jeg inn på “Background”, velger “Bilde” og legger til ønsket bilde som bakgrunnsbilde. For å få symmetrisk avstand mellom kolonnene går jeg inn på “Avstand” og legger til 5px margin på topp og bunn + høyre og venstre side. I tillegg legger jeg til en padding/polstring på 400px øverst, slik at vi ser mere av bildet. Her må du tilpasse avstand slik at det passer til dine bilder.
I tillegg går jeg inn på “Borders” og legger til en heltrukken bord på 5px i ønsket farge.
Inni første kolonne legger jeg til en “Section”, går på “Background” og velger “Farge” og legger inn en lys grå farge. Så klikker jeg på + tegnet og legger inn en overskrift og et avsnitt med tekst. Hvis du ønsker det kan du legge til en “Border” rundt seksjonen også.
Da er det bare å gjenta prosessen på de tre andre kolonnene. Pass på at innstillingene blir like for hver kolonne.
Nå skal vi legge inn animasjonseffektene. Marker “Section” blokka i første kolonne, og klikk på “Animations” i høyre sidebar. Velg “Fade In Up” som effekt og sett forsinkelse til 100millisekunder og hastighet til “Slow”.
Gjenta på de tre neste kolonnene, men velg forsinkelse på hhv 200ms, 500ms og 1 sekund.
Tilpasning for mobil og nettbrett
På “Advanced Columns” blokka kan du velge om kolonnene skal legges under hverandre allerede på nettbrett, eller om du vil vente til man kommer ned på mobil:
Her må du nesten bare prøve deg fram. Bruk Chrome som nettleser og høyreklikk og velg “Inspiser” for å forhåndsvise siden på ulike skjermstørrelser. Det kan hende du må justere padding/polstring under “Avstand” på kolonnene, og tilpasse individuelt for nettbrett og mobil.
I mine kolonner har jeg valgt 400px på toppen på desktop, 650px på nettbrett og 400px på mobil. Men her er det ingen fasit, du må tilpasse det til dine egne bilder.
