parallax-banner-online-store-website

Storbie Update: Full-width header with parallax hero image!

Would you like a full-width photo in your header? How about a dose of parallax scrolling with a dash of animation to give your website a bit more zing?

The team are working on some great new design features and first off the rank is a new header with support for a full-width photo with optional parallax scrolling, text overlay and a call-to-action button. Also included is the option to have your navigation next to your logo.

What is parallax scrolling?

Parallax scrolling is a popular web design feature that makes some elements of a web page scroll at a slower speed than others, giving a 3D effect. When included subtly, this adds a modern and professional look to your website.

You have the option to include parallax scrolling to your full-width hero image. Here is an example of how your header could look with these new features:

parallax-banner-online-store-website

Check it out in action on www.verywell.co.nz

The recommended resolution for the hero image is 2000 pixels wide, and about 1200 pixels tall. The top and bottom of the image will be cropped to fit the image into the banner. This is affected by the height of the content, aspect ratio, browser width and whether parallax scrolling is enabled. We suggest you have a play and test out different images to see what works best.

Read this support article for instructions on how to add a hero image to your online store.

3 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s