Treci la conținutul principal

Cum să adăugați un titlu și un slogan dinamic al site-ului într-un antet Global Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Ș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.

Șablon de antet global pentru titlul site-ului dinamic 6

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

Exemplu de modificare a titlului Divi

Descărcare gratuită

Alăturați-vă Divi Newlsetter și vă vom trimite prin e-mail o copie a pachetului de planificare a paginii de destinație Ultimate Divi, împreună cu o mulțime de alte resurse, sfaturi și trucuri Divi gratuite și uimitoare. Urmați-l și veți fi un 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.

Alegeți un șablon divi

Odată finalizat, șablonul de antet global va fi disponibil în Divi Theme Builder.

Modificați antetul Divi global

Î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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Personalizați titlul divi

Și, unii oameni nici măcar nu își dau seama că sloganul există, darămite să-și ia timp să îl actualizeze. În plus, atunci când utilizați tema Divi, titlul site-ului și sloganul nu vor fi vizibile în mod implicit pe site-ul dvs., deci este ușor să le ignorați. Cu toate acestea, titlul site-ului și sloganul sunt părți 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.

Personalizați identitatea wordpress

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ă , decuplați fișierul și localizați fișierul JSON pentru șablonul implicit.

Apoi accesați 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 Import.

Import model Divi

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

Eliminați șablonul din subsol

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.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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).

Personalizați îndemnul la acțiune

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.

Configurați acțiuni de îndemn

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 slogan pentru site-ul divi

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.

Adăugați un link către pagina principală

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
Personalizați fontul titlului divi

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
Adăugați cod civi divi personalizat

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.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Personalizați butonul de contact divi

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%
Personalizați fundalul butonului divi

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ă.

Afișați sloganul divi

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!

Rezultatul final divi

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ă

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Inapoi in top