Vill du visa Divi Fullwidth Header-modulen på helskärm?
Helskärmsrubriker tar upp hela skärmen, oavsett skärmstorleken besökaren. Detta är bra för att fånga användarnas uppmärksamhet. Lyckligtvis är det enkelt att skapa ett helskärmshuvud med modulen Rubrik för fullbredd av Divi.
I den här artikeln visar vi dig hur du skapar en rubrik i full bredd, anpassar den och visar den i helskärm. Du kan använda det här tillvägagångssättet för att skapa en helskärmshjältedel för dina sidor.
Låt oss börja.
undersökningen
Låt oss se en förhandsvisning av vad vi kommer att designa i den här handledningen.
office
tablett
Telefon
Hur du gör din Divi Fullwidth Header till en helskärmsrubrik
Börja med att lägga till ett avsnitt i full bredd på sidan du arbetar med.
Lägg sedan till a Helbreddshuvudmodul till hela sektionen.
Modulinställningarna öppnas. Välj flik Designa. Aktivera alternativet som kallas Gör helskärm
Vi har nu en helskärmshuvud. Så enkelt är det.
Aktivera rullningsikon
Vi kan också lägga till en knapp som säger åt användaren att scrolla ner. Men vi måste aktivera det. Den här knappen är alltid synlig i helskärmsalternativet. Alternativet för helskärmshuvud matchar alltid skärmens höjd besökaren.
- Visa Scroll Down-knapp: YES
Divi Fullwidth Fullscreen Header Exempel
Parametrar för fullbreddshuvudmodul
Här är stegen för varje avsnitt i Fullwidth Header-modulens inställningar.
Läs också: Divi: Hur man kombinerar bakgrundsmasker och separatorer
Texte
Alla först lägger du till texten som kommer att synas i rubriken med full bredd. Detta inkluderar titeln, undertiteln, innehåll och knapptexten.
- Titel: Skapa din blogg med Divi
- Underrubrik: Blogpascher
- Burron #1: Sammanfattning
- Knapp #2: Schema
- Kropp: (standard)
Bilder
sedan lägg till bild. Detta visas på höger sida av rubriken i full bredd och flyttar texten åt vänster.
- Header Image: ditt val
bakgrund
Bläddra till Bakgrund och ställ in färgen till #f6f5ee.
- Bakgrundsfärg: #f6f5ee
Disposition
Navigera sedan till fliken Design.
- Gör helskärm: JA
Rulla ned ikonen
- Visa Scroll Down-knapp: YES
- Scroll Down Ikon Färg: #000000 (Skrivbord och surfplatta), #ffffff (telefon)
- Scroll down-ikonstorlek: 70px (dator), 60px (surfplatta), 50px (telefon)
Titeltext
Därefter kommer vi att justera titeltext.
- Rubriknivå: H1
- Typsnitt: Inter
- Teckensnittsvikt: Fet
- Textjustering: Center
- Textfärg: #000000
- Titeltextstorlek: 75px (dator), 40px (surfplatta), 24px (telefon)
- Titelradshöjd: 1.2 em
Beskrivningstext
Scrolla sedan ner till Kropp text.
- Teckensnitt: Öppna Sans
- Inriktning: Vänster
- Färg: #000000
- Textstorlek: 16px (skrivbord), 15px (surfplatta), 14px (telefon)
- Linjehöjd: 1.8 em
Textning
Scrolla sedan ner till Undertext.
- Typsnitt: Inter
- Teckensnittsvikt: Fet
- Stil: TT
- Inriktning: Center
- Färg: #ff5a17
- Storlek: 14px
- Bokstavsavstånd: 1px
- Linjehöjd: 1.8 em
Knapp #1
Scrolla sedan ner till Knapp ett.
- Använd anpassade stilar för knapp: JA
- Textstorlek: 20px (skrivbord), 18px (surfplatta), 16px (telefon)
- Textfärg: #000000
- Bakgrundsfärg: #ffffff
- Kantbredd: 0px
- Kantradie: 0px
- Typsnitt: Inter
- Teckensnittsvikt: Fet
- Ikon: ditt val
- Ikonfärg: #000000
- Placering: Rätt
- Visa endast ikon vid svävning för knapp ett: NEJ
Till sist, scrolla ner till alternativ Knapp En stoppning.
- Stoppning:
- Desktop: 20px (överst och neder), 40px (vänster och höger)
- Surfplatta: 16px (överst och nedre), 40px (vänster och höger)
- Telefon: 12px (överst och nedre), 40px (vänster och höger)
Knapp #2
Till sist, scrolla ner till Knapp två.
- Använd anpassade stilar för knapp två: Ja
- Textstorlek: 20px (Skrivbord), 18px (Surfplatta), 16px (Telefon)
- Textfärg: #ffffff
- Bakgrundsfärg: #ff5a17
- Kantbredd: 0px
- Kantradie: 0px
- Typsnitt: Inter
- Teckensnittsvikt: Fet
Välj din favoritikon.
- Ikon: ditt val
- Ikonfärg: #000000
- Placering: vänster
- Visa endast ikonen vid muspekaren för knapp två: NEJ
Bläddra till sist ner till alternativen Knapp två Vaddering.
- Stoppning:
- Desktop: 20px (överst och neder), 40px (vänster och höger)
- Surfplatta: 16px (överst och nedre), 40px (vänster och höger)
- Telefon: 12px (överst och nedre), 40px (vänster och höger)
Slutresultat
Så här ser vår rubrik i full bredd ut på stationära datorer, surfplattor och telefoner.
Du kan också konsultera: Divi: Hur man använder skugg- och sväveffekter för att skapa interaktivt innehåll
office
tablett
Telefon
Ladda ner DIVI nu!!!
Slutsats
Här är vår titt på hur du skapar en Fullwidth Header med din Divi Fullwidth Header-modul.
Processen är enkel och den ser bra ut på alla enheter. Lägger till knappen Scrolla ner är en fantastisk bild som talar om för användarna att de kan rulla.
Att designa en helskärmshuvud liknar att designa en hjältesektion. Att följa några enkla riktlinjer kan hjälpa dig att skapa fantastiska helskärmshuvuden med Divis Fullwidth Header-modul.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
