How to create an animated WordPress Image Grid Gallery.
As humans, we have a strong attraction towards the visuals. On the web, when it comes to plain text versus text with images, text with images always wins. We are more likely to enjoy a read if it has some illustration than if it is just plain boring text. That is why image galleries are a big deal when it comes to giving life to a website. One of my favorites are Image Grid Gallery. Which are basically a collection of images arranged to look like a grid, something similar to this bellow:
A good example of an Image Grid Gallery
When done correctly an Image Grid Gallery can take your WordPress site to the next level. Visitors are more likely to stay around if they like what they see, and if they can find what they are looking for easily. And if on top of that you add some sort of animation you are all set! In this post I will show how you can easily create an Animated Image Grid Gallery for your WordPress site. First of all let me say that you don’t have to be a coder or have any coding knowledge to accomplish this task. This is all going to be done visually, using a WYSIWYG interface to create your image animations. So without further due, let’s get started.
First of all we are going to need a plugin to get this done. The name of the plugin is Visual Slide Box Builder. The main idea of this plugin is to help users with no coding experience achieve an awesome looking WordPress Image Grid Gallery. The plugin offers a free version and a Pro version which incorporates responsive layouts. We are going to be using the Pro version since we need the responsive layout for the purpose of this demo. You can get the Pro version here it only cost $9, or feel free to experiment with the Free Version.
Visual Slide Box Builder
Once you install the plugin, we are going to get right into the action and start creating our animated images so we can place them on a grid. After installing the plugin, you can find it under Settings:
Finding the plugin
Navigate to the plugin and you should see the WYSIWYG interface which looks like this:
Note the layout options right under the left side box. There are 4 type of layouts, Inside a div, Four, Three, and Two. These represent how many images you can align next to each other in a row. So if you would like to create a four by four image grid you would pick the four layout, allowing you to place four consecutive images in each row. For our demo,w e are going to do a 3 X 2 image grid gallery. You can see the final result here.
We are going to need a large image that we will divid in equal parts, in this case 2 rows and 3 columns. I have chosen this image because I think is cool. But you can choose any image you like. Or it can be individual image per square, it doesn’t have to be just one image.
You can use any Image Editing Software such as Photoshop to slide the image into the 3 smaller images we need. We are going to use each individual smaller image and create an animation effect different for each square. So let’s start with the first one.
First block in the image grid gallery
Let’s go back to the plugin, and set the dimensions for our block. These will be 360 X 339. Next under the “BOX” settings let’s upload the first image as background image. Next we will need another image of the same dimension with some text, and this one will go under “LIT” as the background image. Then we simple need to se up the layout option, so we are going to select “Three” so we can have 3 columns in our grid as we discussed earlier. Then all we have to do is save and get the shortcode. So now we have something that looks like this:
The process after this is pretty repetitive, all you have to do is the same for all 5 remaining blocks. And after some repetition we have a beautiful Image Grid Gallery that is also animated.
This plugin allows you to create powerful and good looking image galleries in the form of grids. This can have a really positive impact on your website and reduce your bounce rate by better capturing your visitors attention and get them to interact more on your site.