REDES SOCIALES Y DIVI: INTRODUCCIÓN

Aclaremos primero estos conceptos:

  • Divi ya viene preconfigurado para que puedas incluir los iconos de acceso a tus redes sociales fácilmente en tus menús header y footer.
  • No obstante, en esa configuración sencilla por defecto, hay un gran inconveniente: que abren en la misma ventana.
  • Esto es un gran error / área de optimización. No quieres que los enlaces salientes se abran en la misma venta…pues al cerrar, fácilmente pierden la navegación anterior en tu sitio web.
  • Lo correcto es que, ya sean botones sociales o cualquier botón o enlace que dirija FUERA de tu sitio web, abra en una nueva pestaña. De esta forma, al cerrar el perfil en Facebook o lo que sea, tu web permanece abierta en la pestaña original.

En el tutorial de hoy, vamos a ver cómo hacer que las redes sociales de tu menú en Divi, tanto header como footer, abran directamente en una nueva pestaña, añadiendo un sencillo script.

PASO 1. CREAR Y CONFIGURAR MENÚS Y REDES SOCIALES POR DEFECTO EN DIVI

Lo primero que haremos será obviamente, crear nuestros menús con sus iconos de redes sociales, utilizando la sencilla configuración por defecto de Divi.

Nosotros hoy estamos optimizando esto para uno de nuestros clientes, TXT INGENIERÍA, una gran consultora de ingeniería en Badajoz, que por supuesto os recomendamos!

PASO 2. AÑADIR SCRIPT EN DIVI

Lo siguiente que haremos será añadir un trocito de código al código fuente de Divi.

Para ello, nos iremos a las opciones del tema de Divi:

En la pestaña de INTEGRACIÓN, nos iremos hasta abajo, donde AGREGAREMOS CÓDIGO AL HEAD DE LA WEB:

Y una vez aquí, pondremos el código que os pongo más abajo, y guardaremos cambios.

<! make social icons click to call >

<script type=”text/javascript”>

jQuery(document).ready(function($) {

jQuery(“.et-social-icon a”).attr(‘target’, ‘blank’);

});

</script>

PASO 3. COMPROBAR

Como siempre, refrescaremos la página, et voilá!

Tus iconos de redes sociales, tanto en header como en footer, abrirán en nuevas pestañas!

Y esto es todo por hoy!

Espero que os sea de utilidad 🙂

Os ha funcionado?

Si os da error el script, en esta entrada de blog  en inglés tenéis el original. Y es que sigo buscando opción para poner códigos no ejecutables en el blog, si concéis algun plugin o similar, por favor compartídmelo!

Cualquier duda o aportación, no dudéis en dejarme un comentario y lo veremos juntos con toda la comunidad!

Y ya sabéis que si necesitáis ayuda o directamente preferís subcontratar esta tarea, podéis contratar mis servicios!

Lara Prado.