Divi Plugin Highlight: Table Maker

Deși Divi are o mulțime de module, nu are un modul pentru a construi tabele. Din fericire, există o soluție. Table Maker este un plugin terță parte care vă permite să construiți tabele complet personalizabile cu Divi Builder. Pentru a vă ajuta să decideți dacă acesta este pluginul potrivit pentru site-ul dvs. Divi, în acest articol, vom arunca o privire la Table Maker și vom vedea ce poate face.

Instalarea Table Maker

Instalarea este simplă și simplă.

1. Navigați la Pluginuri > Adăugare nouă > Încărcare plugin
2. Faceți clic pe Alegeți fișierul
3. Găsiți fișierul zip al pluginului pe computer și selectați-l
4. Faceți clic pe Instalare acum
5. Faceți clic pe Activați

Modulul Table Maker

Un nou modul este adăugat la Divi Builder numit Table Maker. Să ne uităm la principalele caracteristici.

Fila Conținut Table Maker

Fila Conținut include o zonă pentru submodule. Acestea sunt utilizate pentru a crea coloanele pentru tabel. Pentru coloane, puteți regla numărul antetului și subsolului și dimensiunea coloanelor și rândurilor, reglați punctele de întrerupere pentru fiecare tip de dispozitiv, activați derularea și alegeți pictograme, butoane și imagini. Pictogramele, butoanele și imaginile au personalizări pentru dimensiune, culoare, plasare etc.

Submodule de coloană

Submodulele definesc coloanele și includ un câmp pentru a adăuga conținut la rânduri. Funcționează la fel ca un editor de cod în care fiecare rând este numerotat. De asemenea, puteți regla lățimea, pictogramele, butoanele și imaginile.

Prima linie este titlul coloanei în mod implicit, dar puteți schimba acest lucru dacă nu doriți să aveți un antet. Puteți include HTML, ceea ce înseamnă că va trebui să evitați anumite caractere care sunt utilizate pentru marcare. De asemenea, puteți adăuga CSS, shortcodes, iFrames, pictograme, imagini, butoane și multe altele.

Coloanele includ personalizări de proiectare pentru fiecare element, inclusiv textul, fundalul, celulele, celulele antetului și subsolului etc.

Creați câte coloane doriți. Le puteți stiliza independent, extinde stilurile de la una la alta, etc. Am adăugat 4 coloane și am ajustat separat culorile și lățimile fiecărei coloane.

Anteturi și subsoluri

Puteți seta numărul de coloane pentru anteturi și subsoluri. În mod implicit, are 1 antet și nici un subsol. În acest exemplu, am setat primele 2 ca anteturi și ultima ca subsol. Culorile sunt decorate independent.

Puteți face același lucru și pentru rânduri. În acest exemplu, am setat 2 rânduri ca anteturi (cele două din stânga) și unul ca subsol (cel din dreapta).

Defilare tabel

Defilarea tabelului oferă defilare atât orizontală, cât și verticală. Puteți face anteturile coloanei și rândurilor lipicioase, dacă doriți. Acest lucru îi menține în poziție, astfel încât să nu se deruleze afară din vizualizare. În acest exemplu, am activat derularea și am făcut anteturile lipicioase. Am adăugat o mulțime de coloane, astfel încât să poată derula vertical. Anteturile de rând rămân la locul lor.

Icoane de masă

Puteți adăuga câte pictograme doriți la fiecare celulă. Configurați o pictogramă implicită și alegeți separat pictogramele pentru fiecare celulă. Alegeți pictograma implicită și reglați dimensiunea și culoarea din fila Conținut.

Pictogramele sunt adăugate la celulele specifice în care doriți să fie afișate utilizând eticheta pictogramă din zona de conținut a submodulelor. Puteți înlocui pictograma implicită și setați o valoare implicită pentru această coloană selectând-o din fila pictogramă din submodul și puteți introduce numele oricărei pictograme specifice pe care doriți să o afișeze. Pagina de vânzări din Piața temelor elegante oferă un link către lista de pictograme și numele acestora.

Butoane de masă

Butoanele de masă sunt, de asemenea, adăugate folosind etichete. Adăugați un buton implicit în fila Conținut. De asemenea, puteți stiliza butonul din aceste setări. Înlocuiți butonul implicit cu aceleași setări în fiecare submodul de coloană.

Adăugați butonul la fiecare celulă cu eticheta butonului în zona de conținut a submodulului. Schimbați textul de pe buton adăugându-l în etichete. În acest exemplu, am adăugat butonul implicit câteva celule și am schimbat textul pentru al doilea buton.

Imagini de masă

Puteți adăuga imagini, pictograme și alte tipuri de conținut în celule. Setați calitatea imaginii, proporția, scara și alinierea orizontală și verticală. Are o mulțime de opțiuni pentru imagini.

Chiar dacă imaginile sunt adăugate în galerie, acestea nu se afișează până nu le spuneți în ce celulă să se afișeze. Acest lucru se face folosind etichete. Tastând eticheta de imagine de deschidere, eticheta de închidere este adăugată automat și imaginea se afișează în acea celulă. Puteți să îl includeți în celule cu alt conținut. Adăugați un număr între etichete pentru a specifica o anumită imagine de afișat.

Fila de proiectare Table Maker

Fila Proiectare include setări pentru cadrul tabelului, dungi, celule, text, antet, subsol, dimensionare, spațiere, margine etc. Iată principalele setări.

Cadru de masă

Fila de proiectare include personalizări pentru cadrul tabelului, celulele, textul, antetul, rândul, subsolul, dimensionarea, spațierea, chenarul etc. Acesta este cadrul tabelului. Tipul de cadru implicit folosește Gaps, care plasează puțin spațiu între celule. Acesta este None, care elimină marginile dintre celule.

Pentru Lacune, puteți ajusta golurile coloanei și rândurilor independent. Am mărit decalajul coloanei la 8 px și rândul la 4 px.

Liniile plasează o margine în jurul fiecărei celule. Aveți control asupra stilului, culorii și grosimii liniilor. Aceasta este valoarea implicită.

În acest exemplu, am setat stilul pe punctat, am schimbat culoarea și am ajustat lățimea liniei la 3 px.

Dungi de masă

Table Stripes creează un efect de bandă ca o foaie de calcul standard. Puteți alege unde se aplică, alege comanda și regla nuanța, saturația și luminozitatea. Acestea sunt setările implicite.

Pentru acest exemplu, am ajustat nuanța benzii la 86 de grade, saturația la 172% și luminozitatea la 82%. Toate cele trei ajustări funcționează împreună pentru a crea opțiuni de culoare interesante.

Pentru acest exemplu, am ajustat culoarea celulelor de tabel, a celulelor de antet și a celulelor de antet de coloană.

Pentru acest exemplu, am adăugat o umbră de casetă # 1 la celulele de antet și o umbră de casetă # 3 la celulele de antet de rând. Am centrat alinierea orizontală și verticală a textului pentru fiecare tip de celulă individual. De asemenea, am adăugat mai mult spațiu pentru goluri.

Stil antet și subsol

Puteți stiliza culorile pentru textul antetului și subsolului și celulelor în mod independent. În acest exemplu, am adăugat un subsol, am făcut textul alb și cu majuscule, am setat culoarea celulei la albastru închis și am adăugat o umbră de casetă la celule.

În acest exemplu, am ajustat independent marginile pentru celulele, celulele de antet și celulele de subsol.

Exemple de Table Maker

Am creat un tabel cu 5 coloane, un antet de coloană și un antet de rând. Antetul rândului are un buton de cumpărături care vă duce la pagina produsului pentru fiecare produs și o imagine a produsului. Ambele anteturi folosesc un fundal negru, colțuri rotunjite și fonturi din aspect.

Celulele folosesc dungi, un font mai mare din aspect și colțuri rotunjite. Ultima coloană afișează pictograme pentru a arăta dacă un produs este în stoc. Am adăugat o umbră de cutie la fiecare dintre anteturi și celule. Cadrul tabelului folosește goluri cu 4 pixeli pentru spațiul coloanei și 7 pixeli pentru spațiul rândului.

Iată același design fără imaginile din antetul rândului.

Iată aspectul cu imaginile produsului așa cum apare pe mobil. Reduce tabelul la 2 coloane, una fiind antetul rândului. Acesta îl rupe prin coloane.

Puteți avea, de asemenea, să se rupă pe rânduri. Acest exemplu elimină imaginile și arată tabelul rupt pe rânduri.

Acesta arată rândurile ca un acordeon. Dacă faceți clic pe unul, acesta se deschide pentru a-și afișa conținutul.

De unde să cumpărați Table Maker

Puteți cumpăra Table Maker de pe Divi Marketplace. Costă 35 USD pentru site-uri web nelimitate și include o garanție de 30 de zile de returnare a banilor și un an de asistență și actualizări. Documentația este furnizată sub formă de instrucțiuni video și text.

Gânduri de sfârșit

Acesta este aspectul nostru la Table Maker pentru Divi. Are o mulțime de caracteristici pentru a construi și personaliza tabele pentru Divi, inclusiv câteva pe care nu le-am acoperit aici. Am avut nevoie doar de documentație pentru a vedea cum să folosesc imagini, pictograme și butoane.

La început, mi s-a părut puțin ciudat să adăugați butoane, pictograme și imagini la masă folosind etichete, dar este ușor de făcut și, din moment ce conținutul celulelor este adăugat cu un editor de cod, vă oferă mult mai mult control decât dvs. ' în mod normal am.

Table Maker este un plugin excelent pentru crearea de tabele cu Divi. Abilitatea de a adăuga conținut, cum ar fi HTML, shortcodes, iFrames, CSS etc., îmbunătățește foarte mult tipurile de tabele pe care le puteți crea. Dacă sunteți interesat să vă creați propriile mese personalizate cu Divi, Table Maker merită o privire.

Vrem sa auzim de la tine. Ați încercat Table Maker pentru Divi? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin PCH.Vector / shutterstock.com