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.
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 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”.
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.
Ahora vamos a añadir la galería. Haz clic en “Agregar” > “Galería” y selecciona “Cuadrícula animada”.
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“.
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).
Haz clic en “Cambiar estilo” para personalizar el diseño de la galería: fondo, texto mouseover, etc
Ahora regresa a la galería, haz clic sobre ella y selecciona “Organizar 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:
#Cómocrearunapáginaweb #ConsejosdeDiseñoWeb #DiseñandoconWix #HerramientasparaDiseñoWeb #Plantillaswebpersonalizables
