How To Build Media Grid With Visual Composer (WPBakery)

Grid lets us display images in a beautiful way & customize it. Here is a quick guide to build media grids in WPBakery Visual Composer in WP

By Claudio Pires
Updated on July 25, 2022
How To Build Media Grid With Visual Composer (WPBakery)

Media Grid allows you to display your images in a beautiful way or you can customize it if you like. Here is a quick guide on how to add a media grid easily using the Page Builder Visual Composer WordPress plugin (WPBakery).

1. Firstly, add a new page/post. Write the title and click on Add Element > Media Grid

How To Build Media Grid With Visual Composer (WPBakery)
add a new element on the page

Secondly, Search for the element and click on it to open the editor window.

How To Build Media Grid With Visual Composer (WPBakery)
page builder element select

2. In addition, click on the + button to add images from your WordPress media library or upload new images.

click on the + button to add images from your WordPress media library
add media

3. Select the images that you like to add to your page and click on Add Images to build your media grid.

Select the images that you like
media upload / select

4. Under Media Grid Settings, you can customize the settings however for now we will just save changes to preview if our images will display.

Media Grid Settings
editor tab

5. Finally, Save your page/post and view it online.

Here is the default media grid display.

 default media grid display
grid display

You can also change the number of grid elements per row. So, to do this, go back to the page editor and click on the “Edit Media Grid” pencil icon, then change posts Elements per row to build your media grid.

Edit element WordPress editor window
edit settings button

Change Grid Elements per row to 6 rows, save it, and view it online.

Grid Elements per row
6 columns design

You can also experiment with the item design. So, this will give you a more customized option based on your needs. Moreover, below are some sample outputs.

experiment with the item design
style settings

By Default all Visualmodo WordPress themes includes the premium Visual Composer WordPress plugin. So, you can do it very easily, saving money and time doing amazing pages on your WordPress.

Media and Masonry Media Grid With Visual Composer WPBakery

Create Media or Masonry Grid with WPBakery Page Builder and use images from WordPress Images Library.

Moreover, starting from WPBakery Page Builder (formerly Visual Composer) version 4.4 there are new grid elements available:

  • Firstly, Post Grid
  • Secondly, Post Masonry Grid
  • Media Grid
  • Finally, Masonry Grid

Grid elements are available under the WPBakery Page Builder element menu.

Note: “Post Grid” and “Masonry Post Grid” allow displaying posts, pages, and custom posts type. So, for Example, Woo Commerce Products) in a grid format.

See the video

Claudio Pires

Claudio Pires is the co-founder of Visualmodo, a renowned company in web development and design. With over 15 years of experience, Claudio has honed his skills in content creation, web development support, and senior web designer. A trilingual expert fluent in English, Portuguese, and Spanish, he brings a global perspective to his work. Beyond his professional endeavors, Claudio is an active YouTuber, sharing his insights and expertise with a broader audience. Based in Brazil, Claudio continues to push the boundaries of web design and digital content, making him a pivotal figure in the industry.