Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

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 19$

 

QUIERO DIVI BOOSTER

Nota: Tras hacer clic en el enlace, haz clic en el botón azul del lateral derecho “$19 – Buy now”

 

 

 

 

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”.

 

Divi Booster añadir iconos al divi builder

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:

 

gracias al plugin Divi Booster usaremos el icono en Divi

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 más iconos de redes sociales a Divi con Divi Booster

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.

 

 

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.

 

poner iconos redes sociales del header a la derecha

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.

 

situar elementos del header divi a la derecha con Divi Booster

Iconos del menú secundario de Divi situados a la derecha con 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.

 

redes sociales a la derecha, email y telefono a la izquierda del header con divi booster

Cómo poner los iconos de redes sociales a la derecha y los datos de contacto a la izquierda con Divi Booster

 

 

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.

 

web wordpress con Divi no aparecen redes sociales en moviles

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.

 

mostrar iconos de redes sociales en movil con wordpress y Divi

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 sociales en web wordpress Divi con Divi Booster

Mostrar iconos de redes sociales en la versión movil de la web

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto.
Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies