Cum se creează un tabel receptiv cu derulare orizontală în Divi

Crearea unui tabel receptiv poate fi o provocare, mai ales dacă aveți un tabel cu multe coloane. O modalitate excelentă de a rezolva această problemă este de a adăuga capacitatea de derulare orizontală la masă. Un tabel cu scroll orizontal rezolvă două probleme principale. În primul rând, permite proiectantului să păstreze spațiul necesar pentru conținutul tabelului (coloanele cu adevărat înguste vor face ca conținutul să se spargă prea mult). Și în al doilea rând, permite utilizatorului să vizualizeze conținutul tabelului ușor de citit pe dispozitivele mobile.

În acest tutorial, vă vom arăta cum să utilizați Divi pentru a construi un tabel complet personalizat cu scroll orizontal. Vă vom arăta cum să adăugați funcționalitatea de derulare orizontală la coloanele care depășesc containerul de masă. În plus, vom adăuga chiar și câteva butoane de derulare orizontale pe masă pentru a stimula UX-ul. Toate acestea fără plugin!

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra tabelului receptiv cu scroll orizontal pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

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

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Construirea unui tabel receptiv cu derulare orizontală

Partea 1: Construirea coloanelor tabelului

Pentru acest design de tabel, vom crea coloanele noastre de tabel folosind rânduri. Pentru a face acest lucru, vom folosi proprietatea flex (CSS personalizat) pentru a alinia rândurile orizontal, precum coloanele.

Actualizați setările secțiunii

Înainte de a adăuga un rând, deschideți setările secțiunii din secțiunea obișnuită implicită și adăugați următorul CSS personalizat la elementul principal:

display:flex;
overflow-y:scroll !important;

Acest lucru va forța depășirea orizontală a secțiunii să aibă o funcționalitate de derulare, precum și să ne ofere proprietatea flex necesară pentru a organiza rândurile noastre orizontal în loc de vertical.

Adăugați rând

Acum că secțiunea CSS este la locul său, creați un rând cu o coloană în cadrul secțiunii.

Setări rând

Deschideți setările rândului și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 100%

Acest lucru se va asigura că coloanele noastre de tabel nu au nicio marjă suplimentară între modulele de text pe care le vom adăuga pentru elementele noastre de tabel.

Apoi dați rândului o margine dreaptă după cum urmează:

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: #cccccc

Apoi actualizați umplutura:

• Căptușeală: 0 px sus, 0 px jos

Sub fila avansată, dați rândului o clasă CSS personalizată după cum urmează:

• Clasa CSS: et-scroll-table-column

Vom avea nevoie de acest lucru pentru codul personalizat mai târziu.

Crearea articolelor de tabel cu module de text

Pentru a crea elementele de tabel în fiecare rând (sau coloană de tabel), vom folosi module de text.

Adăugați un modul de text

Conținut text

Apoi, adăugați textul „Element tabel” la conținutul corpului modulului text.

Proiectare text

Sub fila Proiectare, actualizați următoarele:

• Alinierea textului: centru
• Înălțime: 80 px

• Lățimea marginii drepte: 1 px
• Culoarea chenarului inferior: #cccccc

Această margine se va potrivi cu marginea dreaptă a rândului.

Trimiteți text CSS

Pentru a vă asigura că textul din modul rămâne centrat vertical și orizontal, adăugați următorul CSS la Elementul principal sub fila avansată:

display:flex;
align-items:center;
justify-content: center;

Modul text duplicat pentru mai multe articole de tabel

Acum că a fost creat primul nostru element de tabel, copiați modulul text (de câte ori este nevoie) pentru a crea elemente de tabel suplimentare în rând.

Crearea antetului coloanei tabelului

Trebuie să transformăm modulul de text de sus în coloana Titlu a tabelului. Pentru aceasta, deschideți setările modulului de text de sus, actualizați eticheta din vizualizarea Straturi la „Heading” și adăugați textul „Heading” cu conținutul corpului.

Apoi actualizați culoarea de fundal.

• Fundal: # 333333

Și actualizați designul textului după cum urmează:

• Greutatea fontului textului: Bold
• Stil de text text: TT
• Culoarea textului textului: #ffffff

Duplicați rândul pentru mai multe coloane de tabel

Acum că primul rând este complet, putem duplica rândul pentru a crea câte coloane de tabel este necesar pentru tabel. Pentru acest design, vom reproduce rândul de opt ori pentru a crea un total de nouă rânduri.

Partea 2: Proiectarea coloanei tabelului lipicios cu titluri verticale

Rândul din stânga (sau primul rând) va servi drept titluri verticale pentru tabelul nostru. Mai întâi, trebuie să actualizăm fundalul rândului și fiecare dintre modulele de text, astfel încât să aibă același design cu titlurile din partea de sus a fiecărei coloane. Apoi, vom face ca întregul rând să fie lipicios, astfel încât acesta să rămână pe loc în timp ce utilizatorul se derulează orizontal pentru a vizualiza coloanele tabelului ascunse.

Actualizați fundalul rândului

Pentru aceasta, deschideți setările pentru primul rând și actualizați culoarea de fundal:

• Culoare fundal: # 333333

Actualizați modulele text

Apoi, deschideți setările pentru modulul de text superior care conține titlul. Faceți clic dreapta pe grupul de opțiuni de text și selectați Extindeți stilurile de text. În fereastra pop-up Extinde stiluri, alegeți să extindeți stilurile textului la Toate textele din această coloană . Apoi faceți clic pe butonul Extindeți.

Apoi selectați multiplă toate modulele de text din rând (țineți apăsat ctrl (sau cmd) și faceți clic pe fiecare) și actualizați conținutul corpului cu textul „Heading”.

Adăugați sigla

Deoarece nu avem nevoie de titlul de sus din această coloană, vom adăuga o siglă în tabel.

Deschideți setările pentru modulul de text din partea de sus din primul rând.

Apoi ștergeți textul corpului.

Apoi adăugați sigla (asigurați-vă că are aproximativ 40 px cu 40 px) ca imagine de fundal. Asigurați-vă că dimensiunea imaginii de fundal este setată la „Dimensiune reală”.

Făcând rândul titlurilor verticale lipicioase

Pentru a face rândul lipicios, adăugați următorul CSS personalizat la elementul principal:

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(Puteți ignora oricare dintre erorile de cod care vor apărea utilizând proprietatea lipicioasă.)

Pentru a vă asigura că rândul lipicios rămâne vizibil deasupra celorlalte rânduri, actualizați indexul Z:

• Indicele Z: 13

Partea 3: Actualizarea secțiunii din tabel

Acum, când elementele tabelului sunt toate la locul lor, putem actualiza secțiunea (containerul de masă) cu o dimensiune specifică și un overflow.

Deschideți setările secțiunii și adăugați o culoare de fundal:

• Culoare fundal: #ffeaef

Apoi actualizați dimensiunea și spațiul după cum urmează:

• Lățime: 100%
• Lățime maximă: 900 px
• Marja: 10vh top
• Căptușeală: 0 px sus, 0 px jos

Apoi adăugați următoarea clasă CSS:

• Clasa CSS: et-scroll-table

Și actualizați depășirea:

• Depășire orizontală: derulați
• Vertical Overflow: Ascuns

(Notă: avem deja „overflow: scroll” în secțiune ca CSS personalizat, astfel încât funcționalitatea scroll să fie în vigoare și pentru constructorul vizual.)

Partea 4: Adăugarea butoanelor de derulare orizontală

Deoarece funcționalitatea de derulare orizontală este ușor de văzut pe desktop, vom adăuga butoane de derulare orizontală pentru UX mai bun.

Adăugați secțiune

Pentru aceasta, creați o nouă secțiune obișnuită.

Deschideți setările secțiunii și eliminați umplutura implicită:

• Căptușeală: 0 px sus, 0 px jos

Adăugați rând

Acordați secțiunii un rând cu o coloană.

Și actualizați setările rândului după cum urmează:

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 900 px
• Căptușeală: 10 px sus, 10 px jos, 10 px dreapta

Creați butonul de derulare stânga

Pentru a crea butonul de derulare din stânga, adăugați un modul de blurb în coloană / rând.

Scoateți titlul implicit și conținutul corpului și adăugați o pictogramă săgeată la stânga.

Sub fila Proiectare, actualizați următoarele:

• Culoare pictogramă: # 333333
• Aliniere imagine / pictogramă: centru
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 40 px
• Lățimea conținutului: 100%
• Lățime: 50 px

Apoi acordați blurbului o clasă CSS:

• Clasa CSS: et-scroll-left

Acest lucru este necesar pentru a adăuga funcția de derulare la clic pe butonul / butonul cu codul nostru mai târziu.

Creați butonul de derulare dreapta

Pentru a crea butonul de parcurgere din dreapta, copiați comanda și actualizați pictograma cu o săgeată la dreapta.

Apoi actualizați clasa CSS:

• Clasa CSS: et-scroll-right

Pentru a alinia butonul orizontal, deschideți setarea pentru coloană și adăugați următoarele CSS personalizate:

display:flex;
justify-content:flex-end;

Partea 5: Adăugarea codului personalizat

Pentru partea finală a acestui tutorial, trebuie să adăugăm CSS necesar pentru a seta o lățime minimă pentru rânduri (care sunt de fapt coloanele noastre de tabel) și codul JS necesar pentru a adăuga funcționalitatea de derulare la butoane.

Pentru a adăuga codul, adăugați un modul de cod sub al doilea blurb.

În caseta de cod, lipiți următorul CSS asigurându-vă că înfășurați codul în etichetele de stil necesare.

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

Sub codul CSS, lipiți următorul jQuery asigurându-vă că înfășurați codul cu etichetele de script necesare.

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

Actualizarea lățimii coloanei

Dacă doriți să actualizați lățimea minimă a fiecărei coloane a tabelului, puteți modifica valoarea lățimii minime în CSS.

Actualizarea numărului de coloane pe scroll

În prezent, făcând clic pe butoane va derula orizontal (stânga sau dreapta) o distanță egală cu două lățimi de coloană. Pentru a modifica numărul de coloane din scroll, actualizați numărul din dreapta (în prezent numărul 2) în valoarea variabilei scrollByColumnNumber .

Adăugarea culorilor alternative ale coloanelor

În acest moment, culoarea de fundal a secțiunii determină culoarea tuturor coloanelor (sau rândurilor) tabelului. Dacă doriți să creați culori alternative pentru acele coloane, utilizați selecția multiplă pentru a selecta fiecare rând și adăugați o culoare albă de fundal la fiecare dintre ele.

Rezultat final

Acum verificați rezultatul final!

Iată designul final al tabelului de pe desktop.

Și aici este funcționalitatea de derulare orizontală pe desktop și mobil.

Gânduri finale

Indiferent cât de departe am ajuns în lumea web design-ului, tabelele par să-și aibă întotdeauna locul. Acestea continuă să ofere o soluție valoroasă pentru organizarea conținutului într-un mod pe care utilizatorii îl înțeleg. Acest tabel cu defilare orizontală ar trebui să fie util pentru o gamă largă de cazuri de utilizare. Și, poate cea mai bună parte, puteți actualiza conținutul tabelului (prin intermediul editorului încorporat Divi) și puteți stiliza tabelul în nenumărate moduri creative folosind constructorul vizual.

Pentru mai multe informații despre crearea de tabele responsive în WordPress, consultați postarea noastră despre Cum să creați tabele responsive în WordPress.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!