Complete Guide to Adding Images in the WordPress Kadence Theme

When writing a blog post, the two most important elements are text and images. While writing comes naturally, inserting images can be challenging if you’ve just installed the Kadence theme for the first time.

So, let’s take this opportunity to fully organize and clarify the process!

I try to be as accurate as possible when writing blog posts, but sometimes there are errors in the information. If you find one, please comment and I will correct it. If you make a purchase using a link on this blog, I will receive a small commission.

Here’s a YouTube video that explains this post – it’s even better if you watch it together! 🙂

Kadence Theme Image Block vs. WordPress Default Image Block

Before explaining how to insert images in the Kadence theme, it’s important to distinguish between the default WordPress image block and the Kadence theme image block.

WordPress Default Image Block

The default WordPress image block appears when you type “/image” in the block editor. It is displayed in black text.

Kadence Theme Image Block

The Kadence theme image block is labeled “Image (Adv)” in English and has a blue icon. You can see the difference in the image below! 🚀

Would you like to explore how to use these blocks effectively?

When you capture a screen (Windows shortcut: Shift + Win + S) and paste it into the WordPress block editor, it will be inserted as a WordPress image block.

Additionally, the menu displayed above the image will be slightly different depending on the block type.

By left-clicking on the image, you can check the menu at the top to determine whether you’re using a WordPress image block or a Kadence image block.

Difference in Menu Options Between the Two Image Blocks

I almost always use the Kadence image block when inserting images because it allows for more precise adjustments. By clicking on both blocks and checking the detailed menu on the right, you’ll notice a clear difference between them.

WordPress Default Image Block Menu

It has a relatively simple menu structure. There are options for image styles, adding alternative text, adjusting image ratio, size, and resolution.

Kadence Image Block Menu

It looks much more complex, doesn’t it? And what you see is just the beginning—there are submenu options, meaning the related settings are spread across three subgroups.

Explaining just the image block menu alone could easily take 40 minutes! That’s how detailed the customization options are, allowing for precise image adjustments.

So, in this post, I’ll walk you through the exact process I follow when inserting images into my WordPress blog.

How to Insert Images in the Kadence Theme

1. Copy and Paste Images

The easiest way to insert images is by capturing a screenshot or dragging and dropping an image file. This method is convenient, and even though screenshots are saved as PNG files, it’s not an issue.

The Image Resize plugin, installed during the WPlaybook initial setup, automatically converts images to JPG format, so you don’t need to worry. Additionally, the LiteSpeed Cache plugin will further convert JPG images to WebP format for better optimization.

2. Convert to Kadence Image Block

When you paste an image, it is automatically inserted as a standard image block.

To convert it into a Kadence Image Block, click the image icon in the top-left menu. This will open the “Transform to” menu, where you can select the Kadence Image Block for better customization. 🚀 Would you like me to continue with the next steps?

As shown in the image, you can convert a standard image block into a Kadence image block.

3. Set the size and resolution

The first thing to adjust is the image size and resolution. In most cases, horizontally long images are uploaded. The Kadence Image Block offers four size options.

• Thumbnail
• Medium
• Medium large (recommended)
• Source file

I almost always choose Medium Large. It reduces the loading size of the page while still allowing the image to be clear enough to recognize.

4. Alignment, Caption, and Alt Text Settings

When selecting Medium Large, the image does not always fill the full width. Therefore, it’s best to center-align the image and add a caption.

dditionally, make sure to fill in the alt text in the right-side menu! Think of it as providing an image description for visually impaired users. This is also an important factor in Core Web Vitals scoring.

5. Adding Box Shadow Effect (Optional)

This is optional, but many users choose to apply it.

To enable the Box Shadow effect, go to the Style submenu in the right-side menu and activate the Box Shadow button

This effect is clearly visible in the white image above, while for regular images, the shadow appears subtle yet sophisticated.

In the two images below, the left one has no shadow, while the right one has the shadow effect applied.

I hope you like it, lol

6. Finalize the link to the original file (important)

This is a setting to increase the display of full-screen ads in AdSense automatic ads.

Make sure to add a link to the image—an external link works well, but if there’s no suitable external link, you can simply link to the original file.

Now you understand why we use lower-resolution images initially, right? By clicking the insert link button and selecting media file, the image will be linked to its original high-resolution version.

This ensures that when users click the image, they see a higher-quality version.

By setting it up this way, it meets the full-screen ad activation conditions, so once the refresh time for full-screen ads has passed, the full-screen ad will be displayed.

Conclusion

At WPlaybook, we explore various ways to monetize WordPress blogs. The Kadence theme is my absolute favorite! 😆

If you have any questions about WordPress in general or Kadence-related topics, feel free to join our WPlaybook community! 🚀