Resaltado del complemento Divi: Caja de herramientas Divi

Divi Toolbox es un complemento de terceros que agrega muchos efectos nuevos a Divi que normalmente requerirían CSS, JavaScript, PHP o muchos complementos individuales. Los efectos son fáciles de usar y personalizar y le dan a su sitio web Divi un brillo adicional para destacar entre la multitud.

Los efectos incluyen cambios en todo el sitio, nuevos menús móviles, fondos de partículas, pies de página, widgets, estilo, animaciones, encabezados, navegación, nuevos diseños de blog, diseños Divi en nuevas ubicaciones, personalización de la pantalla de inicio de sesión, ventanas emergentes y mucho más. Muchas de las funciones se pueden diseñar con nuevas incorporaciones al personalizador de temas. Divi Toolbox no funciona con Extra o el complemento Divi Builder.

Configuración general de Divi Toolbox

La pantalla de opciones de Divi Toolbox se agrega al menú del tablero de Divi. La configuración está habilitada aquí, pero los ajustes se realizan en el personalizador.

La configuración general incluye estilo de encabezados globales, personalizar la página de inicio de sesión, ocultar proyectos, permitir cargas de tipo de archivo SVG, barra de desplazamiento personalizada del navegador, configuración de página 404 (elija un diseño y oculte el encabezado y pie de página) y la configuración de iconos sociales (habilite el estilo, abra en una nueva pestaña y agregue más iconos).

Al agregar más íconos sociales, se abre un campo donde puede ingresar la URL de 9 redes sociales más.

Aquí está la pestaña General en el personalizador, donde puedo ajustar la configuración que habilité. Las configuraciones incluyen encabezados y fuentes, la barra de desplazamiento del navegador y la pantalla de inicio de sesión. En este ejemplo, hice algunos ajustes al h1 y al texto del cuerpo y agregué estilo a la barra de desplazamiento. También agregué más íconos sociales.

Para la pantalla de inicio de sesión, deberá realizar sus cambios y luego cerrar la sesión o ver la pantalla en otro navegador.

Aquí está mi pantalla de inicio de sesión después de agregar una imagen de fondo, un logotipo y cambiar el tamaño y los colores de los campos y el texto. Se necesitan algunos ajustes, ya que no puede ver la pantalla mientras realiza los cambios.

Configuración del encabezado de Divi Toolbox

La configuración del encabezado agrega estilo al menú, habilita un menú desplegable personalizado, agrega un botón de menú de CTA, cambia el logotipo en el menú fijo, habilita el logotipo superpuesto y agrega un diseño Divi antes de la navegación en la página de inicio, y un diseño antes y después navegación en otras páginas.

El botón de menú de llamada a la acción le permite aplicar la llamada a la acción al primer o último elemento del menú, o aplicar una clase personalizada. Proporciona el CSS e instrucciones sobre dónde agregarlo.

Aquí está el personalizador para el encabezado. Agregué un diseño sobre el menú (en este ejemplo, es solo un módulo de texto, pero puede agregar un diseño completo si lo desea). El logotipo superpuesto tiene un cuadro cuadrado con efectos de sombra. Cambié el tamaño del logo de 200 a 140 y moví los íconos sociales al menú principal. Estoy colocando el cursor sobre el elemento del menú Servicios para que pueda ver el efecto CSS.

Configuración de pie de página de Divi Toolbox

La configuración del pie de página incluye un pie de página adhesivo, revelación de pie de página, personalización de menús y widgets, personalización del botón volver al principio (que agrega una opción de enlace de botón personalizado) y agregar diseños de pie de página antes y después.

En este ejemplo, cambié las fuentes del encabezado y del menú a mayúsculas y aumenté el espaciado. También ajusté los colores de desplazamiento y agregué un icono junto al texto al desplazar el cursor. Agregué un diseño después del diseño del pie de página. Este usa un pie de página revelado (por lo que el texto está detrás del módulo de texto que está encima).

Diseñé el botón de volver al principio para que muestre texto. Tiene un efecto de sombra y he ajustado su ubicación. Dejé los colores por defecto. He centrado el texto inferior y los iconos sociales. Para el efecto de desplazamiento, elegí Crecer (también incluye encoger, subir, bajar, bamboleo, latido del corazón, gelatina y pulso). Estoy colocando el cursor sobre el ícono de Facebook para que puedas ver el efecto.

Configuración móvil de Divi Toolbox

La configuración móvil incluye un campo para ingresar el punto de interrupción del menú móvil (el ancho exacto de la pantalla cuando el menú cambia de escritorio a móvil), estilos personalizados, cambiar el logotipo, elegir el efecto de clic del icono de hamburguesa, contraer el submenú anidado y habilitar varias clases de CSS. Las clases CSS le permiten invertir las columnas y centrar el texto, los módulos y los botones.

Aquí hay un vistazo a la página en Google Chrome con Responsive seleccionado. Tan pronto como tomé el tamaño de la pantalla a menos de 980 píxeles, cambió al ícono de móvil que seleccioné y agregué el menú de hamburguesas con animación que elegí.

En esta pantalla, estoy diseñando el color de fondo del menú móvil, el color de fondo de desplazamiento y el menú de hamburguesa. Cambié el texto de los elementos del menú principal a mayúsculas y dejé el estándar de texto de CTA. También cambié el fondo del elemento del menú CTA. También puede ajustar el tamaño del menú y del icono.

Configuración del blog de Divi Toolbox

La configuración del Blog te permite personalizar la barra lateral y los widgets, el meta de la publicación, el archivo y las páginas de categorías, elegir un diseño (entre 6 opciones), ocultar la barra lateral de archivos y personalizar el texto del botón Leer más.

Para publicaciones individuales, puede elegir el diseño de la barra lateral, ocultar el título de la publicación, agregar un cuadro de autor, agregar enlaces anteriores y siguientes, agregar publicaciones relacionadas y personalizar el formulario de comentarios. También puede agregar diseños personalizados después de la navegación a publicaciones individuales, archivos, categorías, páginas de autor y páginas de resultados de búsqueda.

Para la página del blog, agregué un efecto de sombra a la barra lateral, cambié las fuentes y su estilo, y diseñé el cuadro de búsqueda y aumenté el tamaño del borde. Utiliza un diseño alternativo y personalicé el texto del botón leer más.

Este ejemplo es el diseño 6. He personalizado de nuevo los colores de la fuente meta y agregué un color de desplazamiento. También he personalizado el fondo del botón Leer más.

Las publicaciones de blog individuales le permiten personalizar cada uno de los elementos que agregó en la configuración del blog. En esta pantalla, estoy personalizando las publicaciones relacionadas, los enlaces siguientes y anteriores, y el cuadro de autor. Tienes control sobre todo el texto, colores, sombras, etc.

En este ejemplo, estoy personalizando el formulario de comentarios. Tienes control sobre los colores del campo (enfocados y no enfocados), borde, texto, colores, botón, etc. Cambié el color de fondo del botón, el color del enfoque del campo, agregué un borde al campo y cambié el radio.

Configuración de módulos Divi Toolbox

La pestaña Módulos proporciona configuraciones para agregar un efecto de desplazamiento de seguimiento del mouse, agregar una suscripción de correo electrónico delgada (proporciona CSS para tres opciones diferentes), botones secundarios (que agrega una nueva capa de personalización) y muchos ajustes.

Los ajustes incluyen un ícono de triángulo animado para acordeón y módulos de alternancia, eliminar el borde inferior horizontal y el relleno para las tablas de precios, mover la imagen vertical debajo del contenido en los testimonios, ocultar las barras de desplazamiento horizontales y agregar CSS para alinear columnas verticalmente y cambiar la altura. de cualquier elemento al 100% de la altura de su ventana gráfica.

Aquí hay un vistazo a la suscripción de correo electrónico delgada. Coloca todos los campos en una sola línea. Este ejemplo también usa el botón secundario. Solo los botones a los que agregué la clase CSS obtendrán estos cambios. Usar la clase CSS significa que ahora tengo dos estilos de botones globales.

Configuración de extras de Divi Toolbox

La pestaña Extras incluye precargadores, ventanas emergentes, fondo de partículas, efecto de inclinación 3D y desplazamiento de paralaje para módulos.

Hay 12 precargadores para elegir. Puede hacer que solo aparezcan en la página de inicio si lo desea, y seleccionar su tipo de transición y velocidad. La pantalla de selección muestra las animaciones de los precargadores. Puede personalizarlos aún más en el personalizador de temas.

Active las ventanas emergentes con cualquier enlace de un elemento de menú, botón, enlace en texto, etc. Cree tantos como desee. Elija cualquier diseño prefabricado para la ventana emergente. Personaliza el fondo y el botón de cierre en el personalizador.

Se trata de partículas en movimiento. Tiene control total sobre el color, la forma, el número de partículas, la velocidad, el tamaño, el tamaño de la línea, la opacidad y la interactividad. Hay dos ID de CSS para partículas, lo que le permite tener dos diseños diferentes.

He aquí un vistazo a la función de inclinación. Puede ajustar la inclinación, la perspectiva, la escala, la velocidad y el deslumbramiento. Agréguelo a cualquier sección, fila o módulo.

Licencia de Divi Toolbox

Hay dos licencias para elegir:

• Licencia regular (para usar en un proyecto) - 49,00 €
• Licencia extendida (para uso en proyectos ilimitados) - 169,00 €

Pensamientos finales

Estoy impresionado con la cantidad de funciones y configuraciones que tiene este complemento. Me gusta especialmente que agrega publicaciones relacionadas, enlaces anteriores y siguientes, y un cuadro de autor a las publicaciones de blog que no se crean con el constructor Divi. La barra de desplazamiento también es un buen toque.

Hay algunas configuraciones a las que puede acceder en los módulos Divi, como el texto del encabezado, pero esto proporciona más detalles para esas configuraciones. Me gustaría ver algunos ajustes más agregados (por ejemplo, efectos de sombra para el cuadro de comentarios, más opciones de logotipo, ubicaciones de iconos de redes sociales, etc.).

Si está interesado en agregar una tonelada de efectos nuevos a Divi de la manera más fácil posible, vale la pena echarle un vistazo a Divi Toolbox.

Queremos escuchar de ti. ¿Has probado Divi Toolbox? Háganos saber su experiencia en los comentarios a continuación.

Imagen destacada a través de vasabii / shutterstock.com