Divi: Hoe maak je een Hero-sectie aan met de Fullwidth Header-module

Wil je weten hoe je een Hero-sectie maakt met Divi's Fullwidth Header-module?

Het bouwen van een heldensectie is een geweldige manier om de aandacht te vestigen op de inhoud belangrijk voor uw pagina. Dit is een inhoud groot formaat waarmee u uw verhaal kunt vertellen, informatie over uw werk kunt delen of een product of dienst onder de aandacht kunt brengen.

Met Divi's Fullwidth Header-module kun je een titel, ondertitel, twee knoppen, hoofdtekst, logo-afbeelding en header-afbeelding toevoegen. Natuurlijk kunt u ook de achtergrondopties gebruiken om afbeeldingen, verlopen, kleuren, patronen en maskers toe te voegen en te combineren.

U kunt al deze instellingen wijzigen in de module-instellingen in plaats van te moeten schakelen tussen meerdere afbeeldings-, tekst- en knopmodules.

In deze zelfstudie laten we u zien hoe u een aantrekkelijke en opvallende Hero-sectie kunt maken met behulp van Divi's Fullwidth Header-module.

Het is weg!

overzicht

Hier is een voorproefje van wat we gaan ontwerpen.

Wat je nodig hebt om te beginnen

Zorg voordat u begint dat u de nieuwste versie van Divi op uw Site web.

Nu ben je klaar om te beginnen!

Een heldensectie maken met Divi's Fullwidth Header-module

Lees ook: Divi: Hoe u de "Gradient Builder" gebruikt om uw afbeeldingen te verfraaien

Een nieuwe pagina maken met een vooraf gedefinieerde lay-out

Laten we beginnen met een vooraf gedefinieerde lay-out uit de Divi-bibliotheek. Voor dit ontwerp gebruiken we de homepage lay-outpakket dierenarts.

Voeg vanuit het Worpress-dashboard een nieuwe pagina toe aan uw Site web

Geef het een titel en selecteer vervolgens de optie Gebruik Divi Builder.

Voor dit voorbeeld gaan we een voorgedefinieerde lay-out uit de Divi-bibliotheek gebruiken. Dus selecteer Door lay-outs bladeren.

Zoek en selecteer de lay-out honden Fokker.

Selecteer Gebruik deze lay-out om de lay-out aan uw pagina toe te voegen.

We zijn nu klaar om te ontwerpen.

Voeg de Fullwidth Header-module toe

We zullen de hero-sectie opnieuw maken met behulp van de Fullwidth Header-module. Voeg een nieuwe sectie over de volledige breedte toe aan de pagina, onder de bestaande koptekst.

Voeg een Fullwidth Header-module toe aan de sectie.

Verwijder vervolgens het originele kopgedeelte.

Pas de Fullwith Header-module aan

Voeg inhoud toe

Open de module-instellingen en voeg de inhoud naast de module:

• Titel: Dierenarts
• Ondertitel: Divivet. Dien onze beste vrienden
• Knop #1: Alle Diensten
• Knop #2: Maak een afspraak
• Lichaam: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor bij sem. Cras ultricies ligula sed magna dictum porta.

Voeg vervolgens een kopafbeelding toe.

Achtergrondinstellingen voor verloop

Ga naar achtergrondinstellingen. Verwijder de oorspronkelijke achtergrondkleur en voeg vervolgens een achtergrondverloop toe.

• 0%: rgba(255,170,205,0.48)
• 40%: rgba(110,66,255,0.24)
• 87%: rgba (124,239,255,0.71)
• Gradiënttype: Elliptisch
• Gradiëntpositie: Rechts

Selecteer vervolgens het tabblad Achtergrondmasker en voeg een achtergrondmasker toe.

• Maskerachtergrond: Hoekvlek
• Maskerkleur: #FFFFFF
• Transformeren: verticaal

Tekst aanpassen

Overschakelen naar tabblad Design en wijzig de titelinstellingen

• Titel Lettertype: Nunito
• Titel Lettertype Gewicht: Ultra Bold
• Lettertype: TT (hoofdletters)

• Titel tekstkleur: #a9cb6b
• Tekstgrootte: 14px
• Titel Letterafstand: 2px

Ga naar de sectie van Lichaamstaal en pas het lettertype aan.

• Tekstkleur: #000000
• Grootte hoofdtekst:
  • Bureaublad: 18px
  • Telefoon: 14px
• Lichaamslijn Hoogte: 1.8em

Zie ook: Divi: het winkelmandje en de zoekpictogrammen van de module "Fullwidth Menu" aanpassen

Open vervolgens de ondertitelinstellingen en pas het lettertype aan.

• Lettertype ondertitel: Nunito
• Lettergewicht ondertitel: vet
• Tekstkleur: #000000

Wijzig ten slotte de grootte van de tekst

• Ondertitel tekstgrootte:
  • Bureaublad: 56px
  • Verplaatsbaar: 32px
• Hoogte ondertitelregel: 1.2em

Pas knop #1 aan

Vervolgens passen we de knopstijlen aan. Begin met het inschakelen van aangepaste stijlen voor knop één en pas vervolgens de tekstgrootte aan.

• Gebruik aangepaste stijlen voor knop: JA
• Knop één tekstgrootte: 14px

Voeg een achtergrondverloop toe aan de knop. De gradiëntwaarden zijn als volgt:

• 58%: #316EFFF
• 100%: #1D2B60
• Gradiëntrichting: 90 graden

Pas vervolgens de randinstellingen en lettertype-instellingen aan.

• Knop één:
  • Randbreedte: 0px
  • Grensstraal: 80px
  • Letterafstand: 2px
  • Lettertype: Nunito
  • Lettergewicht: Ultra Bold
  • Stijl: TT (met hoofdletters)
• Pictogram knop één weergeven: NEE

Pas vervolgens de marge- en opvulinstellingen voor het bureaubladontwerp aan en voeg een kaderschaduw toe.

• Marge één knop
  • Boven: 200px
  • Onder: 0px
• Knoop één vulling:
  • Boven: 16px
  • Onder: 16px
  • Links: 2em
  • Rechts: 50em
• Box Shadow: Opname bekijken

Gebruik responsieve instellingen om verschillende marge- en opvulwaarden in te stellen op mobiele apparaten.

• Button One Margin-Top-Mobile: 25px
• Button One Padding-Rechts-Mobiel: 10em

Pas knop #2 aan

Klik eerst met de rechtermuisknop op knop #1 en klik op Kopieer knop één stijlen.

Klik vervolgens met de rechtermuisknop op knop twee en plak de stijlen van knop #1.

Nu kunnen we knop twee aanpassen. Verander de tekstkleur.

• Knop twee tekstkleur: # 121F60

Pas het achtergrondverloop voor knop twee aan.

• 30%: rgba(0,229,198,0)
• 100%: #00e5c6

Gebruik responsieve instellingen om het achtergrondverloop voor mobiele apparaten aan te passen.

• 0%: rgba(0,229,198,0)
• 100%: #00e5c6

Pas vervolgens de marge en opvulling voor het bureaubladontwerp aan.

• Knop twee marge:
  • Boven: 0px
  • Onder: 0px
  • Links: 30%
• Knop twee vulling:
  • Boven: 16px
  • Onder: 16px
  • Links: 48em
  • Rechts: 2em

Gebruik responsifq-instellingen om verschillende marge- en opvulwaarden in te stellen voor mobiel ontwerp.

• Knop twee marge-links-mobiel: 5%
• Knop twee vulling:
  • Links-mobiel: 35%
  • Rechts-mobiel: 5%

Aangepaste CSS

Ten slotte is het grootste deel van het ontwerpwerk gedaan. Nu moeten we aangepaste CSS toevoegen om het ontwerp te voltooien. Overschakelen naar tabblad Geavanceerd en open de sectie Aangepaste CSS.

Laten we eerst beginnen met de CSS voor de headerafbeelding. Met deze CSS kan de kopafbeelding boven de knop worden weergegeven.

z-index: 1;
position:relative;

Vervolgens aangepaste CSS voor de titel. We zullen verschillende waarden instellen voor desktop- en mobiele weergaven met behulp van responsieve instellingen.

Voor desktopcomputer:

padding-top:50px;
padding-bottom:30px;

Voor mobiel:

padding-top:5px;
padding-bottom:10px;

Voeg ten slotte de volgende CSS toe aan knop één en knop twee.

white-space: nowrap;

Eindresultaat

Hier is het definitieve ontwerp voor onze header-heldensectie over de volledige breedte.

Lees ook: Divi: Hoe maak je een teamledensectie als carrousel

Download DIVI nu!!!

Conclusie

Met de Fullwidth Header-module kunt u eenvoudig een prachtige Hero-sectie maken om reclame te maken voor uw services en uw te vertellen bezoekers waar heb je het over Site web.

Ingebouwde instellingen maken het gemakkelijk om elk aspect van de header aan te passen, en het staat allemaal op één plek, dus je hoeft niet tussen meerdere modules te schakelen om je Hero-sectie te bouwen.

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, raadpleeg onze gids op 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.

...