Uso de anclajes para navegación interna

1.- Colocar un ID personalizado a cada sección de la one page

Lo primero que haremos será identificar con un ID especifico a cada sección del sitio. Esto nos permitirá crear posteriormente el menú. Además de eso, debes darle a cada sección (azul) la siguiente clase de CSS personalizada: color-section

ID CSS en Divi

Debes crear un ID Css único por cada sección para que funcione y también aplicarle la clase CSS personalizada anterior.

 

2.- Crear menú ancla para one page en Divi

Ahora debemos crear un menú personalizado. Para ello solo debes ir a la barra de opciones de WordPress > apariencia > menús > crear un nuevo menú.

Luego, vamos a crear un enlace personalizado por cada sección a la que le hemos asignado el ID CSS personalizado antes. Para esto debemos colocar un «#» y luego el «ID CSS» todo junto. Para conocer a detalle como hacer enlaces ancla en Divi puedes ver este otro tutorial gratuito.

Repetimos lo anterior por cada uno de las secciones que queramos anclar en el menú:

Menú personalizado Fijo en Divi

3.- Crear sección fija o sticky con menú personalizado

Dentro de nuestra one page, debemos crear y personalizar el menú que queremos que quede fijo en el sitio. Para esto solo debemos crear la sección, una fila y dentro de si, el menú con un módulo de menú de Divi. Esta sección debe ser Sticky.

Para esto, es importante tambien que en las configuraciones de la página que tenemos como one page, le asignemos a los atributos de la página, la platillo «Blank Page».

Además debemos asignarle la siguiente clase a nuestro módulo menú de Divi: color-activo-menu-scroll

Dentro de esta sección, vamos a añadir un pequeño snippet que nos dará la funcionalidad del menú fijo con enlace activo. Esto lo debemos añadir en un módulo de código:

<script>
// Activar menú al hacer scroll
jQuery(document).ready(function( $ ) {
  $(window).scroll(function() {
      var position = $(this).scrollTop();

      $('.color-section').each(function() {
          var target = $(this).offset().top - 160;
          var id = $(this).attr('id');

          if (position >= target) {
            $('.color-activo-menu-scroll .menu-item a').removeClass('item-activo');
            $('.color-activo-menu-scroll .menu-item a[href="#' + id + '"]').addClass('item-activo');
        }
      });
  });
});
</script>
Script personalizado

4.- Colocamos el CSS personalizado del enlace activo en el menú

Finalmente, colocamos un pequeños CSS personalizado dentro de las opciones de la página para asignar el color del enlace activo al menú fijo.

El CSS es el siguiente:

.page .color-activo-menu-scroll .item-activo {
  color: #f7c324!important;
}

Acá solo debes cambiar el color hexadecimal por el de tu preferencia. Recuerda que este color será el color del enlace activo en el menú.

CSS personalizado