Introducción
Uso de Sitely
Elementos
Cómo
Imagina crear un efecto que no solo es facilísimo de lograr, sino que además le da ese toque extra a tu diseño. Hablamos de fijar una imagen en la ventana: ¡es como magia!
Esta técnica le da a tu diseño un efecto cuasi parallax, haciendo tu página más atractiva. ¿El resultado? Una página que no solo es agradable a la vista, sino también suave como la seda.
Entonces, ¿por dónde empiezas? Elige una imagen que refuerce el mensaje que buscas. Ahora crea una caja, rellénala con esa imagen y prepárate para el cambio de juego: haz clic en "Fijo en ventana". ¡Boom! Acabas de llevar tu diseño al 11. Fácil, ¿no? Aquí te cuento cómo funciona.
Cuando eliges la opción Fijo en ventana, en realidad haces dos cosas. Primero, la caja que contiene la imagen se convierte en una ventana dentro de tu página web. La imagen en sí se envía detrás de esa ventana y permanece fija en el navegador, detrás de tu página web. La animación de abajo muestra cómo funciona: solo desplázate por la página para ver cómo encajan los elementos.
La ventana de la página web se desliza SOBRE la imagen al hacer scroll.
La imagen queda DETRÁS de la página web y permanece fija en el navegador
Y así es como se hace. Recuerda que debes empezar con una CAJA y luego añadir tu imagen como contenido de la caja. Una vez que hayas añadido tu imagen, selecciona la opción Fijo en ventana en el panel de estilo.
Recuerda, puedes usar una caja normal, o puedes usar una caja ancha o un bloque de diseño. Con estas opciones anchas, añadirás la imagen como imagen de fondo, pero igualmente seleccionarás la opción Fijo en ventana. La diferencia será que la imagen de fondo abarcará todo el ancho del navegador.
Combinando distintos elementos por encima de tu imagen con Fijo en ventana, puedes crear secciones hero muy atractivas para tu sitio web, como en el ejemplo de abajo.
MIS AUTOS
VIAJES
EL MUNDO EN
ESTILO
En este ejemplo, creamos una gran caja de imagen con Fijo en ventana y luego la cubrimos con varias cajas para ocultar las partes de la imagen que no queríamos mostrar. Después, añadimos una barra de navegación y redes sociales, un titular de texto y una imagen PNG del auto para completar el hero. Muy sencillo, pero también muy efectivo. La imagen de abajo muestra cómo se ven todos los elementos en el Lienzo de Sitely.
Por favor, informa de cualquier deficiencia en esta documentación y la solucionaremos lo antes posible.
Actualizado para Sitely 6
Este sitio web utiliza cookies.
Consulta nuestra política de privacidad para más detalles.
