How To Create Overlapping Images In WordPress Using The New Visual Composer Z-Index

How To Create Overlapping Images In WordPress Using The New Visual Composer Z-Index



in the sponsor tutorial I'm going to show you how to use visual composer and a z-index capabilities to create a really neat overlapping effect that allows you to stack images on your website and have them build on top of each other you've probably seen this effect before maybe you wondered how it works I'm going to show you how it works in this tutorial if you have any questions please leave them down in the comments below and make sure you subscribe ring the bell so you don't miss any future videos my name is bjorn all-pass 4wp learning lab and we're getting started right now this is the effect we're gonna build today this is a nice image of a GoPro camera when we scroll the image stays fixed and we have an accessory to the camera a container to put into that overlaps over top of the image and it looks like legitimately we're putting this over top of the image if no scrolling on the website there's a bit a image of sticks out up here so gonna be refined a little more but overall it's a pretty neat effect you scroll further down and we have the rest of the website appearing GoPro your adventure begins here by now scroll back up and we reveal the camera eventually and this effect relies on the ability of whatever you're using whether it's custom CSS or a page builder relies in its ability to add a z-index and it also relies on your ability to find or create images that make sense when they're overlapped for example the GoPro image makes sense when it's overlapped by the protective case that you can buy so the way we do this inside of a page builder is we have three rows we have the row for the main image we have the row for the accessory overlay and we have the row that contains our call to action the bottom of this one is optional you can fit this in in any party website you want so inside visual composer if you go to any row options list go to edit scroll down to the very bottom we have the ability to turn on or off a stickiness by default that's off and when we don't have it on we see that the image just Scrolls up and we don't have the effect so we want to be sticky we want the image to stay on the page we add a margin at the top so it's not right to the top of the page of this where zero which it is by default it sticks right to the top it's not as visually appealing so we add a bit of margin and this is important because this is the top of the page if you're building this into your site this may not be the top of the page so you may not need that margin so the Z index for this is going to be 0 because it's going to be the bottom one and the image itself is just a regular image widget I just added the image here through the media library and like I said just a regular image widget I centered the image no big deal nothing else changed the next row the accessory row everything the same just a regular image widget we just have our image here again from the media library we added that in the only difference is go to the row options and click on edit and scroll down stickiness is activated with the same margin at the top so the same distance from the top of the page the z-index is now 1 that's the big difference and if we made this a z-index of say minus 1 watch what happens it goes underneath so that's what I mean by stacked you can think of z-index as a stack of papers on your desk the paper at the bottom is a 0 and every paper above that is greater than 0 or you can also have the paper at the bottom be a minus 10 and then everything above that being higher than minus 10 or greater than minus 10 but that's a little confusing sometimes so every 4 start at 0 I just go up so this is the index of 1 and our next section our next row here the exact same settings as before only if we go to edit our Z index is now a 2 as we can see here there's no margin at the top so I wanted to go to the very top of the screen and there we go an important setting that I glossed over earlier inside the rows they all have to be full height for this example to work and this full height option is also applied to these ones here go to the row editor we see full height is on and it's on for both of those so that we have a full screen of just the image and we can scroll the additional content over top of it it's really neat effect it's not hard to do you don't see very often but it is very engaging for the end user and I find to be a pretty cool effect and again it relies on your page builders ability to use the index or custom CSS and it relies on your ability to find or create images that make sense when the overlap so if you like what you see and you want to give it a go head over to visual composer comm and then just click on download you can enter your email address it's free to download there's a pro option as with a lot of page builders but you can download the free version and you have a test drive and see if it works for you and keep in mind like I said earlier this is not the same as the old visual composer it's not the same as W baker page builder this is a brand new visual composer that's competing with Elementor breezy site origin thrive themes Divi big time page builders like that so make sure you check it out so that's how you can create scrolling and overlapping images I hope this video helps you if you haven't done so yet make sure to click Subscribe ring the bell so you don't miss any of my future videos and next up is click in this video up here which shows you how to build an entire one page website with cool parallax effects using the new visual composer and down here is the video YouTube things you should watch until next time my name is Beorn all paths and dopey learning lab keep crushing it and I will see you in the next video

4 Comments

  • WordPress Tutorials - WPLearningLab says:

    If you enjoyed this video don't forget to the like it and subscribe! Then check out this playlist all about WPBakery Page Builder: https://www.youtube.com/watch?v=WXrHuoXOxx8&list=PLlgSvQqMfii5kplgqhRsc43tCisTnfgZN

  • Ashish Salunke says:

    Hi WPLearninglab,
    I had multilingual blog and I had install Polylang plugin, now I have to implement AMP, and for multiple languages it requires extra plugin, "Polylang for AMP". So my question is that should I purchase that plugin? And If I will not install that plugin, is there any adverse effect on SEO?

  • FATOKI FEMI EMMANUEL says:

    Wonderful… Please I need the link to download visual composer.

  • Jaya Vishwakarma says:

    Hi,
    WP Learning Lab,
    I'm looking to use Sucuri for security and Cloudflare as CDN but Cloudflare also provides security feature so should I consider sucuri to buy it or I can manage with cloudflare?

Leave a Reply

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