Vil du vise Divi Fullwidth Header-modulen i full skjerm?
Fullskjermhoder tar opp hele skjermen, uavhengig av skjermstørrelsen på besøkende. Dette er flott for å fange brukernes oppmerksomhet. Heldigvis er det enkelt å lage en fullskjermsoverskrift med modulen Toppbreddeoverskrift av Divi.
I denne artikkelen viser vi deg hvordan du lager en overskrift i full bredde, tilpasser den og viser den i fullskjerm. Du kan bruke denne tilnærmingen til å lage hvilken som helst helskjermseksjon for sidene dine.
La oss begynne.
undersøkelsen
La oss se en forhåndsvisning av hva vi skal designe i denne opplæringen.
kontor
tablett
Telefon
Hvordan gjøre Divi Fullwidth Header til en fullskjerms Header
Start med å legge til en seksjon i full bredde på siden du jobber med.
Legg deretter til en Overskriftsmodul i full bredde til seksjonen i full bredde.
Modulinnstillingene åpnes. Velg fane utforming. Aktiver alternativet kalt Lag fullskjerm
Vi har nå en fullskjermoverskrift. Det er så enkelt.
Aktiver rulleikon
Vi kan også legge til en knapp som ber brukeren rulle nedover. Vi må imidlertid aktivere det. Denne knappen er alltid synlig i fullskjermsalternativet. Overskriftsalternativet for full skjerm samsvarer alltid med skjermhøyden på besøkende.
- Vis rulle ned-knapp: JA
Divi Fullwidth Fullscreen Header Eksempel
Parametre for topptekstmodul i full bredde
Her er fremgangsmåten for hver del av innstillingene for Fullwidth Header-modulen.
Les også: Divi: Hvordan kombinere bakgrunnsmasker og separatorer
Texte
Alle først legger du til teksten som vil være synlig i overskriften i full bredde. Dette inkluderer tittelen, undertittelen, innhold og knappeteksten.
- Tittel: Opprett bloggen din med Divi
- Undertittel: Blogpascher
- Burron #1: Sammendrag
- Knapp #2: Tidsplan
- Brødtekst: (standard)
Bilder
deretter legg til bilde. Dette vises på høyre side av overskriften i full bredde, og flytter teksten til venstre.
- Header Image: ditt valg
bakgrunn
Bla til Bakgrunn og sett fargen til #f6f5ee.
- Bakgrunnsfarge: #f6f5ee
Disposisjon
Deretter navigerer du til Design-fanen.
- Gjør fullskjerm: JA
Rull ned ikonet
- Vis rulle ned-knapp: JA
- Rull ned ikonfarge: #000000 (stasjonær PC og nettbrett), #ffffff (telefon)
- Rull ned ikonstørrelse: 70px (skrivebord), 60px (nettbrett), 50px (telefon)
Titteltekst
Deretter vil vi justere titteltekst.
- Overskriftsnivå: H1
- Font: Inter
- Skriftvekt: Fet
- Tekstjustering: Senter
- Tekstfarge: #000000
- Titteltekststørrelse: 75px (stasjonær datamaskin), 40px (nettbrett), 24px (telefon)
- Tittellinjehøyde: 1.2 em
Beskrivelsestekst
Bla deretter ned til Brødtekst.
- Font: Åpne Sans
- Justering: Venstre
- Farge: #000000
- Tekststørrelse: 16px (skrivebord), 15px (nettbrett), 14px (telefon)
- Linjehøyde: 1.8 em
Subtitle
Bla deretter ned til Underteksttekst.
- Font: Inter
- Skriftvekt: Fet
- Stil: TT
- Justering: Senter
- Farge: #ff5a17
- Størrelse: 14px
- Bokstavavstand: 1px
- Linjehøyde: 1.8 em
Knapp #1
Bla deretter ned til Knapp en.
- Bruk egendefinerte stiler for knapp: JA
- Tekststørrelse: 20px (skrivebord), 18px (nettbrett), 16px (telefon)
- Tekstfarge: #000000
- Bakgrunnsfarge: #ffffff
- Kantbredde: 0px
- Kanteradius: 0px
- Font: Inter
- Skriftvekt: Fet
- Ikon: ditt valg
- Ikonfarge: #000000
- Plassering: Høyre
- Vis kun ikon ved peker for knapp én: NEI
Til slutt, bla ned til alternativer Button One Polstring.
- Polstring:
- Desktop: 20px (øverst og bunn), 40px (venstre og høyre)
- Nettbrett: 16px (øverst og bunn), 40px (venstre og høyre)
- Telefon: 12px (øverst og bunn), 40px (venstre og høyre)
Knapp #2
Til slutt, bla ned til Knapp to.
- Bruk egendefinerte stiler for knapp to: Ja
- Tekststørrelse: 20px (skrivebord), 18px (nettbrett), 16px (telefon)
- Tekstfarge: #ffffff
- Bakgrunnsfarge: #ff5a17
- Kantbredde: 0px
- Kanteradius: 0px
- Font: Inter
- Skriftvekt: Fet
Velg ditt favorittikon.
- Ikon: ditt valg
- Ikonfarge: #000000
- Plassering: venstre
- Vis kun ikon ved peker for knapp to: NEI
Til slutt, bla ned til alternativene Knapp to polstring.
- Polstring:
- Desktop: 20px (øverst og bunn), 40px (venstre og høyre)
- Nettbrett: 16px (øverst og bunn), 40px (venstre og høyre)
- Telefon: 12px (øverst og bunn), 40px (venstre og høyre)
Endelige resultater
Slik ser toppteksten vår i full bredde ut på stasjonære datamaskiner, nettbrett og telefoner.
Du kan også konsultere: Divi: Hvordan bruke skygge- og sveveeffekter for å lage interaktivt innhold
kontor
tablett
Telefon
Last ned DIVI nå!!!
konklusjonen
Her er vår titt på hvordan du lager en Fullwidth Header med Divi Fullwidth Header-modulen.
Prosessen er enkel og den ser bra ut på alle enheter. Legger til knappen Bla nedover er et flott bilde som forteller brukerne at de kan rulle.
Å designe en topptekst på fullskjerm ligner på å designe en helteseksjon. Å følge noen få enkle retningslinjer kan hjelpe deg med å lage fantastiske fullskjermsoverskrifter med Divis Fullwidth Header-modul.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
