WORDPRESS
Efecto 3D increíble con elementor gratis o free, wordpress 133 tutorial español
En este tutorial de SYSPA SOCIAL aprenderemos como hacer un efecto 3D increíble con elementor gratis o free para que pueda utilizarlo en tu pagina web wordpress.
Cuando vi este efecto no lo podía creer, realmente no parece basado en una pagina web simple y gratis!.
Solo debes seguir estos simples pasos y podrás lograr un efecto impresionante y seguir creciendo en tus conocimientos sobre wordpress.
Principales puntos del tutorial tarjeta 3D pila con efectos elementor free para wordpress.
- Creamos una nueva pagina web.
- Iniciamos con el armado del contenido y subimos la imagen que utilizaremos.
- Duplicamos la imagen para generar capas.
- Insertamos el código que nos permitirá realizar el efecto.
- Probamos todo lo seleccionado
- Vemos como personalizar el codigo.
Código Utilizado
Movimiento y Scalamiento de la imagen + Ocultar y Mostrar Texto
<style>
.columna{
--tras: 40px;
--rotate: -30deg;
--skew:25deg;
}
.columna .elementor-widget-image {
transform: rotate(var(--rotate)) skew(var(--skew)) scale(.8)
}
.columna .elementor-widget-image {
transition: all .5s;
}
.columna:hover .elementor-widget-image.foto-4 {
transform: rotate(var(--rotate)) skew(var(--skew)) scale(.8) translate(calc(4*var(--tras)),calc(-4*var(--tras)))
}
.columna:hover .elementor-widget-image.foto-3 {
transform: rotate(var(--rotate)) skew(var(--skew)) scale(.8) translate(calc(3*var(--tras)),calc(-3*var(--tras)))
}
.columna:hover .elementor-widget-image.foto-2 {
transform: rotate(var(--rotate)) skew(var(--skew)) scale(.8) translate(calc(2*var(--tras)),calc(-2*var(--tras)))
}
.columna:hover .elementor-widget-image.foto-1 {
transform: rotate(var(--rotate)) skew(var(--skew)) scale(.8) translate(calc(1*var(--tras)),calc(-1*var(--tras)))
}
@media (max-width: 767px) {
.columna {
--gap: 20px;
}
}
</style>
Videos relacionados con tarjeta 3D pila con efectos elementor free para wordpress.
🖐️ Mejor hosting wordpress, análisis completo, SLL y DOMINIO GRATIS, WordPress 35, tutorial español.
Analizamos paso a paso, todos los detalles del hostin sered, que nos brindara un 10% de descuento, ssl y dominio gratis.
🖐️ Tarjeta de perfil animada con elementor (truco, Tips and Tricks, wordpress 128 tutorial español.
Aprenderemos como crear una tarjeta animada donde el personaje se moverá y crecerá cuando nuestro cursor se encuentre sobre nuestra tarjeta en wordpress.
🖐️ Diseñar o crear pagina web completa paso a paso para principiantes, wordpress 3 tutorial español.
Diseñamos y creamos una pagina web completa, paso a paso, explicación para principiantes que te mostrara todos los puntos de manera detallada.
Tenemos Cientos de tutoriales Wordrpess
Inicia aquí gratis !
Accede al listado completo de tutoriales wordpress.