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.
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
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
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="http://wcho5t.com/wp-content/uploads/2016/05/IMG_3761-1.jpg background-size="cover" button_text="TEST NOW FOR FREE" button_url="http://wcho5t.com/pro-site/" 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.
I have many different products and I want different images on each page with a corresponding image. Is there a way to embed an varient image within the widget section of the Sore-front parallax
Hi Zachary,
I’m not sure I understand what you want to achieve. If you want to show a parralax section on different page with a different background image each, you can use the shortcode to put them there.
But if you have one parralax section and you want it to adapt to the content, I do not know of any possibility to do it with the widget. So if this is what you need, you should try to write javscript that checks for the content and then exchanges the image.
Does that help?
Anna
Ever Wonder *_WHY_* ‘yo boo boo and his coworkers don’t put docs like these on their actual page itself for the documentation?
And….
Why is it that -even when using the shortcode option to add additional Parallax Hero items outside of the Customizer- with the
layout="full", the Parallax Hero still continues to contain the image and not make it full width. It should be identical and similar when used via the Customizer and used with a shortcode and the parameters oflayout="full", yet it’s not.https://prnt.sc/lihtr1
Hi Brad,
maybe they just want to help all of our blogs and websites to get more traffic 😉
For the layout=full to work, you need the use the fullwidth template. Therefore, it’s not possible to add a fullwidth parallax into the description of your homepage, as that template cannot display the customizer content as full width.
Hope that helps!
It does help – GREATLY!
Someone asked why it wasn’t working so I fired it up, chose the homepage template in storefront, and realized it was all contained inside another .
As soon as I switched their Storefront template OFF of the Homepage option, the parallax hero worked just fine.
The problem there then becomes that Storefront is meant to be paired with the Homepage template which then gives the user all types of options for ‘Recent Products’ + ‘Popular Products’ + ‘On Sale Products’ + ‘Featured Products’…. that’s supposed to be the “magic template” that makes all types of wonders work easily for all the (non-old-as-dirt-Dojo-leftovers-like-me) beginners and WooCommerce newbies to use Storefront.
Unfortunately, to get the Parallax Hero option to work and function correctly, the user now has to replace all of the “Homepage Template” content with the (newer) shortcodes.
The end-user is now having to go down ‘yet-another-rabbit-hole’ of a learning curve.
So much for the ‘simplicity’.
But your full write-up of the shortcode parameters is definitely a blessing!
https://www.facebook.com/groups/woohelp/permalink/2579865288906577/
Hi Anna, do you know if it is possible to display multiple buttons via the shortcodes?
Hi Damian, unfortunately not. The shortcode only comes with one button.
Hi Anna, I realise this is a super old blog now, but thank you so much for this! Very useful. I don’t suppose you can enlighten me how to shorten the appearance of the parallax block? I just want it to be a bit shorter so that on a small screen you see more of what is sitting below it. I hope that makes sense.
Hi Sara,
you could overwrite the CSS, that should help.
It should be something similar to
.sph-hero.sph-full-height.full .overlay {min-height: 450px!important;}Hope this helps!
Anna
Glad i found this. I wish there was more info on the actual page.
Would you know a way to get this working on mobile? their demo page works on mobile but nothing i seem to be able to do works. it’s just a static image.
Also an FYI. for the parallax_scroll. you need to change it 0.1 0.2 etc for that to work.
Hi Paul, glad the post could help 🙂 And thanks for the parallax_scroll tip.
Do you have the parallax section in any part of your website to check on mobile?
Your welcome,
I actually removed it and asked for a refund. spend all night at it with way to many issues.
wouldn’t parallax on mobile
wouldn’t play a video on mobile
nothing would go full height on mobile.
wouldn’t go full height on a child theme.
it all worked on my ipad pro, just not mobile.
thanks for your reply thoug.