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.

lag en Hero-seksjon på Divi med Fullwidth Header-modulen

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.

lag en Hero-seksjon på Divi med Fullwidth Header-modulen

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.

lag en Hero-seksjon på Divi med Fullwidth Header-modulen

Opprett en ny side med Divi Builder

For å komme i gang må du gjøre følgende:

  1. Installer Divi  på WordPress-nettstedet ditt.
  2. Legg til en side og gi den en tittel.
  3. 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.

lag en Hero-seksjon på Divi med Fullwidth Header-modulen

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
lag en Hero-seksjon på Divi med Fullwidth Header-modulen

Så! Du har nå en fullstendig designet Hero-seksjon som bruker Divi Fullwidth Header-modulen.

Se også: Divi: Hvordan lage bakgrunnsoverganger mellom elementer

Hero Divi-seksjonen

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.

...