Vill du skapa en Hero Divi-sektion med Fullwidth Header-modulen eller designa en själv?
Bygg en hjältesektion av webbplats från grunden eller att använda Divi Fullwidth Header-modulen är de två sätten att skapa en iögonfallande design för din webbplats.
I den här artikeln kommer vi att titta på för- och nackdelarna med att använda en Fullwidth Header-modul kontra att skapa din egen Hero-sektion med Divi.
Låt oss gå!
Vikten av webbplatshjältesektioner
En hjältesektion är den allra första sektionen som din besökare se när de kommer på din webbplats. Detta är ofta en banner i full bredd och kan också kallas en hjältehuvud. Det är en framträdande plats på din webbplats eftersom den har kraften att lämna ett bestående första intryck.
Läs också: Divi: Hur man visar Fullwidth Header-modulen i helskärm
Det är därför viktigt att den är utformad på ett sådant sätt att den är lätt att läsa samtidigt som den är iögonfallande och övertygande. Website Hero-sektioner är viktiga eftersom de kan fånga potentiella kunders uppmärksamhet, snabbt beskriva en sida och leda till ytterligare engagemang och potentiella leads. Hjältesektioner bör vara varumärkesmärkta, inkludera en H1-titel och CTA.
Skapa en hjältesektion från grunden
Genom att designa en hjältesektion från grunden kan du ha fullständig kontroll över designen och innehåll. Beroende på din situation och dina behov kan detta vara en bra lösning för din webbplats.
Låt oss ta en titt på för- och nackdelarna med detta tillvägagångssätt.
Fördelar med detta tillvägagångssätt
Låt oss först titta på fördelarna med att bygga en webbplatshjältesektion från grunden med Divi.
- Full designkontroll
- Använd valfri Divi-modul
Nackdelar med detta tillvägagångssätt
Låt oss nu titta på nackdelarna med att skapa en hjältesektion från början.
- Du måste bygga från grunden
- Kräver flera mods
Skapa en hjältesektion med Divi Fullwidth Header-modulen
Att skapa en hjältesektion med Divi Fullwidth Header-modulen gör det enkelt att skapa en iögonfallande, mobil responsiv design på bara några minuter.
Låt oss ta en titt på för- och nackdelarna med detta tillvägagångssätt.
Fördelar med detta tillvägagångssätt
Låt oss ta en titt på fördelarna med att bygga en hjältesektion med Divi Fullwidth Header-modulen.
- Alla dina innehåll finns i en enda modul
- Designen är redan optimerad
Nackdelar med detta tillvägagångssätt
Låt oss nu utvärdera nackdelarna med att designa en Hero-sektion med Divi Fullwidth Header-modulen.
- Mindre flexibilitet med design
Divi Fullwidth Header-modulen kommer med alternativ för innehåll fördefinierade, medan många kan begränsas om du vill lägga till ett innehåll som inte är tillgängligt i modulen. Detta innebär att du kommer att ha mindre flexibilitet med den övergripande designen.
Konstruktion av de två Hero-sektionerna steg för steg
Nu när du förstår för- och nackdelarna med båda tillvägagångssätten, låt oss bygga ut varje Hero-sektion så att du kan se exakt hur varje tillvägagångssätt fungerar.
Skapa en ny sida med Divi Builder
För att komma igång måste du göra följande:
- Installera Divi på din WordPress-webbplats.
- Lägg till en sida och ge den en titel.
- Aktivera visuell byggare
Skapa din hjältesektion från grunden
Nu när vår sida är konfigurerad, låt oss börja skapa en hjältesektion från början.
Ladda ner DIVI nu!!!
Aktivera "Divi Builder"
För att kunna använda Divis dra-och-släpp-byggare måste vi aktivera Visual Builder genom att klicka på knappen "Använd DiviBuilder". Detta kommer att ladda om sidan med Divi Visual Builder.
Välj: Bygg från grunden
Nu när din sida har laddats om med den visuella byggaren aktiverad, klicka på alternativen " BYGGA FRÅN SKRATCH så att vi har en tom sida att arbeta med när vi designar.
Lägg till rad och konfigurera kolumner
Skapa en rad med följande kolumnstruktur.
Lägg till mods
Låt oss nu lägga till innehållsmodulerna vi behöver.
- 2 textmoduler, avdelare, en knapp i den vänstra kolumnen
- 1 Bildmodul i mittenkolumnen
- 1 Bildmodul i den högra kolumnen
Stilsektion
Låt oss nu konfigurera avsnittsinställningarna.
Lägg till ett avsnitt och konfigurera sedan följande inställningar:
- Bakgrund: #1d1d25
Rubriktextstil
Anpassa rubriktext:
- Rubrik 1:
- Teckensnittsvikt: Halvfet
- Textfärg: #ffffff
- Textstorlek: 90px
- Linjehöjd: 1,1 em
separator
Konfigurera avdelarens inställningar:
- Linjefärg: rgba(255,255,255,0.3)
- Divider Vikt: 10px
- Max bredd: 260px
kropp text
Anpassa brödtext:
- Textfärg: rgba(255,255,255,0.7)
- Textstorlek: 13px
- Linjehöjd: 1,8 em
knapp
Låt oss nu anpassa knappen.
På fliken Knapp:
- Använd anpassade stilar för knapp: Ja
- Knapptextstorlek: 14px
- Textfärg: #ffffff
- Knappbakgrund:
- Kantbredd: 0 pixlar
- Kantradie: 0 pixlar
På fliken Mellanrum:
- Topp och botten: 40px
- Vänster och höger: 20px
Lägg bilder
Lägg till bilderna i bildmodulerna.
Justera linjeinställningar
In-line parametrar:
- Marginal (vänster): 15vw
Justera andra kolumnen
Konfigurera dessa inställningar i den andra kolumnen:
Anpassad CSS
Klistra in följande kod i koddelen av huvudelementet:
argin-right: -15vw!important;
z-index: 100!important;avstånd
Lägg till 100 pixlar toppstoppning.
Där är det ! Du har nu en helt anpassad hjältesektion.
Ladda ner DIVI nu!!!
Skapa din hjältesektion med Divis Fullwidth Header-modul
Låt oss nu se hur man återskapar denna hjälte-sektion med Divis Fullwidth Header-modul.
Ladda ner DIVI nu!!!
Lägg till en sida och välj Bygg från början
Lägg till en ny sida, ge den en titel, klicka sedan på "Använd Divi Builder" och välj sedan Bygg från början.
Infoga en fullbreddssektion och en fullbreddshuvud
Infoga avsnitt Full bredd, välj sedan Rubrik för fullbredd i modulbiblioteket.
Innehåll
Lägg till textinnehållet i modulen på fliken Text.
Bilder
Lägg till bilderna i bildfliken.
Ändra bakgrundsfärg
På bakgrundsfliken konfigurerar du följande inställning:
- Bakgrund: #1D1D25
Rubrik
Konfigurera inställningar för rubriktext:
- Titel Teckensnittsvikt: Fet
- Textstorlek: 90px
kropp text
Konfigurera brödtextinställningar:
- Brödtextfärg: rgba(255,255,255,0.55)
Undertext
Konfigurera inställningarna för bildtext:
- Textning Teckensnittsvikt: Fet
- Textfärg: #4C594C
- Bokstavsavstånd: 3px
knappar
Låt oss nu anpassa de två knapparna.
knapp ett
På fliken Button One konfigurerar du följande inställningar:
- Använd anpassade stilar för knapp ett: Ja
- Knapp ett
- Bakgrund: #4c594c
- Kantbredd: 0 pixlar
- Kantradie: 0px
- Visa ikon: JA
- Visa endast ikon vid svävning: Nej
- Utfyllnad: 25 pixlar (överst och nedre); 25px (vänster), 50px (höger)
Knapp två
På fliken Knapp två konfigurerar du följande inställningar:
- Använd anpassade stilar för knapp två: JA
- Knapp två kantbredd: 0 pixlar
- Kantradie: 0px
- Utfyllnad: 25px (överst, botten, vänster och höger)
- Button Box Shadow: Välj den 4:e
- Box Shadow horisontell position: 0px
- Box Shadow Vertikal Position: 2px
- Skuggfärg: #ffffff
Där är det ! Du har nu en helt designad Hero-sektion som använder Divi Fullwidth Header-modulen.
Se även: Divi: Hur man skapar bakgrundsövergångar mellan element
Ladda ner DIVI nu!!!
Slutsats
Att bygga en Hero-sektion med Divi är enkelt, oavsett om du bygger från grunden eller använder fullbreddshuvudmodulen. Båda alternativen låter dig skapa fantastiska headerdesigner som fångar ditt intresse besökare.
Beroende på dina unika behov är båda alternativen ett bra alternativ att överväga när du stylar din Hero-sektion.
Efter att ha läst för- och nackdelarna med båda, hur skulle du designa din Hero-sektion?
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
