HTML5 Tips: Design a Dynamic Homepage with Animated Galleries


A few days ago we came across a really outstanding Wix website for the Los Angeles based vaudeville circus/theater, Le Tigre Tent.  One thing that really impressed us about their website was their use of an animated grid gallery in the homepage, which made the whole site look more alive, more fun and more in-your-face.

Design a Dynamic Homepage with Animated Gallerie

Le Tigre Tent

This is a feature not many Wix users are aware of, yet it is so easy to do. We wanted to show you how you can add a similar animated gallery to your website with a few simple steps. You can add this gallery to every page on your site, but on the homepage it creates a really powerful effect of wowing site visitors when they just enter the site.

For illustration purposes, we’re using the “Close Up HTML” template, but this works with all Wix HTML5 templates, of course!

Design a Dynamic Homepage with Animated Gallerie

  • Select the area in your homepage where you wish to place the gallery and clear it of any other items.
  • Add a box to give your gallery a frame and more depth. Click “Add” > “Shapes & Lines” and choose “Box”.
Design a Dynamic Homepage with Animated Gallerie
  • Stretch the box to cover the entire area meant for the gallery.
  • Click on the box and then “Change Style” to customize – add colors, shadows, etc.
Design a Dynamic Homepage with Animated Gallerie
  • Now let’s add the gallery. Click “Add”> “Gallery” and choose “Animated Grid”.
Design a Dynamic Homepage with Animated Gallerie
  • Stretch the gallery to cover the area of the box.
  • To customize the gallery, click on it and choose “Settings”.
  • Change the number of rows and columns to fit your needs.
  • Change the margins from 0 to about 10 to get a more spacious look.
  • Under “Transitions”, choose “Vertical”.
Design a Dynamic Homepage with Animated Gallerie
  • Change the duration according to your needs (5 is slowest)
  • We recommend not to choose the “Show Autoplay Button” and the the “Show Navigation Buttons” options.
  • Under “When clicking on image”, choose the behavior you want (“Enter expand mode” is our preference).
Design a Dynamic Homepage with Animated Gallerie
  • Click “Change Style” to customize the gallery’s design: background, mouseover text, etc.

Design a Dynamic Homepage with Animated Gallerie

  • Now return to the gallery, click on it and choose “Organize Images”.
Design a Dynamic Homepage with Animated Gallerie
  • Click “Add Images” and choose either images from your library, from the Wix Free Images library or from your computer.

Design a Dynamic Homepage with Animated Gallerie

  • You can give your photos a title and a description, and use the arrows on the left to change the image order.
  • The number of photos you need to add in order to make the most out of this animated gallery depends on the number of columns and rows you have. If you have 3 rows and 3 columns, you need at least 27 images to make your gallery really diverse.
  • Now with all the images ready, click “Save” and “Preview” to check if everything is just as you want it. You can change the movement speed, expand the margins or play with the image order.
Design a Dynamic Homepage with Animated Gallerie

The post HTML5 Tips: Design a Dynamic Homepage with Animated Galleries appeared first on The Official Wix Blog | Wix.com.

via http://feedproxy.google.com/~r/TheOfficialWixBlog/~3/MLQuXEkOWlg/

Autor: Gabriel Catalano - human being | (#IN).perfección®

Lo importante es el camino que recorremos, las metas son apenas el resultado de ese recorrido. Llegar generalmente significa volver a empezar!

GENTE COSMO

LIFESTYLE - by Esther Herrero

Being Your Brand

Branding and Strategy for Business and Life

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

imagination is the key

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Blog de Tecnología en Español - Internet - Redes Sociales - Entrepreneurship - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Poesías, relatos, diario de sueños

Unencumbered by Facts

Taking unsubstantiation to new levels

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

BLOGTEC

Noticias de Tecnologia.

T a l e n t o  en  E x p a n s i ó n

Gestión de personas y transformación digital para las organizaciones líderes de la Era del Conocimiento

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Ideas para la clase

Experiencias creativas en la clase de español.

Little Grey Box

Travel Well

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea Growth Hacking

Expertos en estrategia y auditoria de marketing

The Coaching Alliance

El camino hacia el éxito

Erick Lovera

Mi Pasión en un Blog

Estampas de México.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Escritora y formadora en comunicación

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

be.blog

be. Intelligent Multimedia Education

~~Mente en Gravedad~~

************************************************************************************************************

The Xtyle

Fashion Blog - Un Blog de Moda y Tendencias by Bárbara Sanz Esteban

aníbal goicochea

Tecnologías de la Información y Estrategia

A Waterfall of Sound

"Poetry is when an emotion has found its thought and the thought has found words." Robert Frost

Health & Family

A healthy balance of the mind, body and spirit

Style & Design

Fashion Trends and News

U.S.

News, Headlines, Stories, Video from Around the Nation

A %d blogueros les gusta esto: