Introducing the Kadence Advanced Image Block

Kadence Advanced Image Block
Styling images with the Advanced Image Block.

The Kadence team is excited to introduce the Advanced Image Block, a new block available in Kadence Blocks version 2.2.0+. This new block gives site owners using Kadence greater control over how their images are displayed. Add animations on scroll, shadows, masks, and filters, right in the block editor.

When adding images to your posts using the standard WordPress image block, there are only a couple of settings available for styling those images. While there are options for adding additional CSS for styling, the Kadence team wanted to provide an easier, no-code way to present stunning visual images on WordPress sites. 

Using the Advanced Image Block

The Advanced Image Block is added to your site using the free Kadence Blocks plugin. Simply update to the latest version of the free Kadence Blocks plugin and the Advanced Image Block is available to your site. You can use the Advanced Image Block anywhere you would use any other block including within posts, on pages, or even when building out Kadence Elements Templates

Using the Advanced Image Block is simple. When adding a new image block, choose the “Advanced Image” block from the list of available blocks. 

Kadence Advanced Image Block

Upon selecting the Advanced Image Block, you’ll be prompted to select the image from your media library or via URL. 

Selecting an Advanced Image in the block editor

Once you’ve chosen your image within the Advanced Image Block, you can begin to start styling that image right in the block editor. 

Settings Available via the Advanced Image Block

There are a number of settings available via the Advanced Image Block settings that can add visual interest to your website. 

Spacing Settings

Add margins and padding for your images to add greater control over how your images are displayed without writing a line of CSS code. 

spacing settings

Border Settings

Add a border to your images and select your color for your border, or add a border radius to round the corners or your images.  

kadence advanced image border settings

Link Settings

Add a link to your image, and if you’re using Kadence Blocks Pro, you can even add dynamic links based on parameters available to your post or page.

Shadow Settings

Add a drop shadow or a box shadow to your image right within the block editor. 

shadow settings

Mask Settings

Change the shape of the image displayed by selecting one of the mask settings. Select circle, diamond, hexagon, rounded, one of the blob settings, or customize the mask based on an image you upload to your site. 

mask settings
The blob 3 mask applied to an image using the Advanced Image Block.

Caption Settings

With the Advanced Image Block, colorize your captions and choose new fonts, and customize your caption settings for desktop, tablet and mobile devices. 

Image Filter

Add greyscale, sepia, saturation, vintage, earlybird, toaster, and mayfair filters. 

The greyscale filter applied to an Advanced Image Block.

Animate on Scroll (pro)

For those using Kadence Blocks Pro, animate your images when your site visitors scroll. There are numerous ways to add animations to your images including fading, flipping, sliding, and zooming animations. This visual presentation adds feedback on scroll, engaging audiences.

Conditional Display (pro) 

If you’re using Kadence Blocks Pro, add conditional display parameters to show (or not show) your Advanced Image Block based on a variety of conditions. 


Add HTML anchor to your image or even your own CSS if desired. 

Kadence Blocks Continues to Innovate

The Advanced Image Block is just the latest innovation to come from the Kadence team. Available in the free Kadence Blocks plugin, you’ll see the Advanced Image Block when you update to version 2.2.0 or later. As well, the Kadence Advanced Image Block has a number of pro features available for those using the Pro version available in all of the Kadence Bundles


    1. Using the row layout block and putting your advanced image block within the row layout gives you an extra method of control. Both blocks have margin and centering capabilities.

  1. This is great! I am wondering if it possible to have another image that pops upp when you click and/or also a slideshow of images when you click?

    1. Not at this time. The best way to do what you’re asking is to add a Row block, then add an image to background overlay settings. Then you can add text and buttons within that row block that will go over the image in the Row block’s background overlay image.

  2. I’d love to see an option to control the container and the image padding separately. There is no way to provide padding on the image inside the box – padding only affects the overall container relative to it’s placement in the section or row. Am I missing something?

    1. There are padding and margin settings in the “Spacing Settings” for the Advanced Image Block, and there are more controls available if you add an advanced image block inside of a Row Layout block as well. If there’s something you would like to see, please do add a feature request so our dev team and the Kadence community can see your request! https://www.kadencewp.com/kadence-blocks/feature-requests/

  3. Are there plans to add hover options? This block has border radius but image overlay doesn’t. Will one block be able to have both (hover and border radius)?

  4. Awesome. Can I set it globally somewhere to always center align instead of setting it on a per block basis?

Leave a Reply

Your email address will not be published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.