Divi Booster: amplifica la potencia de Divi (Parte 3)

Este es el ultimo artículo del tutorial Divi Booster.

Si no has visto los otros dos anteriores te animo a hacerlo ahora antes de seguir.

Aquí tienes el artículo 1 y el artículo 2, donde se explican los primeros apartados dedicados a Site-wide Settings y al Header.

Divi Booster tiene un montón de características para que puedas usar Divi aún más fácil. Se ordenan en secciones útiles para que puedas encontrar fácilmente lo que necesitas.

Vamos a ver de un tirón el resto de opciones.

Artículos (Posts)

Conseguir que las imágenes destacadas sean tan amplias como el área de contenido
Make featured images as wide as the content area

Por defecto, Divi muestra las imágenes destacadas en la parte superior, justo después del título de la publicación. Marcando esta opción consigue que las imágenes destacadas llenen el ancho completo del contenido, por encima del título de la publicación y saltando por encima de la barra lateral. En el ejemplo lo puedes ver.

Corregir el botón de comentarios
Fix comment button responsiveness

Divi no maneja adecuadamente la longitud del texto antispam de los comentarios que se muestra en los móviles. Se desplaza fuera de la página. Esta opción centra el texto y lo divide en una nueva línea si excede el ancho del contenido.

Evitar que las imágenes de los post se recorten
Prevent featured post height cropping

Divi fija una altura máxima en las imágenes de los posts en 675 píxeles. Si subes una imagen más alta que ésta, se recortará. Puedes evitar este comportamiento aumentando la altura máxima con esta opción.

No estirar las imágenes destacadas
Don’t stretch featured images

De forma predeterminada, Divi amplia las imágenes destacadas hasta llenar todo el ancho del área de publicación. Si deseas desactivar esto y hacer que las imágenes se muestren en su tamaño real, actívalo.

Páginas (Pages)

Agregar en las páginas de Divi Builder la opción de diseño de página
Add Page Layout option on Divi Builder pages

Te permite añadir en los ajustes de una página (no confundir con Entradas) de Divi la opción «Diseño de página», donde podrás elegir si usar barras laterales en tu página.

Barra lateral (Sidebar)

Color de fondo de la barra lateral:
Sidebar background color:

Divi incluye una barra lateral flexible que puede colocarse a la izquierda o a la derecha de la página (u ocultarlas por completo). Por desgracia, la forma en que la barra lateral está estructurada, hace que sea muy difícil establecer el color de fondo con márgenes, etc, que realmente se ven bien. Aquí entra en juego esta opción, donde puedes elegir el color de fondo.

Ocultar línea de división
Hide dividing line

Elimina la línea vertical que divide el contenido principal y la barra lateral. Simple.

Pie de página (Footer)

Centrar los enlaces de pie de página
Center the footer links

Pues eso mismo. Activado consigue que los links se centren en el pie de página de tu tema Divi.

Sustituir los enlaces de pie de página con este texto / HTML:
Replace footer links with this text / HTML:

Si quieres cambiar el texto del pie de Divi que dice: «Designed by Elegant Themes | Powered by WordPress » por uno propio, aquí puedes hacerlo. Te permite insertar shortcodes como el símbolo de CopyRight o el año. Si necesitas añadir una nueva línea utiliza el tag HTML: <br/>

Constructor Divi (Divi Builder)

Constructor Estándar (Standar Builder)

Conseguir que los ajustes de Divi Builder se muestren en pantalla completa
Make Divi Builder settings pop-ups full screen

El tema Divi viene con un constructor de página de arrastrar y soltar, llamado Divi Builder. Si bien tiene una presentación sencilla y limpia, el relleno y los botones grandes pueden hacer que en pantallas pequeñas se vea un poco claustrofóbico. Con esta opción se puede hacer que se vea una bonita página de configuración a pantalla completa.

Habilitar Divi Builder en publicaciones personalizadas
Enable Divi Builder on Custom Post Types

Divi no tiene todavía una opción incorporada para usar Divi Builder en publicaciones personalizadas. Si quieres habilitar Divi Builder en este tipos de publicaciones, aquí tienes un par de opciones para hacerlo.

La subopción Utilizar la biblioteca de diseño principal «Use main layout library» añadida recientemente, permite que todos los tipos de publicación personalizados compartan una sola biblioteca Divi. Por defecto, Divi da a cada tipo de publicación personalizada su propia biblioteca, lo que significa que los diseños creados en un tipo de publicación no están disponibles en otros.

Esta opción obliga a todos los tipos de publicaciones personalizadas a utilizar la biblioteca de diseño de página principal / publicación, por lo que los diseños Divi estarán disponibles para todos los tipos de publicaciones personalizadas.

Establecer el ancho mínimo del botón CTA: píxeles
Set minimum CTA button width: pixels

Normalmente, los botones de Llamada a la Acción (CTA) de Divi se ajustan en tamaño al texto que contienen. Si prefieres tener un ancho de botón estándar en todo tu sitio, puedes utilizar esta opción.

Constructor Visual (Visual Builder)

Mostrar el borde en los módulos
Show hover border on modules

Esta interesante opción del editor visual es que te permite, a través de un borde que aparece en reposo, ver exactamente donde comienzan / terminan tus secciones y filas. Esto hace que sea ideal para averiguar cosas como dónde está llegando el «padding» de un módulo.

Ocultar visual builder
Hide visual builder

Desactiva el constructor visual de Divi en tu sitio.

Mover los botones de publicación a la izquierda
Move publish buttons to left

Cambia de lugar los botones para publicación hacia la izquierda.

Módulos (Modules)

Acordeón (Accordion)

Hacer que los acordeones estén completamente cerrados por defecto
Make accordions start fully closed by default

Por defecto el módulo de acordeón de Divi se muestra con primer ítem abierto. Si deseas que todos los elementos de acordeón se inicien en estado cerrado de forma predeterminada, puedes hacerlo con esta opción.

Hacer que los acordeones se puedan cerrar
Make accordions closable

Las pestañas del acordeón comienzan cerradas por defecto. Los usuarios solicitaron la opción para volver a cerrar las pestañas del acordeón una vez abiertas. Normalmente Divi mantiene siempre una pestaña del acordeón abierta. La única forma de cerrar una pestaña es abrir otra.

Si quieres que los usuarios puedan cerrar las pestañas de acordeón sin necesidad de abrir otra (es decir, para que todas las pestañas estén cerradas), aquí puedes hacerlo.

Anuncio (Blurb)

Ver más grandes los iconos de anuncio ubicados a la izquierda
Make left-placed blurb icons bigger

El módulo Anuncio te permite agregar un icono con texto a tu página. Contiene opciones para elegir entre colocar el icono encima del texto o al lado. Sin embargo, el tamaño de icono difiere significativamente entre las dos opciones. Esta opción consigue que el icono o imagen colocado a la izquierda del texto se vea más grande.

Temporizador de cuenta atrás (Countdown)

Ocultar el cero en los días
Hide leading zero on days

El módulo de cuenta atrás permite mostrar un temporizador en funcionamiento que cuenta hasta una fecha y hora determinadas. Por defecto, el temporizador muestra ceros a la izquierda, con los días siempre mostrados como teniendo 3 dígitos, así: 001 días. Esta opción elimina los ceros.

Galería (Gallery)

Tamaños de imagen predeterminados en la vista de cuadrícula:
Grid layout default image sizes:

El módulo de galería de imágenes  ofrece la opción de mostrar una galería de imágenes como una serie de miniaturas (vista de cuadrícula). Esta opción añade a Divi Booster la opción para controlar fácilmente el número de imágenes por fila y su tamaño. Puedes elegir el número de imágenes por fila y la anchura y altura en píxeles.

Color del borde del diseño de la rejilla:
Grid layout border color:

Añade un color al borde de una imagen en el diseño de rejilla.

Centrar las imágenes en miniatura de la vista de cuadrícula
Center the images in grid view thumbnails

Eso es lo que hace, pero lo he probado y no me acaba de funcionar o entender de que va.

Desactivar el efecto deslizante en las imágenes de la galería
Disable gallery image «slide in» effect

Cuando ves por primera vez una galería, las imágenes se «deslizan» desde la izquierda. Si no deseas este efecto en las imágenes, puedes activar esta opción.

Ocultar los títulos de las imágenes de la galería (pero no los subtítulos)
Hide gallery image titles (but not the captions)

Por defecto, el módulo de galería del tema Divi muestra los títulos de las imágenes y las leyendas de cada imagen. Aunque hay una opción para ocultar los títulos y las leyendas, a veces es posible que quieras mostrar sólo los títulos pero no las leyendas. De esta forma, puedes controlar fácilmente el texto que se muestra debajo de las imágenes. Para ocultar los títulos en todos los módulos de galería, agrega el siguiente código CSS en tu tema:

Cabecera (anchura completa) – Header (Full Width)

Conseguir el efecto rebote en el icono de scroll
Make scroll down icon bounce

El módulo de cabecera de ancho completo de Divi Builder viene con una opción para tener un botón de desplazamiento hacia abajo, que indica al usuario que hay más contenido a continuación. Para llamar la atención, puedes hacer que «rebote» con esta opción.

Solucionar problemas de pantalla en IE
Fix fullscreen mode display issues in IE

El módulo de «Título de anchura completa» viene con un práctico modo de «pantalla completa», lo que hace que el módulo no sólo sea de ancho completo, sino también de altura completa. Esto permite agregar fácilmente la atención de las páginas. Por desgracia (que raro, jeje), no se ven tan bien en Internet Explorer. Esta opción lo soluciona.

Mapa (Map)

Cambiar el icono del pin del mapa (46 x 43px)
Change map pin icon (46 x 43px)

El tema Divi viene con un práctico módulo de mapa incrustado de Google Maps. Viene con la opción de agregar un pin, pero no hay opción para cambiar el icono predeterminado. Activando esta opción es posible cambiar el icono por el que que tu quieras.

Portafolio (Portfolio) y Portafolio (Filtrable)

Tamaños de imagen predeterminados en la vista de cuadrícula:
Grid layout default image sizes:

El módulo Portafolio ofrece la opción de mostrar tus proyectos como una serie de miniaturas (vista de cuadrícula). Para ajustar el tamaño y el espaciado de las imágenes en su cuadrícula de imágenes en miniatura, puedes usar esta opción.

Puedes elegir el número de imágenes por fila y también la anchura y altura en píxeles.

Conseguir que la rejilla de imágenes llene todo el contenido
Make grid images fill the container

Pues eso mismo.

Portafolio (ancho completo) – Portfolio (Full Width)

Añadir espacio entre las imágenes del proyecto (vista de cuadrícula)
Add space between project images (grid view)

Cuando se utiliza el modo de cuadrícula, el módulo muestra las imágenes destacadas de los proyectos una seguida de la otra.

Esta opción añade un espacio entre foto y foto.

Evitar que las imágenes del proyecto se vean estiradas o recortadas
Stop project images from being stretched / cropped

Cuando se utiliza en modo de cuadrícula, el módulo amplía las imágenes destacadas de los proyectos para llenar completamente los cuadrados de la rejilla. Esto puede llevar a que algunas partes de las imágenes se vean cortadas o estiradas. Al activar la opción consigues que mantengan la proporción.

Navegación por los mensajes (Post Navigation)

Intercambiar los enlaces siguientes y anteriores
Swap the next and previous links

Divi viene con un módulo de navegación de post que permite añadir enlaces a sus publicaciones «anterior» y «siguiente». Por defecto, el enlace «anterior» aparece a la izquierda y el «siguiente» a la derecha. Si prefiere intercambiarlos, puedes activarlo.

Post Slider (Post Slider)

Crear un enlace de imagen de diapositiva al post (Nota: el botón de leer más debe estar habilitado)
Make slide image link to post (NB: read more button must be enabled)

El módulo Post Slider muestra una serie de slides con los artículos seleccionados. Si alguna vez has deseado poder hacer clic en cualquier lugar de la diapositiva y te lleve a la publicación, en lugar de tener que hacer click en el botón «leer más», activando esta opción, consigues que toda la imagen sea un botón.

Convertir en cuadrados los controles de «Post Slider»
Make post slider controls square

Esta opción convierte el control del módulo deslizante de puntos en cuadrados. Es decir, los 4 círculos de la imagen anterior se convierten en 4 cuadrados.

Hacer que los controles deslizantes de «Post Slider» estén huecos
Make post slider controls hollow

Lo mismo que la opción anterior pero ahora los 4 círculos se muestran sin relleno.

Tablas de precios (Pricing Table)

Corrección de la Tabla de Precios
Fix pricing table excluded feature space issue

El módulo de tabla de precios proporciona una lista de características para cada opción de precios. Puedes marcar características como si estuvieran incluidas o excluidas. Las funciones excluidas se muestran, pero están en gris. Hay un pequeño error en el procesamiento de las características excluidas. Esta opción la corrige.

Utilizar un estilo mejorado de tabla de precios
Use improved pricing table style

Gracias a Geno, puedes conseguir unas tablas de precios mucho más vistosas gracias a la hoja de estilos incorporada en esta opción.

Usar esquinas redondeadas en la tabla de precios
Use rounded pricing table corners

Otra mejora de Geno para redondear las esquinas de los cuadros de las tablas de precios.

Utilizar «+» y  «x» en los iconos de las viñetas
Use + and x feature bullet graphics

Otra mejora del mismo autor que incluye mejoras en los iconos de las viñetas (bullets)

Tachado de características no disponibles
Strike-through unavailable features

Añade un tachado a las opciones que no están disponibles en el pack de características de la tabla de precios.

(Subscripción) Signup

Usar el estilo horizontal en el módulo de suscripción
Use horizontal subscribe module style

La tendencia actual es tener la opción de suscripción (Correo Electrónico Optin) como una llamada a la acción (CTA), y a veces una sección de suscripción en formato horizontal encajaría mejor con tu sitio.

Deslizadores (Slider)

Establecer altura del deslizador predeterminado: píxeles
Set default slider height: pixels

El módulo deslizador tiene una altura fija, pero esto se puede cambiar fácilmente con esta opción en píxeles.

Añadir fondo al texto del deslizador:
Add background to slider text:

Aquí puedes añadir un fondo con un color y un porcentaje de transpariencia al texto del deslizador del tema Divi.

Colocar las imágenes del deslizador a la derecha
Put slider images on the right

Si quieres intercambiar la posición de las imágenes de las diapositivas para que las imágenes se muestren a la derecha en lugar de a la izquierda, puedes activar esta opción.

Abrir los vínculos del deslizador en una nueva pestaña
Open slider links in new tab

Para que los enlaces del botón deslizante de Divi se abran en una nueva pestaña, puedes activarlo.

Desactivar el efecto deslizante «slide in»
Disable slider image «slide in» effect

En el control deslizante, la imagen se «desliza» desde la izquierda. Si no quieres que esta diapositiva entre en efecto en las imágenes del deslizador, puedes desactivarla aquí.

Convertir en cuadrados los controles del deslizador
Make slider controls square

Esta opción convierte el control del módulo deslizante de puntos en cuadrados.

Hacer que los controles deslizantes del deslizador estén huecos
Make slider controls hollow

Lo mismo que la opción anterior pero ahora los 4 círculos se muestran sin relleno.

Convierte la imagen de una diapositiva en URL (Nota: requiere que la diapositiva tenga un botón)
Make slide image link to URL (NB: requires slide to have a button)

Consigue que puedas hacer clic en cualquier parte del módulo Slider.

Actualización: Ahora puedes configurar la URL del vínculo en la configuración de diapositivas del módulo deslizante (no es necesario agregar un botón).

Texto (Text)

Aumentar el espacio de las listas con viñetas
Increase spacing around bullet lists

Este simple acción de CSS se utiliza para aumentar el sangrado y el espaciado entre los elementos de las listas.

Conectores (Plugins)

WooCommerce

Quitar el icono del carrito WooCommerce de la cabecera
Remove WooCommerce cart icon from header

Si utilizas WooCommerce, aparece un pequeño ícono de carrito de compras en el menú Divi Header (en el encabezado principal o en la barra de navegación secundaria si tienes uno). Esta opción lo oculta.

Hacer que la tienda de WooCommerce muestre 4 artículos por fila
Make WooCommerce store display 4 items per row

Cuando configuras WooCommerce con el tema Divi, encontrarás que crea una página para tu tienda. Después de añadir algunos productos, verás que la tienda muestra un diseño de 3 columnas. Con esta opción consigues aumentar en 4 las columnas de productos.

Otros (Other)

Arreglar la superposición de «Simple LightBox» con Divi en la cabecera superior
Fix Simple LightBox overlap with Divi top header

Simple Lightbox te permite agregar un efecto de «lightbox» a las imágenes de tu blog. Al hacer clic en una imagen en una de tus publicaciones y, si está vinculada a la (más grande), la imagen original se abrirá con una superposición semitransparente pulida en la página, en lugar de mostrarse en una página triste y vacía. Desafortunadamente, hay un par de problemas que hace que  Simple Lightbox no trabaje bien. Esta opción lo soluciona.

Corregir los problemas de carga de página de «PageLoader by Bonfire» en Chrome
Fix PageLoader by Bonfire page layout issues on Chrome

El plugin PageLoader de Bonfire permite agregar una página de carga a tu sitio para que los usuarios estén entretenidos hasta que la página esté completamente cargada y lista. Este plugin tiene fallos cuando se ve en Google Chrome.

Todos los elementos fijos, incluyendo el encabezado, la navegación lateral y los deslizadores empiezan a comportarse incorrectamente y no se muestran o se muestran en el lugar incorrecto. Esta opción intenta poner el remedio a este fallo.

CSS Manager

CSS personalizado es añadido en los estilos CSS Divi
Custom CSS as defined in Divi Custom CSS

Esta opción es muy interesante. Más de lo que parece. Desde aquí podemos añadir nuestros estilos CSS personalizados y aplicarlos a determinadas páginas, usuarios, plantillas de Divi, navegadores, dispositivos y tamaños de pantalla.

En el ejemplo he añadido un nuevo color de fondo a la cabecera para que sólo se muestre en la página de inicio y el resto de páginas no.

Herramientas de desarrollo (Developer Tools)

Importar / Exportar (Import / Export)

Exportar la configuración a un archivo: descargar archivo de configuración
Export plugin settings to file: download settings file

Permite exportar la configuración de plugins de Divi en un archivo llamado: «divi-plugin-settings.conf»

Importar la configuración desde el archivo:
Import plugin settings from file:

Permite importar la configuración de plugins de Divi con un archivo: «divi-plugin-settings.conf»

Generar CSS (Generated CSS)

Usar CSS en línea
Use inline CSS

Activando esta opción se añade el CSS dentro del HTML de la página web en vez de estar separado.

Desactivar la minificación CSS
Disable CSS minification

La minificación consiste en comprimir el CSS para que la carga del sitio sea más rápido. Elimina caracteres y espacios innecesarios para mejorar los tiempos. Si da problemas se puede desactivar.

Generar JS (Generated JS)

Usar JavaScript en línea
Use inline JavaScript

Activando esta opción se añade los códigos JavaScript dentro del HTML de la página web en vez de estar separado.

Desactivar la minificación JavaScript
Disable JavaScript minification

La minificación consiste en comprimir los códigos JavaScript para que la carga del sitio sea más rápido. Elimina caracteres y espacios innecesarios para mejorar los tiempos. Si da problemas se puede desactivar.

Generar HTML Footer (Generated Footer HTML)

Generar HTML en el pie de página: wp_footer.txt
Generated Footer HTML: wp_footer.txt

Puedes descargar el archivo HTML generado en el pie de página en un archivo de texto.

Generar Reglas .htaccess (Generated .htaccess Rules)

Generar reglas .htaccess: htaccess.txt
Generated .htaccess rules: htaccess.txt

Puedes descargar el archivo .htaccess y sus reglas en un archivo de texto.

Obsoleto (ahora disponible en Divi)  – Deprecated (now available in Divi)

Divi 3.0

Corregir el desplazamiento del anclaje del enlace
Fix Divi anchor link scrolling

Ya está integrado en la última versión de Divi Booster y ya no aparece esta opción.

Divi 2.4

No voy a extenderme en esta categoría porque se supone que tendrás siempre la última versión revisada de tu tema Divi.

Estas opciones son para corregir y añadir funciones al plugin Divi hasta la versión 4.1. Sólo indico su traducción.

Ocultar el logotipo
Hide the logo
Corregir el error del margen de los miembros del equipo
Fix team member margin bug
Habilitar Page Builder para publicaciones (pre Divi 2.4)
Enable Page Builder for posts (pre Divi 2.4)
Estilos de texto del icono de Información de contacto:
Contact info icon and text style:
Anchura de la barra lateral:px
Sidebar width:px
Corregir error de la barra de desplazamiento horizontal
Fix horizontal scroll-bar bug
Color del icono del menú para móvil:
Mobile menu icon color:
Ocultar el encabezado fijo hasta que el usuario se desplace para abajo
Hide fixed header until user scrolls down
Corregir la superposición de texto en un slider
Fix slider overlapping text issue
Ocultar los puntos en las tablas de precios
Hide bullet points in pricing tables
Altura del logotipo:
Logo height:
Mostrar mapas en escala de grises
Display maps in greyscale
Establecer tamaño de fuente predeterminada: %
Set default font size: %
Tamaño de fuente del menú: px
Menu font size: px
Espaciado entre secciones:
Section spacing:
Distancia entre filas:
Row spacing:
Color de la barra del footer:
Bottom footer bar color:
Convertir en negrita el texto del encabezado secundario
Make the secondary header text bold

Pre Divi 2.4

Ocultar los enlaces del encabezado y de búsqueda
Hide header links and search

Color de fondo:
Background color:

Ocultar el icono de búsqueda
Hide the search icon

¡Uf! Ya hemos acabado.

Aquí pongo punto final a este extenso tutorial en 3 partes dedicado a Divi Booster. Un plugin de WordPress fácil de instalar, y todavía más fácil de usar.

Una vez comprado tienes actualizaciones gratuitas para siempre y una licencia para que puedas usarlos en  todos tus sitios sin límite, ya sean propios o de clientes.

Si te ha gustado, compártelo o deja un comentario si hay algo que no he explicado correctamente.