Divi Feature Update LIVE - Divi position options

hello everyone and welcome to the DV feature update live today I have another exciting update for DV but before we get started please let me know if you can hear me loud and clear so that we get off to a very good start so please let me know in the comments box below and today we are live-streaming both on Facebook and also on YouTube and I can already see here that quite a lot of you are already tuning in this is fantastic we have George a ghonte from Berlin awesome good to see you uncle social good to see you too mr. intellectual Wow cool name awesome awesome awesome um let me just take a look here at Facebook and make sure everything is working okay on Facebook okay I can see we streaming live on Facebook but no one has commented yet okay so today we are talking about the DV position options now this feature is really really good especially for people like me who type very slow and I'm not really a fan of using CSS so this will pretty much resolve you know our issues when it comes to positioning because now we don't have to really rely on CSS to position all our elements on the screen because now we can do it with this brand new feature called Divi position options right so George is from Cyprus awesome right I think this is the first time we've actually had someone from Cyprus really cool Karim good to see you as well alright so let's get started let me show you how we can use this brand new feature so what I'm gonna do is I'm just gonna start off by just working on a premade layout that way I don't have to do a lot of work deciding because really on this show I want to show you how to use these features rather than you know go through the whole design process and if you also have any questions please you leave your questions in the comments box below alright so let's take a look this now so right now as you can see this is a layout that I just pulled out from our pre-made layouts so if I scroll here let's see pretty much we have all the elements that we need is I haven't done much to it now if you want to get these Divi position options you need to make sure you upload your updates to the latest DV so to do that you just need to go into your dashboard and click on update and that should refresh and give you the latest update for Divi so this is the update that will have all these features that we're going to be talking about today all right so what I'm gonna do now is I'm just gonna head over here straight to my layout so in order for you to see these position options and in fact you know what when I watched next video I could not even find out I could not find where these Divi positions were so let me show you how to find them so this position this position options can be found on headers foot or on headers they can be found on sections rows and modules okay so let's let me just show you where they are so let me start off with the sections here so if I come over here to the gear icon to my settings to get these position options you need to come all the way here to advanced click on position and this is where they are so you can see here we have relative if you click on this drop down you have default relative absolute and fixed now for those of you who are familiar with CSS you know exactly what all these are but just to give you a quick description fixed and abs fixed an absolute can be used freely without disrupting elements around them so that's what our fixed positioning does and absolute positioning do not remain fixed when scrolling so absolute position can be you know put here but it won't be fixed when scrolling so pretty much it goes with how you'll be scrolling on the page alright so so this is where they are you can choose let's say absolute and now this will give you all your positioning so you can see here we have all these positions that you can use as your anchor points okay if I come over here to fix the same thing you can be fixed here and you can choose where to fix this so you can see all these different positions here now we also have vertical offset offset and horizontal offset now this is a very important because you can go in and you know do some some tweaks here to make sure everything is positioned the way you want it so again this this is an additional feature that we didn't have before so back over here I'm just gonna put this back default okay and save now I want to show you one practical use of these DV positions but this time I'm going to be using the theme builder so I'm sure some of you have designed some headers on your DV website and you wanted it to stay on the top while you scroll right so basically this is making it fixed so to do that we would have to use some CSS CSS code so I want to show you now how to use this feature to have our header fixed so let me show you how alright so I'm gonna switch over here now in fact let me just save this page hopefully this is on my home page I think it is okay let's save this page so I'm gonna go now into my dashboard I'm gonna come all the way down here to our theme builder click on theme builder so you can see here I have a basic header in fact let me just show you what it looks like so here we go so this is our header it's the basic header if I scroll you can see it's not fixed it's just disappearing away in the top there so that's not what we want we want this header to be fixed so that's what we're gonna do now without Divi position options now before I go into this for those of you that are just joining us this is the Divi feature update live this is a show where we talk about the latest features go through how these features work and you know take some Q&A and show you how to use these creatively on your designs all right and also before I forget we are going to be this is going to be on our Facebook and YouTube so you can always watch it watch this at a later stage stage so if you miss this you can just go back and watch it again alright so over here now I'm in my theme builder so in the team builder here I'm just gonna click here on just this pencil icon and then I can now go in and edit this so this is actually really cool because we can actually use this feature in the theme builder as well so you can imagine how what you can do with this you can have opt-in forms you can have so much in with these position options in our theme builder as well all right so here is our header so to make it fixed all I have to do is to come over here click on my section settings advanced position and then I'm gonna go and select fixed and we want this fixed to the top save this save the page and now I am going to exit out of here and pretty much just save all changes now if I come to my main page here I want to refresh this so now let's see if this is now fixed so I'm gonna start scrolling now so now just by a few clicks you can see now my header is now fixed how cool is that so this is how you can use this these position options to make your headers fixed so no more CSS all you have to do is to go into this main feature make sure you header is fixed and boom done okay right I'm just taking a look here and making sure that we have any questions so so far no questions interesting right oh we also have a few people joining us here on Facebook as well we have Terry Pradeep Casey we also have Evo from Bulgaria Alvin from the Philippines also andrea also Flom from florence italy excellent excellent so any questions so far on what I've done with the position options on the header please let me know if you have any questions okay so let's switch back over here and right Dwayne says uncle so you're funny uncle ocean say is this bubble shop isn't going to get much business from oh right Dwayne says I have a question all right what's the question here from Dwayne well I haven't seen the question yet anyway so uncle social says here would be a good use for this to be to be a fixed footer on mobile yes absolutely so you can be very very creative with this feature it's really really awesome all right so let's go ahead now and let me show you other things that you can also do here with this feature all right so what I'm gonna do now is I'm going to go in and work say for example on a on a banner so head over here enable builder right so let's just build a banner quickly here so I'm just gonna come over here regular section okay so let's add a text module so I'm just going to do this you know really fast and let's say this is a banner okay so let's say this is our banner ad in fact you know what we might as well add in a call to action here as well so we can add a button in here if we need to let's go ahead and choose our button and we are going to align this to the left okay great so let's say this is our banner and we need to show this on our website so if we drag this up here to the top okay there we go so we have our banner up there so you can see here as I'm scrolling it's disappearing right there at the top so if we want our banner ads to stay up there in fact you know what let me make this look a bit realistic by just going in alright I just need to go into my wireframe mode here right so let's say 20 percent discount here percent discount if you sign up that's gonna be our message right there so let's save that and let's switch back over here in fact let me go into my section settings here and let's switch to the front-end editor now I'm gonna give this a color or maybe you should just leave it like that okay so let's say now you want this to stay at the top so and people come to your website they can see this banner this is a one-off thing okay so you come over here to advanced position and again we can use fixed and then this is gonna be fixed at the top okay I think I've done something wrong here let's have a look okay so let's go to your position okay so there it is it's fixed here on the top of the problem is I just need to go into the header and give this some padding below so that this shows correctly but basically once you have your banner up there and you start scrolling that should be fixed in that position but you know what I have to do a bit more tinkering around with this header to make sure this shows here on the bottom but pretty much that's how that's how you do it so let me show you something here quickly that you can also do in fact you know what let me go ahead and delete that it's not making our layout look great so let's get rid of it okay so let's say you want to reposition items on your page let me just show you quickly how you can do that now when I first started using this it was a bit confusing because I could not see the the draggable the the draggable handles over here so for those to show let's go into a module here image module here now if I come over here to advanced click on position I can now go to my positioning and you can see here I have my offset origin so I can actually go in and start moving this so you can see here I've just moved this minus 54 I can move this to the left as well now here's the thing once you've done this right so once you've activated this on this image if I close it you notice now when I put my mouse over here we have this draggable handles here so now I can move it into position like that but you have to first go in and and activate the positions so you can see now I can drag this around now if I do the same over here if I just mouse over this area here you notice that that handle is not there now let me do it one more time so if I go back here into my image click advanced position and so I go to relative and let's say I just move this up here just a little bit okay if I save that now it now has a handle pretty cool so now I can move this and create a collage see here so I can be precise with this now the really cool thing about this as well is I can actually go in and also adjust my position in the different mobile views so I want to go back over here to module settings advanced position now notice when I come over here now on my vertical offset I can go in and here on the desktop is minus 50 and if I go to tablet it's gonna come back over here to my images here we are so it's this image here that I'm working on so you can see here I can really customize this so I can maybe bring it down a little bit and make sure it's not covering the top image and then I can also do the same on the phone and then on the phone here you can see it is in position so I can pretty much go in and make a further adjustments and make sure that this the positioning looks really really cool on all devices now let's do this one more time on this image here so again if I click here on my gear icon come over here to advanced position and this time I want to work on my horizontal offset so if I click here go into tablet just need to make sure I'm working on the right item so here we go so let's say I want to cover that gap over here to the right so I can just drag it like that if I now need to move it over here vertically I can also come in here and position this so you can see how precise I can go in and really make my layouts work for me so again on the tablet here if I'm not happy with the way it's looking here I can just play around here with my positioning and maybe I would like this to be I mean to cover pretty much everything it's at zero here and for the vertical I can also adjust that set this to zero so pretty much this is how you can play around with these different screen sizes okay so there we go so you can create all these different collages but the main thing is if you try to come here onto an image and hope through see these draggable corners here you won't be able to see and until you actually go in and start playing around with it okay so let's take a look here alright I'm just taking a look at the questions here flying people I haven't really looked at the the gallery module but it's something that we can take a look now and see if we can play around with this in the gallery module okay so what I'm going to do in fact you know what let me just take a look here at Facebook and see if we have any questions Edward says can I select multiple images to go on the advanced mode to go to the advanced mode I don't think you can select multiple images let me have a look so no I don't think multiple images work you have to do them one by one so I don't think multiple images work okay now why don't we do another example here so what I'm gonna do here is I'm gonna work with this contact form so I want this form to be fixed over here to the bottom so when people scroll on the page this message here is going to be you know pretty much you know available every time they scroll so what I'm gonna do is I'm gonna come over here and give this a background so let's just give this a okay let's see what background room can use here okay let's go with this so I'm not gonna highly customized this because we want this to be more for a design thing but rather to show you all these features okay let's give this some padding there we go all right so you've got some padding here and I also think what we can do here is to okay there we go so now let's go in and make a few adjustments here on the form because we can't really see the forms here so let's go to the fields right so let's just go to the borders now okay so here is our border okay there we go so now we have our form so let's say we want this form to be fixed on the bottom there so I'm gonna click here on my gear icon go to advanced position so here I'm gonna have it fixed but I want to have it fixed bottom left so now you can see when I scroll it is now fixed on the bottom now there is something happening here and I'm sure you can see it now as I'm scrolling you notice that this item here is on top of my image so this can be obviously a problem because it is covering our form so you can see all these elements here are covering our form as I'm scrolling through this and this is not really really good so what we can do with this is we can actually adjust this and use our z-index knobs that index is important because it allows us to prioritize what item is on the top as people are taking a look at your website so think about it as layers so your set index is so the higher the number you add on there it's gonna be the uppermost top item on the page so let's work with that so right now you can see my set index here is set to zero okay so notice what happens when I scroll okay in fact let's choose this black item here or this very dark item here above our contact form so what I can actually do here is I can drag this Z index all the way up okay so let's see you let strange this is not working I think I've done something wrong here okay the offset is working okay let me just double check one thing here okay so I think I need to go into my wife remote right this is strange that my z-index is not working I'm not sure if it's to do with let's have a look here maybe I need to have it in its own section let's see how that works drag this over here okay right so what I've done here is I've just added this it needs own section because before it was in it was within another section so that's why I'm I said Index wasn't working so as you can see here it is above so if I go back over here now to Advanced tab position and here now my Z index rule you know pretty much work but you can see as I'm dragging this if I go to let's say a - it pretty much goes behind all these other items that are on this page so let's say let's say we set it to about 63 in fact this is gonna be you know pretty much above everything so here's another thing I need to show you so as you can see here we can also play around with the vertical and horizontal offset so let's say you want to move it away from the edge a little bit so you can just drag this a little bit like that and you can see here it's moving so let's say I want to position it just like that and then on the vertical vertical offset as well I could just drag this and maybe I want to have it slightly above just like that I can just leave it there and also as you can see this form is way too big of course it's gonna be covering quite a lot of information here what we can ask we'll also do is to go into this form and play around with the sizing so over here we can you know just the the form size so you can see here I can make it smaller or we can go into the actual row settings and set our sizing over here and adjust our width so now you can see our form is nice and small so you can further go in and customize you know the height and the padding within within this these fields so we can make it nice and small there like that and as I mentioned before you can actually position this wherever you want so as you can see now as I am scrolling here it is actually positioned right there so one other use case you can actually do with this is you could actually have your social media icons floating over here on the edge as people are you know using the website so you can see here quickly I was able to go in and make it fixed but the positioning you just have to make sure that when you use your z-index it is pretty much on the uppermost so that this is not covered by any item there okay so let me just take a look here and see if we have any questions [Music] Robin says I think you ran into a bug yes it's possible that it could be a bug that caused this not to show because that's actually weird when I was playing around with it before it was working okay okay say is how we use it in in header I think I've demonstrated that how I mean how to use that in the header in fact you know what let me just show you quickly what else you can do here with these headers in terms of the positioning so I'm gonna go back over here to my dashboard go into Divi theme builder so let's say you want to have this header all the way at the bottom so you can just go to Advanced position and you can have this you know all the way at the bottom here don't know why you would want to do that but let's see if that works okay let's close this and open in a new tab so there you go so you can see now our header is now fixed over here at the bottom but of course that's not where the way you want to have your header on your website but I'm just demonstrating the fact that you can have this fixed pretty much anywhere you want right there is also one more item I need to show you here okay there we go so I'm just gonna go and take this back to the top fixed to the top save that now everything is back to normal okay so if you're just joining us this is the Divi feature update live a show where we cover the latest DVD features go into detail do some experimentation and show you how you can creatively use this in your own designs also this is Q&A it's live so if you have any questions you can ask the questions in the comments box below and I'll do my best to respond to them but of course I don't know everything so I'll just do my best ok is it possible to put the menu on the side yes I think it's possible so let's try and do that ok that's that's a that's a challenge I haven't done this before but you know sometimes when I'm on this live live stream I like doing things that I haven't done before okay so let's try and create a menu and have it on the side so I'm just trying to think here how can I have it okay let's add a new sin abled official builder here okay so let's add a brand new set of brand new section come over here okay single column let's add our menu here so if we wanted to have this menu over to the side let's see if we can position this okay so there we go on the top you can see there it's now fixed let's put it in the middle so now that we have it like that we can go in and adjust listen let's play around with the sizing here right so let's say this is our menu so now you can see when I scroll it stays in place but of course because of the z-index we may need to go in and fix that and this time I hope it works let's go to our position here and I'll set index I'm just gonna bump this all the way up let's have a look now yep now it's right on the top that's great so let's add a color to this so we can actually see what is happening okay so I'm just gonna add a bright color here and let's remove the background here save that right so if I save this page exit the visual builder okay so we can pretend that that's our fact that's not menu so now if I scroll you can see my menu is stuck there on the left pretty cool so yes there's a lot of creative things that you can actually do with the this latest feature the Divi position options I can also see myself using this for pretty much you know social media icons on the left I mean that's one way I could actually use that and I think it's an ankle social that also suggested that you can have fixed footers you know on mobile devices that's another way you can also use this banners you know banner you know there's so much you can do with this and the most important one is and this is what we've been getting a lot of questions before is having the header fixed now we don't have to pay some CSS code and all of that we can just use the DB position options to make sure that our header is fixed on the top Eydie says how does the menu display on mobile now on mobile you'd need to go in and pretty much adjust this on all devices just like any module that you work on you want to make sure that you're actually clicking the three views and adjusting and making sure that everything looks okay on the three on the three devices so let's just take a quick look here and see what this looks like so I'm just gonna go back in here so let's say I switch okay so now you can see it has that hamburger icon so that that's what it looks like there we go so even if I scroll it still stays there but you may want to give it a heading there to say this is a menu but that's how it looks like but how I would actually do this as well is you can see here we have this this contact form I would actually disable this on on the tablet or smartphone because as you can see it doesn't really look nice here or I can just adjust it and make sure that it's not actually on the side here but if you want to disable that you can just come over here to the advanced visibility and then just make sure that it's disabled on the tablet and the phone so now when people go to your website they will not see this in that mode same applies here to the menu if you want to get rid of the menu here on mobile devices you can just go ahead and disable this menu on these on the mobile devices just in case you don't like this so this could actually show just on a desktops but when it comes to mobile devices you can just change it and it won't show this way okay let's take a look here Rogers says can you make it pop pop out on click I think you'd need to use unclick I'm not sure you can do that but on hover effects you can make it you know expand on hover effects but on click no I don't think you can do that on click let's take a look here Alvin says is that DB 4.0 yes this is DV 4.0 but I think we're on 4.2 now yeah I think you can give me four point you let's take a look here right J Hart says is it not reasonable to work with percentage instead of pixels yes you can actually work on percentage it works better that way but of course you know as a designer you know you can choose when to you can decide when to use percentages REM and VH and so on but yes it's reasonable to use percentage I've seen that you know actually working better because it just really resizes itself much better on different devices okay let's have a look here I think I've covered quite a lot of things oh yeah it's one more thing I want to show you here and I found it quite quite interesting so let's say so let's say I head over here to this image right so let's say I go into this image here and I want to make this fixed to to the top so honest you to notice what happens right now the size is pretty much okay this is a good size but when I come over here to position and I choose let's say fixed you notice that this image just gets so massive okay and it's covering pretty much everything here on the top so you can see here that's the same image it's fixed so this pretty much takes over the whole entire screen okay so that's how the fixed position actually works it just goes ahead and covers pretty much everything and if this was absolute it just covers whatever it is in the container so it's actually inside that particular container and what's the other one relative now this is just your positioning so you can choose your of your offset position here so back over here on the fixed now you can see this imager is massive so what we can do is we can come back over here to sizing and adjust its width oops that's strange oh there we go so you can adjust its width here until you are happy with the size of this image but that is what happens when you use fixed so just bear that in mind it was something that came as a shock when I was playing around with this I was like oh wow this is just pretty much taken over everything what the hell is going on here but yet you just have to play around here with the width and this will pretty much you know fix you issue and now when you scroll you can see there that it is fixed on the top there but the really cool feature that I like here about the images is creating these collages it's really really cool you can just move these around you know and have these pretty much anywhere on your page so this is really really cool so this just pretty much breaks away from the normal you know when you use sections and rows everything is pretty much in a straight line and it's yeah kind of boring because that's how most websites are but with this new feature now the Divi position options you can actually rearrange things and just position them wherever you are creating amazing or unique layouts so I think this is really really cool and I suggest that you try it out but just remember when you use this you need to make sure you go into the mobile view and the tablet view to make sure everything is tweaked and everything is looking ok alright so before I go let me know if you like this feature by adding once if you don't like it please add some tools and let us know why you don't like it so please go ahead and do that in the comments box I'm curious to see if this is a feature that you that you like uncle social says this update makes me nervous there there are now so many ways to make websites that's really ugly you know what I agree if you if you're a designer and you don't know what you're doing yes this can really really make things go crazy but yeah if you know you layout you know your your your layout structures and you know how to position things correctly I think this gives us more power to create unique looking websites Robin says I think you should use this feature when your general layout is in place on some elements not create your whole website this way I absolutely agree you shouldn't go crazy with positioning things and making collages everywhere all over the place to be honest that would just make the website look messy so just use it you know with caution but don't just go you know crazy with it otherwise you know the website is going to look very very messy so I agree with that I can see a lot of ones here okay I can see a lot of ones here awesome awesome awesome so awesome right this is really cool get piano lessons days if I understand correctly you are currently making alterations to a pre-designed layout theme yes that's correct I am making all these alterations on a pre-made out oh yeah part of the question is but if you want to design a website from scratch would you need to use the the Divi Builder theme yes if you want to design the website from scratch you just use the Builder in fact let me show you quickly here so it is not confusing so right now I used a premade layout as we just mentioned so if I delete this and let's say I want to start building my website from scratch I can now go in and let's say for example here I need to add a full width for with header for example so this is how I would be designing this absolutely from scratch so let's say I come over here to design layout I make it fullscreen and let's say I can add my text in here I can also add a background image so you can see here this is how I would actually build this you know from scratch just like that so you can actually use pre-made layouts or you can design this from scratch yourself but of course if you if you want to save time you can just use pre-made layouts and then just change the font colors font sizes fonts themselves and also the images right let's have a look here Duane says can I put a video in the full width header you can add it yes you can also put a video in the no hang on in the full width header you can add a video background not a video in the full width header no in fact let me just be sure let me just double check no you can't add a video in the full-width header no you can't okay but you can add a video background Dewayne yes the video background is mainly used as a design elements you don't want to make it a video that people actually go in and watch because it's gonna take a lot of bandwidth on your site because remember the video background is actually hosted on your website so you have to upload that short clip and then add it as it for your background so you don't want to be it won't be playing any video at me only it won't be playing any sound and it's also advisable not to add a long video it'll make your website really really slow if you want to add a video in a in a in a section you may want to just add a regular so you just go in head add a regular section and then just add your video that way so let's say where it's all video module here okay there we go that's our video module so now if you want your video to pretty much cover the whole page you just have to go in here now and play around with your sizing change your gutter with make this full width this one here can be also hundred-percent and pretty much now you have a video that covers the whole section and yeah so that's how you would do it so I know I'm digressing here but pretty much that's how you would do it okay take a look here to see if there's any more questions but the owl says can you make a video from scratch on how to add product filter on shop page I think we will be able to do this on other videos in fact I may have done this already so I can give you some pointers to where you can actually find that tutorial but this one here is mainly talking about our main Divi feature Divi position options alright guys I think this does it for our live stream today thank you very much for watching and if you don't forget to hit the subscribe button and also the like button button if you like this livestream please do it before you leave and also for those of you that joined us late please you can go ahead and watch the replay of this life on our Facebook and also on our YouTube page alright so once again thank you very much for tuning in really appreciate your time if you still have any more questions please leave your questions in the comments box below and I'll do my best to respond to those questions alright guys have a great week take care and I will see you soon hopefully next week we can have another TV feature update live I really like these lives and hopefully we are going to have another life alright guys take care and I'll see you again soon take a

Channel: Elegant Themes

Views: 4,976

Keywords: divi position options, Divi Theme Tutorial, Divi Builder Tutorial, Divi 4.0 Tutorial, Divi Tutorial, Divi Builder

Id: 6KabrOOrscI

Length: 51min 39sec (3099 seconds)

Published: Mon Jan 20 2020