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
ÍNDICE DEL POST
- 1.- AÑADIR NUEVOS ICONOS A WORDPRESS Y LA PLANTILLA DIVI CON EL PLUGIN DIVI BOOSTER
- 2.- CÓMO PONER LOS ICONOS DE REDES SOCIALES A LA DERECHA EN WORDPRESS Y DIVI CON EL PLUGIN 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
- 4.- COMO HACER QUE LOS ICONOS DE REDES SOCIALES SE VEAN EN EL MOVIL EN UNA WEB WORDPRESS CON 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).
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”.
Divi Booster añadir icono para usarlo en el constructor de Divi
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:
Uso del icono subido con el Divi Builder
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
Añadir hasta 160 diferentes redes sociales a Divi con Divi Booster
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
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.
Poner iconos de redes sociales a la derecha con Divi Booster
En la siguiente imagen puedes ver los iconos ya situados en la parte derecha del header de una web wordpress con Divi de ejemplo.
Iconos del menú secundario de Divi situados a la derecha con Divi Booster
COMPRAR DIVI BOOSTER
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.
Cómo poner los iconos de redes sociales a la derecha y los datos de contacto a la izquierda con Divi Booster
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.
Versión movil de web wordpress con Divi donde no se muestran las redes sociales
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.
Cómo mostrar iconos de redes sociales en movil con Divi
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.
Mostrar iconos de redes sociales en la versión movil de la web
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes