Hi, I found this thread about using the Parallax Scroll plugin to add parallax images to PageBuilder pages. It was very useful, but I have a row that contains several widgets – a headline, a text widget, a button, and so on. Using the tutorial in the other thread, I can get a parallax image in the text widget, but it doesn’t continue over the entire row.
Is there any way to achieve this? Ideally I’d like the image to be behind all of the widgets in the row.
Thanks!
Hi Michael Bunning,
What theme are you currently using?
Hi Alex,
I’m using Vantage.
Hi Michael,
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
This is a private message.
Hi Michael,
I’m honestly not too familiar with parallax however, I think you would be better off with a SiteOrigin Hero widget (found in the SiteOrigin Widgets Bundle) instead. Now, obviously, it’s not a full row. However, it’s a very robust widget. Take these two examples, Sport and Refined Design. While neither has parallax – they both support it. Here’s a quick guide:
Add a SiteOrigin hero widget to your page, add a frame, ensure no background is set in frame. Then, go over to the widget styles sidebar and open the design group. Set your background image, and set the background image display to parallax. Go back to your frame, and add your content. If you want to add a button be sure to follow the instructions.
This is a private message.
Hi Michael,
Regarding the background color, I know this sounds a tad strange but there’s a default background color. To see the image you’ll have to blank it. To do this open up the widget and select your frame. Scroll down to the background section and open it. Find the “Background Color” setting and click choose color. Click the clear button on the right side of the form.
As for the line spacing issue. That’s a tricky one. If we try and automate line height we run into a number of issues. What if the user wants the hero image to be 90% 42px, and 10% 12px. We can fix this using JavaScript but that’s really not ideal.
As for the width issue, that’s a row issue. To fix it open up the row that houses the hero widget. Go over to the row styles sidebar and open the layout group. Select the row layout dropdown and set “Full width Stretched”.