Vill du veta hur man skapar en hjältesektion med Divis Fullwidth Header-modul?
Att bygga en hjältesektion är ett bra sätt att uppmärksamma innehåll viktigt för din sida. Det här är en innehåll stor storlek som du kan använda för att berätta din historia, dela information om ditt arbete eller lyfta fram en produkt eller tjänst.
Med Divis Fullwidth Header-modul kan du lägga till en titel, underrubrik, två knappar, brödtext, logotypbild och rubrikbild. Naturligtvis kan du också använda bakgrundsalternativen för att lägga till och kombinera bilder, övertoningar, färger, mönster och masker.
Du kan ändra alla dessa inställningar i modulinställningarna istället för att behöva växla mellan flera bild-, text- och knappmoduler.
I den här handledningen kommer vi att visa dig hur du skapar en attraktiv och iögonfallande Hero-sektion med Divis Fullwidth Header-modul.
Det är borta!
undersökningen
Här är en förhandstitt på vad vi kommer att designa.
Vad du behöver för att komma igång
Innan du börjar, se till att du har den senaste versionen av Divi på din webbplats.
Nu är du redo att börja!
Hur man skapar en hjältesektion med Divis fullbreddshuvudmodul
Läs också: Divi: Hur man använder "Gradient Builder" för att försköna dina bilder
Skapa en ny sida med en fördefinierad layout
Låt oss börja med att använda en fördefinierad layout från Divi-biblioteket. För denna design kommer vi att använda hemsidan veterinär layoutpaket.
Från Worpress-instrumentpanelen lägger du till en ny sida på din webbplats
Ge den en titel och välj sedan alternativet Använd Divi Builder.
Vi kommer att använda en fördefinierad layout från Divi-biblioteket för detta exempel. Så välj Bläddra i layouter.
Hitta och välj layout hunduppfödare.
Välj Använd den här layouten för att lägga till layouten på din sida.
Vi är nu redo att designa.
Lägg till modulen Fullwidth Header
Vi kommer att återskapa hjältesektionen med Fullwidth Header-modulen. Lägg till ett nytt avsnitt i full bredd på sidan, under den befintliga rubriken.
Lägg till en Fullwidth Header-modul till avsnittet.
Ta sedan bort den ursprungliga rubriken.
Anpassa modulen Fullwidth Header
Lägg till innehåll
Öppna modulinställningarna och lägg till innehåll bredvid modulen:
- Titel: Veterinär
- Underrubrik: Divivet. Tjäna våra bästa vänner
- Knapp #1: Alla tjänster
- Knapp #2: Boka ett möte
- Kropp: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.
Lägg sedan till en rubrikbild.
Inställningar för bakgrundsgradient
Gå till bakgrundsinställningar. Ta bort den ursprungliga bakgrundsfärgen och lägg sedan till en bakgrundsgradient.
- 0 %: rgba(255,170,205,0.48)
- 40 %: rgba(110,66,255,0.24)
- 87 %: rgba(124,239,255,0.71)
- Gradienttyp: Elliptisk
- Gradientposition: Höger
Välj sedan fliken Bakgrundsmask och lägg till en bakgrundsmask.
- Maskbakgrund: Corner Blob
- Maskfärg: #FFFFFF
- Transform: vertikal
Anpassa text
Byt till flik Designa och ändra titelinställningarna
- Titeltypsnitt: Nunito
- Titel Teckensnittsvikt: Ultra fet
- Teckensnittsstil: TT (versaler)
- Titel Text Färg: #a9cb6b
- Textstorlek: 14px
- Titelbokstavsavstånd: 2px
Gå till avsnittet av Kropp text och anpassa typsnittet.
- Textfärg: #000000
- Brödtextstorlek:
- Desktop: 18px
- Telefon: 14px
- Kroppslinjehöjd: 1.8 em
Se även: Divi: Hur man anpassar korg- och sökikonerna i modulen "Fullwidth Menu".
Öppna sedan undertextinställningarna och anpassa teckensnittet.
- Undertexttypsnitt: Nunito
- Textning Teckensnittsvikt: Fet
- Textfärg: #000000
Ändra slutligen storleken på texten
- Textstorlek:
- Desktop: 56px
- Rörlig: 32px
- Textlinjehöjd: 1.2 em
Anpassa knapp #1
Därefter kommer vi att anpassa knappstilarna. Börja med att aktivera anpassade stilar för knapp ett och justera sedan textstorleken.
- Använd anpassade stilar för knapp: JA
- Button One Textstorlek: 14px
Lägg till en bakgrundsgradient till knappen. Gradientvärdena är som följer:
- 58%: #316EFF
- 100 %: #1D2B60
- Lutningsriktning: 90 grader
Anpassa sedan kantinställningar och teckensnittsinställningar.
- Knapp ett:
- Kantbredd: 0px
- Kantradie: 80px
- Bokstavsavstånd: 2px
- Typsnitt: Nunito
- Teckensnittsvikt: Ultra fet
- Stil: TT (versal)
- Visa knapp XNUMX-ikon: NEJ
Anpassa sedan marginal- och utfyllnadsinställningarna för skrivbordsdesignen och lägg till en boxskugga.
- Knapp En marginal
- Topp: 200px
- Nederst: 0px
- Button One-stoppning:
- Topp: 16px
- Nederst: 16px
- Vänster: 2em
- Höger: 50 em
- Box Shadow: View Capture
Använd responsiva inställningar för att ställa in olika marginal- och utfyllnadsvärden på mobila enheter.
- Button One Margin-Top-Mobile: 25px
- Button One Padding-Höger-Mobil: 10em
Anpassa knapp #2
Högerklicka först på knapp #1 och klicka Kopiera Knapp One Styles.
Högerklicka sedan på knapp två och klistra in stilarna från knapp #1.
Nu kan vi anpassa knapp två. Ändra textfärgen.
- Knapp två Textfärg: #121F60
Anpassa bakgrundsgradienten för knapp två.
- 30 %: rgba(0,229,198,0)
- 100 %: #00e5c6
Använd responsiva inställningar för att justera bakgrundsgradienten för mobila enheter.
- 0 %: rgba(0,229,198,0)
- 100 %: #00e5c6
Justera sedan marginalen och stoppningen för skrivbordsdesignen.
- Knapp två Marginal:
- Topp: 0px
- Nederst: 0px
- Vänster: 30 %
- Knapp två stoppning:
- Topp: 16px
- Nederst: 16px
- Vänster: 48em
- Höger: 2 em
Använd responsifq-inställningar för att ställa in olika marginal- och utfyllnadsvärden för mobildesign.
- Knapp två Marginal-Vänster-Mobil: 5 %
- Knapp två stoppning:
- Vänstermobil: 35 %
- Höger-mobil: 5 %
Anpassad CSS
Slutligen är huvuddelen av designarbetet gjort. Nu måste vi lägga till anpassad CSS för att slutföra designen. Byt till flik Advanced Open water och öppna avsnittet Anpassad CSS.
Låt oss först börja med CSS för rubrikbilden. Denna CSS tillåter att huvudbilden visas ovanför knappen.
z-index: 1;
position:relative;
Därefter anpassad CSS i titeln. Vi kommer att ställa in olika värden för skrivbords- och mobilvyer med hjälp av responsiva inställningar.
För stationär dator:
padding-top:50px;
padding-bottom:30px;
För mobil:
padding-top:5px;
padding-bottom:10px;
Lägg slutligen till följande CSS till knapp ett och knapp två.
white-space: nowrap;
Slutresultat
Här är den slutliga designen för vår header-hjältesektion i full bredd.
Läs också: Divi: Hur man skapar en gruppmedlemssektion som en karusell
Ladda ner DIVI nu!!!
Slutsats
Fullwidth Header-modulen låter dig enkelt skapa en vacker Hero-sektion för att marknadsföra dina tjänster och berätta för dina besökare vad pratar du om webbplats.
Inbyggda inställningar gör det enkelt att anpassa varje aspekt av rubriken, och allt finns på ett ställe, så du behöver inte byta mellan flera moduler för att bygga din Hero-sektion.
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.
.
