Du vil at forsiden av nettsiden din skal gjøre et inntrykk. Ikke bare en overskrift og litt tekst, men et stort bilde med tekst over som forteller besøkende nøyaktig hva du tilbyr. Denne typen seksjon kalles gjerne en hero eller omslagsside, og i WordPress bygger du den med Cover-blokken. Det tar bare noen minutter, og resultatet ser ut som noe en designer har laget.
Legge til en Cover-blokk for omslagssiden
Du kan legge til en Cover-blokk på tre måter. Den raskeste er å skrive /omslag i et tomt avsnitt i redigeringsverktøyet. Du kan også klikke på plussikonet og søke etter "Cover", eller åpne blokkinnsettings-panelet og finne den under kategorien Media.
Når Cover-blokken er lagt til, ber WordPress deg velge et bilde. Du kan laste opp et nytt bilde eller velge ett fra mediebiblioteket. Velg et bilde med god oppløsning som fungerer som bakgrunn. Bilder med rolige områder der tekst kan plasseres, fungerer best. Et bilde med mye detaljer overalt gjør teksten vanskelig å lese.
Etter at bildet er valgt, legger WordPress automatisk til en overskrift og et avsnitt inne i Cover-blokken. Disse blokkene er barn av Cover-blokken, noe du kan se tydelig i dokumentoversikten der de vises med innrykk under Cover.
Cover-verktøylinjen: plassering og bredde
Klikk på Cover-blokken (ikke teksten inni, men selve bakgrunnen) for å se verktøylinjen. Her finner du de viktigste innstillingene for hvordan omslagssiden din oppfører seg.
Plassering lar deg velge mellom standard, bred og fullbredde. For en omslagsside vil du nesten alltid velge fullbredde, slik at bildet dekker hele skjermbredden. Bred gjør blokken bredere enn innholdsområdet, men ikke helt ut til kantene. Standard holder blokken innenfor innholdsområdets bredde.
Duotone-filter legger et fargefilter over bildet. Det kan gi bildet en ensartet tone som matcher fargepaletten på nettsiden din. Eksperimenter med forskjellige kombinasjoner, men vær forsiktig. Noen filtre kan gjøre bildet vanskelig å tyde.
Innholdsjustering bestemmer hvor teksten plasseres inne i Cover-blokken. Du kan sentrere den, justere til venstre eller høyre, og plassere den øverst, i midten eller nederst. For de fleste omslagssider fungerer sentrert tekst i midten best.
Fullstørrelse gjør at Cover-blokken fyller hele skjermhøyden. Kombinert med fullbredde gir dette en dramatisk effekt der omslagssiden tar opp hele skjermen. Det er en klassisk hero-seksjon.
Stil omslagssiden i WordPress med farger
I innstillingspanelet til høyre (klikk på Cover-blokken og sjekk høyre sidefelt) finner du detaljerte stilinnstillinger.
Overleggsfargen er et fargelag som legges over bildet. Et mørkt overlegg gjør lys tekst lettere å lese. Et farget overlegg gir bildet en spesiell atmosfære. Juster dekkevnen (opacity) for å bestemme hvor gjennomsiktig overlaget skal være. Rundt 40-60 prosent gir ofte en god balanse mellom synlig bilde og lesbar tekst.
Tekstfarge bestemmer fargen på all tekst inne i Cover-blokken. Her er et tips som sparer deg for mye arbeid senere: bruk temafarger i stedet for egendefinerte farger. Temafarger er knyttet til temaets fargepalett. Bytter du tema senere, oppdateres alle elementene som bruker temafarger automatisk. Velger du en egendefinert farge, må du gå inn og endre den manuelt overalt.
Bredde på indre innhold bestemmer hvor bredt tekstområdet inne i Cover-blokken er. Selv om Cover-blokken er fullbredde, vil du sjelden at teksten strekker seg helt ut til kantene. Begrens bredden slik at tekstlinjene ikke blir for lange. Korte linjer er lettere å lese.
Overskriften inne i Cover-blokken
Klikk på overskriften inne i Cover-blokken for å redigere den. I blokkverktøylinjen kan du justere overskriftsnivået. For en omslagsside som fungerer som det første besøkende ser, er H1 eller H2 passende avhengig av om siden allerede har en H1-tittel.
Under Stiler i høyre sidefelt finner du ekstra formateringsvalg for overskriften. Mange temaer tilbyr forhåndsdefinerte stiler som Display (stor og prominent) og Undertittel (mindre og dempet). Display-stilen gir overskriften det store, iøynefallende uttrykket som kjennetegner en god omslagsside.
Du kan også justere tekststørrelse, linjehøyde og skrifttykkelse for å finpusse utseendet. Igjen, bruk helst temastiler fremfor egendefinerte verdier. Det gjør at designet ditt forblir konsistent og enklere å vedlikeholde.
Avsnittet under overskriften
Under overskriften i Cover-blokken ligger et avsnitt som fungerer som en undertekst eller en kort beskrivelse. Klikk på det og skriv inn teksten din. Hold det kort. En eller to setninger som utdyper overskriften er nok.
I stiler-panelet kan du velge en undertittel-stil for avsnittet, som gir det et utseende som passer sammen med overskriften. Juster størrelse og farge etter behov, men husk prinsippet om temafarger for fremtidig fleksibilitet.
Bygg videre på omslagsseksjonen
Cover-blokken er bare starten. Du kan legge til flere blokker inne i den, for eksempel en Call to Action-knapp som oppfordrer besøkende til å handle. Du kan også legge til flere Cover-blokker på samme side for å skape visuell variasjon mellom seksjonene.
En vanlig sidestruktur er å starte med en fullbredde Cover-blokk som hero, etterfulgt av innholdsseksjoner med tekst og bilder, og avslutte med enda en Cover-blokk som bunnseksjon med en oppfordring til handling.
Dokumentoversikten er din beste venn når du bygger komplekse sider med flere nestede blokker. Hold den åpen for å se helheten og for å enkelt velge riktig blokk uten å klikke feil. Det er spesielt nyttig når du har blokker inne i blokker inne i blokker.
Temafarger gir fleksibilitet
Et gjennomgående råd for arbeid med omslagssider i WordPress er å bruke temafarger konsekvent. Når du velger farger for tekst, overlegg og bakgrunner, viser WordPress en fargepalett med temafargene dine øverst. Disse fargene er definert i temaet ditt, og alle elementer som bruker dem, oppdateres automatisk hvis du endrer fargepaletten eller bytter tema.
Velger du en egendefinert farge i stedet (ved å bruke fargevelgeren under temapaletten), er den hardkodet til akkurat den fargeverdien. Bytter du tema, beholder elementet den gamle fargen selv om den ikke lenger passer. For en enkelt side er dette håndterbart, men for en nettside med mange sider blir det raskt et vedlikeholdsproblem.
Neste steg
Nå som du kan bygge en visuelt slående omslagsside, er neste steg å lære mer om å lage sider i WordPress generelt, eller å bygge en effektiv Call to Action-seksjon som konverterer besøkende til kunder.
Denne videoen er hentet fra kurset WordPress - komplett guide på Utdannet.no. I det fulle kurset lærer du å bygge komplette omslagssider med avanserte blokkoppsett, bruke Cover-blokken til fulle, og designe sider som ser profesjonelle ut på alle skjermstørrelser.
