Visual Composer: How To Create Parallax Row Backgrounds 2017

Hi and welcome to another visual composer video tutorial in this episode we’re going to be taking a look at a topic that kind of caused a little bit of confusion in the previous video that I did of this which is the parallax effect in visual composer so in this video I’m going to go over that with a refresh for the 2017 update for the latest version of visual composer we’re able to step by step with no additional themes in store we’re just using the free theme that comes with visual composer you can download from them so it’s all set up ready to work with visual composer so it’s me nothing else included in this video other than visual composer WordPress and that free theme from the developers of visual composer so let’s take a look at how we can create this power lights are sent right now so created a blank page in visual composer just put in a simple row three columns we’ve got some information on the page we’re now ready to start creating our parallax effect so we’re going to do is come down to click to create a new row add the new row in there and just position that where I want which is going to be at the top now we need to set up some of the basic parameters for the row before we put the content in there because most of the effect the parallax effect and the spacing and all that kind of stuff is primarily going to come from the row not the content that sits inside it so to do that we’re just going to click on the small icon of the edit this row icon and from there we have all of the options available for the row settings you can see we’ve got the normal design options that allows it to create margins and padding and so on we’re going to leave that for a moment let’s just take a look at the general tab you can see we’ve got the normal options to specify how this row is going to interact with the design and layout so you can see if we expand that out we’ve got default stretch row and so on well we’re going to use stretch row for this example because I don’t want the content or the no padding option to sort of take effect we’re going to say stretch the row up to the background will be full width if that’s applicable to the theme you’re using but the content will stay confined within the sort of size of the page Layout column gaps we’re not worrying too much folks we’re not doing any columns no full height or equal height or to do with columns we’re going to do a default position for this example I want the image to primarily sit at the bottom so I notice it choose bottom from thee we’re not using a video background so I leave that as is we are going to use parallax effect so we can click and take a look at the options that are available there as you can see we can choose none snow parallax effect enable we can choose one simple or with fade for this example we’re just going to choose simple from there we can now choose the image we want to set that the background to our products effects so always when you’re creating parallax effects make sure that the image using is larger than this kind of space you want to fill so you have that space that Headroom to be able to have the parallax effect take effect behind so I just gonna click on the plus so we can go to our media library and we can choose the image where you use and I’m going to choose this one I’ll I just gonna click on set image that’s now put the image in there for us ready we can now control the parallax speed in other words the speed at which the background transitions the different rate to our scrolling effect so the lower the number the smaller the amount of movement they were going to see the higher the number the greater the amount of movement again just remember that this is kind of depend upon the size of the image you work with if you have too small an image and too high a parallax speed you may find you end up losing your image as you scroll too far past it so for this example we’re going to set this to be three we’ll leave that as is I’m not going to set any CSS animation don’t need the row I and I don’t need Road ID sorry and I don’t need a disabled row so everything is set up in me the next thing I need to do for this is just make some room for the content because I only want to have a sort of title and a button so I want to have plenty of space around it for the parallax effect the image to show through and give it a nice effect so I’m going to do is going to come to the planning section and I set padding of 150 pixels top and bottom don’t need to worry about the left and the right hand side with this example click on Save Changes and we’ve now set up our parallax effect in our row so we’re now ready to put the content into this ready to move on okay so let’s add some content in it like I said we’re just going to put some text in and we’re going to put a button in the kind of thing you may want to using the simple parallax effect for so let’s just click to add some item into the actual content itself I will choose custom heading and from there we’re just going to set in some title text so we’re just going to say ooh a heading we don’t want anything to do with the URL on this we can set the element tag if we want to I’ll leave that as is and we’ll set the alignment to be centered the font size will set to something that’s enlarged like 54 pixels line height because we only got a simple line in there there’s not multiple lines I don’t need to worry too much about that or we can set the text color we want to and just for this I’ll just choose an example like a black color so next thing I can do is I can go through and choose the font that I want to use for this I’ll just say use the theme default and we can apply some animation to it so let’s just go in and choose something like let’s try fade down as you can see that gives us a little preview or that looks like I don’t need to worry about anything else at this point if I want to tweak it I can do I gotta come back in later but for now we’ll just click on Save Changes and we’ll come back in and click to add something else in and this time we’ll come in and we’ll choose a button so let’s just choose an ordinary button as part of visual composer and we’ll just check to put the text on there you say click me we’ll set a URL I’m gonna just put another link in there I’m already bothered style if we wanted to choose that we can choose we were rounded square and so on and we can set our color so let’s go for this classic red on there and let’s go for a nice large button we’re set to be centered and no we don’t we have full width button I don’t want an icon I will set some animation up let’s try and set something in this we will say I say fade up big so that comes up from the bottom so we’re going to have these meet in the middle again same with the things like the element ID and so I’m not going away with that I will go in and set some margin around this stuff so let’s just set 20 pixel margin at the top so we don’t have the text and the button to post each other it saved changes are we pretty much good to go so let’s just update that page once we updated that let’s go and take a look at what this looks like so if we come out you can see there’s our animation effects and we know all those working right the button works as you’d expect now if we scroll in the page we’ll see the background we’ll get that parallax effect so it now moves at a different rate to the rest of the page so we get that sort of pseudo depth effect in there and that’s really all there is to it when you’re working with visual composer and the parallax effect so hope you found this video useful I hope it’s clear any confusion you may have had at the previous video from last year and give you an update to the way that visual composer and the products effect works with a page layout well if you enjoyed the video please give it a thumbs up and hit that subscribe button to be kept to date with all the new content we add every single week if you any comments questions or feedback on this video please put those in the comment section below until next time take a

As found on Youtube

(Visited 3 times, 1 visits today)

About The Author

You Might Be Interested In