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

Aveți nevoie de o imagine puternică, care atrage atenția, înainte de a adăuga o secțiune principală pe site-ul dvs. WordPress. Imaginea principală potrivită arată instantaneu vizitatorilor despre ce este site-ul dvs.

• Alegeți un instrument de design: Canva este ușor de utilizat și vine cu multe șabloane. Dacă preferați, încercați alte alternative la Canva pentru a găsi instrumentul care vă place.
• Setați dimensiunea corectă: Imaginile principale ar trebui să fie late și nu prea înalte. O dimensiune comună este de 1920×400 până la 600 de pixeli, dar verificați tema dvs. pentru cerințe exacte.
• Afișați mesajul dvs.: Alegeți o imagine care reprezintă site-ul sau marca dvs. Poate fi un produs, o fotografie sau chiar un video pe tot ecranul.
• Lăsați spațiu pentru text: Asigurați-vă că există spațiu pentru un titlu, un subtitlu sau un buton, astfel încât mesajul dvs. să fie ușor de citit.
• Obțineți inspirație: Uitați-vă la alte site-uri din domeniul dvs. pentru a vedea designuri de secțiuni principale și pentru a obține idei pentru ale dvs.
• Optimizați pentru web: Imaginile mari încetinesc site-ul dvs. Comprimați imaginea principală la sub 250KB folosind instrumente precum TinyPNG sau un plugin precum EWWW Image Optimizer.

Odată ce imaginea dvs. principală este gata și optimizată, puteți trece la adăugarea ei pe site-ul dvs. WordPress.

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. Vine cu o secțiune principală 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 cele mai bune și populare teme WordPress de pe piață.

Alternativ, puteți folosi un constructor de pagini pentru a crea o secțiune principală personalizată, chiar dacă tema dvs. nu are una încorporată, sau pentru a înlocui una existentă. Vă vom arăta cum în metoda 3.

Înainte de a face orice modificări majore, sugerăm întotdeauna să folosiți un site de testare pentru a testa temeinic noile teme. În acest fel, puteți fi sigur 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 dvs. clasică actuală? Nicio problemă. Sariți la metoda 4, unde vă vom arăta cum să adăugați o secțiune principală folosind un plugin. Această abordare funcționează cu orice temă, astfel încât să puteți crea o imagine principală 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)

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ă Personalizatorul de teme lipsește în tabloul dvs. de bord, atunci 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.

Puteți alege între un glisor pe ecran complet, un videoclip, o imagine sau nicio antet.

Pentru acest tutorial, vom selecta un slider pe tot ecranul pentru secțiunea erou de pe pagina principală și de pe întregul site web. Această opțiune este excelentă dacă doriți să prezentați mai multe imagini, text și butoane în secțiunea erou. Dacă preferați să utilizați o singură imagine, ați alege în schimb opțiunea „Imagine”.

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ă vă personalizați culorile și tipografia designului. Cu toate acestea, modificările pe care le faceți se vor aplica, de obicei, întregului site web, nu doar secțiunii dvs. principale, 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 blocuri, atunci ați putea folosi blocul Cover din Editorul Complet al Site-ului pentru a crea cu ușurință o imagine principală î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 faceți acest lucru, poate fi necesar să ajustați blocurile existente în acea locație. Adesea, veți dori să adăugați un nou bloc Grup chiar deasupra blocurilor existente pentru a face loc secțiunii erou.

Î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 Grup aici, deoarece acesta vă va permite să gestionați imaginea principală, 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. Aici puteți, opțional, adăuga un efect parallax imaginii dvs. („Fundal fix”) sau puteți utiliza 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.

Nu ezitați să personalizați alte setări, cum ar fi marginea și umbra, spațierea blocurilor, padding-ul și marginile, tipografia și așa mai departe.

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

Acum suntem pregătiți să adăugăm mai multe elemente imaginii erou. Este posibil să vedeți un text de tip placeholder precum „Scrieți titlul” deja în interiorul blocului Copertă.

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.

Nu ezitați 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 configurării site-ului dvs. web. Sau, doriți să creați o pagină de destinație personalizată fără a fi limitați de limitările temei dvs. În acest caz, vă recomandăm să utilizați un constructor de pagini care vine cu șabloane cu secțiuni principale, 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 de editare WordPress încorporate, care depășesc capacitățile implicite ale personalizatorului de teme sau ale editorului standard de blocuri (Gutenberg/Editor Complet de Site).

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 modificările, vizualiza straturile paginii dvs. și previzualiza site-ul dvs. 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ă doriți să schimbați culoarea de fundal suprapusă, faceți clic 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 particule” și adăuga un fundal animat cu particule imaginii dvs. Acest lucru poate face secțiunea dvs. principală mult mai impresionantă și unică.

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

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ă vedeți acum o fereastră pop-up unde puteți scrie conținutul dvs. 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ă genereze.

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 liber familia de fonturi, spațierea între linii, spațierea între litere ș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. pentru a se potrivi 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ă instalați pluginul Hero Banner Ultimate. Pentru instrucțiuni pas cu pas, puteți consulta ghidul nostru despre cum să instalați 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, de asemenea, să personalizați aspectul butonului folosind câmpul „Buton – Clasa 1”, unde puteți adăuga o clasă CSS pentru stilizare personalizată.

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. principală a fost creată și pluginul v-a generat un shortcode pentru a o 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. pe partea frontală. Apoi, faceți clic dreapta pe secțiunea antetului dvs. și selectați „Inspectați.”

Î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 Code Snippets » + Add Snippet, selectați „Add Your Custom Code (New Snippet)” și faceți clic pe butonul „+ Add Custom Snippet”.

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 precum SeedProd și blocul WordPress implicit 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ă comprimați imaginea înainte de a o încărca. Acest lucru asigură că se încarcă rapid pentru vizitatorii cu conexiuni mobile 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 principală î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 experte ale celor mai bune instrumente pentru crearea și vânzarea de produse digitale.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.