Divi: Hur man balanserar de primära och sekundära knapparna i Fullwidth Header-modulen

Vill du anpassa Divis Fullwidth Header-modul genom att balansera de primära och sekundära knapparna?

Modulen Divi Fullwidth Header gör det enkelt att lägga till vackra Hero-sektioner till din webbplats. Modulen kommer med två knappar, titeltext, undertext, brödtext, logotyp och bild som gör anpassningsmöjligheterna oändliga.

I dagens artikel kommer vi att visa dig hur du återskapar Hero Sections med hjälp av Divi Fullwidth Header. Vi börjar vår design med 3 förgjorda layoutpaket och designar våra sektioner med fokus på primär och sekundär knappbalans. 

Vi vill att den primära knappen ska sticka ut eftersom det är vår primära uppmaning samtidigt som den sekundära knappen är synlig och tillgänglig utan att gå om den primära knappen.

Principer för primär och sekundär knappdesign

Primära knappar och sekundära knappar hjälper till att vägleda besökare din webbplats till vissa aktier. Primära knappar är vanligtvis den vanligaste eller önskade åtgärden och sekundära knappar är en mindre vanlig åtgärd. Detta hjälper till att vägleda besökare dit de vill gå.

För att göra detta bör de primära knapparna sticka ut visuellt och de sekundära knapparna ska inte sticka ut lika mycket. Det betyder att huvudknapparna bör vara mer distinkta och ha mer visuell tyngd för att få mer uppmärksamhet.

Nu när vi förstår hur de primära och sekundära knapparna fungerar, låt oss gå till handledningen!

undersökningen

Här är en titt på de tre fullbreddshuvuden som vi kommer att designa idag.

Låt oss börja med att skapa en ny sida med Divi Builder

Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.

Ge den en titel som är vettig för dig och klicka Använd Divi Builder

klicka sedan på Börja bygga (Bygg från grunden)

Efter det har du en tom duk för att börja designa i Divi.

Läs också: Divi: Hur man använder masker och bakgrundsmönster för en hjältesektion

Design av det första exemplet

Nu när vår sida är konfigurerad, låt oss börja med rubriken i full bredd på en UX-målsida.

Konfigurera vår sida

Innan vi kan börja anpassa måste vi ladda det fördefinierade layoutpaketet UX från Divi-biblioteket. När du aktiverar Visual Builder kommer du att se tre alternativ som dyker upp, välj Bläddra i layouter.

Ladda Layout Pack

Så här laddar du UX-layoutpaketet på din sida:

1. På fliken "Förgjorda layouter", använd sökfunktionen för att hitta UX-layoutpaketet.
2. När du har hittat den klickar du på den. Detta kommer att visa layoutdetaljer och tillgängliga sidor.
3. Klicka på Landningoch klicka "Använd den här layouten".

Vi kommer att återskapa den övre delen av layouten som en modul Rubrik för fullbredd.

Ta bort det första avsnittet

Eftersom vi ska återskapa den första sektionen med Fullwidth Header-modulen istället, måste vi ta bort den här sektionen. Håll muspekaren över avsnittet och klicka på papperskorgen.

Lägg till ett avsnitt i full bredd

Innan vi kan lägga till fullbreddshuvudet måste vi lägga till en fullbreddssektion.

Klicka på pilen "+" för att visa Divi-sektionerna klicka sedan på "Full bredd". Detta kommer automatiskt att visa Divi Fullwidth Module-biblioteket.

Lägg till en rubrik i full bredd

I Divi Fullwidth-modulbiblioteket klickar du på " Rubrik för fullbredd".

Lägg till innehåll

Innan vi börjar anpassa modulen, låt oss lägga till den innehåll krävs för denna modul.

Lägg till textinnehåll

Under fliken Text lägger du till innehåll suivant:

1. Titel: Förbättra din UX-designkunskap
2. Undertitel: UX Design Course
3. Knapp #1: Kursöversikt
4. Knapp #2: Lär dig mer
5. Kropp: standard

Lägg bilder

Nu när vi har vår innehåll text på plats måste vi lägga till två bilder till vår design.

1. På fliken Bilder, lägg till logotypbilden (stjärnorna) och rubrikbilden (fotot på personen som håller en telefon).

Ändra bakgrundsfärg

På fliken Bakgrund, konfigurera denna parameter:

1. Bakgrundsfärg: #131517

Anpassa fullbreddshuvud

Nu när vårt innehåll är konfigurerat, låt oss lägga till lite styling till det via Designa.

Rulla ned ikonen

Låt oss lägga till ikonen för rullning nedåt, nedåtpilen.

1. Visa Scroll Down-knapp: YES.
2. Välj nedåtpilen.
3. Scroll down Ikon Färg: #000

Bild

Låt oss lägga till kurvor till våra bilder genom att runda hörnen.

På fliken Bild, konfigurera följande inställningar:

1. Bild Rundade hörn : Klicka på kedjelänksknappen för att koppla bort hörnen och skriv sedan 1000px i inmatningsrutorna längst ner till vänster och längst ner till höger. Detta kommer att runda de nedre vänstra och nedre högra hörnen av våra bilder.

Titeltext

Låt oss här anpassa rubriktexten för denna modul. I fliken Titeltext, konfigurera dessa inställningar:

• Titel:
  • Typsnitt: PT Sans
  • Teckensnittsvikt: Fet
  • Textstorlek: 5 rem
  • Linjehöjd: 1,2 em

Textens kropp

Det är här vi anpassar brödtexten för denna modul. I fliken Kropp text, konfigurera dessa inställningar:

1. Kroppstypsnitt: Mukta
2. Brödtextstorlek: 18px

Undertext

Det är här vi anpassar bildtexten för denna modul. I fliken Undertext, konfigurera dessa inställningar:

• Texta:
  • Typsnitt: Mukta
  • Teckensnittsvikt: Fet
  • Stil: versaler
  • Textfärg: #13d678
  • Bokstavsavstånd: 3px

knapp ett

Det är här vi kan definiera anpassade stilar för knapp ett: huvudknappen. I fliken Knapp ett, konfigurera dessa inställningar:

• Använd anpassad stil för knapp ett: JA
• Knapp ett:
  • Textfärg: #ffffff
  • Bakgrundsfärg: #13d678
  • Kantbredd: 0 pixlar
  • Kantradie: 100px
  • Typsnitt: Mukta
  • Teckensnittsvikt: Fet
• Visa knapp ett-ikon: JA
• Ikon: Högerpil
• Visa endast ikon vid svävning för knapp ett: Nej

Knapp två

Låt oss nu anpassa den andra: den sekundära knappen. I fliken Knapp två, konfigurera dessa inställningar:

• Använd anpassad stil för knapp: JA
  • Knapp två
  • Textfärg: #ffffff
  • Bakgrundsfärg: #303030
  • Kantbredd: 0 pixlar
  • Kantradie: 100 pixlar
  • Typsnitt: Mukta
  • Teckensnittsvikt: Fet
• Visa knapp två-ikon: Ja
• Knapp två ikon: högerpil
• Visa endast ikon på svävknapp två: JA

Lägg till knapplänkar

Glöm inte att lägga till länkar till dina knappar! I fliken Länk, konfigurera följande inställningar:

1. Knapp #1 Länkadress: Klistra in URL:en för knapp 1 här.
2. Knapp #1 Länkadress: Klistra in URL:en för knapp 2 här.

Spara ditt arbete

Nu när vi har vår fullt utformade header i full bredd, se till att spara din design!

• Klicka på den gröna pilen längst ner till höger i modulfönstret.
• Save
• Avsluta VisualBuilder.

Läs också: Divi: Hur man skapar en Fluid Hero-sektion

Ha kul med att experimentera

Sätten att anpassa Divi Fullwidth Header-modulen är oändliga. Att dra fördel av den primära knappen och den sekundära knappen kan hjälpa dig att styra besökare till sidan du vill att de ska se eller vidta den åtgärd (som att skicka en begäran) du vill att de ska vidta.

Låt oss ta en titt på ytterligare två exempel på rubriker i full bredd som har en primär knapp som sticker ut.

Helbreddshuvud från paketet "Retirement Center".

Knappstilar

Låt oss ta en titt på de unika primära och sekundära knappstilarna.

knapp ett

På fliken Button One konfigurerar du följande inställningar:

• Använd anpassade stilar för knapp ett: JA
• Knapp ett:
  • Textstorlek: 14px
  • Textfärg: #ffffff
  • Bakgrundsfärg: #0a0a0a
  • Kantbredd: 0 pixlar
  • Kantradie: 10px
  • Bokstavsavstånd: 3px
  • Teckensnittsvikt: Fet
  • Typsnittsstil: TT
• Visa endast ikon vid svävning för Buttpn One: JA
• Button One-utfyllnad: 15px (topp och botten), 25px (vänster och höger)

Knapp två

På fliken Knapp två, konfigurera följande inställningar:

• Använd anpassad stil för knapp: JA
  • Knapp två:
  • Textstorlek: 14px
  • Textfärg: #ffffff
  • Bakgrundsfärg: #0a0a0a
  • Kantbredd: 0 pixlar
  • Kantradie: 10px
  • Teckensnittsvikt: Fet
  • Typsnittsstil: TT
• Knapp två stoppning: 10px (botten), 10px (vänster och höger)

Och där går du! Två unika knappar, en som sticker ut och en som tar den andra stolen.

Helbreddshuvud för "Finansiell planering"-paketet

Knappstilar

Låt oss ta en titt på de unika primära och sekundära knappstilarna.

knapp ett

På fliken Knapp ett, konfigurera följande inställningar:

• Använd anpassad stil för knapp ett: JA
• Knapp ett:
  • Textstorlek: 18px
  • Textfärg: #ffffff
  • Bakgrundsfärg: #1b4ffe
  • Utfyllnad: 15px()Topp och botten); 25px (vänster och höger)

Knapp två

På fliken Knapp två, konfigurera följande inställningar:

• Använd anpassad stil för knapp två: JA
• Knapp två:
  • Textfärg: #1b4ffe
  • Bakgrundsfärg: Klar
  • Ikon Färg: #1b4ffe

Ladda ner DIVI nu!!!

Slutsats

Divis Fullwidth Header-modul gör det enkelt att skapa fantastiska Hero-sektioner på din webbplats. 

Strategisk användning av primära och sekundära knappar kommer att förbättra din användarupplevelse och hjälpa webbplatsbesökare att vidta de åtgärder de vill vidta. 

Anpassningsalternativen är oändliga med rubriken i full bredd, så ha kul med att experimentera!

Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.

Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.