Kunne du tænke dig at oprette en Hero Divi-sektion med Fullwidth Header-modulet eller designe en selv?
Byg en helte sektion af Websted fra bunden eller ved at bruge Divi Fullwidth Header-modulet er de to måder at skabe et iøjnefaldende design til din websted.
I denne artikel vil vi se på fordele og ulemper ved at bruge et Fullwidth Header-modul i forhold til at skabe din egen Hero-sektion med Divi.
Lad os gå!
Vigtigheden af hjemmesidehelte-sektioner
En helte sektion er den allerførste sektion, som din besøgende se, hvornår de ankommer på din Websted. Dette er ofte et banner i fuld bredde og kan også kaldes en Hero Header. Det er et fremtrædende sted på dit websted, fordi det har magten til at efterlade et varigt første indtryk.
Læs også: Divi: Sådan får du vist Fullwidth Header-modulet i fuld skærm
Det er derfor vigtigt, at den er designet på en sådan måde, at den er let at læse, samtidig med at den er iøjnefaldende og overbevisende. Website Hero-sektioner er vigtige, fordi de kan fange potentielle kunders opmærksomhed, hurtigt beskrive en side og føre til yderligere engagement og potentielle kundeemner. Hero-sektioner bør mærkes, indeholde en H1-titel og CTA.
Opret en heltesektion fra bunden
At designe en Hero-sektion fra bunden giver dig mulighed for at have fuldstændig kontrol over designet og indhold. Afhængigt af din situation og behov kan dette være en god løsning til din hjemmeside.
Lad os tage et kig på fordele og ulemper ved denne tilgang.
Fordele ved denne tilgang
Lad os først se på fordelene ved at opbygge en hjemmeside Hero-sektion fra bunden ved hjælp af Divi.
- Fuld designkontrol
- Brug et hvilket som helst Divi-modul
Ulemper ved denne tilgang
Lad os nu se på ulemperne ved at skabe en heltesektion fra bunden.
- Du skal bygge fra bunden
- Kræver flere mods
Opret en heltesektion med Divi Fullwidth Header-modulet
Oprettelse af en heltesektion ved hjælp af Divi Fullwidth Header-modulet gør det nemt at skabe et iøjnefaldende, mobilt responsivt design på få minutter.
Lad os tage et kig på fordele og ulemper ved denne tilgang.
Fordele ved denne tilgang
Lad os tage et kig på fordelene ved at bygge en Hero-sektion med Divi Fullwidth Header-modulet.
- Alle dine indhold er i et enkelt modul
- Designet er allerede optimeret
Ulemper ved denne tilgang
Lad os nu vurdere ulemperne ved at designe en Hero-sektion med Divi Fullwidth Header-modulet.
- Mindre fleksibilitet med design
Divi Fullwidth Header-modulet leveres med muligheder for indhold foruddefinerede, mens mange kan begrænses, hvis du ønsker at tilføje et stykke indhold, som ikke er tilgængeligt i modulet. Det betyder, at du vil have mindre fleksibilitet med det overordnede design.
Konstruktion af de to Hero-sektioner trin for trin
Nu hvor du forstår fordelene og ulemperne ved begge tilgange, lad os bygge hver helte-sektion ud, så du kan se præcis, hvordan hver tilgang fungerer.
Opret en ny side med Divi Builder
For at komme i gang skal du gøre følgende:
- Installer Divi på dit WordPress-websted.
- Tilføj en side og giv den en titel.
- Aktiver visuel builder
Opret din helte-sektion fra bunden
Nu hvor vores side er oprettet, lad os begynde at skabe en heltesektion fra bunden.
Download DIVI nu!!!
Aktiver "Divi Builder"
For at bruge Divi's træk og slip builder skal vi aktivere Visual Builder ved at klikke på knappen "Brug DiviBuilder". Dette vil genindlæse siden ved hjælp af Divi Visual Builder.
Vælg: Byg fra bunden
Nu hvor din side er genindlæst med den visuelle builder aktiveret, skal du klikke på indstillingerne " BYG FRA bunden så vi har en tom side at arbejde med, når vi designer.
Tilføj række og konfigurer kolonner
Opret en række med følgende kolonnestruktur.
Tilføj mods
Lad os nu tilføje de indholdsmoduler, vi skal bruge.
- 2 tekstmoduler, skillevæg, en knap i venstre kolonne
- 1 billedmodul i den midterste kolonne
- 1 billedmodul i højre kolonne
Stilsektion
Lad os nu konfigurere sektionsindstillingerne.
Tilføj en sektion, og konfigurer derefter følgende indstillinger:
- Baggrund: #1d1d25
Overskriftstekststil
Tilpas overskriftstekst:
- Overskrift 1:
- Skrifttypevægt: Semi fed
- Tekstfarve: #ffffff
- Tekststørrelse: 90px
- Linjehøjde: 1,1 em
separator
Konfigurer divider-indstillingerne:
- Linjefarve: rgba(255,255,255,0.3)
- Divider Vægt: 10px
- Maks. bredde: 260px
brødtekst
Tilpas brødtekst:
- Tekstfarve: rgba(255,255,255,0.7)
- Tekststørrelse: 13px
- Linjehøjde: 1,8 em
knap
Lad os nu tilpasse knappen.
På fanen Knap:
- Brug brugerdefinerede stilarter til knap: Ja
- Knaptekststørrelse: 14px
- Tekstfarve: #ffffff
- Knap baggrund:
- Kantbredde: 0 pixels
- Kantradius: 0 pixels
På fanen mellemrum:
- Top og bund: 40px
- Venstre og højre: 20px
Tilføj billeder
Tilføj billederne til billedmodulerne.
Juster linjeindstillinger
In line parametre:
- Margin (venstre): 15vw
Juster 2. kolonne
I den anden kolonne skal du konfigurere disse indstillinger:
Tilpasset CSS
Indsæt følgende kode i kodesektionen af hovedelementet:
argin-right: -15vw!important;
z-index: 100!important;afstand
Tilføj 100 pixels toppolstring.
Så! Du har nu en fuldt designet brugerdefineret heltesektion.
Download DIVI nu!!!
Opret din heltesektion med Divi's Fullwidth Header-modul
Lad os nu se, hvordan du genskaber denne Hero-sektion ved hjælp af Divi's Fullwidth Header-modul.
Download DIVI nu!!!
Tilføj en side, og vælg Byg fra bunden
Tilføj en ny side, giv den en titel, klik derefter på "Brug Divi Builder", og vælg derefter Byg fra bunden.
Indsæt en sektion i fuld bredde og en overskrift i fuld bredde
Indsæt sektion Fuld bredde, vælg derefter Overskrift til fuldbredde i modulbiblioteket.
Indhold
Tilføj det tekstmæssige indhold til modulet på fanen Tekst.
Billeder
Tilføj billederne i billedfanen.
Skift baggrundsfarve
På baggrundsfanen skal du konfigurere følgende indstilling:
- Baggrund: #1D1D25
Overskriftstekst
Konfigurer indstillinger for overskriftstekst:
- Titel Skrifttypevægt: Fed
- Tekststørrelse: 90px
brødtekst
Konfigurer indstillinger for brødtekst:
- Brødtekstfarve: rgba(255,255,255,0.55)
Undertekst tekst
Konfigurer indstillinger for billedteksttekst:
- Undertekstskrifttypevægt: Fed
- Tekstfarve: #4C594C
- Bogstavafstand: 3px
knapper
Lad os nu tilpasse de to knapper.
knap en
På fanen Button One skal du konfigurere følgende indstillinger:
- Brug brugerdefinerede stilarter til knap XNUMX: Ja
- Knap en
- Baggrund: #4c594c
- Kantbredde: 0 pixels
- Kantradius: 0px
- Vis ikon: JA
- Vis kun ikon ved svæv: Nej
- Polstring: 25 pixels (top og bund); 25px (venstre), 50px (højre)
Knap to
På fanen knap to skal du konfigurere følgende indstillinger:
- Brug brugerdefinerede stilarter til knap to: JA
- Knap to kantbredde: 0 pixels
- Kantradius: 0px
- Polstring: 25px (top, bund, venstre og højre)
- Button Box Shadow: Vælg den 4
- Box Shadow Horisontal Position: 0px
- Box Shadow Lodret position: 2px
- Skyggefarve: #ffffff
Så! Du har nu en fuldt designet Hero-sektion ved hjælp af Divi Fullwidth Header-modulet.
Se også: Divi: Sådan opretter du baggrundsovergange mellem elementer
Download DIVI nu!!!
Konklusion
Det er nemt at bygge en Hero-sektion med Divi, uanset om du bygger fra bunden eller bruger Fullwidth Header-modulet. Begge muligheder giver dig mulighed for at skabe fantastiske header-design, der fanger din interesse besøgende.
Afhængigt af dine unikke behov er begge muligheder en god mulighed at overveje, når du styler din Hero-sektion.
Efter at have læst fordele og ulemper ved begge, hvordan ville du designe 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 gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også 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.
...
