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.
Upon selecting the Advanced Image Block, you’ll be prompted to select the image from your media library or via URL.
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.
Add margins and padding for your images to add greater control over how your images are displayed without writing a line of CSS code.
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.
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.
Add a drop shadow or a box shadow to your image right within the block editor.
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.
With the Advanced Image Block, colorize your captions and choose new fonts, and customize your caption settings for desktop, tablet and mobile devices.
Add greyscale, sepia, saturation, vintage, earlybird, toaster, and mayfair filters.
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.