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. 

Advanced

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

12 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *

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