Divi Theme Full Width Automated Parallax Slider 👍👍👍

hi guys and welcome to another divi video this is jamie from system 22 and web design and techtips.com we had a great question uh somebody was asking how to make a full-width slider over a parallax image it's really easy to do no coding involved in this today if i roll this slider up and down you'll see it changing there but it's got a little parallax image behind it that remains the same and that's a nice little eye-catching feature like i say really easy to do no coding involved in this today so let's get started let me enable the visual builder to start on the front end now let's go down and we'll delete this section here and start again i'm gonna go down a little blue button to add a new section i'm actually going to use a full width section for this today as they wanted a full width slider and right down at the bottom you'll see full width slider now you may notice this is slightly different from a regular section you've got a limited set of modules for a full width one but this will work perfectly today for our needs okay there's our first slide right there i'm going to delete that second slide and i'm going to make my slider the height that i want it now so i'm going to go over to design come down to sizing roll on down and i'm going to go to height i'm going to roll that back till it's about the size that i want it i want a fairly skinny one so i'm going to leave it about there 379 just round that up to 380. great well as you may have noticed our little slide there at the top is not as visible it was so we need to adjust the back padding to put it where we want so let's go down to spacing just below here's padding right there i'm going to put a zero in that should bring it all the way up to the top and there it is right there so let's take it down i'm gonna give it say 75 see what that looks like yeah i think that's going to work for me adjust yours accordingly and when we've put more slides in you're going to have a some navigation dots right about there if you choose to show them okay that's kind of the size we want now to create the effect that we actually want to use i'm going to remove the background from here so it'll disappear white on white and i'm going to put a parallax image in the actual section that it's sitting in so let's do that i'm going to go back to the content i'm going to go into the slide itself i'm going to roll down and i'm going to take the background away great let's just say that now let's go into our section and add the image that we want to add for the parallax background and hit the little cog go in there i'm going to go to background i'm gonna go over the image you've got color gradient image or video let's add a background image and i believe that's the one i used before great well that works pretty well for me but just below i want to use the parallax effect and if we just roll down a little bit this is actually two parallax which will just move slightly this is real parallax really because you've got two things moving at slightly different speeds there which is the definition of parallax pretty much but for more drama i'm going to switch it to what they call css parallax and to me that's really fixed background because if we look at this image in the background it stays where it is but that's pretty dramatic and i like that so i'm going to use that on mine today use whichever parallax version you wish so that works quite well it's the size we want it we've got the parallax image in there so let's add some more slides and get it automated so we'll save our section settings let's go back into our actual slider here dark tab for the module and i'm simply going to clone this one i won't edit that one but i'll show you how to edit the next one i'm going to hit the two little squares to edit it let's go in there now here's our second slide obviously you want to change your title change your button text down here and down below obviously your content and text you want to change it here just like any text module you can add links bold italicized there's your links right there justify how you wish turn things from paragraph text into headings if you want to but i'm going to leave mine just like that if you want to you can add images and video here i'm not going to because that looks quite clean to me but if we look inside there if you want to add an image just hit the plus to add an image if you want to add a little video which usually will be on the left by default i'll just pop one in just so you can see i'm going to take it away though afterwards let's put these may be way too big just for an example as you can see the image is in there we'd have to adjust it to bring it up in line with ours or for products and things that would be quite a nice little effect to have it bleeding out into the next section below but as i mentioned i'm not going to use an image for mine okay let's move on down link this is pretty important if you've got a button going on this is where you want to put your link where it is you want to take your visitors when they click on it now if you want the whole slide itself or slider module to take people somewhere put your link in there always best practice if you're linking to your own site leave it in the same window if you're linking off site open it in a new tab so that your site stays open okay well we've got two slides going on there when you're happy with your second slide just hit the check mark and we'll save our changes and that takes us back to the main full width slider here okay well we're going to want to automate this obviously you can add as many slides as you want here no point me adding more so to automate it let's go over to our design and right down at the bottom there you're gonna find animation hit animation automatic animation let's turn that to on now it'll roll around the slides every second seven seconds i'm going to change mine to five seconds which would be 5000 milliseconds now continue automatic slide on hover by default that's set to off what that means is if you put your mouse over it when we're on the front end it'll actually stop rotating so people can read the slide and give them the chance to hit the button if you want it to continue rotating every five seconds even when the mouse is on it you can switch that to on and i'll just add here we've made sliders in the past and the question always comes up somebody says i haven't got the automatic animation on mine i can't find it chances are if that's the case let's just save this if i go back into this module here chances are if you can't find that you're in one of your slides rather than the main element so make sure you're in full width slider settings design down to animation there it is right there if i go back to the content there if you're still in one of your slides and you go to design there's no animation or transform there and that question comes up quite a lot so just make sure you're in the main full width slider settings and you'll find that all right we're pretty much good to go and have a look at the front end there's our little slider as we roll up the page it's got that fixed background or parallax background which works for me every five seconds let's roll down a bit it's gonna roll around there we go there's the next one right there when you put your mouse on it it should actually stop and you've got navigation arrows left and right and there's the actual pagination dots at the bottom there now one thing you might have trouble with if you've got an image that's pretty busy this one's not too bad but if we roll down where it's busy like that some of the content can get lost in there we can put a an opaque background in one of our slides if you're having a trouble like that that's really easy to do so let's just demo that and i'll show you you can also change the design of your navigation labels as well so let's enable this again and let's roll on down and we'll go back in there we're actually going to go back into the slides and i'm just on this first one i think we're looking at the second one there but on the first one let's go in there go to the background i'm going to put a black in i'm gonna left click on the field right hand slider here is opacity or transparency we'll see through this i'm gonna take that down so we can read our writing well but see some of the image behind let's get it down to a real busy section take that up a bit that's better you can see everything there let's roll up the page now i'll graze it out a little bit that's absolutely fine if you're having trouble reading your content that's what you do just simply put a opaque background in whichever slide you're having trouble with now if you decide you need all of your slides you can do it to the first one save your changes go back up and you can right click on the one that you just changed extend item styles this section want to extend those styles to everything on this section and there we should have that dark background on both slides now now obviously for both slides there's not much time saving but if you had seven or eight slides that would be a real time saver and the only other thing i mentioned the pagination and the actual arrows here well that's elements we're in the main setting here let's have a look at the elements you can decide to show arrows there they are and show controls little pagination dots there turn them off if you don't want them and if you want to restyle them to your own colors simply go over to design here's navigation here's arrow color let's change that to a crazy blue or something as you can see those have changed to blue and we do the same for the dots as you can see we've got a bright blue and a dark blue bright blue representing the one that we're actually on so that's pretty much it really i hope that's answered all your questions really easy to do and these full width sliders or the slider elements itself are a great feature of the divi theme so let's save our changes here exit the visual builder roll on down and there's our full width parallax slider so i hope you've enjoyed this today and found it useful if you have please give it a thumbs up ring the bell comment share and subscribe to our youtube channel once again this has been jamie with system 22 and web designing tech tips dot com thanks for watching have a great day foreign

Channel: System 22 I.T. Solutions

Views: 186

Keywords: Divi Theme, Divi 4 Full Width Automated Parallax Slider, Divi Theme Full Width Automated Parallax Slider, Divi How To Create A Full Width Automated Parallax Slider, How To Create Full Width Automated Parallax Slider, Create A Full Width Automated Parallax Slider, Create A Parallax Slider, Add A Full Width Automated Parallax Slider, Display A Full Width Automated Parallax Slider, Full Width Automated Parallax Slidero

Id: NEQPoCVloqk

Length: 12min 42sec (762 seconds)

Published: Wed Dec 15 2021

Reddit Comments

[u/System-22]

Divi Theme Full Width Automated Parallax Slider. We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website.

Today we are going to demonstrate how to create a full width automated slider with parallax effect. It is very easy to do and is a great eye catching feature to have on your website.

There is no coding or extra plugins involved in this build today.We are going to use the inbuilt features of the Divi theme itself. Using the great Divi Full Width Slider Module.

So, follow along with the video and check out how to create a full width automated slider with parallax effect, using the great Divi theme.

For more information on the Divi theme, check out our Divi playlists below.

Full Ecommerce Site Build Playlist: https://www.youtube.com/watch?

v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Contact Form With File Upload Video: https://www.youtube.com/watch?v=DQ35gqzm674

Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw

Try out the Divi theme: https://bit.ly/TryDiviNow

Divi Supreme Modules Plugin 10% Off: https://bit.ly/DiviSupremeCoupon

Divi Brain Addons Free Plugin: https://brainaddons.com/

My Blog : https://web-design-and-tech-tips.com