Doriți să personalizați modulul Divi Fullwidth Header echilibrând butoanele primare și secundare?
Modulul Divi Antetul cu lățime completă vă ajută să adăugați secțiuni frumoase Hero la dvs site-ul web. Modulul vine cu două butoane, textul titlului, textul subtitrarilor, textul corpului, sigla și imaginea, ceea ce face ca opțiunile de personalizare să fie infinite.
În articolul de astăzi, vă vom arăta cum să recreați secțiuni eroi folosind Antet Divi Fullwidth. Ne vom începe designul folosind 3 pachete de layout prefabricate și ne vom proiecta secțiunile cu accent pe echilibrul butoanelor primare și secundare.
Dorim ca butonul principal să iasă în evidență, deoarece este îndemnul nostru principal la acțiune, păstrând în același timp butonul secundar vizibil și accesibil fără a depăși butonul principal.
Principiile proiectării butoanelor primare și secundare
Butoanele primare și butoanele secundare ajută la ghid vizitatori dumneavoastră site-ul web la anumite stocuri. Butoanele primare sunt de obicei cea mai comună sau dorită acțiune, iar butoanele secundare sunt o acțiune mai puțin obișnuită. Acest lucru ajută la ghidarea vizitatori unde vor ei să meargă.
Pentru a face acest lucru, butoanele primare ar trebui să iasă în evidență vizual, iar butoanele secundare să nu iasă la fel de mult. Aceasta înseamnă că butoanele principale ar trebui să fie mai distinctive și să aibă o greutate vizuală mai mare pentru a atrage mai multă atenție.
Acum că înțelegem cum funcționează butoanele primare și secundare, să trecem la tutorial!
studiu
Iată o privire asupra celor trei anteturi cu lățime completă pe care le vom proiecta astăzi.
Să începem prin a crea o pagină nouă cu Divi Builder
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Citiți și: Divi: Cum să utilizați măștile și modelele de fundal pentru o secțiune de eroi
Designul primului exemplu
Acum că pagina noastră este configurată, să începem cu antetul pe lățime completă al unei pagini de destinație UX.
Configurarea paginii noastre
Înainte de a începe personalizarea, va trebui să încărcăm pachetul de layout predefinit UX din biblioteca Divi. Când activați Visual Builder, veți vedea trei opțiuni, selectați Răsfoiți Aspecte.
Încărcați pachetul de aspect
Pentru a încărca pachetul de aspect UX pe pagina dvs.:
- În filă „Aspecte prefabricate”, utilizați funcția de căutare pentru a găsi pachetul de aspect UX.
- Odată ce îl găsiți, faceți clic pe el. Aceasta va afișa detalii de aspect și pagini disponibile.
- Faceți clic pe Aterizareşi faceți clic „Utilizați acest aspect”.
Vom recrea secțiunea de sus a aspectului ca modul Antet cu lățime completă.
Ștergeți prima secțiune
Deoarece vom recrea prima secțiune folosind modulul Fullwidth Header, va trebui să ștergem această secțiune. Plasați cursorul peste secțiune și faceți clic pe pictograma coș de gunoi.
Adăugați o secțiune de lățime completă
Înainte de a putea adăuga antetul cu lățime completă, trebuie să adăugăm o secțiune cu lățime completă.
Faceți clic pe săgeată "+" pentru a afișa secțiunile Divi, apoi faceți clic pe "Lățime maximă". Aceasta va afișa automat biblioteca Divi Fullwidth Module.
Adăugați un antet cu lățime completă
În biblioteca de module Divi Fullwidth, faceți clic pe „ Antet cu lățime completă".
Adăugați conținut
Înainte de a începe personalizarea modulului, să-l adăugăm cuprins necesare pentru acest modul.
Adăugați conținut textual
Sub fila Text, adăugați cuprins următor:
- Titlu: Îmbunătățiți-vă cunoștințele de design UX
- Subtitlu: Curs UX Design
- Butonul #1: Prezentare generală a cursului
- Butonul #2: Aflați mai multe
- Corp: implicit
Adăugați imagini
Acum că avem noastre cuprins text în loc, trebuie să adăugăm două imagini la designul nostru.
- În filă imagini, adăugați imaginea siglei (stelele) și imaginea antetului (fotografia persoanei care ține un telefon).
Schimbați culoarea de fundal
În filă Context, configurați acest parametru:
- Culoare de fundal: #131517
Personalizați antetul cu lățime completă
Acum că conținutul nostru este configurat, să îi adăugăm ceva stil prin intermediul Amenajări.
Pictograma derulează în jos
Să adăugăm pictograma de derulare în jos, săgeata în jos.
- Afișați butonul de derulare în jos: DA.
- Selectați pictograma săgeată în jos.
- Derulați în jos Culoare pictogramă: #000
Imagine
Să adăugăm curbe imaginilor noastre rotunjind colțurile.
În filă Imagine, configurați următoarele setări:
- Imagine Colțuri rotunjite : faceți clic pe butonul de legătură în lanț pentru a deconecta colțurile, apoi tastați 1000px în casetele de introducere din stânga jos și din dreapta jos. Aceasta va rotunji colțurile din stânga jos și din dreapta jos ale imaginilor noastre.
Textul titlului
Aici, să personalizăm textul titlului acestui modul. În fila Textul titlului, configurați aceste setări:
- Titlu :
- Font: PT Sans
- Greutatea fontului: aldine
- Dimensiune text: 5 rem
- Înălțimea liniei: 1,2 em
Corpul textului
Aici personalizăm corpul textului pentru acest modul. În fila Corpul textului, configurați aceste setări:
- Font pentru corp: Mukta
- Dimensiunea textului corpului: 18 px
Subtitrare text
Aici personalizăm textul legendei pentru acest modul. În fila Subtitrare text, configurați aceste setări:
- Subtitrare:
- Font: Mukta
- Greutatea fontului: aldine
- Stil: majuscule
- Culoare text: #13d678
- Spațiere între litere: 3px
butonul unu
Aici putem defini stiluri personalizate pentru butonul unu: butonul principal. În fila Butonul Unu, configurați aceste setări:
- Utilizați stil personalizat pentru butonul unu: DA
- Butonul Unu:
- Culoare text: #ffffff
- Culoare de fundal: #13d678
- Lățimea chenarului: 0 pixeli
- Raza chenarului: 100px
- Font: Mukta
- Greutatea fontului: aldine
- Afișați o pictogramă butonului: DA
- Pictogramă: săgeată la dreapta
- Afișați doar pictograma la trecerea cursorului pentru butonul unu: Nu
Butonul doi
Acum, să-l personalizăm pe al doilea: butonul secundar. În fila Butonul doi, configurați aceste setări:
- Utilizați stil personalizat pentru buton: DA
- Butonul doi
- Culoare text: #ffffff
- Culoare de fundal: #303030
- Lățimea chenarului: 0 pixeli
- Raza chenarului: 100 pixeli
- Font: Mukta
- Greutatea fontului: aldine
- Afișați pictograma butonului doi: da
- Pictograma butonul doi: Săgeata dreapta
- Afișați doar pictograma pe butonul de trecere cu mouse-ul doi: DA
Adăugați linkuri pentru butoane
Nu uitați să adăugați link-uri la butoanele dvs.! În fila Link, configurați următoarele setări:
- Adresa URL a linkului butonului #1: inserați adresa URL a butonului 1 aici.
- Adresa URL a linkului butonului #1: inserați adresa URL a butonului 2 aici.
Salvați-vă munca
Acum că avem antetul nostru complet proiectat, asigurați-vă că vă salvați designul!
- Faceți clic pe săgeata verde din partea dreaptă jos a ferestrei modulului.
- Economisiți
- Ieșiți din VisualBuilder.
Citiți și: Divi: Cum se creează o secțiune Fluid Hero
Distrează-te experimentând
Modalitățile de personalizare a modulului Divi Fullwidth Header sunt nesfârșite. Profitând de butonul principal și butonul secundar vă poate ajuta să vă direcționați vizitatori la pagina pe care doriți să o vadă sau să întreprindă acțiunea (cum ar fi trimiterea unei cereri) pe care doriți să o întreprindă.
Să aruncăm o privire la alte două exemple de anteturi cu lățime completă care au un buton principal care iese în evidență.
Antet pe toată lățimea din pachetul „Centrul de pensionare”.
Stiluri de butoane
Să aruncăm o privire la stilurile unice de butoane primare și secundare.
butonul unu
În fila Button One, configurați următoarele setări:
- Utilizați stiluri personalizate pentru butonul unu: DA
- Butonul Unu:
- Dimensiunea textului: 14px
- Culoare text: #ffffff
- Culoare de fundal: #0a0a0a
- Lățimea chenarului: 0 pixeli
- Raza chenarului: 10px
- Spațiere între litere: 3px
- Greutatea fontului: aldine
- Stil font: TT
- Afișați doar pictograma la trecerea cursorului pentru Buttpn One: DA
- Buton One Umplutură: 15px (sus și jos), 25px (stânga și dreapta)
Butonul doi
În filă Butonul doi, configurați următoarele setări:
- Utilizați stil personalizat pentru buton: DA
- Butonul doi:
- Dimensiunea textului: 14px
- Culoare text: #ffffff
- Culoare de fundal: #0a0a0a
- Lățimea chenarului: 0 pixeli
- Raza chenarului: 10px
- Greutatea fontului: aldine
- Stil font: TT
- Buton doi umplutură: 10px (jos), 10px (stânga și dreapta)
Și gata! Două butoane unice, unul care iese în evidență și unul care ocupă al doilea loc.
Antetul pe toată lățimea pachetului „Planificare financiară”.
Stiluri de butoane
Să aruncăm o privire la stilurile unice de butoane primare și secundare.
butonul unu
În filă Butonul Unu, configurați următoarele setări:
- Utilizați stil personalizat pentru butonul unu: DA
- Butonul Unu:
- Dimensiunea textului: 18px
- Culoare text: #ffffff
- Culoare de fundal: #1b4ffe
- Umplutură: 15px()Sus și Jos); 25 pixeli (stânga și dreapta)
Butonul doi
În filă Butonul doi, configurați următoarele setări:
- Utilizați stil personalizat pentru butonul doi: DA
- Butonul doi:
- Culoare text: #1b4ffe
- Culoare de fundal: clar
- Culoare pictogramă: #1b4ffe
Descărcați DIVI acum!!!
Concluzie
Modulul Fullwidth Header al lui Divi facilitează crearea de secțiuni Hero uimitoare pe dvs site-ul web.
Utilizarea strategică a butoanelor primare și secundare vă va îmbunătăți experiența utilizatorului și va ajuta vizitatorii site-ului web să ia acțiunile pe care doresc să le întreprindă.
Opțiunile de personalizare sunt nesfârșite cu antetul pe lățime completă, așa că distrează-te experimentând!
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.
Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
