Kunne du tænke dig at vide, hvordan man opretter en Hero-sektion med Divi's Fullwidth Header-modul?
At bygge en heltesektion er en fantastisk måde at henlede opmærksomheden på indhold vigtigt for din side. Dette er en indhold stor størrelse, som du kan bruge til at fortælle din historie, dele information om dit arbejde eller fremhæve et produkt eller en tjeneste.
Med Divi's Fullwidth Header-modul kan du tilføje en titel, undertekst, to knapper, brødtekst, logobillede og headerbillede. Du kan selvfølgelig også bruge baggrundsindstillingerne til at tilføje og kombinere billeder, gradienter, farver, mønstre og masker.
Du kan ændre alle disse indstillinger i modulindstillingerne i stedet for at skulle skifte mellem flere billed-, tekst- og knapmoduler.
I denne tutorial viser vi dig, hvordan du opretter en attraktiv og iøjnefaldende Hero-sektion ved hjælp af Divi's Fullwidth Header-modul.
Lad os gå!
undersøgelse
Her er en forhåndsvisning af, hvad vi skal designe.
Hvad du behøver for at komme i gang
Før du starter, skal du sørge for, at du har den nyeste version af Divi på din Websted.
Nu er du klar til at starte!
Sådan opretter du en heltesektion med Divi's Header-modul i fuld bredde
Læs også: Divi: Sådan bruger du "Gradient Builder" til at forbedre dine billeder
Opret en ny side med et foruddefineret layout
Lad os starte med at bruge et foruddefineret layout fra Divi-biblioteket. Til dette design vil vi bruge hjemmesiden dyrlæge layout pakke.
Fra Worpress-dashboardet skal du tilføje en ny side til din Websted
Giv det en titel, og vælg derefter indstillingen Brug Divi Builder.
Vi vil bruge et foruddefineret layout fra Divi-biblioteket til dette eksempel. Så vælg Gennemse layouts.
Find og vælg layoutet Hundeopdrætter.
Vælg Brug dette layout for at tilføje layoutet til din side.
Vi er nu klar til at designe.
Tilføj Fullwidth Header-modulet
Vi vil genskabe heltesektionen ved hjælp af Fullwidth Header-modulet. Tilføj en ny sektion i fuld bredde til siden under den eksisterende overskrift.
Tilføj et Header-modul i fuld bredde til sektionen.
Slet derefter den originale overskriftssektion.
Tilpas Fullwidth Header-modulet
Tilføj indhold
Åbn modulindstillingerne og tilføj indhold ved siden af modulet:
- Titel: Dyrlæge
- Undertitel: Divivet. Tjen vores bedste venner
- Knap #1: Alle tjenester
- Knap #2: Lav en aftale
- Krop: 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.
Tilføj derefter et overskriftsbillede.
Indstillinger for gradientbaggrund
Gå til baggrundsindstillinger. Slet den originale baggrundsfarve, og tilføj derefter en baggrundsgradient.
- 0 %: rgba(255,170,205,0.48)
- 40 %: rgba(110,66,255,0.24)
- 87 %: rgba(124,239,255,0.71)
- Gradienttype: Elliptisk
- Gradientposition: Højre
Vælg derefter fanen Baggrundsmaske og tilføj en baggrundsmaske.
- Maskebaggrund: Corner Blob
- Maskefarve: #FFFFFF
- Transform: lodret
Tilpas tekst
Skift til fanen Design og ændre titelindstillingerne
- Titelskrifttype: Nunito
- Titelskrifttypevægt: Ultra fed
- Skrifttype: TT (store bogstaver)
- Titel Tekstfarve: #a9cb6b
- Tekststørrelse: 14px
- Titelbogstavafstand: 2px
Gå til sektionen af BodyText og tilpasse skrifttypen.
- Tekstfarve: #000000
- Brødtekststørrelse:
- Desktop: 18px
- Telefon: 14px
- Kropslinjehøjde: 1.8 em
Se også: Divi: Sådan tilpasser du kurven og søgeikonerne i modulet "Fuldbreddemenu".
Åbn derefter undertekstindstillingerne og tilpas skrifttypen.
- Undertekstskrifttype: Nunito
- Undertekstskrifttypevægt: Fed
- Tekstfarve: #000000
Til sidst skal du ændre størrelsen på teksten
- Undertekst tekststørrelse:
- Desktop: 56px
- Bevægelig: 32px
- Undertekstlinjehøjde: 1.2 em
Tilpas knap #1
Dernæst tilpasser vi knapstilene. Start med at aktivere brugerdefinerede stilarter for knap et, og juster derefter tekststørrelsen.
- Brug brugerdefinerede stilarter til knap: JA
- Button One Tekststørrelse: 14px
Tilføj en baggrundsgradient til knappen. Gradientværdierne er som følger:
- 58 %: #316EFF
- 100 %: #1D2B60
- Gradientretning: 90 grader
Tilpas derefter kantindstillinger og skrifttypeindstillinger.
- Knap et:
- Kantbredde: 0px
- Kantradius: 80px
- Bogstavafstand: 2px
- Skrifttype: Nunito
- Skrifttypevægt: Ultra fed
- Stil: TT (store bogstaver)
- Vis knap ét ikon: NEJ
Tilpas derefter margen- og polstringsindstillingerne for skrivebordsdesignet og tilføj en boksskygge.
- Knap En margen
- Top: 200px
- Nederst: 0px
- Button One polstring:
- Top: 16px
- Nederst: 16px
- Venstre: 2em
- Højre: 50 em
- Box Shadow: View Capture
Brug responsive indstillinger til at indstille forskellige margen- og polstringsværdier på mobile enheder.
- Button One Margin-Top-Mobil: 25px
- Button One Polstring-Højre-Mobil: 10em
Tilpas knap #2
Først skal du højreklikke på knap #1 og klikke Copy Button One Styles.
Højreklik derefter på knap to og indsæt stilene fra knap #1.
Nu kan vi tilpasse knap to. Skift tekstfarven.
- Knap to Tekstfarve: #121F60
Tilpas baggrundsgradienten for knap to.
- 30 %: rgba(0,229,198,0)
- 100 %: #00e5c6
Brug responsive indstillinger til at justere baggrundsgradienten for mobile enheder.
- 0 %: rgba(0,229,198,0)
- 100 %: #00e5c6
Juster derefter margenen og polstringen til skrivebordsdesignet.
- Knap to margen:
- Top: 0px
- Nederst: 0px
- Venstre: 30 %
- Knap to polstring:
- Top: 16px
- Nederst: 16px
- Venstre: 48em
- Højre: 2 em
Brug responsifq-indstillinger til at indstille forskellige margen- og polstringsværdier til mobildesign.
- Knap to margin-venstre-mobil: 5 %
- Knap to polstring:
- Venstre-mobil: 35 %
- Højre-mobil: 5 %
Tilpasset CSS
Endelig er hovedparten af designarbejdet udført. Nu skal vi tilføje brugerdefineret CSS for at fuldføre designet. Skift til fanen Avanceret og åbn sektionen Brugerdefineret CSS.
Lad os først starte med CSS for headerbilledet. Denne CSS tillader, at headerbilledet vises over knappen.
z-index: 1;
position:relative;
Dernæst tilpasset CSS i titlen. Vi vil indstille forskellige værdier for desktop- og mobilvisninger ved hjælp af responsive indstillinger.
Til stationær computer:
padding-top:50px;
padding-bottom:30px;
Til mobil:
padding-top:5px;
padding-bottom:10px;
Tilføj endelig følgende CSS til knap et og knap to.
white-space: nowrap;
Endelig resultat
Her er det endelige design til vores header-helte-sektion i fuld bredde.
Læs også: Divi: Sådan opretter du en sektion for teammedlemmer som en karrusel
Download DIVI nu!!!
Konklusion
Fullwidth Header-modulet giver dig mulighed for nemt at oprette en smuk Hero-sektion for at annoncere for dine tjenester og fortælle dine besøgende hvad taler du om Websted.
Indbyggede indstillinger gør det nemt at tilpasse alle aspekter af headeren, og det hele er samlet ét sted, så du behøver ikke skifte mellem flere moduler for at bygge din Hero-sektion.
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.
...
