Wil je een Hero Divi-sectie maken met de Fullwidth Header-module of er zelf een ontwerpen?
Bouw een heldengedeelte van Site web vanaf nul of met behulp van de Divi Fullwidth Header-module zijn de twee manieren om een opvallend ontwerp voor uw te maken website.
In dit artikel bekijken we de voor- en nadelen van het gebruik van een Fullwidth Header-module versus het maken van je eigen Hero-sectie met Divi.
Laten we gaan!
Het belang van secties voor websitehelden
Een Hero-sectie is de allereerste sectie die je bezoekers kijk wanneer ze bij u aankomen Site web. Dit is vaak een banner over de volledige breedte en wordt ook wel een Hero Header genoemd. Het is een prominente plek op uw website omdat het de kracht heeft om een blijvende eerste indruk achter te laten.
Lees ook: Divi: de Fullwidth Header-module op volledig scherm weergeven
Het is daarom belangrijk dat het zo is ontworpen dat het gemakkelijk te lezen is en toch opvallend en meeslepend is. Website Hero-secties zijn belangrijk omdat ze de aandacht van potentiële klanten kunnen trekken, een pagina snel kunnen beschrijven en tot extra betrokkenheid en potentiële leads kunnen leiden. Hero-secties moeten een merknaam hebben, een H1-titel en CTA bevatten.
Maak een Hero-sectie helemaal opnieuw
Door een Hero-sectie helemaal opnieuw te ontwerpen, heb je volledige controle over het ontwerp en de inhoud ervan inhoud. Afhankelijk van uw situatie en wensen kan dit een mooie oplossing zijn voor uw website.
Laten we eens kijken naar de voor- en nadelen van deze aanpak.
Voordelen van deze aanpak
Laten we eerst eens kijken naar de voordelen van het helemaal opnieuw bouwen van een website Hero-sectie met Divi.
- Volledige ontwerpcontrole
- Gebruik een willekeurige Divi-module
Nadelen van deze aanpak
Laten we nu eens kijken naar de nadelen van het helemaal opnieuw maken van een heldensectie.
- Je moet helemaal opnieuw bouwen
- Vereist meerdere mods
Maak een Hero-sectie met de Divi Fullwidth Header-module
Door een hero-sectie te maken met behulp van de Divi Fullwidth Header-module, is het gemakkelijk om in slechts enkele minuten een opvallend, mobiel responsief ontwerp te maken.
Laten we eens kijken naar de voor- en nadelen van deze aanpak.
Voordelen van deze aanpak
Laten we eens kijken naar de voordelen van het bouwen van een Hero-sectie met de Divi Fullwidth Header-module.
- Al jouw inhoud bevindt zich in één module
- Ontwerp al geoptimaliseerd
Nadelen van deze aanpak
Laten we nu eens kijken naar de nadelen van het ontwerpen van een Hero-sectie met de Divi Fullwidth Header-module.
- Minder flexibiliteit met ontwerp
De Divi Fullwidth Header-module wordt geleverd met opties voor inhoud vooraf gedefinieerd, terwijl veel ervan beperkt kunnen zijn als u inhoud wilt toevoegen die niet beschikbaar is in de module. Dit betekent dat u minder flexibiliteit heeft met het algehele ontwerp.
Bouw van de twee Hero-secties stap voor stap
Nu je de voor- en nadelen van beide benaderingen begrijpt, gaan we elke Hero-sectie uitwerken, zodat je precies kunt zien hoe elke benadering werkt.
Maak een nieuwe pagina met Divi Builder
Om te beginnen, moet u het volgende doen:
- Divi . installeren op uw WordPress-website.
- Voeg een pagina toe en geef deze een titel.
- Visuele bouwer inschakelen
Maak je Hero-sectie helemaal opnieuw
Nu onze pagina is ingesteld, gaan we helemaal opnieuw beginnen met het maken van een heldensectie.
Download DIVI nu!!!
Activeer "Divi Builder"
Om Divi's drag-and-drop-builder te gebruiken, moeten we de Visual Builder activeren door op de knop te klikken "Gebruik DiviBuilder". Hierdoor wordt de pagina opnieuw geladen met behulp van de Divi Visual Builder.
Selecteer: vanaf nul bouwen
Nu uw pagina opnieuw is geladen met de visuele bouwer ingeschakeld, klikt u op de opties " BOUW VAN KRAS zodat we een blanco pagina hebben om mee te werken bij het ontwerpen.
Rij toevoegen en kolommen configureren
Maak een rij met de volgende kolomstructuur.
Voeg modificaties toe
Laten we nu de inhoudsmodules toevoegen die we nodig hebben.
- 2 Tekstmodules, scheidingslijn, een knop in de linkerkolom
- 1 Afbeeldingsmodule in de middelste kolom
- 1 Afbeeldingsmodule in de rechterkolom
Stijl sectie
Laten we nu de sectie-instellingen configureren.
Voeg een sectie toe en configureer vervolgens de volgende instellingen:
- Achtergrond: #1d1d25
Koptekststijl
Koptekst aanpassen:
- Rubriek 1:
- Lettergewicht: Semi Vet
- Tekstkleur: #ffffff
- Tekstgrootte: 90px
- Lijnhoogte: 1,1 em
separator
Configureer de instellingen van de verdeler:
- Lijnkleur: rgba (255,255,255,0.3)
- scheidingsgewicht: 10px
- Maximale breedte: 260px
Tekstgedeelte
Bodytekst aanpassen:
- Tekstkleur: rgba (255,255,255,0.7)
- Tekstgrootte: 13px
- Lijnhoogte: 1,8 em
knoop
Laten we nu de knop aanpassen.
Op het tabblad Knop:
- Gebruik aangepaste stijlen voor knop: Ja
- Tekstgrootte knop: 14px
- Tekstkleur: #ffffff
- Knop achtergrond:
- Randbreedte: 0 pixels
- Randstraal: 0 pixels
Op het tabblad Afstand:
- Boven en onder: 40px
- Links en rechts: 20px
Voeg afbeeldingen toe
Voeg de afbeeldingen toe aan de afbeeldingsmodules.
Lijninstellingen aanpassen
In lijnparameters:
- Marge (Links): 15vw
Pas 2e kolom aan
Configureer deze instellingen in de tweede kolom:
Aangepaste CSS
Plak de volgende code in de codesectie van het hoofdelement:
argin-right: -15vw!important;
z-index: 100!important;tussenruimte
Voeg 100 pixels van de bovenste opvulling toe.
Alstublieft ! Je hebt nu een volledig ontworpen aangepaste Hero-sectie.
Download DIVI nu!!!
Creëer je Hero-sectie met Divi's Fullwidth Header-module
Laten we nu eens kijken hoe we deze Hero-sectie opnieuw kunnen maken met behulp van Divi's Fullwidth Header-module.
Download DIVI nu!!!
Voeg een pagina toe en selecteer Vanaf nul opbouwen
Voeg een nieuwe pagina toe, geef deze een titel en klik vervolgens op "Gebruik Divi Builder" en selecteer vervolgens Build From Scratch.
Voeg een sectie over de volledige breedte en een koptekst over de volledige breedte in
Sectie invoegen Volle breedteen selecteer vervolgens Header over de volledige breedte in de modulebibliotheek.
Inhoud
Voeg de tekstuele inhoud toe aan de module op het tabblad Tekst.
Afbeeldingen
Voeg de afbeeldingen toe op het tabblad afbeelding.
Achtergrondkleur wijzigen
Configureer op het tabblad Achtergrond de volgende instelling:
- Achtergrond: #1D1D25
Koptekst
Instellingen voor koptekst configureren:
- Titel Lettergewicht: Vet
- Tekstgrootte: 90px
Tekstgedeelte
Instellingen voor hoofdtekst configureren:
- Kleur hoofdtekst: rgba (255,255,255,0.55)
Ondertitel tekst
Configureer de instellingen voor de bijschrifttekst:
- Lettergewicht ondertitel: vet
- Tekstkleur: #4C594C
- Letterafstand: 3px
knoppen
Laten we nu de twee knoppen aanpassen.
knop één
Configureer op het tabblad Button One de volgende instellingen:
- Gebruik aangepaste stijlen voor knop één: Ja
- Knop een
- Achtergrond: #4c594c
- Randbreedte: 0 pixels
- Grensstraal: 0px
- Pictogram weergeven: JA
- Alleen pictogram weergeven bij zweven: Nee
- Opvulling: 25 pixels (boven en onder); 25px (links), 50px (rechts)
Knop twee
Configureer op het tabblad Knop twee de volgende instellingen:
- Gebruik aangepaste stijlen voor knop twee: JA
- Breedte knop twee randen: 0 pixels
- Grensstraal: 0px
- Opvulling: 25px (boven, onder, links en rechts)
- Button Box Shadow: Kies de 4e
- Doosschaduw Horizontale positie: 0px
- Box Shadow Verticale Positie: 2px
- Schaduwkleur: #ffffff
Alstublieft ! Je hebt nu een volledig ontworpen Hero-sectie met behulp van de Divi Fullwidth Header-module.
Zie ook: Divi: Hoe maak je achtergrondovergangen tussen elementen
Download DIVI nu!!!
Conclusie
Het bouwen van een Hero-sectie met Divi is eenvoudig, of je nu helemaal opnieuw bouwt of de Fullwidth Header-module gebruikt. Met beide opties kun je verbluffende koptekstontwerpen maken die de interesse van je wekken bezoekers.
Afhankelijk van je unieke behoeften, zijn beide opties een goede optie om te overwegen bij het stylen van je Hero-sectie.
Na het lezen van de voor- en nadelen van beide, hoe zou je je Hero-sectie ontwerpen?
We hopen 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.
...
