En el diseño web moderno, optimizar el espacio y mejorar la experiencia de usuario son aspectos fundamentales. Una técnica efectiva para conseguirlo es implementar botones call-to-action (CTA) que, al interactuar con ellos, desplieguen un menú con opciones adicionales. En este tutorial, te mostraré cómo crear un elegante botón CTA con menú desplegable en Divi sin necesidad de plugins adicionales ni conocimientos avanzados de programación (Ver demo).
¿Qué vamos a construir?
Crearemos un botón call-to-action que, al pasar el cursor por encima (en escritorio) o al tocarlo (en dispositivos móviles), desplegará un menú con varias opciones. Además, añadiremos un pequeño detalle visual: el icono del botón rotará para indicar que el menú está activo.
Características principales:
- Funciona perfectamente en dispositivos de escritorio y móviles
- Utiliza el módulo de botón nativo de Divi
- Animaciones suaves de apertura y cierre
- Rotación del icono al activarse
- Personalizable con CSS
- Compatible con cualquier página de Divi
Beneficios de implementar este elemento en tu sitio web
- Ahorro de espacio: Mantén tu diseño limpio y ordenado al ocultar opciones secundarias hasta que el usuario las necesite.
- Mejor experiencia de usuario: Proporciona una navegación intuitiva y moderna.
- Mayor tasa de conversión: Destaca tu CTA principal mientras ofreces opciones alternativas.
- Diseño responsivo: Funciona perfectamente en todos los dispositivos.
- Diferenciación: Añade un elemento interactivo que destaque tu sitio web.
¿Cómo lo construiremos?
El proceso se divide en cuatro partes principales:
1. Primeros pasos: Crearemos el botón utilizando el módulo «botón» nativo de Divi.
2. Menú dropdown: Construiremos el menú desplegable utilizando el siguiente fragmento de código HTML:
<a href="#" class="ov-menu-item">Cómo trabajamos</a> <div class="ov-separator"></div> <a href="#" class="ov-menu-item">Ver servicios</a> <div class="ov-separator"></div> <a href="#" class="ov-menu-item">Consulta gratuita</a> <div class="ov-separator"></div> <a href="#" class="ov-menu-item">Contáctenos</a>
3. Aplicación de estilos CSS: Daremos formato al menú desplegable y añadiremos las animaciones con el siguiente código CSS:
.ov-dd-menu {
position: absolute;
top: 100%;
left: 0;
width: 215px;
background-color: white;
border-radius: 6px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
margin-top: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 100;
overflow: hidden;
}
.ov-dd-menu.ov-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ov-dd-menu .ov-menu-item {
font-size: 14px;
padding: 12px 16px;
display: block;
color: #151316;
text-decoration: none;
transition: background-color 0.2s ease;
}
.ov-dd-menu .ov-menu-item:hover, .ov-dd-menu .ov-menu-item:active {
background-color: #8870ff;
color: #fff;
}
.ov-dd-menu .ov-separator {
height: 1px;
background-color: #eaeaea;
margin: 0;
}
#ovCtaButton.ov-active-btn:after {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
#ovCtaButton:after {
transition: transform 0.3s ease;
}
4. Funcionalidad con JavaScript: Implementaremos la lógica para mostrar/ocultar el menú en distintos dispositivos y la rotación del icono con el siguiente código JavaScript:
<script>
document.addEventListener('DOMContentLoaded', function() {
const ctaButton = document.getElementById('ovCtaButton');
const dropdownMenu = document.getElementById('ovDropdownMenu');
let menuOpen = false;
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
// Función para activar el menú y rotar el icono
function activateMenu() {
dropdownMenu.classList.add('ov-active');
ctaButton.classList.add('ov-active-btn'); // Añadimos esta clase al botón
}
// Función para desactivar el menú y restaurar el icono
function deactivateMenu() {
dropdownMenu.classList.remove('ov-active');
ctaButton.classList.remove('ov-active-btn'); // Quitamos la clase del botón
}
// En dispositivos de escritorio (no táctiles)
if (!isTouchDevice) {
// Mostrar menú al hacer hover
ctaButton.addEventListener('mouseenter', function() {
activateMenu();
});
// Ocultar menú al salir del área del botón y del menú
ctaButton.addEventListener('mouseleave', function(event) {
const toElement = event.relatedTarget;
if (!dropdownMenu.contains(toElement)) {
deactivateMenu();
}
});
// Mantener menú visible mientras el cursor esté sobre él
dropdownMenu.addEventListener('mouseenter', function() {
activateMenu();
});
// Ocultar menú al salir de él
dropdownMenu.addEventListener('mouseleave', function() {
deactivateMenu();
});
}
// En dispositivos táctiles
else {
// Toggle del menú al tocar el botón
ctaButton.addEventListener('click', function(event) {
event.preventDefault(); // Prevenir la navegación si el botón es un enlace
menuOpen = !menuOpen;
if (menuOpen) {
activateMenu();
} else {
deactivateMenu();
}
});
// Cerrar menú al tocar fuera
document.addEventListener('click', function(event) {
const isClickInside = ctaButton.contains(event.target) ||
dropdownMenu.contains(event.target);
if (!isClickInside && menuOpen) {
deactivateMenu();
menuOpen = false;
}
});
// Cerrar menú al seleccionar una opción
const menuItems = document.querySelectorAll('.ov-menu-item');
menuItems.forEach(item => {
item.addEventListener('click', function() {
deactivateMenu();
menuOpen = false;
});
});
}
});
</script>
En el vídeo tutorial que acompaña a este artículo, te guiaré paso a paso por todo el proceso, mostrándote exactamente cómo configurar cada elemento para lograr un resultado profesional y efectivo.
Conclusión
Implementar un botón CTA con menú desplegable es una excelente manera de mejorar la usabilidad de tu sitio web construido con Divi. Esta solución no solo es visualmente atractiva, sino que también mejora la experiencia del usuario y puede aumentar tus conversiones al proporcionar opciones adicionales sin saturar tu diseño.
¡No te pierdas este increíble vídeo tutorial donde te muestro paso a paso cómo implementar esta solución en tu sitio web con Divi!
0 comentarios