Cum să proiectați o secțiune Hero pentru site -ul dvs. web (2025 Ghid)

Site -ul dvs. web are doar câteva secunde pentru a face o impresie bună, astfel încât a avea o secțiune de eroi puternică ar trebui să fie o prioritate. Este ca și fereastra de vitrină a afacerii dvs. online și trebuie să le atrageți rapid atenția și să îi încurajați să continue defilarea. În această postare, ne vom scufunda în specificul proiectării unei secțiuni Hero și vă vom arăta cum să proiectați unul cu Divi folosind constructorul său intuitiv de drag-and-drop.

Ce este o secțiune de eroi și de ce ai nevoie de una?

Secțiunea erou a site -ului dvs. web nu este doar partea de sus a paginii; Este prima ta șansă de a face o impresie bună. Acesta este locul în care atrageți atenția, vă afișați mesajul principal și arătați instantaneu vizitatorilor de ce ar trebui să se lipească. O mare secțiune Hero le agăță în câteva secunde, ghidându -le mai adânc pe site -ul dvs. cu apeluri clare la acțiune și setarea scenei pentru întreaga experiență a utilizatorului (UX). De aceea este atât de important să -l înțelegem corect.

Iată câteva lucruri de care trebuie să țineți cont:

Primele impresii contează

Trăim într -o lume de mulțumire instantanee. Utilizatorii care aterizează pe site -ul dvs. vor face judecăți rapide, astfel încât secțiunea Hero trebuie să le atragă atenția în câteva secunde. În caz contrar, probabil că vor sări, părăsind site -ul dvs. și vor merge în altă parte. Cu toate acestea, secțiunea dvs. de eroi nu se referă doar la imagini vizuale. Setează tonul pentru întreaga experiență a utilizatorului. O secțiune de erou bună stabilește așteptările utilizatorilor cu privire la ceea ce vor găsi pe site -ul dvs. web.

Când știi că ai doar câteva secunde pentru a atrage atenția oamenilor, fă -o să conteze. Folosiți puterea povestirii vizuale pentru a vă transmite rapid mesajul. Imaginile convingătoare, cum ar fi fotografiile sau videoclipurile, combinate cu titluri de impact, pot transmite mult mai multe informații în câteva secunde decât paragrafele mari de text. Utilizați un limbaj care ajută utilizatorii să înțeleagă instantaneu ofertele dvs. și de ce ar trebui să le pese.

Luați în considerare acest exemplu: doriți să începeți să mâncați organic, așa că căutați o piață a fermierului local. Când aterizați pe site, imaginea mâncării delicioase vă atrage atenția. Scanând antetul, găsiți două butoane care vă încurajează să aflați mai multe.

Vă comunică mesajul

Vizitatorii nu ar trebui să ghicească sau să deruleze pentru a înțelege ce oferiți. Evitați jargonul sau un limbaj excesiv de tehnic pe care îl poate înțelege publicul țintă. În schimb, evidențiați ce vă face diferit de competiție. Ar putea fi orice, de la un produs sau serviciu unic până la o zonă specializată de expertiză. De asemenea, cum le beneficiază acel produs sau serviciu? Încadrați -vă mesajul în ceea ce privește ceea ce utilizatorul are nevoie sau dorește.

Am menționat importanța imaginilor, dar textul pe care îl alegeți este la fel de crucial. Păstrați titlurile scurte, memorabile și atrăgătoare de atenție. Urmăriți acest lucru cu un sub -punct scurt sau un paragraf de introducere pentru a surprinde interesul utilizatorului.

Luați în considerare acest exemplu: căutați terapie de artă pentru bunica. Când găsiți acest site, sunteți atras de design și culori strălucitoare. Citiți paragraful și știți că această afacere oferă sesiuni de terapie de artă pentru copii, adulți și seniori.

Poate conduce conversii

Conversiile sunt principalul motiv pentru care oamenii construiesc site -uri web. Proprietarii de afaceri doresc să cumpărați ceva sau să finalizați o sarcină. Secțiunea dvs. Hero poate fi un magnet pentru conversii, dacă este proiectat corect. Unul dintre cei mai cruciali factori în realizarea acestui lucru este utilizarea unui apel eficient la acțiune (CTA). Fiecare secțiune de erou bun va avea fie un buton, fie un formular care să încurajeze vizitatorii dvs. să facă următorul pas.

Un alt mod eficient de a conduce conversii este prin crearea unui sentiment de urgență. Acest lucru poate fi obținut prin oferte în timp limitat pe un anumit produs, cronometre de numărătoare inversă sau beneficiile înscrierii la newsletter-ul dvs. Aveți grijă să nu fiți prea apăsători. În schimb, utilizați un limbaj care motivează utilizatorii să ia măsuri.

Luați în considerare acest exemplu: sunteți un pasionat de divi care trăiește în California. Întotdeauna ați dorit să participați la o conferință legată de designul web pentru a face conexiuni și pentru a învăța noi abilități. La aterizarea pe site, știți imediat că acest site web este pentru o întâlnire Divi în San Fransisco în august și vă puteți înscrie.

Care sunt elementele de bază ale unei secțiuni de eroi eficiente?

Concentrarea pe câteva elemente cheie vă permite să creați o secțiune de eroi care să arate uimitor, implică efectiv vizitatorii dvs. și îi încurajează să exploreze în continuare site -ul dvs. web. Ce ar trebui să includeți într -o secțiune de eroi?

Un titlu convingător

Titlul tău ar trebui să fie scurt, dulce și de impact. Gândiți-vă mare, îndrăzneț și bazat pe beneficii. În loc să spuneți bine ați venit pe site-ul nostru web , încercați ceva mai antrenant, cum ar fi să vă deblocați potențialul cu programul nostru de kickboxing de 30 de zile . Modulul de titlu al lui Divi sau modul de antet cu lățime completă vă oferă un control complet asupra stilului titlului. Joacă-te cu diferite fonturi, culori, dimensiuni și distanțare pentru a crea un aspect atrăgător. Puteți utiliza stiluri de tipografie pentru a vă prezenta numele de afaceri, astfel încât să fie incontestabil de la început despre ce este vorba despre afacerea dvs.

Subpoziție sau paragraf de introducere

În timp ce titlul tău atrage atenția, paragraful tău de subpoziție sau introducere oferă contextul. Este șansa ta de a elabora pe promisiunea titlului și de a adăuga o notă de intrigă. Păstrați -l concis și lăsați -l să funcționeze armonios cu principalul dvs. titlu. De exemplu, dacă titlul tău îți petrece o zi la spa , subpoziția ta ar putea elabora și explica ce oferă acel spa.

Un apel clar la acțiune

Eroul tău are nevoie de un scop clar. Ce vrei să facă vizitatorii în continuare? Indiferent dacă doriți să atrageți utilizatorii să învețe mai multe, să facă o achiziție sau să vă înscrieți la un buletin informativ, indiferent de acesta, CTA dvs. ar trebui să fie clar și proeminent. Utilizați un limbaj orientat spre acțiune, cum ar fi să începeți sau să vă alăturați astăzi . Un CTA bine plasat acționează ca un ghid, conducând vizitatorii către o acțiune dorită.

Imagini de înaltă calitate

Să fim sinceri: imaginile vorbesc mai tare decât cuvintele. O imagine sau un videoclip de înaltă calitate poate atrage instantaneu atenția și poate stabili starea de spirit pentru site-ul dvs. web. Divi face foarte ușor de adăugat și de stiluri de stil și videoclipuri în secțiunea dvs. Hero. Vizualele bune pot transmite emoții, pot spune o poveste și pot crea o impresie de durată.

Un fundal care se întâmplă

Fundalul secțiunii dvs. Hero stabilește scena pentru conținutul dvs. Puteți utiliza imagini, culori solide sau gradienți pentru a crea un fundal uimitor. Divi vă oferă un control complet asupra setărilor de fundal, astfel încât să puteți face un aspect unic și atrăgător. Majoritatea temelor premium vă oferă control asupra setărilor de fundal, permițându -vă să creați o secțiune unică de eroi care să reflecte marca dvs. și să stabilească tonul pentru restul site -ului dvs. web.

Exemple de secțiuni de eroi (și de ce funcționează)

Sunteți gata să vedeți cum o secțiune de eroi puternică vă poate transforma site -ul? Să explorăm câteva exemple eficiente disponibile cu Divi, descompunând de ce funcționează. Folosind mai multe pachete de aspect Divi, vom prezenta diverse modele pentru a vă inspira. Nu uitați, acestea sunt doar puncte de pornire-succesul în lumea reală depinde de conținut convingător (nu de textul locului de loc). Cu toate acestea, aceste exemple vă vor oferi o imagine clară a posibilităților.

Exemplul 1: Software AI

Primul nostru exemplu este pentru o companie de software AI. Are mai multe puncte forte, inclusiv:

1. O rubrică clară și subpoziție: Viitorul Divi este un rubrică concisă, intrigantă, care comunică accentul. Inteligența artificială de subpoziție oferă context și un sentiment modern, de ultimă oră.
2. Apel vizual: fundalul abstract, futurist, cu elemente strălucitoare, este atrăgător și relevant pentru tema AI și a viitorului.
3. Contrast puternic: textul alb pe fundalul violet oferă o lizibilitate excelentă și face ca mesajul să iasă în evidență.
4. Clear Apels to Action: Alăturați-vă Divi Today și Demo Free sunt atât directe, cât și orientate spre acțiune, spunând utilizatorului exact ce pot face și ce vor obține atunci când vor face clic. A avea două CTA -uri oferă opțiuni care interesează utilizatorul.
5. Este modern: designul general, schema de culori și imaginile evocă un sentiment de inovație și gândire înainte, care se aliniază cu subiectul tendințelor AI și viitoare.

Exemplul 2: Furnizarea pentru animale de companie

Acest pachet de aspect este conceput pentru proprietarii de afaceri pentru furnizarea de animale de companie. Iată câteva puncte care fac eficiența secțiunii sale de eroi:

1. O rubrică clară: aprovizionarea cu animale de companie și abonamentele lunare de cutii comunică ceea ce face compania, făcând rubrica simplă și de înțeles.
2. Direct CTA: Shop Online este un CTA concis care încurajează vizitatorii să -și achiziționeze produsele.
3. Imagine relevantă din punct de vedere vizual: imaginea principală a eroului arată mâncarea pentru animale de companie, consolidând natura afacerii. De asemenea, adaugă un pop de culoare pentru a atrage ochiul utilizatorului.
4. Design curat: aspectul este neclintit, modern și simplu. Fundalul alb și textul îndrăzneț oferă un contrast bun și lizibilitate.

Exemplul 3: Apa non-profit

În acest exemplu, eroul prezintă o afacere non-profit a apei. Deși simplu, eroul este eficient pentru că:

1. Are un brand clar: numele de afaceri și însoțirea taglinei comunică misiunea organizației.
2. Este atrăgătoare vizual: imaginea de fundal mare a oceanului creează un vizual puternic și se conectează imediat la tema apei.
3. Un CTA clar: butonul Make A Donation este proeminent, iar utilizatorii folosesc text orientat către acțiune pentru a încuraja implicarea.
4. Utilizarea statisticilor: evidențierea banilor strânși oferă dovezi ale impactului carității și creează încredere în brand.
5. Un aspect armonios: stilul blocului de culori prezintă informațiile într -o manieră structurată și plăcută din punct de vedere estetic, cu secțiuni clare pentru diferite aspecte ale carității.

Exemplul 4: Realty

În pachetul de aspect real pentru Divi, eroul folosește sistemul de grilă Divi pentru a adăuga patru coloane eroului. Este eficient din câteva motive:

1. Titlu concis: Găsiți -vă casa de vis cu apeluri Divi la publicul țintă și prezintă valoare.
2. Vizualizări puternice: imaginea de fundal monocromatică contrastează frumos cu CTA verde, făcându -l să iasă în evidență.
3. CLA -uri clare: Secțiunea Hero are patru CTA -uri puternice pentru utilizatori pentru a se angaja cu site -ul web.
4. Design modern: designul minimalist și schema de culori întunecate creează un aspect sofisticat și modern.

Aceste exemple demonstrează versatilitatea unui bun design al secțiunii eroi. Posibilitățile sunt nesfârșite, de la elegante și moderne la convingătoare și informative din punct de vedere vizual. Acum, haideți să ne adaptăm în ceea ce face din Divi instrumentul ideal pentru personalizarea și crearea secțiunii Perfect Hero.

De ce Divi este o alegere excelentă pentru proiectarea unei secțiuni de eroi

Divi este un schimbător de jocuri când vine vorba de construirea de site-uri web, inclusiv crearea de secțiuni de eroi. Divi oferă un constructor de pagini drag-and-drop, constructorul vizual, astfel încât să puteți vedea exact cum va arăta site-ul dvs. web pe măsură ce îl construiți.

Tema este încărcată cu peste 200 de module de design, oferindu -vă opțiuni nelimitate pentru construirea de secțiuni de eroi uimitoare și pagini web. Cu Tema Builder, puteți personaliza fiecare parte a site -ului dvs., de la antetul site -ului dvs. la șabloane de pagină, creând un aspect cu adevărat unic.

Divi are o bibliotecă masivă de peste 2600 de machete proiectate profesional dacă aveți nevoie de inspirație. Fiecare aspect include o secțiune Hero bine lucrată pe care o puteți regla cu ușurință pentru a se potrivi perfect cu marca dvs. Așadar, indiferent dacă sunteți un profesionist de design sau un începător complet, Divi are tot ce aveți nevoie pentru a crea o secțiune Hero care să iasă în evidență.

În plus față de mii de machete, Divi oferă o altă modalitate ușoară de a construi un site web complet: Site -uri rapide Divi. Puteți crea un site web complet în mai puțin de două minute folosind un site de pornire sau AI generativ, datorită integrării cu asistentul de design de la Divi, Divi AI. Toate site -urile de pornire și generate vin cu toate paginile de bază, șabloane de constructor de teme, stiluri globale și toate setările WordPress configurate pentru dvs.

Site -urile Quick Divi este o modalitate excelentă de a -ți curge creativitatea și de a construi rapid un site web. Puteți personaliza cu ușurință stilurile globale (fonturi și culori) pentru a se potrivi perfect cu marca dvs. Nici nu ești blocat cu aspectul. Modelele pot fi modificate, cu toate acestea doriți să vă faceți propriul dvs. În plus, puteți construi cât mai multe site -uri web (și secțiuni Hero), după cum doriți pentru prețul scăzut de 89 de dolari pe an .

Obțineți divi

Cum să proiectați o secțiune de erou cu Divi

Proiectarea unei secțiuni de erou cu Divi poate fi realizată în câteva feluri. Puteți crea unul de la zero, puteți importa un aspect pre-fabricat sau puteți genera o secțiune cu Divi AI. Pentru această postare, vom începe cu unul dintre aspectele pre-făcute ale Divi și vom modifica designul pentru a se potrivi cu brandul nostru.

Alegeți un pachet de aspect

Creați o nouă pagină pe site -ul dvs. WordPress, instalați DIVI și selectați Alegeți un aspect premad atunci când noua pagină se încarcă. În continuare, faceți clic pe Parcurgeți machete pentru a vizualiza selecția machetei pre-fabricate.

Divi vă permite să căutați sau să filtrați prin categorii pentru a găsi aspectul pe care doriți să îl adăugați. Există peste o duzină de categorii din care să alegeți, astfel încât să găsiți una care să se potrivească nevoilor dvs. va fi ușoară. Pentru această postare, vom selecta pachetul de layout Realty (Exemplul #4 de mai sus) și îl vom modifica pentru o firmă de avocatură.

Faceți clic pe pachet și selectați aspectul paginii de destinație . Faceți clic pe butonul Utilizați acest aspect pentru a instala pachetul.

O casetă de dialog vă întreabă dacă doriți să importați presetările de proiectare. Presetările divi sunt una dintre cele mai bune caracteristici ale temei, permițându -vă să salvați și să reutilizați stilurile de design pe site -ul dvs. web. Din acest motiv, vă încurajăm să păstrați bifarea căsuței. Apoi faceți clic pe import pentru a continua.

Faceți modificări de proiectare la secțiunea Hero

Acum că ați instalat aspectul, putem lucra la modificarea eroului nostru pentru a se potrivi cu brandul nostru. Vom începe schimbând imaginea de fundal a eroului nostru. Faceți clic pe pictograma Setări pentru a aduce setările secțiunii.

Faceți clic pe meniul derulant de fundal și selectați fila Imagine de fundal.

Eliminați imaginea de fundal existentă trecând peste zona de imagine și făcând clic pe pictograma gunoiului .

Adăugați o nouă imagine de fundal făcând clic pe butonul Adăugare imagine de fundal din zona de imagine. Alegeți orice imagine pe care doriți, dar asigurați -vă că are o lățime de 1920px , astfel încât să se afișeze corect pe ecrane de desktop mai mari.

Rescrieți textul cu divi ai

Divi are propriul său asistent de design AI construit direct în constructorul vizual. Vă permite să generați o copie pe brand cu un prompt de text. Dar mai întâi, vom schimba micul rubrică în erou. Faceți clic pe pictograma Setări pentru a aduce opțiunile modulului. Schimbați textul micului rubrini în firma de avocatură de familie din Birmingham .

În continuare, vom înlocui rubrica mare în erou. De această dată, vom folosi Divi AI pentru a crea un titlu convingător pentru secțiunea noastră de eroi. Pentru a activa Divi AI, faceți clic pe butonul AI din câmpul de titlu .

Va apărea o casetă de dialog cu mai multe opțiuni. Selectați Scrieți cu AI .

Când apar setările, tipul de conținut va fi deja selectat pentru dvs. Spuneți Divi AI despre ce scrieți (în acest caz, o firmă de avocatură de familie) și selectați niciun context în domeniul contextului adăugat . Divi Ai funcționează cel mai bine atunci când înțelege ceea ce vrei bine, așa că atunci când scrii promptul tău, fii descriptiv.

În secțiunea Ghid Me , puteți alege un ton de voce, adăugați orice cuvinte cheie obligatorii, definiți lungimea conținutului și alegeți o limbă. În cele din urmă, faceți clic pe butonul Generați Text pentru a genera rubrica. Este posibil să fie nevoie de câteva încercări pentru a obține rubrica pe care o doriți, dar vestea bună este că Divi AI oferă generații nelimitate.

Adăugați un apel la acțiune

Ultimul pas pentru a finaliza secțiunea noastră de eroi este să adăugăm un apel la acțiune (CTA). În primul rând, trebuie să schimbăm conținutul în primele trei coloane. Înlocuiți pictogramele și textul în module cu conținut legat de lege. Divi are peste 800 de pictograme, astfel încât găsirea uneia pentru a se potrivi nișei dvs. este rapidă și ușoară.

În continuare, vom înlocui pictograma din a patra coloană din rândul de sub rubrică. Treceți peste modul pentru a -l elimina.

În modulul de rubrică din a patra coloană, utilizați Divi AI pentru a genera un CTA captivant. Nu uitați, ar trebui să încurajeze vizitatorii dvs. să acționeze și să se conecteze la o pagină relevantă de pe site -ul dvs.

Cum să proiectați o secțiune de erou cu divi ai

Acum că vedeți cât de ușor este să proiectați o secțiune Hero folosind un pachet de aspect Divi, să ne scufundăm în crearea unuia cu Divi AI. Am arătat cum Divi AI poate genera text, dar poate genera, de asemenea, imagini, cod, secțiuni, pagini web și site -uri web complete (mai multe despre asta mai târziu).

Generarea unui nou erou Divi

Începeți prin crearea unei noi pagini pentru site -ul dvs. Divi. În loc să începeți cu un aspect premad de data aceasta, alegeți Build de la zero atunci când constructorul vizual se încarcă.

Când constructorul vizual se încarcă, Divi vă permite automat să adăugați un rând și oferă diverse machete. Visual Builder folosește un sistem de grilă pentru a vă ajuta să vă structurați și să vă organizați conținutul în rânduri și coloane. Divi oferă mai multe machete de coloane prestabilite (două, două egale, trei coloane cu lățimi variate etc.).

Divi AI folosește același sistem de grilă pentru a genera secțiuni pentru site -ul dvs. web. Cu toate acestea, trebuie să adăugați rânduri doar atunci când intenționați să construiți un aspect de la zero. Anulați caseta de dialog Row făcând clic pe X din partea dreaptă sus a grilei.

Pentru a genera o secțiune Hero cu AI, treceți pe pagină și faceți clic pe pictograma Blue + .

Alegeți Generați secțiunea cu AI când apare caseta de dialog.

Când apare setarea Divi AI, există câteva câmpuri de completat. Cum ar fi generarea de text, Divi AI are nevoie de informații despre secțiunea pe care doriți să o creați și despre afacerea dvs. Puteți specifica, de asemenea, tipul de imagini pe care doriți să le utilizați (stoc, generat de AI sau localitate) și fonturile și culorile pe care doriți să le utilizați. După ce totul este gata, faceți clic pe butonul Generați secțiunea pentru a vă crea eroul.

Întregul proces durează câteva secunde. Odată finalizat, puteți salva stilurile dvs. pentru a fi aplicate pe fiecare secțiune sau pagină web pe care o construiți. AI va oferi o listă de imagini utilizate (inclusiv un link) dacă alegeți imagini de stoc.

Divi ai Hero Exemple

Divi AI este versatil și poate crea secțiuni de eroi frumoase și eficiente în diferite categorii. Aruncați o privire la câteva pe care le -am generat, împreună cu prompturile lor.

Creați o secțiune Hero pentru o agenție de proiectare. Ar trebui să aibă un titlu captivant, un text de susținere și un apel proeminent la acțiune.

Proiectați o secțiune de eroi pentru un restaurant de pizza. Dă -i culori vibrante, un titlu îndrăzneț și o imagine de fundal a unei pizza delicioasă.

O secțiune de eroi pentru un magazin hardware numit „Dee's Hardware”. Ar trebui să includă imagini cu instrumente, un titlu mare îndrăzneț și un apel proeminent la acțiune.

Creați o secțiune Hero pentru o firmă de arhitectură. Ar trebui să aibă un titlu îndrăzneț, cu impact, culori liniștitoare și un apel clar la acțiune.

Obțineți Divi Ai

Experimentați cel mai bun Divi pe care îl oferă cu Divi Pro

Cu Divi Pro, veți avea acces la întregul ecosistem Divi. Acest lucru înseamnă că vă puteți gestiona toate pluginurile și temele într -un singur loc, să stocați și să vă reutilizați design -urile preferate în cloud, să colaborați cu ușurință cu echipa dvs. și să obțineți asistență expertă ori de câte ori este nevoie. Divi Pro vă împuternicește cu adevărat să vă duceți site -ul la nivelul următor.

Divi Pro vine cu:

• Divi AI: Generați imagini nelimitate, text, cod, secțiuni, pagini web și site -uri web complete cu un prompt de text.
• Divi Dash: Gestionați toate pluginurile și temele, urmăriți -vă pe toți clienții și obțineți informații valoroase despre modul în care se desfășoară site -ul dvs. web - toate într -un singur tablou de bord convenabil.
• Divi Cloud: Spune la revedere fișierelor JSON dezordonate și copierii și lipirii nesfârșite! Cu doar câteva clicuri, puteți stoca și reutiliza aspectele Divi preferate în cloud.
• Echipele DIVI: Colaborați cu ușurință cu echipa dvs. și acordați -le acces la toate instrumentele Divi uimitoare pe care le dețineți.
• Divi VIP: Obțineți suport la nivel de întreprindere în mai puțin de 30 de minute sau mai puțin, 24/7, 365 de zile pe an.
• Credite Divi Marketplace: Obțineți 50 de dolari în credite pentru a explora piața Divi și pentru a găsi teme, machete și extensii uimitoare pentru a vă supraîncărca site -ul.

Cu abonamentul DIVI PRO, puteți duce experiența dvs. de construire a site-ului la nivelul următor. Este ca și cum ai avea o echipă de designeri experți, dezvoltatori și specialiști de sprijin la îndemână pentru costul scăzut de 277 dolari pe an, care este de doar 23,08 USD pe lună.

Obțineți divi

Faceți o primă impresie de durată cu Divi

O secțiune de eroi convingătoare este esențială pentru captarea atenției utilizatorului și implicarea conducerii. La urma urmei, ai o singură șansă de a face o primă impresie. Divi oferă o platformă mai mult decât capabilă pentru a crea secțiuni de eroi impactante, ceea ce o face mai rapidă și mai ușoară ca niciodată. Cu constructorul său vizual intuitiv și asistentul de design puternic, Divi AI, puteți proiecta secțiuni Hero în câteva minute. Cu Divi și Divi AI, puteți captura publicul dvs. cu primul clic.