Modulul Post Slider Divi
Cum să adăugați, să configurați și să personalizați Modulul Post Slider Divi.
Cum să Adăugați Modulul Post Slider Divi pe Pagina dvs.
Înainte de a putea adăuga Modulul Post Slider Divi pe pagina dvs., va trebui mai întâi să accesați Divi Builder. Odată ce Tema Divi a fost instalată pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postări de fiecare dată când construiți o pagină nouă. Făcând clic pe acest buton, se va activa Divi Builder, oferindu-vă acces la toate modulele Divi Builder. Apoi, faceți clic pe butonul Utilizați generatorul vizual pentru a lansa generatorul în modul vizual. Puteți, de asemenea, să faceți clic pe butonul Utilizați Visual Builder atunci când navigați pe site-ul dvs. în front-end dacă sunteți conectat la tabloul de bord WordPress.
După ce ați intrat în Visual Builder, puteți face clic pe butonul gri plus pentru a adăuga un nou modul la pagina dvs. Noile module pot fi adăugate numai în interiorul Rândurilor. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând pe pagina dvs. Avem câteva tutoriale despre cum să folosiți elementele de rând și secțiune ale lui Divi.
Găsiți Modulul Post Slider Divi în lista de module și faceți clic pe el pentru a-l adăuga pe pagina dvs. Lista de module poate fi căutată, ceea ce înseamnă că puteți introduce și cuvântul „post slider” și apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul post slider! Odată ce modulul a fost adăugat, veți fi întâmpinat cu lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut, Design și Avansat.
Exemplu de Caz de Utilizare: Adăugați un Modulul Post Slider Divi pe o Pagină de Blog Pentru a Prezenta Postările Recente
Pentru acest exemplu, voi adăuga un Slider de postare pentru a prezenta cele mai recente trei postări în partea de sus a unei pagini de blog. Fiecare diapozitiv va afișa imaginea prezentată a postării ca imagine de fundal, titlul postării și meta postarea, precum și un buton cu Citiți mai multe.
Folosind Visual Builder, adăugați o nouă secțiune standard în partea de sus a paginii blogului cu un rând cu lățime completă (1 coloană). Apoi inserați Modulul Post Slider Divi în noul rând.
Sub Setări post slider actualizați următoarele opțiuni:
Opțiuni de Conținut
- Număr postări: 3
Opțiuni de Design
- Font antet: Roboto (Majuscule)
- antet Dimensiunea fontului: 50px
- Culoare text antet: #edef5d
- Spațierea literelor din antet: 1px
- Dimensiunea fontului corpului: 16
- Spațiere între litere: 1px
- Înălțimea liniei corpului: 1,4 em
- Meta Font: Open Sans, Italic, Majuscule
- Dimensiunea fontului meta: 18px
- Culoare meta text: #cccccc
- Înălțimea liniei meta: 2em
- Utilizați stiluri personalizate pentru buton: DA
- Buton Dimensiune text: 26px
- Culoarea textului butonului: #edef5d
- Lățimea chenarului butonului: 0px
- Pictograma butonului: >
- Afișați doar pictograma la trecerea cursorului pentru buton: NU
Salvează setările.
Opțiuni de Conținut Pentru Modulul Post Slider Divi
În fila de Conținut veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Orice lucru care controlează ceea ce apare în modulul tău va fi întotdeauna găsit în această filă.
Numărul Postărilor
Alegeți câte postări doriți să afișați în Slider.
Includeți Categorii
Alegeți ce categorii doriți să includeți în Slider.
Comandă de
Aici puteți ajusta ordinea în care sunt afișate postările.
Text Buton
Definiți textul care va fi afișat pe butonul „Citește mai mult”. lăsați necompletat pentru implicit ( Citește mai mult ).
Afișare Conținut
Afișarea întregului conținut nu va trunchia postările dvs. din slider. Afișarea extrasului va afișa doar textul extrasului.
Utilizați Extras de Postare Dacă Este Definit
Dezactivați această opțiune dacă doriți să ignorați fragmente definite manual și să le generați întotdeauna automat.
Lungimea Extrasului Automat
Definiți lungimea extraselor generate automat. Lăsați necompletat pentru implicit ( 270 )
Afișați Săgețile
Această setare va activa și dezactiva săgețile de navigare.
Afișați Comenzile
Această setare va activa și dezactiva butoanele cercului din partea de jos a Sliderului.
Afișați Butonul Citiți mai Mult
Această setare va activa și dezactiva butonul Citiți mai multe.
Afișează Meta Post
Această setare va activa și dezactiva secțiunea meta.
Afișați Imaginea Recomandată
Această setare va activa și dezactiva imaginea prezentată în slider.
Plasarea Imaginii
Selectați modul în care doriți să afișați imaginea prezentată în slidere.
Culoare de Fundal
Utilizați selectorul de culori pentru a alege o culoare de fundal pentru acest modul.
Imagine de Fundal
Încărcați imaginea dorită sau introduceți adresa URL a imaginii pe care doriți să o utilizați ca fundal pentru slider.
Poziția Imaginii de Fundal
Alegeți poziționarea CSS a imaginii de fundal pentru fiecare slider.
Dimensiunea Imaginii de Fundal
Alegeți dimensiunea imaginii de fundal CSS utilizate pentru fiecare slider.
Eticheta de Administrator
Acest lucru va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete vor apărea în blocul modulului din interfața Divi Builder.
Opțiuni de Design Pentru Modulul Post Slider Divi
În fila de Design veți găsi toate opțiunile de stil ale modulului, cum ar fi fonturi, culori, dimensiune și spațiere. Aceasta este fila pe care o veți folosi pentru a schimba modul în care arată modulul. Fiecare modul Divi are o listă lungă de setări de design pe care le puteți folosi pentru a schimba aproape orice.
Îndepărtați Umbra Interioară
Aceasta va elimina umbra interioară CSS pe care a aplicat-o tuturor sliderelor în mod implicit.
Utilizați Suprapunerea de Fundal
Când este activată, o culoare de suprapunere personalizată va fi adăugată deasupra imaginii de fundal și în spatele conținutului sliderului.
Culoare de Suprapunere de Fundal
Utilizați selectorul de culori pentru a alege o culoare pentru suprapunerea de fundal.
Utilizați Text Suprapus
Când este activată, se adaugă o culoare de fundal în spatele textului cursorului pentru a-l face mai lizibil pe imaginile de fundal.
Raza Chenarului Suprapus Text
Raza chenarului afectează cât de rotunjite sunt colțurile casetei de suprapunere de text. În mod implicit, colțurile au o margine ușor rotunjită de 3 pixeli. Puteți reduce această valoare la 0 pentru a crea o casetă dreptunghiulară sau puteți crește valoarea pentru a face colțurile și mai rotunjite.
Utilizați Efectul Parallax
Activarea acestei opțiuni va oferi imaginilor de fundal o poziție fixă pe măsură ce derulați.
Metoda Paralaxei
Aici puteți defini metoda folosită pentru efectul de paralaxă – CSS sau True Parallax.
Culoare Personalizată Pentru Săgeți
Când treceți cu mouse-ul peste un modul de slider, apar săgeți care permit vizitatorului să navigheze prin fiecare slider. În mod implicit, aceste săgeți moștenesc culoarea principală a textului sliderului. Cu toate acestea, puteți defini o culoare personalizată pentru aceste săgeți folosind această setare.
În cadrul fiecărui slider, elementele de navigare cu puncte apar sub conținutul sliderului. Aceste elemente permit utilizatorului să navigheze prin slider. Puteți defini o culoare personalizată care să fie utilizată pentru aceste elemente folosind selectorul de culori din această setare.
Culoarea Textului
Aici puteți alege dacă textul este deschis sau întunecat. Dacă aveți un slider cu un fundal întunecat, atunci alegeți text deschis, dacă au un fundal deschis, atunci folosiți un text întunecat.
Font Antet
Puteți schimba fontul textului antet selectând fontul dorit din meniul drop-down. Divi vine cu zeci de fonturi grozave alimentate de Fonturi Google. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina ta. De asemenea, puteți personaliza stilul textului folosind opțiunile aldine, cursive, majuscule și subliniere.
Dimensiunea Fontului Antetului
Aici puteți ajusta dimensiunea textului antetului. Puteți trage glisorul pentru a mări sau micșora dimensiunea textului sau puteți introduce valoarea dorită a dimensiunii textului direct în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Culoare Text Antet
În mod implicit, toate culorile textului din Divi vor apărea ca alb sau gri închis. Dacă doriți să schimbați culoarea textului antetului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.
Spațierea Literelor din Antet
Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul antetului, utilizați glisorul pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Înălțimea Liniei Antetului
Înălțimea liniei afectează spațiul dintre fiecare linie din textul antetului Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea dorită a spațierii în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Font Pentru Corp – Body
Puteți schimba fontul textului dvs. prin selectarea fontului dorit din meniul drop-down. Divi vine cu zeci de fonturi grozave alimentate de Fonturi Google. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina ta. De asemenea, puteți personaliza stilul textului folosind opțiunile aldine, cursive, majuscule și subliniere.
Dimensiunea Fontului Corpului
Aici puteți ajusta dimensiunea textului corpului dvs. Puteți trage glisorul pentru a mări sau micșora dimensiunea textului sau puteți introduce valoarea dorită a dimensiunii textului direct în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Culoarea Textului Corpului
În mod implicit, toate culorile textului din Divi vor apărea ca alb sau gri închis. Dacă doriți să schimbați culoarea corpului textului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.
Spațiere Între Literele din Textul Corpului
Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din corpul textului dvs., utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea dorită de spațiere în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Înălțimea Liniei Corpului
Înălțimea liniei afectează spațiul dintre fiecare linie a textului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Font Meta
Puteți schimba fontul meta textului dvs. selectând fontul dorit din meniul drop-down. Divi vine cu zeci de fonturi grozave alimentate de Fonturi Google. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina ta. De asemenea, puteți personaliza stilul textului folosind opțiunile aldine, cursive, majuscule și subliniere.
Dimensiunea Fontului Meta
Aici puteți ajusta dimensiunea meta-textului. Puteți trage glisorul pentru a mări sau micșora dimensiunea textului sau puteți introduce valoarea dorită a dimensiunii textului direct în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Culoare Text Meta
În mod implicit, toate culorile textului din Divi vor apărea ca alb sau gri închis. Dacă doriți să schimbați culoarea meta-textului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.
Spațierea Literelor Meta
Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din meta textul dvs., utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Înălțimea Liniei Meta
Înălțimea liniei afectează spațiul dintre fiecare linie a meta-textului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Padding de Sus
Această setare controlează spațiul interior dintre partea de sus a modulului și conținutul textului din modul. Dacă doriți să măriți sau să micșorați acest spațiu, introduceți valoarea dorită aici. De exemplu, pentru a reduce spațiul și dimensiunea totală a sliderului, puteți introduce o valoare de 100px. Alternativ, puteți introduce o valoare procentuală, cum ar fi 10%, pentru a face înălțimea mai dinamică.
Padding de Jos
Această setare controlează spațiul interior dintre partea de jos a modulului și conținutul textului din modul. Dacă doriți să măriți sau să micșorați acest spațiu, introduceți valoarea dorită aici. De exemplu, pentru a reduce spațiul și dimensiunea totală a sliderului, puteți introduce o valoare de 100px. Alternativ, puteți introduce o valoare procentuală, cum ar fi 10%, pentru a face înălțimea mai dinamică.
Utilizați Stiluri Personalizate Pentru Buton
Activarea acestei opțiuni va dezvălui diverse setări de personalizare a butoanelor pe care le puteți utiliza pentru a schimba aspectul butonului modulului dvs.
Dimensiunea Textului Butonului
Această setare poate fi utilizată pentru a mări sau a micșora dimensiunea textului din buton. Butonul se va scala pe măsură ce dimensiunea textului crește și scade.
Culoarea Textului Butonului
În mod implicit, butoanele preiau culoarea accentului temei, așa cum este definită în Personalizatorul temei. Această opțiune vă permite să atribuiți o culoare de text personalizată butonului din acest modul. Selectați culoarea personalizată folosind selectorul de culori pentru a schimba culoarea butonului.
Culoare de Fundal Pentru Buton
În mod implicit, butoanele au o culoare de fundal transparentă. Aceasta poate fi schimbată selectând culoarea de fundal dorită din selectorul de culori.
Lățimea Chenarului Butonului
Toate butoanele Divi au în mod implicit un chenar de 2 pixeli. Acest chenar poate fi mărit sau micșorat în dimensiune folosind această setare. Marginile pot fi eliminate prin introducerea unei valori de 0.
Culoarea Chenarului Butonului
În mod implicit, chenarele butoanelor preiau culoarea accentului temei, așa cum este definită în Personalizatorul temei. Această opțiune vă permite să atribuiți o culoare personalizată a marginii butonului din acest modul. Selectați culoarea personalizată folosind selectorul de culori pentru a schimba culoarea chenarului butonului.
Raza Chenarului Butonului
Raza chenarului afectează cât de rotunjite sunt colțurile butoanelor. În mod implicit, butoanele din Divi au o rază mică a marginii care rotunjește colțurile cu 3 pixeli. Puteți reduce acest lucru la 0 pentru a crea un buton pătrat sau îl puteți crește semnificativ pentru a crea butoane cu margini circulare.
Spațiere Între Literele din Butoane
Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul butonului dvs., utilizați glisorul de interval pentru a ajusta spațiul sau introduceți dimensiunea de spațiere dorită în câmpul de introducere din partea dreaptă a glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” urmând valoarea mărimii pentru a schimba tipul de unitate.
Font Pentru Buton
Puteți schimba fontul textului butonului selectând fontul dorit din meniul drop-down. Divi vine cu zeci de fonturi grozave alimentate de Fonturi Google. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina ta. De asemenea, puteți personaliza stilul textului folosind opțiunile aldine, cursive, majuscule și subliniere.
Adăugați Pictograma Butonului
Dacă dezactivați această setare, pictogramele vor fi eliminate de pe butonul dvs. În mod implicit, toate butoanele Divi afișează o pictogramă săgeată la trecerea cursorului.
Pictograma Butonului
Dacă pictogramele sunt activate, puteți utiliza această setare pentru a alege ce pictogramă să utilizați în butonul dvs. Divi are diverse pictograme din care să aleagă.
Culoarea Pictogramei Butonului
Ajustarea acestei setări va schimba culoarea pictogramei care apare în butonul dvs. În mod implicit, culoarea pictogramei este aceeași cu culoarea textului butoanelor dvs., dar această setare vă permite să reglați culoarea în mod independent.
Plasarea Pictogramei pe Buton
Puteți alege ca pictograma butonului să fie afișată în partea stângă sau în partea dreaptă a butonului.
Afișați Doar Pictograma la Trecerea Cursorului Pentru Buton
În mod implicit, pictogramele butoanelor sunt afișate numai la trecerea cursorului. Dacă doriți ca pictograma să apară întotdeauna, dezactivați această setare.
Culoare Text Buton Hover
Când butonul este trecut cu mouse-ul unui vizitator, această culoare va fi folosită. Culoarea va trece de la culoarea de bază definită în setările anterioare.
Culoarea de Fundal a Butonului Hover
Când butonul este trecut cu mouse-ul unui vizitator, această culoare va fi folosită. Culoarea va trece de la culoarea de bază definită în setările anterioare.
Culoarea Chenarului Buton Hover
Când butonul este trecut cu mouse-ul unui vizitator, această culoare va fi folosită. Culoarea va trece de la culoarea de bază definită în setările anterioare.
Raza Chenarului Buton Hover
Când butonul este trecut cu mouse-ul unui vizitator, această valoare va fi utilizată. Valoarea va trece de la valoarea de bază definită în setările anterioare.
Spațierea Între Literelor de pe Buton Hover
Când butonul este trecut cu mouse-ul unui vizitator, această valoare va fi utilizată. Valoarea va trece de la valoarea de bază definită în setările anterioare.
Opțiuni Avansate Pentru Modulul Post Slider Divi
În fila Avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat la oricare dintre multele elemente ale modulului. Puteți aplica, de asemenea, clase și ID-uri CSS personalizate la modul, care pot fi folosite pentru a personaliza modulul în fișierul style.css al Temei Copil.
ID CSS
Introduceți un ID CSS opțional pentru a fi utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea link-uri către anumite secțiuni ale paginii dvs.
Clasa CSS
Introduceți clase CSS opționale care vor fi utilizate pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema Divi Child sau în CSS-ul personalizat pe care îl adăugați la pagina sau site-ul dvs. folosind Opțiunile Temei Divi sau setările paginii Divi Builder.
CSS Personalizat
CSS personalizat poate fi aplicat și la modul și la oricare dintre elementele interne ale modulului. În secțiunea CSS personalizat, veți găsi un câmp de text în care puteți adăuga CSS personalizat direct la fiecare element. Intrările CSS în aceste setări sunt deja incluse în etichete de stil, așa că trebuie să introduceți doar reguli CSS separate prin punct și virgulă.
Animație Automată
Dacă doriți ca sliderul să alunece automat, fără ca vizitatorul să facă clic pe butonul următor, activați această opțiune și apoi reglați viteza de rotație de mai jos, dacă doriți.
Viteza Automată a Animației (în ms)
Aici puteți desemna cât de repede se estompează sliderul între fiecare slider, dacă opțiunea „Animațiune automată” este activată mai sus. Cu cât numărul este mai mare, cu atât este mai lungă pauza dintre fiecare rotație.
Continuați Glisarea Automată la Trecerea cu Mouse-ul
Activarea acestei funcții va permite glisarea automată să continue la trecerea mouse-ului.
Ascunde Conținut pe Mobil
Pe măsură ce dimensiunea ecranului devine mai mică pe dispozitivele mobile, spațiul imobiliar al ecranului devine mai prețios. Uneori este o idee bună să dezactivați unele elemente de slider mai puțin importante pentru a reduce dimensiunea sliderului și a-l face mai lizibil. Activarea acestei setări va ascunde conținutul text al sliderului pe mobil.
Ascunde CTA pe Mobil
Pe măsură ce dimensiunea ecranului devine mai mică pe dispozitivele mobile, spațiul imobiliar al ecranului devine mai prețios. Uneori este o idee bună să dezactivați unele elemente de glisare mai puțin importante pentru a reduce dimensiunea sliderului și a-l face mai lizibil. Activarea acestei setări va ascunde butoanele de apel la acțiune ale sliderului pe mobil.
Afișați Imaginea/Video pe Mobil
Pe măsură ce dimensiunea ecranului devine mai mică pe dispozitivele mobile, spațiul imobiliar al ecranului devine mai prețios. Uneori este o idee bună să dezactivați unele elemente de slider mai puțin importante pentru a reduce dimensiunea sliderului și a-l face mai lizibil. Activarea acestei setări va afișa imagini de slidere și videoclipuri pe mobil (sunt dezactivate în mod implicit).
Activați Dezactivați
Această opțiune vă permite să controlați pe ce dispozitive apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, telefoane inteligente sau computere desktop. Acest lucru este util dacă doriți să utilizați diferite module pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.
