Cómo enlazar a módulos de una misma página con Divi Builder
Cada vez más podemos ver sitios webs en los que toda la información importante o relevante para el usuario se encuentra en la página frontal.
Estas páginas de inicio, pueden ser muy largas y hacer del scroll con el ratón una acción aburrida. Pero podemos crear un menú en el que coloquemos los enlaces a unas anclas colocadas al principio de cada sección, fila o módulo, dentro de una misma página.
Aunque el proceso es muy sencillo, Divi Builder nos facilita el sitio donde poner el ancla, que no es más que colocar una referencia o nombre al identificador de cada sección, fila o módulo, dependiendo a donde queremos apuntar el link del menú.
Extra nos permite tener el menú siempre visible para poder acceder a los enlaces siempre que lo necesitemos sin tener que movernos a la parte superior de la página, pero al activarlo, las zonas a las que se desplaza al pinchar sobre el menú, quedan debajo de la barra superior.
La solución pasa por añadir un script qué diga en que punto debe quedarse parada la página antes de que la tape el menú. Como siempre que necesitamos algo de WordPress, recurrimos a los plugins.
Page Scroll to ID
Este plugin añade el código que necesitamos para realizar este paso, podemos indicar a cuantos píxeles debe quedarse la página del margen superior, para que no se tape la información con la barra del menú.
Pero además nos va a permitir elegir el tipo de movimiento, con el que se desplazará la página, al enlazar a módulos de una misma página.
Eliminar los enlaces destacados del menú
Al enlazar a módulos de una misma página, a filas o a secciones, el menú va a destacar ese ítem como que está activo, ya que todos se encuentran en la misma página. La solución más sencilla pasa por eliminar la decoración de los enlaces, mostrando todos de la misma manera.
Para eso añadimos en la pestaña de "CSS adicional" del personalizador del tema el siguiente código:
PARA EXTRA:
1 2 3 4 5 6 7 8 9 | #et-navigation a:before{ display: none; } #et-navigation a { color: #fff !important; } #et-navigation a:hover{ color: #61ffb6 !important; } |
PARA DIVI:
1 2 3 4 5 6 7 8 9 | #et-top-navigation a:before{ display: none; } #et-top-navigation a { color: #fff !important; } #et-top-navigation a:hover{ color: #61ffb6 !important; } |
Este código es muy básico y hace referencia al menú principal, se podía mejorar aplicando el comportamiento que tendría cada elemento del menú por separado, pero eso es otra historia y pienso que con esta solución queda resuelto.
Puedes pinchar aquí para ver todas las entradas relacionadas con esta plantilla.
Suscríbete para no perderte ningún artículo nuevo, te aviso por email
Hola Juan, estoy trabajando con el tema de Divi en una web de una sola página, y he copiado el código que facilitas para que no queden seleccionadas todas las pestaña, pero no se si solo va bien en Extra.
Me puedes decir que código poner en Divi.
Muchas gracias
Hola Javier,
he actualizado el artículo con el código para el tema Divi, échale un vistazo a ver si te vale.
Hola tengo una duda se puede hacer entre modulos esto mismo, Por ejemplo, en vez de usar el menu, que los enlaces sean por iconos es que estoy haciendo lo mismo y no me funciona
Hola Alex, da igual lo que uses para crear el enlace, lo único que debes tener en cuenta es que la url o link que pongas en el icono apunte a una etiqueta div a la que la hayas identificado con un nombre concreto.
Si en el icono pones que al pinchar en él, se dirija a "www.tuweb.com/paginacualquiera/#gancho1", debes poner en el módulo, sección o punto al que quieres llegar, el nombre de "gancho1" en el apartado de ajustes CSS - "Avanzado - Identificador CSS"