TablePress Styling personalizada – Cómo hacer que sus mesas sean elegantes y receptivas

TablePress es el más popular y extendida plugin de WordPress mesa (700 000+ instalaciones activas).

El plug-in hace un gran trabajo y el creador Tobias Bäthge presta apoyo increíble para un plugin gratuito! Es perfecto para las tablas de datos y con algo de trabajo, También podría ser utilizado para tablas de comparación (una poderosa herramienta de marketing).

Pero la cuestión es que el estilo predeterminado del complemento parece anticuado y no muy atractivo a los ojos del usuario moderno..

Aquí está una vista previa de nuestra tabla de prueba con el estilo y las opciones por defecto: [talón]

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, que vamos a querer deshacerse de.

Centrar la alineación de todos los elementos

Se 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 que se ve mal. En lugar, Lo configuraremos para que esté centrado en el medio de la celda., no importa la altura de la fila.

Me gusta esto

Para ello añadir esta línea de CSS a la CSS personalizado (puedes usar este plugin gratuito):

.tablepress culata en T ª,
.tablepress tbody td {
	texto alineado: centrar;
}

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

Eliminar las opciones TablePress innecesarios

Cuando se añade una nueva tabla verá algunas casillas de verificación con opciones. Algunos de ellos son muy útil, pero para nuestro propósito, vamos a querer desactivarlas.

Esto es lo que fuimos comprobado:

Alternando colores de fila y la fila de la libración resaltado se ve bien sólo si sus imágenes de los productos son transparentes! Si utiliza imágenes de fondo transparente puede dejar habilitadas las opciones.

Cambiar el color del encabezado y pie de página

Por defecto, todas las tablas tienen una cabecera azul con ninguna opción para cambiar. Para ello se tendrá que añadir esta línea de CSS a la CSS personalizado:

.tablepress culata en T ª,
.º tablepress tfoot {
	color de fondo: #F2A53B;
}

Adición de elementos visuales

Visuales funcionan mejor que texto plano y cuando se trata de las tasas de conversión, los números aumentan significativamente.

TablePress funciona perfectamente con códigos cortos. Añade tu favorito botón de código corto para sus llamadas a la acción. Descargar algunos iconos de visualización pros y los contras, “si y no” etc..

Incluso puede agregar listas de beneficios o especificaciones, y ser creativo.

Haciendo TablePress Responsive

Por defecto, cuentos TablePress se reducirá en cierto grado, pero en pantallas más pequeñas, la mayoría de las mesas se verán desordenadas.

Puedes ver cómo las columnas se superponen en el siguiente ejemplo..

Descargar el complemento de respuesta para TablePress- Haga clic aquí

Leer la descripción de la página anterior, debido a que el plugin tiene 3 modos de respuesta, También hay que cambiar el código corto de la tabla de:

[[tabla id = 1 /]]

a algo así como

[[tabla id = 1 sensible = colapso responsive_breakpoint = dispositivo /]]

por “sensible” puedes elegir entre voltear, voluta, o colapsar, y para el “responsive_breakpoint” de qué tipo de dispositivo de la tabla será sensible – teléfono, tableta, escritorio, o la totalidad.

Cargar y activar el plugin y vamos a ver de nuevo la mesa.

Elijo la siguiente configuración:

[[tabla id = 1 sensible = desplazamiento responsive_breakpoint = tableta /]]

Y aquí está el aspecto final de nuestra mesa TablePress renovado y de estilo

Bozh
soy bozh, y he estado creando sitios web con WordPress durante 15+ años. Desde 2016, He trabajado con las principales empresas afiliadas., administrar mi propio negocio de comercio electrónico, y administré varios blogs especializados. Fundé WPCtrl.com con la idea de compartir mis conocimientos., experiencias personales, y recomendarte mejores alternativas.
WPCtrl.com