Divi: Sådan balancerer du de primære og sekundære knapper i Fullwidth Header-modulet

Kunne du tænke dig at tilpasse Divi's Fullwidth Header-modul ved at balancere de primære og sekundære knapper?

Modulet Divi Fullwidth Header gør det nemt at tilføje smukke Hero-sektioner til din Websted. Modulet kommer med to knapper, titeltekst, underteksttekst, brødtekst, logo og billede, hvilket gør tilpasningsmulighederne uendelige.

I dagens artikel viser vi dig, hvordan du genskaber Hero Sections ved hjælp af Divi Fullwidth Header. Vi starter vores design ved hjælp af 3 præ-lavede layoutpakker og designer vores sektioner med fokus på primær og sekundær knapbalance. 

Vi ønsker, at den primære knap skal skille sig ud, fordi den er vores primære opfordring til handling, mens den holder den sekundære knap synlig og tilgængelig uden at overhale den primære knap.

Principper for primær og sekundær knapdesign

Primære knapper og sekundære knapper hjælper med at guide besøgende din Websted til visse aktier. Primære knapper er normalt den mest almindelige eller ønskede handling, og sekundære knapper er en mindre almindelig handling. Dette hjælper med at guide besøgende hvor de vil hen.

For at gøre dette skal de primære knapper skille sig ud visuelt, og de sekundære knapper bør ikke skille sig ud så meget. Det betyder, at hovedknapperne skal være mere markante og have mere visuel vægt for at tiltrække mere opmærksomhed.

Nu hvor vi forstår, hvordan de primære og sekundære knapper fungerer, lad os komme til selvstudiet!

undersøgelse

Her er et kig på de tre overskrifter i fuld bredde, vi vil designe i dag.

Lad os starte med at oprette en ny side med Divi Builder

Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.

Giv den en titel, der giver mening for dig, og klik Brug Divi Builder

klik derefter på Begynd at bygge (Byg fra skrammer)

Derefter har du et tomt lærred til at begynde at designe i Divi.

Læs også: Divi: Sådan bruger du masker og baggrundsmønstre til en heltesektion

Design af det første eksempel

Nu hvor vores side er sat op, lad os starte med headeren i fuld bredde på en UX-landingsside.

Konfiguration af vores side

Før vi kan begynde at tilpasse, bliver vi nødt til at indlæse den foruddefinerede layoutpakke UX fra Divi biblioteket. Når du aktiverer Visual Builder, vil du se tre muligheder pop op, vælg Gennemse layouts.

Indlæs layoutpakke

Sådan indlæses UX-layoutpakken på din side:

1. I fanen "Førlavede layouts", brug søgefunktionen til at finde UX-layoutpakken.
2. Når du har fundet det, skal du klikke på det. Dette vil vise layoutdetaljer og tilgængelige sider.
3. Klik Landingog klik "Brug dette layout".

Vi vil genskabe den øverste del af layoutet som et modul Overskrift til fuldbredde.

Slet den første sektion

Da vi i stedet skal genskabe den første sektion ved hjælp af Fullwidth Header-modulet, bliver vi nødt til at slette denne sektion. Hold markøren over sektionen, og klik på skraldespandsikonet.

Tilføj et afsnit i fuld bredde

Før vi kan tilføje overskriften i fuld bredde, skal vi tilføje en sektion i fuld bredde.

Klik på pilen "+" for at få vist Divi-sektionerne, klik derefter på "Fuld bredde". Dette vil automatisk åbne Divi Fullwidth Module-biblioteket.

Tilføj en overskrift i fuld bredde

I Divi Fullwidth-modulbiblioteket skal du klikke på " Overskrift til fuldbredde".

Tilføj indhold

Inden vi begynder at tilpasse modulet, lad os tilføje det indhold påkrævet til dette modul.

Tilføj tekstindhold

Under fanen Tekst skal du tilføje indhold suivant:

1. Titel: Forbedre din UX-designviden
2. Undertitel: UX-designkursus
3. Knap #1: Kursusoversigt
4. Knap #2: Lær mere
5. Brødtekst: standard

Tilføj billeder

Nu hvor vi har vores indhold tekst på plads, skal vi tilføje to billeder til vores design.

1. I fanen Billeder, tilføj logobilledet (stjernerne) og sidehovedbilledet (billedet af personen, der holder en telefon).

Skift baggrundsfarve

I fanen Baggrund, konfigurer denne parameter:

1. Baggrundsfarve: #131517

Tilpas header i fuld bredde

Nu hvor vores indhold er sat op, lad os tilføje noget styling til det via Design.

Rul ned ikon

Lad os tilføje rulle ned-ikonet, pil ned.

1. Vis rulle ned-knap: JA.
2. Vælg pil ned-ikonet.
3. Rul ned ikon Farve: #000

Billede

Lad os tilføje kurver til vores billeder ved at runde hjørnerne.

I fanen Billede, konfigurer følgende indstillinger:

1. Billede afrundede hjørner : Klik på kædelink-knappen for at fjerne linket mellem hjørnerne, og skriv derefter 1000px i inputboksene nederst til venstre og nederst til højre. Dette vil runde det nederste venstre og nederste højre hjørne af vores billeder.

Titeltekst

Lad os her tilpasse titelteksten til dette modul. I fanen Titeltekst, konfigurer disse indstillinger:

• Titel:
  • Skrifttype: PT Sans
  • Skrifttypevægt: Fed
  • Tekststørrelse: 5 rem
  • Linjehøjde: 1,2 em

Tekstens krop

Det er her, vi tilpasser brødteksten til dette modul. I fanen BodyText, konfigurer disse indstillinger:

1. Kropsskrift: Mukta
2. Brødtekst Størrelse: 18px

Undertekst tekst

Det er her, vi tilpasser billedteksten til dette modul. I fanen Undertekst tekst, konfigurer disse indstillinger:

• Undertekst:
  • Skrifttype: Mukta
  • Skrifttypevægt: Fed
  • Stil: store bogstaver
  • Tekstfarve: #13d678
  • Bogstavafstand: 3px

knap en

Det er her, vi kan definere brugerdefinerede stilarter for knap et: hovedknappen. I fanen Knap en, konfigurer disse indstillinger:

• Brug brugerdefineret stil til knap XNUMX: JA
• Knap et:
  • Tekstfarve: #ffffff
  • Baggrundsfarve: #13d678
  • Kantbredde: 0 pixels
  • Kantradius: 100px
  • Skrifttype: Mukta
  • Skrifttypevægt: Fed
• Vis knap XNUMX-ikon: JA
• Ikon: Højre pil
• Vis kun ikon ved svæv for knap XNUMX: Nej

Knap to

Lad os nu tilpasse den anden: den sekundære knap. I fanen Knap to, konfigurer disse indstillinger:

• Brug brugerdefineret stil til knap: JA
  • Knap to
  • Tekstfarve: #ffffff
  • Baggrundsfarve: #303030
  • Kantbredde: 0 pixels
  • Kantradius: 100 pixels
  • Skrifttype: Mukta
  • Skrifttypevægt: Fed
• Vis knap to-ikon: Ja
• Knap to ikon: Højre pil
• Vis kun ikon ved svæveknap XNUMX: JA

Tilføj knaplinks

Glem ikke at tilføje links til dine knapper! I fanen Link, konfigurer følgende indstillinger:

1. Knap #1 Link URL: Indsæt URL'en for knap 1 her.
2. Knap #1 Link URL: Indsæt URL'en for knap 2 her.

Gem dit arbejde

Nu hvor vi har vores fuldt designede header i fuld bredde, skal du sørge for at gemme dit design!

• Klik på den grønne pil nederst til højre i modulvinduet.
• Gem
• Afslut VisualBuilder.

Læs også: Divi: Sådan opretter du en Fluid Hero-sektion

God fornøjelse med at eksperimentere

Måderne at tilpasse Divi Fullwidth Header-modulet er uendelige. At drage fordel af den primære knap og den sekundære knap kan hjælpe med at styre din besøgende til den side, du vil have dem til at se eller foretage den handling (som at indsende en anmodning), du vil have dem til at foretage.

Lad os tage et kig på yderligere to eksempler på overskrifter i fuld bredde, der har en primær knap, der skiller sig ud.

Overskrift i fuld bredde fra "Retirement Center"-pakken

Knapstile

Lad os tage et kig på de unikke primære og sekundære knapstilarter.

knap en

På fanen Button One skal du konfigurere følgende indstillinger:

• Brug brugerdefinerede stilarter til knap XNUMX: JA
• Knap et:
  • Tekststørrelse: 14px
  • Tekstfarve: #ffffff
  • Baggrundsfarve: #0a0a0a
  • Kantbredde: 0 pixels
  • Kantradius: 10px
  • Bogstavafstand: 3px
  • Skrifttypevægt: Fed
  • Skrifttype: TT
• Vis kun ikon ved svæv for Buttpn One: JA
• Button One polstring: 15px (top og bund), 25px (venstre og højre)

Knap to

I fanen Knap to, konfigurer følgende indstillinger:

• Brug brugerdefineret stil til knap: JA
  • Knap to:
  • Tekststørrelse: 14px
  • Tekstfarve: #ffffff
  • Baggrundsfarve: #0a0a0a
  • Kantbredde: 0 pixels
  • Kantradius: 10px
  • Skrifttypevægt: Fed
  • Skrifttype: TT
• Knap to polstring: 10px (nederst), 10px (venstre og højre)

Og der går du! To unikke knapper, en der skiller sig ud og en der tager det andet sæde.

Overskrift i fuld bredde af pakken "Finansiel planlægning".

Knapstile

Lad os tage et kig på de unikke primære og sekundære knapstilarter.

knap en

I fanen Knap en, konfigurer følgende indstillinger:

• Brug brugerdefineret stil til knap XNUMX: JA
• Knap et:
  • Tekststørrelse: 18px
  • Tekstfarve: #ffffff
  • Baggrundsfarve: #1b4ffe
  • Polstring: 15px()Top og Bund); 25px (venstre og højre)

Knap to

I fanen Knap to, konfigurer følgende indstillinger:

• Brug brugerdefineret stil til knap to: JA
• Knap to:
  • Tekstfarve: #1b4ffe
  • Baggrundsfarve: Klar
  • Ikonfarve: #1b4ffe

Download DIVI nu!!!

Konklusion

Divi's Fullwidth Header-modul gør det nemt at skabe fantastiske Hero-sektioner på din Websted. 

Strategisk brug af primære og sekundære knapper vil forbedre din brugeroplevelse og hjælpe besøgende på webstedet med at udføre de handlinger, de ønsker at foretage. 

Tilpasningsmulighederne er uendelige med headeren i fuld bredde, så hav det sjovt med at eksperimentere!

Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.

Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.

Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...