Știind cum să adăugați un titlu de site dinamic și un slogan la un antet global Divi va fi util atunci când creați site-uri web Divi. Și există câteva motive întemeiate pentru a face acest lucru. Pe de o parte, nu toate site-urile au o siglă. Un titlu de site este un bun înlocuitor al logo-ului. Un alt motiv este să vă sporiți marca prin includerea informațiilor vitale pe site-ul dvs., unde toată lumea o 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 site-ului și sloganul 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!
Rezultat posibil
Iată o previzualizare a designului pe care îl vom construi în acest tutorial.
Rețineți titlul site-ului și sloganul din mijlocul superior al antetului, care este afișat dinamic.
Descărcare gratuită
Alăturați-vă Divi Newlsetter și vă vom trimite prin e-mail o copie a pachetului Divi Ultimate Landing Page Layout Pack, plus multe altele Resurse, sfaturi și trucuri Divi gratuite și uimitoare. Urmează-l și vei deveni Maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspecte.DOWNLOAD
Pentru a importa șablonul, accesați Divi> Generator de teme.
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.
Odată finalizat, șablonul de antet global va fi disponibil în Divi Theme Builder.
În ceea ce urmează vom trece la proiectare.
Titlul site-ului și sloganul de pe WordPress
Fiecare site WordPress are un titlu de site și un slogan. Titlul site-ului este practic numele site-ului, iar sloganul este o scurtă frază care explică de obicei ce este.
Nu este neobișnuit să adăugați titlul site-ului atunci când instalați WordPress și să-l uitați.
Și, unii oameni nici măcar nu-și dau seama că există sloganul, cu atât mai puțin să-și facă timp pentru a-l actualiza. În plus, atunci când utilizați Divi tema, titlul site-ului și sloganul nu vor fi vizibile pe site-ul dvs. în mod prestabilit, așa că este ușor să le treceți cu vederea. Cu toate acestea, titlul site-ului și sloganul sunt elemente esențiale ale site-ului ș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 utilizând personalizatorul de teme pentru a actualiza titlul site-ului sub setările generale.
Acum că știm unde se află titlul și sloganul site-ului în backendul WordPress, să explorăm cum le putem adăuga într-un antet Divi!
Cum să adăugați un titlu și un slogan de site dinamic la un antet global din Divi
Importul șablonului antet global pre-proiectat
Pentru acest tutorial, ne vom concentra asupra modului de a adăuga titlul și sloganul dinamic al site-ului la un antet existent în loc să creăm un antet complet de la zero. Vă va economisi timp și vă va îmbunătăți claritatea. Deci, pentru a începe acest design de antet, vom importa un șablon de antet global predefinit de la al patrulea pachet generator de teme .
Odată ce ai a descărcat pachetul de crearea temă , dezarhivați fișierul și găsiți fișierul JSON al șablon de site Implicit.
Apoi accesați Divi> Theme Builder.
Faceți clic pe pictograma de portabilitate din dreapta sus. În fereastra pop-up de portabilitate, alegeți fișierul JSON din șablon de site implicit și faceți clic pe butonul Import.
După ce șablonul este adăugat la generatorul de teme, ștergeți șablonul de subsol și faceți clic pentru a edita antetul general.
Adăugarea unui titlu și a unui slogan dinamic la antet
În editorul de aspect șablon, veți vedea antetul premade deja proiectat. Putem începe să ne personalizăm imediat.
Mutați logo-ul
Pentru a începe, trageți modulul de imagine care afișează sigla (dinamic) din coloana din mijlocul rândului de sus în coloana din stânga a rândului de sus.
Adăugați un modul de îndemn pentru a afișa titlul și sloganul site-ului
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 și sloganul site-ului.
Dar înainte de a începe să adăugați conținut, selectați mai întâi NU pentru a utiliza culoarea de fundal.
Adăugați un titlu dinamic al site-ului
Sub setări 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 de site dinamic
Apoi, plasați mouse-ul peste zona corpului și selectați pictograma „Utilizați conținut dinamic”. Apoi selectați „Slogan site” din listă.
Adăugați un link dinamic pentru pagina principală
Este obișnuit ca titlul site-ului să redirecționeze către pagina principală la clic, mai ales dacă înlocuiți sigla. Pentru a redirecționa întregul curs către pagina de pornire, adăugați linkul paginii de pornire ca conținut dinamic la adresa URL a link-ului cursului.
Proiectarea textului titlului și sloganul site-ului
Acum titlul și eticheta site-ului sunt afișate dinamic pe antet. Tot ce trebuie să facem acum este să adăugăm ceva stil. Nu uitați, trebuie să personalizăm textul titlului pentru a proiecta titlul site-ului și textul corpului pentru a proiecta linia de etichetă.
Salt la fila design și actualizați următoarele:
- Titlul fontului: Heebo
- Titlu Greutate font: îndrăzneț
- Titlul Stil de font: TT
- Titlu Dimensiune text: 32px (desktop), 24px (tabletă și telefon)
- Titlu Distanță dintre litere: 0.3em
- Font pentru corp: Roboto
- Stilul fontului corporal: italic
- Culoare text corp:
- Dimensiune text corp: 13px
- Spațiu litere corp: 0.1em
- Înălțimea liniei corpului: 1em
Pentru a vă ajuta la centrare, scoateți umplutura implicită sub textul corpului adăugând următoarele CSS personalizate la descrierea promoției:
căptușire-jos: 0px
Reglaje suplimentare de proiectare
Pentru această ultimă parte a tutorialului, vom face unele modificări suplimentare ale antetului pentru a ne asigura că articolele rămân centrate vertical în fiecare coloană și pentru a oferi butonului un design unic. Vom adăuga, de asemenea, o linie înainte și după gheare pe linia de etichetă (doar pentru lovituri).
Centrarea verticală a coloanelor / conținutului
În momentul de față, rândul de sus este „Equalize Heights Column” activ care folosește proprietatea flex. Putem valorifica acest lucru prin adăugarea unui mic fragment CSS pentru a ne asigura că toate coloanele rămân centrate vertical în rând. Pentru a face acest lucru, deschideți setările pentru rândul de sus și adăugați următorul CSS la elementul principal:
align-items: centru;
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șirea.
Actualizarea fundalului butonului
Apoi deschideți setarea modulului buton și actualizați fundalul cu un nou gradient de fundal, după cum urmează:
- Fundal gradient Culoare stângă: #ffffff
- Culoare gradient dreapta fundal: # 1dbf73
- Direcția gradientului: 135deg
- Poziția de pornire: 10%
- Poziția finală: 0%
Adăugarea caracterelor înainte și după slogan
Fiecare element de conținut dinamic poate fi modificat făcând clic pe pictograma roată. Pentru a adăuga caractere înainte și după slogan, deschideți setările modulului 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 vedea 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!
Ultimele gânduri
Este foarte frumos că puteți personaliza un antet general cu un titlu și un slogan dinamic al site-ului. Acest lucru pare a fi ceva care va fi util pentru multe site-uri. Îmi place, de asemenea, ideea de a include titlul site-ului și sloganul pe lângă logo-ul pentru o reprezentare și mai puternică a mărcii.
Sursa: Temă elegantă
