• 0k
  • 0
Diseño Web \ 7 Marzo 2013

Tips HTML5: Agrega Galerías Animadas A Tu Página de Inicio

Hace unos días nos encontramos con un sitio web Wix realmente excepcional para un circo/teatro basado en el vodevil de Los Angeles, Le Tigre Tent. Una cosa que realmente nos impresionó de su página web era el uso de una galería animada en forma de grilla en la página principal, que hizo del sitio en su conjunto un aspecto más vivo, más divertido y más desafiante.

Le Tigre Tent

Le Tigre Tent

Esta es una característica de la que muchos usuarios de Wix no están al tanto, sin embargo ¡es tan fácil de hacer! Queríamos mostrarte cómo se puede añadir una galería animada similar en tu sitio web con unos sencillos pasos. Puedes agregar esta galería en cada página de tu sitio, pero en la página de inicio, logra crear un efecto muy poderoso que cautiva a los visitantes del sitio cuando acaban de entrar en él. A modo de ejemplo, estamos usando la plantilla “Close Up HTML“, pero esto funciona con todas las plantillas de Wix HTML5, ¡por supuesto! Selecciona una porción de la plantilla

  • Selecciona la zona en la página de inicio donde deseas colocar la galería y libéralo de cualquier otro elemento.
  • Agrega una casilla para dar a tu galería un marco y mayor profundidad. Haz clic en “Agregar” > “Formas y líneas” y selecciona “Box”.

Selecciona Formas y Líneas

  • Estirar el cuadro para cubrir toda el área destinada a la galería.
  • Haz clic en el cuadro y luego en “Cambiar Estilo” para personalizar – añadir colores, sombras, etc.

Cambia el estilo

  • Ahora vamos a añadir la galería. Haz clic en “Agregar” > “Galería” y selecciona “Cuadrícula animada”.
Añade la galería
  • Estira la galería para cubrir el área del cuadro.
  • Para personalizar la galería, haz clic sobre ella y selecciona “Configuración”.
  • Cambia el número de filas y columnas que se ajusten a tus necesidades.
  • Cambia los márgenes de 0 a 10 para conseguir una mirada más amplia.
  • En “Transitions”, selecciona “Vertical“.

Controla la galería desde Configuraciones

  • Cambia la duración de acuerdo a tus necesidades (5 es la más lenta)
  • Se recomienda no elegir las opciones “Mostrar botón autoplay” ni “Mostrar botones de navegación”.
  • En “Cuando haces clic en una imagen”, selecciona el comportamiento deseado (“Enter Expand Mode” es nuestra preferida).

Selecciona el comportamiento

  • Haz clic en “Cambiar estilo” para personalizar el diseño de la galería: fondo, texto mouseover, etc

Cambia el estilo de tu galería

  • Ahora regresa a la galería, haz clic sobre ella y selecciona “Organizar las imágenes”.

Organiza las imágenes

  • Haz clic en “Añadir imágenes” y elige entre imágenes de la biblioteca, imágenes gratuitas de la biblioteca de Wix o desde tu ordenador.
  • Puedes poner a tus fotos un título y una descripción, y utiliza las flechas de la izquierda para cambiar el orden de las imágenes.
  • El número de fotos que necesitas agregar para aprovechar al máximo esta galería animada depende del número de columnas y filas que tengas. Si tienes 3 filas y 3 columnas, se necesitan al menos 27 imágenes para una galería realmente diversa.
  • Ahora, con todas las imágenes listas, haz clic en “Guardar” y en “Vista previa” para comprobar si todo está como lo deseas. Puedes cambiar la velocidad de movimiento, ampliar los márgenes o jugar con el orden de las mismas.

Aquí está tu resultado final: Galerías animadas

Publicado por Equipo Wix
Wix

Bienvenido al

Únete al Blog de Wix ¡Para estar al tanto de novedades!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

¡Suscríbete al Blog! \ 

Diseño web, tendencias, consejos para
emprendedores ¡y todas las novedades sobre Wix!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email