Cerrar video

Cómo crear un menú lateral de iconos flotantes en WordPress con Divi, sin plugins

por | May 8, 2024 | Tutorial gratuito | 0 Comentarios

Los menús flotantes son una excelente manera de proporcionar acceso rápido a funciones importantes o enlaces útiles en tu sitio web. En este tutorial, te mostraré cómo crear un menú de íconos flotantes centrado verticalmente en el borde derecho de tu sitio en WordPress utilizando Divi. Lo mejor, lo vamos a lograr sin plugins. (Ver demo)

En este ejercicio vamos a crear un menú flotante (floating icon menu) que se mantiene en el lado derecho de la pantalla mientras te desplazas. Este menú contendrá iconos para acciones importantes, como por ejemplo: «Comprar», «FAQ» y «Contacto». Cuando el usuario pase el cursor sobre cada ícono, el menú se expandirá para mostrar el texto correspondiente al ícono.

Cómo crear un menú lateral de iconos flotantes en WordPress con Divi, sin plugins

Los menús flotantes son útiles por varias razones:

    • Acceso Rápido: Ofrecen a los usuarios una manera rápida y conveniente de acceder a funciones clave o enlaces importantes.
    • Visibilidad Constante: Dado que están flotando, el menú permanece visible incluso cuando el usuario se desplaza por la página.
    • Mejora la Experiencia del Usuario: Los menús flotantes añaden dinamismo a tu sitio y pueden mejorar la experiencia del usuario con animaciones suaves.

Este ejercicio prácticamente lo vamos a lograr con las opciones nativas de Divi Builder, solamente vamos a necesitar un pequeño fragmento de código CSS para ajustar el tamaño y posición del icono del botón, el código el el siguiente:

/* Ajustar icono botón flotante */
body #page-container .ov-iconos-flotantes .et_pb_button_module_wrapper .et_pb_button:before {
  margin-left: -40px !important; 
  font-size: 18px !important;
}

No te preocupes si por ahora no sabes donde colocar este código, llegado el momento yo te indicaré donde colocarlo. Por eso es importante sigas el paso a paso del video tutorial 😀

Espero que este tutorial te sea muy útil. Si al final tienes alguna pregunta o sugerencia, no dudes en dejar un comentario.

Un abrazo,
Oscar Viedma.

Tutoriales Relacionados

0 comentarios

Enviar un comentario

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

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest