Guía de configuración de Tablas Immune

Videotutorial paso a paso

Cómo crear y configurar una tabla

Una de las joyas de la corona de este tema es sin lugar a dudas: la tabla Immune. Además de contar con las tablas comparativas automáticas en cada categoría, Immune Theme® te permite crear tablas Immune con multitud de opciones de personalización y lo mejor de todo: 100% adaptadas a la navegación móvil. Si quieres saber qué diferencias hay entre estas tablas y las comparativas, revisa este artículo.

Veamos paso a paso cómo crear y configurar una tabla Immune.

Ve al menú Immune > Añadir tabla e indica en la primera casilla el título de tu tabla. A continuación encontrarás la información de la tabla con el shortcode asignado a la tabla y una caja de texto donde puedes especificar una descripción (no se mostrará al usuario).

Tabla

En el siguiente apartado titulado Tabla es donde crearás la tabla y añadirás su contenido. Para ajustar el número de columnas y de filas, posiciónate sobre sobre una fila o una columna. Verás que se desplegará un menú con varias opciones clicables:

• Añadir más (filas o columnas).

• Duplicar la fila o columna.

• Borrar el contenido de la fila o columna.

• Eliminar la fila o columna.

• Ocultar dicha fila o columna en: escritorio (ordenador), tablet o móvil. Esta opción puedes añadirla con este botón dentro de la fila o columna que quieres que adopte el comportamiento; pero además puedes también configurarla en el siguiente apartado (configuración de la tabla > Responsive).

• Añadir la opción toggle a dicha fila o columna. Esta opción puedes añadirla con este botón dentro de la fila o columna que quieres que adopte el comportamiento; pero además puedes también configurarla en el siguiente apartado (configuración de la tabla > Responsive).

A continuación añade el contenido dentro de cada celda. Para ello haz clic sobre la celda, se abrirá una ventana con el editor clásico de WordPress. Ahí podrás insertar y darle formato al texto que quieras que figure en la celda, insertar una imagen o aprovechar las funcionalidades adicionales como insertar iconos, botones o valoraciones con estrellas.

Configuración de la tabla / Responsive

Una vez tengas tu tabla creada, pasa a la configuración de la tabla donde podrás ajustar las funciones responsive de tu tabla. Si anteriormente has ajustado que alguna fila o columna esté oculta en algún dispositivo, o has añadido la opción toggle, encontrarás que ya figuran esos ajustes en este apartado. Si no es el caso, también podrás hacerlo desde aquí. Solo tendrás que clicar dentro de la casilla correspondiente (ocultar en escritorio / tablet / móvil / contenido toggle) y seleccionar aquellas filas (casilla superior) o columnas (casilla inferior) que quieres que adquieran ese comportamiento.

Por último, en la opción toggle podrás también personalizar qué texto aparece en el botón para desplegar el contenido (ver más) y para volver a ocultarlo (ver menos).

En el siguiente ejemplo puedes ver un ajuste de tabla donde la fila 2 se oculta en móvil y la columna C tiene la opción Toggle. Así, la visualización de dicha tabla para el usuario será con un botón tras la columna B que indicará “Ver más” (si el usuario clica en dicho botón, se desplegará la columna C), y si está visitando la web a través del móvil no verá la fila 2.

Estilo de la tabla

Por último encontrarás el apartado de estilo de la tabla donde podrás personalizar el aspecto visual de la tabla. En el lado izquierdo encontrarás todos los ajustes y en el derecho podrás ver en tiempo real una previsualización de los cambios. Veamos paso a paso todos los ajustes de personalización de la tabla:

Tabla

Aquí se definen los ajustes generales de la tabla. Deberás indicar:

• El tipo de tabla: si quieres que sea normal, striped horizontal (con rayas horizontales) o striped vertical (con rayas verticales).

• El borde de la tabla: si quieres que cuente o no con borde y personalizar su ancho y color.

• El espaciado dentro de las celdas, por píxeles. Esto determinará el espacio entre el texto de la celda y su borde.

Cabecera

Aquí se definen los ajustes relativos a la cabecera de la tabla, es decir, la primera fila (en una tabla vertical) o primera columna (en una tabla horizontal):

• En la primera opción desplegable deberás seleccionar si tu tabla se leerá en formato horizontal, siendo la cabecera la primera columna, o si tu tabla se leerá en formato vertical, siendo la cabecera la primera fila.

• Ajusta si quieres que la cabecera sea fija o no, una opción muy interesante para tablas de gran tamaño que requieran de scroll para ser visualizadas. De esta forma tus usuarios sabrán, en todo momento, a qué valor corresponde cada información que vean en la tabla. Importante: si creas una tabla vertical que tiene muchas columnas (es muy ancha) y quieres fijar su cabecera, lo recomendable es que coloques esta tabla dentro de una Immune Row a ancho completo (si quieres saber más sobre esta opción, consulta este artículo). Si no lo haces, la cabecera fija puede tener un comportamiento anómalo que conlleve al desbordamiento de la tabla cuando el usuario haga scroll.

• Indica el color de fondo y texto de la cabecera.

• Ajusta el estilo del borde y su color.

• Por último, indica la alineación del texto dentro de la cabecera.

Celdas

Aquí se definen los ajustes relativos a las celdas de la tabla:

• Si creas una tabla con opción striped (con rayas), deberás ajustar el color de fondo y de texto para los dos tipos de celdas (en las opciones fondo y texto 1 y fondo y texto 2). En caso de crear una tabla normal, solo será necesario que ajustes el color de fondo 1 y color de texto 1. Estos colores se aplicarán en todas las celdas de la tabla, salvo en la cabecera.

• También deberás ajustar si quieres o no que las celdas tengan borde, además de su estilo y color.

• Determina la alineación del texto dentro de las celdas.

• Alto máximo de imagen: aquí definirás qué altura máxima quieres que tengan las imágenes dentro de tu tabla, de esta forma podrás homogeneizar todas las imágenes dentro de tu tabla. El resultado es una tabla mucho más estética y atractiva para los usuarios.

Botón toggle

Ajusta en estas opciones el color de fondo y de texto del botón de toggle. Dicho botón es el que permite desplegar aquellas filas o columnas que estén ocultas, mostrando opciones de “Ver más” y “Ver menos”.

Botón en tabla

Si has insertado un botón en alguna celda, aquí podrás personalizar sus colores de fondo, texto y hover.

Iconos y valoraciones

Si has insertado iconos o valoraciones en tus celdas, aquí podrás personalizarlos. Ajusta el tipo y color de los iconos, además del color de las estrellas de valoraciones).

Cómo insertar una tabla Immune en una entrada o página

Nuestra recomendación es que siempre que quieras añadir una tabla Immune lo hagas dentro de una Immune Row, de esta forma podrás darle mayor anchura a la tabla si es necesario y mejorarás la experiencia de navegación para los usuarios. Aunque todas nuestras tablas incluyen la opción de scroll por defecto, habrá muchos usuarios que no sepan usarlo. Si quieres saber cómo trabajar con Immune Row, consulta el siguiente artículo.

Una vez hayas configurado la tabla, puedes introducirla dentro de tus contenidos con el bloque de Gutenberg: Tabla Immune . Una vez añadido el bloque, selecciona qué tabla quieres que se inserte (en el menú derecho, dentro de los ajustes del bloque) y listo 🙂