Come creare una tabella reattiva con scorrimento orizzontale in Divi

Creare una tabella reattiva può essere una sfida, soprattutto se hai una tabella con molte colonne. Un ottimo modo per risolvere questo problema consiste nell'aggiungere alla tabella la funzionalità di scorrimento orizzontale. Una tabella con scorrimento orizzontale risolve due problemi principali. Innanzitutto, consente al progettista di mantenere la spaziatura necessaria per il contenuto della tabella (colonne molto strette faranno sì che il contenuto si unisca troppo insieme). E in secondo luogo, consente all'utente di visualizzare il contenuto della tabella di facile lettura sui dispositivi mobili.

In questo tutorial, ti mostreremo come utilizzare Divi per creare una tabella completamente personalizzata con scorrimento orizzontale. Ti mostreremo come aggiungere la funzionalità di scorrimento orizzontale alle colonne che traboccano il contenitore della tabella. Inoltre, aggiungeremo anche alcuni pulsanti di scorrimento orizzontale alla tabella per potenziare l'esperienza utente. Tutto questo senza plugin!

Iniziamo.

Sbirciata

Ecco una rapida occhiata alla tabella reattiva con scorrimento orizzontale che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Costruire una tabella reattiva con scorrimento orizzontale

Parte 1: costruire le colonne della tabella

Per questo design della tabella, creeremo le nostre colonne della tabella usando le righe. Per fare ciò utilizzeremo la proprietà flex (Custom CSS) per allineare le righe orizzontalmente come le colonne.

Aggiorna le impostazioni della sezione

Prima di aggiungere una riga, apri le impostazioni della sezione della sezione regolare predefinita e aggiungi il seguente CSS personalizzato all'elemento principale:

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

Questo forzerà l'overflow orizzontale della sezione ad avere una funzionalità di scorrimento e ci darà la proprietà flex necessaria per organizzare le nostre righe orizzontalmente anziché verticalmente.

Aggiungi riga

Ora che la sezione CSS è a posto, crea una riga a una colonna all'interno della sezione.

Impostazioni riga

Apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 100%

Ciò assicurerà che le nostre colonne della tabella non abbiano alcun margine extra tra i moduli di testo che aggiungeremo per i nostri elementi della tabella.

Quindi dai alla riga un bordo destro come segue:

• Larghezza bordo destro: 1px
• Colore bordo destro: #cccccc

Quindi aggiorna il riempimento:

• Imbottitura: 0px in alto, 0px in basso

Nella scheda Avanzate, assegna alla riga una Classe CSS personalizzata come segue:

• Classe CSS: et-scroll-table-column

Ne avremo bisogno per il codice personalizzato in seguito.

Creazione di elementi della tabella con moduli di testo

Per creare gli elementi della tabella all'interno di ogni riga (o colonna della tabella), utilizzeremo i moduli di testo.

Modulo Aggiungi testo

Contenuto del testo

Quindi, aggiungi il testo "Elemento tabella" al contenuto del corpo del modulo di testo.

Progettazione del testo

Nella scheda Progettazione, aggiorna quanto segue:

• Allineamento del testo: centro
• Altezza: 80 px

• Larghezza bordo destro: 1px
• Colore bordo inferiore: #cccccc

Questo bordo corrisponderà al bordo destro della riga.

Testo CSS

Per assicurarti che il testo all'interno del modulo rimanga centrato verticalmente e orizzontalmente, aggiungi il seguente CSS all'Elemento principale nella scheda Avanzate:

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

Modulo di testo duplicato per più elementi della tabella

Ora che il nostro primo elemento della tabella è stato creato, duplica il modulo di testo (tutte le volte che è necessario) per creare elementi aggiuntivi della tabella all'interno della riga.

Creazione dell'intestazione della colonna della tabella

Dobbiamo trasformare il modulo di testo più in alto nell'intestazione della colonna della tabella. Per farlo, apri le impostazioni del modulo di testo in alto, aggiorna l'etichetta nella vista Livelli su "Intestazione" e aggiungi il testo "Intestazione" con il contenuto del corpo.

Quindi aggiorna il colore di sfondo.

• Sfondo: #333333

E aggiorna il design del testo come segue:

• Peso del carattere del testo: grassetto
• Stile del carattere del testo: TT
• Colore del testo del testo: #ffffff

Duplica la riga per più colonne della tabella

Ora che la prima riga è completa, possiamo duplicare la riga per creare tutte le colonne della tabella necessarie per la tabella. Per questo disegno, duplicheremo la riga otto volte per creare un totale di nove righe.

Parte 2: Progettare la colonna della tabella adesiva con intestazioni verticali

La riga all'estrema sinistra (o prima riga) servirà come intestazioni verticali per la nostra tabella. Innanzitutto, dobbiamo aggiornare lo sfondo della riga e ciascuno dei moduli di testo in modo che abbiano lo stesso design delle intestazioni nella parte superiore di ogni colonna. Quindi, renderemo l'intera riga appiccicosa in modo che rimanga in posizione mentre l'utente scorre orizzontalmente per visualizzare le colonne della tabella nascoste.

Aggiorna sfondo riga

Per fare ciò, apri le impostazioni per la prima riga e aggiorna il colore di sfondo:

• Colore di sfondo: #333333

Aggiorna moduli di testo

Quindi, apri le impostazioni per il modulo di testo in alto contenente l'intestazione. Fare clic con il pulsante destro del mouse sul gruppo di opzioni di testo e selezionare Estendi stili di testo. Nel popup Estendi stili, scegli di estendere gli stili del testo a Tutti i testi in questa colonna . Quindi fare clic sul pulsante Estendi.

Quindi seleziona più moduli di testo all'interno della riga (tieni premuto ctrl (o cmd) e fai clic su ciascuno di essi) e aggiorna il contenuto del corpo con il testo "Intestazione".

Aggiungi logo

Poiché non abbiamo bisogno dell'intestazione in cima a questa colonna, aggiungeremo un logo alla tabella.

Apri le impostazioni per il modulo di testo in alto nella prima riga.

Quindi elimina il corpo del testo.

Quindi aggiungi il logo (assicurati che sia di circa 40 pixel per 40 pixel) come immagine di sfondo. Assicurati che la dimensione dell'immagine di sfondo sia impostata su "Dimensione reale".

Rendere appiccicosa la riga verticale delle intestazioni

Per rendere la riga appiccicosa, aggiungi il seguente CSS personalizzato all'elemento principale:

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

(Puoi ignorare qualsiasi errore di codice visualizzato utilizzando la proprietà sticky.)

Per assicurarti che la riga adesiva rimanga visibile sopra le altre righe, aggiorna l'indice Z:

• Indice Z: 13

Parte 3: Aggiornamento della sezione della tabella

Ora che gli elementi della tabella sono tutti a posto, possiamo aggiornare la sezione (il contenitore della tabella) con una dimensione e un overflow specifici.

Apri le impostazioni della sezione e aggiungi un colore di sfondo:

• Colore di sfondo: #ffeaef

Quindi aggiorna le dimensioni e la spaziatura come segue:

• Larghezza: 100%
• Larghezza massima: 900 px
• Margine: 10vh in alto
• Imbottitura: 0px in alto, 0px in basso

Quindi aggiungi la seguente classe CSS:

• Classe CSS: et-scroll-table

E aggiorna l'overflow:

• Overflow orizzontale: scorrimento
• Overflow verticale: nascosto

(Nota: abbiamo già aggiunto "overflow:scroll" alla sezione come CSS personalizzato in modo che la funzionalità di scorrimento sia attiva anche sul visual builder.)

Parte 4: aggiunta dei pulsanti di scorrimento orizzontale

Poiché la funzionalità di scorrimento orizzontale è immediatamente evidente sul desktop, aggiungeremo pulsanti di scorrimento orizzontale per una migliore UX.

Aggiungi sezione

Per fare ciò, crea una nuova sezione regolare.

Apri le impostazioni della sezione ed elimina il riempimento predefinito:

• Imbottitura: 0px in alto, 0px in basso

Aggiungi riga

Assegna alla sezione una riga di una colonna.

E aggiorna le impostazioni della riga come segue:

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 900 px
• Imbottitura: 10px in alto, 10px in basso, 10px a destra

Crea il pulsante di scorrimento sinistro

Per creare il pulsante di scorrimento sinistro, aggiungi un modulo blurb alla colonna/riga.

Elimina il titolo predefinito e il contenuto del corpo e aggiungi un'icona a forma di freccia sinistra.

Nella scheda Progettazione, aggiorna quanto segue:

• Colore icona: #333333
• Allineamento immagine/icona: centro
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 40px
• Larghezza contenuto: 100%
• Larghezza: 50px

Quindi dai al blurb una classe CSS:

• Classe CSS: et-scroll-left

Ciò è necessario per aggiungere in seguito la funzionalità di scorrimento al clic al blurb/pulsante con il nostro codice.

Crea il pulsante di scorrimento destro

Per creare il pulsante di scorrimento destro, duplica la descrizione e aggiorna l'icona con una freccia a destra.

Quindi aggiorna la classe CSS:

• Classe CSS: et-scroll-right

Per allineare il pulsante orizzontalmente, apri l'impostazione per la colonna e aggiungi il seguente CSS personalizzato:

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

Parte 5: aggiunta del codice personalizzato

Per la parte finale di questo tutorial, dobbiamo aggiungere il CSS necessario per impostare una larghezza minima per le righe (che sono in realtà le nostre colonne della tabella) e il codice JS necessario per aggiungere la funzionalità di scorrimento ai pulsanti.

Per aggiungere il codice, aggiungi un modulo di codice sotto il secondo blurb.

Nella casella del codice, incolla il seguente CSS assicurandoti di racchiudere il codice nei tag di stile necessari.

.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; 
}
}

Sotto il codice CSS, incolla il seguente jQuery assicurandoti di avvolgere il codice con i tag di script necessari.

(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 );

Aggiornamento della larghezza della colonna

Se vuoi aggiornare la larghezza minima di ciascuna delle colonne della tabella, puoi modificare il valore della larghezza minima nel CSS.

Aggiornamento del numero di colonne sullo scorrimento

Attualmente, facendo clic sui pulsanti si scorrerà orizzontalmente (sinistra o destra) una distanza pari a due larghezze di colonne. Per modificare il numero di colonne sullo scorrimento, aggiornare il numero all'estrema destra (attualmente il numero 2) nel valore della variabile scrollByColumnNumber .

Aggiunta di colori alternati alle colonne

In questo momento il colore di sfondo della sezione determina il colore di tutte le colonne (o righe) della tabella. Se vuoi creare colori alternati per quelle colonne, usa la selezione multipla per selezionare ogni altra riga e aggiungere un colore di sfondo bianco a ciascuna di esse.

Risultato finale

Ora controlla il risultato finale!

Ecco il progetto definitivo del tavolo su desktop.

Ed ecco la funzionalità di scorrimento orizzontale su desktop e dispositivi mobili.

Pensieri finali

Non importa quanto lontano arriviamo nel mondo del web design, i tavoli sembrano sempre avere il loro posto. Continuano a fornire una valida soluzione per organizzare i contenuti in modo comprensibile per gli utenti. Questa tabella con scorrimento orizzontale dovrebbe tornare utile per un'ampia gamma di casi d'uso. E, forse la parte migliore, puoi aggiornare il contenuto della tabella (tramite l'editor in linea integrato di Divi) e modellare la tabella in innumerevoli modi creativi utilizzando il visual builder.

Per maggiori informazioni sulla creazione di tabelle reattive in WordPress, consulta il nostro post su Come creare tabelle reattive in WordPress.

Non vedo l'ora di sentirti nei commenti.

Saluti!