Home>Support>Parallax effect not working in the Hero Widget.

Parallax effect not working in the Hero Widget.

Hello,

I have been trying with no success to get a parallax effect working in the Hero Widget. No combination seems to work in two themes I have tried it in, the Siteorigin North and Woo’s Canvas.

I can get the parallax effect working by setting it up in a row as a background image, but not in the Hero Widget. Is there a trick I am missing somewhere?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 1 month ago Dave LeBlanc

    Sorry, that title should have been Parallax effect NOT working in the Hero Widget.

  2. 8 years, 1 month ago Alex S
    Hi, I Work Here

    Hi Dave,

    It’s definitely possible to use the Parallax with the hero widget. Would it be possible for you to send me an export for this widget so I can over it? To do this open up the page with the widget and click layout. Then click import / export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.

  3. 8 years, 1 month ago Dave LeBlanc

    Alex, thank you for the prompt response.

    The link is here: https://u.teknik.io/4QoyI.json

    I think I did this correctly.

  4. 8 years, 1 month ago Alex S
    Hi, I Work Here

    Hi Dave,

    Okay so the issue here is that you’re unable to actually see the background image due to the default hero background color, simply clear it. Presumably, you’ve set the background image via the design widget styles group, right?

  5. 8 years, 1 month ago Dave LeBlanc

    Alex, hello, and thanks for the reply.

    I can see the back ground image. That is no problem. I placed or inserted the background image using the Background image button in the Hero Widget. I did not place it using the design widget styles group on the right

    The issue is getting the parallax effect working.

    From reading about the parallax effect, it’s a finicky thing to get right.

    I am trying to insert an image to show you, but I can’t seem to make that happen.

  6. 8 years, 1 month ago Dave LeBlanc

    Alex,

    Here is how I have it set up.

    1. In the Hero Widget under frames I placed the background image.
    2 For the setting on the widget on the far right under Widget Styles, I set the Background Image display to Parallax. (I also tried Parallax original size.)
    3 Under row styles, I selected under Row Styles Full Width Stretch. Under Design, I chose under Background Image Display Cover.

    You did give me an idea, though. I duplicated the Hero Widget and set it up in a new row. I did not insert the image in the background image under Frames and cleared the background image. I placed it in the Design section under Widget Styles. It works.

    Sorry to be so rambling here, but I have a client who likes the parallax effect. This is my first serious go around with it and I can see why so many people get frustrated trying to set it up. A common theme is the background image never seems to come out to anyone’s satisfaction.

    Thanks for your help. Mark this as resolved.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More