Curso de Divi Booster

Divi Booster es la forma más sencilla de mejorar aún más tu web creada con el tema Divi, añadiéndole multitud de opciones de personalización sin necesidad de saber nada de código. Personaliza por completo el aspecto de las barras laterales, la cabecera, las imágenes destacadas, el footer…

Las principales características de Divi Booster son:

  • Cientos de nuevas opciones de personalización. Cambiar la altura de un slider, evitar que la cabecera se contraiga al hacer scroll, cambiar el aspecto de sólo una página… Podrás personalizar totalmente tu sitio sin tener que programar.
  • Muy fácil de usar. Opciones que se activan y desactivan simplemente con marcar o desmarcar una casilla.
  • Rapidez de ejecución. Divi Booster genera, precompila y minifica el CSS y el JavaScript cuando tú guardas la configuración, no cuando alguien visita la web. De esta forma la carga es mucho más rápida.
  • Compatible con temas hijo. Da igual si estás usando Divi directamente o has creado un tema hijo para tu plantilla.
  • Divi Booster añade nuevos iconos para los módulos y te permite subir los tuyos personalizados.

Contenido

Modulos personalizados para Divi

Parte 1. Ampliar ajustes

En esta primer parte del curso veremos la opción de ampliar ajustes

Ampliar ajustes divi booster david ibiza

Está primer parte de los ajustes de Divi Booster se compone de las siguientes secciones:

  • Icons.- Permite agregar iconos de nuevas redes sociales a Divi como: Linkedin, youtube, instagram, etc.
  • Layout.- Permite agregar mejoras al layout como: agregar una imagen antes del header, remover la sombra del header, etc.
  • Links.- Permite entre otras cosas abrir las imagenes en modo lightbox
  • Site speed.- Permite habilitar mejoras para mejorar la velocidad el sitio

Parte 2. Ajustes del header

Aquí veremos las opciones de Divi Booster nos ofrece para personalizar el Header de Divi

Desde aquí podremos:

  • Top header.- Agregar varias mejoras a la barra que se encuentra sobre header entre las que se encuentran: cambiar los iconos del teléfono y correo electrónico a la derecha, agregar un texto personalizado o hacer clicable el número de teléfono.
  • Main Header.- Agregar varias mejoras a la cabecera principal como: ocultar el header,  establecer la altura mínima del header, cambiar la URL a la que se nos dirige al dar click en el logo.
  • Mobile header.- Agregar varias mejoras a la cabecera que se muestra al ver el sitio en un móvil como: Agregar un estilo tipo app al header, ocultar el icono el botón de búsqueda en móviles, cambiar el color del botón de menú móvil, etc.

Parte 3. Ajustes del blog y sidebar

A continuación veremos las opciones que Divi Booster nos da para mejorar las opciones del blog y la sidebar de Divi.

Desde aquí podremos:

  • Para los post del blog no estirar las imágenes, hacer el botón para comentar responsivo, etc.
  • Para la sidebar agregar un color de fondo, ocultar la línea que separa la sidebar del contenido y hacer que la sidebar se oculte al dar click sobre ella.

Parte 4. Ajustes del footer, plugins y CSS Manager

A continuación veremos las opciones que Divi Booster nos da para mejorar las opciones del footer y plugins de Divi, así como lo que a mi gusto es la mejor herramienta de Divi booster el CSS Manager

Desde aquí podremos:

  • Para el footer centrar todos los links del footer, ajuster la anchura del footer y cambiar su texto por uno personalizado.
  • Para los Plugins establecer algunos ajustes para definir como se integra Divi con Easy Digital Downloads, WooCommerce y otros más. Tal vez aquí las opciones más usadas sean las de WooCommerce que incluyen: quitar el icono del carrito del header de Divi y limitar a 4 productos por fila en la página de la tienda.
  • El CSS Manager es una herramienta que incluye Divi booster que permite hacer algo muy interesante y es agregar condigo CSS pero estableciendo reglas para establecer cuando es que ese código CSS se ejecutara, en dichas reglas se pueden establecer criterios como: tipo de usuario, tipo de página, layout de Divi, navegador del usuario, ancho de pantalla y hasta el tipo dispositivo donde esté visualizando la web.

Parte 5. Developer tools, Divi Builder y Modules

Llegamos al final del curso y ahora toca el turno a las opciones que Divi Booster nos da para mejorar las opciones del Divi builder, las developer tools y los módulos.

Desde aquí podremos:

  • Para el Divi builder establecer algunas preferencias que afectaran al constructor estándar y al constructor visual de Divi como:
    • En el caso del constructor visual ocultarlo o mover los botones de publicación a la izquierda
    • En el caso del constructor estándar hacer que este abarque toda la pantalla, habilitar el constructor de Divi para todos los custom post types y habilitarlo por defecto para todas las páginas y entradas.
  • Las developers tools como su nombre indica están más pensadas para usuarios desarrolladores y permiten:
    • Exportar e importar la configuración de Divi Booster para por ejemplo llevar la configuración de un sitio a otro
    • Desactivar la minificación de código CSS y Javascript por si da algún problema
    • Agregar reglas al archivo .httaccess
  • Modules permite hacer algunos ajustes para que estén por defecto al agregar los módulos en el constructo visual, también hace algunos ajustes puntuales en algunos módulos como por ejemplo: hacer que todas las pestañas del acordeón estén cerradas por defecto, hacer más grande el icono del módulo anuncio cuando lo colamos a la izquierda en lugar de arriba, quitar el cero en los días del módulo cuenta atrás cuando son menos de 10, etc.
  • Mención aparte requiere la opción Deprecated que muestra todos ajustes que han quedado obsoletos conforme Divi se ha ido actualizando.

Curso completo

Finalmente y si así lo deseas a continuación puedes ver el curso completo en un solo video