Cum să creați secțiuni Hero Showstopping cu Divi

Secțiuni erou; ele servesc tot felul de scopuri. Sunt primul lucru pe care îl văd vizitatorii atunci când vă vizitează site-ul web, arată imediat stilul site-ului dvs. web și influențează modul în care vizitatorii dvs. se simt și se comportă pe site-ul dvs. Suntem deja obișnuiți cu tot felul de secțiuni de eroi, dar cele mai multe dintre ele includ o imagine de erou, un slogan și un îndemn la acțiune. Totuși, există și alte posibilități. În această postare, vă vom arăta o altă abordare a secțiunilor eroi și o vom urmări cu un exemplu pe care îl puteți recrea folosind Divi.

Exemplu

Exemplul pe care îl vom arăta cum să creați cu Divi arată astfel pe desktop:

Și așa pe mobil:

Cum să scoți în evidență secțiunea erou

Înainte de a vă arăta cum să recreați exemplul, să aruncăm o privire asupra câtorva dintre factorii care diferențiază această secțiune de eroi de ceilalți.

1. Logo mare, descriptiv și centralizat

Primul lucru pe care îl folosim în exemplul nostru, pentru a ajuta la evidențierea secțiunii eroilor, este un format de antet centrat în locul valorii implicite. Împreună cu asta, folosim și un meniu transparent care va ajuta la suprapunerea elementelor de meniu cu designul secțiunii erou. Legătura dintre siglă, meniu și site-ul web este mai clară atunci când se utilizează un fundal transparent, deoarece există o diviziune mai mică în secțiunea erou.

2. Concentrați conținutul scris

Un alt lucru pe care îl puteți face pentru ca secțiunea erou să iasă în evidență este concentrarea conținutului scris pe care îl aveți. În acest fel, veți atrage atenția vizitatorilor către un singur loc de pe ecran, ceea ce face ca șansa ca aceștia să o citească mai mare. Pe de altă parte, dacă împărțiți conținutul scris în întreaga secțiune a eroului, este mai probabil ca schimbările să rateze o parte din mesajul pe care încercați să îl aduceți.

3. Evidențiați propunerile unice de vânzare

De obicei, o secțiune erou conține Module Text normale care partajează un produs sau o slogană a companiei. Cu toate acestea, puteți utiliza și modulele Blurb și în secțiunea erou. Aceste module Blurb sunt perfecte dacă doriți să împărtășiți imediat propunerile unice de vânzare ale produsului sau serviciului dvs. Mai mult decât atât, puteți alege, de asemenea, dacă doriți sau nu să includeți imediat îndemnuri la acțiune. În exemplul nostru, aceste apeluri la acțiuni sunt încorporate în modulele blurb în sine.

4. Curățați imaginea produsului

Pentru a completa și pentru a echilibra conținutul scris pe care l-ați furnizat, vă recomandăm să utilizați o imagine de produs curată ca imagine de fundal a secțiunii erou. Vrei ca imaginea eroului tău să fie cât mai calitativă și auto-explicativă posibil fără a prelua întreaga secțiune a eroului.

Cum să creați secțiuni Hero Showstopping cu Divi

Abonați-vă la canalul nostru Youtube

Recreați Exemplu cu Divi

Acum, că am trecut peste latura teoretică, este timpul să începem să o recreăm.

Format antet

Primul lucru pe care trebuie să-l faceți este să alegeți „Centrat” ca stil de antet accesând tabloul de bord WordPress> Personalizați> Antet și navigare> Format antet> Și alegeți „Centrat” ca stil de antet ”.

Setări principale ale barei de meniu

Apoi, reveniți la Header & Navigation> Meniul principal Bard> Și efectuați următoarele ajustări:

• Înălțimea meniului: 211 px
• Logo Înălțime maximă: 100 px
• Dimensiune text: 16
• Spațierea literelor: 2
• Font: Lato Light
• Stilul fontului: majuscule
• Culoarea textului: #FFFFFF
• Culoare link activ: #FFFFFF
• Culoare fundal: rgba (255,255,255,0)
• Culoarea fundalului meniului drop-down: rgba (255,255,255,0)

Adăugați o secțiune nouă

După ce ați terminat, adăugați o pagină nouă, activați Divi Builder, activați Visual Builder și adăugați o nouă secțiune standard.

Fundal de gradient

Utilizați următorul fundal de gradient pentru această secțiune:

• Prima culoare: # e2e2e2
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: liniar
• Direcția gradientului: 180 grade
• Poziția inițială: 40%
• Poziție finală: 40%

Imagine de fundal

Apoi, încărcați imaginea de fundal și alegeți „Înmulțiți” ca amestec de imagine de fundal.

Adăugați rândul din două coloane

Culoare de fundal

Adăugați un rând cu două coloane la secțiunea pe care tocmai ați creat-o și folosiți „# b7afa1” ca culoare de fundal.

Coloana 1 Gradient Background

Derulați în jos și utilizați următorul fundal de gradient pentru prima coloană:

• Prima culoare: rgba (255,255,255,0,43)
• A doua culoare: rgba (255,255,255,0)
• Coloana 1 Tip de gradient: Radial
• Coloana 1 Direcție gradient: Stânga sus
• Coloana 1 Poziție de start: 49%
• Coloana 1 Poziție finală: 49%

Coloana 2 Fundal gradient

Și utilizați următorul fundal de gradient pentru a doua coloană:

• Prima culoare: rgba (255,255,255,0,43)
• A doua culoare: rgba (255,255,255,0)
• Coloana 2 Tip de gradient: Radial
• Coloana 2 Direcție radială: jos dreapta
• Coloana 2 Poziția inițială: 49%
• Coloana 2 Poziție finală: 49%

Dimensionare

Accesați fila Proiectare, activați opțiunea „Utilizați lățimea personalizată a jgheabului” și utilizați „1” pentru lățimea jgheabului.

Spațiere

Deschideți subcategoria Spațiere și utilizați următoarele padding și margine:

• Căptușeală superioară: 0 px (desktop), 20 px (tabletă și telefon)
• Căptușeală dreaptă: 25 px
• Căptușeală inferioară: 20 px
• Garnitura stânga: 25 px
• Marja inferioară: 200 px

Primul modul Blurb

Activați pictograma

Adăugați un modul Blurb la prima coloană a rândului, activați opțiunea „Utilizați pictograma” și alegeți o pictogramă.

Setări pictograme

Apoi, accesați setările de proiectare și efectuați următoarele modificări la subcategoria Imagine și pictogramă:

• Culoare pictogramă: #FFFFFF
• Plasare imagine / pictogramă: stânga
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 40 px

Setări text antet

Apoi, efectuați următoarele setări pentru subcategoria Text antet:

• Font antet: Roboto Light
• Stilul fontului: Bold
• Dimensiune font antet: 25 px
• Culoarea textului antetului: #FFFFFF
• Înălțimea liniei antetului: 1,5em

Setări text corp

Subcategoria Textul corpului va avea nevoie de următoarele modificări:

• Font corp: Lato Light
• Dimensiunea fontului corpului: 13 px
• Culoarea textului corpului: #FFFFFF

Dimensionare

Apoi, utilizați „300px” ca lățime de conținut.

Spațiere

În cele din urmă, utilizați următoarea marjă și umplere pentru modulul Blurb:

• Marja superioară: -50 px (desktop), 0 px (tabletă și telefon)
• Căptușeală superioară: 100 px
• Garnitura dreapta: 10 px
• Căptușeală Bototm: 30 px
• Căptușeală stângă: 10 px

Clonați modulul Blurb & Place în a doua coloană

Continuați clonând modulul Blurb realizat anterior și plasându-l și în cealaltă coloană.

Schimbați culoarea de fundal

Primul lucru pe care va trebui să îl schimbați în acest modul Blurb clonat este culoarea de fundal. Schimbați-l în „rgba (89,60,31,0,5)”.

Schimbă iconița

Următorul și ultimul lucru pe care va trebui să îl modificați este pictograma din fila conținut.

Extra: Adăugați opțiunea Divi's New Box Shadow la rând

Cu actualizarea recentă, puteți adăuga acum umbre de casetă la rânduri, module și secțiuni. Pentru acest exemplu, vom adăuga o umbră de casetă la rând. Acest lucru vă va ajuta să creați o anumită profunzime și să subliniați conținutul scris din secțiunea noastră despre eroi.

• Poziție orizontală a umbrei cutiei: -3px
• Box Shadow Vertical Position: 31 px
• Puterea neclarității umbrei cutiei: 79 px
• Puterea răspândirii umbrei cutiei: -4px
• Culoare umbră: # 424242
• Box Shadow Position: Outer Shadow

Rezultat

Să luăm un alt rezultat rapid la rezultatul pe care ar trebui să îl puteți obține pe desktop după ce ați urmat această postare:

Și pe mobil:

Gânduri finale

În această postare, v-am arătat o abordare diferită cu privire la secțiunile de eroi. V-am dat câteva sfaturi și am elaborat aceste sfaturi, arătându-vă cum să recreați un exemplu pe care l-am făcut în avans cu Divi. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de Ellagrin / shutterstock.com