ProSite portfolio builder offers several easy ways to integrate movement on your website, like cover image loading animations and rollover effect options. However, one technique we get many questions about is how to utilize animated GIFs in site design, especially on homepages. Here are two ways to customize your ProSite using animated GIFs.

We’re not able to display animated GIFs in the blog, so be sure to click through to the example sites, muro1buro.prosite.com and factoryfifteen.com, to see the GIFs in action!

Using large GIFs for a slideshow effect

One simple but effective use we’ve seen is using a single large GIF on the homepage to give a slideshow-like preview of work.

[muro1buro.prosite.com]

To create a landing page like this:

1) Create an animated GIF with a sampling of your work, similar to the GIF on muro1buro.prosite.com. Keep in mind–the maximum width for animated GIF uploads is 600px wide. (see tutorials below for instructions)

2) Visit the Pages Tab, then click “+ Add Page.” Then, choose the type of page you’re adding: Custom. Adding a Custom Page will give you a blank page to design whatever you’d like.

3) Once you add a Custom Page, find it in your Pages list, use the gear dropdown to choose “Edit Page Content.” Then, use the Remote to add the GIF to the custom page, along with any other content you’d like.

4) If you want to make this your homepage, go to the Settings tab and click Set Landing Page. Here you’ll have the option to make your new page the first thing people see when they visit their site.

5) Preview to see how the effect will look on your live site, then Publish.

Thumbnail and Rollover GIF effects

You can also use animated GIFs to get even more out of your gallery thumbnails by using  GIFs as covers or cover rollovers.

[factoryfifteen.com]

To create a gallery like this:

1) Put together your gallery and choose the size and positioning of all your cover images.

2) Create still images and animated GIFs for each project cover using the dimensions you chose for your gallery covers. (see tutorials below for instructions)

3) Upload your new covers in by going to Design –> Change Cover Images –> then clicking on the cover image you’d like to change.

4) Choose “Upload image,” and select the image and/or animated GIF from your computer that you’d like to upload for both Regular and Rollover effects. If you’d like the animation to appear automatically when people land on the page, choose Regular. If you want people to hover over the project with their mouse before the animation appears, choose Rollover.

5) Preview to see how the effect will look on your live site, then Publish.

Never made an animated GIF before? Here are a couple tutorials to get you started:

Build Animated GIFs in Photoshop (CreativeTechs.com)

How to Create Animated GIFs With Your Smartphone (Mashable.com)

Create Animated GIFs with Mac OS X Preview.app (blog.iharder.net)

Any other ProSite techniques you’ve seen that you’d like to learn more about? Let us know in the comments!