Visual Composer Parallax Effect – Parallax Made Easy Without Code – Visual Composer Tutorials Part 4



in this video we show you how to create a parallax background on any row in your visual composer we're getting started right now what's up guys welcome back to another video and cards from the WP learning lab but we help you get better at WordPress so you can earn more for yourself for your clients and for your business if you haven't done so yet hit subscribe then hit the bell icon so you don't miss anything with that out of the way let's head into the screen capture and learn how to create a parallax effect using visual composer I'll see you there so the first thing we have to do to get the parallax effect functioning is create a page that's going to hold the effect so we're going to click on pages or hover over it click on add new this new page I'm just going to call it parallax effect and I usually use the front and editor but for this when we use the backend editor' just because you guys are going to see both so if you prefer the front-end you can e the same thing in the front end but for the back end you're going to see how that works in the backend right now so when I click on backend editor and now we have our very familiar dialog box here we click on add element and we add a row all these items they are always contained within a row the row is the basic building block of visual composer so we're going to add a row and parallax effect is in the background of a row so I have to have any content for this to work so we can just create the parallax effect in the row settings by clicking that pencil there for the row stretch I'm going to show you what all these look like but I usually do the stretch row which stretches the background of the row but not the contents of the row and you see what I mean later on this video I'm not going to set any other settings right now we're going to scroll right down to parallax to simple and then add an image I've got this cool little image that I like right here they say it's from Italy who knows it might face him by not be now that image is in there I can click on the set image button here at the bottom right and that will put the image into the background our parallax speed right now is 1.5 which means whatever rate we're scrolling the parallax will scroll one and a half times as fast and so it's not a big difference in effect but you'll see a subtle scroll all in this parallax speed we click on Save Changes so you can see what this looks like actually first what we have to do is go back to the settings and go to the design options and set a height I'm going to set a height of 250 pixels for the padding top and bottom and that secondly sets the height for the background click on Save Changes if you don't do that you will just see a thin bar of your rope and you're going to see if it's not the way you want to look and to fix that you add that padding like we just did there so we have our background right here if we can see that scrolling a little bit faster than we are so we have little parallax effect going on may not be fast enough for your liking so we can go back in here and we can click on the pencil and set the parallax speed to 4 what you'll notice when you do this let's refer back to here this little tree is right on the edge so keep that in mind when i refresh this tree at the edge and this these tire tracks over here are right at the edge when we change the speed the site has to change the dimensions of the image to make sure there's enough space for the the parallax effect to not display a blank below the image that's available so depending on the size of your image the image may scale so when i refresh this page you may not see that tree anymore in fact we're zoomed in quite a lot because this image just wasn't big enough to support that scroll speed so if we go back into the editor again click on the pencil and if we choose 2.5 it's going to shrink the image again it's got to shrink it to where it knows that it has enough parallax background to support the effect and now we're zoomed out again we can just barely see that the houses up there so it's not perfect it would the way it is now I prefer to see those houses so I'm just going to set it back to 1.5 they also have the option of manipulating this yourself by changing the size of the image click this 1.75 so if we hang on a minute let me refresh this first see how that looks I think that one looks pretty good we see that tree that was here is still out of the frame and these tracks go out of the frame they don't end around an edge anymore because we're still zoomed in and what you can do is actually change the height of the image manually using the editor so if we go into media library and we find the image click it click on edit image you can actually go in here and crop the image in various ways to make the sizing because when we did the zoomed in we just had this bottom part of the field but if we were to cut that field out and do it like this for example and then crop that image and click on save now we have a smaller image this will apply to all of the images actually we're going to edit again on the bottom right here we have the option of setting what this change applies to and I have set for all image sizes so this crop will affect all images you can have added iSpy some nails or all sizes except thumbnail but now if we go back and refresh this page it will automatically update with the new image and this parallax background will change because we have a different image it's not too zoomed in quite a bit because we shrunk the background actually like that better way to sumed in there but if we go into the pencil here we should be able to set this to 4 it's still going to zoom in but hopefully it won't be just the boring field we're going to see a lot more action as in some houses and some trees so refresh that and our some houses and trees as you get to the bottom side you can see there's some trial and error involved but that's how you can manipulate the parallax effect with speeds and cropping image sizes and to get it just perfect you might have to do some trial and error unfortunately now take this one step further you may want to have some text overlaid on this background and that will actually change a lot of things but first I'm going to change it back from 4 to 1.7 in here because I want to have more of the background visible 1.75 actually click on this little plus icon we're going to add a custom heading by clicking on the yellow custom heading option here kind of keeps their demo text in there like this I'm going to text align this to Center I'm not going to change any font sizes or colors to actually change the color to a white so it stands out better and then click on Save Changes now I'm going to click on a little plus right here to make sure that the content add now is going to stay within that same row so it's still above the parallax then click on text block I'm going to keep the text how it is and just Center it click on Save Changes and then click on update for I should change the color of that text that's okay go ahead here refresh this page and now we have a parallax background with the heading on it and the text in the background and we set the padding to be 250 earlier and that's 250 above and below the elements that are in the background or in that row so 250 above the headline is how much we have in 2050 below we can go back in and change there very easily to get the the ratios that you want by going back to the design options for the row and it can change the top to 150 keep the bottom the same maybe that'll look a little bit better click on update refresh this page again and I think it looks a bit better having that closer to the top and that's how we can add anything overtop of parallax background there's a couple options we didn't cover specifically if we go back into the row settings there are two options or this first one a stretch row the stretch row and content I'll show you what that looks like it's probably not how you want it so currently this text and these text blocks are within the frame of where all the other content on the website is if you choose stretch background and row good refresh this page is going to stretch the background right to the edges so you see the text goes right up to the edge there's still some padding on the sides but it's much wider than the actual content of the page which ends you see this horizontal rule down at the bottom that is where the content of the page that's the width of the con the page this goes beyond that because we chose the stretch background and content option if we choose the one that has no padding it's going to put it right up on the edge so currently we have this text that ends right here there's some padding on the edge we chose the option with no padding if we refresh this page that text is going to go right as far as the can of the edge and that was as far as I can go on your theme I might actually put it right to the edge of the browser depending on what your theme is set up to do and that is the stuff we can add and like I said we can add anything to overlay on this parallax background now you can add button you can add opt-in forms you can add other pictures whatever you want as you know visual composer is a premium plug-in which you can buy some code Kenna net if you buy it through the link below I get a couple percentage of the purchase price there's no extra cost to you but what I'm going to send to you if you buy to that link is my complete visual composer course for free because basically I'm being paid by a visual composer instead of paid by you so I'm going to give you that course for free all you have to do is send me the receipt after you purchase visual composer and I will get you access to that course if you have a theme that has visual composer so you will actually buy the plug-in you won't have access to the template library and a couple other features but I will give you a heavy discount for the visual composer course if you have a theme that has a visual composer so if that's the case is send me an email at Bjorn at WP Learning Lab comm say you have such a such a theme with visual composer and I will send me the discount information so the next step is go ahead click below buy visual composer send me the receipt learn all about it in my complete course and start building awesome stuff with visual composer and that's how we create the parallax effect in visual composer it's really simple you do that once or twice feel but memorize and you'll be able to do it in your sleep which is pretty cool I hope this video helps you if you have any questions or comments please leave them down below the video you haven't done so yet hit subscribe then hit the bell notification icon so you don't miss anything and next step is click in one of these videos to learn even more about WordPress or just carry on in this playlist and learn all about visual composer until next time keep crushing with WordPress and I will see you in the next video

3 thoughts on “Visual Composer Parallax Effect – Parallax Made Easy Without Code – Visual Composer Tutorials Part 4

  1. hi bro, plz make a tutorial on how to make a full wordpress website using wpbakery Which is i see other ppl don't have/do it yet.

  2. Thanks Bjorn! Of all of the tutorials that are 'out there', yours cover the things that I want to learn. Very helpful.

Leave a Reply

Your email address will not be published. Required fields are marked *