WordPress Visual Composer Media & Post Grid Tutorial



hi and welcome to another episode of peace mag TV in today's WordPress video we're going to be taking a look at another visual composer set of widgets we'll be taking a look at the grid options this is a great way to create custom pages with custom layouts and we're going to take a look at the basic options this gives us and in a future video we'll take a look at how we can actually create our own grid layouts and we can use those within our designs so let's take a look at how we can do that now so got WordPress open in front of me and as you can see I've got a page created and visual composer open ready to start adding elements so what we're going to do is click add element another bring us up the options and we can choose what elements we want to insert now we've got two options we're going to take a look at today we're going to take a look at the post grid and we're going to take a look at the media grid and in the future video we'll also take a look at the post masonry grid I say for now we're going to consider on these first two elements so let's start off with the post grid and what this is going to allow us to do is it's going to pull information in from posts and we can specify which categories and so on and it'll pull in the featured image it'll pull in some information about it and create a link to it so we can make our pages look a lot more visual instead of just a simple list so we get creative with the style we can get created with the number of posts we put on there a whole host of different features and in this video we're going to take a look at the basics of those but I'd encourage you to get stuck in there and start editing the settings yourself and find out what works with the design that you were looking for so let's take a look at what we've got available to us under the general tab you can see in this example even though it's called the post grid we can actually come in and we can choose a different range of options we can choose from post page attachment pricing table custom query or list of ID's we're going to keep it simple we're going to just use the post and this is going to just pull in the information from posts I previously created that have a featured image and things like that applied to them so we can narrow that data source done if you want to we can start customizing that and cutting it down to categories or tags you may have applied to any particular post or even custom taxonomies we're going to keep it simple like I say we're going to leave this as it is but again I would encourage you to try this so if you've got a specific requirement in mind the total number of items we want to display at any one time we can set that to minus one to display everything or we can limit it to up to a thousand now what I would suggest you do when you're doing this is limit it to number of multiples for example if I'm going to set this up to be in three columns that it's either going to be total other items is 612 you know that kind of thing so it works in multiples of whatever you set the columns that way you know you can end up with a nice simple layout the display style you can see we can say show every one we want to load in we can load it with the more button we can have lazy loading so as we scroll down the page that'll load extra posts in until we reach the limit or the the sort of all the posts we have available or we can add pagination in this so we can allow the user to click through in blocks of X number of posts I'll leave that to be actually going to come down and say I'm going to have load more button so at the bottom of the page it'll ask me to load more in once I've reached the limit of the items per page and for this example I'm going to set that to six what I'm going to do is when I come down the grid elements per row you can see we can set this up to one two three four five or six so I'm going to set that to be three do I want to show a filter which will allow me to filter the information that's being shown at any point well I've got everything created in one simple section or one simple category in my posts but if you had multiple categories you could say show filter and once you do that you can see it opens up the option at the top to insert filters and for now we'll leave that checked so we can take a look at that to show you the options that are available in there we've also then got the ability to set a gap now this will just put some space around each one of the grid elements just to make sure they don't all but up close together so you can control that just by simply using the drop-down and choose for any of the predefined options as with pretty much everything going this if we want to style this element separately we can give it a class name and then we can reference that with our custom CSS so that's everything under the general tab so let's move on to the data settings and see what information is available to us there to configure this particular layout so this section allows us to specify how we want this information to be displayed so you can see we can sort it by the date the order by post ID and a whole host of different options again use whatever is relevant to what you're trying to achieve but for this example I'm just going to leave this set to date I can specify whether I want it descending or ascending I could even put an offset in there which again I'm not going to worry too much more in this one and if I want to exclude any specific things like by the title or postal pages and things like that I can type that in there and I'll exclude certain elements so the filter option gives us the ability to specify how we want to filter this information if we've checked the box it says show filter and the general tab so you can see we can filter by the category or we can filter by tags now this is going to change based upon the actual source of the information but they all should be pretty self-explanatory you again you've got the exclude option so we can exclude certain things like certain tags or categories that they won't be shown in this filter we can specify how the filters are going to be displayed where you want rounded less rounded border and so on so the buttons will be styled how we want them we can align them we can even choose the color option we want to work with or we can create a custom color option we could even come down and specify the size of the filter I want to say the size the filter the color and so on it's just effectively a list of buttons at the top of the screen that allow us to filter the information by clicking on them and that'll filter the data is being displayed now I'm going to simply just come back to the general tab I'm going to uncheck that actually take a look at it and now we're going to take a look at item design so this is where it starts to get a little bit creative you can see we've got a whole range of options we've got basic grid masonry grid and we've got masonry media now the thing to bear in mind with this is if you did it with a masonry media this is more geared towards dealing with media information as in photographs and images to what we're looking to do here where we want some information from the text you want to pull some some text information from the post we want to pull the picture and some other information so I would suggest with this you stick to either the basic grid or the masonry grid options and they should give you everything you need you can ultimately customize these or you can create your own if you want to and like I say we're going to take a look at that in a future video where we create a custom designed to one of these these grid elements and then we'll come back in and change it and take a look at how we can do all that but for now for this video we're just going to keep it simple and choose one of the predefined options so let's just go for we'll have vertical flip I don't really bother which we have for now but you'll see we can underneath this create new or we can modify the selected one which will take us through and clone that information and then allow us to edit that to style the way that we would want it to be next we've got the design options which is where we you still where we can apply margins and padding and borders and things like that and finally we have the load more button so much the same ways we had the filter options you can see we can specify quite a bit of information we can title this we can give it a text so our butt will be text exactly how we want this we say load more posts or load additional images or whatever you would want in there we can specify the style of the button so you see you can choose from modern classic flat and so on we can specify them we want to be rounded square or round and we can again choose from one the predefined color layouts that are supplied with visual composer we can also come down and choose the size the button so you can see we've got four options available there we can specify where it's inline aligned left right or center for this example go for center and we can specify whether we want to be full width I will say yes the excuse me we can also come in if we want to add an icon we check that you'll see that hole opens up some additional options where we can choose the alignment of the icon and the library of the icon and the actual icon itself but for this example I'm just going to say I don't want one and once I've done with that I'm going to hit Save Changes I'm going to update my page and then we'll jump over and take a look at what this looks like on the actual page itself so we look at our example page now and as you can see it's empty at the moment so what I need to do is refresh this now so it'll load in the information we just laid out and that'll load in the first six posts style the way that we set up within the the actual editor itself so you can see we can now mouse over any of these and they'll pull up the information style though you want you can see the load more button is set up exactly as you wanted it which is full width in blue with load more written on there and we can see we've got some basic information the title of the post the actual basic content of the beginning of the post and if we take our mouse off that you can see we've got the actual image from the featured image of the post so there's one style and you can see we can come over those we get some nice animation effects and it's set it's all quite nice and visual but let's just say that's not what we're looking for let's go back into the editor and adjust that I will just change some of the settings in this so let's go and choose a different item design and we'll say let's go for scale with rotation and the load mode button well I don't like the blue on that so I'm going to go for classic gray I'm going to have that I don't want to be full width this time and I'm going to specify our own to be a large button and we're going to have it set to square so let's just save the changes on that update our page switch back over to the front end of the site I will refresh that and we'll see now the new grid layer that we've got applied to our page so you can see a completely different style a completely different design different mouse-over effect all the basic information is still there we've still got the image we've got the title of the post we've got the sort of cut an abbreviated version of the content of the post but we now have a read more button and if we scroll to the bottom you can see our load more button it's slightly different if I click on that that'll load in an extra post if we had eight or twelve posts or 18 posts then it would load these in in groups of six which is what we defined originally so you can see it's quite a nice way of laying out the information so instead of having your typical standard blog page you can get a little bit more creative and you can specify how you want your page to appear with posts so this is the post grid we're going to take a look now at the media grid and how that works slightly differently but the options that gives us and how we can use it so let's take a look at that now okay so we're back in the admin and what I'm going to do is I'm going to delete this post grid now we finished with it so I'm just going to throw that away say yes I want to get rid of it and we're click to add the new element and for this example we're going to choose media grid that'll open up the options that are available to us inside that and as you can see we've got some of the same kind of options but what we can do is we can now choose the images we want to display in this media grid so this is going to be great if you want a portfolio or photographs or anything like that so let's just choose some images from our media library I'll just choose that that'll do which is choose six images we'll add those images in and once they are loaded we can now go and set the options so you can see in the same ways we have before we can say how many we want display how we want to display that so we can actually access more so we've got the show all load more button and so on this example just leaves show all grid elements per row again one two three four six the gap how much space you want to allow around each of these images the item design allows us to choose what type of layout we want to use so let's just go for let's have simple overlay and design options allow us to do some other things with the margins and padding's so on the kind things were used to with every of these everybody's plugin elements so let's just say save those changes update our page switch over to the main site I will refresh this page now and we'll see the new layout with different elements so there you go we now have images displayed so we can just click view the larger version of it and we can scroll through those we can play as a slideshow or we can use the thumbnails at the bottom to actually choose whatever you want to jump to next and in the same way we did before we can come back to this and we can just edit this load that up go to the item design and we can change this to a different one so we can say let's try slide with title and caption save the changes on that update this don't just jump back over to the site refresh the page and we'll see the new version of that now available to us so you can see we now have a different style and again we can click to get the larger image up on the exact said we could last time so that's all there really is to these different and elements I hope you found this video useful I hope is giving you some insight into how you could create custom layouts on your website if you have found this useful please hit the subscribe button if you've any comments questions or feedback on this or any of the other videos on our Channel please pop those in the comment section below we read everything you post and we try to come back and answer any questions you may have well until next time take care

23 thoughts on “WordPress Visual Composer Media & Post Grid Tutorial

  1. Grid Builder is absolute confusing… When i want to create custom layout it is impossible! Because there is stil THREE COLUMNS

  2. I want to set a video preview in the post grid that directs me to posts. How can i do that?

  3. How to add post grid or media grid when I dont have this option in my Visual Composer? How to add it?

  4. Thanks for the great video!

    I'm trying to add a post grid with 3 pages inside. Therefore I went to Data Source> List of Id's and typed in the titles of the pages. I even tried to type in the page id's but nothing worked. The Pages are not found and the post grid appears empty. I also tried it via Data Source> pages but still the same problem.

    Any ideas why this isn't working? Thanks in advance!

  5. Thanks for the tutorials. Do you have a video on how to add documents and video to the masonry grid?

  6. Hi WpTuts! Thx for your videos. One question: How can I make a custom grid with my custom heights and widths and different numbers of posts on each row (eg. 2 – 1 – 2)

  7. I did all of this… and the background color of the columns will not change, despite changing them and trying to override with !important in css, help?

  8. dear sir,
    how to remove the read more button in post grid and also how make the picture like light box ?

  9. Hi Thank you for the tutorial. I have placed this post grid in a certain page and would like to have only the posts of this page to be in the post grid, but it also shows post from other pages too?

    How can I solve this?

    Thank you, Thatthana

  10. Why do I not see the post grid element in my visual composer when I try to add an element to my page? Any ideas? It's been driving me nuts for days!!

  11. I use visual composer. My sites is nicely arranged in Chrome, but certain parts get messy in most other browsers. I don't see any difference in css in dev tools.

  12. Thanks for this tutorial!
    Btw, did you make a video about the custom made designs for the Item Designs?

Leave a Reply

Your email address will not be published. Required fields are marked *