How to create Divi Gallery Module on 2020 in WordPress

An important part of having a beautiful-looking website is of course the photography now depending on what your business is you might actually want to show off a picture gallery.

Divi Gallery Module

perhaps your photographer or maybe you’re a bed-and-breakfast and you want to show off different rooms whatever it might be it’s easy to do with the Divi gallery module so let’s take a look at it first thing we need to do is add in a row now you don’t need to add in separate ones for this you can just go straight for a single row and then from here find the gallery module I’m just going to type it into the search bar and there we go now by default we’ve got four images now I don’t want to use these and what we can do is change them by going into the gallery here the first thing that you need to do though is obviously upload images if you haven’t done it already so in order to do that I’m just going to click OK let’s open up the dashboard in a new tab.

and then come on over to media click on add new and then you can either select files or you can click and drag from the computer and put them in when you’ve done that and you’re using a gallery it’s generally best to make sure that all the images are the same size for example these ones if I have a look at this is 1920 by 1080 as all of these if I click on this one that I’ve just uploaded its 1920 by a 1245 easy enough to change we click on edit image put the aspect ratio to 16 by 9 which is generally best especially for websites click and drag move it to our once it get crop click Save and there we go 1920 by 1080 so when we’ve done that come on back over to here we can now close that tab down I’ll just save this a moment.

i refresh the page.

that so that the changes are just made in the media gallery actually come through now that we’ve done that go back into the module settings which is over here and then click on the plus and what we’re going to do is select all of these images if we want to select them at once click on this one hold down shift click over to the other side and then if you’ve got any that are just randomly dots about hold down command and and click it I think it’s control or windows click select and that’s going to insert them the problem we’ve got though is it’s only number four so we’ve got eight images so I will tell it that we have eight and now we have them up here they’re the titles that we see are what the file names are for the images so you can of course change those when you upload them which is best practice for SEO anyway I’ve not done it for this example but if we didn’t if we didn’t want to see those we can come on to the elements tab turn off the show title and caption and then those are going to disappear and then if we want to obviously designed this make it look better come on up to the design tab and then under layout you’ve got a couple of options here we can either go for the grid layout that we have or we can make this a slider so if we click on slider that’s going to do that for us and then we can brew using the arrows we’ve also got the middle dots down.

here so we can go through that way as well which is really nice but for the moment I want to leave this on grid I’m going to show you how to it design this a bit better so the first thing we want to do is make this a little bit larger and get rid of these great big borders that we have between them the way that we do that is go to go to your row settings which is up here so we’re now going to the row go to the COG come on up to design and then go into sizing and then what we want to do first thing is we want to make this with a hundred percent now normally I would change this up here so that we’re only working on the desktop but for the moment I’m just going to do it so it affects everything so there we go we’ve now got 100% width come on up click use custom gutter width and then from here what we can do is move this down now you’ll see that this is going to bring this down and when we get to here obviously these join up so there’s no sort of compromise between this and this that’s fine I’ll show you how to do that it’s really easy leave it like this for the moment.

once again click OK and then come on back over to the the module settings what we can then do is go back to design find the border section which is down here and then here we’ve got border width so when you increase this it’s going to change this so if I just wanted three or four pixels we put that in make it a transparent background because that’s then going to fit in with whatever color you’ve got in the back here and now we’ve got a much more sensible size between the grids I think obviously we’ve got this light white overlay in the blue icon if we want to change that all we need to do is come on up to the overlay to have just up here choose the overlay color that you want for example orange that’s quite a lot so I click over here change the opacity that’s better I prefer that and then under the icon color we can change that as well so at the moment is blue if I choose white that’s going to switch over to white and if we want we can also change what we actually have here so for example instead of this plus icon I could click the little picture icon and now we’ve got that there so that’s really good.

easy way to make a gallery for yourself the only slight issue that we have is making this responsive so if I come on down here and show you what it looks like on tablet.

so let’s put it into two rows for us now which is probably what you’d want and if I go into mobile we’ll see that we have just the one but it’s it’s not right because I change the width to 100% so what we would now do is go back into the row settings come on the design go to sizing and then here where we set the width to 100% changes back so that we’re only working on the phone and we bring it down and I think it wants to be around 85% there we go so that hasn’t affected the tablet view and hasn’t changed the desktop view it just means that we’ve got a good looking good on mobile however what if you don’t want it to switch like it just did so what if instead of having you know for on desktop and then to on tablet and one on mobile what if you want it to stay static well there’s a couple of ways you can do it the first way is by using a CSS code to make it static across all the devices to do that you would go into your module settings come up to advanced go under the custom CSS and find. the gallery when you’ve done that we can copy in some code so if we put this in here what I’ve just told it is that I want the width to be 50% so 50% of the page that’s obviously putting two columns across it if we change this and made it 25 we would find that it turns it back to 4 again like it originally was.

but the difference that this is making is it’s going to do it across all the devices so if I leave it on 50 for a second and we then come back and well we won’t bother the tablet because we know that that was 2 anyway but if I go to mobile now there we go you’ve now got 2 on the mobile as well.

however the slight downfall here is what if you still want there to be a bit of responsiveness between the pages so perhaps you do still want 4 on the the desktop view but you want to on the tablet and them over well I’ll show you how to do that we can get rid of this head on back to desktop view for a minute.

and then coming up to the CSS ID and classes tab now we need to give this a class so I’m just going to call it gallery – width or gal – width.

technically whatever you put here it doesn’t matter but you need to make sure that you now copy it exactly for the next part of what we’re going to be doing so what you put here make sure you know exactly what it is.

so we’re going to click OK now what we want to do is add special CSS class to this particular page but not the page as a whole because we’ve got this other dummy stuff that we were doing in previous post on here what if we just want to affect this particular module well that’s why we just added in that CSS class because now the changes are about to make to the page are only going to affect this area so what we need to do click on the little cog down here if you don’t see it open this up then click the COG that opens up your page settings as normal which is where you can put in information about the page and set a featured image etc and obviously do split testing come on up to advanced and then go into some CSS so this is now where we’re going to put in some code okay so I’ll talk you through what this actually means what we’re saying here is that fraud desktop we want to have a minimum width of 981 pixels which is fairly standard but then when we come down here to tablet we see that this changes to max width of 980 what that’s saying is that when the screen size gets down to 980 we want it to switch to a tablet view likewise if we look down at the mobile cell section you will see that it says max width 479 pixels so when your screen size reduces down and reaches that amount it’s gonna switch over to that view for you and then beneath that we’re telling it what we want it to do so we’ve put in the the Dachau width so that’s the CSS class that we just put in this you’ll you can just copy it over but if you want to you can use like chrome inspector on the site and then you’ll be able to actually see that this is relating to this particular gallery item and then we’re telling it with 25 percent so.

under desktop I want this to be 25% ie 25 50 75 100 so we’ve got four rows and then under the tablet section I’m telling it that I wanted a 50% so that’s two rows and then at the moment I’ve got it down as mobile being a hundred percent so that would just be one row but here if I change this I’ll make it fifty now we’re telling it I want you to be on two rows for both tablet and mobile but I want you to be at four rows for desktop if you want to change this it’s really easy just change the values make it fifty that’s going to change it for you.

make it a hundred that would give you whoops.

that’ll give you just one one at a time so I’ll move this back to 25.

Conclusion 

so there we go I will I will copy that and put it into the twitter of this article for you so that you can copy it over that should make it easier for you so for now we’ll click OK and there we have it so that’s our desktop view if I now click over to the tablet we should have two ambi do and click over to mobile and there we go we’ve got two as well you can obviously play around with the borders as you want them to be but that’s how you can make your gallery responsive with Divi across devices and make sure other people are getting the best possible experience for now though that is how you make your gallery you can have a nice grid or you can use a slider to make sure you’re showing off all of the images that you’ve got to the maximum effect.

learn more extra from wiki.

Don’t forget to check:

How to Create a Custom Sidebar in WordPress

Mega Menus – How to Create Mega Menus in WordPress

The Content Views Plugin – How to Create Blog Post Grids in WordPress

How to Backup and Clone a WordPress Website

Leave a Comment