¿Te gustaría aprender a crear una tarjeta con efecto cartera? En este nuevo tutorial, le mostraremos cómo hacerlo con Elementor.
Si no tienes idea de lo que queremos hablarte hoy, te invitamos a ver el siguiente video:
Entonces volvamos a por qué estamos aquí.
Para completar este tutorial, necesitará la versión Pro de Elementor, ya que usaremos un código CSS personalizado que solo es compatible con esta versión deElementor.
Lea también: Cómo mostrar texto sobre una imagen con Elementor
Creemos una nueva sección con una estructura de 3 columnas, luego en el panel, definamos el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y coloque el control deslizante en 100.
Seleccionemos la columna del medio y sueltemos en esta columna el Widget de sección interna. El widget de Sección Interna está configurado con 2 columnas por defecto. Debajo de las 2 columnas, sueltemos el widget Título con el titulo Restaurante, Seleccione H4 para la etiqueta HTML, y Centrar para la alineación.
En la pestaña Avanzado del widget Título, entremos 30 para el Margen superior
Seleccionemos una vez más nuestra Sección Interna. En el panel, modifiquemos su hauteur en Altura mínima y Altura mínima pongamos el cursor en 380. Luego, eliminemos la columna derecha o izquierda de la sección Interna
Dejemoslo Widget de imagen en la Sección Interna e inserta una imagen de nuestra biblioteca. seleccionemos Entero para Tamaño de la imagen et Centrar para Alineación.
NB: si desea tener páginas completas como la nuestra, lo invitamos a capturar las páginas con la ayuda de la extensión de Chrome GoFullPage, pero también puede usar otra.
Descubre también: Cómo crear una galería de imágenes con Elementor
Luego en la pestaña Estilo, haga clic en PX de Manga, ajustemos el control deslizante a 260 y las rayos de borde en 10
A continuación, modifiquemos Box Shadow cambiando el Blur a 40 y Diffuse a -10.
En la pestaña Avanzado, en la sección posicionamiento, Seleccione absoluto para el Puesto de trabajo, Orientación Horizontal en Desmañado, décalage en 0, laOrientación Vertical en Bas.
Dupliquemos nuestro widget Imagen dos veces. Inevitablemente, todos se superpondrán. Abramos el Navegador para que podamos acceder a los otros widgets ocultos por el primero.
Reemplacemos la imagen del segundo Widget y en su Tab Avanzado, vamos a modificarlos márgenes inferiores et Desmañado por entrar 30 para cada. Ahora verá un ligero retraso,
Haga lo mismo para el tercer widget de imagen, pero aplique márgenes de 60 para los márgenes inferior e izquierdo. Ahora debería tener una descripción general de los 3 widgets de imagen.
Seleccionemos nuestro widget de Sección Interna, vayamos a su Pestaña Avanzado y en la sección CSS personalizado, copie y pegue el siguiente fragmento de código:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Si no tiene esta sección, entonces no tiene la versión Pro, si desea continuar, debe actualizar su versión)
Ahora, si pasa el cursor sobre nuestro mapa, tendrá una animación de zoom.
Seleccionemos nuestro primer Widget de Imagen (el más bajo) y en su Pestaña Avanzadovamos a agarrar frente-img para Clases de CSS.
Para el segundo widget de imagen, escribamos imagen media para clases de CSS.
Para el tercer widget de imagen, escribamos última imagen para clases de CSS.
Ver también: Cómo crear una galería de imágenes con pestañas con Elementor
Al pasar el cursor sobre nuestra columna ahora veremos una magnífica animación del contenido de nuestra Sección Interna.
Vamos a mostrar nuestra página en modo tableta. Veremos que las imágenes no se mostrarán correctamente.
Seleccione el primer widget de imagen, en su pestaña Estilo, modifiquemos el ancho haciendo clic en PC y luego ingresando 150 como ancho. Hagamos lo mismo con los otros 2 widgets de imagen.
Seleccionemos nuestra Sección Interna, en su sección Contenido, vamos a modificar el Altura mínima en 225.
Visualicemos también nuestra página en modo Smartphone, a priori no presenta ningún problema. Pero, si presenta alguno, seleccionemos nuestra Sección Interna, en su sección Contenido, modifiquemos la Altura Mínima.
Ahora dupliquemos nuestra columna del medio 2 veces, luego eliminemos las otras 2 columnas vacías.
Modifiquemos los títulos de estas columnas y luego cambiemos las imágenes.
Tendrás que tener un apartado magnífico del que aquí están los resultados:
Ahí tienes, acabas de hacer esta tarea fácilmente.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo crear una tarjeta con el efecto de una cartera. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de 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.
...
