Hola a todos,

En la entrada de hoy vamos a ofrecer una solución técnica muy rápida y sencilla para todos aquellos que os estéis volviendo locos con este pequeño bug de Divi 😉

QUÉ ES UN ANCHOR?

Un anchor o anchor link es un enlace que te permite acceder directamente a un lugar específico dentro de una página web, ahorrándote la necesidad de tener que bajar en scroll hasta el punto exacto a donde quieres dirigir al lector.

PARA QUÉ SIRVEN LOS ANCHORLINKS?

Tus clientes, enamorados de su proyecto y su sitio web, seguramente desarrollen páginas infinitas hablando de su empresa y servicios…pero la realidad es que los lectores, saturados de información y texto en su navegación por internet, quieren ir directos a lo que a ellos les interesa.

Parte de la culpa la tienen las redes sociales: minutos, horas….dándole con el pulgar hacia abajo entre fotos de gatitos e influencers,  decenas de anuncios….hasta que por fin llegamos a donde queremos llegar.

Los anchor links permiten una navegación más directa y fluída, y navegantes contentos por encontrar fácil y exacto lo que ellos quieren consumir.

EJEMPLO DE USO DE ANCHOR LINKS

Veamos por ejemplo la web de este cliente que estamos desarrollando.

Esta empresa de ingeniería presta servicios, diferenciados en 5 grandes áreas.

La página servicios desarrolla todas las áreas en su conjunto:

Imaginemos por un momento un cliente potencial de esta ingeniería, un Director General en la Junta de Extremadura, que está buscando candidatos para una licitación sobre dirección de obra de carreteras. Seguramente no quiera consumir toda la información relativa a los servicios de energías renovables, medio ambiente o aguas. Sólo le interesa el área de carreteras.

Por este motivo, haremos una división de la página SERVICIOS en secciones, asignando un anchor link a cada sección / servicio.

Utilizaremos estos anchor links para desglosar los diferentes servicios que presta la empresa en:

• El home del sitio web.
• El menú principal de navegación del sitio web.

De manera que si llego al sitio web de TXT Ingeniería, y sólo quiero visitar la información relativa a CARRETERAS, el anchor link me llevará justo a esa sección:

ERROR DE DIVI CON LOS ANCHOR LINKS

El problemilla viene cuando pones correctamente tus anchor links, y Divi parece volverse loco y dirigir al sitio equivocado, dejando la sección escondida bajo el menú, y en muchas ocasiones perdiendo de vista el título de la sección con el anchor:

Este error ocurre en Divi cuando intentas acceder a los anchors desde una página diferente del sitio web. Es decir, si hago esto desde la página SERVICIOS, los anchors funcionan. Pero si lo hago desde otra página, da el error.

SOLUCIÓN AL ERROR DE DIVI CON LOS ANCHOR LINKS

Para solucionar esto, iremos a DIVI – OPCIONES DEL TEMA – INTEGRATION, y agregaremos el siguiente código al head del sitio web:

<script>
document.addEventListener('DOMContentLoaded', function(event){ 

    if (window.location.hash) {
        // Start at top of page
        window.scrollTo(0, 0);
		
        // Prevent default scroll to anchor by hiding the target element
        var db_hash_elem = document.getElementById(window.location.hash.substring(1));
        window.db_location_hash_style = db_hash_elem.style.display;
        db_hash_elem.style.display = 'none';
		
        // After a short delay, display the element and scroll to it
        jQuery(function($){
            setTimeout(function(){
                $(window.location.hash).css('display', window.db_location_hash_style);
                et_pb_smooth_scroll($(window.location.hash), false, 800);
            }, 700);
        });		
    }
});
</script>

—xxx—

Y esto es todo, esperamos haberos ayudado!

Lanzadera Online.