Vil du lage en Hero Divi-seksjon med Fullwidth Header-modulen eller designe en selv?
Bygg en heltedel av nettstedet Web fra bunnen av eller ved å bruke Divi Fullwidth Header-modulen er de to måtene å lage et iøynefallende design for nettside.
I denne artikkelen skal vi se på fordeler og ulemper ved å bruke en Fullwidth Header-modul kontra å lage din egen Hero-seksjon med Divi.
La oss gå!
Viktigheten av nettsideheltseksjoner
En helteseksjon er den aller første seksjonen din Besøkende se når de kommer på din nettstedet Web. Dette er ofte et banner i full bredde og kan også kalles en Hero Header. Det er et fremtredende sted på nettstedet ditt fordi det har kraften til å gi et varig førsteinntrykk.
Les også: Divi: Hvordan vise Fullwidth Header-modulen i fullskjerm
Det er derfor viktig at den er utformet på en slik måte at den er lett å lese samtidig som den er iøynefallende og overbevisende. Website Hero-seksjoner er viktige fordi de kan fange oppmerksomheten til potensielle kunder, raskt beskrive en side og føre til ytterligere engasjement og potensielle potensielle kunder. Heltseksjoner bør merkes, inkludere en H1-tittel og CTA.
Lag en helteseksjon fra bunnen av
Å designe en helteseksjon fra bunnen av lar deg ha full kontroll over designet og innhold. Avhengig av din situasjon og behov, kan dette være en flott løsning for nettstedet ditt.
La oss ta en titt på fordeler og ulemper med denne tilnærmingen.
Fordeler med denne tilnærmingen
Først, la oss se på fordelene ved å bygge en nettsideheltseksjon fra bunnen av ved å bruke Divi.
- Full designkontroll
- Bruk hvilken som helst Divi-modul
Ulemper med denne tilnærmingen
La oss nå se på ulempene ved å lage en helteseksjon fra bunnen av.
- Du må bygge fra bunnen av
- Krever flere mods
Lag en helteseksjon med Divi Fullwidth Header-modulen
Å lage en helteseksjon ved hjelp av Divi Fullwidth Header-modulen gjør det enkelt å lage en iøynefallende, mobil responsiv design på få minutter.
La oss ta en titt på fordeler og ulemper med denne tilnærmingen.
Fordeler med denne tilnærmingen
La oss ta en titt på fordelene ved å bygge en Hero-seksjon med Divi Fullwidth Header-modulen.
- Alle dine innhold er i en enkelt modul
- Designet er allerede optimalisert
Ulemper med denne tilnærmingen
La oss nå vurdere ulempene ved å designe en Hero-seksjon med Divi Fullwidth Header-modulen.
- Mindre fleksibilitet med design
Divi Fullwidth Header-modulen leveres med alternativer for innhold forhåndsdefinert, mens mange kan begrenses hvis du ønsker å legge til et innhold som ikke er tilgjengelig i modulen. Dette betyr at du vil ha mindre fleksibilitet med det generelle designet.
Konstruksjon av de to Hero-seksjonene trinn for trinn
Nå som du forstår fordelene og ulempene ved begge tilnærmingene, la oss bygge ut hver Hero-seksjon slik at du kan se nøyaktig hvordan hver tilnærming fungerer.
Opprett en ny side med Divi Builder
For å komme i gang må du gjøre følgende:
- Installer Divi på WordPress-nettstedet ditt.
- Legg til en side og gi den en tittel.
- Aktiver visuell bygger
Lag din heltedel fra bunnen av
Nå som siden vår er satt opp, la oss begynne å lage en helteseksjon fra bunnen av.
Last ned DIVI nå!!!
Aktiver "Divi Builder"
For å bruke Divis dra-og-slipp-bygger, må vi aktivere Visual Builder ved å klikke på knappen "Bruk DiviBuilder". Dette vil laste inn siden på nytt ved hjelp av Divi Visual Builder.
Velg: Bygg fra bunnen av
Nå som siden din har lastet inn på nytt med den visuelle byggeren aktivert, klikker du på alternativene " BYGG FRA bunnen av slik at vi har en blank side å jobbe med når vi designer.
Legg til rad og konfigurer kolonner
Lag en rad med følgende kolonnestruktur.
Legg til mods
La oss nå legge til innholdsmodulene vi trenger.
- 2 tekstmoduler, skillelinje, en knapp i venstre kolonne
- 1 bildemodul i den midterste kolonnen
- 1 bildemodul i høyre kolonne
Stilseksjon
La oss nå konfigurere seksjonsinnstillingene.
Legg til en seksjon, og konfigurer deretter følgende innstillinger:
- Bakgrunn: #1d1d25
Overskriftstekststil
Tilpass overskriftstekst:
- Overskrift 1:
- Skriftvekt: Semi fet
- Tekstfarge: #ffffff
- Tekststørrelse: 90px
- Linjehøyde: 1,1 em
separator
Konfigurer skillelinjens innstillinger:
- Linjefarge: rgba(255,255,255,0.3)
- Divider Vekt: 10px
- Maks bredde: 260 piksler
brødtekst
Tilpass brødtekst:
- Tekstfarge: rgba(255,255,255,0.7)
- Tekststørrelse: 13px
- Linjehøyde: 1,8 em
knapp
La oss nå tilpasse knappen.
I knappen Knapp:
- Bruk egendefinerte stiler for knapp: Ja
- Knappens tekststørrelse: 14px
- Tekstfarge: #ffffff
- Knappebakgrunn:
- Kantbredde: 0 piksler
- Kantradius: 0 piksler
I Avstand-fanen:
- Topp og bunn: 40px
- Venstre og høyre: 20px
Legg til bilder
Legg bildene til bildemodulene.
Juster linjeinnstillinger
Parametere på linje:
- Marg (venstre): 15vw
Juster 2. kolonne
Konfigurer disse innstillingene i den andre kolonnen:
Tilpasset CSS
Lim inn følgende kode i kodedelen av hovedelementet:
argin-right: -15vw!important;
z-index: 100!important;
avstanden
Legg til 100 piksler topppolstring.
Så! Du har nå en fullstendig tilpasset helteseksjon.
Last ned DIVI nå!!!
Lag din Hero-seksjon med Divis Fullwidth Header-modul
La oss nå se hvordan du gjenskaper denne Hero-delen ved å bruke Divis Fullwidth Header-modul.
Last ned DIVI nå!!!
Legg til en side og velg Bygg fra bunnen av
Legg til en ny side, gi den en tittel, klikk deretter på "Bruk Divi Builder" og velg deretter Bygg fra bunnen av.
Sett inn en seksjon i full bredde og en topptekst i full bredde
Sett inn seksjon Full bredde, og velg deretter Toppbreddeoverskrift i modulbiblioteket.
Innhold
Legg til tekstinnholdet i modulen i fanen Tekst.
Bilder
Legg til bildene i bildefanen.
Endre bakgrunnsfarge
Konfigurer følgende innstilling i bakgrunnsfanen:
- Bakgrunn: #1D1D25
Overskriftstekst
Konfigurer innstillinger for overskriftstekst:
- Tittel Skriftvekt: Fet
- Tekststørrelse: 90px
brødtekst
Konfigurer innstillinger for brødtekst:
- Brødtekstfarge: rgba(255,255,255,0.55)
Underteksttekst
Konfigurer innstillingene for bildetekst:
- Tekstvekt: Fet skrift
- Tekstfarge: #4C594C
- Bokstavavstand: 3px
knapper
La oss nå tilpasse de to knappene.
knapp en
På Button One-fanen, konfigurer følgende innstillinger:
- Bruk egendefinerte stiler for knapp én: Ja
- Knapp en
- Bakgrunn: #4c594c
- Kantbredde: 0 piksler
- Kanteradius: 0px
- Vis ikon: JA
- Vis kun ikon ved peker: Nei
- Polstring: 25 piksler (øverst og bunn); 25px (venstre), 50px (høyre)
Knapp to
Konfigurer følgende innstillinger i kategorien Knapp to:
- Bruk egendefinerte stiler for knapp to: JA
- Knapp to kantbredde: 0 piksler
- Kanteradius: 0px
- Polstring: 25px (øverst, bunn, venstre og høyre)
- Button Box Shadow: Velg den fjerde
- Box Shadow Horisontal Posisjon: 0px
- Box Shadow Vertikal posisjon: 2px
- Skyggefarge: #ffffff
Så! Du har nå en fullstendig designet Hero-seksjon som bruker Divi Fullwidth Header-modulen.
Se også: Divi: Hvordan lage bakgrunnsoverganger mellom elementer
Last ned DIVI nå!!!
konklusjonen
Det er enkelt å bygge en helteseksjon med Divi, enten du bygger fra bunnen av eller bruker Fullwidth Header-modulen. Begge alternativene lar deg lage fantastiske header-design som fanger interessen din Besøkende.
Avhengig av dine unike behov, er begge alternativene et flott alternativ å vurdere når du styler Hero-delen.
Etter å ha lest fordeler og ulemper med begge, hvordan ville du utformet 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.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...