4.8
(8)

WhatsApp se ha convertido en una herramienta imprescindible para cualquier negocio y/o empresa. En consecuencia, cada vez es más frecuente encontrar páginas web con iconos de WhatsApp o, incluso, con chats integrados para hablar por medio de esta aplicación.

Si estás buscando una forma de incluir un icono de WhatsApp en tu página web, quédate porque, en el post de hoy, te explicamos cómo cambiar el icono de teléfono por el icono de WhatsApp en Divi, el cual viene por defecto en la plantilla.

Muy fácil y rápido, ¡tan solo te llevará 2 minutos!

Guía rápida para añadir el icono de WhatsApp a Divi

Como habrás podido comprobar, en el menú secundario de la plantilla Divi se incluye el icono del teléfono y del email.

Y tal y como comentábamos, a día de hoy cada vez son más las empresas que prestan el servicio de atención al cliente por WhatsApp en vez de por teléfono.

Por lo que si usas la plantilla Divi para tu negocio y estás intentando cambiar el icono de teléfono en el menú de Divi, a continuación te explicamos cómo añadir iconos nuevos a Divi y cómo añadir el símbolo de WhatsApp a Divi fácilmente.

¡Solo son 3 sencillos pasos!

1. ¿Cómo añadir iconos a Divi?

Para poder realizar la sustitución, es imprescindible disponer de un icono de WhatsApp subido a tu página web. Para ello, es necesario que subas un archivo de imagen al apartado «medios» de tu WordPress con un tamaño aproximado de 24×24 píxeles .

Deberás dirigirte, por tanto, al apartado «medios» y, una vez dentro, hacer clic sobre el botón que dice  «añadir nuevo», el cual está ubicado en la parte superior de la pantalla. Seguidamente, haz clic en «seleccionar archivos».


A continuación, se te abrirá el explorador de archivos de tu ordenador. Localiza el icono y súbelo a la web. Ten en cuenta que este será el icono que utilizarás para sustituir el teléfono, por lo que asegúrate de que el gráfico es de tu agrado. En la web de flaticon podrás encontrar cientos de iconos gratuitos.

Una vez la imagen se ha subido a la web, debes acceder al archivo en sí y copiar la dirección URL del medio o fotografía. Lo puedes hacer a través de «Medios».

Guarda esta URL a mano porque la vas a necesitar más adelante, cuando realicemos los cambios con CSS.

**Si lo que necesitas es añadir un nuevo icono de red social a Divi, clica aquí para ver tutorial**

2. Añadir icono WhatsApp a Divi paso a paso

Bien, ahora que ya tienes subido el archivo en tu página web, ¿cómo añadirlo al menú de Divi?

Tendrás que incluir un código especial en tu web, el cual te permitirá cambiar el icono teléfono en el menú de Divi y añadir el que tú quieras, en este caso el de WhatsApp.

¡Verás que es muy sencillo!

En primer lugar, dirígete al apartado «apariencia» de tu WordPress y haz clic sobre la opción «personalizar».


A continuación se abrirán las diferentes opciones de personalización de Divi. Haz clic sobre el apartado «CSS adicional» que encontrarás al final de la columna de opciones.


Seguidamente, se desplegará una caja de texto, donde puedes incluir diferentes fragmentos de código CSS para personalizar tu plantilla.

En este caso, deberás pegar el siguiente fragmento de código:

#et-info-phone { 
background-image: url("Introduce aquí la URL de tu icono") ;
background-size: contain;
background-repeat: no-repeat;
padding-left: 18px;
}

#et-info-phone:before{
opacity:0;
}

Antes de guardar, deberás incluir la URL del icono o imagen que subiste previamente. ¿Recuerdas? Introduce dicha URL entre las comillas que encontrarás en el código anterior, justo donde dice: «Introduce aquí la URL de tu icono» .

Posteriormente, haz clic en publicar cambios.

3. ¿Cómo añadir enlace al icono de WhatsApp en Divi?

Si quieres que, además de aparecer el icono, se pueda hacer clic sobre él para chatear por WhatsApp, deberás utilizar el siguiente código CSS en el apartado «CSS adicional».

En este caso, te recomendamos no usar el anterior, sino directamente este:

#et-info-phone a{ 
background-image: url("Introduce aquí la URL de tu icono") ;
background-size: contain;
background-repeat: no-repeat;
padding-left: 18px;
}

#et-info-phone:before{
opacity:0;
}

Publica los cambios y, seguidamente, dirígete al apartado «Cabecera y navegación».

Haz clic sobre «elementos de cabecera» y, en el apartado «teléfono» introduce el siguiente enlace:

<a href="https://api.whatsapp.com/send?phone=34600000000">Teléfono: 600000000</a>

Deberás sustituir el número 34600000000 por tu número de teléfono. Ten en cuenta que el 34 hace referencia al prefijo.

Si eres de España, deja 34 y, a continuación, introduce tu número. Si eres de otro país, deberás cambiar el prefijo.

Cambiar el icono teléfono del menú en Divi, ¿es posible?

Como hemos visto a lo largo de este artículo, cambiar el icono del teléfono por el icono de WhatsApp en Divi es algo sencillo y rápido.

Solamente deberás subir la imagen que quieras utilizar, en un tamaño adecuado, a tu WordPress y seguir los pasos que hemos ido detallando más arriba.

Hoy en día, la mayoría de las empresas digitales utiliza WhatsApp como herramienta de comunicación, por lo que dar a los usuarios la opción de contactar contigo por esta vía, sin duda, será un buen plus para atraer clientes potenciales y darles un excelente servicio de atención al cliente.

¿Te ha resultado útil?

¡Danos 5 oks!

Promedio de puntuación 4.8 / 5. Recuento de votos: 8

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies