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 efecto 3D pila con 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 efecto 3D pila con 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.

1024px WP 35 mejor hosting wordpress sered - syspa

🖐️ 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.