Media Grid Image Gallery in Visual Composer

Media Grid image gallery in Visual Composer

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

media-grid-image-gallery-in-visual-composer

User the back-end editor of the Visual Composer

media-grid-image-gallery-in-visual-composer-1

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

media-grid-image-gallery-in-visual-composer-2

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

media-grid-image-gallery-in-visual-composer-3

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

media-grid-image-gallery-in-visual-composer-4

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

media-grid-image-gallery-in-visual-composer-5

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.

Output

media-grid-image-gallery-in-visual-composer-6

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

media-grid-image-gallery-in-visual-composer-7

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.

Sliders and Faders with Visual Composer Image Gallery Element

Sliders and Faders with Visual Composer Image Gallery Element

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

sliders-and-faders-with-visual-composer-image-gallery-element

Use the back-end editor of the Visual Composer

sliders-and-faders-with-visual-composer-image-gallery-element-1

The image gallery element in the Visual Composer is a great little image slider. So, if you want to show a few images in a sequence, this is the way to do it.

Let’s try to add an image gallery element. First, click on the + icon to add an element inside a column.

Select Image Gallery element

sliders-and-faders-with-visual-composer-image-gallery-element-2

After clicking the + icon, an Add Element box will pop-up. Select the Image Gallery element. If you’re having trouble finding the Image Gallery element, proceed to the Content tab to filter out some elements that are not under Content.

Image Gallery Settings box will pop-up

sliders-and-faders-with-visual-composer-image-gallery-element-3

After selecting the Image Gallery element, its settings will pop-up. These are some properties that you can manipulate inside the Image Gallery Settings:

  • Widget title
  • Gallery type
    • Flex slider fade (fade in and fade out between the images)
    • Flex slider slide (shoots the images to the left as you progress between them)
    • Nivo slider (kind of tiled or column slide-up)
    • Image grid
  • Auto rotate – The number of seconds between the rotation.
    • 3, 5, 10, 15, and Disable
  • Image source
    • Media library
    • External links
  • Images
  • Image size
    • thumbnail
    • small
    • medium
    • large
    • full size
    • custom size (200×300, 450×320, and etc.)
  • On click action

To be able to select the images that we want to be added to our gallery, click on the + icon under Images property.

Add images to the gallery

sliders-and-faders-with-visual-composer-image-gallery-element-4

Let’s select three images to be added to our gallery. As you can see, at the bottom of the Add Images box, your selected images are also shown. If you want to clear your selection, you can click on Clear. If you want to upload the images that you want to select, click on the Upload Files tab. Once done selecting, let’s set our images by clicking on Set Images.

Save Changes

sliders-and-faders-with-visual-composer-image-gallery-element-5

As you can see, we have now added the images in our gallery. If you have no more changes, click on Save Changes then Close to close the settings.

Click on Preview Changes

sliders-and-faders-with-visual-composer-image-gallery-element-6

As you can see, inside the column is our image gallery. We can also see the images that we have set inside the Image Gallery Settings. To preview our changes, click on Preview Changes.

Output

sliders-and-faders-with-visual-composer-image-gallery-element-7

So this is a great way of doing a little image gallery in Visual Composer. You can manually slide the image by clicking on the black circles located under the image or you can also hover your mouse over the image and you can see an arrow to slide the images.