Plugin destacado Divin: fabricante de mesa

Aunque DIV tiene muchos módulos, no tiene un módulo para construir tablas. Afortunadamente, hay una solución. Table Maker es un complemento de terceros que le permite construir tablas totalmente personalizables con Divi Builder. Para ayudarlo a decidir si este es el complemento adecuado para su DIV, en este artículo, echaremos un vistazo al fabricante de la mesa y veremos qué puede hacer. Instalación del fabricante de la mesa

La instalación es simple y simple.
Navegue a complementos> Nine Adición> Carga de complementos
Haga clic en Elige archivo
Encuentre el archivo zip del complemento en su computadora y seleccione
Haga clic en la instalación ahora
Haga clic en activar
El módulo de fabricante de mesa

Se agrega un nuevo módulo al constructor Divin llamado Table Maker. Veamos las características principales. Fabricante de la tabla de contenido de pestañas

La pestaña de contenido incluye un área para sub -módulos. Se utilizan para crear columnas para la tabla. Para las columnas, puede ajustar el encabezado y el número de sótano y el tamaño de las columnas y filas, ajustar los puntos de interrupción para cada tipo de dispositivo, activar el desplazamiento y elija iconos, botones e imágenes. Los íconos, botones e imágenes tienen personalizaciones para el tamaño, el color, la ubicación, etc. Submodula de columna

Los submodulums definen columnas e incluyen un campo para agregar contenido en líneas. Funciona igual que un editor de código en el que cada fila está numerada. También puede ajustar el ancho, los iconos, los botones y las imágenes.
La primera línea es el título de la columna de forma predeterminada, pero puede cambiar esto si no desea tener un encabezado. Puede incluir HTML, lo que significa que tendrá que evitar ciertos personajes que se utilizan para el marcado. También puede agregar CSS, códigos cortos, iframes, iconos, imágenes, botones y más. Las columnas incluyen personalizaciones de diseño para cada elemento, incluidos texto, fondo, celdas, encabezado y sótano, etc.

Crea cuántas columnas quieres. Puede estilizarlos de forma independiente, extender los estilos de uno a otro, etc. Agregué 4 columnas y ajusté los colores y los anchos de cada columna por separado.

Encabezados y sótanos
Puede establecer el número de columnas para encabezados y sótanos. Por defecto, tiene 1 encabezado y sin sótano. En este ejemplo, establecemos los primeros 2 como encabezados y el último como sótano. Los colores están decorados de forma independiente.

Puedes hacer lo mismo para las filas. En este ejemplo, establecemos 2 líneas como encabezados (los dos a la izquierda) y una como sótano (el derecho). Mesa de desplazamiento

El desplazamiento de la mesa ofrece un desfile horizontal y vertical. Puede hacer la sede de la columna y las filas pegajosas, si lo desea. Esto los mantiene en posición para que no tenga lugar fuera de la vista. En este ejemplo, activé el pergamino e hice los encabezados pegajosos. Agregué muchas columnas para que pudiera funcionar verticalmente. Los encabezados de las filas permanecen en su lugar.

Íconos de la mesa
Puede agregar cuántos iconos desea a cada celda. Configure un icono predeterminado y elija los iconos para cada celda por separado. Elija el icono predeterminado y ajuste el tamaño y el color en la pestaña de contenido.

Los iconos se agregan a las celdas específicas en las que desea mostrarse utilizando la etiqueta de iconos en el área de contenido de submodula. Puede reemplazar el icono predeterminado y establecer un valor implícito para esta columna seleccionándolo en la pestaña icono en el submodium y puede ingresar el nombre de cualquier icono específico que desee mostrar. La página de ventas en el elegante mercado de temas ofrece un enlace a la lista de iconos y su nombre.

Los botones de la tabla también se agregan usando etiquetas. Agregue un botón implícito a la pestaña de contenido. También puede estilizar el botón en estas configuraciones. Reemplace el botón predeterminado con la misma configuración en cada sub -modelo de columna.
Agregue el botón a cada celda con la etiqueta del botón en la zona de contenido del submodium. Cambie el texto en el botón agregándolo a las etiquetas. En este ejemplo, agregué el botón predeterminado algunas celdas y cambié el texto para el segundo botón. Fotos de la mesa

Puede agregar imágenes, iconos y otros tipos de contenidos. Establezca la calidad de imagen, proporción, escala y alineación horizontal y vertical. Tiene muchas opciones para imágenes.

Incluso si las imágenes se agregan a la galería, no se muestran hasta que les dice en qué celda mostrar. Esto se hace usando etiquetas. Al escribir la etiqueta de imagen de apertura, la etiqueta de cierre se agrega automáticamente y la imagen se muestra en esa celda. Puede incluirlo en células con otro contenido. Agregue un número entre etiquetas para especificar una determinada imagen para mostrar.

La pestaña Diseño del fabricante de la tabla incluye configuraciones para la tabla, rayas, celdas, texto, encabezado, sótano, dimensionamiento, espacio, borde, etc. Aquí están la configuración principal. Marco de la tabla

La pestaña de diseño incluye personalizaciones para la tabla, las celdas, el texto, el encabezado, la línea, el sótano, el tamaño, el espacio, el borde, etc. Este es el marco de la tabla. El tipo de marco predeterminado utiliza espacios, que coloca un poco de espacio entre las celdas. Esto es ninguno, que elimina los bordes entre las células.

Para los huecos, puede ajustar la columna y las filas independientes. Aumenté el espacio de la columna a 8 PX y la fila a 4 PX.
Las líneas colocan un borde alrededor de cada celda. Tienes control sobre el estilo, el color y el grosor de las líneas. Este es el valor predeterminado.

En este ejemplo, establecí el estilo en el punto, cambié el color y ajusté el ancho de la línea a 3 PX. Rayas de mesa

Las rayas de mesa crean un efecto de banda como una hoja de cálculo estándar. Puede elegir dónde se aplica, elegir el pedido y ajustar el tono, la saturación y el brillo. Estas son la configuración predeterminada.

Para este ejemplo, ajusté el tono de la banda a 86 grados, la saturación al 172% y el brillo al 82%. Los tres ajustes funcionan juntos para crear opciones de color interesantes.

Para este ejemplo, ajusté el color de las celdas de la tabla, las celdas de encabezado y las celdas de encabezado de columna.

Para este ejemplo, agregué un tono de caja # 1 a las celdas del encabezado y una caja de la caja # 3 a las celdas de encabezado ordinarias. Centré la alineación horizontal y vertical del texto para cada tipo de celda individual. También agregué más espacio para objetivos. Estilo de encabezado y sótano

Puede estilizar los colores para el texto y el texto del sótano y las celdas de forma independiente. En este ejemplo, agregué un sótano, hice el texto blanco y mayúscula, establecí el color de la celda en azul oscuro y agregué una sombra de la caja a las celdas. En este ejemplo, ajusté de forma independiente los bordes para las celdas , las células del encabezado y las células del sótano.

Ejemplos de fabricante de mesa

Creé una tabla con 5 columnas, un encabezado de columna y un encabezado clasificado. El encabezado de línea tiene un botón de compra que lo lleva a la página del producto para cada producto y una imagen del producto. Ambos encabezados usan un fondo negro, esquinas redondeadas y fuentes de aspecto. Las células usan rayas, una fuente más grande de look y esquinas redondeadas. La última columna muestra íconos para mostrar si un producto está en stock. Agregué un tono de caja a cada uno de los encabezados y celdas. El marco de la tabla utiliza espacios de 4 píxeles para el espacio de la columna y 7 píxeles para el espacio de la fila.

Aquí está el mismo diseño sin las imágenes en el encabezado de la fila.

Aquí está la apariencia con las imágenes del producto tal como aparece en el móvil. Reduce la tabla a 2 columnas, una es el encabezado de la fila. Lo rompe a través de las columnas.
También puede tener que romper las filas. Este ejemplo elimina las imágenes y muestra la tabla rota en las filas.