cum să personalizați anteturile în WordPress: Ghidul începătorului

căutați o modalitate ușoară de a personaliza antetul WordPress?

deoarece antetul dvs. se află în partea de sus a fiecărei pagini, acesta joacă un rol esențial în brandingul site-ului dvs. web, ajutând vizitatorii să navigheze și promovând cel mai important conținut.

cu toate acestea, pentru a obține cele mai multe beneficii din antetul site-ului dvs., aveți nevoie de o modalitate de a-l edita, pe care multe teme nu le oferă.

în această postare, vom împărtăși câteva tactici diferite pe care le puteți utiliza pentru a personaliza antetul în WordPress folosind atât interfețe simple de drag-and-drop, cât și propriul cod.

cea mai ușoară opțiune este să folosiți tema Astra și constructorul său de antet drag-and-drop, dar vom împărtăși și alte tactici care vor funcționa cu orice temă WordPress.

ce este antetul WordPress?

antetul WordPress este partea site-ului dvs. care apare în partea de sus a fiecărei pagini. De obicei, acesta include cel puțin două elemente la minim:

• logo-ul/identitatea Site-ului
• Meniu(e) de navigare)

de exemplu, iată cum arată antetul pe blogul Astra. Puteți vedea că Include sigla Astra, precum și două meniuri de navigare separate:

în funcție de nevoile dvs., puteți include și alte elemente, cum ar fi pictograme de socializare, o casetă de căutare, promoții, numărul dvs. de telefon și alte informații.

dacă aveți nevoie vreodată să vedeți cum funcționează, antetul WordPress este conținut în antet.fișier php în Tema WordPress.

cum să personalizați antetul WordPress cu Astra

dacă doriți un control deplin asupra antetului dvs.

veți putea vedea modificările imediat într-o previzualizare live a site-ului dvs. web și puteți adăuga cu ușurință diferite tipuri de conținut, cum ar fi butoane, pictograme sociale, o casetă de căutare și multe altele.

pentru a începe, veți dori să instalați și să activați tema Astra. De asemenea, puteți importa unul dintre sutele de site-uri demo pre-construite pentru a vă pune în funcțiune rapid. Dacă aveți nevoie de o mână de ajutor cu oricare dintre acești pași, avem o mulțime de ghiduri pentru a vă ajuta:

• cum se instalează Astra
• cum se importă site-uri de pornire

odată ce aveți site-ul dvs. de bază gata de plecare, iată cum să vă personalizați antetul folosind Astra.

1. Deschideți Astra Header Builder

pentru a începe, mergeți la aspect Personalizați-vă în tabloul de bord WordPress pentru a lansa personalizatorul WordPress nativ. Apoi, selectați opțiunea Builder antet:

după ce lansați generatorul de anteturi, veți vedea un nou set de opțiuni în care puteți controla aspectul antetului:

2. Adăugați și organizați conținutul antetului

acum pentru partea distractivă-adăugarea de conținut. Puteți vedea că aveți trei rânduri în generatorul de antet. Fiecare rând controlează conținutul pentru o altă parte a antetului:

1. deasupra antetului
2. antet primar – aici veți pune conținutul „principal”.
3. antetul de mai jos

veți dori absolut să includeți conținut în antetul principal și apoi aveți opțiunea de a adăuga conținut deasupra sau dedesubtul acestuia în funcție de nevoile dvs.

pentru a adăuga conținut, puteți face clic pe locul în care doriți să adăugați conținut. Aceasta va deschide un set de opțiuni:

• Meniu primar
• meniu secundar
• Logo
• buton
• căutare
• Social
• HTML 1
• HTML 2

rețineți că, pe măsură ce adăugați conținut, veți vedea mai puține opțiuni. De exemplu, puteți adăuga logo-ul dvs. o singură dată, astfel încât opțiunea respectivă să dispară după ce ați adăugat deja un logo în antet:

după ce ați adăugat un anumit conținut, puteți face clic pe acel conținut pentru a-i deschide setările. De exemplu, dacă adăugați un buton, veți putea controla textul și linkul butonului.

de asemenea, puteți deschide setările de proiectare pentru a personaliza lucrurile în continuare:

dacă doriți să rearanjați conținutul sau să îl mutați pe un alt rând, tot ce trebuie să faceți este să îl glisați și să îl fixați:

3. Personalizați aspectul antetului

mai sus, v-am arătat cum să personalizați elementele individuale din antetul dvs. De asemenea, aveți mai multe opțiuni pentru a vă personaliza antetul în ansamblu.

în primul rând, puteți accesa fila proiectare a constructorului principal de antete pentru a controla lățimea și spațierea antetului. De asemenea, puteți face clic pe pictograma roată pentru fiecare rând de antet pentru a-i personaliza înălțimea și designul:

4. Experimentați cu diferite tipuri de anteturi

în funcție de utilizarea versiunii gratuite a Astra sau Astra Pro, veți avea acces și la tipuri suplimentare de anteturi, cum ar fi anteturile transparente (gratuite) și anteturile lipicioase (Pro).

puteți utiliza același constructor de antet și subsol de mai sus pentru a vă proiecta antetul transparent sau lipicios. Veți vedea aceste opțiuni în secțiunea Tipuri de antet. Puteți face clic pe ele pentru a extinde setările și a proiecta acele tipuri diferite de antet:

alte trei moduri de a personaliza antetul WordPress

în timp ce constructorul antetului drag-and-drop al Astra oferă cel mai simplu mod de a personaliza antetul WordPress, există și alte tactici pe care le puteți utiliza, indiferent de tema pe care o utilizați.

iată câteva dintre cele mai bune strategii…

1. Utilizați setările personalizatorului temei

majoritatea temelor WordPress vă oferă un anumit control asupra antetului site-ului dvs. în personalizatorul WordPress nativ. Este puțin probabil să obțineți nivelul de detaliu pe care vi-l oferă Astra, dar veți obține câteva opțiuni pentru a controla modul în care antetul dvs. arată și funcționează.

aceste opțiuni vor varia în funcție de tema dvs., dar de obicei le puteți deschide făcând clic pe pictograma creion albastru de lângă elemente din antet. De exemplu, în noua temă implicită Twenty Twenty-One, puteți vedea că puteți personaliza:

• Logo
• titlul Site-ului
• Meniu

dacă aveți nevoie de ajutor suplimentar, puteți consulta documentația dezvoltatorului temei.

2. Utilizați Elementor și un Plugin de antet personalizat GRATUIT

dacă nu sunteți familiarizat cu Elementor, este un instrument vizual de proiectare drag-and-drop pe care îl puteți utiliza pentru a crea conținut pe site-ul dvs. Cu gratuit Elementor-Antet ,Subsol & blocuri șablon personalizat antet WordPress plugin, puteți utiliza versiunea gratuită a Elementor pentru a proiecta propriul antet personalizat WordPress.

acest plugin funcționează perfect cu tema Astra gratuită, precum și cu orice altă temă WordPress pe care ați putea să o utilizați.

pentru a începe, instalați și activați pluginul gratuit de la WordPress.org. de asemenea, va trebui să instalați versiunea gratuită a Elementor dacă nu ați făcut-o deja.

după ce ați făcut acest lucru, du-te la aspectul antet Footer & blocuri și faceți clic pe Adăugare nou:

dați șablonului un nume și alegeți antet sub Tip de șablon. De asemenea, puteți utiliza opțiunile Display On sau User Roles pentru a direcționa antetul dvs. către un anumit conținut/utilizatori.

apoi, publicați antetul și faceți clic pe Editare cu Elementor pentru a deschide Visual builder:

acum, vă puteți personaliza complet antetul folosind interfața vizuală drag-and-drop a Elementor. Pluginul vă oferă, de asemenea, un nou Antet ,Subsol & blochează widget-urile pe care le puteți utiliza pentru a adăuga elemente importante ale site-ului, cum ar fi logo-ul site-ului dvs. sau un meniu de navigare:

pentru a afla mai multe despre utilizarea Elementor, consultați tutorialul nostru complet Elementor sau recenzia Elementor.

3. Utilizați cod personalizat(avansat)

în cele din urmă, dacă sunteți un utilizator avansat, puteți personaliza și antetul WordPress folosind propriul cod. Pentru a face acest lucru, veți avea nevoie de cel puțin o cunoaștere funcțională a HTML, PHP și CSS, deci aceasta nu este o opțiune pentru utilizatorii non-tehnici.

dacă nu cunoașteți aceste limbi de codificare, veți dori să rămâneți la una dintre metodele anterioare din această listă.

există două părți pentru a utiliza codul pentru a personaliza antetul:

• HTML / PHP-aceasta controlează conținutul real din antetul dvs.
• CSS – aceasta controlează stilul antetului.

după cum am menționat mai devreme, conținutul antetului site-ului dvs. se află în antet.fișier php. Deci, pentru a personaliza conținutul antetului dvs., va trebui să lucrați direct cu acest fișier. Sau, unele teme, cum ar fi Astra, oferă și cârlige pe care le puteți utiliza pentru a adăuga conținut în antet.

în Ghidul Astra visual hooks, puteți vedea că aveți o serie de opțiuni pentru a personaliza antetul:

dacă doriți să editați antetul temei.fișier php direct, ar trebui să utilizați o temă copil pentru a vă asigura că nu suprascrieți modificările atunci când actualizați tema.

pe de altă parte, dacă utilizați cârlige, nu trebuie să utilizați o temă copil atâta timp cât utilizați un plugin precum Astra cârlige sau fragmente de cod. Dacă adăugați cârlige direct la funcțiile temei dvs.fișier php, ar trebui să utilizați în continuare o temă copil, deși.

cu Astra Pro, aveți, de asemenea, opțiunea de a adăuga cârlige folosind caracteristica de aspect personalizat Astra Pro lui.

lucrul elegant despre aspectele personalizate ale Astra Pro este că puteți utiliza regulile de afișare pentru a controla exact când se afișează modificările. De exemplu, puteți adăuga conținut personalizat în antetul dvs. care apare numai utilizatorilor conectați.

acesta este modul de personalizare a conținutului antetului dvs.-dar cum rămâne cu stilul?

pentru a personaliza stilul antetului, puteți edita stilul.fișier css direct dacă utilizați o temă copil. Sau, puteți utiliza zona CSS suplimentară din personalizatorul WordPress pentru a adăuga propriile stiluri personalizate în antet.

Personalizați antetul WordPress astăzi

antetul WordPress joacă un rol esențial în succesul site-ului dvs. Vă ajută să vă marcați site-ul web, să vă ghidați vizitatorii către conținutul cheie, să promovați informații importante sau profiluri sociale și multe altele.

cel mai simplu mod de a obține controlul deplin asupra antetului site-ului dvs. este să utilizați tema Astra gratuită. Cu Astra, veți avea acces la un constructor de antet vizual, drag-and-drop. Nu aveți nevoie de niciun cod sau pluginuri externe – veți obține controlul 100% al antetului dvs. chiar în interiorul personalizatorului WordPress.

în alte situații, puteți utiliza, de asemenea, setările Customizer o temă diferită, Elementor – Antet, Subsol & blocuri șablon plugin, sau propriul cod, dacă aveți cunoștințe tehnice.