Toolset es un complemento de WordPress que agrega tipos de publicaciones personalizadas, campos, taxonomías y relaciones de publicaciones que se pueden usar en cualquier parte de su sitio web. Estos elementos generalmente se colocan dentro de su contenido con códigos cortos o bloques de Gutenberg, pero Toolset ahora está integrado de forma nativa con Divi con un módulo Toolset Views. Toolset es realmente útil para crear sitios web con muchos tipos de publicaciones personalizadas y es un excelente complemento para crear sitios web de directorios . En este artículo, veremos cómo Toolset se integra con Divi y veremos qué puede hacer.
Toolset se integra con Divi al permitir que Divi muestre fácilmente Vistas de conjunto de herramientas. Las vistas del conjunto de herramientas se crean con un bloque en el editor de Gutenberg , dentro de una página, publicación o plantilla. Abra la lista de bloques, desplácese hacia abajo hasta Conjunto de herramientas y agregue un Ver bloque de la lista de bloques.
A continuación, puede seleccionar crear una nueva vista o utilizar una vista existente.
La creación de una nueva vista le permite elegir los elementos de vista y el estilo de bucle (que es el diseño o cómo se mostrarán los resultados). Las Vistas pueden mostrar todos los resultados, con paginación, con clasificación frontal, como un control deslizante, usando una búsqueda personalizada, etc. Puede hacer estas selecciones aquí o puede cambiarlas más tarde.
Elija el contenido que se mostrará en la Vista.
Esto le permite crear el bucle que luego puede usar para mostrar los tipos de publicaciones. La documentación lo guía a través de esto en detalle. Las vistas pueden mostrar contenido como publicaciones, taxonomías y usuarios, cada uno con subconjuntos de tipos de publicaciones. Esto incluye tipos de publicaciones personalizadas creadas con Toolset.
editar hasta este punto
__
Las vistas se crean y editan utilizando los bloques del conjunto de herramientas.
Módulo Divi del conjunto de herramientas
Toolset agrega un módulo a Divi Builder llamado Toolset View. Este módulo muestra cualquier vista de conjunto de herramientas que elija y se puede personalizar con la configuración estándar del módulo Divi.
Pestaña de contenido
La pestaña Contenido incluye un cuadro desplegable donde puede seleccionar la Vista de conjunto de herramientas que desea mostrar. También incluye un enlace, configuraciones de fondo y la etiqueta de administrador. Seleccioné una vista llamada 3 instructores para la página de inicio .
El diseño de la Vista se creó en la configuración del editor de tipo de publicación de Toolset. Agregué color al fondo usando la configuración de fondo del módulo para que se destaque. La vista se muestra en vivo en Divi Visual Builder usando las funciones que le asignó al crearla. Esto facilita ver cómo diseñarlo con la configuración de Divi y ver cómo se verá dentro de su diseño.
Aquí hay otra vista de conjunto de herramientas. No he cambiado la configuración del fondo, por lo que la nueva Vista se muestra sobre el fondo que ya configuré.
Ficha Diseño
La pestaña Diseño incluye configuraciones para el texto, el texto del módulo, el tamaño, el espaciado, el borde, la sombra del cuadro, los filtros, la transformación y la animación. Hay suficientes configuraciones para diseñar el módulo para que se ajuste a cualquier diseño de Divi. Veamos los específicos de este módulo.
Texto
Las opciones de Texto ajustan la alineación y la sombra de las etiquetas y descripciones. Text Shadow incluye la configuración estándar, como la longitud, la intensidad del desenfoque y el color. Establecí la alineación a la derecha y agregué un color de sombra de texto en este ejemplo.
Texto del módulo
La configuración del texto del módulo incluye ajustes de fuente, grosor, estilo, alineación, color, tamaño, espaciado, altura y sombra del texto. El color del texto afecta a las etiquetas. El resto de la configuración afecta las etiquetas, las etiquetas, la descripción, el texto del botón y la calificación de estrellas.
En este ejemplo, hice que la fuente se negrita, configuré el estilo de fuente en mayúsculas, configuré el color del texto en rojo, aumenté el tamaño de la fuente a 16 px y disminuí la altura de la línea a 1,7 em. No he ajustado el borde, la sombra del cuadro, el tamaño, el espaciado, los filtros, etc., pero esas configuraciones también están disponibles.
Conjunto de herramientas con ejemplos de Divi
Aquí hay algunos ejemplos del uso del módulo Vistas del conjunto de herramientas dentro de los diseños de Divi. Agregaré el módulo a algunos diseños. Para otros, reemplazaré los módulos actuales con un solo módulo Vistas de conjunto de herramientas.
Adición de un módulo de vistas de conjunto de herramientas a una página de destino
Este es un vistazo a la vista de instructor ubicada dentro del diseño de la página de inicio de Yoga Studio . Está ubicado dentro de una sección para presentar a los instructores e incluye módulos de texto, el módulo Vista de conjunto de herramientas, módulos de personas y un botón. Esta es la vista de estructura alámbrica.
Aquí hay un vistazo a la vista desde la interfaz. El resultado es una sección limpia para los instructores. El módulo Vista de conjunto de herramientas tiene un estilo que coincide con el diseño. La vista incluye funciones de búsqueda y clasificación.
Aquí hay una captura de pantalla ampliada para mostrar más del diseño para que pueda ver qué tan bien funciona con el diseño.
Sustitución de varios módulos por un único módulo de vistas de conjunto de herramientas
Este ejemplo utiliza la página del equipo de Yoga Studio . La página original mostraba a los miembros del equipo usando módulos de persona. Para este, reemplazaré los módulos de persona con un único módulo Vistas de conjunto de herramientas. A modo de comparación, este ejemplo muestra la vista de estructura alámbrica para el diseño original.
Así es como se ve el diseño original en la interfaz. Dejaré intactos el encabezado, los socios y el pie de página, pero los incluiré en las imágenes para que pueda ver qué tan bien se integra con los diseños de Divi.
Reemplacé los módulos de 6 personas con un solo módulo Vistas de conjunto de herramientas.
La página ahora muestra más personas (muestra el número que se le asignó en el editor del conjunto de herramientas) e incluye paginación para ver una segunda página. Por supuesto, la capacidad de elegir una vista de conjunto de herramientas diferente significa que tenemos más opciones de cómo se muestran. Veamos algunos ejemplos más.
Esta vista muestra la foto y el nombre de la persona.
Esta vista elimina las imágenes y muestra el nombre, el título y la descripción. Cada uno incluye un cuadro de sombra para destacar sobre el fondo. También incluye un cuadro de búsqueda.
Página de archivos
Creé una página para mostrar una lista de artículos usando los elementos de la página de Yoga Studio. Este diseño utiliza el mismo módulo Vistas del conjunto de herramientas, pero he seleccionado una vista diferente.
Dónde comprar
El módulo Toolset Views Divi está incluido en el complemento Toolset Blocks . Este complemento es una extensión que se incluye con Toolset y agrega muchos bloques al editor de Gutenberg y un módulo a Divi Builder llamado Toolset View. Cuando compra Toolset, tiene acceso gratuito al complemento Toolset Blocks.
Toolset está disponible en tres opciones de suscripción anual. Cada uno incluye 1 año de actualizaciones y soporte.
- $69 – 1 sitio
- $149 – 3 sitios
- $299 – sitios ilimitados
pensamientos finales
Esa es nuestra mirada a la integración de Toolset Divi. Esta es una integración interesante. Toolset es una poderosa herramienta para WordPress, por lo que integrarlo con Divi fue un movimiento inteligente. Las vistas de conjunto de herramientas todavía se crean dentro de los editores de conjunto de herramientas, pero ahora puede mostrarlas dentro de su contenido Divi sin tener que usar códigos abreviados. Esto le da acceso a las opciones de estilo de Divi.
Algunas de las características y el estilo se proporcionan a la Vista con configuraciones en el Conjunto de herramientas, pero el módulo Divi tiene suficientes configuraciones para personalizar las Vistas para que se ajusten a los diseños de su página. Me gusta que pueda personalizar el módulo y seleccionar una vista diferente sin realizar cambios en el módulo.
Toolset y Divi funcionan bien juntos. Toolset tiene una curva de aprendizaje, pero si puede crearlo con Toolset Views, puede mostrarlo en sus diseños Divi.
Queremos escuchar de ti. ¿Has probado la integración Divi de Toolset? Cuéntanos tu experiencia en los comentarios.
Imagen destacada a través de Visual Generation / shutterstock.com