En este tutorial, aprenderás a aplicar un efecto de Glassmorphing al widget de Flip Box de Elementor Pro. Vamos a recrear un ejemplo en el que tendremos dos Flip Boxes: uno con Glassmorphing solo en la parte frontal y otro con Glassmorphing tanto en la parte frontal como en la parte posterior.
Preparación
Antes de comenzar, asegúrate de tener Elementor Pro instalado en tu sitio de WordPress.
Crear la Estructura
Abre Elementor y crea la estructura de contenedores que necesites.
Modifica la altura y elimina los rellenos, estableciéndolos en cero.
Añade una imagen de fondo para hacer que el Glassmorphing sea más visible. Alinea el contenido al centro.
Personalizar el Flip Box
Inserta el widget de Flip Box.
Cambia el icono por una imagen.
Define la altura y el radio de borde.
Personaliza el Front:
Establece un espacio y el tamaño de la imagen.
Define un borde para la imagen y elige un color (por ejemplo, blanco).
Cambia el efecto a «Slide Up».
Personalizar el Back
Define el color de fondo del Back (blanco en este caso).
Ajusta el color del texto y el botón a negro.
Define un borde para la tarjeta, por ejemplo, un borde continuo de un píxel en color blanco.
Aplicar Glassmorphing
Para aplicar el efecto Glassmorphing al Front y al Back del Flip Box, sigue estos pasos:
-En la parte del Front, quita el color de fondo y establece la opacidad en cero.
-En la parte del Back, elimina el color de fondo y aplica el código CSS en Avanzado > Custom CSS:
Resultado
Actualiza tu página y podrás ver el efecto Glassmorphing aplicado al Flip Box. Ahora, tanto el Front como el Back tienen el efecto Glassmorphing.
¡Espero que este tutorial te haya sido útil! Si te ha gustado, no olvides darle like, suscribirte al canal y activar la campanita para recibir notificaciones. Si tienes alguna pregunta o duda, déjala en los comentarios. ¡Hasta la próxima!
