Cum să adăugați un titlu și un slogan dinamic la un antet global Divi

Știind cum să adăugați un titlu și un slogan dinamic la un antet global Divi va fi util atunci când creați site-uri web Divi. Și există câteva motive întemeiate pentru care cineva ar face asta. În primul rând, nu fiecare site are o siglă. Un titlu de site este un bun înlocuitor al logo-ului. Un alt motiv este să vă sporiți marca, incluzând informații vitale despre site-ul dvs., unde toată lumea îl va vedea.

În acest tutorial, vă vom arăta cum să adăugați un titlu și un slogan dinamic la un antet global Divi. Această soluție va extrage dinamic titlul și sloganul site-ului din backend-ul WordPress. În plus, veți avea toate opțiunile de design puternice ale Divi pentru a personaliza titlul și sloganul după cum doriți!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Observați titlul site-ului și sloganul din mijlocul superior al antetului, care este afișat dinamic.

Descărcați GRATUIT șablonul antet global al titlului site-ului și al sloganului Divi Global

Pentru a pune mâna pe șablonul global de antet din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa șablonul, navigați la Divi> Theme Builder.

Faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, șablonul de antet global va fi disponibil în Divi Theme Builder.

Să trecem la tutorial, nu-i așa?

Titlul site-ului și sloganul în WordPress

Fiecare site WordPress are un titlu și un slogan. Titlul site-ului este în esență numele site-ului, iar sloganul este o frază scurtă care explică de obicei despre ce este site-ul.

Nu este neobișnuit să adăugați titlul site-ului atunci când instalați WordPress și să uitați de el.

Și, unii oameni nici măcar nu își dau seama că sloganul există, cu atât mai puțin își iau timp pentru ao actualiza. Mai mult, atunci când utilizați tema Divi, titlul și sloganul site-ului nu vor fi vizibile în mod implicit pe site-ul dvs., deci este ușor de ignorat. Cu toate acestea, atât titlul site-ului, cât și sloganul sunt elemente vitale ale site-ului web și vor fi recunoscute de motoarele de căutare.

Puteți localiza și actualiza titlul și sloganul site-ului în WordPress oricând accesând tabloul de bord WordPress și navigând la Setări> General.

Sau, puteți lua un alt traseu folosind personalizatorul temei pentru a actualiza titlul site-ului în setările generale.

Acum, că știm unde există titlul și sloganul site-ului pe backend-ul WordPress, să explorăm cum le putem adăuga la un antet Divi!

Cum să adăugați un titlu și un slogan dinamic la un antet global din Divi

Importul șablonului de antet global Premade

Pentru acest tutorial, ne vom concentra pe cum să adăugăm titlul și sloganul dinamic al site-ului la un antet existent în loc să construim un antet complet de la zero. Acest lucru vă va ajuta să economisiți timp și să îmbunătățiți claritatea. Deci, pentru a începe acest design de antet, vom importa un șablon de antet global prefabricat din pachetul nostru al patrulea tema Builder.

După ce descărcați pachetul de generare a temelor, dezarhivați fișierul și găsiți fișierul JSON șablon de site implicit.

Apoi navigați la Divi> Theme Builder.

Faceți clic pe pictograma de portabilitate din partea dreaptă sus. În fereastra pop-up de portabilitate, alegeți fișierul JSON șablon de site implicit și faceți clic pe butonul de import.

După ce șablonul a fost adăugat la generatorul de teme, ștergeți șablonul de subsol și faceți clic pentru a edita antetul global.

Adăugarea titlului și sloganului dinamic al site-ului la antet

În editorul de aspect șablon, veți vedea antetul premade deja proiectat. Putem începe să ne personalizăm imediat.

Mutați sigla

Pentru a începe, trageți modulul de imagine care afișează sigla (dinamic) din coloana din mijloc în rândul de sus până în coloana din stânga din rândul de sus.

Adăugați un modul Call to Action pentru a afișa titlul site-ului și sloganul

Apoi adăugați un nou modul Apel la acțiune în coloana din mijlocul rândului de sus (unde era logo-ul).

Vom folosi modulul Apel la acțiune pentru a afișa titlul site-ului și sloganul.

Dar, înainte de a începe să adăugăm conținut, selectați mai întâi NU pentru a utiliza culoarea de fundal.

Adăugați un titlu de site dinamic

Sub setările de conținut, treceți cu mouse-ul peste caseta de introducere a titlului și faceți clic pe pictograma „Utilizați conținut dinamic”. Apoi selectați „Titlu site” din listă.

Adăugați un slogan dinamic al site-ului

Apoi, plasați cursorul peste zona corpului și selectați pictograma „Utilizați conținut dinamic”. Apoi selectați „Site Tagline” din listă.

Adăugați un link dinamic pentru pagina principală

Este obișnuit ca titlul site-ului să redirecționeze către pagina de pornire la clic, mai ales dacă înlocuiți sigla. Pentru a face întregul modul să redirecționeze către pagina de pornire, adăugați linkul paginii de pornire ca conținut dinamic la adresa URL a modulului de conectare.

Titlul site-ului și designul textului sloganului

Acum titlul site-ului și sloganul sunt afișate în mod dinamic în antet. Tot ce trebuie să facem acum este să adăugăm ceva stil. Amintiți-vă, trebuie să personalizăm textul titlului pentru a proiecta titlul site-ului și textul corpului pentru a proiecta sloganul.

Treceți la fila de proiectare și actualizați următoarele:

• Titlu Font: Heebo
• Greutatea fontului titlului: Bold
• Titlu Stil Font: TT
• Dimensiune text titlu: 32 px (desktop), 24 px (tabletă și telefon)
• Spațiere litere titlu: 0.3em
• Font corp: Roboto
• Stilul fontului corpului: cursiv
• Culoarea textului corpului:
• Dimensiunea textului corpului: 13 px
• Spațierea literelor corporale: 0,1em
• Înălțimea liniei corpului: 1em

Pentru a ajuta la centrare, eliminați umplutura implicită sub textul corpului adăugând următorul CSS personalizat la Descrierea promoției:

padding-bottom: 0px

Ajustări suplimentare de proiectare

Pentru această ultimă parte a tutorialului, vom face câteva ajustări suplimentare de design la antet pentru a ne asigura că elementele rămân centrate vertical în fiecare coloană și pentru a da butonului un design unic. Vom adăuga, de asemenea, o linie înainte și după linie zgârcită la slogan (doar pentru lovituri).

Centrarea verticală a coloanelor / conținutului

În acest moment, rândul de sus este activul „Egalizați înălțimile coloanei”, care utilizează proprietatea flex. Putem valorifica acest lucru adăugând un mic fragment CSS pentru a ne asigura că toate coloanele rămân centrate vertical în rând. Pentru aceasta, deschideți setările pentru rândul de sus și adăugați următorul CSS la Elementul principal:

align-items: center;

Actualizarea coloanei cu butonul

Apoi, deschideți setările pentru coloana 3 din rândul de sus și scoateți culoarea de fundal și căptușeala.

Actualizarea fundalului butonului

Apoi deschideți setarea pentru modulul buton și actualizați fundalul cu un nou gradient de fundal, după cum urmează:

• Culoare stânga de fundal degradat: #ffffff
• Culoare dreaptă de fundal degradat: # 1dbf73
• Direcția gradientului: 135 grade
• Poziția inițială: 10%
• Poziție finală: 0%

Adăugarea de caractere înainte și după slogan

Fiecare element de conținut dinamic poate fi editat făcând clic pe pictograma roată. Pentru a adăuga caractere înainte și după slogan, deschideți setările pentru modulul de îndemn care conține sloganul și faceți clic pe pictograma de editare din conținutul dinamic al sloganului site-ului. Apoi adăugați caracterele la intrările înainte și după.

Rezultat final

Pentru a vizualiza rezultatul, deschideți orice pagină de pe site-ul dvs. Ar trebui să vedeți titlul și sloganul dinamic al site-ului afișat frumos!

Iată cum se stochează pe tabletă și telefon.

Gânduri finale

Este cu adevărat plăcut să puteți personaliza un antet global cu un titlu și un slogan dinamic al site-ului. Pare ceva care va fi util pentru multe site-uri. Îmi place, de asemenea, ideea de a include titlul site-ului și sloganul în plus față de sigla pentru o reprezentare a mărcii și mai puternică.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!