Modulul de Acordeon Divi

Cuprins: arată

Modulul de Acordeon Divi – Cum să adăugați, să configurați și să personalizați modulul de acordeon Divi.

Modulul de acordeon Divi este o modalitate excelentă de a consolida informațiile într-un singur sistem. Acordeoanele sunt foarte asemănătoare cu filele, cu excepția faptului că elementele sunt afișate într-o listă verticală. Când este deschis un nou articol din listă, elementul deschis anterior este închis și este afișat conținutul noului articol.

Vezi Demo Modulul de Acordeon Divi

Cum să Adăugați un Modul de Acordeon Divi pe Pagina dvs.

Înainte de a putea adăuga un modul de acordeon la 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 vă 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 grozave despre cum să folosiți elementele de rând și secțiune ale lui Divi.

Găsiți modulul acordeon î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 „acordeon” și apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul de acordeon! 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: Prezentarea Caracteristicilor Produsului Folosind Modulul de Acordeon Divi

Pentru acest exemplu, vă voi arăta cum să adăugați caracteristici de produs la o pagină de produs utilizând modulul acordeon.

Iată Modulul de Acordeon Divi în acțiune:

Să începem.

Utilizați generatorul vizual pentru a adăuga o secțiune obișnuită cu un rând de 1/2 1/2 (2 coloane). Editați setările secțiunii pentru a schimba culoarea de fundal la #d94b6a (roz).

În coloana din stânga, adăugați imaginea produsului.

În coloana din dreapta, adăugați un modul text care să servească drept antet deasupra modulului acordeon.

În cele din urmă, adăugați Modulul de Acordeon Divi direct sub Modulul Text din coloana din dreapta.

Actualizați setările acordeonului după cum urmează:

Opțiuni de Conținut

Deschideți Comutați – Culoarea de Fundal: #ffffff
Comutare Închisă – Culoare de Fundal: rgba(255,255,255,0.83)

Opțiuni de Proiectare

Culoare pictogramă: #d94b6a
Deschideți Comutați – Culoarea Textului: #333333
Comuntare Închisă – Culoarea Textului: #333333
Comutați Font: Raleway
Comutați Dimensiunea Fontului: 20px

Salvează setările

Sub fila Conținut, faceți clic pe + Adăugați un articol nou pentru a adăuga primul acordeon la modul.

Actualizați setările individuale ale acordeonului după cum urmează:

Opțiuni de Conținut

Titlu: [introduceți titlul]
Conținut: [introduceți conținut]

Actualizați setările individuale ale acordeonului

Notă:
Deoarece am configurat deja opțiunile de design pentru setările pentru Modulul de Acordeon Divi, nu este nevoie să actualizați designul setărilor individuale de acordeon decât dacă doriți să suprascrieți setările modulului.

Acum duplicați elementul acordeon pe care tocmai l-ați creat de două ori și actualizați titlul și conținutul pentru fiecare dintre duplicate, după cum este necesar.

Asta e! Acordeonul arată grozav și păstrează conținutul compact, încadrându-se frumos în secțiunea paginii.

Rezultat Final - Modulul de Acordeon Divi — Rezultat Final – Modulul de Acordeon Divi

Opțiuni de Conținut Pentru Acordeon

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

Culoarea de Fundal – Deschideți Comutați

Culoarea de fundal a fiecărui comutator pentru acordeon este diferită atunci când este în starea sa deschisă și închisă. Aici puteți regla culoarea de fundal a comutatoarelor deschise. Selectați culoarea dorită din selectorul de culori pentru a o aplica pe modulul dvs.

Culoarea de Fundal – Comutare Închisă

Culoarea de fundal a fiecărui comutator pentru acordeon este diferită atunci când este în starea sa deschisă și închisă. Aici puteți regla culoarea de fundal a comutatoarelor închise. Selectați culoarea dorită din selectorul de culori pentru a o aplica pe modulul dvs.

Imagine de Fundal

Dacă este definită, această imagine va fi folosită ca fundal pentru acest modul. Pentru a elimina o imagine de fundal, ștergeți pur și simplu adresa URL din câmpul de setări. Imaginile de fundal vor apărea deasupra culorilor de fundal, ceea ce înseamnă că culoarea de fundal nu va fi vizibilă atunci când este aplicată o imagine de fundal.

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 a Acordeonului

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

Culoarea Pictogramei

Aici puteți ajusta culoarea pictogramei care apare în interiorul fiecărui comutator, în partea dreaptă interioară a dreptunghiului de comutare. Dacă ajustați culoarea de fundal a comutatorului dvs., poate doriți să ajustați culoarea pictogramei pentru a completa mai bine culoarea personalizată.

Culoarea Textului – Deschideți Comutați

Culoarea textului fiecărei comutatoare pentru acordeon este diferită atunci când este în starea deschisă și închisă. Aici puteți ajusta culoarea textului comutatoarelor deschise. Selectați culoarea dorită din selectorul de culori pentru a o aplica pe modulul dvs.

Culoarea Textului – Comutare Închisă

Culoarea textului fiecărei comutatoare pentru acordeon este diferită atunci când este în starea deschisă și închisă. Aici puteți ajusta culoarea textului comutatoarelor închise. Selectați culoarea dorită din selectorul de culori pentru a o aplica pe modulul dvs.

Font Pentru Corp – Body Font

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 – Body Font Size

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 – Body Text Color

Î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 Litere În Corp – Body Letter Spacing

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 Pentru Textul din Corp – Body Line Height

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

Fontul Comutați – Toggle Font

Puteți schimba fontul textului dvs. de comutare 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 Comutați – Toggle Font Size

Aici puteți ajusta dimensiunea textului de comutare. 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 Comutați – Toggle Text Color

În mod implicit, toate culorile textului din Divi vor apărea ca alb sau gri închis. Dacă doriți să schimbați culoarea textului de comutare, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea Literelor Comutați – Toggle Letter Spacing

Spațierea dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul dvs. de comutare, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea dorită de spațiere î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 Comutați – Toggle Line Height

Înălțimea liniei afectează spațiul dintre fiecare linie a textului dvs. de comutare 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.

Utilizați Border

Activarea acestei opțiuni va plasa un chenar în jurul modulului dvs. Acest chenar poate fi personalizat folosind următoarele setări condiționate.

Culoarea Chenarului – Border Color

Această opțiune afectează culoarea chenarului dvs. Selectați o culoare personalizată din selectorul de culori pentru a o aplica la chenar.

Lățimea Chenarului – Border Width

În mod implicit, marginile au o lățime de 1 pixel. Puteți crește această valoare trăgând glisorul de interval sau introducând o valoare personalizată în câmpul de introducere din dreapta glisorului. Unități de măsură personalizate acceptate, ceea ce înseamnă că puteți schimba unitatea implicită de la „px” la altceva, cum ar fi em, vh, vw etc.

Stil de Chenar – Border Style

Chenarele acceptă opt stiluri diferite, inclusiv: solid, punctat, punctat dublu, canelură, creastă, inset și start. Selectați stilul dorit din meniul drop-down pentru a-l aplica la chenar.

Padding Personalizat

Padding este spațiul adăugat în interiorul modulului, între marginea modulului și elementele sale interne. Puteți adăuga valori personalizate de padding pe oricare dintre cele patru părți ale modulului. Pentru a elimina marja personalizată, ștergeți valoarea adăugată din câmpul de introducere. În mod implicit, aceste valori sunt măsurate în pixeli, dar puteți introduce unități de măsură personalizate în câmpurile de introducere.

Opțiuni Avansate Acordeon

Î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. De asemenea, puteți aplica 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ă.

Vizibilitate

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

Opțiuni Individuale de Conținut Pentru Acordeon

Titlu

Titlul va fi afișat atunci când articolul este închis în acordeon, precum și deasupra textului conținutului acordeonului când articolul a fost deschis.

Conţinut

Conținutul este afișat în caseta articolului când articolul acordeon a fost deschis, sub titlu.