Forside - del 4

I dag skal vi sette opp en ny seksjon på forsiden vi har jobbet med gjennom flere «luker» nå. Jeg håper at du vil se nye muligheter for hver del vi går gjennom. Og at du kan bruke det du lærer til å sette sammen dine egne «seksjoner» til din helt unike nettside.

Vi skal bruke en «Advanced Columns» blokk fra Ultimate Addons for Gutenberg i dag også, men nå med en gradert farget bakgrunn med en dekoreffekt.

Vi starter med å legge til en «Advanced Columns» blokk med to kolonner. Velg så «Background» og «Gradient». Da vil du få opp «gradients» i ulike farger, men ikke i de fargene du har i din egen fargepalett. Så her kan det være greit å ha et vindu åpent med Innstillinger -> Central Color Palette åpen, så du lett kan kopiere fargekoder.

Klikk på hver av ringene for å legge inn dine egne fargekoder.

Under «Background» innstillingen finner du «Shape Divider». Her har du mulighet til å legge til en effekt både på topp og bunn av kolonneblokka. Jeg velger kun i bunnen her, og velger «Pyramids» i høyde 145 og bredde 100. Jeg velger også «Flip» for å få den høyeste pyramiden på venstre side.

Prøv deg gjerne fram med ulike typer effekter.

Da har vi utgangspunktet for bakgrunnen på plass.

Vi legger så inn et bilde i venstre kolonne og en overskrift og et avsnitt med tekst på høyre side.

Bildet ønsker jeg å trekke opp, slik at det overlapper den hvite bakgrunnen i toppen. Det gjør jeg ved å klikke på innsiden av venstre kolonne og legger til en negativ margin på -150px. Jeg legger samtidig inn en padding på 150px for å få bedre symmetri ift bakgrunnen. Den negative marginen gjør at hele kolonneblokka overlapper seksjonen over, så her må vi kompensere med en positiv margin på ytterste element, altså «Advanced Column» blokka.

Da gjenstår skyggeeffekten på bildet. Her klikker du på bildet, slik at det er markert. Legg så inn «skygge» i «Additional CSS Class» feltet.

.skygge {
box-shadow: 0px 3px 10px #333;
}

Koden over limes så inn under Tilpass -> Ekstra CSS.

Det er det som skal til for å få skyggeeffekt på bildet.

Ønsker du skyggeeffekt på andre bilder på nettsiden, trenger du bare å legge til skygge som CSS klasse. Koden trenger du bare legge inn én gang.

Nå gjenstår bare tilpasning for mobil og nettbrett. Jeg velger at kolonnene skal legges under hverandre fra nettbrett og nedover i størrelse. Dvs. at jeg må velge «Stack» on «Nettbrett. (Det er ikke alt som er oversatt 100% til norsk her ;-))