Divi: Kako balansirati primarne i sekundarne gumbe modula Fullwidth Header

Želite li prilagoditi Divijev modul Fullwidth Header balansiranjem primarnih i sekundarnih gumba?

Modul Divi Fullwidth Header olakšava dodavanje prekrasnih Hero odjeljaka u vaš web stranica. Modul dolazi s dva gumba, tekstom naslova, tekstom podnaslova, tekstom tijela, logotipom i slikom, što čini mogućnosti prilagodbe beskrajnim.

U današnjem članku pokazat ćemo vam kako ponovno stvoriti odjeljke heroja pomoću Divi zaglavlje pune širine. Započet ćemo s dizajnom pomoću 3 unaprijed napravljena paketa izgleda i dizajnirati naše odjeljke s fokusom na primarni i sekundarni balans gumba. 

Želimo da se primarni gumb ističe jer je to naš primarni poziv na akciju, a da sekundarni gumb ostane vidljiv i dostupan bez preuzimanja primarnog gumba.

Principi dizajna primarnog i sekundarnog gumba

Primarni gumbi i sekundarni gumbi vodič za pomoć posjetitelji vaš web stranica na određene dionice. Primarni gumbi obično su najčešća ili željena radnja, a sekundarni gumbi rjeđa su radnja. Ovo pomaže u vođenju posjetitelji kamo žele ići.

Da biste to učinili, primarni gumbi bi se trebali vizualno isticati, a sekundarni gumbi ne bi se trebali toliko isticati. To znači da bi glavni gumbi trebali biti prepoznatljiviji i imati veću vizualnu težinu kako bi privukli više pažnje.

Sada kada razumijemo kako primarni i sekundarni gumbi rade, idemo na tutorijal!

pregled

Evo pogleda na tri zaglavlja pune širine koja ćemo danas dizajnirati.

Započnimo stvaranjem nove stranice s Divi Builderom

S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.

Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder

zatim kliknite Počnite graditi (Gradi od ogrebotina)

Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.

Pročitajte također: Divi: Kako koristiti maske i pozadinske uzorke za herojsku sekciju

Dizajn prvog primjera

Sada kada je naša stranica postavljena, počnimo sa zaglavljem pune širine UX odredišne ​​stranice.

Konfiguriranje naše stranice

Prije nego što počnemo prilagođavati, morat ćemo učitati unaprijed definirani paket izgleda UX iz biblioteke Divi. Kada aktivirate Visual Builder, vidjet ćete tri iskočne opcije, odaberite Pregledaj rasporede.

Učitaj paket izgleda

Za učitavanje UX paketa izgleda na svoju stranicu:

1. U kartici "Unaprijed izrađeni izgledi", upotrijebite funkciju pretraživanja kako biste pronašli paket UX izgleda.
2. Kada ga pronađete, kliknite na njega. Ovo će prikazati detalje izgleda i dostupne stranice.
3. Kliknite Slijetanjei kliknite "Koristi ovaj izgled".

Ponovno ćemo stvoriti gornji dio izgleda kao modul Zaglavlje pune širine.

Izbrišite prvi odjeljak

Budući da ćemo ponovno stvoriti prvi odjeljak koristeći umjesto toga modul Fullwidth Header, morat ćemo izbrisati ovaj odjeljak. Zadržite pokazivač iznad odjeljka i kliknite ikonu kante za smeće.

Dodajte odjeljak pune širine

Prije nego što možemo dodati zaglavlje pune širine, moramo dodati odjeljak pune širine.

Pritisnite strelicu "+" za prikaz odjeljaka Divi, a zatim kliknite "Puna širina". Ovo će automatski pokrenuti biblioteku Divi Fullwidth Module.

Dodajte zaglavlje pune širine

U biblioteci modula Divi Fullwidth kliknite na " Zaglavlje pune širine".

Dodajte sadržaj

Prije nego počnemo prilagođavati modul, dodajmo ga sadržaj potrebno za ovaj modul.

Dodajte tekstualni sadržaj

Na kartici Tekst dodajte sadržaj Sljedeći :

1. Naslov: Poboljšajte svoje znanje o UX dizajnu
2. Podnaslov: Tečaj UX dizajna
3. Gumb #1: Pregled tečaja
4. Gumb #2: Saznajte više
5. Tijelo: zadano

Dodajte slike

Sad kad imamo svoje sadržaj tekst na mjestu, moramo dodati dvije slike našem dizajnu.

1. U kartici Slike, dodajte sliku logotipa (zvjezdice) i sliku zaglavlja (fotografija osobe koja drži telefon).

Promjena boje pozadine

U kartici pozadina, konfigurirajte ovaj parametar:

1. Boja pozadine: #131517

Prilagodite zaglavlje pune širine

Sad kad je naš sadržaj postavljen, dodajmo mu malo stila putem dizajn.

Ikona za pomicanje prema dolje

Dodajmo ikonu za pomicanje prema dolje, strelicu prema dolje.

1. Prikaži gumb za pomicanje prema dolje: DA.
2. Odaberite ikonu strelice prema dolje.
3. Boja ikone za pomicanje prema dolje: #000

Slika

Dodajmo krivulje našim slikama zaokruživanjem uglova.

U kartici Slika, konfigurirajte sljedeće postavke:

1. Slika Zaobljeni uglovi : Kliknite gumb lančane veze da biste prekinuli vezu uglova, zatim upišite 1000px u donji lijevi i donji desni okvir za unos. Ovo će zaokružiti donji lijevi i donji desni kut naših slika.

Tekst naslova

Ovdje prilagodimo tekst naslova ovog modula. U kartici Tekst naslova, konfigurirajte ove postavke:

• Naslov:
  • Font: PT Sans
  • Težina fonta: Podebljano
  • Veličina teksta: 5 rem
  • Visina linije: 1,2 em

Tijelo teksta

Ovdje prilagođavamo tekst tijela za ovaj modul. U kartici Tekst tijela, konfigurirajte ove postavke:

1. Font tijela: Mukta
2. Veličina teksta: 18 px

Tekst podnaslova

Ovdje prilagođavamo tekst naslova za ovaj modul. U kartici Tekst podnaslova, konfigurirajte ove postavke:

• Titl:
  • Font: Mukta
  • Težina fonta: Podebljano
  • Stil: velika slova
  • Boja teksta: #13d678
  • Razmak između slova: 3px

gumb jedan

Ovdje možemo definirati prilagođene stilove za gumb jedan: glavni gumb. U kartici Gumb jedan, konfigurirajte ove postavke:

• Koristi prilagođeni stil za gumb jedan: DA
• Gumb jedan:
  • Boja teksta: #ffffff
  • Boja pozadine: #13d678
  • Širina obruba: 0 piksela
  • Radijus obruba: 100 px
  • Font: Mukta
  • Težina fonta: Podebljano
• Prikaži ikonu gumba jedan: DA
• Ikona: strelica desno
• Prikaži samo ikonu pri lebdenju za prvi gumb: Ne

Dugme dva

Sada prilagodimo drugi: sekundarni gumb. U kartici Dugme dva, konfigurirajte ove postavke:

• Koristi prilagođeni stil za gumb: DA
  • Dugme dva
  • Boja teksta: #ffffff
  • Boja pozadine: #303030
  • Širina obruba: 0 piksela
  • Radijus obruba: 100 piksela
  • Font: Mukta
  • Težina fonta: Podebljano
• Prikaži ikonu dva gumba: Da
• Ikona gumba dva: strelica desno
• Prikaži samo ikonu na lebdećem gumbu dva: DA

Dodajte veze gumba

Ne zaboravite dodati poveznice svojim gumbima! U kartici Veza, konfigurirajte sljedeće postavke:

1. URL veze gumba #1: zalijepite URL gumba 1 ovdje.
2. URL veze gumba #1: zalijepite URL gumba 2 ovdje.

Sačuvajte svoj rad

Sada kada imamo naše potpuno dizajnirano zaglavlje pune širine, svakako spremite svoj dizajn!

• Kliknite zelenu strelicu u donjem desnom kutu prozora modula.
• UŠTEDI
• Izađite iz VisualBuildera.

Pročitajte također: Divi: Kako stvoriti odjeljak Fluid Hero

Zabavite se eksperimentirajući

Načini za prilagodbu modula Divi Fullwidth Header su beskrajni. Iskorištavanje prednosti primarnog i sekundarnog gumba može vam pomoći u usmjeravanju posjetitelji na stranicu koju želite da pregledaju ili da poduzmu radnju (poput podnošenja zahtjeva) koju želite da poduzmu.

Pogledajmo još dva primjera zaglavlja pune širine koja imaju primarni gumb koji se ističe.

Zaglavlje pune širine iz paketa "Umirovljenički centar".

Stilovi gumba

Pogledajmo jedinstvene primarne i sekundarne stilove gumba.

gumb jedan

Na kartici Button One konfigurirajte sljedeće postavke:

• Koristi prilagođene stilove za gumb jedan: DA
• Gumb jedan:
  • Veličina teksta: 14px
  • Boja teksta: #ffffff
  • Boja pozadine: #0a0a0a
  • Širina obruba: 0 piksela
  • Radijus obruba: 10 px
  • Razmak između slova: 3px
  • Težina fonta: Podebljano
  • Stil fonta: TT
• Prikaži samo ikonu pri lebdenju za Buttpn One : DA
• Ispuna gumba jedan: 15 px (gore i dolje), 25 px (lijevo i desno)

Dugme dva

U kartici Dugme dva, konfigurirajte sljedeće postavke:

• Koristi prilagođeni stil za gumb: DA
  • Gumb dva:
  • Veličina teksta: 14px
  • Boja teksta: #ffffff
  • Boja pozadine: #0a0a0a
  • Širina obruba: 0 piksela
  • Radijus obruba: 10 px
  • Težina fonta: Podebljano
  • Stil fonta: TT
• Ispuna gumba dva: 10 px (dno), 10 px (lijevo i desno)

I eto ga! Dva jedinstvena gumba, jedan koji se ističe i jedan koji zauzima drugo mjesto.

Zaglavlje pune širine paketa "Financijsko planiranje".

Stilovi gumba

Pogledajmo jedinstvene primarne i sekundarne stilove gumba.

gumb jedan

U kartici Gumb jedan, konfigurirajte sljedeće postavke:

• Koristi prilagođeni stil za gumb jedan: DA
• Gumb jedan:
  • Veličina teksta: 18px
  • Boja teksta: #ffffff
  • Boja pozadine: #1b4ffe
  • Padding: 15px()Top and Bottom); 25 px (lijevo i desno)

Dugme dva

U kartici Dugme dva, konfigurirajte sljedeće postavke:

• Koristi prilagođeni stil za gumb dva: DA
• Gumb dva:
  • Boja teksta: #1b4ffe
  • Boja pozadine: prozirna
  • Boja ikone: #1b4ffe

Preuzmite DIVI sada!!!

Zaključak

Divijev modul Fullwidth Header olakšava stvaranje zadivljujućih Hero odjeljaka na vašem web stranica. 

Strateško korištenje primarnih i sekundarnih gumba poboljšat će vaše korisničko iskustvo i pomoći posjetiteljima web stranice da poduzmu radnje koje žele. 

Mogućnosti prilagodbe su beskrajne uz zaglavlje pune širine, stoga se zabavite eksperimentirajući!

Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara raspravljati o tome.

Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.

Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...