How to Position Buttons Absolutely to Create Unique Button Layouts in Divi

well hello Debbie nation welcome to a brand-new Divi use-case livestream where each week we show you how to add new design and functionality to your Divi websites and today we're going to be showing you how to use the absolute position to position some buttons to make some creative button layouts in Divi so hopefully we'll learn something together and don't forget to check the video description for more info on this live stream blog post which there is a link to the blog post in that description so check that out and let's go ahead and get started alright so first I want to welcome everyone and make sure that you can hear me loud and clear go ahead and give me a thumbs up in the chat there hope everybody is having a great day hello Elvan from Vienna Carl hi green shorts Armando WAN alright I got a yes from one I'm assuming that's yes that you can hear me okay good good audio appreciate that I always want to make sure that you can actually hear me all right so here's a little preview guys of what we're gonna be doing today if you're familiar with Divis new position options you probably have kind of fiddled around with it a little bit but they have you know the apps ability to position elements absolutely using the absolute position element the static position which is the default also the fixed position as well and just to kind of give you a glimpse of what I'm talking about here are a few button layouts that I've used the absolute position the position buttons to accent a Divi module so here is a two column layout and there's a module here here's a Divi module here with the Divi em excuse me blurb it's actually a blurb module with a blurb in a title like that and then underneath it in the same column I have two buttons positioned absolutely here at the bottom and as you can see this is a helpful one helpful way that this kind of helps you in design is because now if I give my blurb module more text over here on the right as you can see the button stays positioned at the bottom of the column there and so you have a more consistent design and as opposed to having the button kind of sitting right underneath the text over here it wouldn't be as clean so that's just one practical layout here's a different one this one is kind of more sporadic kind of abstract positioning of buttons and also using the scale transform scale to kind of give the buttons a different size really easy using the Divi built in options there and here's a just kind of like a standard three button layout right next to my Divi my blurb module content here again these this is a two column layout this is not four columns so this is actually three buttons positioned absolutely accenting a blurb module so and there's the last one here is just some button tabs again this is the same you know blurb module and I've positioned these buttons here to sit behind the blurb module position them absolutely so that when you hover over them kind of gives a nice little tab functionality there and all this is possible using those built in Divi options we're gonna jump in and get started I'm gonna try and go through all of these today but I'm probably not going to kind of you know concentrate on all of the design elements you can visit the blog post that went along with this Divi use case tutorial that went out this morning so check that out as we go along for more details all right let me go and make sure in the chat everyone you can still with me all right cool stuff thanks John all right Karl thanks for the thumbs up and Colonel Edwards our Col Edwards not sure if that's the kernel or the coal all right let's go on I'm gonna get started here basically you need your you know divvy installed and active and we're gonna be building this from scratch so no pre-made layouts or anything like that we're just gonna create a new page and deploy the Divi builder on that page and here you can see I'm ready to go and I'm just gonna add a two column layout and actually before I get started here adding my blurb module and things like that I'm gonna go in to my row settings and the first thing I'm going to do is change my go down to my sizing options here I'm gonna change my custom gutter with two two it'll decrease the space between my two columns there and also I want to equalize column Heights this is important for that effect that I showed you here with that since these two columns have equal column Heights they will of course have that consistent design on each column no matter how much content you have in the column and then I'm going to do the width to set to 100% and let's give it a margin going to my spacing here I'm just gonna give it a bottom margin just because I'm gonna be adding multiple rows with different layouts so I'm just giving me some space between each row with the bottom margin and then I'm going to take out the default padding just set it to zero at the top and bottom and let's go ahead and save that actually I'm going to open it back up my row settings because I want to change my column one I'm just going to design my first example in column one so I'm going to open up my column 1 settings here and I want to give it a background color I mean just give it this nice blue background color easy enough and since I'm gonna be adding some buttons apps absolutely at the bottom with the absolute position I need to create some space because if you are familiar with the absolute position when you set an element to an absolute position it will sit above it will kind of break out of the normal flow of the document or page and it will sit above or behind the elements kind of like hovering over the rest of the content on the page so you got to create some space elsewhere if you're gonna position it in a certain area I hope that makes sense but here's my padding bottom here so that 50 pixels of padding underneath my column is where I'm going to you know place my buttons all right now I'm ready for my blurb module I'm gonna save these out create my blurb module here I'm just gonna add it to the column and I'm gonna get rid of some of this content and let's go ahead and give my in give it an image just going to use hmmm yeah that same one I used before there you go and I'm going to jump over to the design settings here and let's go ahead and line my image to the left keep all that the same let's just go over to because I'm gonna resize that image under my sizing options here but just to kind of clean up the design of the text here I'm just gonna give it a PT sans font for the title maybe make it bold there and let's give it a white color here so we can see it and let's you know increase the size of my text give it a little bit of letter spacing if you want looking good let's jump over to the body text real quick let's make that white and I'm just gonna keep it to the default for now and now let's jump over to my image width so under my sizing options I'm just gonna give my own image with a 40 percent so that's just kind of you know position it nicely to the left there make sure my content with spans the full width I'm just set it to hundred 100% same thing from my module here set it to 100% and let's give it some padding here so it's not hugging the sides too much I'm gonna do fifty pixels on the top and the bottom and on the left I'm just gonna do 30 pixels all right so that takes care of my blurb module now we get to start adding our buttons so for our first button here let's go ahead and add a button module and jump over to my design settings and let's deploy my used custom styles for button and let's resize it to six pixels and I do want to set my button color to white and give it a background color let's do that let's give it that nice pinkish red we get rid of the border and the border radius all right real quick give it a same font there PT sands and I want to make it bold upper case and since this is a module width in a row that has a gutter with set to two or anything above one really there's gonna there's gonna have some little bit of margin added kind of in the background and behind-the-scenes to each of your modules so I want to get rid of that by setting my margin my margin to zero pixels on the bottom for that button and now for the padding this is important for the button here actually going to do let's go to my spacing sorry give it a custom spacing I'm going to do one M at the top and bottom and then I'm gonna do to em on the left and on the right I'm gonna do something different I'm actually gonna do three all right so so as you can see let me go ahead and make sure my go back to my button options here I want to make sure that icon shows not just on hover but all the time all right so there you go all right so things are gonna speed up now that I have most of my design here from here on out we're gonna be doing a lot of duplicating of these elements as we position them especially the buttons so now let's we have our you know main design of the button taken care of now let's go ahead and position it so I'm open up my button settings again this time I'm going to the Advanced tab and let's go ahead and scroll down to our position option toggle there and as you can see the default is set to default which is really static and then let's go ahead and change it to absolute as you can see when I did that the button jumped to the top left because that's the default location there the top left of its parent element and in this case it's the column so the column as long as the column is set to anything but static it's going to you know be contained within that column and it is by default in Divi set to relative position all right so there's my absolute position of course I want to at the bottom left so I'm gonna change my location to the bottom left easy enough and save that out now all I need to do is duplicate that button and let's go ahead and when I duplicated it as you notice nothing really happened or it didn't seem like anything happened because it actually is being positioned in the exact location so it's basically sitting on top of the previous button we just duplicated so all I need to do is open up my settings go to my advanced position options there and change the location as you can see now the buttons moved over to the right and we have our offsets we're gonna be using those in our next layout but for this one we're just going to keep it the default real simple we're gonna you know make it you know hug the bottom left in the bottom right corner and I'm going to [Music] let's go ahead and open up my Rose settings and here's a nice trick to instead of going through and copying and pasting all this over to the right column what I like to do is just duplicate the column entirely and that just carries over all the elements within it so there's a helpful tip for you alright I'm going to save that out and as you can see if I added more content here the buttons will stay oops well there you go the button so I didn't mean to duplicate the entire module there but as you can see if I added more content the buttons will stay at the bottom and remain consistently at the bottom no matter the size of your column or height of your column alright so that takes care of the first you know absolutely button layout there and I'm gonna do want to welcome you if you're just joining us this is our weekly double use case live stream where we show you how to add new design and functionality to our Divi websites today I'm showing you how you can use the absolute position in Divi to create some unique button layouts and so far we have created a button layout for dual bottom buttons here at the bottom of a blurb module if you do have any questions feel free to you know reach out in the chat here and also look in the video description for the blog post that goes along with this livestream tutorial click on that link it will take you to it you can get all this information about the more you know technical aspects all the different design settings that I may miss as I go through this live stream this particular design has some you know pretty or a lot of responsive settings to get things looking great on mobile which I'll try to touch on but for the most part gonna be showing you how to do it on the desktop but look in the article if you get confused on how to make this responsive alright so let's go to our second example this is the one this lets see yeah let's go we're gonna do this one next this is the three column or excuse me the three button the three side button layout here and to do that we're going to duplicate this entire room so that I can get you know a jump start on the design here I do want to update my blurb so I'm going to let's go ahead and jump in here I just want to so that we're not distracting let me just kind of clear out that right column so we only have one on the left here alright so I want to go to my blurb settings for this one and right now it's kind of spanning the full width so I want to change that but first I want to change the background color to something different let's go ahead and you know add the same you know red there and then I'm gonna go to my sizing change the width here I'm gonna change it to something like 60% that'll create some room for my buttons here because remember when you're positioning elements absolutely it's going to kind of hover over the rest of the content on the page you've got to create that space elsewhere and in this case we're just going to move our blurb over I mean you could probably do it using margin if you wanted as well the content width let's just keep it at 100 and let's change the actual let's see let's see I'm gonna change it to 56% the width and I think on main thing is to do this on my phone I'm gonna change it back as you can see we don't need it spanning the full width on the phone I'm sorry spanning only 50% on phone so we're just gonna change that to 100 okay that takes care of our blurb here now let's position those buttons let's go ahead and we're gonna open up this one here and we're just gonna use that button and we're just going to change the position of it and instead of you know keeping it to the bottom left let's go ahead and make it to the top right and then we can use these vertical offsets to get it just how we like it all right so I'm gonna do 20% from the top as you can see if the vertical offset will start from its location here at the top right and it will bring it down 20% the horizontal offset will be 5% so kind of get it off the edge there by 5% let's go and save that out and let's do let's go ahead and erase this one we don't really need that one and let's go ahead and select this one again but we're gonna duplicate it let's go ahead and do that as you can see when i duplicate it it's going to sit above the previous one so it looks like nothing's happened but something has it's going to open the settings change the position options and this time we're going to change the vertical offset to 35% that'll bring it down there you go and let's go ahead and save that let's go ahead and duplicate it one more time change that duplicate position to let's do 50% alright save that out and so there's your basic you know 3 button layout gonna go ahead and save it but I do want to duplicate it to show you duplicate my column here so you can see what it looks like all right in my previous example here I have more of a margin and that's just because I left the default margin that's there by default but you can always add that back if you need or just use the offsets to create that spacing as well so there's your three column button layout it will not be quite ready for mobile at this point but it will oh and there's a little difference in the gap there probably because I need to increase my percentage values a little bit better but I'm just gonna leave it like that for now we're gonna get started on our next one for sake of time before I do that do you want to answer any questions that you may have right now hopefully I'm not going too fast let's see awesome thank you Andrew on Facebook really says it's really helpful in cool feature this also adds some value and functionality to the blurb module exactly I personally use the blurb module a whole lot I know you probably do it's it's very just a very useful module to use got a very versatile it's got a lot of great things you can use it for but one thing it is missing is a button so this is a great way to you know add those buttons basically any any way you want to this blurb module so I agree 100% all right all right green shorts says new to divvy customization excited about these features yes appreciate the comment yes there are and you say you also got a an ish use for this feature already awesome that's always good to hear I'm gonna jump into my third example here and for the third one let's go ahead and duplicate our row one more time and instead of positioning these three buttons over here to the right I'm gonna be a little bit more abstract about it and position them kind of off kind of in a broken grid type layout and to do that going to first have to update my blurb module again and I want to take out my background color for this one so I'm just gonna erase it there and just to make sure that it doesn't have any default background I'm just gonna give it a transparent background all right then I'm gonna go to my width here and instead of fifty-six so I'm gonna make it 60 and let's go ahead and change that alignment to Center and since I made the module centered I just want to make my text centered as well there you go and I want to make my image oh there it is up here sorry my image icon alignment I want to make centered as well and then I do want to cut down the size of my title text just for this design to give me some more room so I'm gonna change that to like 20 as you can see my absolutely position buttons here kind of hanging in there even though I'm I'm working behind the scenes with this blurb module but we're gonna move those around alright so let's do the real quick just add a border just give it a two pixel not stark white let's bring it down just a little bit and let's add some margin to the top since we already have you know a good amount of margin at the bottom 50 ooh sorry not the bottom top margin there you go looking good all right now we're ready to position our buttons so let's go to our first one here and let's go ahead and go to my position and let's you know just move the vertical offset just a tad let's move it to about 8% from the top and let's do make it a negative horizontal offset that'll you know create that broken grid kind of off of the screen a bit let's make it you know something like negative 5 and then let's go to our second button here and let's go ahead and change that position to the location being the top left this time and let's make it you know just 34% vertical offset and for my horizontal offset let's do negative 10 that'll bring it off the grid a little all right negative sevens good enough I don't want to do too much all right maybe negative 8 it what's great about this is you can play around with those offsets however you like and you know the tricky part is to make sure that once you start going to desktop and phone especially you'll want to tweak these offsets or just change it from an absolute position altogether to relative so it kind of sits along the flow of the document like normal on phone display all right so let's do transform scale for this one and you might be wondering like transform this is transform scale but you have a transform translate which actually can move around the elements as well for the most part though you'll want to use you can use the transform translate element to position buttons for example after you have them in the absolute position you're you're completely free to do that the only issue with that is sometimes if you use the absolute position and let's say you put it in the center here well on the back end behind-the-scenes the translate the transform translate excuse me the transform translates actually being used to get that element in the exact center of your cup your container so if you don't really understand how that's being used behind the scenes it might be confusing if you start using transform translate to position elements so for the a good rule of thumb use the position options to position elements and then use the transform options to add like hover effects that's what it's really great for or to make minor adjustments to things as well I hope that makes sense all right so oh that's right okay transform scale I just wanna this is a good way to kind of just decrease the size of the button so I'm just gonna scale it down to I don't know like eighty percent something like that and let's go ahead and save that but now now let's do the third button let's go ahead and position it at the bottom right let's go ahead and position at the bottom right this time and let's do the vertical offset let's do negative three and let's do the horizontal offset let's just keep it at five and then let's go ahead and go to our transform scale and let's make this one bigger and significant significantly bigger something like I don't know like that and there you go I'm gonna save that one and since I let's go ahead and save that out and let's duplicate my my column here let's erase that column two and duplicate column one as you can see there's not much space in between my columns here I can just update my row settings to give it a gutter with of like four that'll give me more space since I do have some broken grid action they're kind of overlapping and going outside the container and on mobile I do want to make sure my width let's see let's go ahead and on mobile that's especially on a phone let's make the width 80% oh not eighty pixels that's way too small that way you have some room on mobile alright so there's your little glimpse of what it looks like on mobile display so far the real the real trouble or not necessarily trouble just more difficult the more difficulty comes in when you when you're working with this third and this is kind of the most advanced button layout I'm sorry the fourth layout is the most advanced one so let's jump in and do that one but before I do want to make sure and answer any questions Cole says looks good very helpful after updates good all right it's your first Divi livestream awesome will welcome crow to your first one sorry it had to be me but hopefully you'll learn something yeah I I do enjoy these I really do enjoy especially helping you guys kind of maybe answer some questions related to this design and also kind of the like the off-topic type things that we kind of get to sometimes so feel free to ask questions about all things mostly let me be clear mostly related to the design but sometimes if there's something related to this that I can help you with I really love to do that as well if I can all right so here's our fourth one let's do it I have to duplicate let's go ahead and duplicate my second row again do I want to do that yes I do the second row and then let's just so we can keep everything in order I'm just gonna bring it down to the bottom so we'll know it's our fourth layout and for this one I don't really need a column background color so I'm going to take that out go ahead and erase the right column there and let's see okay so I'm gonna open up my column one settings and you can see it has a blue black background I'm gonna take that out all right and let's go ahead and start positioning our buttons so let's position our first one let's see it's not really letting me click on it right now hold on so if that happens to you you can go ahead and do the click mode here and that'll let you get at it a lot easier just a little tip there if it becomes troublesome for you to do that let's go ahead and position this button we're gonna keep it kind of where it is but we're gonna take as the top right location but I'm going to take out the the offset set it back to its default zero there you go and oh I forgot let's go ahead and open up that button again and let's go ahead and we're gonna do a padding a custom padding here and this is of course optional but it does kind of create more space I don't know if you can see that this little icon this button icon is not an equal distance from the letters as it is from the the right side like the padding doesn't match so it's we want to make that icon kind of in the center more so that we can hide it and make a little button tab just showing that icon so to do that I'm just gonna add go to my custom CSS and that icon is oops that icon is added to the after a pseudo element so all I'm going to do is do padding left and let's do 10 pixels and now when you look at that button you can see it's kind of right dead in the center there all right and I want to give my let's go ahead and save that button and let's go ahead and do our second one I'm gonna open up my settings so we're basically positioning up there and then we're gonna kind of hide most of the button with our blurb module so only the tabs with the icon will show initially and then we'll hover over it to get that kind of scrolling out effect or the pull out tab effect if you will all right let's go to our advanced position and let's get rid of this vertical offset this time I'm gonna do pixels for my vertical offset and basically what I want to do is oops wrong way i'ma hold down shift so it it does 10 pixels with each click I'm gonna go until I'm exactly past the button there which in this case is 59 pixels okay and let's see I do want to make sure and change the color so we'll have some kind of differential there change that background color oops let's try that again might be my recent one let's just change it to this blue there you go any less position our third button again I'm just going to use the pixels from my vertical offset it's going to be 118 pixels from the top there there you go and oh you know what I didn't do I just forgot I need to add my spacing so I'm going to use the multi select here to select both of those buttons then I'm going to add my custom CSS padding there oops padding left is what I want ten pixels all right that takes care of our button positions and let's go ahead and do our our hover effect so I want to use multi select again to select all of my buttons all I'm doing is holding down ctrl or command and then clicking each one and then opening the settings of one of them this will allow me to you know change the design settings of all of the buttons at once and what I want to do here is I'm going to add a transform effect on hover so I want to make this is where that remember how I said the transform translate really comes in handy when you're using hover effects and animations things like that so I'm going to add one on hover so I'm going to do my hover option there make sure my hover tab is selected and I'm going to add unclick my link there cuz I just want to change the x-axis value here to 68% I think it's gonna be 68% something like that yeah maybe maybe I can do more but for the most part that's gonna be the movement that you're gonna get see how I'm toggling on and off of that pull tab functionality when you hover over that button I'm gonna save it out now let's hide it with our blurb module we're almost done let's go ahead and open up my blurb module settings and I'm gonna change my width go to sizing just gonna change it to auto back to its original 100% oh sorry that's my image width sorry wrong one here it is let's change that back to auto there you go and that's actually a cool setup right there you want to leave it like that but we are actually going to make some pull tabs so I I can see my blurb module still is number one sitting behind my blur my buttons and I don't want that and I also want our button tabs to be sticking out a bit to do that I'm going to make my my blurb module I'm gonna give it a relative position and the reason why I'm doing that is because I want to change the Z in the Z index so for your default static positioned elements you're not gonna be able to use the index really so it's only four positioned elements like relative fixed or absolute so I'm going to give it a index of 11 so as you can see now it's hiding my buttons and so now all I need to do is give it some spacing on the right I'm gonna do some margin on the right here of 50 pixels and I think that's a little too much let's cut it down a little bit maybe by two there you go so 48 so basically what I'm doing is I'm revealing my my icon side the right side of my buttons for some tabs so I'm just going to do that with my margin and let's go ahead and give it that blue background again there you go right let's go ahead and save that and check out what the let's go to make it two columns here a little duplicate column trick here alright save it out and let's check it out on the live page so as you can see my padding is off and so I'll need to make some adjustments I think I basically need to change my my padding on my button to align my icons in the right spot but for the most part I've got my functionality down the only thing I need to do is to you see how my tabs are hiding behind my content in the right column they're easy way to fix that is I'll go into my row settings go to my column one settings and then go to my position and then change the the z-index to like twelve and that makes sure that the this left column will sit above this right column in the z-index order of things let's go ahead and try that again now you can see that it will work really nicely there all right so I'm gonna call it quits here for today we're getting close to the end on time but I appreciate you being patient hopefully we have learned some new things together let me double check the questions make sure I have everything answered that I can bin says learn so much from you your vids that is thank you thank you green shorts and oh I have a question from crow I don't know if it's possible but I wish each module came with element inspector thingy yes the one in like in chrome and with your browser in the custom CSS I don't need to guess the names guess the names of the classes the things like that I'm not sure what you mean which the names of what that's my question to you crow oh this might be what you're referring to let's see if you're okay maybe not but if you are adding some custom CSS to an element in Divi if you're wanting to know for example example what what it's selecting here this is kind of limited but it does give you a hint of what it is like for this blurb main element if you click on the question mark it'll show you the exact class that it's targeting so that is helpful sometimes though with all the updates we we may need to update those so double check and make sure that is exactly correct so if it's not giving you the result you need you might need to use the browser inspection tool to double check but that might be helpful just click on that question mark it'll show you the class that it's targeting or Whitten and then you can just use that in your external style sheets or whatever but the reason why it's set up that way on within the Divi builder is because I don't need to put any classes in here because it's just telling me what class is already being selected all I need to do is put in our you know properties and values or CSS properties and values all right good question green shorts I like says I like the idea of using the side buttons to direct users to put a product directly in cart or button to see a more detailed product page yes exactly this was the idea this will open the doors for you know creating a lot of those useful layouts especially for things in a grid layout like I'm using today when you don't want to put your buttons in a separate column for example you can use the absolute position options to put a button within the same column of your other modules all right very good Chasez brilliant thanks Shea okay well if that's all I think I'm going to close it out today that's all I got for you today thanks for tuning in everyone please be sure to subscribe to our blog newsletter our YouTube channel and like us on Facebook and make sure and ring the bell that make sure you get those notifications so that you can know when we have a new live stream coming up in fact we do have a new live stream coming up this Friday at 3 p.m. Eastern that's the weekly WP roundup with BJ and also next Tuesday you can look forward to another Divi use-case live stream like we did today that's 2 p.m. East 3 p.m. Eastern next week that's it thanks for tuning in again guys and we look forward to seeing you in our next video you

Channel: Elegant Themes

Views: 4,340

Keywords: button layouts

Id: nrWhLGI2380

Length: 55min 15sec (3315 seconds)

Published: Tue Feb 25 2020