Vil du vite hvordan du lager en Hero-seksjon med Divis Fullwidth Header-modul?
Å bygge en helteseksjon er en fin måte å trekke oppmerksomhet til innhold viktig for siden din. Dette er en innhold stor størrelse som du kan bruke til å fortelle historien din, dele informasjon om arbeidet ditt eller fremheve et produkt eller en tjeneste.
Med Divis Fullwidth Header-modul kan du legge til en tittel, undertittel, to knapper, brødtekst, logobilde og topptekstbilde. Selvfølgelig kan du også bruke bakgrunnsalternativene til å legge til og kombinere bilder, gradienter, farger, mønstre og masker.
Du kan endre alle disse innstillingene i modulinnstillingene i stedet for å måtte bytte mellom flere bilde-, tekst- og knappemoduler.
I denne opplæringen vil vi vise deg hvordan du lager en attraktiv og iøynefallende Hero-seksjon ved å bruke Divis Fullwidth Header-modul.
La oss gå !
undersøkelsen
Her er en forhåndsvisning av hva vi skal designe.
Hva du trenger for å komme i gang
Før du starter, sørg for at du har den nyeste versjonen av Divi på din nettstedet Web.
Nå er du klar til å begynne!
Hvordan lage en helteseksjon med Divis topptekstmodul i full bredde
Les også: Divi: Hvordan bruke "Gradient Builder" for å forskjønne bildene dine
Opprett en ny side med et forhåndsdefinert oppsett
La oss starte med å bruke en forhåndsdefinert layout fra Divi-biblioteket. For dette designet vil vi bruke hjemmesiden veterinær layoutpakke.
Fra Worpress-dashbordet legger du til en ny side på din nettstedet Web
Gi den en tittel, og velg deretter alternativet Bruk Divi Builder.
Vi skal bruke en forhåndsdefinert layout fra Divi-biblioteket for dette eksemplet. Så velg Bla gjennom layouter.
Finn og velg oppsettet hundeoppdretter.
Velg Bruk denne layouten for å legge til oppsettet på siden din.
Vi er nå klare til å designe.
Legg til Fullwidth Header-modulen
Vi vil gjenskape helteseksjonen ved å bruke Fullwidth Header-modulen. Legg til en ny seksjon i full bredde på siden, under den eksisterende overskriften.
Legg til en Fullwidth Header-modul til seksjonen.
Deretter sletter du den opprinnelige overskriftsdelen.
Tilpass Fullwidth Header-modulen
Legg til innhold
Åpne modulinnstillingene og legg til innhold ved siden av modulen:
- Tittel: Veterinær
- Undertittel: Divivet. Tjen våre beste venner
- Knapp #1: Alle tjenester
- Knapp #2: Bestill en avtale
- 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.
Deretter legger du til et overskriftsbilde.
Gradient bakgrunnsinnstillinger
Gå til bakgrunnsinnstillinger. Slett den opprinnelige bakgrunnsfargen, og legg deretter til en bakgrunnsgradient.
- 0 %: rgba(255,170,205,0.48)
- 40 %: rgba(110,66,255,0.24)
- 87 %: rgba(124,239,255,0.71)
- Gradienttype: Elliptisk
- Gradientposisjon: Høyre
Velg deretter fanen Bakgrunnsmaske og legg til en bakgrunnsmaske.
- Maskebakgrunn: Corner Blob
- Maskefarge: #FFFFFF
- Transform: vertikal
Tilpass tekst
Bytt til fane utforming og endre tittelinnstillingene
- Tittel Font: Nunito
- Tittel Skriftvekt: Ultra fet
- Skriftstil: TT (store bokstaver)
- Tittel Tekstfarge: #a9cb6b
- Tekststørrelse: 14px
- Tittelbokstavavstand: 2px
Gå til delen av Brødtekst og tilpasse skriften.
- Tekstfarge: #000000
- Brødtekststørrelse:
- Desktop: 18px
- Telefon: 14px
- Kroppslinjehøyde: 1.8 em
Se også: Divi: Hvordan tilpasse kurven og søkeikonene til modulen "Fullbreddsmeny".
Deretter åpner du undertekstinnstillingene og tilpasser skriften.
- Tekstskrift : Nunito
- Tekstvekt: Fet skrift
- Tekstfarge: #000000
Til slutt endrer du størrelsen på teksten
- Tekststørrelse:
- Desktop: 56px
- Bevegelig: 32px
- Tekstlinjehøyde: 1.2 em
Tilpass knapp #1
Deretter tilpasser vi knappestilene. Start med å aktivere egendefinerte stiler for knapp én, og juster deretter tekststørrelsen.
- Bruk egendefinerte stiler for knapp: JA
- Button One Tekststørrelse: 14px
Legg til en bakgrunnsgradient til knappen. Gradientverdiene er som følger:
- 58 %: #316EFF
- 100 %: #1D2B60
- Gradientretning: 90 grader
Deretter tilpasser du kantinnstillinger og skriftinnstillinger.
- Knapp en:
- Kantbredde: 0px
- Kanteradius: 80px
- Bokstavavstand: 2px
- Font: Nunito
- Skriftvekt: Ultra fet
- Stil: TT (store bokstaver)
- Vis knapp ett-ikon: NEI
Tilpass deretter margin- og polstringsinnstillingene for skrivebordsdesignet og legg til en boksskygge.
- Knapp En marg
- Topp: 200px
- Nederst: 0px
- Button One Polstring:
- Topp: 16px
- Nederst: 16px
- Venstre: 2em
- Høyre: 50 em
- Box Shadow: View Capture
Bruk responsive innstillinger for å angi forskjellige margin- og utfyllingsverdier på mobile enheter.
- Button One Margin-Top-Mobil: 25px
- Button One Padding-Høyre-Mobil: 10em
Tilpass knapp #2
Først, høyreklikk på knapp #1 og klikk Kopier Knapp One Styles.
Deretter høyreklikker du på knapp to og limer inn stilene fra knapp #1.
Nå kan vi tilpasse knapp to. Endre tekstfargen.
- Knapp to Tekstfarge: #121F60
Tilpass bakgrunnsgradienten for knapp to.
- 30 %: rgba(0,229,198,0)
- 100 %: #00e5c6
Bruk responsive innstillinger for å justere bakgrunnsgradienten for mobile enheter.
- 0 %: rgba(0,229,198,0)
- 100 %: #00e5c6
Deretter justerer du margen og polstring for skrivebordsdesignet.
- Knapp to marg:
- Topp: 0px
- Nederst: 0px
- Venstre: 30 %
- Knapp to polstring:
- Topp: 16px
- Nederst: 16px
- Venstre: 48em
- Høyre: 2 em
Bruk responsifq-innstillinger for å angi forskjellige margin- og utfyllingsverdier for mobildesign.
- Button Two Margin-Venstre-Mobil: 5 %
- Knapp to polstring:
- Venstre-mobil: 35 %
- Høyre-mobil: 5 %
Tilpasset CSS
Til slutt er hoveddelen av designarbeidet gjort. Nå må vi legge til tilpasset CSS for å fullføre designet. Bytt til fane Avansert og åpne delen Custom CSS.
Først, la oss starte med CSS for overskriftsbildet. Denne CSS-en lar overskriftsbildet vises over knappen.
z-index: 1;
position:relative;
Deretter tilpasset CSS i tittelen. Vi vil angi forskjellige verdier for skrivebords- og mobilvisninger ved å bruke responsive innstillinger.
For stasjonær datamaskin:
padding-top:50px;
padding-bottom:30px;
For mobil:
padding-top:5px;
padding-bottom:10px;
Til slutt, legg til følgende CSS til knapp én og knapp to.
white-space: nowrap;
Endelig resultat
Her er det endelige designet for vår header-heltseksjon i full bredde.
Les også: Divi: Hvordan lage en gruppemedlemmer som en karusell
Last ned DIVI nå!!!
konklusjonen
Fullwidth Header-modulen lar deg enkelt lage en vakker Hero-seksjon for å annonsere tjenestene dine og fortelle dine Besøkende hva er det du snakker om nettstedet Web.
Innebygde innstillinger gjør det enkelt å tilpasse alle aspekter av overskriften, og alt er samlet på ett sted, så du trenger ikke å bytte mellom flere moduler for å bygge din Hero-seksjon.
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.
...
