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. En primer lugar, permite al diseñador mantener el espacio necesario para el contenido de la tabla (las columnas muy estrechas harán que el contenido se mezcle demasiado). Y segundo, 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 crear 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 experiencia de usuario. ¡Todo esto sin un complemento!

Empecemos.

Vistazo

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

Descarga el diseño GRATIS

Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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 has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

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

Creación de una tabla receptiva con desplazamiento horizontal

Parte 1: Construcción de las columnas de la tabla

Para este diseño de tabla, vamos a crear 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 normal predeterminada y agregue el siguiente CSS personalizado al elemento principal:

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

Esto obligará al desbordamiento horizontal de la sección a tener una funcionalidad de desplazamiento y 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 fila

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

  • Ancho del canalón: 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: 1px
  • 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.

Creación de elementos de tabla con módulos de texto

Para crear los elementos de la tabla dentro de cada fila (o columna de la tabla), vamos a utilizar 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
  • Altura: 80px

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

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

Texto CSS

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:

01
02
03
display:flex;
align-items:center;
justify-content: center;

Módulo de texto duplicado para más elementos de 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 «Título» y agregue el texto «Título» 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 fuente de texto: Negrita
  • Estilo de fuente de texto: TT
  • Texto Color del texto: #ffffff

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

Ahora que la primera fila está completa, podemos duplicarla para crear tantas columnas de tabla como sean necesarias para la tabla. Para este diseño, duplicaremos la fila ocho veces para crear un total de nueve filas.

Parte 2: Diseño de la columna Sticky Table con encabezados verticales

La fila en el extremo izquierdo (o primera fila) servirá como encabezado vertical 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, haremos que toda la fila sea fija 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 encabezado. 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, seleccione 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 «Título».

Añadir logotipo

Dado que no necesitamos el encabezado superior de esta columna, agregaremos un logotipo a la tabla.

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

A continuación, elimine el texto del cuerpo.

Luego agregue el logotipo (asegúrese de que sea de 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 que la fila de encabezados verticales sea pegajosa

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

01
02
03
04
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 hemos agregado «desbordamiento: desplazamiento» a la sección como CSS personalizado para que la funcionalidad de desplazamiento también tenga efecto en el generador visual).

Parte 4: agregar los botones de desplazamiento horizontal

Debido a que la funcionalidad de desplazamiento horizontal es evidente en el escritorio, agregaremos botones de desplazamiento horizontal para una mejor experiencia de usuario.

Agregar sección

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

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

  • Relleno: 0px arriba, 0px abajo

Añadir fila

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

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

  • Ancho del canalón: 1
  • Ancho: 100%
  • Ancho máximo: 900px
  • Relleno: 10px arriba, 10px abajo, 10px a la derecha

Crear el botón de desplazamiento izquierdo

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

Elimine el título predeterminado y el contenido del cuerpo y agregue un icono 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 del icono: SÍ
  • Tamaño de fuente del icono: 40px
  • Ancho de contenido: 100%
  • Ancho: 50px

Luego dale a la propaganda una Clase CSS:

  • Clase CSS: et-scroll-left

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

Crear el botón de desplazamiento derecho

Para crear el botón de desplazamiento hacia la derecha, duplique la publicidad 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:

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

Parte 5: agregar el código personalizado

Para la parte final de este tutorial, debemos 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 .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
.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 .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
(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 );

Actualización del ancho de 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.

Actualización del número de columnas en el desplazamiento

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

Adición de 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 filas alternas y agregue 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 cuán lejos lleguemos en el mundo del diseño web, las tablas siempre parecen tener su lugar. Continúan brindando una solución valiosa para organizar el contenido de una manera que los usuarios entiendan. Esta tabla con un 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 . También compilamos una lista de los mejores complementos de mesa para WordPress que no debe perderse.

Espero escuchar de usted en los comentarios.

¡Salud!