Cómo crear una tabla receptiva con desplazamiento horizontal en Divi

Crear una tabla receptiva puede ser un desafío, especialmente si tiene una tabla con muchas columnas. Una excelente manera de resolver este problema es agregar la capacidad de desplazamiento horizontal a la tabla. Una tabla con desplazamiento horizontal resuelve dos problemas principales. Primero, permite al diseñador mantener el espacio necesario para el contenido de la tabla (las columnas realmente estrechas harán que el contenido se mezcle demasiado). Y en segundo lugar, permite al usuario ver el contenido de la tabla de fácil lectura en dispositivos móviles.

En este tutorial, le mostraremos cómo usar Divi para construir una tabla completamente personalizada con desplazamiento horizontal. Le mostraremos cómo agregar la funcionalidad de desplazamiento horizontal a las columnas que desbordan el contenedor de la tabla. Además, incluso agregaremos algunos botones de desplazamiento horizontal a la tabla para mejorar la UX. ¡Todo esto sin plugin!

Empecemos.

Vistazo

Aquí hay un vistazo rápido a la tabla receptiva con desplazamiento horizontal que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Creación de una tabla receptiva con desplazamiento horizontal

Parte 1: Construir las columnas de la tabla

Para este diseño de tabla, crearemos nuestras columnas de tabla usando filas. Para hacer esto, usaremos la propiedad flex (CSS personalizado) para alinear las filas horizontalmente como columnas.

Actualizar la configuración de la sección

Antes de agregar una fila, abra la configuración de sección de la sección regular predeterminada y agregue el siguiente CSS personalizado al elemento principal:

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

Esto forzará el desbordamiento horizontal de la sección para tener una funcionalidad de desplazamiento, así como también nos dará la propiedad flexible necesaria para organizar nuestras filas horizontalmente en lugar de verticalmente.

Añadir fila

Ahora que el CSS de la sección está en su lugar, cree una fila de una columna dentro de la sección.

Configuración de filas

Abra la configuración de la fila y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho: 100%

Esto asegurará que las columnas de nuestra tabla no tengan ningún margen adicional entre los módulos de texto que agregaremos para los elementos de nuestra tabla.

Luego, dale a la fila un borde derecho de la siguiente manera:

• Ancho del borde derecho: 1 px
• Color del borde derecho: #cccccc

Luego actualice el relleno:

• Relleno: 0px arriba, 0px abajo

En la pestaña avanzada, asigne a la fila una clase CSS personalizada de la siguiente manera:

• Clase CSS: et-scroll-table-column

Lo necesitaremos para el código personalizado más adelante.

Crear elementos de tabla con módulos de texto

Para crear los elementos de la tabla dentro de cada fila (o columna de la tabla), usaremos módulos de texto.

Agregar módulo de texto

Contenido del texto

A continuación, agregue el texto "Elemento de tabla" al contenido del cuerpo del módulo de texto.

Diseño de texto

En la pestaña de diseño, actualice lo siguiente:

• Alineación de texto: centro
• Alto: 80px

• Ancho del borde derecho: 1 px
• Color del borde inferior: #cccccc

Este borde coincidirá con el borde derecho de la fila.

CSS de texto

Para asegurarse de que el texto dentro del módulo permanezca centrado vertical y horizontalmente, agregue el siguiente CSS al elemento principal en la pestaña avanzada:

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

Módulo de texto duplicado para más elementos de la tabla

Ahora que se ha creado nuestro primer elemento de tabla, duplique el módulo de texto (tantas veces como sea necesario) para crear elementos de tabla adicionales dentro de la fila.

Crear el encabezado de la columna de la tabla

Necesitamos convertir el módulo de texto superior en el Encabezado de la columna de la tabla. Para hacerlo, abra la configuración del módulo de texto superior, actualice la etiqueta en la vista Capas a "Encabezado" y agregue el texto "Encabezado" con el contenido del cuerpo.

Luego actualice el color de fondo.

• Fondo: # 333333

Y actualice el diseño del texto de la siguiente manera:

• Peso de la fuente del texto: negrita
• Estilo de fuente de texto: TT
• Color del texto del texto: #ffffff

Duplique la fila para obtener más columnas de la tabla

Ahora que la primera fila está completa, podemos duplicar la fila para crear tantas columnas de tabla como sea necesario para la tabla. Para este diseño, vamos a duplicar la fila ocho veces para crear un total de nueve filas.

Parte 2: Diseño de la columna de tabla adhesiva con encabezados verticales

La fila del extremo izquierdo (o la primera fila) servirá como encabezados verticales para nuestra tabla. Primero, necesitamos actualizar el fondo de la fila y cada uno de los módulos de texto para que tengan el mismo diseño que los encabezados en la parte superior de cada columna. Luego, vamos a hacer que toda la fila sea pegajosa para que permanezca en su lugar mientras el usuario se desplaza horizontalmente para ver las columnas ocultas de la tabla.

Actualizar fondo de fila

Para hacer esto, abra la configuración de la primera fila y actualice el color de fondo:

• Color de fondo: # 333333

Actualizar módulos de texto

Luego, abra la configuración del módulo de texto superior que contiene el título. Haga clic con el botón derecho en el grupo de opciones de texto y seleccione Extender estilos de texto. En la ventana emergente Extender estilos, elija extender los estilos del texto a Todos los textos en esta columna . Luego haga clic en el botón Extender.

Luego, realice una selección múltiple de todos los módulos de texto dentro de la fila (mantenga presionada la tecla ctrl (o cmd) y haga clic en cada uno) y actualice el contenido del cuerpo con el texto "Encabezado".

Agregar logotipo

Dado que no necesitamos el encabezado superior en esta columna, vamos a agregar un logotipo a la tabla.

Abra la configuración del módulo de texto superior en la primera fila.

Luego borra el cuerpo del texto.

Luego agregue el logotipo (asegúrese de que tenga aproximadamente 40 px por 40 px) como imagen de fondo. Asegúrese de que el tamaño de la imagen de fondo esté configurado en "Tamaño real".

Hacer pegajosa la fila de encabezados verticales

Para hacer que la fila sea pegajosa, agregue el siguiente CSS personalizado al elemento principal:

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

(Puede ignorar cualquiera de los errores de código que se mostrarán utilizando la propiedad adhesiva).

Para asegurarse de que la fila adhesiva permanezca visible sobre las otras filas, actualice el índice Z:

• Índice Z: 13

Parte 3: Actualización de la sección de la tabla

Ahora que todos los elementos de la tabla están en su lugar, podemos actualizar la sección (el contenedor de la tabla) con un tamaño y desbordamiento específicos.

Abra la configuración de la sección y agregue un color de fondo:

• Color de fondo: #ffeaef

Luego actualice el tamaño y el espaciado de la siguiente manera:

• Ancho: 100%
• Ancho máximo: 900px
• Margen: 10vh superior
• Relleno: 0px arriba, 0px abajo

Luego agregue la siguiente clase CSS:

• Clase CSS: et-scroll-table

Y actualice el desbordamiento:

• Desbordamiento horizontal: desplazamiento
• Desbordamiento vertical: oculto

(Nota: ya tenemos "overflow: scroll" agregado a la sección como CSS personalizado para que la funcionalidad de desplazamiento también esté en efecto en el constructor visual).

Parte 4: Agregar los botones de desplazamiento horizontal

Debido a que la funcionalidad de desplazamiento horizontal es evidente en el escritorio, vamos a agregar botones de desplazamiento horizontal para una mejor UX.

Agregar sección

Para hacer esto, cree una nueva sección regular.

Abra la configuración de la sección y saque el relleno predeterminado:

• Relleno: 0px arriba, 0px abajo

Añadir fila

Asigne a la sección una fila de una columna.

Y actualice la configuración de la fila de la siguiente manera:

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 900px
• Relleno: 10 píxeles en la parte superior, 10 píxeles en la parte inferior, 10 píxeles en la derecha

Crear el botón de desplazamiento izquierdo

Para crear el botón de desplazamiento izquierdo, agregue un módulo de propaganda a la columna / fila.

Elimina el título y el contenido del cuerpo predeterminados y agrega un ícono de flecha hacia la izquierda.

En la pestaña de diseño, actualice lo siguiente:

• Color del icono: # 333333
• Alineación de imagen / icono: centro
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 40px
• Ancho del contenido: 100%
• Ancho: 50px

Luego dale a la propaganda una clase CSS:

• Clase CSS: et-scroll-left

Esto es necesario para agregar la funcionalidad de desplazamiento al hacer clic en la propaganda / botón con nuestro código más adelante.

Crear el botón de desplazamiento derecho

Para crear el botón de desplazamiento derecho, duplique la propaganda y actualice el icono con una flecha hacia la derecha.

Luego actualice la clase CSS:

• Clase CSS: et-scroll-right

Para alinear el botón horizontalmente, abra la configuración de la columna y agregue el siguiente CSS personalizado:

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

Parte 5: Agregar el código personalizado

Para la parte final de este tutorial, necesitamos agregar el CSS necesario para establecer un ancho mínimo para las filas (que en realidad son las columnas de nuestra tabla) y el código JS necesario para agregar la funcionalidad de desplazamiento a los botones.

Para agregar el código, agregue un módulo de código debajo de la segunda propaganda.

En el cuadro de código, pegue el siguiente CSS asegurándose de envolver el código en las etiquetas de estilo necesarias.

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

Debajo del código CSS, pegue el siguiente jQuery asegurándose de envolver el código con las etiquetas de script necesarias.

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

Actualizar el ancho de la columna

Si desea actualizar el ancho mínimo de cada una de las columnas de la tabla, puede cambiar el valor del ancho mínimo en el CSS.

Actualizar el número de columnas en el desplazamiento

Actualmente, al hacer clic en los botones, se desplazará horizontalmente (izquierda o derecha) una distancia igual a dos anchos de columna. Para cambiar el número de columnas en el desplazamiento, actualice el número del extremo derecho (actualmente el número 2) en el valor de la variable scrollByColumnNumber .

Agregar colores de columna alternos

En este momento, el color de fondo de la sección determina el color de todas las columnas (o filas) de la tabla. Si desea crear colores alternos para esas columnas, use la selección múltiple para seleccionar cada dos filas y agregar un color de fondo blanco a cada una de ellas.

Resultado final

¡Ahora mira el resultado final!

Aquí está el diseño final de la mesa en el escritorio.

Y aquí está la funcionalidad de desplazamiento horizontal en computadoras de escritorio y dispositivos móviles.

Pensamientos finales

No importa lo lejos que lleguemos en el mundo del diseño web, las tablas siempre parecen tener su lugar. Continúan proporcionando una solución valiosa para organizar el contenido de una manera que los usuarios entiendan. Esta tabla con desplazamiento horizontal debería ser útil para una amplia gama de casos de uso. Y, quizás la mejor parte, puede actualizar el contenido de la tabla (a través del editor en línea incorporado de Divi) y diseñar la tabla de innumerables formas creativas utilizando el generador visual.

Para obtener más información sobre cómo crear tablas receptivas en WordPress, consulte nuestra publicación sobre Cómo crear tablas receptivas en WordPress.

Espero tener noticias tuyas en los comentarios.

¡Salud!