¿Has visto esas navegaciones elegantes donde aparecen pequeños puntos en el lateral de la página que, al pasar el cursor, se transforman en un menú completo con iconos y texto? Hoy te voy a enseñar exactamente cómo crear este efecto en Divi, sin necesidad de instalar ningún plugin.
¿Qué vamos a construir?
Imagínate una navegación que vive discretamente en el lado derecho de tu página. Por defecto, solo verás pequeños dots (puntos) blancos, casi imperceptibles. Pero cuando tu visitante pase el cursor por encima… ¡magia! Los dots se expanden, aparece un fondo oscuro elegante, los iconos se hacen visibles y los textos se deslizan suavemente de derecha a izquierda.
En móvil, por supuesto, se convierte en un menú hamburguesa de tres puntos verticales completamente funcional.
¿Por qué me enamoré de este diseño?
Trabajando en varios proyectos, siempre me topaba con el mismo problema: ¿cómo crear una navegación que sea útil pero no moleste? Los menús tradicionales ocupan espacio. Los menús flotantes a veces estorban. Pero esta solución… es perfecta.
Es discreta cuando no la necesitas, pero está ahí cuando la buscas. Además, el efecto visual es tan pulido que le da un toque profesional inmediato a cualquier sitio web.
Lo que aprenderás en el tutorial
Te voy a guiar paso a paso para implementar esta navegación en Divi. Cubriremos:
- Estructura en Divi: Cómo organizar las secciones y módulos
- HTML personalizado: El código limpio y optimizado
- CSS con Font Awesome: Iconos profesionales sin complicaciones
- JavaScript funcional: Detección de scroll y navegación suave
- Responsive design: Perfecto en desktop y móvil
- Customización: Cómo cambiar iconos y añadir nuevas secciones
¿Es complicado de implementar?
Para nada. Si sabes copiar y pegar código en un módulo de Divi, puedes hacerlo. He preparado todo el código ya optimizado y comentado. Solo necesitas seguir las instrucciones y en menos de 20 minutos tendrás una navegación que parece sacada de una agencia de diseño premium.
¿Qué hace especial a esta navegación?
- Cero plugins: Todo funciona con código nativo
- Performance optimizada: Sin librerías pesadas innecesarias
- Totalmente customizable: Cambia colores, iconos y texto fácilmente
- Compatible con Divi 4 y Divi 5: Se integra perfectamente sin conflictos
- Efectos suaves: Transiciones CSS profesionales
El resultado final
Al terminar el tutorial, tendrás una navegación que:
- Se mantiene fija mientras el usuario hace scroll
- Detecta automáticamente en qué sección está el visitante
- Funciona perfecta en móvil con menú hamburguesa
- Se ve profesional y moderna
- No ralentiza tu sitio web
¿Listo para empezar?
Este tutorial está disponible completo en los Tutoriales Exclusivos de la Academia OV DIVI, donde no solo aprenderás a implementar esta navegación, sino que también descubrirás decenas de técnicas avanzadas para llevar tus sitios en Divi al siguiente nivel.
Dentro encontrarás el video paso a paso, todo el código listo para usar, y mi soporte directo para cualquier duda que tengas durante la implementación.
Únete a la academia aquí y transforma la manera en que diseñas con Divi.
¿Tienes preguntas sobre esta navegación? Déjamelas en los comentarios y te respondo personalmente.
0 comentarios