Table Maker es un módulo de terceros para Divi Builder que hace exactamente lo que describe el título: crea tablas. Este es un módulo poderoso que simplifica la creación de tablas de cualquier tamaño. Incluso se presenta como una de las mejores opciones para complementos de tablas para sitios de WordPress. Agregue cualquier tipo de contenido y diseñe la tabla con la configuración estándar de Divi, así como la configuración para cada elemento. La última versión añade aún más opciones. En esta publicación, analizaremos de cerca Table Maker, junto con nuestro paquete de diseño de remodelación de casas Divi , para ayudarlo a decidir si es el producto adecuado para sus necesidades.
Se agrega un nuevo módulo al Divi Builder llamado Table Maker. Agregue este módulo a sus diseños Divi como lo haría con cualquier módulo Divi. Estamos utilizando el módulo para agregar una tabla de precios al diseño de la página de servicio del paquete de diseño de renovación del hogar Divi.
La pestaña General incluye submódulos para cada columna. Agregue tantos como desee haciendo clic en Agregar nueva columna. También incluye configuraciones para el título, descripción, columnas, filas, lo que lo hace receptivo, ajustando cómo se desplaza y ajustando los íconos, botones e imágenes. Los submódulos también incluyen configuraciones que anulan las configuraciones del módulo.
Submódulo de columna de Table Maker
Al hacer clic en Agregar nueva columna, se crea un submódulo de columna y se abre su configuración. Agregue tantas columnas como desee.
Agregar contenido a las celdas de Table Maker
Antes de ver la configuración de Table Maker, veamos cómo agregar celdas y contenido. Podemos agregar muchos tipos diferentes de contenido a las celdas.
Contenido de la columna de Table Maker
Dentro del submódulo de columnas, encontrará el campo Filas. Este es un editor HTML. Puede crear las filas simplemente ingresando el contenido de cada fila. Cada fila está numerada. Los números corresponden a una celda, por lo que cada línea numerada es una nueva celda. Para agregar contenido a una determinada celda, simplemente agregue ese contenido a la línea que está numerada para esa celda. Esto incluye texto, código, enlaces, videos o cualquier cosa que desee.
Dale estilo al contenido con marcado
Si ha agregado texto a las celdas, puede marcar el texto con HTML. Esto significa que puede agregar fácilmente negrita, cursiva, párrafos, saltos, encabezados, enlaces, imágenes o incluso un diseño completo. Solo asegúrese de que todo el HTML esté en una sola línea.
Por ejemplo, agregué etiquetas para H2 y negrita en algunas de las celdas de esta imagen.
Adición de caracteres de escape
Dado que el editor de filas es un campo HTML, hay ciertos caracteres que normalmente no podemos usar, como el ampersand, las comillas, el apóstrofe y los símbolos mayor que y menor que. Afortunadamente, estos caracteres todavía se pueden usar en los campos de Table Maker. Table Maker usa caracteres especiales, llamados caracteres de escape, para indicar a las celdas que muestren esos caracteres. Para usarlos, agregue corchetes dobles y la abreviatura del carácter.
Por ejemplo, para mostrar un ampersand, ingresaría {{amp}}, como lo hice en la fila 4 en el ejemplo a continuación.
Agregue un botón ingresando la etiqueta del botón en la celda en la que desea mostrar un botón. Una vez que ingrese la etiqueta para el botón, verá el botón predeterminado. Agregue el texto que desea mostrar dentro de las etiquetas.
El botón se puede personalizar en la pestaña Contenido de la configuración del módulo Table Maker y la configuración del submódulo individual. Agregue el texto del botón, la URL, el destino del enlace, establezca el ancho del botón según el texto o la celda y use estilos personalizados.
Agregar un icono a la tabla
Incluya un ícono ingresando la etiqueta del ícono. Puede incluir el nombre del icono para mostrarlo o seleccionar un icono en la pestaña Contenido. También puede agregar tantos íconos como desee agregando más etiquetas y el nombre del ícono dentro de la etiqueta. Por ejemplo, para agregar un icono de cruz, agregue este código: <icon>cross_alt</icon>. También agregué este código para agregar un ícono diferente: <icon>check_alt</icon>. Puede encontrar una lista completa de iconos disponibles en el sitio web de Divi Table Maker.
También puede optar por seleccionar una opción de icono uniforme. Para hacer esto, desplácese hacia abajo hasta Iconos de tabla en la pestaña Contenido. Utilice la pestaña Contenido del módulo para elegir un icono que se pueda colocar en todas las celdas. También existe la opción de elegir un icono específicamente para esa celda. También puede ajustar el tamaño y el color del ícono, como lo hice en el ejemplo a continuación.
Agregar una imagen a la tabla
Para agregar las imágenes a la tabla, desplácese hacia abajo hasta Imágenes de la tabla en la pestaña Contenido. Agregue las imágenes como una galería desde la biblioteca de medios. También puede seleccionar la calidad de la imagen, la proporción, la escala, la alineación vertical y la alineación horizontal. También puede acceder a esta configuración para cada celda en los submódulos, de modo que pueda anular la configuración estándar del módulo.
Mostrar las imágenes
Muestre las imágenes agregando la etiqueta de imagen y el número de imagen en la celda. Por ejemplo, si desea que la segunda celda de su columna muestre una imagen, ingrese la etiqueta de imagen HTML en esa celda. Cambie el número para mostrar una imagen específica según el orden en que aparece en la galería.
Códigos cortos e iFrames
También puede agregar códigos abreviados e iFrames a las celdas. Simplemente péguelos en la línea de la celda que desee. No verá una vista previa del código abreviado en Divi Builder, pero se ejecutan en el sitio web. Pegue iFrames de la misma manera que los códigos cortos. Muestran una vista previa en Divi Builder, pero es posible que no se muestre de la misma manera que en la interfaz. Se muestran correctamente en la parte delantera.
Dale estilo al contenido con CSS
También puede diseñar el contenido con CSS en línea. Esto se puede usar para controlar los colores del texto, el tamaño del texto, el subrayado, etc. Simplemente agregue el CSS en línea como lo haría en cualquier editor de contenido de WordPress. Por ejemplo, para que el texto del encabezado de la primera columna sea blanco, puede agregar este CSS:
|
01
|
<h2 style="color: white;"></h2> |
Personalización de la propia celda Table Maker
Puede personalizar la celda en sí usando la etiqueta de celda y CSS en línea. Por ejemplo, este CSS en línea cambiaría el fondo de la celda:
|
01
|
<cell style="background: #0d232d;"></cell> |
Para nuestro ejemplo, colocamos el encabezado de la celda, que previamente habíamos diseñado con CSS en línea, dentro de la etiqueta de la celda.
Ancho de columna
Ajuste el ancho máximo y el ancho mínimo de cada columna de forma independiente.
Título de la tabla
El título de la tabla es una característica nueva. Está deshabilitado por defecto. Habilítelo y agregue un título en el campo. También puede elegir su posición. Las opciones incluyen encima de la mesa, debajo de la mesa y oculto.
Descripción de la tabla
La descripción de la tabla es otra característica nueva. También está deshabilitado por defecto. Habilítelo y agregue la descripción en el campo. También puede elegir su posición desde arriba, abajo u oculta.
Columnas de la tabla
Ajuste el número de encabezados, el número de pies de página, el ancho máximo y el ancho mínimo. El recuento de encabezados y pies de página le permite elegir el número de celdas que se usarán para cada uno.
Filas de tabla
Las filas de la tabla también tienen ajustes para el recuento de encabezados, el recuento de pies de página, el ancho máximo y el ancho mínimo. El recuento de encabezados y pies de página le permite elegir el número de celdas que se usarán para cada uno.
Esquinas de mesa
Table Corners es otra característica nueva. Está deshabilitado por defecto. Esto le permite diseñar la esquina como parte del encabezado de fila o del encabezado de columna. Table Corners funciona con Pie de página de columna y Pie de página de fila. Si está habilitado, tendrá nuevas configuraciones en Table Corners para diseñarlas.
Tabla receptiva
Las funciones de respuesta son interesantes. Puede establecer el punto de interrupción según el tipo de dispositivo y dividirlo por columnas o filas. También puede mostrar las celdas como bloques o como un acordeón. La última actualización agrega los puntos de interrupción a los escritorios para que pueda crear acordeones en los escritorios si lo desea. Sus visitantes no verán el diseño completo de la mesa si usa bloques o acordeón para el escritorio. Este ejemplo muestra bloques.
Este ejemplo muestra el acordeón. He abierto el segundo acordeón para mostrar cómo se ve la mesa.
Desplazamiento de la tabla
El desplazamiento le permite mostrar una tabla más grande en el mismo espacio. También puede hacer que los encabezados de columna y fila sean fijos.
Dar estilo a la mesa Tabel Maker
Table Maker tiene amplias opciones de estilo en la pestaña Diseño de los submódulos y el módulo principal. Ajuste los colores, las franjas, las celdas, el texto, el texto del encabezado, los encabezados de columna, los encabezados de fila, los pies de página de columna, los pies de página de fila, el texto de pie de página y todas las opciones estándar de Divi. Diseña todas las celdas juntas o cada celda de forma independiente. Veamos algunos ejemplos. Describiré la configuración a medida que avanzamos.
Título de la tabla del Creador de tablas
Si tiene el título de la tabla habilitado, verá la configuración de diseño para el título. La configuración incluye la mayoría de las opciones de texto estándar para fuentes, colores, alineación, etc. Agrega espacio entre la tabla y el texto del título. En el siguiente ejemplo, cambié la fuente para que coincida con la fuente del cuerpo utilizada en nuestro paquete de diseño, Raleway.
Descripción de la tabla
Si tiene habilitada la descripción de la tabla, verá la configuración de diseño para el texto de descripción. La configuración incluye la mayoría de las opciones de texto, incluido el tamaño, las fuentes, los pesos, etc. También agrega espacio entre la tabla y el texto de descripción. En este ejemplo, he ajustado la fuente y el color para que coincidan mejor con nuestro paquete de diseño.
Acordeón de mesa
Si tiene la opción Acordeón seleccionada en Table Responsive, tendrá configuraciones de diseño para el acordeón. Todos los acordeones están cerrados por defecto. Puede configurar un conmutador específico para que esté abierto si lo desea. La opción Alternar abierto le permite seleccionar qué alternar abrir de forma predeterminada. Establezca la alineación del icono, cambie el tamaño, elija un icono abierto y elija un icono cerrado.
Marco de mesa
Las opciones de Marco de tabla le permiten agregar espacios o líneas a las celdas, elegir un tipo de borde, cambiar el color del borde y cambiar el ancho de la línea. En este ejemplo, seleccioné el estilo de líneas y cambié el color.
Rayas de mesa
Table Stripes coloca rayas detrás de los campos pares o impares y puede ser horizontal o vertical. Puede elegir los tipos de campo que incluyen las franjas y elegir entre filas pares e impares. Las rayas ahora pueden ser un tinte, un color combinado (que incluye el tinte) u opciones de color regulares. El tamaño de respuesta puede ir en una dirección diferente, o puede deshabilitarlos. Aplique las franjas al cuerpo de la tabla, al encabezado de la columna, al pie de la columna, al encabezado de la fila y al pie de la fila individualmente.
Pasar el cursor sobre la mesa
Table Hover es una nueva configuración que resalta una fila o columna a medida que pasa el mouse, por lo que pueden ser horizontales o verticales. El tamaño de respuesta puede tener una dirección diferente o ninguna. También puede ajustar el color. Elija entre tinte, color mezclado o color sólido. En el siguiente ejemplo, he seleccionado horizontal y color. Estoy flotando sobre la segunda fila.
Texto de tabla
Table Text incluye todas las opciones de texto estándar y agrega una función de ajuste, lo que le brinda control sobre cómo se comporta el texto. En este ejemplo, lo configuré para ajustar y cambié la familia de fuentes, el color del texto y el tamaño de la fuente.
Celdas de tabla
La configuración de las celdas de la tabla le permite cambiar el color de fondo de las celdas, establecer la alineación del texto para la alineación vertical y horizontal, agregar relleno, personalizar el borde y agregar una sombra de cuadro.
Texto de encabezado de columna de Table Maker
Originalmente, el texto del encabezado de fila y columna estaba envuelto en etiquetas de encabezado y negrita. Esto causó problemas con los lectores de accesibilidad. Ahora, la configuración está desactivada de forma predeterminada. Puede volver a activarlo si tiene problemas con tablas antiguas, pero es mejor dejarlo desactivado y diseñar el texto con la configuración proporcionada por Divi Table Maker. Para este ejemplo, puse los títulos en mayúsculas, aumenté la altura de la línea, aumenté el tamaño de la fuente y me aseguré de que se eliminó el estilo en línea.
Celdas de encabezado de columna
Celdas de encabezado de columna ajusta el color de fondo de las celdas de encabezado. Incluye la configuración de celda estándar. He ajustado el color de fondo en este ejemplo.
El Texto de pie de página de columna ajusta el texto del pie de página. Incluye todos los ajustes estándar.
Columna de celdas de pie de página ajusta las celdas para el pie de página. Incluye todos los ajustes estándar. He ajustado el color de fondo, el color del borde, el estilo del borde y el ancho del borde en este ejemplo.
Texto de encabezado de fila
Al igual que el Texto de encabezado de columna, el Texto de encabezado de fila también tiene el nivel de encabezado deshabilitado de forma predeterminada para mejorar la accesibilidad. El encabezado de la fila está a la izquierda. También incluye la configuración de fuente estándar. En este ejemplo, agregué ajuste de texto, cambié la familia de fuentes, actualicé el estilo de fuente y ajusté el color del texto y la altura de la línea.
Celdas de encabezado de fila
Celdas de encabezado de fila controla el fondo de las celdas utilizadas para el encabezado de la fila. En este ejemplo, he ajustado el color de fondo, además de la alineación horizontal y vertical.
La configuración del texto del pie de página de la fila ajusta el texto del pie de página de la fila, que se encuentra a la derecha. En nuestro ejemplo, el pie de página de la fila contiene los botones Reservar ahora. Entonces, el ejemplo del texto de pie de fila estaría en la última celda de esta tabla.
La configuración de Celdas de pie de fila controla la celda utilizada para la fila de pie de página. He ajustado el color de fondo, la alineación horizontal y vertical.
El Layou actualizado con la tabla terminada
Este es el diseño de página de servicio actualizado con el módulo Table Maker completamente diseñado, junto con la plantilla de encabezado y pie de página GRATUITA para el paquete de diseño de remodelación del hogar .
Comprar fabricante de mesas
Table Maker está disponible en Divi Marketplace por $39. Incluye una garantía de devolución de dinero de 30 días y un año de soporte y actualizaciones.
pensamientos finales
Ese es nuestro vistazo a Table Maker para Divi . Este es un poderoso módulo de creación de mesas. La última actualización agrega muchas características nuevas. Las nuevas actualizaciones de accesibilidad permiten que las tablas creadas con Table Maker pasen la auditoría de accesibilidad Lighthouse de Google. Puede hacer una tabla de cualquier tamaño y agregar casi cualquier cosa a una celda con etiquetas. Agregue HTML, CSS, códigos cortos, iFrames y más. Aplique estilo a las celdas de toda la tabla a la vez o diseñe individualmente. Las herramientas receptivas hacen que las tablas se vean geniales en cualquier dispositivo. Si está interesado en una herramienta poderosa para crear tablas en Divi, Table Maker es una excelente opción.
Queremos escuchar de ti. ¿Has probado Table Maker para tu sitio web Divi? Háganos saber lo que piensa al respecto en los comentarios.