Lo más destacado del complemento Divi: Divi Booster

Divi Booster es un complemento de Dan de DiviBooster.com donde crea muchos tutoriales y código para mejorar Divi. Luego, este código se agrega al complemento Divi Booster para facilitar su uso. Divi Booster agrega más de 50 nuevas configuraciones a Divi. Las mejoras afectan encabezados, páginas, publicaciones, módulos, barra lateral, pie de página, menús, complementos y más.

Simplemente puede copiar y pegar el código de los tutoriales, pero hay tantos que el complemento se paga solo en el tiempo que ahorra. Simplemente cargue el complemento y haga sus elecciones. Hecho. No se requiere codificación. Dado que es un complemento, no necesitará usar un tema secundario y no tendrá que agregar código cada vez que cambie los temas secundarios.

Divi Booster es un complemento rápido. Precompila y minimiza su código cuando guarda su configuración en lugar de esperar hasta que un visitante solicite una página. En realidad, se carga más rápido que colocar el código dentro del propio tema.

¿Funciona con extra ? Algunos de los archivos funcionan con Extra, pero no todos. Dan proporciona código y tutoriales (pero ningún complemento todavía; si desea un complemento, infórmele que está interesado) en su sitio ExtraBooster .

Aquí hay un vistazo a las mejoras de Divi Booster.

Menú Divi Booster

Divi Booster se agrega al menú Divi en el tablero. El menú Divi Booster contiene 12 acordeones para las categorías principales. Cuando abra uno, verá las opciones dentro de esa categoría. Algunos incluyen acordeones dentro de las categorías con más opciones. Abrir cada opción le brinda los campos donde puede hacer selecciones. Cada selección tiene un ícono de información que se vincula a la publicación de blog original para esa opción, explica cada uno con más detalle y proporciona el código para esa opción. No necesitará el código porque ya está en el complemento.

Configuración de todo el sitio

Iconos

Puede agregar sus propios íconos para anuncios publicitarios y módulos de galería. Puedes subir tantos como quieras. Después de cargar el primero, guarde su configuración y aparecerá otro campo de carga. También puede agregar aún más íconos de redes sociales para que aparezcan en su pie de página. También hay una opción para abrir enlaces de redes sociales en una nueva ventana.

Aquí hay nueve nuevos íconos sociales.

Disposición

La configuración de diseño le permite colocar una imagen sobre el encabezado, agregar un widget fijo que permanece en el lado izquierdo de la pantalla, permitir que el contenido se superponga al encabezado en el diseño del cuadro y eliminar la sombra en el diseño del cuadro.

Este ejemplo usa una imagen antes del encabezado, el área del widget adhesivo y el contenido principal se superponen. Esto ayudará a crear algunos diseños interesantes. Los banners se pueden colocar fácilmente sobre el encabezado y puede colocar un registro en el boletín o cualquier tipo de mensaje en el área del widget adhesivo.

Enlaces

Esto soluciona cualquier problema que pueda tener con el desplazamiento del enlace de anclaje. Por ejemplo, si coloca una identificación de CSS en una sección y luego coloca un enlace a esa sección en el menú, el enlace debería llevarlo a esa sección. Sin embargo, hay casos en los que puede llevar a sus lectores un poco por encima o por debajo de donde usted lo desea. Esto soluciona ese problema.

Velocidad del sitio

La velocidad del sitio utiliza la compresión para reducir el tamaño de descarga de sus páginas antes de que se envíen a los navegadores de sus visitantes. Esto lo ayudará a pasar el mensaje de PageSpeed ​​Insight de que debe habilitar la compresión sin necesidad de un complemento adicional.

Encabezamiento

Encabezado superior

Las opciones del encabezado superior (ese pequeño menú en la parte superior donde puede colocar su número de teléfono y correo electrónico) le permiten mover todos los íconos al lado derecho del menú, mostrar íconos sociales para el menú secundario en dispositivos móviles, cambiar el enlace flotante color, coloque los íconos de contacto a la izquierda y los íconos sociales a la derecha, agregue texto al lado izquierdo y haga que se pueda hacer clic en los números de teléfono.

Aquí hay un vistazo a cómo la mayoría de esas opciones se ven en la pantalla. La información de contacto está a la izquierda. En el ejemplo del encabezado principal, lo he colocado a la derecha.

Encabezado principal

El encabezado principal tiene varias características de diseño nuevas, como agregar una nueva área de widgets debajo de los enlaces de navegación para colocar widgets y códigos cortos, y centrar verticalmente los enlaces del encabezado. Puede establecer la cantidad de píxeles que los lectores tienen que desplazarse antes de que el encabezado se reduzca. También solucionará un problema con el ancho del menú y la lupa.

Puede usar el encabezado móvil en el escritorio, ocultar el borde inferior, elegir que el encabezado no se encoja al desplazarse, ocultar el encabezado (esta es una excelente función para crear su propio encabezado personalizado) y establecer la altura mínima tanto para normal como para encabezados reducidos.

También hay opciones de color para el desplazamiento del elemento del submenú y el enlace del menú, corregir los colores del enlace del submenú y cambiar el color del icono de búsqueda. Establezca el espacio entre los elementos del menú, cambie la URL del enlace del logotipo y cambie el texto de la página de selección del menú centrado.

Aquí, el encabezado superior incluye texto, un número de teléfono en el que se puede hacer clic, todos los íconos sociales y todo se mueve hacia el lado derecho. El encabezado principal incluye una nueva área de widgets donde puedo colocar texto, anuncios, código, etc. Todos los enlaces del menú están centrados.

Este usa el encabezado móvil. Coloqué texto antes del menú y abrí el menú para hacer una selección.

Encabezado móvil

El encabezado móvil puede usar un diseño de estilo de aplicación. Puede ocultar el icono de búsqueda, agregar texto antes del botón de menú, establecer el tamaño de fuente y ocultar menús secundarios.

Publicaciones

Para las publicaciones, puede hacer que la imagen destacada sea tan ancha como el área de contenido, corregir la capacidad de respuesta del botón de comentarios, evitar que se recorte la altura de la publicación destacada y evitar que las imágenes destacadas se estiren.

Aquí la imagen destacada tiene el mismo ancho que el área de contenido. La imagen no se recortó ni se estiró. Además, este está usando el menú móvil con texto agregado antes del menú.

Paginas

Esto le permite agregar una opción de diseño de página a las páginas del constructor Divi . Esto normalmente solo está disponible en el editor predeterminado. Me gusta mucho este porque tuve que cambiar al generador predeterminado y hacer el cambio. Esto parece simple, pero puede ser un gran ahorro de tiempo.

barra lateral

Puede cambiar el color de fondo de la barra lateral y ocultar la línea divisoria. Aquí hice la barra lateral de color púrpura claro y quité el divisor.

Pie de página

Este es un editor de pie de página que le permite centrar los enlaces de pie de página y reemplazarlos con su propio texto o HTML. Se incluyen códigos abreviados para mostrar el símbolo de copyright y dos formas diferentes de mostrar el año.

Agregué mi propio texto e incluí los códigos abreviados de copyright y fecha.

Constructor de divisiones

Constructor estándar

Las características estándar del constructor Divi le permiten configurar el módulo en pantalla completa, habilitar el constructor en tipos de publicaciones personalizadas (esto es excelente para WooCommerce, etc.) y establecer el ancho mínimo del botón CTA.

La configuración del módulo de pantalla completa elimina parte del desplazamiento para ver más de sus opciones en la pantalla. Esto es más útil para aquellas opciones que utilizan el espacio, como diseños y módulos. Los que mantienen una sola columna no se benefician tanto.

Aquí está el Divi Builder agregado a un tipo de publicación de producto de WooCommerce. El contenido de Divi se coloca dentro del área de descripción del producto. Esto puede incluir cualquier cosa que pueda colocar dentro de un diseño Divi.

Constructor visual

Para el constructor visual, puede mostrar el borde flotante en los módulos. Normalmente, solo las secciones y las filas muestran los bordes. Esto es útil para visualizar y planificar el diseño del espacio.

Módulos

Hay muchas personalizaciones para los módulos. Incluyen:

Acordeón : hágalos cerrados por defecto y hágalos cerrables.

Blurb : agranda los íconos colocados a la izquierda.

Cuenta regresiva : oculta el cero inicial en los días.

Galería : tiene varias opciones para el tamaño de las imágenes. Cambia el número de imágenes por fila y su ancho y alto, cambia el color del borde, centra las imágenes, desactiva el efecto de deslizamiento y oculta los títulos.

Encabezado (ancho completo) : hace que el icono de desplazamiento hacia abajo rebote. También hay una opción para solucionar los problemas de visualización de pantalla completa de IE.

Mapa : utilice su propia imagen como icono de alfiler. Utiliza imágenes de 46×43.

Portafolio : al igual que la galería, puede cambiar la cantidad de imágenes por fila y establecer la altura y el ancho de la imagen. También puede hacer que las imágenes llenen el contenedor.

Cartera (filtrable) : la cartera filtrable tiene las mismas características que la cartera normal.

Portafolio (ancho completo) : agregue espacio entre las imágenes del proyecto en la vista de cuadrícula. También puede evitar que las imágenes se recorten o estiren.

Navegación posterior : intercambie los enlaces anterior y siguiente.

Control deslizante de publicación : haga que la imagen de la diapositiva se vincule a la publicación si el botón ‘leer más’ está habilitado. Puede hacer que los controles sean cuadrados y huecos.

Tabla de precios : corrige un problema de espacio con la función excluida. Esto incluye algunas características de Geno para mejorar el estilo, usar esquinas redondeadas y usar gráficos de viñetas con características + y x. También puede usar un tachado para funciones que no están disponibles.

Registro : una función de Geno que utiliza un estilo horizontal.

Control deslizante : establezca la altura predeterminada del control deslizante, agregue un color de fondo con opacidad al texto, coloque imágenes a la derecha, abra enlaces en una pestaña nueva, deshabilite el efecto deslizante, haga que los controles sean cuadrados, huecos y haga que el enlace de la imagen al contenido.

Texto : aumente el espacio alrededor de las listas de viñetas.

Aquí hay una página que usa algunas de las personalizaciones del módulo, incluido un control deslizante con navegación de puntos cuadrados y huecos, navegación, tabla de precios mejorada y formulario de registro de correo electrónico horizontal.

Complementos

WooCommerce : elimine el ícono del carrito de compras del encabezado y haga que la tienda muestre cuatro artículos por fila.

Otro : solucione el problema de superposición del encabezado superior de Simple Lightbox y solucione los problemas de diseño de PageLoader para Chrome.

Aquí hay una tienda que muestra cuatro productos por fila. Observe que no hay un carrito de compras en el encabezado.

Administrador de CSS

Esto le mostrará el CSS personalizado que ha colocado en el panel Divi. Puede agregar tantos cuadros CSS personalizados como desee para usarlos en cualquier lugar.

Herramientas de desarrollo

Hay varias herramientas para desarrolladores, que incluyen:

Importar / Exportar : importe o exporte la configuración del complemento.

CSS generado : use CSS en línea y deshabilite la minificación. Puede ver el CSS del complemento.

JS generado : use JavaScipt en línea y deshabilite la minificación. También puede ver el JavaScript del complemento.

HTML de pie de página generado : vea el archivo de texto HTML de pie de página generado por el complemento.

Reglas .htaccess generadas : vea el archivo .htaccess del complemento.

depreciado

Estas son características que aún puede usar si está usando Divi 2.4 o inferior. Estas características ahora están disponibles en Divi. Las características aún están incluidas en caso de que use una versión anterior.

Licencia

El complemento se puede instalar en tantos sitios web como desee para usted y sus clientes. No se requiere clave de licencia.

Pensamientos finales

Divi Booster agrega muchas mejoras a Divi y puede seleccionarlas fácilmente desde la interfaz limpia. Si estuviera usando solo algunas mejoras, solo usaría código con un tema secundario, pero tener más de 50 mejoras, junto con el hecho de que el complemento es más rápido que colocar el código dentro de los archivos del tema, hace que usar el complemento sea la mejor opción.

Descubrí que Divi Booster es fácil de usar y usaría prácticamente todas sus funciones. Si quisiera saber más sobre las características, la publicación del blog está a solo un clic de distancia. Si hay funciones que le gustaría que se agregaran, puede solicitarlas.

¿Has probado Divi Booster? Si es así, ¡nos gustaría leer sus comentarios en la sección a continuación!

Imagen destacada de Mix3r / shutterstock.com.