¿Quieres crear una animación flotante con Elementor ?
En este tutorial utilizaremos una lata de pepsi sobre la que pasaremos el cursor y que revelará una descripción de la misma.
Te invitamos a ver el siguiente video para que te hagas una idea de lo que queremos mostrarte.
Inserte una sección de una sola columna y luego, en la barra lateral, seleccione Altura mínima en hauteur
Sobre altura mínima clic VH luego arrastre el control deslizante para 100. Siempre en la pestaña Disposición definir 650 como anchura.
Seleccione la columna y en la barra lateral en el campo Alineamiento vertical seleccionar Medio.
En la pestaña Estilo, cambie el color de fondo haciendo clic en el selector de color y escriba #D37636 luego en la seccion fronteravamos a agarrar 20 para todos los radios de bordillo.
En la pestaña Avanzado, desactive el enlace de relleno y escriba 75 para márgenes internos Haut et Bas et 25 para márgenes internos Desmañado et Droite.
Luego, en la columna, arrastre un widget sección interna. Quitemos una de las columnas de la sección Interna.
En la columna de la sección interior restante, suelte el Widget de título y cambiar el titulo a pepsi amor.
Lea también nuestra guía sobre: Cómo crear una tarjeta de efectos a partir de una cartera en Elementor
Luego, en la pestaña Estilo, dale al texto un color blanco y para la tipografía establece el taille en 32, la altura de la fila en 1.2, espaciado de letras en 0.5.
Bajo el Widget de título, suelta un Widget de editor de texto y editar el texto. en la pestaña Estilo, cambia el color del texto a blanco y el taille tipografía en 16, la altura de la fila en 1.5 y elespaciado de letras en 0.5.
En la pestaña Avanzado cambiar el margen Bas en -10.
En la sección posicionamiento pestaña Avanzado, modificar el Manga en personnalisé y Ancho personalizado establecer este último en 310.
Debajo del párrafo añadiremos un widget de botón con para texto Leer Más.
En la pestaña Estilo dale el color al boton Blanche y el color del texto configúralo en Noire.
Ahora seleccione la columna de la sección interior, en la sección Avanzado pestaña Avanzado apague el enlace y haga clic en el porcentaje, luego establezca el margen Desmañado en 20 y en la Margen Interno definir que de Desmañado en 20.
Ahora arrastra el widget de imagen sobre el Sección interna insertar una imagen Hemos elegido para el ejemplo una imagen de una bebida que se encuentra fácilmente en la web.
Una vez que haya insertado la imagen, configure el Tamaño de la imagen en Entero y alineación hagamos clic en Centrar.
En la pestaña Avanzado, ve a la sección Puesto de trabajo en Manga seleccionar En línea (Automático)En Puesto de trabajo seleccionar absoluto y Orientación Horizontal seleccionar Derecho entonces cambio entrar -9.9 y en el cambio de la Orientación Vertical entrar -105.
Ir más abajo de la Sección de transformación definir cambiar el tamaño en 0.5.
Ahora seleccione la columna de la Sección interna y en la pestaña Avanzado ingrese el nombre del clases css texto pepsi
Luego seleccione nuestra sección principal, vaya a la sección CSS personalizado de su ficha Avanzado, copia y pega el siguiente código:
/*Hover Animation CSS*/
selector{
--transition: 0.5s;
--circle-color: #313F69;
--content-background: #D27838;
--mobile-height: 670px;
--mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
content: "";
background: var(--circle-color);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
clip-path: circle(400px at center);
background: var(--content-background);
}
selector:hover .elementor-widget-image{
right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector .pepsi-text{
opacity: 0;
visibility: hiddin;
}
selector:hover .pepsi-text{
opacity: 1;
visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
height: var(--mobile-height);
}
selector .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector:hover .elementor-widget-image{
right: 68px !important;
top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-top: -265px !important;
}
}
NOTA: Si no tiene esta sección, debe ir a Versión Pro de Elementor.
Ahora si queremos eliminar el color de fondo del texto, seleccionaremos nuestra columna principal y en la pestaña Estilo desactivaremos el color de fondo.
En este momento, su animación se ejecutará normalmente en el navegador.
La animación en tableta también parece ser perfecta
Pero en el teléfono inteligente, no se muestra normalmente. Resolvamos este problema.
Vamos a mostrar el navegador
En el navegador, seleccione la Sección (asegúrese de que todavía está en modo teléfono inteligente) y baje el Manga en 320
Luego selecciona la columna principal y en su pestaña Avancé, establezca todos los márgenes interiores en 25
En el navegador, seleccione la imagen y en la pestaña Estilohacer clic en PX de Manga y configúralo en 180.
En la pestaña Avanzado du Widget de imagenseguir Puesto de trabajoy seleccione absoluto, En desplazamiento horizontal entrar 75 y en desplazamiento vertical entrar 236. En resumen, asegúrese de centrar su imagen en el medio del círculo utilizando los diferentes desplazamientos.
Ahora puede obtener una vista previa de su animación en diferentes dispositivos.
¡Consigue Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo crear una animación al pasar el mouse en Elementor. Si tiene alguna inquietud sobre cómo llegar allí, nos encantaría saber de usted en el comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
