Divi theme video background

hello everyone and welcome in yesterday's video I did a tutorial showing you how to create this landing page in fact let me just show you what it looks like so this is the landing page that I created now these images that you see on this landing page I took them with my iPhone and as I mentioned in the video I will giving I'll be giving away this layout absolutely free so you can just go to the link download it and you can just add it on to your website so what I'm going to be doing today I'll be doing something a bit different so if you take a look here you notice that we have this video background so this is what I'm gonna be showing you how to do today now for this I used my iPhone in fact to be honest it was quite straightforward I just took my phone and I was just recording the video while I was shooting different angles on this mixer and to be honest I'm pretty much pleased with what I found here so this result here what I did was when I got these images I then went into an editing software like DaVinci Resolve or Adobe Premiere or iMovie so that's where you can just stitch these images together but in this case I didn't want this to be very very long so I just made about three videos but the idea here is just to show you that you can also become creative with adding video backgrounds onto your product pages so let me show you how I was able to do this so what I'm going to do now is I'm just going to enable the visual builder here and just work and add on top of what I created before so over here we noticed that we have this background let's go ahead and delete it okay so I'm gonna go ahead and delete that so pretty much this is what we have so to make things easier for us what I'm gonna do here is I'm going to duplicate this background okay so I'm gonna come over here click on duplicate section and now we have two of these so what I'm going to be doing now is I'm gonna be working on the top one so I'm gonna go here into my section settings so what we want to do here is to come to the background and we notice here that we have this background image which is cool because that's what we added now what we need to do to to add our video is to come over here to do to this fourth tab now before we do that ideally what you want to do is to decide what you're going to have so let's say on the desktop you want to have the video playing but on a mobile you want to have an image you can actually make those changes right here using this little icon so let me just show you so this is the icon you want to click on and you can see now we have amazing editing capabilities here on the desktop tablet and phone so we can assign even different images if we need to on these different views now by the way before I forget if you if you enjoy using Divi or you'd like to use Divi for your web design projects in fact it is a very good decision because I've used evie for quite a long time now they have excellent features being added onto it it's fantastic now I have a bonus for you if you buy Divi using my affiliate link I will give you access to the Divi blueprint course which teaches you further how to use TV and also hard to create professional-looking website using Divi all right so all you have to do is to click the link in the video description below and you'll be able to access that course all right so what I'm gonna do now is I'm going to make sure that on my desktop tab I'm going to add a video so I'm going to come over here click this plus button to add your video now as you can see I have my video already uploaded as I mentioned before I recorded this video and after recording it I went into DaVinci Resolve it's a free editing software you're going to DaVinci Resolve and then you can just add those clips together and then export it as one single video so this is what I did and this is the video that we have here so if you want to upload it you can just come over here to upload files select files and then you can just navigate to your folder where that video is and here it is I'm going to double click on it and it's going to be loaded one more time alright so now that I have this all I have to do now is to click on upload video but before I do that look look at the size here this size is quite small it's only 23 Meg so you want to make sure you're not using a file that is massive because that's gonna slow down your website now there's one workaround when it comes to a file that is really big so what you can do is once you've saved your video and it's on your desktop from your editing software all you have to do is to upload it to like let's say YouTube set your video to private and then you want to download it back to your desktop now the reason why you do that is because every time you upload a video to YouTube what YouTube does is it they compress the video to a size which is reasonable to view so that size will probably be half of what we have right now and that's the video file that you want to use on your website so that's one way to do it but of course in this case my video file is pretty small so I just went on and uploaded it alright so now with my video selected I'm just gonna click upload a video and you can see here playing back and now it's playing back here alright so now I'm just going to click here to save because there's very little that you can do once you load this video on on your section alright so now that we have this video on there the next stage now is to take a look at this text so as you can see now this text is not very easy to read because we have a moving background and also the text is white so ideally you want to add a dark background to this text to make it easier to read alright so how do we do that so that's what I'm about to show you so what you want to do is to first of all come over here to your row settings and you want to click on this plus button to add a new column okay so if I go back over here you notice that we have two columns side-by-side so this one here we're going to leave it empty okay and then we're gonna save so now you can see we have two columns one is here and one is there but of course we're not done yet because we need to now add the background color to and add a bit of transparency to make it easier to read when people land on this page all right so what I'm gonna do now is to go back into my row settings and I want to come over here to my first column because this is the column that has all this information so I'm gonna click here and then you want to come over here to design and then you want to go to spacing so what we're going to do here is to add some padding so I'm just gonna add let's say 20 pixels top bottom left right okay so what I've just what I've done here is to add a bit of padding around this now of course we may not see yet because there is no color and there's nothing really to help us see what is going on in the background so this is where now we want to go in and add our background all right so over here I'm just gonna go back to my content click on background and let's add our background color so my color here is going to be black so I'm going to make sure I drag this all the way down to the bottom corner here and now you can see that this is black selected and it looks really good now just looking at this it looks like the black is just a bit too much so you can actually add a bit of transparency here by just clicking back over here and dragging this slider here on the right and then you can see as I'm dragging this I'm getting a bit of transparency there you see that and that is really really cool okay so I think I'm happy with that so now I can save this and save one more time okay so now we have a bit of a problem here with our design so as you can see here this text is has with which I adjusted in the previous design so let's go in and fix that so I'm gonna come over here to my module settings design sizing so you can see here my width is set to 50% let's bring it back over here to 100% okay so now it's taking the majority of this space which looks much better than what we had before all right so now that we have this all said I'm gonna save this and pretty much this is how our design looks like so as you can see it's much easier to read on on this on this video background and the video background is well continues to play which is great so pretty much this is how you can play around with different designs for your hero images now I just want to show you something very quickly here so if I go back here to my to my section settings background now here on the tablet I can actually go in here and delete the video okay so basically what I'm doing here is to say okay you know what for the tablet I do not want a video background to be on this on this background because maybe because of speed post video takes a lot of bandwidths or maybe on desktops it's fine because most people have the desktops have very good internet connections but when you're out and about it may be a different case so this is where you can set a specific design or graphic to your mobile device all right so let's switch back over here so I've deleted the video here for the tablet and what we can also do is we can also go and remove this background here from the tablet because there's no point of having this dark background here so let's go to the phone as well so you can see here on the phone the video is deleted but of course you can try it out in fact you know what the funny thing is when I try this the video is actually showing on mobile devices so I'm not sure if this was a silent release from TV to show videos now on mobile devices in the few in the previous updates I haven't seen anything about it but it's something that I'll definitely confirm and see if the videos are now playing on the mobile devices and if you've tried it out and it plays please let us know in the video description below all right so over here now on the phone it's good if I click here you can see we have an image that's why this image is showing okay so now let's fix this issue here because this background does not look great and also this text does not look great here so I'm gonna save here because in fact let's go back to the desktop and just make sure our video is there and here it is it's playing ok so I'm gonna save that and now I'm gonna come back over here to my row settings and then go into my column click on design in fact we need to go to background only alright so over here if you want to remove the background on the other devices all you have to do is to click here on this little icon go on the tablet and then you want to delete this background on the tablet and then go to the phone as well and that's deleted ok but if you go on the desktop of course it's still there so that is how you resolve this so now I can save this save this one more time and now if I go into this different views you can see here we don't have that background that we had and if I go now to the phone there's an image and this is looking cool but you know what there's one really annoying thing here you can see here on this description text here it's gone the G has gone on to the second line let's fix that because to be honest it doesn't look great alright so let's come over here to our design tab and this is the heading text so make sure if this is the heading so what you want to do is to go specifically to the heading text size and while here you're on the phone tab you want to make sure you just drag it until it's all showing there you can also Center it to make things look much better and then on the tablets you want to do the same thing perhaps here we can actually increase besides a little bit to about 56 make sure it's centered and then on the desktop it is fine where it is now a few tweaks that we met we may also want to do let me just save this and let's go to our desktop view what you may also want to do is to make sure that this text here is centered on mobile devices so I'm gonna come over here to my module settings design text so here all I have to do is to come over here to this little icon click on the tablet tab and then on the text alignment here I'm gonna make sure on the tablet it's centered and then on the phone it's centered as well which is great and then finally we need to Center the button so let's save our design here go to the button then click on design alignment and then click here on this little icon click on tablet and then just make sure that this is centered on the tablet and also centered on the phone excellent so pretty much this is how you design and add background images so right now I've just saved this design and then I just need to click on exit visual builder and pretty much this is our hero video so as you can see this was very straightforward to do make sure that you're using a small video size you don't use a massive size because that will lag and make your website slow so pretty much this is how you do it so you can actually make your product landing pages even more awesome by adding video backgrounds now before I conclude this video I want to remind you that if you buy DV using my affiliate link I will give you access to my DV blueprint 3 course the link to that is in the video description below just drop me an email and let me know once you've bought it and I'll give you access to my course alright guys thank you very much for watching if you like this video give me a thumbs up and don't forget to hit the subscribe button so that you get notified every time I release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: MAK

Views: 21,815

Keywords: How to make business website with wordpress and divi, Augustine mak, divi 3.0 course, divi 3.0 training, divi 3.0 theme tutorial, WordPress website tutorial

Id: aecT8KRQLa4

Length: 15min 46sec (946 seconds)

Published: Fri Sep 13 2019