Crear enlaces a módulos, filas o secciones dentro de una página de Extra o Divi

por | 4 Comentarios

migas de pan - Temas Elegant Themes
Suscríbete:

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ú.

Enlazar a módulos de una misma página con menú permanente

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

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:

PARA DIVI:

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

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

4 Comentarios

  1. Javier

    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

    Responder
    • Juan

      Hola Javier,

      he actualizado el artículo con el código para el tema Divi, échale un vistazo a ver si te vale.

      Responder
  2. Alex

    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

    Responder
    • Juan

      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»

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido