DIVI BOOSTER PARTE 1: Opciones con Iconos en WordPress y plantilla Divi

Las funcionalidades de este plugin para wordpress denominado Divi Booster son gigantescas. Por lo que he decidido hacer una serie de varias entradas de blog en las que iremos viendo las funcionalidades más importante de este plugin para WordPress para personalizar más aun la plantilla Divi.

En este post vamos a ver solo las que están relacionadas con la gestión de iconos en Divi.

El plugin Divi Booster tiene un coste de 29$ (Unos 25 € aproximadamente)

 

COMPRAR DIVI BOOSTER

 

DESCUENTOS DIVI

 

 

 

 

1.- AÑADIR NUEVOS ICONOS A WORDPRESS Y LA PLANTILLA DIVI CON EL PLUGIN DIVI BOOSTER

 

Las principales opciones sobre iconos las vas a encontrar en el primer apartado de la configuración de Divi Booster (Site-widge Settings). Este primer apartado de la configuración del plugin Divi Booster está encaminada a establecer opciones de configuración globales. Es decir, opciones de configuración para todo el sitio web.

Este apartado se subdivide en: Icons (Iconos), Layout (diseño), Links (enlaces) y site speed (velocidad del sitio web).

 

 

1.1.- Apartado Icons: Añadir nuevos iconos de redes sociales a Divi e iconos personalizados al Divi Builder

 

Desde este apartado podremos añadir nuevos iconos de redes sociales a Divi sin tener que realizar modificaciones de código y podrás añadir nuevos iconos al “módulo anuncio” y resto de módulos del Divi builder donde aparecen las opciones de iconos.

 

 

1.1.1.- Añadir nuevos iconos al Divi Builder con Divi Booster

 

Nos recomiendan que subamos el icono a un tamaño de 96x96px.

Lo que haremos será hacer clic en el checkbox: “Add custom icons for use in modules” (traducido: añadir iconos personalizados para usarlos en los módulos).

A continuación haremos clic en “Choose Image”, seleccionaremos la pestaña “Subir archivo”, haremos clic en el botón “Selecciona archivos” y seleccionaremos el icono que queremos añadir al divi builder y pulsaremos en “Use image”.

A continuación iremos a la parte final de la página y haremos clic en “Guardar cambios”.

 

 

Una vez que hayas guardado los cambios te aparecerá un nuevo campo de subida de archivo por si quieres añadir otro icono a Divi.

Una vez añadido el icono podrás seleccionarlo desde cualquier módulo del Divi builder que utilice iconos, como por ejemplo el módulo anuncio. Lo puedes ver en la siguiente imagen:

 

 

 

1.1.2.- Añadir nuevos iconos de redes sociales a wordpress con el plugin Divi Booster

 

Vamos a ver ahora como añadir nuevos iconos de redes sociales a Divi con el plugin Divi Booster. Podremos añadir casi cualquier icono de red social habido y por haber.

Desde el apartado principal de configuración del Divi Booster podremos añadir los siguientes iconos de redes sociales: Linkedin, Youtube, Pinterest, Tumblr, Instagram, Skype, Flickr, My Space y Vimeo

Aunque también puedes añadir otras nuevas redes sociales (hasta 160 diferentes) desde otro lugar de configuración de Divi Booster que veremos más adelante.

La explicación de cómo añadir alguna de estas redes sociales: Linkedin, Youtube, Pinterest, Tumblr, Instagram, Skype, Flickr, My Space y Vimeo lo tengo explicado en otro post al que te voy a redirigir para que puedas ver los detalles de configuración (si quieres añadir otra red social diferente sigue leyendo y no hagas clic en el enlace)

En este post sobre como añadir nuevos iconos de redes sociales a Divi puedes ver cómo hacerlo a través del plugin Divi Booster. Lo puedes ver en el apartado 2.0 del post

Para añadir una red social diferente a las mencionadas ve al menú lateral: “Divi > Personalizador de temas > Divi Booster > Social Media Icons”.

Ahora haz clic sobre la punta de flecha para desplegar las opciones:

a.- Icons: en este apartado haz clic en el selector “Select icon” para seleccionar la red social que quieres añadir.

b.- Links to: en este campo introduce la URL a la que se redirigirá el visitante cuando haga clic en el icono.

A continuación haz clic en el botón “Guardar y publicar” para que se guarden los cambios

 

 

Si quieres añadir una nueva red social haz clic en el botón “Add Network” para que te aparezca un nuevo bloque de configuración.

COMPRAR DIVI BOOSTER

 

 

2.- CÓMO PONER LOS ICONOS DE REDES SOCIALES A LA DERECHA EN WORDPRESS Y DIVI CON EL PLUGIN  DIVI BOOSTER

 

Habrás visto que con la plantilla Divi, por defecto, los iconos de redes sociales + teléfono + email del header o encabezamiento se sitúan en la parte izquierda.

Vamos a ver ahora la opción que incluye el plugin Divi Booster para que estos iconos se sitúen en la parte derecha.

En la configuración del plugin Divi Booster ve al apartado: “Header” y despliega el sub apartado: “Top Header”.

Marca el checkbox: “Put all icons on the right” (traducido: pon los iconos a la derecha) y ve al final de la página para guardar los cambios.

 

 

En la siguiente imagen puedes ver los iconos ya situados en la parte derecha del header de una web wordpress con Divi de ejemplo.

 

 

COMPRAR DIVI BOOSTER

 

 

3.- CÓMO PONER LOS ICONOS DE REDES SOCIALES A LA DERECHA Y TELÉFONO Y CORREO A LA IZQUIERDA EN UNA WEB WORDPRESS CON DIVI

 

Vamos a ver ahora como poner los iconos de redes sociales de una web realizada con WordPress y la plantilla Divi a la derecha y los datos de contacto a la izquierda utilizando el plugin Divi Booster.

 

En la configuración del plugin Divi Booster ve al apartado: “Header” y despliega el sub apartado: “Top Header”.

Marca el checkbox: “Put contact info icons on left, and social icons on the right” (traducido: poner iconos de contacto a la izquierda e iconos sociales a la derecha) y ve al final de la página para guardar los cambios.

 

 

 

4.- COMO HACER QUE LOS ICONOS DE REDES SOCIALES SE VEAN EN EL MOVIL EN UNA WEB WORDPRESS CON DIVI

 

Seguramente habrás visto que los iconos de redes sociales no se muestran cuando la web realizada con wordpress y Divi se muestra en un teléfono móvil.

 

 

Si quieres que si se muestren los iconos de redes sociales en la versión móvil de la página web puedes hacerlo desde la siguiente opción de configuración del plugin Divi Booster:

Ve al apartado “Header” de Divi Booster y despliega el sub apartado “Top Header”.

A continuación haz clic en la opción: “Show secondary nav bar social icons on mobile” (traducción: mostrar iconos de redes sociales de la barra secundaria en móviles) y baja a la parte inferior de la página para guardar los cambios.

 

 

En la siguiente imagen puedes ver como ahora si se muestran todas las redes sociales cuando se ve la página web wordpress en un dispositivo móvil.