Media Grid Image Gallery in Visual Composer

Media Grid image gallery in Visual Composer

Get a copy of the transcript of this guide (pdf)


User the back-end editor of the Visual Composer


Image grids are a great way of showing a collection of photos in a grid pattern. Let’s try to add media grid element using the back-end editor of the Visual Composer.

To add an image grid element, click on the + icon in a column.

Select the Media Grid element


After clicking the + icon, the Add Element box will pop-up. Select the Media Grid element. If you’re having a hard time finding the Media Grid element, click on the Content tab to filter out some of the contents.

Media Grid Settings will pop-up


After selecting the Media Grid element, the Media Grid Settings box will pop-up. To select the images that we need to add inside the media gallery, click on the + icon.

Select the images that you want to add inside the grid


We are now in our Media Library. Let’s select 9 images to be part of our image gallery. At the bottom of the Add Element box, we can see the images that we have selected. Also, if you still need to upload the images that you need to add inside the media gallery, click on the Upload Files tab to upload the files that you want. Once done, click on Add Images.

Edit some of the properties then click Save Changes


As you can see, the image that we have selected is now added inside the media gallery. These are also some of the properties that we can manipulate inside the Media Grid Settings:

  • Display style
    • Show all
    • Load more button
    • Lazy loading
    • Pagination
  • Grid elements per row
    • 1, 2, 3, 4, and 6
  • Gap (the gap between images)
    • 0px, 1px, 2px, 3px, 4px, 5px, 10px, 15px, 20px, 25px, 30px, 35px
  • Initial loading animation
    • None
    • Attention Seekers
      • bounce
      • flash
    • Bouncing Entrances
      • bounceIn
      • bounceInDown
    • Fading Entrances
      • fadeInDown
      • fadeInDownBig
    • Flippers
      • flip
      • flipInX

For Grid elements per row property, let’s have 3 since we’ve got 9 images inside your grid. For gap, let’s have 10 pixels. For Initial loading animation, let’s have fadeIn. Once done, click on Save Changes then Close to close the settings.



Now, as you can see, we have now our 3-grid elements per row grid. The neat part about this is you can click on the picture to view it in a bigger size.

Image inside a lightbox


When you click on an image, the image will be placed inside a lightbox. You can now see the image in great detail. For your convenience, you can also see the other messages by hovering over the picture and click on the navigation bar or you can select the image located at the bottom of the lightbox.