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

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

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

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.

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.

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ă

Cum să creați o tranziție fără sudură cu efecte de defilare pe Divi

Cum să creați o tranziție fără sudură cu efecte de defilare pe Divi

Când vă proiectați pagina de servicii, doriți să vă asigurați că vizitatorii dvs. observă toate serviciile diferite pe care le oferiți. În multe cazuri, acesta va fi doar un serviciu specific pe care îl caută, dar dacă oferiți o modalitate simplificată în structura de servicii, vizitatorii dvs. sunt mai susceptibili să le trateze pe toate. 

În acest tutorial, vă vom arăta cum să fiți creativi cu efectele de defilare ale Divi și să creați o tranziție de serviciu fără probleme. De asemenea, puteți descărca gratuit fișierul JSON!

Să mergem.

Rezultat posibil

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.

Tranziție între secțiunea divi

1, recreați structura elementelor

Adăugați secțiunea # 1

spaţierea

Începeți prin adăugarea unei noi secțiuni la pagina la care lucrați. Deschideți setările secțiunii și modificați valorile de umplere pe diferite dimensiuni ale ecranului.

  • Înveliș superior: 80px (desktop și tabletă), 0px (telefon)
  • Garnitura de jos: 80px
Secțiunea parametrului Divi

Adăugați o linie nouă

Structura coloanei

Continuați să adăugați un nou rând utilizând următoarea structură a coloanei:

dimensionarea

Fără a adăuga mai multe module, deschideți parametrii liniei și aplicați următoarele modificări parametrilor de dimensionare:

  • Utilizați o lățime personalizată de jgheab: Da
  • Lățimea jgheabului: 1
  • Lățime: 90%
  • Lățime maximă: 1580px
Configurarea distanțării Divi

spaţierea

Apoi adăugați o marjă personalizată de sus și de jos.

  • Marja superioară: 200px
  • Marja de jos: 200px
Configurarea distanțierii liniei

Adăugați un modul text la coloana 1

Adăugați conținut H2

Este timpul să adăugați module, începând cu un modul text în coloana 1. Introduceți orice conținut H2 doriți.

Serviciile noastre oferite de experții momentului

Setări text H2

Accesați fila de proiectare a modulului și modificați setările de text H2 după cum urmează:

  • Titlul 2 Poliție: trimestrial
  • Antetul 2 Dimensiunea textului: 80px (desktop), 50px (tabletă), 40px (telefon)
  • Înălțimea liniei 2 a capului: 1.2em
Șef divi poliție

spaţierea

Apoi adăugați o marjă mai mică pe tabletă și telefon.

  • Marja de jos: 50 pixeli (numai tabletă și telefon)
Configurare spațiere text Divi

Adăugați un modul text la coloana 2

Adăugați conținut

Să trecem la a doua coloană. Acolo, primul modul de care avem nevoie este un modul text cu un conținut de descriere.

Casetă text conținut divi

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

  • Font text: cabin
  • Stilul fontului text: cu majuscule
  • Culoarea textului: # 000000
  • Dimensiunea textului: 18px (desktop), 15px (tabletă), 13px (telefon)
  • Spațiu scrisori text: 3px (desktop), 1px (tabletă și telefon)
  • Înălțimea liniei de text: 3em
Parametru text Divi

Adăugați un modul de separare la coloana 2

vizibilitate

Următorul și ultimul modul de care avem nevoie în această coloană este un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.

  • Afișare separator: Da
Separator vizibil

Ligne

Apoi schimbați linia culorii modulului.

  • Culoarea liniei: # 000000
Fundal de culoare divizor

dimensionarea

Apoi faceți unele modificări la parametrii de dimensionare.

  • Greutatea separatorului: 3px
  • Lățime: 28%
Dimensiunea separatorului Divi

spaţierea

Adăugăm și o marjă de sus.

  • Marja superioară: 10px
Distanțarea modulului separator Divi

Adăugați secțiunea # 2

spaţierea

Să trecem la următoarea secțiune obișnuită. Eliminați umplutura superioară implicită din secțiune.

  • Garnitură superioară: 0px
Secțiunea 2 distanțare divi

revarsarile

De asemenea, ascundeți revărsările.

  • Debord de orizontală: ascuns
  • Debord vertical: ascuns
Ascundeți revărsările modulului divi

Adăugați o linie nouă

Structura coloanei

Continuați să adăugați un prim rând folosind următoarea structură a coloanei:

Alegeți un aspect divi

dimensionarea

Fără a adăuga mai multe module, deschideți parametrii liniei, accesați parametrii de dimensionare și efectuați următoarele modificări:

  • Utilizați o lățime personalizată de jgheab: Da
  • Lățimea jgheabului: 1
  • Egalizați înălțimile coloanei: Da
  • Lățime: 90%
  • Lățime maximă: 1580px
Secțiunea divi de configurare a jgheabului

spaţierea

Apoi, eliminați toate captuseala implicită superioară și inferioară.

  • Garnitură superioară: 0px
  • Garnitura de jos: 0px
Setările de spațiere a modulului Divi 1 linie

Setări pentru coloana 1

Culoare de fundal

Apoi deschideți setările pentru coloana 1 și schimbați culoarea de fundal.

  • Culoare fundal: # f7f7f7
Configurare de fundal modul linie Divi

spaţierea

Completați setările coloanei adăugând valori de umplere personalizate pe diferite dimensiuni de ecran.

  • Căptușeală superioară: 200px (birou), 100px (tabletă și telefon)
  • Garnitură de jos: 200px (birou), 100px (tabletă și telefon)
  • Căptușire stânga: 8%
  • Căptușire dreapta: 8%
Setările coloanei modulului rând

Setări pentru coloana 2

spaţierea

Continuați deschizând setările din coloana 2. Accesați fila avansată și adăugați valori de umplere personalizate pe diferite dimensiuni de ecran.

  • Căptușeală de top: 100px (desktop), 50px (tabletă și telefon)
  • Garnitura de jos: 200px
  • Căptușire stânga: 150 px (birou), 0 px (tabletă și telefon)
Setări de spațiere a modulului Divi

Adăugați un modul de separare la coloana 1

vizibilitate

În prima coloană, primul modul de care avem nevoie este un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.

  • Afișare separator: Da
Afișați separatorul divi 1

Ligne

Apoi schimbați linia culorii modulului.

  • Culoarea liniei: # 000000
Setări separator Divi

dimensionarea

De asemenea, modificați parametrii de dimensionare.

  • Greutatea separatorului: 3px
  • Lățime: 50%
Dimensiunea separatorului Divi

Adăugați un modul text la coloana 1

Adăugați conținut H3

Următorul modul de care avem nevoie în coloana 1 este un modul text cu conținut H3.

Setarea secțiunii de conținut Divi

Setări text H3

Treceți la fila de proiectare a modulului și modificați setările de text H3:

  • Titlul 3 Poliție: trimestrial
  • Culoarea textului articolului 3: # 000000
  • Articol 3 Dimensiunea textului: 50px (desktop), 40px (tabletă), 35px (telefon)
  • Înălțimea liniei 3 a capului: 1.1em

Adăugați un modul text la coloana 2

Adăugați conținut

În a doua coloană, primul modul de care avem nevoie este un modul text cu un anumit conținut de descriere.

Setarea modulului text Divi

Setări text

Modificați setările textului modulului după cum urmează:

  • Font text: cabin
  • Stilul fontului text: cu majuscule
  • Dimensiunea textului: 18px (desktop), 15px (tabletă), 13px (telefon)
  • Spațiu scrisori text: 3px (desktop), 1px (tabletă și telefon)
  • Înălțimea liniei de text: 3em
Reglarea fontului pentru matrița textului Divi

Adăugați un modul de buton la coloana 2

Adăugați o copie

Următorul și ultimul modul de care avem nevoie este un modul buton. Introduceți o copie la alegere.

Setarea conținutului modulului text

Setări buton

Apoi stilează butonul.

  • Utilizați stiluri personalizate pentru buton: Da
  • Dimensiunea butonului: 20 pixeli
  • Culoarea textului butonului: #ffffff
  • Culoarea fundalului butonului: # 000000
  • Lățimea marginii butonului: 0px
Setarea stilului butonului Divi
  • Font pentru butoane: trimestrial
  • Greutatea fontului pentru buton: bold
Setările culorii butonului Divi

spaţierea

Adăugați, de asemenea, umplutură personalizată.

  • Garnitură superioară: 50px
  • Garnitura de jos: 50px
  • Plăcuță stângă: 100px
  • Căptușire dreapta: 100px
Setări de spațiere a butonului modulului Divi

Poziţie

Și repuneți butonul în consecință:

  • Poziție: Absolut
  • Locație: stânga jos
Reglarea poziției modulului butonului Divi

Clonați linia de câte ori este necesar

După ce ați completat întreaga linie și toate modulele sale, puteți clona întreaga linie de trei ori.

Clonează modulul divi

Schimbă tot conținutul

Asigurați-vă că editați tot conținutul în linii duplicate.

Editați conținutul secțiunii Divi

2. Aplicați efecte de derulare

Efecte de derulare a primului rând

Mișcare orizontală

După ce ați completat toate liniile din secțiunea dvs., este timpul să adăugați efectele de derulare. Deschideți primul rând al secțiunii și adăugați mișcare orizontală.

  • Activați mișcarea orizontală: Da
  • Start offset: -5
  • Offset mediu: 0 (la 26%)
  • Decalaj final: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Aplicați efecte de defilare divi

Estompează și iese

De asemenea, utilizați un efect de estompare de intrare și de ieșire.

  • Activați decolorarea și intrarea: Da
  • Opacitate inițială: 100%
  • Opacitate medie: 100% (la 50%)
  • Opacitatea finală: 0% (până la 53%)
  • Efect de declanșare a mișcării: mijlocul elementului
Configurați secțiunea de animație fade animation

Efecte de derulare a rândului de mijloc

Mișcare verticală

Apoi, vom adăuga efecte de derulare la toate liniile dintre prima și ultima linie a secțiunii. Folosiți mai întâi o mișcare verticală:

  • Activați mișcarea verticală: Da
  • Start offset: -4
  • Offset mediu: 0 (la 26%)
  • Decalaj final: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Configurație aniativă defilare Divi

Estompează și iese

De asemenea, activați un efect de intrare și de estompare.

  • Activați decolorarea și intrarea: Da
  • Opacitate inițială: 0%
  • Opacitate medie: 100% (de la 27% la 50%)
  • Decalaj final: 0 (la 53%)
  • Efect de declanșare a mișcării: mijlocul elementului
Animație de estompare a liniei Divi

Efecte de derulare a ultimei linii

Mișcare verticală

Apoi deschideți ultima linie a secțiunii și adăugați următoarea mișcare verticală:

  • Activați mișcarea verticală: Da
  • Start offset: -4
  • Offset mediu: 0 (la 26%)
  • Decalaj final: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Modul de linie divi cu defilare de animație

Estompează și iese

Cu un efect de estompare de intrare și de ieșire și ați terminat!

  • Activați decolorarea și intrarea: Da
  • Opacitate inițială: 0%
  • Opacitate medie: 100% (de la 27% la 50%)
  • Opacitatea finală: 100% (până la 53%)
  • Efect de declanșare a mișcării: mijlocul elementului
Setări de animație pentru aspectul modulului Divi line

Rezultat final

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Demo final

Ultimele gânduri

În acest articol, v-am arătat cum să creați o tranziție de serviciu frumoasă cu efectele de derulare ale Divi. Chiar înainte ca un serviciu să dispară, celălalt începe să apară, oferind o tranziție plăcută plăcută ochiului. Această abordare vă va ajuta să evidențiați fiecare serviciu la nivel individual. De asemenea, puteți descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Cum se creează un carusel care face scroll cu un membru al echipei cu Divi

Cum se creează un carusel care face scroll cu un membru al echipei cu Divi

Când vă creați pagina Despre, probabil că veți dori să prezentați și membrii echipei. Procedând astfel, le permiteți vizitatorilor să interacționeze cu oamenii din spatele afacerii dvs. Dacă sunteți în căutarea unei modalități de a înveseli secțiunea membrilor echipei din pergament, acest tutorial poate fi pentru dvs. Vom crea un carusel de membru al echipei care se deplasează automat, care se deplasează pe măsură ce vizitatorii dvs. parcurg pagina. 

Demonstrație

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.

Derulați membru al echipei divi

Începutul concepției

Adăugați o secțiune nouă

spaţierea

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați. Deschideți setările secțiunii și adăugați umplutură personalizată pe diferite dimensiuni de ecran.

  • Căptușeală superioară: 200px (birou), 100px (tabletă și telefon)
  • Garnitură de jos: 200px (birou), 100px (tabletă și telefon)
Configurarea parametrilor

revarsarile

Pentru a ne asigura că nu apare nicio bară de defilare orizontală în designul nostru, vom ascunde deversările de secțiuni în fila avansată.

  • Debord de orizontală: ascuns
  • Debord vertical: ascuns
Configurare overflow

Adăugați linia # 1

Structura coloanei

Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:

Alegeți aspectul divi

dimensionarea

Fără a adăuga încă module, deschideți setările rândurilor, treceți la fila de proiectare și modificați lățimea și lățimea maximă în setările de dimensionare.

  • Lățime: 90%
  • Lățime maximă: 1580px
Parametru linie Divi

spaţierea

De asemenea, adăugăm umplutură personalizată superioară și inferioară.

  • Garnitură superioară: 100px
  • Garnitura de jos: 100px
Configurarea divi a spațiului de linie

Adăugați un modul text la coloană

Adăugați conținut H2

Este timpul să adăugați module, începând cu un prim modul de text. Introduceți conținutul H2 la alegere.

Fa cunostinta cu echipa

Setări text H2

Accesați fila de proiectare a modulului și modificați setările de text H2 după cum urmează:

  • Titlul fontului 2: Quicksand
  • Titlul fontului 2: semi-îndrăzneț
  • Culoarea textului articolului 2: # 000000
  • Antetul 2 Dimensiunea textului: 70px (desktop), 50px (tabletă), 40px (telefon)
Spațiere text Divi

Adăugați un modul de separare în coloană

vizibilitate

Apoi adăugați un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.

  • Afișare separator: Da
Afișați separatorul divi

Ligne

Apoi faceți unele modificări la setările liniei.

  • Culoarea liniei: # edf000
  • Stil de linie: solid
  • Poziția liniei: sus
Stilul de distanțare Divi

dimensionarea

Și completați parametrii modulului modificând parametrii de dimensionare în consecință:

  • Greutatea separatorului: 20px
  • Lățime: 11%
  • Alinierea modulului: stânga
  • Înălțime: 20px
Dimensionare modul linie divi

Adăugați o linie # 2

Structura coloanei

La rândul următor! Utilizați următoarea structură de coloane:

Configurarea coloanei Divi

dimensionarea

Fără a adăuga mai multe module, deschideți parametrii liniei și modificați parametrii de dimensionare după cum urmează:

  • Utilizați o lățime personalizată de jgheab: Da
  • Lățimea jgheabului: 2
  • Lățime: 100%
  • Lățime maximă: 100%
Configurarea lățimii jgheabului

spaţierea

Apoi adăugați captură stânga și dreapta doar pe ecranele mai mici.

  • Căptușire stânga: 5% (numai tabletă și telefon)
  • Căptușire dreapta: 5% (numai tabletă și telefon)
Configurarea stilului de spațiere a liniilor

Parametrii coloanei (5x)

Acum, în următorii trei pași ai acestui tutorial, vom face câteva modificări coloanelor. Aplicați cei trei pași la fiecare dintre coloanele din rândul dvs.

Configurarea liniei parametrilor Divi

Fundal gradient

Mai întâi, adăugați un fundal de gradient în fiecare coloană.

  • 1 culoare: rgba (255,255,255,0)
  • 2 culoare: rgba (0,0,0,0,84)
  • Tipul gradientului: liniar
  • Poziția de pornire: 25%
  • Poziția finală: 86%
  • Plasați gradientul deasupra imaginii de fundal: Da
Configurația coloanei spate Divi

Imagine de fundal

Apoi încărcați o imagine de fundal la alegere. Această imagine de fundal reprezintă fiecare membru al echipei, deci utilizați o imagine diferită pentru fiecare coloană.

  • Dimensiunea imaginii de fundal: copertă
  • Poziția imaginii de fundal: Centru
Adăugați o imagine de fundal a coloanei Divi

Elementul principal

Completați setările coloanei adăugând CSS personalizat la elementul principal al tabletei din fiecare coloană. Aceste linii de cod CSS ne vor ajuta să plasăm coloanele una sub cealaltă pe tabletă, în loc să avem două una lângă alta.

latime: 100%! important; marja: 50px 0px 50px 0px! important;
Cod css coloana divi

Adăugați un modul persoană la coloană

Adăugați conținut

Pentru a partaja informații despre membrii echipei, vom folosi un modul Persoană. Adăugați modulul prima persoană în coloana 1 și utilizați orice conținut doriți.

Numele persoanei divi

Ștergeți imaginea

Apoi ștergeți imaginea. În schimb, folosim imaginea de fundal a coloanei.

Eliminați imaginea divi

Imagine de fundal

Vom adăuga apoi o suprapunere de imagine ca imagine de fundal a modulului. Puteți găsi pe cel pe care îl folosim descărcând folderul la începutul acestui tutorial.

  • Dimensiunea imaginii de fundal: copertă
  • Poziția imaginii de fundal: Centru
Configurarea fundalului modulului persoană

Setări text de titlu

Accesați fila de proiectare a modulului și modificați setările pentru textul titlului după cum urmează:

  • Nivelul titlului: H3
  • Titlul fontului: Quicksand
  • Greutatea fontului din titlu: îndrăzneț
  • Culoarea textului titlului: #ffffff
  • Mărimea textului titlului: 230%
Personalizarea titlului modulului Divi

Setări text corp

Modificați de asemenea setările textului corpului.

  • Fontul corpului: Open Sans
  • Culoarea textului corpului: #ffffff
  • Înălțimea liniei corpului: 2,2 em
Personalizare corp Divi

Setări de poziție text

Apoi faceți unele modificări la setările textului de poziție.

  • Poziția fontului: Sans Sans
  • Culoarea textului poziției: # edf000
Poziția Divi

spaţierea

Și completați setările modulului adăugând valori de umplere personalizate la setările de spațiere.

  • Înveliș superior: 70%
  • Înveliș inferior: 10%
  • Căptușire stânga: 10%
  • Căptușire dreapta: 10%
Spațierea modulului Divi person

Duplică modulul Persoană de 4 ori

După ce ați completat modulul Persoană, puteți clona întregul modul de patru ori.

Plasați duplicatele în coloanele rămase

Plasați module duplicat în cele patru coloane rămase ale rândului. Asigurați-vă că editați și conținutul.

Transformați rândul într-un carusel de defilare automată

Schimbați dimensiunea liniei # 2

Acum, pentru a transforma acest rând într-un carusel de membru al echipei cu defilare automată, trebuie să redeschidem setările de rând și să schimbăm lățimea și lățimea maximă în setările de dimensionare.

  • Lățime: 180%
  • Lățimea maximă: 220% (birou), 100% (tabletă și telefon)
Distanța de modificare a liniei divi

Adăugați mișcarea orizontală a liniei # 2

Completați setările liniei adăugând mișcare orizontală la setările efectului de derulare în fila avansată și ați terminat!

  • Activați mișcarea orizontală: Da
  • Start offset:
    • Birou: 2,5
    • Tabletă și telefon: 0
  • Offset mediu: 0 (la 40%)
  • Decalaj final:
    • Birou: -25 (la 62%)
    • Tabletă și telefon: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Configurarea animației cu defilare Divi

studiu

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Birou

Derulați membru al echipei divi

Ultimele gânduri

În acest tutorial, ți-am arătat cum să devii creativ cu efectele de defilare încorporate ale Divi. Mai exact, am recreat un carusel frumos, cu defilare automată, membru al echipei. Pe măsură ce vizitatorii derulează pagina, apare o altă parte a caruselului.

Cum să adăugați mai multe pictograme de social media la Divi

Cum să adăugați mai multe pictograme de social media la Divi

Divi vă permite să controlați și să proiectați fiecare detaliu al site-ului dvs. web, de la antet la subsol. Unul dintre cele mai clicate elemente ale oricărui site web sunt pictogramele de socializare. Un public angajat vrea să te găsească în altă parte și să te cunoască. Evident, veți dori să faceți acest lucru cât mai ușor posibil. 

Așadar, vă vom arăta cum să activați pictograme sociale suplimentare în opțiunile temei Divi, cum să utilizați Divi Builder pentru a insera pictograme social media oriunde pe o pagină sau o postare și cum să profitați de putere. a temei Divi Builder pentru a adăuga pictograme de socializare în fiecare colț al site-ului dvs.

Cum să activați cu ușurință pictogramele suplimentare de social media în subsolul Divi

Cel mai simplu mod de a adăuga mai multe pictograme de socializare pe site-ul dvs. Divi este să accesați panoul Opțiuni temă , activând opțiunile pentru Facebook, Twitter, Instagram și RSS. Apoi, tot ce trebuie să faceți este să introduceți adresele URL ale profilului în câmpuri. Când faceți acest lucru, le veți vedea ca linkuri de pictograme în subsolul site-ului dvs.:

Icoane sociale divi

În meniul dvs. de bord WordPress, accesați Divi - Opțiuni tematice și faceți clic pe fila general . Derulați în jos pentru a vedea comutatorul de rețea. De asemenea, chiar sub aceste comutări, asigurați-vă că introduceți adresele URL pentru fiecare pictogramă socială Divi pe care o activați. În caz contrar, pictograma va apărea, dar făcând clic pe ea, utilizatorul nu va fi nicăieri. Folosind un # în loc de o adresă URL va menține utilizatorul pe pagină, mai degrabă decât să-l redirecționeze către un Pagina 404 .

Opțiuni tematice Divi

Derulați până la sfârșitul opțiunilor temei și faceți clic Salvați modificările . Acum puteți merge la subsolul site-ului dvs. și puteți face clic pe pictogramele sociale pentru a le testa!

Dacă nu vedeți pictogramele în subsolul dvs., asigurați-vă că verificați personalizatorul temei Aspect - Personalizați și asigurați-vă că Afișați pictograme sociale este bifat în opțiunile de subsol.

Divi wordpress

Cu toate acestea, dacă doriți și mai multe opțiuni pentru pictogramele subsolului social, continuați să derulați în jos la secțiunea noastră din Generatorul de teme Divi, unde discutăm atât șabloanele personalizate, cât și valorile implicite generale.

Cum se utilizează Divi Builder pentru a adăuga trackere de socializare pe o pagină sau pentru a publica conținut

Uneori, punerea unor pictograme sociale suplimentare între blocuri de text, imagini sau alt conținut în corpul de pagini sau postări poate avea mult sens. Pagina dvs. de destinație sau pagina Despre, de exemplu, ar fi un loc bun pentru a adăuga pictograme sociale suplimentare pentru a permite vizitatorilor să știe cum să se conecteze cu dvs. Cu siguranță vor ieși în evidență mai mult decât simpla conectare la profilurile dvs. sociale folosind text obișnuit. În plus, oamenii caută icoane recunoscute.

Puteți utiliza Divi Builder pentru a insera pictograme de socializare direct în paginile sau postările dvs. utilizând urmărirea social media .

De fiecare dată când creați sau deschideți o pagină sau un articol existent în tabloul de bord WordPress, veți vedea un buton violet mare care vă întreabă dacă doriți să utilizați Divi Builder sau nu.

Crearea articolelor Divi

Și bineînțeles că da. Doar click Utilizați Divi Builder pentru a începe să vă construiți pagina sau să postați de la zero (sau de la unul dintre machete predefinite ). În plus, puteți include pictogramele de social media Divi dacă utilizați editorul WordPress implicit. Tot ce trebuie să faceți este să introduceți un bloc de Dispunere Divi și urmați aceiași pași ca în continuare.

Aspect Divi Gutenberg

Puteți utiliza instrumentul pentru a vă proiecta pagina sau postarea după cum doriți, utilizând modulele disponibile pentru generatorul de pagini. Dacă este prima dată când utilizați Divi Builder, vă recomandăm să consultați mai întâi această prezentare generală pentru a înțelege clar cum funcționează.

Când sunteți gata să adăugați pictograme de social media pe pagina dvs., faceți clic pe cercul negru + în secțiunea în care doriți să plasați pictogramele de pe rețelele sociale și derulați până la caseta urmărirea social media este afisat.

Introducerea modulului de urmărire pe social media

Vi se va cere să alegeți rețelele sociale pe care le doriți înainte de a putea începe să le personalizați. Click pe Adăugați o nouă rețea socială .

Adăugați modulul social de rețea socială divi

Apoi selectați unul din lista derulantă.

Adăugați o nouă rețea socială

Cu aceasta aleasă, adăugați adresa URL a profilului dvs. Opțional, puteți selecta o culoare, un gradient, un fundal etc. specific pentru pictograma sa.

Personalizați butonul de rețea socială

După ce ați adăugat prima rețea socială, puteți continua să adăugați alte rețele urmând aceiași pași. Toate vor fi listate sub fila Conținut din setări de urmărire social media . Puteți să le editați, să le copiați sau să le rearanjați trăgându-le și plasându-le la locul lor.

Personalizați pictogramele sociale

După ce ați adăugat rețelele sociale, comutați la file Conținut et Concepție pentru a vă juca cu alte opțiuni de personalizare. Puteți schimba totul de la umbra casetei, raza chenarului, distanța, filtrele și chiar animația introductivă pentru modulul pictogramă. De asemenea, aveți opțiunea de a include un buton Urmări pentru ca toate icoanele tale să atragă mai multă atenție asupra lor. Când ați terminat, faceți clic pe căpușa verde .

Urmăriți-ne butonul divi

Apoi puteți muta pictogramele în jurul paginii dvs., ajustând spațiul și aspectul acestora după cum doriți. (The Opțiuni de transformare Divi este uimitor pentru asta, apropo.) Când sunteți mulțumit de toate deciziile dvs., apăsați butonul butonul verde Salvare (sau Publicare) în colțul din dreapta jos pentru a vă înregistra noul modul de pictograme social media. Dacă nu vedeți butonul Publicare / Salvare, apăsați pe elipsă violetă (trei puncte) în partea de jos centrală a ecranului pentru a extinde meniul.

Butonul Divi urmează-ne

După aceea, pictogramele de social media vor fi live pe site-ul dvs.

Utilizând Divi Theme Builder pentru a adăuga pictograme de social media

Așa cum am menționat mai sus, Divi Theme Builder este un instrument puternic care vă oferă un control complet asupra a aproape fiecare aspect al site-ului dvs. Deci, dacă doriți să adăugați pictograme de socializare oriunde, generatorul de teme vă acoperă.

Pentru a începe cu generatorul de temă, accesați Divi - Generator de teme în tabloul de bord WordPress.

Divi constructor

Acest lucru se referă foarte mult la adăugarea de pictograme de socializare la un aspect existent al generatorului de teme Divi. Sau la unul nou! Nu contează dacă adăugați la antet, subsol sau corpul general al site-ului dvs. - sau chiar anumite categorii sau alte tipuri de pagini specializate. Veți urma același proces.

Mai întâi vom găsi secțiunea pe care dorim să o adăugăm. Din nou, poate fi global sau personalizat. Dacă nu ați folosit niciodată creatorul de teme înainte, este ușor. Vom adăuga pictograme de socializare la postările individuale. Prin urmare, puteți începe făcând clic pe Adăugați un nou model și selectarea toate mesajele ou Mesaje din anumite categorii . Apoi verificați categoriile pe care doriți să le includeți. Apoi faceți clic pe Creați un șablon .

Adăugați un model divi

Dacă ați configurat deja șabloane, trebuie doar să faceți clic pe Editează creionul sau faceți dublu clic pe secțiunea pe care doriți să o modificați.

Aspect Divi

Procesul de adăugare a pictogramelor de social media aici este același cu cel descris mai sus în generator. Cu toate acestea, deoarece utilizați generatorul de teme în loc să editați doar o singură pagină, pictogramele nu vor apărea exact acolo unde alegeți. Șabloanele pot fi adăugate la anteturi, subsoluri și șabloane globale. Și puteți alege cum și când apar fără a fi nevoie să le configurați o singură dată. Nu pagină cu pagină, așa cum ați face mai sus.

De exemplu, dacă dorim să includem pictogramele de pe rețelele de socializare sub titlul postării, dar deasupra conținutului postării pe fiecare postare de blog pe care o publicăm, vom adăuga doar un modul la urmări retele sociale. Faceți clic pe cerc Noir + și selectați-l în caseta de dialog Introduceți un modul .

Alegeți modulul social

Apoi, glisați modulul acolo unde doriți să apară pictogramele de pe rețelele sociale. (Folosim modul wireframe pentru această plasare). Apoi, trebuie doar să adăugați rețelele sociale pe care doriți să le afișați. Apoi personalizați dimensiunea și colorarea așa cum ați făcut mai sus.

Modul social media icon divi

Și exact așa, ați adăugat câteva pictograme de socializare la generatorul de teme Divi. Acestea vor apărea pe orice postare pe blog pe care o creați (în acest exemplu).

Aspect pe divi cu buton de partajare

Și dacă nu vă place cum arată, generatorul de teme este ușor de personalizat. Trageți-le într-o altă locație, cum ar fi partea de sus a barei laterale.

Mutarea modulului de partajare socială Divi

Asigurați-vă că faceți clic pe butonul verde Registru in colt. Acum, fiecare postare de blog cu acest șablon de pe site se va încărca împreună cu pictogramele dvs. de socializare în partea de sus a barei laterale.

pictograme cu bara laterală

Adăugarea de pictograme de socializare la antet și subsol cu ​​Divi Theme Builder

Poate că pictogramele implicite pentru rețelele sociale din setările Divi nu funcționau pentru dvs. sau nu ofereau suficientă personalizare. În acest caz, puteți utiliza întotdeauna generatorul de teme pentru a-l personaliza mai complet. 

În orice șablon, puteți adăuga un subsol personalizat. Aceasta va înlocui Divi implicit. Orice șablon fără șablon personalizat va afișa elementul tematic implicit. Pictogramele de pe rețelele sociale pot diferi de la arhivă la postare, în funcție de nevoile utilizatorilor dvs.

Tema de personalizare divi layout

Puteți adăuga, de asemenea, un subsol global care se va înlocui toate alte subsoluri pe care le-ați creat. (Acest lucru se aplică și corpurilor și antetelor globale). 

Dacă ați proiectat 4 subsoluri personalizate pentru Postări, Pagini, Proiecte și Categorii, dar apoi creați un subsol global, numai subsolul global se va afișa. 

Șabloanele globale sunt minunate pentru pictogramele de pe rețelele sociale de pe întreg site-ul pentru, poate, un ziar sau o marcă. În timp ce șabloanele personalizate cu pictograme sociale pot fi cele mai bune pentru creatorii individuali care fac parte dintr-o rețea.

Adăugați un subsol divi global

Utilizând Divi Builder pentru anteturi personalizate, subsoluri și șabloane pentru corp, puteți adăuga pictograme de socializare în aproape orice parte din Divi doriți. Nu vă limitați la design-urile implicite sau trebuie să vă scufundați în sistemul de fișiere WordPress. În plus, cu generatorul de teme, puteți utiliza oricare dintre opțiunile de proiectare ale lui Divi pentru a crea pictograme de socializare și a le face să iasă în evidență în mod corect pentru fiecare public anume.

Concluzie

Când aveți opțiunile de subsol Divi implicite, instrumentul Divi Builder pentru postări și pagini, puterea Divi Theme Builder, nu există niciun motiv pentru care trebuie să instalați un plugin pentru a adăuga pictograme de socializare pe site-ul dvs. web. Divi vă oferă control deplin asupra modului în care arată icoanele dvs. sociale și unde sunt. 

Fie că trebuie să promovați un brand, un autor invitat, un grajd de creatori de conținut sau doar locurile în care puteți fi găsiți online, Divi are o modalitate de a face acest lucru. Suntem unilaterali, dar credem că este cel mai simplu, mai simplu și mai elegant mod de a adăuga pictograme de socializare pe site-ul dvs. web.

Crearea unei grile de beneficii dinamice pentru produsele WooCommerce

Crearea unei grile de beneficii dinamice pentru produsele WooCommerce

Modul în care proiectați pagina produsului dvs. are un impact imediat asupra comportamentului vizitatorilor dvs. Un design personalizat și personalizat al paginii de produs poate face mai ușor vizitatorii să decidă dacă doresc să cumpere produsul dvs. Dacă sunteți în căutarea unei modalități de a face pagina produsului mai atrăgătoare, probabil vă va plăcea acest tutorial. 

Vă vom arăta cum să includeți o grilă dinamică de beneficii pentru produs în proiectarea dvs. utilizând Divi și pluginul Advanced Custom Fields. Vom începe prin a crea un grup de câmpuri pentru beneficii. Apoi vom completa câmpurile personalizate de pe pagina noastră de produs și vom include conținutul dinamic în șablonul nostru de pagină de produs. 

Rezultat posibil

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Posibil rezultat divi

1. Instalați pluginul ACF Plugin și grupul de beneficii pentru produse

Instalați pluginul Advanced Advanced Fields

Pentru a afișa diferitele avantaje ale produsului în backend-ul produselor noastre, vom folosi pluginul gratuit Advanced Custom Fields. Accesați-vă Backend WordPress> Pluginuri> Adăugare nouă> Găsire plugin ACF> Instalare> Activare .

Instalați un plugin de câmp personalizat avansat

Accesați câmpurile personalizate și adăugați un nou grup de câmpuri

După ce ați instalat și activat pluginul ACF, veți putea accesa câmpurile dvs. personalizate și adăugați un nou grup de câmpuri.

Creați câmpuri ACF

Setările grupului de câmp

Dați noului grup de câmpuri un titlu și permiteți-i să apară numai pe paginile produsului.

  • „Tip de mesaj” este egal cu „Produs”
Adăugați reguli

Adăugați un prim câmp

Continuați adăugând un câmp nou pentru titlul primului dvs. produs.

  • Etichetă de câmp: Titlul beneficiului 1
  • Tipul câmpului: text
Adăugați un câmp ac
Personalizare câmp Divi

Repetați pasul pentru câmpurile rămase

Faceți același lucru pentru celelalte avantaje ale produsului și descrierile acestora. Toate aceste câmpuri necesită tipul de câmp „Text” atribuit acestora.

  • Titlul serviciului 1
  • Descrierea beneficiilor 1
  • Titlul serviciului 2
  • Descrierea beneficiilor 2
  • Titlul serviciului 3
  • Descrierea beneficiilor 3
  • Titlul serviciului 4
  • Descrierea beneficiilor 4
Configurați câmpurile ACF

2. Adăugați beneficii produselor

Deschideți sau adăugați un produs nou

Odată ce grupul și câmpurile dvs. de câmp sunt create, puteți adăuga avantajele produselor la produsele dvs. la nivel individual. Deschideți un produs la alegere sau creați unul nou.

Crearea produsului Divi

Completați câmpurile Beneficii pentru produse

Și îndepliniți beneficiile produsului.

Completați câmpurile avantaje Divi

3. Creați un model de pagină de produs în Divi Theme Builder

Accesați Divi Theme Builder și adăugați un nou șablon

Este timpul să începem cu Divi! Pentru a crea un șablon nou, accesați Divi Theme Builder și faceți clic pe „Adăugați un șablon nou”.

Constructor de teme Divi

Utilizați un șablon pe toate produsele

Folosim acest șablon pentru toate produsele, dar nu ezitați să selectați în schimb produse cu o anumită categorie sau etichetă.

Adăugați toate produsele woocommerce

Introduceți editorul șablonului corpului modelului

Apoi introduceți corpul modelului făcând clic pe „Adăugați un corp personalizat” și selectând „Creați un corp personalizat”.

Construirea corpului div

Modificați secțiunea # 1

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și schimbați culoarea de fundal la negru.

  • Culoare fundal: # 000000
Configurarea fundalului secțiunii Divi

spaţierea

Accesați fila de design a secțiunii și adăugați niște căptușeli personalizate de sus și de jos.

  • Garnitură de top: 10px
  • Garnitura de jos: 10px
Configurarea distanțării secțiunii Divi

Adăugați o nouă linie

Structura coloanei

Să continuăm adăugând o nouă linie la secțiunea care are următoarea structură:

Configurarea aspectului modulului de linie

spaţierea

Fără a adăuga modificări, să deschidem setările rândului și să facem câteva ajustări ale spațiului.

  • Folosiți Jgheabul personalizat: Da
  • Lățimea jgheabului: 1
  • Lățime: 90%
  • Lățimea maximă: 100%
Setări de spațiere a modulului de linie

spaţierea

Eliminați toate distanțele interioare de sus și de jos.

  • Marja internă mare: 0px
  • Marja internă scăzută: 0px
Setări de spațiere a modulului de linie Divi

Adăugați modulul Woo Cart Notice la coloană

Conținut dinamic

Singurul modul de care avem nevoie pe această linie și secțiune este modulul Woo Cart Notice. Asigurați-vă că „Acest produs” este selectat în secțiunea dinamică.

  • Produs: Acest produs
Setări woo cart notice module divi

Fundal de culoare

Apoi, deschideți setările modulului și utilizați un fundal transparent.

  • Culoare fundal: rgba (0,0,0,0)
Woo cart modul setări divi

Setări text

Treceți la fila „Proiectare” și modificați fontul textului.

  • Font de text: Karla
Setările fontului modulului Divi

Setarea butoanelor

Finalizați setările pluginului definind setările de stil:

  • Utilizați stiluri personalizate pentru buton: Da
  • Dimensiunea butonului text: 20px
  • Culoare text buton: # 000000
  • Fundal buton: # ffd623
  • Lățimea marginii butonului: 0px
  • Buton rotunjit: 0px
Setări de culoare pentru modulul Woo Cart Notice
  • Font de buton: Oswald
  • Stil de font pentru butoane: Shift
Reglarea designului culorii modulului Woo Cart Notice
  • Marja internă mare: 20px
  • Marja internă scăzută: 20px
  • Marja internă stângă: 50px
  • Marja dreaptă internă: 50px
Modulul de proiectare a configurației vă atrage atenția asupra coșului

Adăugați secțiunea # 2

Fundal gradient

Adăugați o altă secțiune obișnuită sub cea anterioară. Apoi, deschideți setările și utilizați un fundal de gradient după cum urmează:

  • Culoare 1: # 000000
  • Culoarea 2: #ffffff
  • Poziția de pornire:
    • Desktop: 30%
    • Tabletă: 57%
    • Telefon: 54%
  • Poziția finală:
    • Desktop: 30%
    • Tabletă: 57%
    • Telefon: 54%
Reglare spate a modulului liniei Divi

spaţierea

Să mergem la fila Design și să adăugăm o marjă internă ridicată.

  • Garnitură de top: 150px
Configurarea spațiului modulului Divi line

Adăugați o linie nouă

Structura coloanei

Continuați adăugând o nouă linie cu aceeași structură ca în imaginea de mai jos:

Configurare stil linie Divi

dimensionarea

Fără a adăuga încă modificări, vom deschide setările și vom schimba spațiul după cum urmează:

  • Folosiți jgheaburi personalizate: Da
  • Spațiu de jgheab: 1
  • Lățime: 95%
  • Lățime maximă: 2560px
  • Aliniere linie: centru
Modulul de configurare a canalului divi

spațiere

Vom elimina și marja internă superioară.

  • Garnitură de top: 0px
Configurarea spațiului modulului Divi

Elementul principal

Și pentru a centra conținutul coloanei pe desktop, vom folosi două linii de cod CSS în elementul principal al modulului rând.

Desktop:

afișare: flex; aliniere-elemente: centru;

Tabletă și telefon:

display: block;
Setările stilului modulului de linie Divi

Adăugați modulul Woo Image la coloana 1

Conținut dinamic

Este timpul să adăugăm module, vom începe cu modulul Woo Images din coloana 1. Asigurați-vă că este selectat „Acest produs”.

  • Produs: Acest produs
Setările modulului de imagine produs Woocommerce

Efect de animație cu defilare verticală

Adăugăm mișcare subtilă imaginii folosind efectul de derulare a mișcării orizontale din fila avansată.

  • Activați mișcarea verticală: Da
  • Start offset:
    • Birou: -4
    • Tabletă și telefon: 0
  • Offset mediu: 0
  • Decalaj final: 0
  • Efect de declanșare a mișcării: mijlocul elementului
Reglarea modulului de imagine Divi

Adăugați modulul de titlu Woo la coloana 2

Conținut dinamic

În coloana 2, primul mod de care avem nevoie este un mod de titlu Woo. Asigurați-vă că „Acest produs” este selectat în zona de conținut dinamic.

  • Produs: Acest produs
grila de beneficii a produsului

Setări text de titlu

Apoi accesați fila de design și stilizați textul titlului după cum urmează:

  • Titlul fontului: Oswald
  • Stilul fontului: majuscule
  • Culoarea textului titlului: # ffd623
  • Dimensiunea textului titlului: 80px
Reglarea designului modulului titlu Divi

spaţierea

Completați modulul de titlu Woo adăugând margini stânga și dreapta.

  • Marja stângă: 5%
  • Marja dreapta: 5%
Setarea modulului titlu Divi

Adăugați modulul descriere Woo la coloana 2

Conținut dinamic

Să trecem la modulul următor, care este un modul de descriere Woo. Pentru aceasta folosim următorul conținut dinamic:

  • Produs: Acest produs
  • Tip descriere: Scurtă descriere
Setări modul descriere produs

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

  • Font de text: Karla
  • Culoarea textului: #dbdbdb
  • Dimensiunea textului: 17 px (desktop și tabletă), 15 px (telefon)
  • Înălțimea liniei de text: 1,9 em
Descrierea modulului de reglare a culorii divi

dimensionarea

Apoi modificați lățimea pe diferite dimensiuni ale ecranului.

  • Lățime: 59% (desktop), 82% (tabletă și telefon)
Reglarea lățimii modulului rezumat Divi

spaţierea

Completați modulul de descriere Woo adăugând valori de marjă personalizate în setările de spațiere.

  • Marja superioară: 50px
  • Marja de jos: 100px
  • Marja stângă: 5%
  • Marja dreapta: 5%
Modulul de descriere a produsului Divi

Adăugați modulul Blurb la coloana 2

Conținut dinamic

Pentru a afișa beneficiile produsului pe care le-am adăugat în prima parte a acestui tutorial, vom folosi modulele Blurb. Adăugați un prim modul Blurb și utilizați conținutul dinamic al primului beneficiu produs pentru titlu și corp.

  • Titlu: Titlul beneficiului 1
  • Corp: Descrierea beneficiului 1
Setarea textului modulului rezumat Divi

Incarca imaginea

Încarcă o imagine sau folosește o pictogramă la alegere. Puteți găsi cele pe care le-am folosit pe parcursul acestui tutorial în folderul de descărcare pe care l-ați putut descărca la începutul acestui tutorial.

Configurarea divi a rezumatului modulului de imagine

Setări imagine / pictogramă

Accesați fila de design a modulului și schimbați setările imagine / pictogramă după cum urmează:

  • Poziție imagine / pictogramă: partea de sus
  • Aliniere imagine / pictogramă: stânga
Modul de reglare Divi

Setări text titlu

Modificăm în continuare setările textului titlului.

  • Titlul fontului: Oswald
  • Titlul Stil font
  • Titlu Dimensiune text: 25px
Configurați fontul modulului rezumat divi

Setări text corp

Alături de setările textului corpului.

  • Font de corp: Karla
  • Dimensiunea textului: 17 px (desktop și tabletă), 15 px (telefon)
  • Înălțimea liniei corpului: 1,9 em
Configurați rezumatul modulului text div i

dimensionarea

Apoi accesați setările de dimensionare și modificați lățimile. Este important să utilizați o lățime principală mai mică de 50%, acest lucru ne va permite să afișăm două module Blurb unul lângă altul în următorii pași.

  • Lățimea imaginii: 25%
  • Lățime: 49%
Configurați dimensiunea modulului rezumat divi

spaţierea

De asemenea, vom adăuga spații în jurul modulului Blurb folosind valori de umplere personalizate pe diferite dimensiuni de ecran.

  • Înveliș superior: 8%
  • Înveliș inferior: 8%
  • Căptușire stânga: 8% (desktop și tabletă), 2% (telefon)
  • Căptușire dreapta: 8% (desktop și tabletă) 2% (telefon)
Configurați spațiul modulului rezumat divi

Elementul principal

Acum ne vom asigura că modulul Rezumat afișează textul unul lângă celălalt, în doi pași. În primul rând, ne vom asigura că lățimea modulului este mai mică de 50% (așa cum am făcut în pasul anterior). Apoi, vom folosi proprietatea de pe rând. Vom adăuga această proprietate CSS pe elementul principal din secțiunea avansată.

display: inline-block;
Adăugați modul civi cod civi

Clonați modulul sumar de 3 ori

După ce ați finalizat primul mod Blurb, îl puteți clona de trei ori. Veți observa automat că modulele Blurb apar într-o grilă.

Denumirea produsului secțiunea divi

Editați imaginile modulului Blurb

Editați imaginea în fiecare pod duplicat Blurb. Le puteți găsi în folderul de descărcare pe care este posibil să îl fi descărcat la începutul acestui articol.

Imagine modul modul rezumat Divi

Modificați conținutul dinamic al modulului Blurb

De asemenea, modificați conținutul dinamic al fiecărui modul duplicat Blurb.

  • Titlu: Titlul serviciului (2,3 sau 4)
  • Corp: descrierea avantajelor (2,3 sau 4)
Regulile modulului rezumat Divi

Adăugați chenare la modulele Blurb individual

Setări de bord pentru modulul Blurb 1

Acum, pentru a termina de proiectat grila noastră, vom adăuga chenare la modulele Blurb la nivel individual. Deschideți primul mod Blurb și utilizați o margine dreaptă.

  • Lățimea marginii drepte: 1px
  • Culoarea marginii drepte: # ffd623
Modul sumar divi de configurare a chenarului rotunjit

Adăugați, de asemenea, un chenar de jos la primul modul Blurb.

  • Lățimea marginii inferioare: 1px
  • Culoarea marginii inferioare: # 000000
Configurați marginea de jos a divi
Setări de bord pentru modulul Blurb 2

Apoi deschideți al doilea modul Blurb și utilizați un chenar de jos.

  • Lățimea marginii inferioare: 1px
  • Culoarea marginii inferioare: # 000000
Configurare modul rezumat modul rezumat divi
Setări de bord pentru modulul Blurb 3

Completați designul grilei adăugând un chenar drept la al treilea modul Blurb.

  • Lățimea marginii drepte: 1px
  • Culoarea marginii drepte: # ffd623
grila de beneficii a produsului

Adăugați Woo Adaugă în coș Modulul din coloana 2

Conținut dinamic

Ultimul modul de care avem nevoie în proiectarea noastră este un modul Woo Add to Cart. Asigurați-vă că „Acest produs” este selectat în zona de conținut dinamic.

  • Produs: Acest produs
Adăugați la card setările modulului divi

Setări câmp

Mergeți la următoarea filă de proiectare și modificați setările câmpului.

  • Culoarea fundalului câmpurilor: #ffffff
  • Culoarea textului câmpului: # 000000
Configurați modulul de culoare stil adăugați în coș divi
  • Câmpuri rotunjite: 0px (toate colțurile)
  • Lățimea marginii inferioare a câmpurilor: 1px
  • Culoarea marginii de jos a câmpurilor: # 000000
Configurați distanța dintre secțiunile Divi

Setări buton

Apoi, stilează butonul în consecință:

  • Utilizați stiluri personalizate pentru buton: Da
  • Dimensiunea butonului: 20 pixeli
  • Culoarea textului butonului: # 000000
  • Culoarea fundalului butonului: # ffd623
  • Lățimea marginii butonului: 0px
  • Raza de margine a butonului: 0px
Configurați designul butonului divi
  • Font de buton: Oswald
  • Stilul fontului cu buton: cu majuscule
Configurați butonul divi
  • Garnitură superioară: 20px
  • Garnitura de jos: 20px
  • Plăcuță stângă: 50px
  • Căptușire dreapta: 50px
Configurați dimensiunea modulului divi

spaţierea

Și completați parametrii modulului adăugând valori ale marjei personalizate.

  • Marja superioară: 100px
  • Marja stângă: 5%
Configurați spațiul div

3. Salvați modificările generatorului de temă și previzualizați rezultatul

După ce ați terminat de proiectat șablonul de pagină al produsului, puteți salva toate modificările dvs. Builder de temă și puteți afișa rezultatele pe produsele dvs.!

Salvați designul divi
Salvați modificările divi

studiu

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Rezultatul demonstrației

Ultimele gânduri

În acest articol, ți-am arătat cum să devii creativ cu următorul șablon de pagină de produs Divi. Mai exact, v-am arătat cum să includeți o grilă dinamică de beneficii pentru produs, pentru a adăuga beneficii suplimentare paginii dvs. de produs. Am creat acest tutorial folosind Divi în combinație cu pluginul Advanced Custom Fields. De asemenea, puteți descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Cum să implementați modul întunecat pe site-ul dvs. cu Divi

Cum să implementați modul întunecat pe site-ul dvs. cu Divi

Modul Întunecat continuă să câștige popularitate ca o opțiune convenabilă pentru utilizatori de a experimenta webul cu mai puțină presiune asupra ochilor. Să recunoaștem, cu toții avem tendința de a petrece mai mult timp uitându-ne la ecrane decât ar trebui, probabil, astfel încât orice comoditate suplimentară pentru experiența utilizatorului (cum ar fi modul întunecat) poate merge mult. 

Sistemele de operare, programele și browserele includ de obicei capabilități încorporate în modul întunecat, dar unii dezvoltatori îl duc la un alt nivel, incluzând o experiență personalizată în modul întunecat pentru site-ul lor web. Ideea este să preia mai mult control asupra modului în care arată site-ul web în modul întunecat, fără a fi nevoie să facă compromisuri cu privire la branding și / sau design.

În acest tutorial, vă vom arăta cum să creați o comutare personalizată a modului întunecat în Divi de la zero, fără un plugin. Cu această funcție de comutare a modului întunecat, veți avea control asupra designului modului întunecat și veți avea o experiență de utilizare mai bună adaptată mărcii dvs.

Să începem!

studiu

Iată o previzualizare a designului pe care îl vom construi în acest tutorial.

Iată care este comutarea modului întunecat personalizat pe care vom crea.

Comutați modul întunecat

Și iată modul înainte și după modul întunecat aplicat uneia dintre aspectele noastre predefinite.

Și iată comutarea modului întunecat adăugată la un antet global. Observați cum rămâne modul luminos / întunecat atunci când navigați pe site.

Partea 1: Construirea comutatorului din modul întunecat

În această primă parte a tutorialului, vom construi o comutare în modul întunecat cu o pagină în Divi. Odată ce comutatorul a fost creat cu codul, îl veți putea salva în biblioteca Divi și îl puteți adăuga în orice loc de pe site-ul dvs. web.

Pentru a începe, adăugați un rând dintr-o coloană la secțiunea implicită atunci când construiți de la zero cu Divi pe partea frontală.

Secțiunea Divi

Adăugați modul de rezumare

Pentru a construi comutarea personalizată, vom proiecta un modul Blurb cu un pic de CSS personalizat.

Adăugați un nou modul de prezentare text la linie.

Conținut

Eliminați conținutul fictiv implicit pentru titlu și corp. Apoi adăugați pictograma pătrată în locul imaginii.

Modul rezumat Divi

Concepție

Accesați setările de proiectare și actualizați următoarele:

  • Culoare pictogramă: # 666666
  • Aliniere imagine / pictogramă: stânga
  • Dimensiunea fontului pictogramei: 22 pixeli
Configurare pictogramă Divi
  • Lățime: 50px
  • Alinierea modulului: centru
  • Înălțime: 25px
Configurare dimensionare divizare
  • Marja: 0px redusă
  • Colțuri rotunjite: 4px
  • Lățimea marginii: 2px
  • Culoarea frontierei: # 666666
Configurare frontieră Divi

CSS personalizate

Odată ce designul este în poziție, comutați la fila avansată. Sub CSS personalizat, adăugați următorul CSS personalizat la elementul principal pentru a vă asigura că revărsatul nu este ascuns de stilul colțurilor rotunjite.

revărsat: vizibil! important;

Apoi adăugați următorul CSS personalizat la elementul After:

continut: "lumina"; pozitie: absoluta; stanga: -35px; top: 0px;

Acest lucru adaugă o etichetă la modulul Blurb pe care îl vom schimba de la „lumină” la „întuneric” la clic.

Butonul de comutare Divi

Proiectarea textului corporal

Deoarece textul post pseudo-element moștenește stilurile de text ale corpului, putem adăuga stilurile de text ale corpului folosind opțiunile Divi după cum urmează:

  • Font pentru corp: Roboto
  • Culoarea textului corpului: # 666666
  • Dimensiunea textului corpului: 13px
  • Spațierea literelor corpului: 1px
Butonul de comutare a fontului

Adăugarea codului personalizat cu un modul de cod

Pentru a adăuga codul necesar (CSS / JQuery) pentru a opera comutarea în modul întunecat, vom folosi un modul de cod.

Creați un nou modul de cod sub modulul Blurb din aceeași coloană.

Adăugați un modul de cod

Apoi lipiți următorul cod în zona codului:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Adăugarea de clase CSS personalizate

Codul personalizat necesită adăugarea unei clase CSS personalizate la modulul sau comutatorul Blurb. Acest lucru va permite ca blurbul să declanșeze funcția de comutare a modului întunecat și funcția de clic.

Clasa modulului Blurb

Deschideți setările modulului Blurb și adăugați o clasă CSS personalizată după cum urmează:

  • Clasa CSS: et-dark-toggle
Cod css divi

Clasa capabilă de modul întunecat

De asemenea, trebuie să adăugăm o clasă CSS personalizată la fiecare element Divi pe care dorim să îl avem în modul întunecat. Odată ce elementul are clasa CSS, acel element va moșteni CSS „mod întunecat” personalizat în codul pe care l-am adăugat după ce modul întunecat a fost activat. Această metodă ne oferă mai mult control asupra proiectării modului întunecat, deoarece este posibil ca unele elemente să nu necesite stilizare în modul întunecat.

Pentru început, putem adăuga modul întunecat la secțiunea care conține comutarea modului nostru întunecat.

Deschideți parametrii secțiunii și adăugați următoarea clasă CSS:

  • Clasa CSS: et-dark-mode-capable
Secțiunea divi selector CSS

Partea 2: Adăugarea funcțiilor Dark Mode la o pagină Divi

Acum că avem codul și clasele CSS la locul lor, suntem gata să aplicăm funcționalitatea și designul modului întunecat pe o pagină întreagă din Divi. Pentru a face acest lucru, vom folosi aspectul nostru Premade al paginii de destinație a aplicației mobile.

Pentru a adăuga aspectul, deschideți meniul de setări din partea de jos a constructorului vizual și faceți clic pe pictograma Adăugați un aspect nou.

Apoi selectați aspectul paginii de destinație a aplicației mobile din fila Layouts predefinite.

Asigurați-vă că opțiunea „Înlocuiți conținutul existent” NU este selectată. Nu doriți să ștergeți secțiunea cu comutarea modului întunecat.

Alegeți aspectul divi 1

Deoarece stilul mod întunecat se va aplica numai elementelor cu clasa CSS „capabilă și în mod întunecat”, putem alege să adăugăm la pagină în moduri diferite.

  1. Putem adăuga clasa CSS la fiecare element al paginii individual.
  2. Am putea extinde clasa CSS la elemente din toată pagina (ar fi mai rapid decât să o faci manual). De exemplu, am putea deschide setările secțiunii pentru secțiunea de sus și extinde clasa CSS pentru acea secțiune la toate secțiunile de pe pagină.
  3. Putem adăuga clasa CSS la valorile implicite globale ale elementului. Aceasta va aplica clasa CSS tuturor elementelor la nivel de site, adăugând capacitatea de mod întunecat pe tot site-ul. De exemplu, am putea deschide setările secțiunii și faceți clic pe pictograma globală implicită pentru a modifica valorile implicite ale secțiunii globale. Apoi putem adăuga clasa CSS și o putem înregistra ca o clasă CSS pentru toate secțiunile site-ului.

Adăugarea clasei CSS la elementele paginii

Pentru acest exemplu, vom actualiza elementele paginii adăugând clasa CSS la valorile implicite globale ale secțiunilor și modulelor de text. Și vom face, de asemenea, câteva adăugiri la celelalte elemente de pe pagină pe măsură ce mergem.

Toate secțiunile

Pentru a adăuga clasa CSS la toate secțiunile, deschideți setările secțiunii de sus care conține comutarea modului întunecat. Apoi modificați valorile implicite globale ale secțiunii și adăugați următoarea clasă CSS la valorile implicite globale ale secțiunii:

  • Clasa CSS: et-dark-mode-capable

Toate secțiunile specializate

De asemenea, adăugați clasa CSS la valorile prestabilite globale din secțiunea specializată.

Adăugați la toate secțiunile specializate

Module text

Apoi deschideți setările pentru unul dintre modulele de text de pe pagină și adăugați aceeași clasă CSS la valorile implicite ale textului global.

Adăugați la module de text

Pentru a testa rezultatul, accesați pagina live și faceți clic pe modul întunecat pentru a comuta în partea de sus a paginii.

Iată cum ar trebui să arate pagina în modul clar.

Mod clar

Și iată cum ar trebui să arate pagina în modul întunecat.

Modul întunecat

Resurse suplimentare

Iată câteva alte resurse care vă pot interesa.

Ultimele gânduri

Echiparea site-ului dvs. Divi cu o comutare personalizată a modului întunecat poate fi o modalitate excelentă de a spori experiența utilizatorului și de a crea un design complet nou, care să placă și să ușureze privirea. Sper că acest lucru vă va fi de folos.