Vill du skapa en hjältesektion i Divi som är flytande istället för den traditionella responsiva?
Hjältesektionen i en webbplats är en av de bästa kandidaterna för flytande design. Till skillnad från traditionell responsiv design som anpassar sig till olika brytpunkter, anpassar sig flytande design sömlöst till webbläsarens vyport och håller designen konsekvent på alla enheter. När allt kommer omkring är Hjältesektionen det första användarna ser på en webbplats.
I den här handledningen kommer vi att visa dig hur du skapar en hel flytande hjältesektion i Divi. Nyckeln till att skapa denna flytande design är att lägga till en flytande rotteckensnittsstorlek till var och en av modulerna som används och sedan införliva längdenheten em (vem är i förhållande till rottextstorleken ) i modulinställningarna.
Låt oss börja!
undersökningen
Här är en snabb titt på designen vi kommer att skapa i den här handledningen.
Lägg märke till hur den flytande designen smidigt anpassar sig till bredden på webbläsarfönstret.
Skapa en ny sida med Divi Builder
För att komma igång måste du göra följande:
Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
Ge den en titel som är vettig för dig och klicka Använda Divi Builder
klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk att börja designa i Divi.
Läs också: Divi: Hur man skapar en hjältesektion med Fullwidth Header-modulen
Hur man designar en Fluid Hero-sektion i Divi
Avsnitt inställningar
Till att börja med, låt oss uppdatera de befintliga designinställningarna för avsnittet. Öppna avsnittsinställningar och uppdatera följande:
- Gradientstopp:
- 30 %: #ff2000
- 30 %: #121212
- Lutningsriktning: 45 grader
Under fliken Designa, uppdatera stoppningen:
- Vaddering: 0px topp, 0px botten
Skapa en linje
Lägg sedan till en rad med en kolumn i avsnittet.
Linjeinställningar
Öppna linjeinställningar och uppdatera följande under fliken Designa :
- Rännans bredd: 1
- Bredd: 100 %
- Max bredd: 1px
- Min höjd: 100 vh (skrivbord), ingen (surfplatta och telefon)
- Utfyllnad: 0px (topp och botten)
Skapa flödande rubriktext med ram
Nu när avsnittet och raden är klara kan vi lägga till den flödande rubriktexten till hjälteavsnittet. Vi kommer också att lägga till en flytande ram till textmodulen för ett kreativt designelement.
Lägg till en textmodul
Lägg till en ny textmodul i kolumnen för att skapa titeltext och kantlinje.
Textinställningar
Under fliken Innehåll, uppdatera den innehåll av kroppen med följande HTML-kod:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
För att göra designelementen flytande måste vi först lägga till en flytande rotteckensnittsstorlek till modulen med CSS Clamp()-funktionen.
Under fliken Advanced Open water, klistra in följande CSS-kodavsnitt:
font-size: clamp(32px, 4.1vw, 70px);
Under fliken Designa, uppdatera följande designinställningar för rubriktext:
- Rubriktext:
- Typ: H1
- Typsnitt: Montserrat
- Teckensnittsvikt: Tung
- Färg: #ffffff
- Storlek: 1em
- Bokstavsavstånd: 0,1 em
- Linjehöjd: 1,2 em
Uppdatera även modpaddingen enligt följande:
- Vaddering: 1:a (överst, botten, vänster och höger)
Uppdatera följande för att skapa den flytande gränsdesignen:
- Kantbredd: 1 em
- Kantfärg: #ffffff
- Nedre kantfärg: klar
- Vänster kantfärg: klar
Skapa accentgränsen
För att skapa accentgränsen kan vi duplicera den befintliga textmodulen.
Radera det innehåll av det befintliga organet och uppdatera designparametrarna enligt följande:
- Max bredd: 6,5 cm
- Höjd: 3,25 em
- Kantbredd: 0,5 em
- Kantfärg: #ff2000
För att placera accentkanten, lägg till en absolut position med en förskjutning lika med bredden på kanten i Rubriktext (1em)-modulen.
Under fliken Advanced Open water, uppdatera följande positionsalternativ:
- Position: Absolut
- Plats: uppe till höger
- Vertikal offset: 1em
- Horisontell offset: 1em
Skapa undertext
Under rubriken lägger vi till den flytande undertexten. Eftersom den här texten är mindre lägger vi till en mindre flytande rotteckensnittsstorlek.
Lägg till en ny textmodul
För att skapa bildtexten lägger du till en ny textmodul under den befintliga rubriktextmodulen.
Du kan lägga till några utfyllnadstextmeningar enligt följande:
- Innehåll: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lägg till flytande rotteckensnittsstorlek
Därefter måste vi lägga till en ny flytande teckenstorlek som fungerar bättre för liten text. På fliken Avancerat klistrar du in följande CSS-kodavsnitt under huvudelementet:
font-size: clamp(14px, 1.4vw, 24px);
Inställningar för textdesign
Under fliken Designa, uppdatera följande:
- Text:
- Teckensnittsvikt: Halvfet
- Färg: #ffffff
- Storlek: 1em
- Höjd: 1,6 em
Uppdatera sedan storleken och avståndet enligt följande:
- Max bredd: 19 cm
- Marginal: 2 em (botten), auto (vänster), 5 em (höger)
Skapa vätskeknappen
För att skapa vätskeknappen, lägg till en ny knappmodul under undertextmodulen.
Uppdatera sedan knapptexten för att läsa "7 Day Free Tral".
Lägg till flytande rotteckensnittsstorlek
Därefter måste vi lägga till en ny flytande teckenstorlek som är lämplig för en knapp.
Under fliken Advanced Open water, klistra in följande CSS-kodavsnitt under huvudelementet:
font-size: clamp(20px, 2.35vw, 40px);
Inställningar för knappdesign
Under fliken Designa, uppdatera följande:
- Knappinställning: Höger
- Använd anpassad storlek för knapp: JA
- Knappens textfärg: #ff2000
- Gradientstopp:
- Färg 1 25%: klar
- Färg 2 25%: #ffffff
- Lutningsriktning: 45 grader
- Knapp :
- Kantbredd: 0 pixlar
- Kantradie: 0 pixlar
- Typsnitt: Montserrat
- Teckensnittsvikt: tjock
- Stil: kursiv
- Visa knappikon: JA
- Ikon: triangelformad pil till höger (se skärmdump)
- Ikonplacering: Höger
- Marginal: 8 em (höger)
- Vaddering: 0,2 em (topp och botten), 1,5 em (vänster), 1 em (höger)
Skapa en bild för hjältesektionen
Med alla innehåll av hjälteavsnittet till rätt storlek på sidan, är vi redo att lägga till hjälteavsnittsbilden på vänster sida. För att göra detta, lägg först till en bildmodul under knappen.
Öppna bildinställningar och ladda upp en bild.
Inställningar för bilddesign
Under fliken Designa, uppdatera följande inställningar:
- Bildjustering: vänster (dator och surfplatta), mitten (telefon)
- Max bredd: 48 % (dator och surfplatta), 70 % (telefon)
- Vaddering: 4% (vänster)
Slutligen, ge bilden en absolut position med en offset med hjälp av vmin-längdenheten enligt följande:
- Befattning: Absolut (dator och surfplatta), Relativ (telefon)
- Plats: uppe till vänster (dator och surfplatta)
- Vertikal offset: 30vmin (dator och surfplatta), 0px (telefon)
Slutresultat
Här är slutresultatet på en livesida.
Se även: Divi: Hur man använder masker och bakgrundsmönster för en hjältesektion
Detta är hur den flytande designen smidigt anpassar sig till bredden på webbläsarfönstret.
Ladda ner DIVI nu!!!
Slutsats
Att lägga till en flytande design till en Hero-sektion kan vara ett praktiskt sätt att se till att toppen av vecket är vackert konsekvent i alla webbläsarstorlekar, utan att behöva uppdatera designen vid punkter, specifika stopp eller för att använda mediefrågor.
Förhoppningsvis kommer denna teknik att lägga till ytterligare en användbar designfärdighet för framtida projekt.
Vi hoppas också 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.
.
