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.

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!

  • 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”.

  • 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.

  • Now let’s add the gallery. Click “Add”> “Gallery” and choose “Animated Grid”.

  • 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”.

  • 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).

  • Click “Change Style” to customize the gallery’s design: background, mouseover text, etc.

  • Now return to the gallery, click on it and choose “Organize Images”.

  • Click “Add Images” and choose either images from your library, from the Wix Free Images library or from your computer.

  • 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.

Here is our final result:

#HTML5HowTo #HTML5Tips #WebDesignHowTo


This Blog was created with Wix Blog