How to Use Divi’s Position Options to Create Image Bundles

all right well welcome to the nation to another Divi use-case livestream and where each week we show you how to add new design and functionality to your Divi websites welcome everyone in this tutorial we're going to be showing you how to use Debbie's built in position options to create some creative image bundle designs that you can use on your website in all sorts of ways for more information check out the video description for a link to the blog post that goes along with this tutorial and more information and I hope you enjoy it let's go ahead and jump in and get started so I do want to make sure that you can hear me loud and clear over there wherever you are let us know where you're from say hello to myself and everyone here if you can let me know you're alive and well hello let's see mid-life welcome uncle social it's time for some pain some champagne I like it maybe I should add that to my intros from now on oh let's see great loud and clear I appreciate that in a mad unbox hello welcome alrighty X wait no Aaron sorry Aaron I can hear me very good and Aaron is psyched for this tutorial that makes me happy and hello cm from India and let's see rado slaw from Poland I hope I'm pronouncing that correctly probably not I grew up people mispronouncing my name for a long time it's actually really pronounced Shawn pine where I'm from but it's champagne everywhere else cuz it's spelled like that and now I go buy champagne so it's okay Elizabeth hola Pham hello from Ghana Wow Miguel hello all right looks like we're all getting acquainted here just to make sure you know you can ask questions in the in the chat and I'll get to them as I come to them in the livestream we got a lot of things to do in this livestream we're actually going to do three different designs if we have time and we're going to dive deeply into the divvy position options we're going to concentrate mostly on the absolute position today and so hopefully we'll learn some stuff together by him how I'm doing fine thank you how are you ibrahim ah hello well we got a lot of people great all right so I'm gonna uh I'm gonna stop there with the hellos and I'm gonna jump in I'll come back and circle back to the chat here in a bit as you're coming in I just want to remind you today we're going to be building some creative image bundle designs in fact you can see one on my screen here this is actually the first design as you can see each one of these designs will fit our image bundles will fit in a single column and then that allows you to you know fit them into multiple column layouts like this which is helpful for showcasing you know products layouts child themes just you know photo galleries you name it this would come in handy for that that's that was my first design here's the second one here you can see the bundles here are five images with some unique spacing and borders there here's a kind of like a showcase image bundle here with five images you can see it broken up into different columns as well so that's where we're going today the concepts should come in handy for a lot of different uses on your own website and I hope it helps so we'll get started here with of course using our Divi theme and we're gonna be building a new page creating a new page and using the Divi Builder and we're gonna be building it from scratch so that's where I am here I'm gonna start with adding a single column row and one of the reasons why I start with a single column row in fact I normally a lot of times start with a single column row because if I want to duplicate my design in multiple columns I can always duplicate the column after I make my design so it's just a little hint there if you if you know what I'm talking about great if not you'll see what I'm talking about later on alright so the first thing we're gonna do add a one column row and then let me get my notes here make sure I'm following along alright so we're gonna add an image module our first image here is going to be the center middle image so I'm actually going to be using some images from one of our layout packs for this one the fitness coach layout pack and I cropped it see if it's in here it's not even in here great I actually i cropped it a little bit than the from the original version let me get this out of the way here alright okay so I'm going to I'm gonna need to copy and paste some images if you don't know this already just a helpful hint if you're if you have the Divi builder open up opened up to edit different pages on two different browser windows you can actually copy modules from one browser window and paste them in another browser window you can copy design from one module or a section or row or the styles and then copy them into the other browser with the Divi Builder opened up so that can happen in case y'all did not know that and that's what I'm gonna be doing here just because my my media library doesn't have my images I'm just gonna copy and paste them from my previous design just to kind of help speed things up so this the images I'm using here are eight hundred and eighty pixels wide by twelve hundred pixels in height so all of these it helps to have them all the same dimensions to keep the design looking consistent and you know symmetrical okay so here's my image once I get the image in there I'm gonna change the width so I'm gonna adjust the width to fifty percent all right that's going to shrink it up and I do want to align it to the center there some choose my module alignment at center and let's just go ahead and add a box shadow here just a slight box-shadow let's increase this to let's do blur strength 38 something like that spread string 5 okay all right I'm not gonna get to you know particular about the Box shadow but just kind of make sure it's not too pronounced make its light maybe Talent turn down that color a little bit okay now once the box shadows in there let's go ahead and do go to my Advanced tab and this image I'm not going to add an absolute position I'm gonna keep it at the default which is a static position but I'm going to add a z-index of one because I do want it to sit above the other two images I'm going to add adjacent to it on the right or left and that's simply because I want to or I'm sorry the the default is zero so if I increase it by one it's just going to make sure and stay above all the other images all right so the index one it's great let's see the save that and now we're going to create the left image and to do that I'm going to duplicate this image scratch that let's create a new one I don't want to duplicate it alright so create a new image and let's go ahead and add our new image in there oops all right so there's my image down here I do want to resize it to 30% and this percentage is based on the width of the column in case you were wondering the column right now the default of any column when you add a new row in Divi is 80% wide with a max width of ten hundred eighty pixels 1080 pixels so it's 30% of that and so I'm going to once I add my width I'm going to add a box shadow to this one as well let's just add this one here and let's let's just keep it the default colors it's fine for now and now let's jump over to my absolute position so this is where kind of the the highlight of this tutorial is basically how to use the absolute position to create these image bundles and if you're not familiar with the absolute position just do a search in the blog we released a an article on how to use the absolute position in Divi which will help you in great detail but for now just know that the absolute position basically takes the element outside of the normal flow of the document the HTML of the page and basically it now becomes relative to the container that it's in it becomes positioned relative to its container which is the column so once you select absolute position I'll show you for this image it's going to now basically float you know above the other elements on the page outside the document and become fixed in this default location of this top left here location by default that's why it's up here in the top left of the actual column this is the column can't really see it but that's the top left corner of the column so the absolute position will always be relative to that container if that container has a excuse me has a position of relative or or at least relative if it's it's not relative it may jump to the next container and so on so that's good for us because we want to position it there and if we want it in the center left we'll have to just click of a button there we get it to the center left and it's not really showing me Center left right now and I bet if I save it yeah see sometimes if you just save it it'll jump back to its spot I don't know if that's a bug or not but when I'm editing editing it it will not really show the correct position I think that's new I'm not sure but it's it's it's right there and once we did once we've done that jump over to the transform let me transform and I'm going to rotate it the transform option of rotate I'm gonna rotate it along the z axis here of negative 10 degrees and it's not showing yet let me go ahead and save it out there you go and so that's the look I'm going for nice little rotation there on the left side and to create the right image let's go ahead and duplicate this one in fact I'm not even gonna click on that I'm going to open up my layers view my layers pop-up box here so I can see my images here so I can open all of them see my image here this is my middle image there it's always a good idea to label these like that's my left me zoom in so you can see if I can it's not letting me zoom yeah there we go all right so that's my middle image so you can always click in here and label them just like you would in like Photoshop or sketch or something to keep your layers in organized and all that so I'm gonna do that and then I'm going to duplicate this one and I'm going to rename it right image cuz that's gonna be my right image me zoom out okay and now it's kind of sitting on top you see it there because I duplicated the absolute position element there so I'm going to open up my settings for this one then update the image there you go and then I'm gonna go to my advance tab open up the position options and you can see now it carried over that location from the left center we're gonna choose the right center there then we're going to go to my transform option change the rotate from a negative 10 degrees to a positive save it and there you have a nice symmetrical design easy stuff alright so once that's done you're ready to probably want to save it but let's go ahead and duplicate the row here too I'll show you how you can create the this or add this image bundle to multiple columns so to do that I'm going to duplicate my row there it is down there I'm gonna open up that row and you can see I have this column with all of its all the images in there so all I need to do is duplicate the column it'll go to a two column row that's what I was talking about earlier it's easier to you know duplicate your design from a one column to a two column or three column layout by just duplicating the columns and then I could you know create a duplicate duplicate the row one more time duplicate the column in that duplicate row I'm saying duplicate a lot and then there it is really easy stuff and let's go ahead and check out the damage on mobile shouldn't be any but just so you can see it'll just line up nicely on mobile as well alright so that's the basic concept of creating image bundles with the next two designs we're gonna get a little bit more creative with it let's go ahead and I'm going to create I'm actually going to see I'm gonna save this entire section to the library and I'm just gonna call it you know image bundle of design one that way I can delete it and if I ever need it I can come get it again but for now I'm just gonna delete that one just so I can have a nice clean space to create our next design do you have any questions about let's see alright so uncle social says he likes my extra tips awesome thank you for that oh good question so uncle social says what's the benefit of creating this effect of three overlapping images in Divi rather than just making it in Photoshop and importing that as a single file and the answer to that question is whatever your preference is I mean I guess technically you would maybe save a little space I guess if you created the image in Photoshop you know and instead of you know loading up three separate images on your website I mean I don't know if that would be a big difference but I guess there are some benefits to doing it the old-fashioned way of just having the images already I like the ability to just bring back my layout here I like the ability to up you know update this on the fly without having to go back to shop and you know if I wanted to you know duplicate this or change out let's say I've updated a website and I want to feature a different page well I mean it's simply going in here clicking a button replacing the image instead of going back and opening up Photoshop and doing it in there and then bringing it back in to Debbie so it's really up to you but it's a good question it's I I like it because it's like a template you can work from and on your website and it's very convenient that way all right if you're just joining us I do want to welcome you to this week's Davey use case live stream and today we're showing you how to create some image bundle designs that you can use on your website in all sorts of ways the don't forget to check the video description for more info on this live stream and also there's a link to the blog post that goes along with this tutorial it is a long one because we covered three designs in that post but it does go into detail about how to accomplish these design so check that out alright so I deleted this one already so I'm going to delete it again all right let's start from scratch here we're gonna start again from the one column layout Oh scratch that this one we're gonna do a different column layout we're gonna do the 1/4 1/2 1/4 layout and that is because I want a nice middle the column to fit my my images in and then the the middle column for my images in the left and right column for the you know text element that I'm going to add to the design so oh let's go in the middle middle section first sorry about that and add an image module and for this one we're gonna use some different images these images I'm going to use here are from the furniture store layout pack one of our pre-made layout packs and I I believe these are 800 pixels by 1200 pixels in size you'll want to make sure those are all the same size for this one as well I mean you don't have to but it will kind of throw off the symmetry of it all so there's my image let's go ahead and add a slight background color to it I'm gonna add the background to the image because later on I'm gonna add spacing to the image module around it which will expose the background which is kind of a backwards way of adding a border I just didn't want to use the border I forget why honestly why did this way but I think it has to do with oh I think it has to do with the ability to use percentages length units for the spacing and not for the border or the box shadow I'm not sure though but anyway we're creating a border with spacing and a background color so that's what we're doing there's a background you can't see it yet let's go ahead and do the sizing let's do 55% for this middle image here and let's Center it let's do margin zero or bottom the bottom margin let's set it to zero and there's a default margin whenever you have a gutter with the default gutter width of three that's added to all modules so just taking that out I like to take it out rather than set it to gutter width of one because whenever we create the the image bundles on multiple columns we need that gutter with on that row so I just wanted to do it this way so margin-bottom excuse me the margin is zero pixels in the bottom padding is going to be five percent all the way around that'll expose my background color they're making the border there you go let's go ahead go through the Advanced tab under the position options and I want to keep this as a default position and I'm going to change the z-index to two because our to one it doesn't really matter just something other than zero so that it sits above the other images it's going to create another image you can do you can add modules from the layers view if you hover over and click this small plus icon it's an another way of opening up that insert module box and then you can paste on mount paste in that new image there we're going to create the the top left image in this design paste it in there alright let's go ahead and label it top left image label this first one Center image or something like that let's open up our top left image and we're going to need to update the size make it 40% with there you go and let's go ahead and make sure we have that zero pixel margin at the bottom let's save it out and I'm about to actually add it or add the absolute position to this image but before I do that I need to create some more space in my column and by default your column will inherit the or it's height will be determined by the basically the height of the content that is inside of that column right now the height is being determined by the height of this image in this one but as soon as we set this to an absolute it's no longer gonna be following the same document or it won't have any actual space in the document it's just going to kind of hover over it so I'll show you what I mean if I just open up my this left or this image settings here and change the position to absolute see how it's kind of stuck there well I wanted to sit up higher over here so to do that I'm just going to need to go to my column settings and add some spacing to the column I could give it a set height or something like that if I wanted to but this is sufficient so the key to making this design properly spaced is to use the right percentages I'm using a percentage here because I want it to be based on the width of the container which is the column so I'm going to add a 12% padding to the top and bottom that way I have more room for this image to kind of float up to the top with the absolute position and on I'll need some more space on tablet see how it's it needs some more spacing so I'll just double it undo 24 percent on tablet there you go looks good let's go to advanced tablets we already gave it the absolute position so that's good let's are sorry I'm in my column here that's not good let's go back to my image settings Advanced tab position see how it's at the top left that's what we want now we're going to add our top right image over here to do that I'm just going to duplicate the top left one here in my layers box change my label to right right left that doesn't make sense top right image open up the settings let's paste in our new image and you can see it's sitting over that previous image there so we need to change the position simply go to our position options go to the location set at the top right and there it is easy enough let's duplicate the top I guess left menu again I mean image again drag it underneath the top right image label it bottom left image open it up paste in the image go to my position options change the locations to bottom left and we continue this process I'm going to I'm going to duplicate my bottom left image label it bottom right and then open the settings paste my image in there change my location to bottom right there you go one cool thing you can do is add a box shadow element and this kind of bends the rules of how you traditionally use a box shadow but if I go to my top left image here I can add a box shadow that basically serves as a you know an abstract design element so I'm going to position it 170 pixels negative 170 pixels over to the left there 170 pixels down and it kind of adds that element there and now I just need to change the shadow color to a really really light blue looks gray almost there you go and actually I'm just going to go back here I'm gonna copy that box shadow style and I'm gonna add it to the top this top right image go in there add that box shadow in there and let's try that again it's not working I think I need to I'll just go ahead and add it again it's just 170 pixels and then 170 pixels there you go looks good save that out now I'm ready for my text element to do that you can add it here in here but for sake of time I'm gonna stop there and because I just want to make sure we have enough time to get to our next one but that's where you would add your text element and then kind of use padding to push it down here if you want to get the I just want to show you the what's the design what its gonna look like here just to get those image are those text elements in there would be easy to do alright and then let's get those columns to do that you would simply duplicate the row let's go ahead and do that there it is down there but I don't need this column on the left and I don't need the column on the right so I can delete those you can see it gets really big but if I if i duplicate that column now it'll break up into oops let's try that again let's delete that column delete that column there you go and then duplicate the column you can see it breaks up into two columns and then you would go back and take out those box shadows because you don't really need it if you're gonna use multiple columns duplicate the row again duplicate one of the columns and then you'll get a three column layout okay and this is the final design there now let's get to this one this is the you know kind of like showcase one but before I do that I do want to take a brief moment and welcome you if you're just joining us to this week's tip use case livestream where today we're showing you how to build some creative image bundles in Divi don't forget to check the link for more information in the video description below and we're going to bring this live stream home with our final design the third one to do that we're going to erase this one I already have it saved to my library anyway so and we're going to start from scratch with a one column row and let's make sure add an image module that's what we need so at our first image this one again will take from the fitness coach layout pack could be from any layout pack or your own screenshots from your own website I'm gonna paste in this these images from my previous design okay so here it is and let's go ahead and set the width here to 30 not pixels can't even see it let's do percentages there 30 percent alright I kind of skipped over the to see if you had any questions let's see energy briefly energy says I have Photoshop and didn't use it alright awesome I guess a lot of times with Divi you really don't need Photoshop it's just kind of the beauty of Divi Muhammad says hi welcome Muhammad any questions that I'm missing over here here we go I kind of skipped over this one a rattle ah can it be between different websites it's a main copying and pasting modules between different websites yes I believe so actually it's a good question yes yes you can wait I don't know I don't know if I've tested that or not I think you can pretty sure it's a great question somebody else chimed in I'm kind of having them you know shut down on my brain I don't remember if that can happen or not I would think so okay let's uh okay so 30% with remember we have a hundred percent with to work with on our in our column so we're using five images that are going to be lined up jacent to one another horizontally so that's what we're doing here so thirty percent will be the middle image will do like 20 percent for the two far far left and far right image and then like twenty two and a half percent all of that equals something close to 100 percent all right okay so next we're gonna add our we did our image alignment make sure it's centered let's do a quick box shadow let's do a vertical position let's do negative 12 and that's good enough I don't spend too much time on that let's do the margin make sure and set that to zero margin because I want to keep that excuse me that gutter with sorry got it with at three the default and then the z-index let's go ahead and set that to go to my position option set that to two and so the middle one will have a to the index the the ones on the right and left of the center image will have a one so it'll sit behind the two and then the two far right and far left images will have a zero which will sit behind the the ones so that's kind of where we the goal there you can also instead of using z-index you can actually just you know however wherever the images fall in the normal document flow for example if i added an image here this image would automatically sit above the image previously by default so if they both have the same z-index that this one will sit above that one so there you go let's continue the column perspective so here we're going to add a little bit of subtle 3d rotation to these images so to do that I'm going to add perspective to the column so before adding any more images I'm going to go to my column settings open it up go to my Advanced tab we don't currently have a built-in perspective option yet but it's real simple just put perspective and then a value the value is basically a rule of thumb is if you do a perspective of 1000 it's basically the 3d effect will make the element look as if it's a thousand pixels away from the user as its from between the user and the actual computer screen so that makes sense so a a greater perspective will make will have less of a drastic 3d effect whereas a smaller like if you put like 200 I'll show you what I mean if we have time but if you put a smaller value there it would be a really big pronounced three-dimensional perspective so 1000 is good I did save that right let me make sure to the column okay yes okay add middle left image now let's do that let's create a new image let's duplicate this one we're not going to create a new one so let's duplicate this one that way we can keep our box shadow and all that and get a jump start in the design the we're gonna change the location of this one so I'm gonna label it what is this I think this is the middle left yeah middle left image just label it and then open up the settings now we're going to add an absolute position so let's do that and let's make it bottom-left that right yes and let's change the width I need to change the width of this one so I'm gonna go to my sizing with change it from 32 22.5% all right looks good and now this is bothering me so I need to go just change the actual image I just paste a new image in there there we go and now we can kind of reposition it using some transform translate here and right now the the absolute position is positioning the element at the bottom left but you can kind of override or kind of tweak the spacing using the transform translate option here and the transform translate option is helpful because the length unit or the value here is dependent on the actual size of the element so if I move it over let's say 75% oops I want to unlink it because I just want to do this the x-axis there so if I change it to 75% let me save that out see how it moved over there okay changing it to 75% let's open that back up we'll move it 75% of its own width that makes sense so let's say this image here is 100% width it moved it over 75% of the width of the element over that way it's actually how you put you you Center things with an absolute position in divvy it actually used the transform translate option to move it over a negative 50 so it gets right in the center alright so let's continue over let's give it a rotation this is when you get to see that that what's it called perspective come into play so now you can see that 3d effect of the it looks closer on the left side and farther away on the right if I change the Kaulitz go back to the column perspective just so you can see if I changed it to like 300 you can see how it grows closer to the screen like that yeah that's 100 pixels away so that's why just 1000 nice and subtle let's do oh my Z index you see how it's sitting above because I I duplicated that image and carried over that Z index up to so I need to change that no it didn't because I'm in my row settings ok middle left image okay there we go now go to my position change the Z index to 1 now it's sitting nicely behind that middle image let's go ahead and create the far left image by duplicating this middle left one here changing the name or the label opening up the settings going to my position option that's good let me go into my transform translate and instead of 75% I'm just gonna bring it back to 0 and it's going to go to the far left there you go let's keep the 30 degree angle there that's fine and let's update my image kind of going out of order copy image paste image here we go and then let's update the position Z and X here to 0 so it sits behind the previous one and there you go we're that we have our left side completed now let's go on to our right side let's duplicate the middle left image there and alright so I'm gonna copy copy my image paste it in there alright change my position to instead of bottom left let's do the location of bottom right and wait what did I just do okay let's try this again duplicate let's bring it down alright change the name to middle right I don't know what I was doing earlier okay okay now let's open it up paste our new image in there go to my transfer I'm sorry my position options go to the bottom right location mmm there well it's hiding there it is okay there it is over there let's go back to my transform translate change that from 75 to negative 75 there you go and let's rotate it on negative 30 degrees instead of 30 degrees and there we go that's simple save that out duplicate the middle right image change the label to right image let's paste in our new image oops okay let's go to my transform translate and take out the percentage to make it sit far to the right and update the z-index to zero and save them out and there's your final design one thing I didn't do is I needed to shrink down the far right and far left images so for example the far left one let's open up that one let's change the width to an even 20% oh go and then the same for the right image close out my layers box save it out and this will be very easy to create multiple columns let's duplicate duplicate our row and let's just duplicate the column within the row there you go we've got two column layout let's duplicate this row go in here duplicate another column and there's your three column layout and that's that here's the final design with a nice title above it alright any questions all right um shy lip shy of that she'll that well I hope that's pronouncing your name correctly hello and thanks for thinking that et is the best I appreciate that let's go on see on Facebook um let's see a Mian Jacobs why am I feeling that Divi has a much steeper learning curve and some other W builders I don't know that's it might be because of the maybe if you're looking at a more recent video tutorial or tutorial we kind of upped our game as we go along making him you know more advanced I would just suggest looking at some of our you know earlier our documentation begin for beginners stuff like that if you feel like there is a steeper steep learning curve but really the basics of Divi are really simple but a lot of times on these live streams we kind of maximize and show you kind of more in depth ways to use Divi but I feel you on that we I think we've all been there when we start out with Divi it just seems like there's so much to learn it's kind of a blessing and a curse so oh so we got an update Pedro says nope only on the same website can you copy and paste styling and modules and stuff like that bummer sorry I thought we could not sure how that would work honestly all right if there's any more questions if not I'll go ahead and wrap it up seem like I always go like almost a full hour on these things I don't know why I guess I talk too much but I appreciate you sticking with me through it all all right so let's go ahead and close this out that's really all I got for you this week thanks for joining us and please be sure to subscribe to our blog newsletter our YouTube channel and like us on Facebook make sure to select to get those notifications that way we can keep you updated whenever whenever we have something new for you and we'll be back here next Tuesday I know it's Wednesday today kind of an off week but next Tuesday with another Divi use-case livestream like this one and we be looking forward to our weekly WP roundup on Friday at 3 p.m. Eastern and you can also check out the video description for more information on how you can contribute to our own elegant themes blog with some unique content thanks again and we look forward to seeing you in our next video bye guys you

Channel: Elegant Themes

Views: 3,862

Keywords:

Id: BRm7z8hp9pA

Length: 56min 22sec (3382 seconds)

Published: Wed Jun 17 2020