Visual Composer Masonry Grid Element Builder Tutorial

Welcome to another episode of peace mag TV in today’s tutorial for WordPress we’re going to be taking a look at how we can create media grids specifically how we can create a masonry media grid using visual composer this is a great way all we know to create a nice-looking layout where the dimensions of images don’t all need to be the same but everything will fit together a nice block work kind of layout so let’s take a look at how we can do that I’ll take you step-by-step through the entire process at the end of it you’ll be able to get up to speed very quickly with creating these grid layouts so let’s check all that out right now and there are two ways you can work with visual composer you can work with the backend editor’ a we can see at the moment or we can switch over to the front-end editor where we can see what the layout will look like in conjunction with the other elements on our page and for this example I’m going to switch over to that mode so we can see what everything looks like as we create it so let’s just switch to front-end editor and that will then load that up and show us the other elements on our page and allow us to start working with a visual composer layout in a nice visual kind of way so as you can see we have the page there I’ve got my header that’s part of my theme with my navigation and so on and we’ve got the normal area that we used to work in with with visual composer so at this point I can add an element text block or template so we’re going to start with an element that’s going to bring up the normal box and we can now choose what element it is we want to insert into our layout so you can see we’ve got post grid a media grid which I’ve covered in a previous video and I’ll link that in the description and I’ve in the top right-hand corner now so you can check that out what we’re interested in is the post masonry good or specifically the masonry media grid so let’s open that up let’s click insert it that’s going to bring up a dialog box and it’s also going to show us a visual representation of some of the layout for us so you can see we’ve got placeholder images we can set up all the configuration layout settings and so on and we can see come back and edit this at any point and edit the columns in the row and so on again if you’re not used to working with the front-end editor I’ve got a video which I’ll link in the description and up at the top right-hand corner now that’ll show you exactly how to get accustomed to using this front-end way of work but let’s take a look at the options we have available in front of us and let’s start building this media grid app so as you can see we can choose from any of the three tabs you got general item design and design options we can pull in the image you want to use in this specific grid and then we can choose how we want to lay things out the number of rows we want to have like this per row the gap if we want one the initial load in animation if we want animate that and the type of style you want to work with so we’ve got a range of different options in there so let’s start off by loading a few images in so if I click on the plus you can see I can now quickly go to our media library and I can choose some images if I want to upload some more images I can do that quite quickly and easily at this point so let’s just upload a few more so we’ve got a nice range of images to use our media grid so I’m literally just going to drag and drop to upload some of these to my server so let’s just drag those into WordPress okay so they’re all uploaded now and all different dimensions so we’ve got some nice sort of randomness to play about with so let’s just choose add images and that’s going to add them through into our media grid so you can see they’re all arranged there now we want to drag and drop them around we can quite easily drag and rearrange those into any order we want so let’s take a look at the options below so you can see we’ve got the ability to show all the images at once we can say load more buttons so we can say we can specify how many images you want to load in any particular time so you can see we can set that up some additional options become available and we can use lazy loading as well so as we scroll down the page that will load them as the page gets further and further down which is a great way so if you have a lot of images so you don’t have to force it to load everything up in one go so as you can see if we choose different options then more options appear at the top based upon what we choose for now let’s just check show all so we can leave that as it is we’ll say we want to have a slightly bigger gap in there let’s go for some like 10 pixels and let’s just say we’re going to go forward images per row and let’s just choose an animations you can see we’ve got the option for no animation we’ve got a default animation or we can use fade ins let’s just choose fade in go to item design and we’ve got a range of different element templates we can use at this point so you see everything is prefixed by the type of grid that you’re using so we’ve got media grid masonry grid masonry media and so on it’s recommended you choose the ones are in the right grouping so for example with in the masonry media so it makes sense to make sure that we pull in the ones from that specific section so everything is styled nice and neat and tidy for this particular type of layout so let’s just chose let’s go to broader scale that’ll be fine design options you can see we got the normal CSS box we can adjust any of the margins and padding and so on the various elements we’re working with but for now let’s just hit Save Changes and let’s take a look at what this looks like on the page itself till I close this down there you can see there’s all our images all being scaled and all sort of sitting next to each other now at this point in time I don’t really like the way that things are laid out so I’m going to come back in choose media masonry media grid so edit that and let’s just set that to be let’s go for two two rows – Elvis per row save the changes close that down and you can see now we’ve got a nicer looking grid layout if we take our mouse over you can see the effect that we chose is being applied so we’ve got a nice level of interaction on there quite easy if we want to learn we’ll change anything on there we can simply come back into this and we could just click to edit it let’s just say we don’t want to show everything we want to say let’s have a load more button and we say we only actually want display we’ve got it in rows of two so let’s just say for items at a time and we can take a look then what this looks like so we’ve got the load more button so we can now choose how that looks so let’s click on there you can see you’ve got arrange different options we can give it a different title if we don’t want to use load more we can change the style from any of the predefined styles or we can you create a completely custom layout which opens up a range of different options where we can style the button to make sure it’s in keeping with the layout that we’re working with so let’s just leave that to Morton with it a rounded blues fine I’m not going to worry too much about this but you can adjust if you want you can add an icon to it you can advance on click action whole range of different things we can do on there let’s just go to the item design let’s choose a different ones let’s give it the bordered scale must come down let’s just say scale with rotation light let’s try that one say the change is close that down and now we can see we’ve got four images and you can see the load more but now becomes available if we click on that that will then load in the next four images and you can see now the effect gives us this nice zoom and rotation effect quite a nice looking layout so you can see that everything is now positioning itself nice and neat now the first four images we have are pretty much all the ship same shape and size let’s adjust that for something that isn’t falling into that kind of layout so let’s come in and edit that again let’s take this one we know to be a sort of more portrait image than landscape but let’s just drop that into the second image that’ll do fine hit Save Changes close that down let’s give a better example now how the masonry grid actually lays things out for us so if we scroll down you can see now things are laid out quite nice neat and tidy and if we click a little more you can see the next level images and they all slot in nice and neat like a game of Tetris everything sits in there nice and neatly this is a great way of being able to display your images using the masonry media grid which is part of visual composer you can do the same if you want to with a post grid you’ve got a masonry post grid so if you you have a blog entry or a portfolio for example and you want to be able to pull in the featured images on there and make those links through the post with descriptions and so on you can do that as well and we’ll cover that in its own dedicated video a bit a little bit later down the line but it’s very much in a similar fashion to what we’ve just done here so I have an experiment with this see if you can find a nice way of laying of the images on your layout think it’s a great way of working and making everything look a nice visual fashion where you don’t have control over all the image dimensions and you want to make everything look nice and neat and tidy so once you finish doing your layer don’t forget to hit that update button in the top corner to make sure that you save the changes and then you can jump back into normal editor and the backend of WordPress and carry on working I hope you found the video useful I hope it’s something you can use in your development of your website if you did find the video useful please give it a thumbs up and hit that subscribe button to be kept up to date with all the new content we add every single week – any comments questions or feedback on this video or anything else we cover on the channel please pop those in the comment section below and until next time take care you

As found on Youtube

(Visited 4 times, 1 visits today)

About The Author

You Might Be Interested In