Vil du tilpasse Divis Fullwidth Header-modul ved å balansere de primære og sekundære knappene?
Modulen Divi Fullwidth Header gjør det enkelt å legge til vakre Hero-seksjoner til din nettstedet Web. Modulen kommer med to knapper, titteltekst, underteksttekst, brødtekst, logo og bilde, som gjør tilpasningsmulighetene uendelige.
I dagens artikkel viser vi deg hvordan du gjenskaper Hero Sections ved hjelp av Divi Fullwidth Header. Vi starter designen vår ved å bruke 3 ferdiglagde layoutpakker og designer seksjonene våre med fokus på primær og sekundær knappbalanse.
Vi vil at den primære knappen skal skille seg ut fordi den er vår primære oppfordring til handling, samtidig som den holder den sekundære knappen synlig og tilgjengelig uten å forbigå den primære knappen.
Prinsipper for primær og sekundær knappdesign
Primære knapper og sekundære knapper hjelper veiledning Besøkende din nettstedet Web til visse aksjer. Primære knapper er vanligvis den vanligste eller ønskede handlingen, og sekundære knapper er en mindre vanlig handling. Dette hjelper med å veilede Besøkende dit de vil.
For å gjøre dette bør de primære knappene skille seg ut visuelt og de sekundære knappene skal ikke skille seg ut så mye. Dette betyr at hovedknappene bør være mer karakteristiske og ha mer visuell vekt for å tiltrekke seg mer oppmerksomhet.
Nå som vi forstår hvordan de primære og sekundære knappene fungerer, la oss gå til veiledningen!
undersøkelsen
Her er en titt på de tre overskriftene i full bredde vi skal designe i dag.
La oss starte med å lage en ny side med Divi Builder
Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
deretter klikker du Begynn å bygge (Bygg fra bunnen av)
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Les også: Divi: Slik bruker du masker og bakgrunnsmønstre for en helteseksjon
Design av det første eksemplet
Nå som siden vår er satt opp, la oss starte med overskriften i full bredde på en UX-landingsside.
Konfigurerer siden vår
Før vi kan begynne å tilpasse, må vi laste den forhåndsdefinerte layoutpakken UX fra Divi-biblioteket. Når du aktiverer Visual Builder vil du se tre alternativer som dukker opp, velg Bla gjennom layouter.
Last oppsettpakke
Slik laster du UX-layoutpakken på siden din:
- I fanen "Førlagde oppsett", bruk søkefunksjonen for å finne UX-layoutpakken.
- Når du finner den, klikker du på den. Dette vil få opp layoutdetaljer og tilgjengelige sider.
- Klikk på Landingog klikk "Bruk denne utformingen".
Vi vil gjenskape den øverste delen av layouten som en modul Toppbreddeoverskrift.
Slett den første delen
Siden vi skal gjenskape den første delen ved å bruke Fullwidth Header-modulen i stedet, må vi slette denne delen. Hold markøren over delen og klikk på søppelbøtteikonet.
Legg til en seksjon i full bredde
Før vi kan legge til overskriften i full bredde, må vi legge til en seksjon i full bredde.
Klikk på pilen "+" for å vise Divi-delene, klikk deretter på "Full bredde". Dette vil automatisk få opp Divi Fullwidth Module-biblioteket.
Legg til en overskrift i full bredde
I Divi Fullwidth-modulbiblioteket klikker du på " Toppbreddeoverskrift".
Legg til innhold
Før vi begynner å tilpasse modulen, la oss legge den til innhold nødvendig for denne modulen.
Legg til tekstinnhold
Under Tekst-fanen legger du til innhold suivant:
- Tittel: Forbedre kunnskapen din om UX-design
- Undertittel: UX-designkurs
- Knapp #1: Kursoversikt
- Knapp #2: Lær mer
- Brødtekst: standard
Legg til bilder
Nå som vi har vår innhold tekst på plass, må vi legge til to bilder til designet vårt.
- I fanen Bilder, legg til logobildet (stjernene) og overskriftsbildet (bildet av personen som holder en telefon).
Endre bakgrunnsfarge
I fanen Bakgrunn, konfigurer denne parameteren:
- Bakgrunnsfarge: #131517
Tilpass topptekst i full bredde
Nå som innholdet vårt er satt opp, la oss legge til litt styling til det via utforming.
Rull ned ikonet
La oss legge til rulle ned-ikonet, pil ned.
- Vis rulle ned-knapp: JA.
- Velg pil ned-ikonet.
- Rull ned ikon Farge: #000
Bilde
La oss legge til kurver til bildene våre ved å avrunde hjørnene.
I fanen Bilde, konfigurer følgende innstillinger:
- Bilde avrundede hjørner : Klikk på kjedekoblingsknappen for å koble fra hjørnene, og skriv deretter inn 1000px i inntastingsboksene nederst til venstre og nederst til høyre. Dette vil runde nedre venstre og nedre høyre hjørne av bildene våre.
Titteltekst
Her, la oss tilpasse tittelteksten til denne modulen. I fanen Titteltekst, konfigurer disse innstillingene:
- Tittel:
- Font: PT Sans
- Skriftvekt: Fet
- Tekststørrelse: 5 rem
- Linjehøyde: 1,2 em
Kroppen av teksten
Det er her vi tilpasser brødteksten for denne modulen. I fanen Brødtekst, konfigurer disse innstillingene:
- Body Font: Mukta
- Brødtekst Størrelse: 18px
Underteksttekst
Det er her vi tilpasser bildeteksten for denne modulen. I fanen Underteksttekst, konfigurer disse innstillingene:
- Undertittel:
- Font: Mukta
- Skriftvekt: Fet
- Stil: store bokstaver
- Tekstfarge: #13d678
- Bokstavavstand: 3px
knapp en
Det er her vi kan definere egendefinerte stiler for knapp én: hovedknappen. I fanen ButtonOne, konfigurer disse innstillingene:
- Bruk egendefinert stil for knapp én: JA
- Knapp en:
- Tekstfarge: #ffffff
- Bakgrunnsfarge: #13d678
- Kantbredde: 0 piksler
- Kanteradius: 100px
- Font: Mukta
- Skriftvekt: Fet
- Vis knapp ett-ikon: JA
- Ikon: Høyre pil
- Vis kun ikon ved peker for knapp én: Nei
Knapp to
La oss nå tilpasse den andre: den sekundære knappen. I fanen Knapp to, konfigurer disse innstillingene:
- Bruk egendefinert stil for knapp: JA
- Knapp to
- Tekstfarge: #ffffff
- Bakgrunnsfarge: #303030
- Kantbredde: 0 piksler
- Kanteradius: 100 piksler
- Font: Mukta
- Skriftvekt: Fet
- Vis knapp to-ikon: Ja
- Knapp to-ikon: Høyre pil
- Vis kun ikon på pekerknapp to: JA
Legg til knappekoblinger
Ikke glem å legge til lenker til knappene dine! I fanen link, konfigurer følgende innstillinger:
- Link-URL for knapp #1: Lim inn URL-en til knapp 1 her.
- Link-URL for knapp #1: Lim inn URL-en til knapp 2 her.
Lagre arbeidet ditt
Nå som vi har vår fullt utformede topptekst i full bredde, sørg for å lagre designet ditt!
- Klikk på den grønne pilen nederst til høyre i modulvinduet.
- Spar
- Avslutt VisualBuilder.
Les også: Divi: Hvordan lage en Fluid Hero-seksjon
Ha det gøy med å eksperimentere
Måtene å tilpasse Divi Fullwidth Header-modulen på er uendelige. Å dra nytte av den primære knappen og den sekundære knappen kan hjelpe deg med å styre Besøkende til siden du vil at de skal se eller utføre handlingen (som å sende inn en forespørsel) du vil at de skal utføre.
La oss ta en titt på ytterligere to eksempler på overskrifter i full bredde som har en primærknapp som skiller seg ut.
Overskrift i full bredde fra pakken "Pensjonssenter".
Knappestiler
La oss ta en titt på de unike primære og sekundære knappestilene.
knapp en
På Button One-fanen, konfigurer følgende innstillinger:
- Bruk egendefinerte stiler for knapp én: JA
- Knapp en:
- Tekststørrelse: 14px
- Tekstfarge: #ffffff
- Bakgrunnsfarge: #0a0a0a
- Kantbredde: 0 piksler
- Kanteradius: 10px
- Bokstavavstand: 3px
- Skriftvekt: Fet
- Skriftstil: TT
- Vis kun ikon ved peker for Buttpn One: JA
- Button One-polstring: 15px (øverst og bunn), 25px (venstre og høyre)
Knapp to
I fanen Knapp to, konfigurer følgende innstillinger:
- Bruk egendefinert stil for knapp: JA
- Knapp to:
- Tekststørrelse: 14px
- Tekstfarge: #ffffff
- Bakgrunnsfarge: #0a0a0a
- Kantbredde: 0 piksler
- Kanteradius: 10px
- Skriftvekt: Fet
- Skriftstil: TT
- Knapp to-polstring: 10px (nederst), 10px (venstre og høyre)
Og der går du! To unike knapper, en som skiller seg ut og en som tar det andre setet.
Overskrift i full bredde for "Finansiell planlegging"-pakken
Knappestiler
La oss ta en titt på de unike primære og sekundære knappestilene.
knapp en
I fanen Knapp en, konfigurer følgende innstillinger:
- Bruk egendefinert stil for knapp én: JA
- Knapp en:
- Tekststørrelse: 18px
- Tekstfarge: #ffffff
- Bakgrunnsfarge: #1b4ffe
- Polstring: 15px()Topp og bunn); 25px (venstre og høyre)
Knapp to
I fanen Knapp to, konfigurer følgende innstillinger:
- Bruk egendefinert stil for knapp to: JA
- Knapp to:
- Tekstfarge: #1b4ffe
- Bakgrunnsfarge: Klar
- Ikon Farge: #1b4ffe
Last ned DIVI nå!!!
konklusjonen
Divis Fullwidth Header-modul gjør det enkelt å lage fantastiske Hero-seksjoner på din nettstedet Web.
Strategisk bruk av primære og sekundære knapper vil forbedre brukeropplevelsen din og hjelpe besøkende på nettstedet til å utføre handlingene de ønsker å ta.
Tilpasningsmulighetene er uendelige med overskriften i full bredde, så ha det gøy med å eksperimentere!
Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
