Cum să adăugați o imagine erou în WordPress (Funcționează pentru toate temele)

Doriți ca site-ul dvs. WordPress să arate mai profesional? O imagine de erou este cea mai bună soluție.

O imagine de erou este ceea ce oamenii văd prima dată când ajung pe site-ul dvs. Și aveți doar aproximativ 3 secunde pentru a le capta atenția, așa că este important să o faceți corect.

Construim site-uri web WordPress de peste un deceniu – și ne amintim când imaginile eroice au devenit o mare atracție.

Atunci, ne chinuiam ca toți ceilalți. Imaginile arătau ciudat – prea mari pe desktop, strivite pe mobil sau pur și simplu stricate. Dar acum am ajuns la știință.

Vă vom arăta cele mai ușoare moduri de a adăuga o imagine erou pe site-ul dvs. WordPress. Indiferent dacă vă place să folosiți page buildere sau preferați editorul de blocuri, v-am acoperit.

Primul pas: Pregătește imaginea eroului tău WordPress

Înainte de a adăuga o imagine principală pe site-ul tău WordPress, trebuie să creezi una care să atragă atenția vizitatorilor tăi. O secțiune principală excelentă începe cu o imagine uimitoare care arată despre ce este vorba pe site-ul tău.

Canva este un instrument popular pentru proiectarea graficii pentru site-uri web. Este ușor de utilizat și vine cu o mulțime de șabloane pentru a crea imaginea dvs. eroică. Dacă nu sunteți un fan Canva, avem o listă de alternative la Canva pe care le puteți consulta pentru a găsi una care funcționează pentru dvs.

Când creați imaginea principală, veți dori să țineți cont de câteva lucruri.

Mai întâi, gândește-te la dimensiune. Imaginile eroice nu sunt de obicei prea înalte și acoperă adesea întreaga lățime a paginii tale principale.

O dimensiune comună pentru imaginile de erou WordPress este de aproximativ 1920 de pixeli lățime cu 400-600 de pixeli înălțime (sau uneori mai mult). Dar acest lucru se poate schimba în funcție de tema dvs. WordPress.

Apoi, gândiți-vă ce mesaj doriți să transmiteți. Imaginea dvs. eroică ar trebui să arate rapid despre ce este site-ul dvs. web. Poate fi o imagine eroică de produs, o fotografie care vă reprezintă marca sau chiar un videoclip impresionant pe tot ecranul ca fundal.

De exemplu, am decis să-l prezentăm pe fondatorul nostru, Syed Balkhi, în imaginea principală a paginii noastre de pornire. Arată că există o persoană reală în spatele brandului nostru, dedicată ajutării utilizatorilor WordPress să reușească, ceea ce este esența WPBeginner.

De asemenea, lăsați puțin spațiu pentru text. Multe secțiuni de erou au un titlu sau un buton. Asigurați-vă că există spațiu pentru acestea și că sunt ușor de citit.

Este o idee bună să te uiți la alte site-uri din domeniul tău pentru exemple de secțiuni eroice. Acest lucru îți poate oferi idei pentru propriul design. Unele dintre intrările din exemplele noastre de site-uri WordPress pot servi ca o mare inspirație.

Acestea fiind spuse, să vedem cum să adăugăm efectiv imaginea principală.

Cum să adăugați o imagine eroică WordPress

Când am cercetat pentru acest tutorial, am realizat rapid că adăugarea unei imagini eroice la temele clasice WordPress nu este întotdeauna simplă. Procesul poate varia foarte mult în funcție de tema dvs., deoarece unele au secțiuni eroice încorporate, în timp ce altele nu.

Luați, de exemplu, tema Sydney. Aceasta vine cu o secțiune eroică gata de utilizare, ceea ce face lucrurile mult mai ușoare.

Dacă încercați să adăugați un erou pe site-ul dvs. existent, dar tema dvs. nu are o funcție încorporată pentru aceasta, atunci acest lucru poate fi frustrant.

Pentru cei care abia încep și nu au nicio problemă să aleagă o temă nouă, recomandăm trecerea la una cu o secțiune principală încorporată, deoarece acest lucru vă poate economisi timp pe termen lung.

Dacă căutați recomandări de teme, atunci puteți consulta selecția noastră de experți a celor mai bune și mai populare teme WordPress de pe piață. Mai bine, ați putea folosi un constructor de pagini cu o temă care are o secțiune de erou, ceea ce vă vom arăta cum să faceți în metoda 3.

Înainte de a face modificări majore, vă sugerăm întotdeauna să folosiți un site de staging pentru a testa temeinic noile teme. Astfel, puteți fi siguri că faceți alegerea corectă pentru site-ul dvs.

Dacă nu sunteți sigur cum să faceți acest lucru, consultați ghidul nostru despre cum să schimbați corect o temă WordPress.

Mulțumit de tema clasică actuală? Nicio problemă. Sariți la metoda 4, unde vă vom arăta cum să adăugați o secțiune de tip hero folosind un plugin. Această abordare funcționează cu orice temă, astfel încât să puteți crea o imagine de tip hero uimitoare fără a vă suprascrie întregul design al site-ului.

Puteți utiliza linkurile rapide de mai jos pentru a sări la metoda preferată:

• Metoda 1: Utilizarea personalizatorului de temă (doar teme clasice)
• Method 2: Using Full Site Editor (Block Themes Only)
  • Pasul 1: Deschideți Editorul Complet al Site-ului
  • Pasul 2: Adaugă blocul de acoperire pe pagina/șablonul tău
  • Pasul 3: Configurați imaginea în blocul de copertă
  • Pasul 4: Adăugați Blocuri la Blocul de Copertă
• Method 3: Using a Page Builder (Custom Landing Pages/Themes)
  • Pasul 1: Configurați SeedProd
  • Pasul 2: Personalizați secțiunea principală
  • Pasul 3: Adăugați și personalizați mai multe blocuri în secțiunea dvs. Hero
• Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
  • Pasul 1: Configurați pluginul Hero Banner
  • Pasul 2: Găsiți selectorul CSS al secțiunii antetului temei dvs.
  • Pasul 3: Adăugați shortcode-ul dvs. în WPCode
• Întrebări frecvente despre imaginile de erou

Metoda 1: Utilizarea personalizatorului de temă (doar teme clasice)

Dacă utilizați o temă clasică care are o secțiune de tip „hero” precum Sydney, puteți personaliza imaginea de tip „hero” prin intermediul personalizatorului de temă. Pur și simplu accesați Aspect » Personalizare în tabloul de bord WordPress pentru a începe.

💡 Notă rapidă: Dacă Theme Customizer lipsește din tabloul de bord, probabil folosiți o temă bloc și ar trebui să săriți la metoda 2.

Bara laterală ar trebui să aibă mai multe opțiuni pentru a vă personaliza tema clasică.

În Sydney, setarea pentru personalizarea secțiunii dvs. hero se numește „Zonă Hero”, dar acest meniu specific va varia în funcție de temă. Continuați și faceți clic pe el.

Tema Sydney are 3 meniuri pentru a crea secțiunea dvs. de tip hero: Tip Hero, Slider Hero și Media Hero.

Vom folosi doar primele două, deoarece sunt suficiente pentru a adăuga o secțiune de erou în scopul nostru.

Mai întâi, selectați „Tip erou”.

În Tip Hero, vi se va cere să alegeți ce tip de media veți adăuga la secțiunea dvs. de tip hero.

Poți alege între un slider pe tot ecranul, un videoclip, o imagine sau nicio antet.

Vom selecta un slider pe tot ecranul pentru secțiunea principală de pe pagina noastră de pornire și pentru întregul nostru site web. Motivul este că ne permite să creăm un slider cu mai multe imagini pentru secțiunea principală și să adăugăm text și un buton deasupra imaginilor.

Acum, reveniți la meniul Zona Erou și selectați „Slider Erou”.

Aici, deschideți fila „Prima diapozitivă” și faceți clic pe butonul „Selectați imaginea”.

Aceasta va deschide biblioteca media WordPress, unde puteți încărca o imagine nouă sau selecta una existentă pentru secțiunea dvs. principală.

Odată ce ați încărcat o imagine, puteți derula în jos și înlocui textul din câmpurile titlu și subtitlu.

Ar trebui să vedeți modificările pe care le faceți reflectate automat în previzualizarea paginii.

Dacă dorești să adaugi mai mult de o imagine la secțiunea eroului, poți repeta aceiași pași cu restul diapozitivelor.

Altfel, puteți derula în jos la meniul „Buton glisor”.

Aici, puteți schimba URL-ul și textul pentru butonul de apel la acțiune.

După aceea, derulați din nou în jos la fila „Setări glisor”.

Aici puteți ajusta viteza glisorului, puteți alege să afișați același text pe toate diapozitivele și puteți face ca comportamentul glisorului să fie receptiv.

Dacă doriți să schimbați culoarea butonului, reveniți la meniul principal al Personalizatorului de temă.

Apoi, faceți clic pe „General”.

Ar trebui să vedeți acum mai multe meniuri pentru a personaliza setările generale ale temei dvs.

Aici, pur și simplu faceți clic pe „Butoane”.

Acum, puteți derula în jos la secțiunile „Stare implicită” și „Stare la trecere cu mouse-ul”, unde puteți schimba culoarea butonului în funcție de starea sa.

Pentru a modifica culoarea, pur și simplu faceți clic pe instrumentul de selectare a culorii și alegeți o nouă culoare.

Majoritatea temelor WordPress vă permit, de asemenea, să personalizați culorile și tipografia designului dvs. Cu toate acestea, modificările pe care le faceți se vor aplica, de obicei, întregului dvs. site web, nu doar secțiunii de prezentare, așa că țineți cont de acest lucru.

În orice caz, iată cum arată imaginea noastră principală, realizată cu tema Sydney:

Metoda 2: Utilizarea Editorului complet al site-ului (doar pentru temele cu blocuri)

Dacă utilizați o temă de bloc, atunci ați putea folosi blocul Cover din Editorul complet al site-ului pentru a crea cu ușurință o imagine de erou în WordPress. Nu este necesar niciun plugin.

Pasul 1: Deschideți Editorul Complet al Site-ului

Mai întâi, accesați Aspect » Editor în administratorul dvs. WordPress.

Acum, veți vedea meniurile principale ale editorului.

Să spunem că doriți să adăugați imaginea dvs. de tip „hero” doar pe pagina de pornire.

În acest caz, pur și simplu faceți clic pe previzualizarea temei din partea dreaptă a paginii.

Dacă doriți să adăugați imaginea principală pe o altă pagină, un șablon de pagină personalizat sau un model de bloc, atunci puteți citi ghidul nostru despre editarea completă a site-ului WordPress pentru mai multe informații.

Pasul 2: Adaugă blocul de acoperire pe pagina/șablonul tău

Deoarece secțiunea de erou este de obicei plasată deasupra liniei de plutire (partea de sus a paginii dvs. care apare atunci când vizitatorii ajung pe site), atunci trebuie să vă asigurați că sunteți în locația corectă. Secțiunea de erou este, de obicei, chiar sub antet.

Odată ce ați făcut acest lucru, trebuie fie să ștergeți blocurile existente în acea locație, fie să adăugați un nou bloc Grup chiar deasupra acelor blocuri existente.

În cazul nostru, vom elimina pur și simplu blocurile care erau deja pe pagina noastră de pornire. Dacă doriți să faceți același lucru, puteți face clic pe butonul „Vizualizare listă” din partea stângă a paginii.

Apoi, găsește blocul (blocuri) pe care trebuie să-l ștergi pentru a face loc secțiunii tale de erou. După ce l-ai localizat, pur și simplu dă clic pe butonul cu trei puncte și selectează „Șterge”.

Acum, selectați blocul care era chiar sub blocurile pe care tocmai le-ați șters.

Apoi, faceți clic pe butonul cu trei puncte și alegeți „Adăugați înainte”. Aceasta va adăuga un bloc chiar deasupra acelui bloc și sub secțiunea antetului.

În această etapă, puteți face clic pe butonul „+” care apare în secțiunea presupusă a eroului.

Trebuie să adăugați un bloc de Grup aici, deoarece acest lucru vă va permite să gestionați imaginea eroică, textul, butonul și alte elemente ca un singur bloc atunci când este necesar.

Acum puteți selecta un container pentru a adăuga blocurile dvs.

Pentru demonstrație, am ales containerul de bază Group.

Apoi, pur și simplu faceți clic pe butonul „+” din interiorul blocului Grup.

Aici, continuați și selectați blocul „Copertă”.

După aceea, veți vedea 3 opțiuni pentru a adăuga imaginea de fundal a eroului: încărcând-o de pe computer, adăugând-o din biblioteca media sau folosind imaginea dvs. de prezentare.

În exemplul nostru, vom face clic pe „Biblioteca media” și vom selecta o imagine existentă.

Dacă încărcarea imaginii este reușită, atunci vei vedea imaginea eroului tău imediat. Cu toate acestea, există unele ajustări pe care trebuie să le faci.

Pasul 3: Configurați imaginea în blocul de copertă

Mai întâi, selectați blocul „Copertă” în sine, astfel încât bara sa de instrumente să apară deasupra sa.

Apoi, faceți clic pe butonul „Aliniere” și alegeți „Lățime completă”.

Apoi, puteți face clic pe pictograma duotone pentru a schimba filtrul duotone aplicat imaginii dvs.

Dacă nu sunteți un fan, îl puteți dezactiva mai târziu, ceea ce vă vom arăta cum să faceți.

După aceea, puteți face clic pe pictograma poziției conținutului pentru a schimba unde vor apărea textul și butonul dvs. pe imagine.

Am decis să mergem pe partea stângă-centru, deoarece punctul focal al imaginii este în dreapta.

Acum, faceți clic pe pictograma „Setări” și comutați la fila „Bloc”.

Aici, derulați în jos la Setări. Acesta este locul unde puteți opțional adăuga un efect parallax la imaginea dvs. („Fundal fix”) sau puteți folosi un fundal repetat.

Poți, de asemenea, să derulezi înapoi în sus și să comuți la pictograma stilurilor.

Aici puteți seta opacitatea suprapunerii la 0, astfel încât imaginea dvs. să nu folosească niciun filtru.

Dacă doriți să schimbați înălțimea imaginii, atunci puteți introduce un număr în pixeli în câmpul „Înălțime minimă a copertei”.

Am decis să setăm imaginea noastră la 400 de pixeli.

Simțiți-vă liber să personalizați alte setări precum bordura și umbra, spațierea blocurilor, padding și margin, tipografia și așa mai departe.

Pasul 4: Adăugați Blocuri la Blocul de Copertă

Acum suntem gata să adăugăm mai multe elemente imaginii dvs. de erou. Ar trebui să vedeți textul „Scrieți titlul” deasupra imaginii.

Un sfat profesionist: În loc să adăugați direct un antet, faceți clic pe butonul „+” și adăugați mai întâi un alt bloc Grup. Gândiți-vă la acest bloc Grup ca la un container pentru textul și butonul dvs.

Plasarea lor într-un container face mult mai ușor controlul alinierii și stilizării lor împreună ca o singură unitate.

Apoi, alegeți containerul dorit, la fel ca în pasul anterior.

Odată ce ați făcut acest lucru, puteți face clic din nou pe butonul „+” pentru a adăuga un bloc de Titlu.

Acum, puteți insera titlul paginii dvs.

Simțiți-vă liber să schimbați culoarea textului, dimensiunea și dimensiunile în bara laterală a setărilor blocului, dacă preferați.

După ce ați făcut acest lucru, puteți apăsa tasta „Enter”.

În această etapă, nu ezitați să adăugați un subtitlu chiar sub titlu.

În final, puteți adăuga un buton de apel la acțiune la imaginea principală.

Pentru a face acest lucru, apăsați din nou tasta „Enter”, faceți clic pe butonul „+” și selectați blocul „Butoane”.

Apoi, pur și simplu inserați textul butonului.

Și pentru a adăuga un link la buton, pur și simplu faceți clic pe pictograma de link din bara de instrumente și introduceți URL-ul dvs. în câmpul corespunzător.

Apoi, faceți clic pe butonul cu săgeată.

Dacă aveți nevoie de sfaturi și trucuri pentru a crea butoane cu conversie ridicată, puteți consulta ghidul nostru despre cele mai bune practici pentru apeluri la acțiune.

Și cam atât. Puteți adăuga mai multe elemente la imaginea dvs. erou sau o puteți personaliza conform preferințelor dvs.

Odată ce sunteți mulțumit de aspectul secțiunii de prezentare, pur și simplu faceți clic pe „Salvare”.

Iată cum arată blocul nostru de Copertă:

Metoda 3: Utilizarea unui Page Builder (Pagini de destinație/Teme personalizate)

Să spunem că sunteți abia la începutul procesului de configurare a site-ului dvs. web. Sau, doriți să creați o pagină de destinație personalizată fără a fi constrânși de limitările temei dvs. În acest caz, recomandăm utilizarea unui constructor de pagini care vine cu șabloane cu secțiuni de erou, cum ar fi SeedProd.

SeedProd este un constructor de pagini drag-and-drop pe care l-am folosit adesea pentru a crea pagini personalizate pentru WPBeginner și alte site-uri ale brandurilor noastre, inclusiv Duplicator și OptinMonster.

Deși ușor de utilizat, oferă, de asemenea, o mulțime de funcționalități încorporate de editare WordPress pe care Personalizatorul de temă, Editorul complet al site-ului și Gutenberg nu le au în mod implicit.

Din acest motiv, am reușit să economisim timp și bani la instalarea de pluginuri terțe doar pentru a adăuga funcționalități speciale temelor sau paginilor noastre de destinație.

SeedProd vine într-o versiune gratuită și una plătită. Puteți folosi cu siguranță versiunea gratuită pentru a crea o pagină de destinație personalizată, dar opțiunile de șabloane și blocuri sunt destul de limitate. Din acest motiv, recomandăm actualizarea la un plan plătit pentru mai multe funcționalități, inclusiv generatorul de conținut AI.

Pentru mai multe informații, consultați recenzia SeedProd și comparația noastră între Elementor vs. Divi vs. SeedProd, care sunt toți constructori de pagini populari.

Pasul 1: Configurați SeedProd

Pentru a utiliza SeedProd, trebuie să instalați pluginul WordPress furnizat în contul dvs. SeedProd în zona de administrare. Odată ce pluginul este activ, vi se va cere să introduceți cheia de licență, pe care o puteți obține din pagina contului dvs. SeedProd.

După ce l-ați introdus, faceți clic pe butonul „Verificați cheia”.

Cu SeedProd, aveți 2 opțiuni: puteți adăuga o secțiune principală la o pagină de destinație sau la anumite pagini dintr-o temă personalizată.

Pentru a configura pagina de destinație sau tema, puteți citi aceste ghiduri:

• Cum să creezi o temă WordPress personalizată fără cod
• Cum să creezi o pagină de destinație în WordPress
• Cum să creezi o pagină de tip Squeeze în WordPress care convertește
• Cum să creați pagini frumoase de tip „În curând” în WordPress

Pentru restul tutorialului, vom folosi șablonul Menu Sales.

Pasul 2: Personalizați secțiunea principală

Odată ce ați ales un șablon pentru tema sau pagina dvs. de destinație, veți ajunge în editorul SeedProd.

Interfața de editare SeedProd constă dintr-o previzualizare a paginii în partea dreaptă și o bară laterală stângă unde puteți adăuga mai multe blocuri, personaliza un bloc/secțiune, anula/reveni la modificări, vizualiza straturile paginii dvs. și previzualizați site-ul pe dispozitive mobile sau tabletă.

Deoarece tema SeedProd include deja o secțiune de erou, munca noastră este deja pe jumătate gata. Ceea ce trebuie să facem este doar să înlocuim imaginea, să o personalizăm și să adăugăm mai multe blocuri la secțiunea de erou, dacă este necesar.

Alternativ, ați putea găsi mai multe designuri de secțiuni de erou comutând din bara laterală Blocuri în bara laterală Secțiuni din partea stângă. Apoi, navigați la „Erou” și faceți clic pe butonul „+” de pe șablonul secțiunii de erou pe care doriți să îl adăugați la pagina dvs.

SeedProd o va insera apoi în pagina ta.

Să schimbăm mai întâi imaginea principală.

Pentru a face acest lucru, faceți clic pe secțiunea cea mai de sus care include imaginea eroului. Veți ști că ați selectat lucrul corect atunci când o casetă mov „Editare: Secțiune” apare în bara laterală stângă.

Acum, plasați cursorul peste imaginea de fundal din bara laterală.

Apoi, apasă pe „Pictograma media”. După aceea, poți încărca imaginea principală de pe computerul tău sau din biblioteca media.

Apoi, trebuie să alegeți poziția de fundal care funcționează cel mai bine pentru imaginea dumneavoastră.

Considerăm că opțiunea „Poziție personalizată” ne oferă cel mai bun control asupra poziționării punctelor focale, așa că vom alege acea opțiune.

Opțiunea Poziție personalizată vă oferă mai multe moduri de a configura fundalul.

Pentru pozițiile X și Y, puteți schimba modul în care imaginea este poziționată vertical și orizontal.

Setarea Atașament are 2 opțiuni: Derulare (non-parallax) și Fix (parallax).

Dacă imaginea dvs. este mai mică decât secțiunea principală, dar doriți ca întreaga secțiune să fie umplută cu imaginea, atunci puteți repeta imaginea în acea secțiune. În caz contrar, alegeți „Fără repetare”.

În ceea ce privește dimensiunea imaginii principale WordPress, puteți alege opțiunea „Auto” dacă doriți ca imaginea să se ajusteze automat la secțiunea principală.

Nu ezitați să experimentați cu aceste setări pentru a vedea ce funcționează cel mai bine pentru imaginea dvs.

Un alt lucru pe care îl puteți face este să estompați imaginea de fundal, astfel încât textul dvs. să iasă mai bine în evidență.

Pentru a face acest lucru, puteți trage glisorul „Dim Background” la nivelul dorit de opacitate.

Dacă dorești să schimbi culoarea de fundal suprapusă, pur și simplu apasă pe butonul de selectare a culorii „Culoare suprapunere”.

Apoi, pur și simplu selectați culoarea preferată.

Să derulăm acum înapoi și să trecem la setările „Avansate”. Aici puteți adăuga tot felul de efecte interesante secțiunii dvs. de tip „hero”.

De exemplu, puteți deschide fila „Fundal cu particule” și adăuga un fundal animat cu particule la imaginea dvs. Acest lucru poate face secțiunea dvs. de erou mult mai impresionantă și unică.

În continuare, puteți adăuga un separator de formă personalizat în partea de sus și/sau de jos a secțiunii dvs. hero, accesând meniul „Separator de formă”.

Acest lucru poate adăuga mai mult interes vizual secțiunii dvs. principale. În plus, dacă adăugați un separator de formă distractiv în partea de jos, puteți încuraja utilizatorii să deruleze pagina dvs. de destinație și să afle mai multe despre oferta dvs.

Pasul 3: Adăugați și personalizați mai multe blocuri în secțiunea dvs. Hero

Cu imaginea dvs. eroică pregătită, să adăugăm mai multe blocuri la secțiunea eroică.

Deoarece al nostru are deja un bloc de titlu, vom face clic pe el și îl vom personaliza. Când este selectat, ar trebui să vedeți că bara laterală stângă are acum un banner portocaliu pe care scrie „Editare: Titlu”.

Lucrul grozav la SeedProd este că are un generator de conținut AI încorporat.

Deci, dacă nu sunteți sigur ce titlu să folosiți, puteți face clic pe butonul „Edit with AI” pentru a genera câteva idei.

Ar trebui să vezi acum o fereastră pop-up unde poți scrie conținutul tău cu AI.

Dorim să generăm un titlu complet nou, așa că vom face clic pe butonul „Prompt nou” pentru a face acest lucru.

Apoi, pur și simplu spuneți AI-ului ce fel de conținut doriți să creeze.

Apoi, apasă pe butonul „Generează text”.

AI-ul va genera apoi conținutul pentru dvs.

Dar îl puteți schimba în continuare prin modificarea tonului, simplificarea limbajului, scurtarea sau prelungirea textului și chiar traducerea acestuia în peste 50 de limbi.

Odată ce sunteți mulțumit de aspectul titlului, faceți clic pe „Inserare”.

Acum, puteți derula în jos bara laterală stângă.

Aici puteți schimba alinierea textului, dimensiunea fontului și eticheta antetului pentru a se potrivi preferințelor dumneavoastră.

Dacă doriți ca textul să iasă și mai mult în evidență, puteți derula înapoi și comuta la fila „Avansat”.

În meniul Stiluri, faceți clic pe „Editare” la setările de tipografie. Aici, puteți schimba în voie familia de fonturi, înălțimea rândului, spațierea literelor și majusculele textului.

Puteți, de asemenea, să coborâți puțin mai jos și să adăugați o umbră de text titlului.

Aici, am decis să creăm o umbră personalizată pentru a face textul să iasă și mai mult în evidență.

Pentru a adăuga o subtitrare sub titlu, atunci puteți face clic pe butonul „Blocuri” din bara laterală stângă.

Acest lucru vă va duce la biblioteca de blocuri.

Acum, pur și simplu trageți și plasați blocul „Text” chiar sub titlu.

Setările pentru blocul Text sunt destul de similare cu cele ale blocului Headline, deci puteți repeta aceiași pași ca înainte pentru a crea sub-titlul.

Pentru a adăuga un buton de apel la acțiune, trebuie să trageți și să plasați blocul „Buton” pe pagină.

De obicei, este plasat chiar sub subtitlu.

Cu asta făcut, continuați și introduceți textul butonului dvs. în câmpul corespunzător.

Puteți adăuga, de asemenea, un subtitlu chiar sub textul principal al butonului pentru mai mult context.

Apoi, derulați în jos și adăugați un link la butonul dvs.

Simțiți-vă liber să schimbați și alinierea și dimensiunea butonului.

Acum, reveniți în sus pe bara laterală și comutați la fila „Șabloane”.

Aici puteți schimba stilul butonului dvs. astfel încât să se potrivească mai bine cu designul dvs. WordPress.

Dacă nu vă plac modelele implicite ale șabloanelor, atunci comutați la fila „Avansat”.

Aici puteți schimba tipografia butonului, stilul, culoarea, spațierea, efectul de umbră și așa mai departe.

Simte-te liber să continui personalizarea șablonului tău până când arată bine.

Când sunteți mulțumit, pur și simplu faceți clic pe butonul „Salvare” din partea de sus și selectați „Publicare” pentru a face pagina live.

Și asta e tot pentru adăugarea unei imagini erou cu un constructor de pagini.

Iată cum arată secțiunea de tip „hero” pe site-ul nostru demo:

Metoda 4: Utilizarea pluginului Hero Banner + Shortcode (Toate temele)

Această metodă finală funcționează tehnic cu toate temele, dar o recomandăm cel mai mult persoanelor care folosesc o temă clasică fără o secțiune erou încorporată.

Pentru a urma această metodă, va trebui să instalezi plugin-ul Hero Banner Ultimate. Pentru instrucțiuni pas cu pas, poți consulta ghidul nostru despre cum să instalezi un plugin WordPress pentru începători.

Pasul 1: Configurați pluginul Hero Banner

Odată ce pluginul este activ, accesați Hero Banner » Add Hero Banner.

După aceea, dați un titlu bannerului dvs. principal. Acesta va acționa ca titlul dvs.

Odată terminat, inserați text în editorul vizual clasic care va funcționa ca subtitlu. Nu ezitați să schimbați formatarea și culoarea aici.

Acum, derulați în jos la secțiunea „Banner Erou – Setări”.

Aici puteți alege un aspect pentru banner. Deși nu puteți previzualiza aspectul în timp real în setările pluginului, este ușor să comutați între ele mai târziu pe pagina dvs. reală pentru a găsi cel care vă place cel mai mult.

Vom alege Layout 1 pentru tutorialul nostru.

În ceea ce privește Tipul de Banner, puteți selecta „Imagine de fundal” pentru o imagine principală, dar puteți alege și „Video de fundal” dacă aveți un videoclip pe lățime completă pe care să îl utilizați ca principal.

Apoi, nu uitați să faceți clic pe „Upload Image” pentru a adăuga imaginea dvs. din computer sau din biblioteca media.

În această etapă, puteți seta dimensiunea imaginii de fundal la „Acoperire” (Cover) astfel încât imaginea să fie pe lățimea completă.

De asemenea, veți dori să alegeți „Scroll” pentru atașamentul imaginii de fundal pentru a dezactiva orice efect parallax.

Coborâți până ajungeți la Setarea culorii bannerului.

Aici puteți schimba culoarea titlului (Culoare titlu) și a subtitlului (Culoare conținut). Pur și simplu faceți clic pe instrumentul de selectare a culorii pentru a face acest lucru.

În plus, este posibil să doriți să adăugați o culoare de suprapunere peste imagine, ceea ce poate fi util pentru a ajusta lizibilitatea textului în raport cu imaginea.

Am decis să mergem pe culoarea neagră, cu o opacitate de 0,5.

Să configurăm setările de apel la acțiune.

Aici puteți insera textul și linkul pentru butonul dvs. Puteți schimba, de asemenea, culoarea în „Buton – Clasa 1”.

Tot ce trebuie să faci în continuare este să derulezi înapoi.

După aceea, faceți clic pe „Publicați”.

Să mergem acum la Hero Banner » Hero Banner. Ar trebui să vedeți acum că imaginea dvs. de erou a fost creată și pluginul a generat un shortcode pentru a-l afișa.

Notați acest shortcode, deoarece vom avea nevoie de el mai târziu.

Pasul 2: Găsiți selectorul CSS al secțiunii antetului temei dvs.

Pentru a afișa imaginea principală, trebuie să găsim un „adresa” specifică pentru secțiunea antetului temei dvs.

Acesta se numește selector CSS și îi spune pluginului nostru exact unde să plaseze imaginea erou. Nu vă faceți griji, nu va trebui să scrieți niciun cod singur.

Pentru a face acest lucru, vizitați site-ul dvs. web pe partea frontală. Apoi, faceți clic dreapta pe secțiunea antetului și selectați „Inspect.”

În partea dreaptă, trebuie să găsiți ce selector CSS folosește secțiunea antetului. Puteți plasa cursorul peste toate acele fragmente de cod până când vedeți că secțiunea antetului este evidențiată pe partea frontală.

Iată un exemplu:

Dacă întreaga secțiune a antetului este evidențiată în timp ce treceți cu mouse-ul peste cod, sunteți pe drumul cel bun.

Acum, faceți clic dreapta pe acel fragment de cod și selectați Copiere » Copiere selector.

După ce faci asta, poți fie să copiezi selectorul undeva în siguranță, cum ar fi un editor de text, fie să păstrezi acest tab deschis.

Pasul 3: Adăugați shortcode-ul dvs. în WPCode

Următorul pas este să instalați WPCode, care este un plugin pentru fragmente de cod.

Tehnic, nu aveți nevoie să folosiți un plugin pentru a insera fragmente de cod personalizate în fișierele temei dvs. Dar am vrut să facem acest lucru pentru a menține lucrurile în siguranță, deoarece lipirea codului într-un fișier de temă poate prezenta unele erori neașteptate.

Am constatat că WPCode este de mare ajutor pentru gestionarea fragmentelor de cod personalizate fără a vă defecta site-ul.

Mai întâi, instalați pluginul WordPress în zona dvs. de administrare. Odată ce pluginul este activ, navigați la Snippete de cod » + Adăugați Snippet, selectați „Adăugați codul dvs. personalizat (Snippet nou)” și faceți clic pe butonul „+ Adăugați Snippet personalizat”.

Acum, să dăm un nume noului dvs. fragment de cod. Poate fi ceva simplu, cum ar fi „Shortcode pentru banner eroic”.

După aceea, schimbați Tipul de cod în „Fragment PHP”.

În caseta de previzualizare a codului, lipiți următorul fragment:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

Asigurați-vă că schimbați [hbupro_banner id="XXX"] cu propriul dvs. scurt cod Banner Erou pe care l-ați văzut mai devreme.

Apoi, derulați în jos la secțiunea „Inserare”.

Aici, Metoda de inserare ar trebui să fie „Inserare automată”, iar Locația ar trebui să fie „După elementul HTML”.

Apoi, lipiți selectorul pe care l-ați copiat anterior în câmpul „Selector CSS”. În cazul nostru, a fost #masthead, dar acest lucru va varia în funcție de temă.

Cu asta gata, puteți comuta butonul „Inactiv” pentru ca acesta să devină „Activ” și să faceți clic pe butonul „Salvați fragmentul”.

Și asta e tot!

Dacă vizualizați site-ul dvs., ar trebui să vedeți acum imaginea Banner Erou chiar sub antetul dvs.:

Întrebări frecvente despre imaginile de erou

Iată o listă cu câteva întrebări comune pe care cititorii noștri le pun frecvent despre imaginile eroice:

Care este cea mai bună dimensiune pentru o imagine erou WordPress?

Un punct de plecare excelent pentru dimensiunea imaginii de erou este 1920 pixeli lățime cu 400 până la 600 pixeli înălțime. Acest lucru asigură că arată clar pe majoritatea ecranelor desktop, fără a ocupa prea mult spațiu vertical.

Cu toate acestea, dimensiunea perfectă depinde adesea de tema dvs. specifică WordPress. Vă recomandăm întotdeauna să testați cum arată imaginea dvs. atât pe dispozitive desktop, cât și pe cele mobile.

Pot folosi un videoclip în secțiunea mea de erou?

Absolut. Utilizarea unui fundal video poate face ca site-ul dvs. să pară mai dinamic și să capteze imediat atenția vizitatorilor. Majoritatea constructorilor de pagini, cum ar fi SeedProd și blocul implicit WordPress Cover, includ opțiuni simple pentru adăugarea unui fundal video în locul unei imagini statice.

Cum fac imaginea mea principală să fie optimizată pentru mobil?

Temele moderne și constructorii de pagini sunt concepuți pentru a fi responsivi, astfel încât vor scala automat imaginea dvs. eroică pentru ecrane mai mici. Cheia este să alegeți o imagine care arată bine chiar și atunci când este decupată.

Este, de asemenea, foarte important să vă comprimați imaginea înainte de a o încărca. Acest lucru asigură că se încarcă rapid pentru vizitatorii cu conexiuni mobile mai lente.

Este o imagine eroică la fel ca un slider?

Sunt similare, dar nu exact la fel. O imagine eroică este, de obicei, o singură imagine mare, de tip banner, în partea de sus a unei pagini web. Pe de altă parte, un slider rotește mai multe imagini sau videoclipuri. Puteți folosi un slider în secțiunea dvs. eroică, așa cum am arătat în metoda pentru temele clasice.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați o imagine hero în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să adăugați o animație de preîncărcare în WordPress și selecțiile noastre de experți ale celor mai bune instrumente pentru crearea și vânzarea de produse digitale.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.