Wil je een Hero-sectie maken in Divi wat is vloeiend in plaats van de traditionele responsieve?
De heldensectie van a Site web is een van de beste kandidaten voor vloeiend ontwerp. In tegenstelling tot traditioneel responsief ontwerp dat zich aanpast aan verschillende breekpunten, past het vloeiende ontwerp zich naadloos aan de browserviewport aan en houdt het ontwerp consistent op elk apparaat. De Hero-sectie is tenslotte het eerste wat gebruikers zien op een Site web.
In deze tutorial laten we je zien hoe je een hele vloeiende heldensectie kunt maken in Divi. De sleutel tot het maken van dit vloeiende ontwerp is om een vloeiende hoofdlettergrootte toe te voegen aan elk van de gebruikte modules en vervolgens de lengte-eenheid op te nemen em (wie is ten opzichte van de lettergrootte van de hoofdtekst ) in de module-instellingen.
Laten we beginnen!
overzicht
Hier is een korte blik op het ontwerp dat we in deze zelfstudie gaan maken.
Merk op hoe het vloeiende ontwerp zich soepel aanpast aan de breedte van het browservenster.
Maak een nieuwe pagina met Divi Builder
Om te beginnen, moet u het volgende doen:
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Te gebruiken Divi Bouwer
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om in te ontwerpen Divi.
Lees ook: Divi: Hoe maak je een Hero-sectie aan met de Fullwidth Header-module
Hoe een Fluid Hero-sectie in Divi . te ontwerpen
Sectie-instellingen
Laten we om te beginnen de bestaande ontwerpinstellingen voor de sectie bijwerken. Open sectie-instellingen en werk het volgende bij:
- Gradiëntstops:
- 30%: #ff2000
- 30%: #121212
- Gradiëntrichting: 45deg
Onder het tabblad Design, werk de opvulling bij:
- Vulling: 0px boven, 0px onder
Maak een regel
Voeg vervolgens een rij met één kolom toe aan de sectie.
Lijn instellingen
Open lijninstellingen en update het volgende onder het tabblad Design :
- Gootbreedte: 1
- Breedte: 100%
- Maximale breedte: 1px
- Minimale hoogte: 100 vh (desktop), geen (tablet en telefoon)
- Vulling: 0px (boven en onder)
Maak vloeiende koptekst met rand
Nu de sectie en lijn compleet zijn, kunnen we de vloeiende koptekst toevoegen aan de Hero-sectie. We voegen ook een vloeiende rand toe aan de tekstmodule voor een creatief ontwerpelement.
Een tekstmodule toevoegen
Om de titeltekst en rand te maken, voegt u een nieuwe tekstmodule toe aan de kolom.
Tekst instellingen
Onder het tabblad Content, update Het inhoud van de body met de volgende HTML-code:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Om de ontwerpelementen vloeiend te maken, moeten we eerst een vloeiende hoofdlettergrootte aan de module toevoegen met behulp van de CSS Clamp()-functie.
Onder het tabblad Geavanceerd, plak het volgende CSS-fragment:
font-size: clamp(32px, 4.1vw, 70px);
Onder het tabblad Design, werk de volgende ontwerpinstellingen voor koptekst bij:
- Koptekst:
- Type: H1
- Lettertype: Montserrat
- Lettergewicht: Zwaar
- Kleur: #ffffff
- Maat: 1em
- Letterafstand: 0,1em
- Lijnhoogte: 1,2 em
Werk ook de mod-padding als volgt bij:
- Vulling: 1e (Boven, Onder, Links en Rechts)
Werk het volgende bij om het vloeiende randontwerp te maken:
- Randbreedte: 1em
- Randkleur: #ffffff
- Kleur onderste rand: helder
- Kleur linkerrand: helder
De accentrand maken
Om de accentrand te maken, kunnen we de bestaande tekstmodule dupliceren.
Verwijder het inhoud van de bestaande carrosserie en update de ontwerpparameters als volgt:
- Maximale breedte: 6,5 cm
- Hoogte: 3,25 cm
- Randbreedte: 0,5em
- Randkleur: #ff2000
Om de accentrand te positioneren, voegt u een absolute positie toe met een offset die gelijk is aan de breedte van de rand in de module Koptekst (1em).
Onder het tabblad Geavanceerd, werk de volgende Positie-opties bij:
- Positie: Absoluut
- Locatie: rechtsboven
- Verticale offset: 1em
- Horizontale offset: 1em
Ondertiteltekst maken
Onder de titeltekst voegen we de vloeiende ondertiteltekst toe. Omdat deze tekst kleiner is, zullen we een kleinere lettergrootte voor vloeiende hoofdletters toevoegen.
Een nieuwe tekstmodule toevoegen
Om de bijschrifttekst te maken, voegt u een nieuwe tekstmodule toe onder de bestaande koptekstmodule.
U kunt als volgt enkele opvultekstzinnen toevoegen:
- Inhoud: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vloeiende hoofdlettergrootte toevoegen
Vervolgens moeten we een nieuwe vloeiende lettergrootte toevoegen die beter werkt voor kleine tekst. Plak op het tabblad Geavanceerd het volgende CSS-fragment onder het hoofdelement:
font-size: clamp(14px, 1.4vw, 24px);
Instellingen voor tekstontwerp
Onder het tabblad Design, werk het volgende bij:
- Tekst:
- Lettergewicht: Semi Vet
- Kleur: #ffffff
- Maat: 1em
- Hoogte: 1,6 cm
Werk vervolgens de grootte en afstand als volgt bij:
- Maximale breedte: 19 cm
- Marge: 2 em (onder), auto (links), 5 em (rechts)
Maak de vloeistofknop
Om de vloeiende knop te maken, voegt u een nieuwe knopmodule toe onder de module Ondertiteltekst.
Werk vervolgens de knoptekst bij om "7 Day Free Tral" te lezen.
Vloeiende hoofdlettergrootte toevoegen
Vervolgens moeten we een nieuwe vloeiende lettergrootte toevoegen die geschikt is voor een knop.
Onder het tabblad Geavanceerd, plak het volgende CSS-fragment onder het hoofdelement:
font-size: clamp(20px, 2.35vw, 40px);
Instellingen voor knopontwerp
Onder het tabblad Design, werk het volgende bij:
- Knop Uitlijning: Rechts
- Gebruik aangepast formaat voor knop: JA
- Tekstkleur knop: #ff2000
- Gradiëntstops:
- Kleur 1 25%: helder
- Kleur 2 25%: #ffffff
- Gradiëntrichting: 45 graden
- Knop:
- Randbreedte: 0 pixels
- Randstraal: 0 pixels
- Lettertype: Montserrat
- Lettergewicht: dik
- Stijl: cursief
- Knoppictogram weergeven: JA
- Icoon: driehoekige pijl naar rechts (zie screenshot)
- Pictogramplaatsing: Rechts
- Marge: 8em (rechts)
- Vulling: 0,2em (boven en onder), 1,5em (links), 1em (rechts)
Maak een afbeelding voor de sectie Held
Met alle inhoud van de Hero-sectie naar de juiste grootte van de pagina, zijn we klaar om de Hero-sectieafbeelding aan de linkerkant toe te voegen. Om dit te doen, voegt u eerst een Afbeeldingsmodule toe onder de knop.
Open afbeeldingsinstellingen en upload een afbeelding.
Instellingen voor afbeeldingsontwerp
Onder het tabblad Design, werk de volgende instellingen bij:
- Beelduitlijning: links (desktop en tablet), midden (telefoon)
- Maximale breedte: 48% (desktop en tablet), 70% (telefoon)
- Vulling: 4% (links)
Geef ten slotte de afbeelding een absolute positie met een offset met behulp van de vmin-lengte-eenheid als volgt:
- Positie: Absoluut (desktop en tablet), relatief (telefoon)
- Locatie: linksboven (Desktop en Tablet)
- Verticale offset: 30vmin (desktop en tablet), 0px (telefoon)
Eindresultaat
Hier is het eindresultaat op een live pagina.
Zie ook: Divi: maskers en achtergrondpatronen gebruiken voor een heldensectie
Zo past het vloeiende ontwerp zich soepel aan de breedte van het browservenster aan.
Download DIVI nu!!!
Conclusie
Het toevoegen van een vloeiend ontwerp aan een Hero-sectie kan een handige manier zijn om ervoor te zorgen dat de bovenkant van de vouw mooi consistent is in alle browserformaten, zonder dat het ontwerp op bepaalde punten moet worden bijgewerkt of dat u mediaquery's hoeft te gebruiken.
Hopelijk voegt deze techniek nog een nuttige ontwerpvaardigheid toe voor toekomstige projecten.
We hopen ook dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
