Important Update:
While the below parallax plugin option is still very useful due to its array of options, Page Builder now has a parallax option built in. To add a parallax background to a row, edit the row by clicking the wrench icon far right then Edit RowDesignBackground Image Display, choose between Parallax or Parallax (Original Size). A parallax background can also be applied to a widget by editing the widget, clicking the Design tab on the right and then using the Background Image Display drop-down menu.
Parallax in Page Builder using Adam’s plugin
Parallax scrolling can be added to Page Builder row backgrounds using the plugin Parallax Scroll by Adam Rob. Thanks, Adam :)
1. You’ll need to have Page Builder by SiteOrigin installed and activated.
2. Install and activate Parallax Scroll plugin: https://wordpress.org/plugins/adamrob-parallax-scroll/.
3. Go to Parallax Scroll in WordPress, you’ll find it just above Appearance.
4. Add your new item. To set the background image, use the Add featured image link in the right column.
5. Your heading and content should be added to the post title and content area as you would for a regular page or post.
6. In this example, we’re looking to set a 100% width Page Builder row with a 100% parallax scrolling background. Set parallax height and parallax image size to 0. You’ll find these options below the visual editor field.
7. In your main WordPress menu click Parallax Scroll to go back to the overview page. Copy the shortcode of the item you’ve just created.
Now you’re ready. Go to your Page Builder page. Edit the row in question by clicking the wrench icon on the right > Edit RowLayoutRow LayoutFull Width Stretched.
Next, insert a Text widget and paste your shortcode. Done!
Feel free to ask any questions relating to this below.
Hi Andrew
How can I set background parallax scroll in visula editor using shortcode?
I’ve tied this…
[[parallax-scroll id=”179″]
[spacer height=”100px”]
some text
other tex
about us
[spacer height=”200px”]
[/parallax-scroll id=”179″]]
… and everything works except parallax, actually shows thin strip above the content.
I will be appreciate for your help.
Hi Patryk :)
Is that exactly how your shortcode was inserted? There is a double square bracket at the start that would cause it to fail.
Also, can you confirm, are you sure the plugin is meant to open and close the shortcode? I’ve only done a quick run through so I’m not sure. Can you perhaps link me to the documentation or source that described opening
and then closing the tag
. Thanks.
In testing I used a single shortcode:
I followed by your steps above and a got this shortcode –> [parallax-scroll id=”179″]. I don’t now how to set this as a background if this is possible at all. I found this on the internet “[[shortcode] … [/shortcode]]” but it doesn’t work for me.
Any ideas?
Thanks for replay
Cool, thanks for clearing that up:
As far as I know, the following is incorrect for this application. Rather don’t use it.
In the Text or Visual Editor widget this all that you need to use to include your Parallax item:
The content that overlays the Parallax background shouldn’t be included in the Text/Visual Editor widget but rather included in the Parallax item itself.
You can add content at Parallax Scroll > “Name of your item”.
Let me know how that goes.
Here is a little image setup help:
and
Hope you’re able to make progress :)
It works. It was ridiculously simple! just cut content from visual editor and paste to the item in parallax scroll.
Thank you for your help.
Win! Really glad to hear that helped :)
All the best with your site.
Hi Andrew thanks for this tutorial, i’m trying to set a parallax image in my site and it works just fine, but when i put the shortcode in a row in pagebuilder it leaves a tiny but noticeable blank space between my header and the image, is there a way to remove this space?.
When i set the short code in the regular text editor without pagebuilder it removes the space but then i cant use pagebuilder.
Thanks!
Hi Ricardo Ontiveros Escobar
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.
Hi Andrew.
Thank you for an excellent resource on adding parallax images to webpages. I’m running the Alora theme on WP 4.2.4 and this tutorial worked great!
However, the parallax effect doesn’t seem to be working on the iPad or mobile phones (at least not on a Samsung running on Android). I did some reading and apparently, there are a host of technical issues with parallax on non-desktop browsers. However, there are sites such as http://whiteboard.is, which have the parallax effect running well on mobile desktops. Is there a fix for this problem?
Thanks again.
Hi MKhan
Glad to hear you made progress with this.
I think it would come down to the plugin in question and how they’re handling the effect on mobile. If you have a moment, perhaps you could ask Adam here: https://wordpress.org/support/plugin/adamrob-parallax-scroll and see what he says.
If you need help integrating a different Parallax plugin with Page Builder, let me know and we can take a look.
Thanks
Hi Andrew,
This was a super helpful parallax tutorial. I’m new to this WordPress game – is there a way I can hide the title of the parallax box? I know there’s probably something I can add to the Custom CSS box to maybe remove this, right?
Thanks for your help,
Oliver
Super :) Glad it helped. Any chance I could see your site? If you’d like to keep it private, use the Private Reply checkbox bottom right. Thanks.
This is a private message.
Hey Phil
Try in Custom CSS:
/* Parllax */ .adamrob_pcontainer div:first-of-type { display: none; }Getting a little cramped in this part of the thread. Can you open a new thread for any follow-up questions:
Page: New Thread
Appreciate it :)
Thank’s so much dude! It’s realy great work – smart and simply just copy and paste.
Cheers from Poland!
Awesome. Glad to hear it helped. All the best from Cape Town :)
Hi Andrew,
Thank you for the tutorial. I am struggling to get my parallax scroll to be the full width of the page? It seems to have a padded border either side of the image. I have selected ‘ Full Width Stretched’ in the Page Builder > Row Set Up and checked the ‘Full width’ box in the parallax scroll properties. Is there a way to get rid of these borders and have it full width similar to the Homepage Meta Slider, or is this a restriction in the Vantage theme?
Thanks
Megan
Hi Megandesign22
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.
Hi,
I’ve got the same problem as Megan…
What’s the sollution?
Hi Karol
Thanks for reaching out. Could you perhaps open a new support thread for us, it’ll be easier to help.
Page: New Thread
Please, post the link to your new thread here and I’ll give it priority. Thanks :)
This is a private message.
Thanks Megan, just need the username and we can login.
Hello :)
I just wanted to comment on MKhan’s problem with mobile just in case it helps someone else reading this posting. At the bottom of the Add New Parallax setup page there are three options:
Mobile: Disable Parallax Image Select this option if you would rather the background image not display at all on mobile devices.
Mobile: Disable Entire Parallax Select this option if you would rather not display any of the parallax content when on mobile device.
Mobile: Image Size
Set a size here to scale the image size when on a mobile device. Specify the width in pixels. Set to 0 to auto set the size of the image.
I am notorious for rushing through a new plugin just to see what will happen (it’s like Christmas), and often overlook settings I wasn’t sure how I wanted to set up initially, so if anyone is having trouble on mobile, he or she may want to double check the settings and regenerate a new shortcode if need be.
Hi @specialk2e2
Awesome :) Thanks for adding this to our little tutorial. Definitely something I skipped over. Appreciate the input!
Hi Andrew
thank a lot. it works! really useful and easy tutorial for a beginner like me.
Glad that helped :) All the best with your site.
This is a private message.
Hi Joel
Apologies for the delay.
A member of our technical team has reached out to you via email.
Hi,
Is it possible to have a parallax effect where the image also moves with the scroll but at a slower rate? Something similar to this, http://castlesos.com.
Thanks for the help.
Hi melvargas
Sorry for missing your question. Unfortunately, I’m not sure if you can achieve the effect you’re after. For use specific questions like this it’ll be best to chat to the author, Adam, via his support page:
https://wordpress.org/plugins/adamrob-parallax-scroll/
Hi everybody,
for all of you out ther, who fights with PageBuilder, parallax effect and the above mentioned plugin – have a look on this website:
http://www.kadencethemes.com/using-page-builder-virtue-premium/
Almost at the foot there is this hint: Set Row Layout to Full Width. This made my day after searching this forum and several other for some advice.
@Andrew Misplon: Maybe this hint would be good in any documentation about PageBuilder, parallax effects and so on.
(Please escuse my cluimsy english, I think you will get the meaning)
kind regards
J.B.
Hi J.B.
Thanks for reaching out and for your feedback. I’ll highlight that part in the above instructions now.
All the best with your site :)
Hello, there was no answer to this, so i will try to refresh it.
– Is it possible to have a parallax effect where the image also moves with the scroll but at a slower rate?
@Simon,
the image moves indeed, but very slightly, almost unnoticable.
@Andrew: I would appreciate a tool, or maybe a piece of code, where one could set the speed ov them movement. Is that possible?
Hi Simon, JB and melvargas
I took another look now at the Parallax Scroll settings. There is a section to set the speed. Have you given that setting a try?
Hi there,
I am having trouble making the parallaxed background full-width. Somehow it appears as if the page has a boxed layout, and it’s not. Both the page, and the row are set to full-width (row is set to full-width stretched), and somehow I can’t get the image to stretch through the page horizontally.
Website address is http://www.tumesh.com/dir – please don’t mind the design and content as it’s still in the works. I’ll update this post if I am able to figure it out prior to your response… thanks.
Hi Nathaniel
Thanks for reaching out.
Are you using Adam Rob’s plugin to create a parallax background? If so, could you perhaps let me know the page and row we can see that on?
Hi, I am using the built in parallax function. How I can set the initial vertical position for the background? Thx.
Hi Zsolt
I don’t believe we have that as a setting option at this stage. What you can do is edit the Page Builder row in question by clicking the wrench icon far right then Edit RowAttributesCSS Styles, insert the following:
The values represent x% and y%. Adjust as required. The !important needs to be there to override the existing 50% 50% values that are being outputted.
Hope that helps :)
Would anyone happen to know any CSS that would disable parallax scrolling just on mobile devices and tablets. Until the tech issues with getting it flowing smooth are ironed out id rather keep it switched of on mobile… thanks
Hi Mark
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.
Hi Andrew
Im having issues with my featured image in Parallax scrolling.
it is not displaying the image at all only the parallax title.
Hi Dani
Are you using a row or widget background in Page Builder or Adam Rob’s plugin to handle parallax? Please, send a link to your site.
Hi Andrew,
maybe its possible for you to help me.
I ve got the parallax plugin from adamrob everything works fine with the indicated settings on my localhost xampp.
After I tested everything on my local test enviroment. I ve installed everything on my life webpage in the same way like you expalined at the top of this topic.
My problem it doesn’t work at all. It shows only the shortcode as text after refreshing the page.
I thought it could be a problem with any plugin I deactivated every plugin and tried it again without any success. I compared every setting with my localhost and the life webpage.
Im having the Vantage Theme pro version 2.5.4
Wordpress 4.6.1
Plugins: Autoptimize, Insert Header and Footers, Loginizer, Meta Slider, Page Builder SO, Parallax Scroll by adamrob, Siteorigin CSS, wp edit, wp Typographiy.
I tried even to adjust Autoptimize, cause it affects the javaskript and Css for performance optimization.
Settings for the current Parallax scroll Page:
Parallax h. : 0
Parallax Image s.: 0
Horizontal pos: centre
Vertical Position: top
Mobile: Image Size: 0
Background picture is the same as in my localhost version.
Page Builder Row Settings:
Row-Layout: full size streched
Text Widget in the row settings:
Design: Background Display: Parallax
It looks like that I ve forgotten something to set or did it happen also to other users?
Kind regards
Daniel
Hi Daniel, did you clear the cache of Autoptimize before deactivating it for a test?
Does Adam’s plugin work if you insert the shortcode into a new page, not using Page Builder?
Hi Andrew,
I ve found the problem.
Everything works fine without having the “wp-typography” installed.
That plugin is mainly for hyphenation in my mobile version of my webpage.
I ve found a section in the settings of the plugin where I can determine HTML or ID’s areas what should’nt be affected of the plugin.
I tried a bit code to set it on Text widgets but it does’nt.
It depends certainly on the operator :) (Thats ME)
Could you give me a hint how I can avoid this problem without deleting the “wp-typography” plugin?
You could try editing the row in question, clicking the Attributes tab on the right and inserting a custom row class like:
You can use any class name you’d like. You can then use that class name in the ignore section of your conflicting plugin. That might be one way to approach it.
Sry Andrew,
I did’nt get a solution.
I tried a lot possibilities with class names and changings in the row attributes and settings of wp-typography.
It does’nt work unfortunately.
So I have’nt to report really a progress.
I can help confirm a class for exclusion if I can take a look at the page. Can you send a page?
Hello,
I would like to make a parallax heading on my new wordpress website (using Poseidon heading).
Is this possible, I’ve maneaged to get the short code, but I don’t know where to paste it.
http://www.snapdam.com
Many thanks!
Alan
Hi Alan
Thanks for posting. Can you perhaps, give my instructions right at the top of this thread a quick read? I briefly mention how you’ll need to have Page Builder by SiteOrigin installed etc. I later mention using a Text widget in Page Builder, you can also use the SiteOrigin Editor widget, Text tab. If the instructions at the top fall short, please, let me know where they aren’t clear and I’ll do my best to fix them up :) Let me know if you have any follow-up questions, I’ll be happy to jump in. Cheers :)
Hello Andrew,
Many thanks for such a quick and extensive reply!
I do have SiteOrigin Editor installed and I used it to create “About” and “Contact” pages. However I do now know how to use it to add the short code to Poseidon themes heading image as no rows were used to create it (at least not by me).
Sorry if I ask this presumably trivial questions, but I really don’t have much coding knowledge.
Thank you for your time.
Best regards,
Alan
Sure :) If your theme is using the core WP head image feature at Appearance > Customize then it isn’t possible to add a shortcode or use Page Builder there. You’d need to look at rather building your page from scratch with Page Builder in that event.
Ok, thank you for this information. You just saved me a lot of time :).
Wish you a nice day,
Alan
For sure :) You too.
Hi Andrew Misplon,
that would be great.
The site is:
http://culinaria-kriens.ch/
Best regards,
Daniel
Thanks. Can you show me a row on a page that needs to be excluded from the typography plugin?
Hi Andrew,
I will build the parallax effect to night again and send you all important informations.
Best regards,
Daniel
Hi Andrew,
in the link below u’ll see the row with the parallax id and the webpage.
The content of the row settings and text-widget is on standard. That means prepared for the parallax effect but no row id, row class or cell class is set.
I tried in the meantime every setting on wp-typography from small changes in signs like this ” to ‘ in Javascript implementation and a lot more but nothing worked. Just only one and that’s swithcing the plugin off.
Best regards,
Daniel
I know it’s really late to be asking this but have you tried using the default Page Builder row background parallax feature? I outline it right at the very top of this page under the Important Update heading. Can you perhaps confirm that for me before I dive in here?
Hi Andrew,
do you mean the Settings in the Text-widget Design :”Background Display” …”Parallax or Parallax (original size)”?
I did follow the explanation how do I have to insert the parallax effect. So I think you mean the Settings for the parallax background or is there a another default parallax effect as a Siteorigin widget?
Yes, the page-layout is very small so the parallax effect should be straight under the big vantage headline.
I still left the parallax effect on the webpage. So it is maybe easier for you to analyze the page.
Best regards,
daniel
Thanks for your feedback. Do you mind quickly opening a new thread and sending me the link? I’ll then reply there with a request for login details and try solve this for you.
Page: New Thread
This is a private message.
Thanks :)
Hello ,
I and a my friend we had a parallax effect without plugin on wp 4.7 ed Vantage Version: 1.5.8
this is the page Vacanze Toscana
we have add a new Row
after
Edit Row > Theme : Background Image URL: http://www.happynewlife.it/it/ …
Css code in Attributes:
position: relative;
opacity: 0.65;
background-attachment:fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
I hope this will be helpful for other people in this forum.
Regards
Hi @carlotoscani
Super, thanks for sharing :)