How To Create Parallax Row Backgrounds in Visual Composer for WordPress 2016

Welcome to peacemaker TV in today’s WordPress tutorial we’re going to be taking a look at one of visual composers great functions and that’s the ability to create power lacks effects we’re going to take a look at how we can create these how we can use them on the page that we’ve created previously that we’ve got in front of us we’re going to take a look at how we can put a color overlay we can put different elements in there and just get a little bit creative with this lovely way of making your page just looked a little bit more interesting so let’s take a look at how we can do all that right now so the page layout I’ve got in front of me is your typical kind of website you’ve got your logo section at the top navigation a nice large slider this eye-catching some information underneath that and a second level of navigation so we’re going to do is we’re going to drop in a nice parallax effect that actually uses it as a call to action to start off with so let’s take a look in the administration how we can do that and take a look at some of the options that are available to us using visual composer and the parallax effect so I’m going to switch over to the admin and as you can see you’ve got the page in front of me that we’ve just been viewing so what I’m going to do to start off with is just come down to visual composer click to add a new element and choose row and then we’re going to come in and we’re going to edit the actual row content itself so we’ll click on the arrow and they’re going to go through the different parameters to set this up to be a parallax effect so the first thing we want to do is specify that in this example I want to stretch the content to fit the entire width of the screen because we’re dealing with a full width layout second thing we’re going to do is just choose the background image and I’m going to pick something that’s just a nice large image now if you apply in an overlay to this you can get away with much lower quality images to help speed up your site because the overlay kind of masks a lot of the degradation you might find from reducing the file size down so I’m going to choose this image and I’m just going to hit set image once that’s loaded in we’re going to then move on and we’re going to specify how the image is going to be displayed so we’re going to leave this to cover the entire area I don’t want this to repeat center centers fine for this because it’ll focus on the actual horizon line which is great we can then choose the parallax effect we want to work with so you’ve got four options vertical horizontal or still the image doesn’t actually move itself so it looks like it’s just a window through to that picture behind we’re going to choose vertical parallax for this example you can reverse the effect so as you scroll down the picture Scrolls up and when as you scroll up the picture Scrolls down which is quite a good effect and I would recommend trying that I have to see how it works and if it gives a good sort of interpretation of what you were trying to achieve you can also apply a video to the background as opposed to just using a still image but we’re going to keep it simple and just use the still image for this example we’re going to enter use the background overlay which we can just choose the color chip I’m going to choose black for this but I’m going to set the Alpha or the transparency should we say don’t irrelevant 80% so that’s going to mean that a good chunk of the pictures going to show through we’re going to this dark overlay over it which allows us to put items like text and things on top of it and make it perfectly visible the next thing I’m going to do is I’m going to choose the design options and I’m just going to give this a little bit of padding so we can have a lot of empty white space in there that’s going to be filled up by the photograph that we’re going to use for the parallax effect so I’m going to set this to about 50 pixels again this is purely optional but it does give a bit more room on this particular example so that’s all I’m going to do I need nothing else to change on this I’m going to hit Save Changes that’s created the row so now we’re going to drop a couple of elements in there we’re just going to put some text in there going to court put a call-to-action button and that’s the sort of the old world effect we’re going to go for for this first example so let’s just click on the plus and we’re going to choose to put a text block in there and then we’ll just put some text in the text block and we’ll just put and then we have a call to action and we’ll just set that to be centered and we’ll just set that to heading two so it’s nice and large and I’m going to change the color of that to white which is going to work very nicely with the darker overlay that we’ve got for this particular image so we can save changes and we’ll just add another element which is going to be our call to action button so let’s just filter for the button we’ll go for that and then we’ll simply fill out the information that we want on our particular example by typing it appalling we’ll put and I still like on in this we’ll put the heart icon in there we leave it to be a solid we’re going to change it to be a white button I want the image or the button liner to be centered a large but that medium buttons fine and we’ll just put a null link in it just so it doesn’t actually go anywhere for this example we’ll say set link and that’s everything we need to do so let’s just hit Save Changes and we’ll update the page and then we’ll jump over to the the test site and we’ll take a look at this in action so we scroll down the page on our demonstration site we now have the power lapse effect as you can see as I scroll down the image in the background now moves at a different pace or different speed creating the great parallax effect and our button information and our text is nicely overlaid on that dark overlay background so you can easily come in and change that if you wanted to you could say you wanted a different color you want to change the opacity on there you could just easily come in about the row settings kind of the opacity setting and just adjust that to whatever you think is going to be right you save your changes update your page and then when you go back and refresh it those changes will then show on your page so let’s just refresh that once it’s saved I’ll take a look at the difference now we’ve adjusted that so it becomes slightly lighter so that’s all there really is to creating this great parallax effect using visual composer I hope you found this video useful I hope it’s something you can use in your own projects if you did find it useful please give it a thumbs up if you’ve got any comments or questions on this video or anything else on the channel please pop those in the comment section below we try to read everything you post and answer every question asked well until next time take care

As found on Youtube

(Visited 1 times, 1 visits today)

About The Author

You Might Be Interested In