Site-ul dvs. arată suficient de atrăgător pentru vizitatori? Sau este doar un site web normal printre milioane de altele! Doriți ca site-ul dvs. să iasă în evidență din mulțime? Vrei ca fiecare pagină a site-ului tău să arate distinct, cu un aspect diferit? Și dacă v-aș spune că cheia soluției pentru toate aceste probleme se află în mâinile dumneavoastră? Și această cheie este – Custom Header!!! Da, ați citit bine. Haideți să vedem cum…

Un header este cel mai important element vizual al site-ului dumneavoastră care ocupă poziția cea mai de sus. Este primul lucru pe care îl vede un vizitator ori de câte ori ajunge pe site-ul tău. Antetul site-ului dvs. reprezintă identitatea site-ului dvs. web care rămâne aceeași pe toate paginile site-ului. Îl puteți folosi pentru a cerne un impact bun și de lungă durată în mintea vizitatorilor. Puteți ieși în evidență și puteți câștiga încrederea utilizatorului prin crearea unor anteturi personalizate remarcabile care se autoportretizează. Un antet personalizat în WordPress este o funcție care vă permite să personalizați imaginea antetului împreună cu adăugarea de text, widget etc. la acesta. De asemenea, puteți ajusta aceste elemente în funcție de nevoile dvs. pentru a prezenta cea mai bună imagine a site-ului dvs. web. Aici, la Templatetoaster website builder software, verificați cum să creați antet personalizat cu WordPress theme builder.

WordPress Custom Header: De ce aveți de fapt nevoie de unul?

În antetul este unul dintre cele mai importante elemente ale site-ului dvs. web. Este un gest care transmite multe despre site-ul tău. De obicei, acesta conține o imagine sau un videoclip pentru a capta atenția vizitatorului. Potrivit grupului Nielsen Norman, un vizitator rămâne doar 10-20 de secunde pe site-ul dumneavoastră. Deci, antetul trebuie să fie atrăgător pentru a-i interesa.

Un antet personalizat în WordPress vă oferă mai mult control și flexibilitate. Puteți roti, redimensiona sau tăia o imagine de antet, pe lângă repoziționarea logo-ului, a textului sau a widget-urilor. Îl puteți proiecta pentru a contrasta cu aspectul site-ului dvs. web. Trebuie să îl folosiți ca o propunere pentru publicul țintă. Încercați să citați sloganul dvs. în antetul personalizat în WordPress. Deoarece este posibil să nu aveți a doua șansă de a face prima impresie bună. Un antet bine structurat ar trebui să răspundă de ce sunteți unic, ce este tot ceea ce are site-ul dvs. etc.

Așa că, un antet personalizat este important deoarece funcționează ca o față a site-ului dvs. web. Acesta ar trebui să fie capabil să comunice publicului esența și starea de spirit a site-ului dvs. Puteți avea un antet personalizat WordPress diferit pentru fiecare pagină. De exemplu, puteți adăuga caracteristici ale produsului dvs. în antetul pentru pagina Despre noi și restul paginilor fără caracteristici. Poate face minuni !!

Cum să adăugați un antet personalizat în WordPress?

Temele WordPress implicite vă permit să folosiți anteturi personalizate. Puteți să vă puneți propriile imagini de antet personalizate în funcție de preferințele dumneavoastră. Setarea unei imagini de antet personalizate WordPress necesită câteva eforturi. Practic, implică doi pași pentru a adăuga un antet personalizat la temele implicite WordPress, după cum urmează

1. Originea și editarea imaginii

În primul rând, selectați o imagine atrăgătoare. Aceasta ar trebui să fie simplă și unică. Puteți obține o mulțime de imagini gratuite pe internet. Pentru mai multe detalii, puteți citi despre 16 site-uri web pentru a obține imagini gratuite. Odată ce ați obținut sursa imaginii de antet, nu vă rămâne decât să o editați.

Puteți folosi unele dintre instrumentele utile de editare de pe desktop sau instrumente gratuite de editare bazate pe web. Puteți întineri imaginea aleasă cu GIMP, paint.net etc. GIMP este un software gratuit și open source de editare a imaginilor. Acesta vă oferă multe instrumente sofisticate pentru a da o notă specială imaginii dumneavoastră. În timp ce paint.net facilitează instrumentele de editare a imaginilor pe Windows. Obțineți imaginea personalizată a antetului WordPress.

2. Încărcați antetul personalizat

Pentru a încărca imaginea antetului, conectați-vă la tabloul de bord WordPress. Din panoul din stânga, navigați la Appearance → Header.

Se va deschide un panou Header Media în partea stângă a ecranului. Mergeți la Header Image (Imagine antet) și faceți clic pe butonul Add New Image (Adaugă imagine nouă).

Se va deschide galeria de imagini pentru a alege imaginea. De asemenea, puteți răsfoi imaginea dvs. personalizată aici. Selectați imaginea, tăiați-o dacă este necesar. Setați-o ca imagine de antet personalizată. Ați terminat.

Cum se personalizează antetul în WordPress?

După ce ați încărcat imaginea de antet personalizată a temei WordPress, o puteți edita pentru a aplica video, text, widget-uri, pictograme sociale etc. Puteți utiliza orice temă implicită WordPress. Aici, veți obține un cod de exemplu pentru a edita antetul personalizat în tema Twenty Seventeen.

1. Adăugați o zonă de text la antet

Cu tema implicită, puteți modifica doar titlul site-ului web. Dar pentru a adăuga o zonă de text, trebuie să scrieți un cod în fișierul header-image.php. Veți adăuga următorul cod pentru a obține o zonă de text în antet

După adăugarea acestui cod, veți vedea o zonă de text separată în antet, așa cum se arată mai jos

2. Adăugați pictograme sociale

Pentru a adăuga pictograme sociale în antet, veți adăuga următorul cod în site-branding.php după clasa wrap.

De asemenea, trebuie să dați CSS dacă doriți să stilizați icoanele sociale în stilul dvs. unic.

Vă va da rezultatele cerute așa cum se arată

3. Adăugați un widget la header

Dacă doriți niște widgeturi pentru a prezenta site-ul dvs. web, veți defini o funcție în fișierul function.php. Puteți adăuga acest cod la sfârșitul fișierului.

După ce ați făcut acest lucru, veți adăuga acest cod HTML în fișierul header-image.php pentru a afișa widgetul specific în frontend.

Acum, vă veți muta la Appearance → Widgets. De aici, puteți adăuga orice widget la Poziția de antet personalizată. De exemplu, widgetul Search (Căutare) este adăugat prin simpla glisare a acestuia în poziția Custom Header (Antet personalizat).

În antetul rezultat va arăta oarecum așa

4. Repoziționați logo-ul

Puteți adăuga un logo la opțiunile implicite ale WordPress. Navigați la Appearance → Header → Header Media → secțiunea Logo. Aici, setați un logo făcând clic pe opțiunea Select Logo.

Dar, pentru a-l repoziționa, trebuie să scrieți CSS suplimentar. În tema Twenty Seventeen, veți obține în mod implicit un logo în poziția din stânga jos, așa cum se arată mai jos

Aici, veți vedea un exemplu de CSS pentru a adăuga logo-ul în poziția centrală. În mod similar, îl puteți seta oriunde în antet.

.custom-logo-link {padding-right: 2em;position: absolute;left: 500px;top: 0px;}

5. Adăugați un videoclip în antet

În cele din urmă, puteți, de asemenea, să adăugați un videoclip în antetul WordPress. Din fericire, nu este nevoie să adăugați cod pentru acest lucru. WordPress vă oferă o opțiune implicită pentru a adăuga un videoclip sau o imagine de fundal.

Pentru a adăuga un videoclip în antet, navigați la Appearance → Header → Header Media → Header Video. Aici, veți face clic pe butonul Select Video, așa cum se arată mai jos. Apoi, puteți răsfoi videoclipul pe care îl doriți în antet de pe computerul dvs. Alternativ, puteți, de asemenea, să dați URL-ul videoclipului dacă acesta este online. Pur și simplu publicați-l.

Video-ul dvs. de antet va arăta astfel

În mod similar, puteți adăuga o imagine de antet de fundal selectând orice imagine de antet din secțiunea Header Media.

Puteți avea un antet personalizat WordPress diferit pentru fiecare pagină, să zicem unele cu o imagine de fundal, altele cu video sau Widget-uri etc. Totul depinde de alegerea și creativitatea dumneavoastră.

Cum să creați un antet personalizat în WordPress de la zero cu TemplateToaster?

Ar trebui să aveți cunoștințe bune de PHP, HTML, CSS pentru a lucra cu fișiere șablon. Dacă sunteți un începător și nu știți cum să scrieți cod, vă puteți baza pe TemplateToaster WordPress Theme Builder. Nu aveți nevoie de codificare pentru a crea un șablon de antet personalizat WordPress. Doar câteva clicuri pentru interfața drag & drop și sunteți gata cu antetul dvs. personalizat. Să vedem cum să adăugăm antet personalizat la WordPress cu TemplateToaster

În primul rând, descărcați și instalați constructorul de site-uri TemplateToaster. După ce l-ați instalat cu succes, veți obține ecranul de selectare a CMS, așa cum se arată mai jos. Selectați WordPress aici

Apoi, veți obține următorul ecran pentru a crea un șablon de la zero sau pentru a folosi un șablon de probă. Veți selecta Start from Scratch și veți face clic pe Modify.

Apoi, veți fi redirecționat către interfața principală a software-ului de unde puteți începe să vă proiectați antetul personalizat.

1. Full-Width Custom Header

Voi obține ecranul interfeței principale a software-ului, așa cum se arată mai jos. De aici, puteți seta un antet pe toată lățimea. Mergeți la Header → Width → Full Width.

2. Repoziționarea logo-ului

Din fila Header, faceți clic pe opțiunea Logo. Se va deschide o galerie de pictograme de logo. Puteți selecta o imagine de logo din biblioteca de mostre sau puteți răsfoi propria dvs. imagine personalizată. Se va seta logo-ul.

Când faceți dublu clic pe imaginea logo-ului, se va deschide o filă Format, așa cum se arată mai jos. De aici, puteți da un link către imaginea logo-ului sau puteți seta poziția acestuia. Puteți repoziționa dând poziții personalizate în stânga și în partea de sus sau puteți selecta o scurtătură de poziție. De exemplu, aici este selectată o poziție verticală-centrală pentru logo.

3. Adăugarea imaginii de fundal

Vă veți selecta opțiunea Background din fila Header pentru a seta o imagine de fundal a antetului. Se va deschide o galerie de imagini. De asemenea, puteți răsfoi propria imagine de antet personalizată din opțiunea More Images (Mai multe imagini).

În mod similar, puteți adăuga o imagine de prim-plan în antet făcând clic pe opțiunea Image (Imagine) din fila Header (Antet).

4. Adăugarea unei zone de text în antet

Dacă doriți să afișați sloganul și informații relevante în antet, puteți utiliza o zonă de text. În zona de text, puteți adăuga text simplu, buton, listă etc. Faceți clic pe opțiunea Text Areas (Zone de text).

Adaugați conținut și stilizați-l prin dublu clic. Deoarece un dublu clic va deschide o filă Editor pentru a edita conținutul.

5. Adăugarea unui widget în antet

Puteți adăuga o zonă de widget în antet cu un singur clic. Mergeți la fila Widget Areas și faceți clic pe opțiunea Widget Areas → Header. De asemenea, puteți seta tipografia pentru acest widget și îl puteți repoziționa oriunde în antet doar prin tragere. Puteți să-i adăugați conținut după export.

6. Adăugați pictograme sociale în antet

Adaugați pictograme de social media în antet este foarte simplu. Din fila Header, faceți clic pe opțiunea Social Icons. Se va deschide o galerie de pictograme sociale pentru a selecta o imagine în funcție de nevoile dumneavoastră. Puteți, de asemenea, să răsfoiți pictograma dvs. personalizată aici.

Toate pictogramele social media sunt disponibile aici. Puteți păstra pictogramele în funcție de cerințele dumneavoastră. Puneți pictograme de social media pe Facebook, Twitter și Google + aici.

7. Adăugarea de videoclipuri în antet

Pentru a adăuga un videoclip, faceți clic pe opțiunea Add Video. De aici, puteți încărca cu ușurință un videoclip de fundal pentru antet.

Cuvinte finale

Până acum, ați învățat despre cum să creați un antet personalizat în WordPress. Acesta va schimba cu siguranță perspectiva site-ului dvs. web. Soluția pentru care optați este în întregime alegerea dumneavoastră. Sperăm că v-a plăcut postarea. Dacă aveți întrebări, puteți posta în secțiunea de comentarii de mai jos.

Lectură conexă: Tutorial WordPress 101

Cei mai buni furnizori de găzduire WordPress

Cum se verifică versiunea WordPress

Cum se găsește url-ul de logare WordPress

Cum se instalează WordPress

Ce este o temă WordPress care

Cum să schimbăm limba WordPress

Cum să creăm o pagină de logare personalizată WordPress

Cum să creăm o temă WordPress de la zero

Cum să reparăm actualizarea paginii WordPress care nu funcționează

.