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!