Vil du vise Divi Fullwidth Header-modulet i fuld skærm?
Overskrifter på fuld skærm fylder hele skærmen, uanset skærmstørrelsen besøgende. Dette er fantastisk til at fange brugernes opmærksomhed. Heldigvis er det nemt at oprette en fuldskærms-header med modulet Overskrift til fuldbredde af Divi.
I denne artikel viser vi dig, hvordan du opretter en header i fuld bredde, tilpasser den og viser den i fuld skærm. Du kan bruge denne tilgang til at oprette en hvilken som helst helte-sektion i fuld skærm til dine sider.
Lad os starte.
undersøgelse
Lad os se en forhåndsvisning af, hvad vi vil designe i denne tutorial.
kontor
tablet
Telefon
Sådan gør du din Divi Fullwidth Header til en fuldskærmsheader
Start med at tilføje et afsnit i fuld bredde til den side, du arbejder på.
Tilføj derefter a Header-modul i fuld bredde til sektionen i fuld bredde.
Modulindstillingerne åbnes. Vælg faneblad Design. Aktiver den kaldede indstilling Lav fuldskærm
Vi har nu en fuldskærmsoverskrift. Så enkelt er det.
Aktiver rulleikon
Vi kan også tilføje en knap, der fortæller brugeren at rulle ned. Vi skal dog aktivere det. Denne knap er altid synlig i fuldskærmsindstillingen. Indstillingen for fuldskærmsoverskrift matcher altid skærmhøjden på besøgende.
- Vis rulle ned-knap: JA
Divi Fullwidth Fullscreen Header Eksempel
Parametre for headermodul i fuld bredde
Her er trinene for hver sektion af Fullwidth Header-modulets indstillinger.
Læs også: Divi: Sådan kombinerer du baggrundsmasker og separatorer
Tekster
Alle først skal du tilføje teksten som vil være synlig i overskriften i fuld bredde. Dette inkluderer titlen, underteksten, indhold og knapteksten.
- Titel: Opret din blog med Divi
- Undertitel: Blogpascher
- Burron #1: Resumé
- Knap #2: Tidsplan
- Brødtekst: (standard)
Billeder
Ensuite, tilføje billede. Dette vises på højre side af overskriften i fuld bredde og flytter teksten til venstre.
- Overskriftsbillede: dit valg
Baggrund
Rul til Baggrund og sæt farven til #f6f5ee.
- Baggrundsfarve: #f6f5ee
Disposition
Derefter skal du navigere til fanen Design.
- Gør fuldskærm: JA
Rul ned ikon
- Vis rulle ned-knap: JA
- Rul ned ikonfarve: #000000 (computer og tablet), #ffffff (telefon)
- Rul ned ikonstørrelse: 70px (desktop), 60px (tablet), 50px (telefon)
Titeltekst
Dernæst vil vi justere titeltekst.
- Overskriftsniveau: H1
- Skrifttype: Inter
- Skrifttypevægt: Fed
- Tekstjustering: Center
- Tekstfarve: #000000
- Titeltekststørrelse: 75px (desktop), 40px (tablet), 24px (telefon)
- Titellinjehøjde: 1.2 em
Beskrivelsestekst
Rul derefter ned til BodyText.
- Skrifttype: Åbn Sans
- Justering: Venstre
- Farve: #000000
- Tekststørrelse: 16px (desktop), 15px (tablet), 14px (telefon)
- Linjehøjde: 1.8 em
Undertekst
Rul derefter ned til Undertekst tekst.
- Skrifttype: Inter
- Skrifttypevægt: Fed
- Stil: TT
- Justering: Center
- Farve: #ff5a17
- Størrelse: 14px
- Bogstavafstand: 1px
- Linjehøjde: 1.8 em
Knap #1
Rul derefter ned til Knap en.
- Brug brugerdefinerede stilarter til knap: JA
- Tekststørrelse: 20px (desktop), 18px (tablet), 16px (telefon)
- Tekstfarve: #000000
- Baggrundsfarve: #ffffff
- Kantbredde: 0px
- Kantradius: 0px
- Skrifttype: Inter
- Skrifttypevægt: Fed
- Ikon: dit valg
- Ikonfarve: #000000
- Placering: Højre
- Vis kun ikon ved svæv for knap XNUMX: NEJ
Rul til sidst ned til muligheder Button One polstring.
- Polstring:
- Desktop: 20px (top og bund), 40px (venstre og højre)
- Tablet: 16px (øverst og nederst), 40px (venstre og højre)
- Telefon: 12px (øverst og nederst), 40px (venstre og højre)
Knap #2
Rul til sidst ned til Knap to.
- Brug brugerdefinerede stilarter til knap to: Ja
- Tekststørrelse: 20px (desktop), 18px (tablet), 16px (telefon)
- Tekstfarve: #ffffff
- Baggrundsfarve: #ff5a17
- Kantbredde: 0px
- Kantradius: 0px
- Skrifttype: Inter
- Skrifttypevægt: Fed
Vælg dit yndlingsikon.
- Ikon: dit valg
- Ikonfarve: #000000
- Placering: venstre
- Vis kun ikon ved svæv for knap to: NEJ
Rul til sidst ned til mulighederne Knap to polstring.
- Polstring:
- Desktop: 20px (top og bund), 40px (venstre og højre)
- Tablet: 16px (øverst og nederst), 40px (venstre og højre)
- Telefon: 12px (øverst og nederst), 40px (venstre og højre)
Endelige resultater
Sådan ser vores header i fuld bredde ud på stationære computere, tablets og telefoner.
Du kan også konsultere: Divi: Sådan bruger du skygge- og svæveeffekter til at skabe interaktivt indhold
kontor
tablet
Telefon
Download DIVI nu!!!
Konklusion
Her er vores kig på, hvordan du opretter en Fullwidth Header med dit Divi Fullwidth Header-modul.
Processen er enkel, og den ser godt ud på enhver enhed. Tilføjelse af knappen Rul ned er en fantastisk visualisering, der fortæller brugerne, at de kan rulle.
At designe en fuldskærms-header svarer til at designe en Hero-sektion. At følge nogle få enkle retningslinjer kan hjælpe dig med at skabe fantastiske fuldskærms-headers med Divi's Fullwidth Header-modul.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
