The Prallax effect is a nice add-on for modern websites. While adding some interesting looks, it’s not obtrusive and it makes scrolling down a page more fun – at least in my opinion.

WooThemes has a nice extension that integrates with Storefront: Storefront Parallax Hero.

There are two different ways, to integrate a parallax effect into your site. The Plugin is mainly developed to integrate one picture into your homepage. But it leaves you with a manual integration as well.


Parallax on the Homepage

The first important step here is to make sure, the homepage of your website is set to the Homepage template. Otherwise, the plugin will not show up in Customizer and you can’t even get started. So take a look at your homepage and make sure you selected the right template on the right side of you page, in the settings.

Bildschirmfoto 2016-05-12 um 16.10.26

Select the Homepage template

When this is set, you can access the Customizer and when on the Homepage in the preview, you can see a new Menu item: Parallax Hero.

Parallax Hero in the Customizer Menu

Parallax Hero in the Customizer Menu

Entering the settings, you can define

  • The Content with the different Items like Headline, Subtext and Buttontext and -link.
  • The Background, where you set your image and its size or the desired background color, and you enable the Parallax effect where you can also set a fast or slower speed. If you don’t want to start in the preset middle of the picture, you can also move the ‘Parallax offset’ further up or down and for pictures with a lot of noise it might be worth adding an ‘Overlay Color’ so your text is easier to read.
  • Last is the Layout, where you can set the alignment of your text, the width of the picture (either the default frame of the site or full) and if wished you can give it a full height.
The 3 Menus for Content, Background and Layout

The 3 Menus for Content, Background and Layout

That’s it, look at your homepage and enjoy the new effect.

Adding a Parallax on any page

Now, the parallax effect might not be on the right part of your homepage or you might even want to add two different ones or have them on a totally different page. The given settings don’t allow any of these customizations. But fortunately, that doesn’t mean they aren’t possible. We just have to include the pictures and effects manually where we want them, using shortcode.

“From version 1.1.0, you can add the parallax hero component to any page using the[parallax_hero] shortcode.” (WooThemes). You just embed it right where you need it. And luckily, we can also style it. All the parameters of the menus can be added via Code, so you will end up with the exact same effect – you just have to work a bit harder on it.

On the nice WooThemes documentation, they show all the parameters, unfortunately they don’t tell you the different options you can give them. So I will bring some light into the jungle. There are:

  • heading_text‘ just input the text of the headline
  • heading_text_color‘ you can pick any color
  • description_text‘ just input the text of the description
  • description_text_color‘ you can pick any color
  • background_img‘ just input the link to the image
  • background_color‘ you can pick any color (use this option, if you don’t want to use a picture)
  • background_size‘ has the options ‘default‘ or ‘cover
  • button_text‘ just input the text of the botton
  • ‘button_url‘ just input the link to open
  • alignment‘ has the options ‘left‘, ‘center‘ and ‘right‘ which is the alignment of the text in the picture
  • layout‘ has the options ‘full‘ or ‘fixed‘ for either full widths or the widths of the container
  • parallax‘ has ‘0‘ for no parallax effect or ‘1‘ if you want it turned on
  • parallax_scroll‘ is the speed of the scroll and you have ‘25‘, ‘50‘ or ‘75
  • overlay_color‘ you can pick any color (for the picture overlay)
  • overlay_opacity‘ has the options ‘0‘, ‘10‘, ‘20‘, ‘30‘, ‘40‘, ‘50‘, ‘60‘, ‘70‘, ‘80‘ and ‘90‘ which are the different %-values
  • full_height‘ has ‘0‘ for no or ‘1‘ for true
  • style‘ let’s you add any additional CSS styling, like borders for example
  • overlay_style‘ let’s you add any additional CSS styling

The parallax code could therefore look like this:

[parallax_hero heading_text="SPECIALIZED HOSTING FOR WOOCOMMERCE" description_text="CRAFTED BY EXPERTS - MADE FOR YOUR CONVENIENCE" background_img=" background-size="cover" button_text="TEST NOW FOR FREE" button_url="" alignment="center" parallax="1" overlay_color="#f00" layout="full" full_height="0"]

or this:

[parallax_hero heading_text="Heading text!" background_img="http://path-to.img" alignment="left" parallax="0" overlay_color="#f00" layout="fixed" full_height="0" style="border: 1em solid red;"]

I hope, this helps to add the Parallax effect into your Storefront theme, wherever you want it to be.

Written by anna

Leave a Reply