Ș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 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.
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ă 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.
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.
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.
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.
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
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
spaţierea
Apoi adăugați o marjă personalizată de sus și de jos.
Marja superioară: 200px
Marja de jos: 200px
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.
Setări text H2
Accesați fila de proiectare a modulului și modificați setările de text H2 după cum urmează:
Apoi adăugați o marjă mai mică pe tabletă și telefon.
Marja de jos: 50 pixeli (numai tabletă și telefon)
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.
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
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
Ligne
Apoi schimbați linia culorii modulului.
Culoarea liniei: # 000000
dimensionarea
Apoi faceți unele modificări la parametrii de dimensionare.
Greutatea separatorului: 3px
Lățime: 28%
spaţierea
Adăugăm și o marjă de sus.
Marja superioară: 10px
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
revarsarile
De asemenea, ascundeți revărsările.
Debord de orizontală: ascuns
Debord vertical: ascuns
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați un prim rând folosind următoarea structură a coloanei:
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
spaţierea
Apoi, eliminați toate captuseala implicită superioară și inferioară.
Garnitură superioară: 0px
Garnitura de jos: 0px
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
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ă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)
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
Ligne
Apoi schimbați linia culorii modulului.
Culoarea liniei: # 000000
dimensionarea
De asemenea, modificați parametrii de dimensionare.
Greutatea separatorului: 3px
Lățime: 50%
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.
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.
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
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.
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
Font pentru butoane: trimestrial
Greutatea fontului pentru buton: bold
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
Poziţie
Și repuneți butonul în consecință:
Poziție: Absolut
Locație: stânga jos
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.
Schimbă tot conținutul
Asigurați-vă că editați tot conținutul în linii duplicate.
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
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
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
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
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
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
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.
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.
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.
Î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)
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
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:
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
spaţierea
De asemenea, adăugăm umplutură personalizată superioară și inferioară.
Garnitură superioară: 100px
Garnitura de jos: 100px
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.
Setări text H2
Accesați fila de proiectare a modulului și modificați setările de text H2 după cum urmează:
Apoi adăugați un modul de separare. Asigurați-vă că este activată opțiunea „Afișați separatorul”.
Afișare separator: Da
Ligne
Apoi faceți unele modificări la setările liniei.
Culoarea liniei: # edf000
Stil de linie: solid
Poziția liniei: sus
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
Adăugați o linie # 2
Structura coloanei
La rândul următor! Utilizați următoarea structură de coloane:
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%
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)
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.
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
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
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.
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.
Ștergeți imaginea
Apoi ștergeți imaginea. În schimb, folosim imaginea de fundal a coloanei.
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
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%
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
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
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%
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)
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
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
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.
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.:
Î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 .
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.
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.
Ș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.
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.
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ă .
Apoi selectați unul din lista derulantă.
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.
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.
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 .
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.
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.
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 .
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.
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 .
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.
Ș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).
Ș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.
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.
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.
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.
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.
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.
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 .
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.
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 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
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
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.
Completați câmpurile Beneficii pentru produse
Și îndepliniți beneficiile produsului.
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”.
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ă.
Apoi introduceți corpul modelului făcând clic pe „Adăugați un corp personalizat” și selectând „Creați un corp personalizat”.
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
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
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ă:
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%
spaţierea
Eliminați toate distanțele interioare de sus și de jos.
Marja internă mare: 0px
Marja internă scăzută: 0px
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
Fundal de culoare
Apoi, deschideți setările modulului și utilizați un fundal transparent.
Culoare fundal: rgba (0,0,0,0)
Setări text
Treceți la fila „Proiectare” și modificați fontul textului.
Font de text: Karla
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
Font de buton: Oswald
Stil de font pentru butoane: Shift
Marja internă mare: 20px
Marja internă scăzută: 20px
Marja internă stângă: 50px
Marja dreaptă internă: 50px
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%
spaţierea
Să mergem la fila Design și să adăugăm o marjă internă ridicată.
Garnitură de top: 150px
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:
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
spațiere
Vom elimina și marja internă superioară.
Garnitură de top: 0px
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;
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
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
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
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
spaţierea
Completați modulul de titlu Woo adăugând margini stânga și dreapta.
Marja stângă: 5%
Marja dreapta: 5%
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 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
dimensionarea
Apoi modificați lățimea pe diferite dimensiuni ale ecranului.
Lățime: 59% (desktop), 82% (tabletă și telefon)
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%
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
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.
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
Setări text titlu
Modificăm în continuare setările textului titlului.
Titlul fontului: Oswald
Titlul Stil font
Titlu Dimensiune text: 25px
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
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%
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)
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;
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ă.
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.
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)
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
Adăugați, de asemenea, un chenar de jos la primul modul Blurb.
Lățimea marginii inferioare: 1px
Culoarea marginii inferioare: # 000000
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
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
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
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
Câmpuri rotunjite: 0px (toate colțurile)
Lățimea marginii inferioare a câmpurilor: 1px
Culoarea marginii de jos a câmpurilor: # 000000
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
Font de buton: Oswald
Stilul fontului cu buton: cu majuscule
Garnitură superioară: 20px
Garnitura de jos: 20px
Plăcuță stângă: 50px
Căptușire dreapta: 50px
spaţierea
Și completați parametrii modulului adăugând valori ale marjei personalizate.
Marja superioară: 100px
Marja stângă: 5%
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.!
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.
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.
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.
Ș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ă.
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.
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
Lățime: 50px
Alinierea modulului: centru
Înălțime: 25px
Marja: 0px redusă
Colțuri rotunjite: 4px
Lățimea marginii: 2px
Culoarea frontierei: # 666666
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:
Acest lucru adaugă o etichetă la modulul Blurb pe care îl vom schimba de la „lumină” la „întuneric” la clic.
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
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ă.
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
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
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.
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.
Putem adăuga clasa CSS la fiecare element al paginii individual.
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ă.
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ă.
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.
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.
Și iată cum ar trebui să arate pagina în modul întunecat.
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.
Confidențialitate și cookie-uri: acest site folosește cookie-uri. Continuând să navigați pe acest site, sunteți de acord cu utilizarea noastră de către acesta.
Pentru a afla mai multe, inclusiv cum să controlați cookie-urile, consultați următoarele:
Politica cookie-urilor
