Estilo personalizado de TablePress – Cómo hacer que sus tablas sean elegantes y receptivas

TablePress es el plugin de mesa de WordPress más popular y extendido (más de 700 000 instalaciones activas). ¡El plugin hace un gran trabajo y el creador Tobias Bäthge está proporcionando un soporte increíble para un plugin gratuito! Es perfecto para tablas de datos y con algo de trabajo, también podría usarse para tablas de comparación (poderosa herramienta de marketing). Pero la cosa es que el estilo predeterminado del complemento parece anticuado y no muy atractivo para el ojo del usuario moderno. Aquí hay una vista previa de nuestra tabla de prueba con el estilo y las opciones predeterminadas: [toc] Lo que probablemente llamará su atención es la mala alineación del texto y los elementos, las opciones innecesarias de clasificación y búsqueda y algunos otros detalles menores, de los que querremos deshacernos.

Centrar la alineación de todos los elementos

Puede ver cómo se alinea el texto en la esquina superior izquierda de la celda. Incluso si lo centramos, todavía estaría en la parte superior, lo que se ve mal. En su lugar, lo configuraremos para que se centre en el centro de la celda, sin importar la altura de la fila. Para hacer eso, agregue esta línea de CSS a su CSS personalizado (puede usar este complemento gratuito):

.tablepress thead th,
.tablepress tbody td {
	text-align: centro;
}

td.column-1, td.column-2, td.column-3, td.column-4, td.column-5 {
alineación vertical: medio !importante;
}

Elimine las opciones innecesarias de TablePress

Al agregar una nueva tabla, verá algunas casillas de verificación con opciones. Algunos de ellos son útiles, pero para nuestro propósito, querremos deshabilitarlos. Esto es lo que dejamos marcado: ¡Alternar colores de fila y resaltar el desplazamiento de fila se ve bien solo si las imágenes de su producto son transparentes! Si utiliza imágenes de fondo transparentes, puede dejar esas opciones habilitadas.

Cambiar el color del encabezado y el pie de página

De forma predeterminada, todas las tablas tienen un encabezado azul sin opción de cambiar. Para hacerlo, deberá agregar esta línea de CSS a su CSS personalizado:

.tablepress thead th,
.tablepress tfoot th {
	color de fondo: #F2A53B;
}

Adición de elementos visuales

Las imágenes funcionan mejor que el texto sin formato y cuando se trata de tasas de conversión, los números aumentan significativamente. TablePress funciona perfectamente con códigos cortos. Agregue su código corto de botón favorito para sus CTA. Descargue algunos iconos para mostrar pros y contras, "sí y no", etc. Incluso puede agregar listas de beneficios o especificaciones, ser creativo.

Hacer que TablePress sea receptivo

De forma predeterminada, los cuentos de TablePress se reducirán hasta cierto punto, pero en pantallas más pequeñas la mayoría de las tablas se verán desordenadas. Puede ver cómo se superponen las columnas en el siguiente ejemplo. Descargue el complemento receptivo para TablePress- Haga clic aquí Lea la descripción en la página de arriba, porque el complemento tiene 3 modos de respuesta, también debe cambiar el código corto de su tabla desde:

[[id de tabla=1 /]]

a algo como

[[id de tabla=1 responsive=contraer responsive_breakpoint=dispositivo /]]

Para "responder" puede elegir entre: voltear, desplazarse o contraer y para el "responsive_breakpoint" desde qué tipo de dispositivo la tabla se volverá receptiva: teléfono, tableta, computadora de escritorio o todo. Sube y activa el plugin y revisemos de nuevo nuestra tabla. Elijo la siguiente configuración:

[[id de tabla=1 responsive=scroll responsive_breakpoint=tablet/]]

Y aquí está el aspecto final de nuestra tabla de TablePress renovada y con estilo