Wilt u de Fullwidth Header-module van Divi aanpassen door de primaire en secundaire knoppen in evenwicht te brengen?
De module Divi Fullwidth Header maakt het gemakkelijk om prachtige Hero-secties aan je toe te voegen Site web. De module wordt geleverd met twee knoppen, titeltekst, ondertiteltekst, hoofdtekst, logo en afbeelding, waardoor de aanpassingsmogelijkheden eindeloos zijn.
In het artikel van vandaag laten we je zien hoe je Hero-secties opnieuw kunt maken met de Divi Fullwidth-koptekst. We beginnen ons ontwerp met behulp van 3 vooraf gemaakte lay-outpakketten en ontwerpen onze secties met een focus op primaire en secundaire knopbalans.
We willen dat de primaire knop opvalt omdat het onze primaire oproep tot actie is, terwijl de secundaire knop zichtbaar en toegankelijk blijft zonder de primaire knop in te halen.
Principes van het ontwerp van de primaire en secundaire knop
Primaire knoppen en secundaire knoppen helpen bij het begeleiden bezoekers uw Site web aan bepaalde aandelen. Primaire knoppen zijn meestal de meest voorkomende of gewenste actie en secundaire knoppen zijn een minder gebruikelijke actie. Dit helpt bij het begeleiden van de bezoekers naar waar ze heen willen.
Om dit te doen, moeten de primaire knoppen visueel opvallen en de secundaire knoppen niet zo veel. Dit betekent dat de hoofdknoppen meer onderscheidend moeten zijn en meer visueel gewicht moeten hebben om meer aandacht te trekken.
Nu we begrijpen hoe de primaire en secundaire knoppen werken, gaan we naar de zelfstudie!
overzicht
Hier is een blik op de drie headers over de volledige breedte die we vandaag gaan ontwerpen.
Laten we beginnen met het maken van een nieuwe pagina met Divi Builder
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 Gebruik Divi Builder
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Lees ook: Divi: maskers en achtergrondpatronen gebruiken voor een heldensectie
Ontwerp van het eerste voorbeeld
Nu onze pagina is ingesteld, laten we beginnen met de koptekst over de volledige breedte van een UX-bestemmingspagina.
Onze pagina configureren
Voordat we kunnen beginnen met aanpassen, moeten we het vooraf gedefinieerde lay-outpakket laden UX uit de Divi-bibliotheek. Wanneer u de Visual Builder activeert, ziet u drie opties verschijnen, selecteer Door lay-outs bladeren.
Lay-outpakket laden
Om het UX-layoutpakket op uw pagina te laden:
- In het tabblad "Vooraf gemaakte lay-outs", gebruik de zoekfunctie om het UX-layoutpakket te vinden.
- Zodra u het hebt gevonden, klikt u erop. Hierdoor worden lay-outdetails en beschikbare pagina's weergegeven.
- Klik op Landing, en klik vervolgens op "Gebruik deze lay-out".
We zullen het bovenste gedeelte van de lay-out opnieuw maken als een module Header over de volledige breedte.
Verwijder de eerste sectie
Aangezien we in plaats daarvan de eerste sectie opnieuw gaan maken met behulp van de Fullwidth Header-module, moeten we deze sectie verwijderen. Plaats de muisaanwijzer op het gedeelte en klik op het prullenbakpictogram.
Voeg een sectie met volledige breedte toe
Voordat we de header op de volledige breedte kunnen toevoegen, moeten we een sectie op de volledige breedte toevoegen.
Klik op de pijl "+" om de Divi-secties weer te geven, klik vervolgens op "Volledige breedte". Hierdoor wordt automatisch de Divi Fullwidth Module-bibliotheek weergegeven.
Een koptekst over de volledige breedte toevoegen
Klik in de Divi Fullwidth-modulebibliotheek op " Header over de volledige breedte".
Voeg inhoud toe
Voordat we beginnen met het aanpassen van de module, gaan we deze toevoegen inhoud vereist voor deze module.
Tekstuele inhoud toevoegen
Voeg op het tabblad Tekst de inhoud suivant:
- Titel: Verbeter uw UX Design-kennis
- Ondertitel: cursus UX Design
- Knop #1: Cursusoverzicht
- Knop #2: Meer informatie
- Hoofdtekst: standaard
Voeg afbeeldingen toe
Nu we onze inhoud tekst op zijn plaats, moeten we twee afbeeldingen aan ons ontwerp toevoegen.
- In het tabblad Afbeeldingen, voeg de logoafbeelding (de sterren) en de koptekstafbeelding (de foto van de persoon die een telefoon vasthoudt) toe.
Achtergrondkleur wijzigen
In het tabblad Achtergrond, configureer deze parameter:
- Achtergrondkleur: #131517
Koptekst over volledige breedte aanpassen
Nu onze inhoud is ingesteld, laten we er wat styling aan toevoegen via de Design.
Scroll naar beneden icoon
Laten we het scroll-down-pictogram toevoegen, de pijl-omlaag.
- Toon Scroll Down-knop: JA.
- Selecteer het pictogram met de pijl omlaag.
- Scroll naar beneden Pictogramkleur: #000
Beeld
Laten we rondingen aan onze afbeeldingen toevoegen door de hoeken af te ronden.
In het tabblad Beeld, configureer de volgende instellingen:
- Afbeelding afgeronde hoeken : klik op de kettingschakelknop om de hoeken te ontkoppelen en typ vervolgens 1000px in de invoervakken linksonder en rechtsonder. Dit rondt de linker- en rechterbenedenhoek van onze afbeeldingen af.
Titel tekst
Laten we hier de titeltekst van deze module aanpassen. Op het tabblad Titel Tekst, configureer deze instellingen:
- Titel:
- Lettertype: PT Sans
- Lettergewicht: Vet
- Tekstgrootte: 5 rem
- Lijnhoogte: 1,2 em
Het lichaam van de tekst
Hier passen we de hoofdtekst voor deze module aan. Op het tabblad Lichaamstaal, configureer deze instellingen:
- Lichaamslettertype: Mukta
- Grootte hoofdtekst: 18px
Ondertitel tekst
Hier passen we de bijschrifttekst voor deze module aan. Op het tabblad Ondertitel tekst, configureer deze instellingen:
- Ondertitel:
- Lettertype: Mukta
- Lettergewicht: Vet
- Stijl: hoofdletters
- Tekstkleur: #13d678
- Letterafstand: 3px
knop één
Hier kunnen we aangepaste stijlen definiëren voor knop één: de hoofdknop. Op het tabblad Knop Een, configureer deze instellingen:
- Gebruik aangepaste stijl voor knop één: JA
- Knop één:
- Tekstkleur: #ffffff
- Achtergrondkleur: #13d678
- Randbreedte: 0 pixels
- Grensstraal: 100px
- Lettertype: Mukta
- Lettergewicht: Vet
- Knop één pictogram weergeven: JA
- Pictogram: Pijl naar rechts
- Alleen pictogram weergeven bij zweven voor knop één: Nee
Knop twee
Laten we nu de tweede aanpassen: de secundaire knop. Op het tabblad Knop Twee, configureer deze instellingen:
- Gebruik aangepaste stijl voor knop: JA
- Knop Twee
- Tekstkleur: #ffffff
- Achtergrondkleur: #303030
- Randbreedte: 0 pixels
- Randstraal: 100 pixels
- Lettertype: Mukta
- Lettergewicht: Vet
- Pictogram knop twee weergeven: Ja
- Knop twee pictogram: Pijl naar rechts
- Alleen pictogram weergeven bij zweven Knop twee: JA
Knoplinks toevoegen
Vergeet niet om links aan uw knoppen toe te voegen! Op het tabblad Link, configureer de volgende instellingen:
- Knop #1 Link-URL: Plak hier de URL van knop 1.
- Knop #1 Link-URL: Plak hier de URL van knop 2.
Bewaar je werk
Nu we onze volledig ontworpen header over de volledige breedte hebben, moet u uw ontwerp opslaan!
- Klik op de groene pijl rechtsonder in het modulevenster.
- Bespaar
- Sluit VisualBuilder af.
Veel plezier met experimenteren
De manieren om de Divi Fullwidth Header-module aan te passen zijn eindeloos. Door gebruik te maken van de primaire en secundaire knop kunt u uw richting bepalen bezoekers naar de pagina die u wilt dat ze bekijken of om de actie te ondernemen (zoals het indienen van een verzoek) die u wilt dat ze ondernemen.
Laten we eens kijken naar nog twee voorbeelden van headers op volledige breedte met een primaire knop die opvalt.
Koptekst over de volledige breedte uit het pakket "Retirement Center"
Knopstijlen
Laten we eens kijken naar de unieke primaire en secundaire knopstijlen.
knop één
Configureer op het tabblad Button One de volgende instellingen:
- Gebruik aangepaste stijlen voor knop één: JA
- Knop één:
- Tekstgrootte: 14px
- Tekstkleur: #ffffff
- Achtergrondkleur: #0a0a0a
- Randbreedte: 0 pixels
- Grensstraal: 10px
- Letterafstand: 3px
- Lettergewicht: Vet
- Lettertype: TT
- Alleen pictogram weergeven bij zweven voor Buttpn One: JA
- Button One Padding: 15px (boven en onder), 25px (links en rechts)
Knop twee
In het tabblad Knop Twee, configureer de volgende instellingen:
- Gebruik aangepaste stijl voor knop: JA
- Knop twee:
- Tekstgrootte: 14px
- Tekstkleur: #ffffff
- Achtergrondkleur: #0a0a0a
- Randbreedte: 0 pixels
- Grensstraal: 10px
- Lettergewicht: Vet
- Lettertype: TT
- Knop twee vulling: 10px (onder), 10px (links en rechts)
En daar ga je! Twee unieke knoppen, een die opvalt en een die de tweede plaats inneemt.
Koptekst over de volledige breedte van het pakket "Financiële planning"
Knopstijlen
Laten we eens kijken naar de unieke primaire en secundaire knopstijlen.
knop één
In het tabblad Knop een, configureer de volgende instellingen:
- Gebruik aangepaste stijl voor knop één: JA
- Knop één:
- Tekstgrootte: 18px
- Tekstkleur: #ffffff
- Achtergrondkleur: #1b4ffe
- Opvulling: 15px () Boven- en onderkant); 25px (links en rechts)
Knop twee
In het tabblad Knop Twee, configureer de volgende instellingen:
- Gebruik aangepaste stijl voor knop twee: JA
- Knop twee:
- Tekstkleur: #1b4ffe
- Achtergrondkleur: helder
- Pictogramkleur: #1b4ffe
Download DIVI nu!!!
Conclusie
Met de Fullwidth Header-module van Divi kunt u eenvoudig verbluffende Hero-secties op uw computer maken Site web.
Strategisch gebruik van primaire en secundaire knoppen zal uw gebruikerservaring verbeteren en websitebezoekers helpen de acties te ondernemen die ze willen ondernemen.
De aanpassingsmogelijkheden zijn eindeloos met de koptekst over de volledige breedte, dus veel plezier met experimenteren!
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.
...
