How to Create a Beautiful Image Gallery in WordPress!

As bloggers, we’re always striving to share engaging content with our readers. I recently discovered a new feature that will up our game.

---

---

Before we Jump in

I know many fellow bloggers are hesitant to use the new Gutenberg editor. I totally get it. I was resistant to change, too. The first time I tried to use it, I gave up after 10 minutes. It was frustrating and I was on a mission to write content. So I quickly returned to the old editor. Saved by familiarity.

But I made a mental note to check it out again when I wasn’t pressed for time or focused on writing content. I’m so glad I did. Gutenberg is a blogging game-changer. You’re most welcome to pop by my Blogging with Gutenberg series where I share tips on using the editor with ease. ♥

Gutenberg has so many awesome features, but it gets better. There are numerous Plugins we can use with Gutenberg. Harnessing these tools together offers amazing options to create engaging content. AND they are free and super easy to use.

When I discovered the Image Gallery feature with Kadence Blocks – Gutenberg Page Builder Toolkit Plugin By Kadence WP, I was eager to put it to use. The customization features make it the most versatile Image Gallery I’ve found in six years of blogging.

In today’s post, I’m setting out to introduce this little gem ~ Image Gallery by Kadence Blocks. ♥

You can download the Kadence Blocks Plugin here. Or visit their website below.

Kadence Blocks – Gutenberg Page Builder Toolkit By Kadence WP

---

Blogging to Success ~ Complete Step-by-Step Series

Creating an Image Gallery

First, we add a Block. If you’re not sure how to add Blocks in Gutenberg, you’re most welcome to pop by my previous post ~ Getting Started with Gutenberg ~ A How-To Guide for Creating Engaging Blog Posts with Gutenberg.

If you added the plugin, you’ll see it listed in your Block Categories, as shown in the image below.

---

---

Let’s open Kadence Blocks.

---

---

When we open Kadence Blocks, we’ll see a variety of options. For this tutorial, we’re using the Option ~ Advanced Gallery.

---

---

Once we add the Advanced Gallery Block, we’ll see a Gallery box template like below. We can Upload images or choose from our Media Library.

---

---

This will open a Create Gallery window. From here, we just need to select the images to add to our Gallery.

Once our images are selected, we click on Create a New Gallery in the bottom right corner.

---

---

We can Rearrange Images and add/edit Subtitles. When we’re done, we just click on Insert Gallery. We can return and edit at any time.

---

---

The Image Gallery will display. It may look different from mine. This is where we get creative!

To the right, we see a list of elements/tabs we’ll be using. Each element/tab has its own drop-down menu.

---

---

If you don’t see it, click on the Settings tab on the right of the Publish tab. Then click on Block.

---

---

Let’s click on the Gallery Settings tab. Here we see that we can choose the Gallery Layout.

I chose the Slider layout. We can select the Image Ratio from a variety of options. I chose Portrait 2:3. Then we can choose the Thumbnail Image Size. I chose Full.

TIP: If your images appear really large, you can adjust the size via the Gallery Spacing tab. We’ll cover this too. I had to do this. An easy fix!

---

---

Next, let’s click on the Carousel tab. Here we can customize the Autoplay Speed and Transition Speed.

I set my Autoplay to 2000 and Transition to 400.

We can also choose the Transition Arrow Style and Dot Style.

---

---

Next, let’s click on the Link Settings tab. From here, we can link each image in our Gallery to another file or add a Custom Link.

I added Custom Links to every image. This will bring readers directly to that blog post. This is an awesome feature to have access to.

Marketing Tips/Suggestions

• If our images are snippets of book reviews, we can link directly to the complete review.
• If the images are our book covers, we can link directly to the source. Woohoo!
• If we’re showcasing our products or services, we can link directly to that content.

---

To add a Custom Link, we need to select Custom from the Link To options under Link Settings.

To add the Custom Link, we need to click on the image. We’ll see that it’s active when a blue border appears. An Add URL box will appear. We just enter the relevant URL. To ensure readers can view the source while remaining on our website, we need to click on the arrow (Link Settings) and then turn on Open in New Tab, as displayed in the image below. Easy peasy, my friends!

---

---

Next up is the Image Style tab. Here we can increase the Border Radius to round the edges. We can also add an Image Filter.

---

---

There are numerous Image Filters to choose from. This is what the Mayfair Filter looks like. It’s a subtle difference. Other options like Sepia and Vintage add quite a dramatic effect. Cool stuff!

---

---

Let’s look at Caption Settings. If we choose to Turn On/Show Caption, we’ll see more customization options. We can choose the Caption Placement, Caption Background, and Font Size and Style.

---

---

We can further customize the Caption Typography.

---

---

Under the Image Shadow tab, we can add and fully customize a Shadow effect.

In the image below, you can see I added a soft pink shadow. I decided not to keep it when I finalized the Image Gallery.

---

---

The next step is setting the Spacing of the items within the Image Gallery. As I mentioned early, my images were quite large even after I set the Image Ratio. I was able to decrease their size by adding a Margin. A 175 Margin worked best for me.

We can also add an HTML Anchor and Additional CSS via the Advanced tab. I left this empty.

---

---

And we’re done!

If you haven’t been using an Image Gallery, I hope this post encourages you to jump on board.

Have a tip you’d like to share? A question, perhaps? Please feel free to share in the comments below.

Until next time … happy blogging, my friends! ♥

---

Popular Blog Posts

---

---

---