Cómo hacerlo en Divi: el método más sencillo
Divi no incluye un efecto de zoom en botones de forma nativa, pero su sistema de clases permite aplicar este comportamiento fácilmente usando CSS personalizado. Esto nos da control total sin necesidad de plugins ni modificaciones del tema.
El efecto se basa en una transformación visual que se activa al pasar el ratón por encima del botón, generando una respuesta inmediata que mejora la experiencia de usuario y refuerza la interacción.
Código CSS para aplicar el efecto zoom en botones Divi
Este es el código base que permite aplicar un efecto zoom suave y profesional a los botones creados con Divi:
.et_pb_button {
transition: transform 0.3s ease;
}
.et_pb_button:hover {
transform: scale(1.08);
}
Este fragmento utiliza dos propiedades clave de CSS. La propiedad transition suaviza el cambio visual, mientras que transform con scale aumenta ligeramente el tamaño del botón sin afectar al layout de la página.
El resultado es un efecto limpio, moderno y totalmente compatible con WordPress.
Paso a paso: dónde añadir el código en Divi
Para que el efecto funcione correctamente, el CSS debe añadirse en una zona global del sitio.
Desde el panel de WordPress, accedé a Divi y luego a Opciones del Tema. Dentro de la pestaña General, buscá el campo de CSS Personalizado y pegá el código completo. Guardá los cambios y el efecto se aplicará automáticamente.
No es necesario tocar archivos del tema ni usar plugins externos, lo que mantiene la web más liviana y segura.
Aplicar el zoom solo a un botón específico
Cuando el objetivo es destacar una llamada a la acción concreta, lo más recomendable es evitar reglas globales y trabajar con una clase personalizada.
Divi permite asignar una clase CSS a cada botón. Una vez definida, el efecto puede limitarse solo a ese elemento:
.zoom-btn {
transition: transform 0.3s ease;
display: inline-block;
}
.zoom-btn:hover {
transform: scale(1.1);
}
Este enfoque es ideal para páginas de venta, formularios de contacto o botones estratégicos, ya que mantiene el resto del diseño limpio y coherente.
Por qué funciona este efecto
El efecto zoom funciona porque aprovecha un principio básico de la experiencia de usuario: el feedback visual inmediato. Cuando un botón responde al movimiento del ratón, el usuario entiende instintivamente que es interactivo y confiable.
Desde el punto de vista técnico, el uso de transformaciones CSS es eficiente, no afecta el rendimiento y es compatible con los navegadores modernos.
Además, al no modificar el tamaño real del elemento, se evita que otros componentes se desplacen o se rompa la estructura del diseño.
Ajustar el efecto para un resultado profesional
Uno de los errores más comunes al aplicar efectos de zoom es exagerar el escalado o usar transiciones demasiado rápidas. El resultado suele ser un diseño poco elegante que genera desconfianza en el usuario.
Un detalle importante es asegurarse de que el botón se comporte como un elemento independiente. Para eso, conviene definirlo como inline-block, evitando posibles desplazamientos visuales:
.zoom-btn {
display: inline-block;
}
Este pequeño ajuste mejora la estabilidad del diseño y evita sorpresas cuando el botón se agranda.
0 comentarios