Background con efecto flotante en Thrive Architect | Seve Luna

Background con efecto flotante en Thrive Architect

Estamos en época de consumir muchísimo y por ello las empresas se esmeran en tener el mejor producto y descuento para que el usuario les compre.
A esto hay que sumarle el tener una buena estrategia de marketing y un escaparate atractivo para vender dicho producto.
Eso mismo es lo que te voy a mostrar en este vídeo-tutorial.
Voy a realizar un background al que le voy a dar un estilo flotante ambientado en la época navideña.
Vamos allá!!

Seleccionamos las imágenes del background

Como el background va a ser un Papá Noel volando por el cielo, sólo me ha bastado con seleccionar dos imágenes, una nube y un Papá Noel en su trineo tirado por ciervos.
Estas imágenes las he sacado de la plataforma Freepik y las he editado para convertirlas en .png para que tengan formato transparente.

Colocar las imágenes dentro de un background en Thrive Architect

Para empezar a crear nuestra oferta navideña, tendremos que crear una página nueva en nuestro WordPress y darle a editar con Thrive Architect.
A continuación vamos a cambiar la landing por una nueva desde el menú de la derecha seleccionando una landing en blanco, quitamos el heading que viene por defecto y añadimos un elemento background.
Una vez tenemos el elemento background, vamos a decirle que cubra el total de la pantalla del usuario seleccionando la pestaña "Match height to screen".
Añadimos un heading en el que ponga Feliz Navidad con la fuente Charmonman.
Justo a continuación añadimos la imagen de Papá Noel y la imagen de la nube a las que vamos a darle una posición relativa.

Posición de las imágenes y el heading

Para que todo esté ordenado y quede centrado he tenido que darle posición relativa a las imágenes y un margen superior al heading como te muestra a continuación:

  • Heading: lleva un margen superior de -100.
  • Papá Noel: lleva una posición relativa con 60 px en horizontal.
  • Nube izquierda superior: le he colocado 120 px en horizontal y 273 px en vertical.
  • Nube izquierda inferior: en este caso son 253 px en horizontal y -347 en vertical.
  • Nube derecha: lleva -75 px en horizontal y -205 px en vertical.

Únete a una comunidad en continuo crecimiento.
44 emprendedores 
quieren conocerte!!

Clases y código CSS utilizado para las imágenes

Para que las imágenes hagan el efecto flotante he utilizado tres códigos CSS diferentes y les he otorgado una clase diferente a cada imagen.
Al Papá Noel le he puesto la clase con el mismo nombre en la sección HTML Attributes, quedando así .papanoel y para las nubes he utilizado las clases .nube1 y .nube2.
Una vez puestas las clases he accedido a los ajustes avanzados de Thrive Architect que están en la rueda dentada de la derecha para insertar los siguientes códigos CSS.

Para el Papá Noel he utilizado el siguiente:
.papanoel { animation: float_1109 2s linear infinite; transform-origin: 50% 50%; } @keyframes float_1109 { 0% { transform: translateY(0) } 50% { transform: translateY(-6px) } 100% { transform: translateY(0) } }

Para la nubes rápidas este:
.nube1 { animation: passing_4084 5s linear infinite; transform-origin: 50% 50%; } @keyframes passing_4084 { 0% { transform:translateX(-50%); opacity:0 } 33.33333% { transform:translateX(0%); opacity:1 } 66.66667% { transform:translateX(50%); opacity:0 } 100% { transform:translateX(50%); opacity:0 } }

Y para las nubes lentas este otro:
.nube2 { animation: passing_4084 8s linear infinite; transform-origin: 50% 50%; } @keyframes passing_4084 { 0% { transform:translateX(-50%); opacity:0 } 33.33333% { transform:translateX(0%); opacity:1 } 66.66667% { transform:translateX(50%); opacity:0 } 100% { transform:translateX(50%); opacity:0 } }

Últimos retoques

Para terminar le he colocado al background un vídeo de fondo simulando que está nevando.
Este paso lo he realizado al final debido a que si lo haces antes no te va a dejar editar bien las imágenes y los textos dentro del elemento background.

Conclusión

Como has podido observar, con 3 códigos CSS y un par de imágenes hemos podido crear un background atractivo para colocar nuestra oferta navideña.
Espero que te haya servido y puedes utilizarlo en tu campaña navideña.
Ya sabes que con un poco de imaginación este mismo diseño se puede aplicar a otras ofertas.
Espero que te haya servido y ya sabes que si quieres aprender a utilizar Thrive Architect de manera más profesional tienes un curso donde vemos todos los elementos y algunos trucos.
Si te queda alguna duda puedes hacérmela llegar a través del formulario de contacto.
Un abrazo!!

>