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.
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.
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.
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.
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.
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.
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.
This is a great addition Kadence team!
How does one remove the right margin and center an image in a block?
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.
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?
You can add a link to the Advanced Image Block under Link Settings. You can even set this to be a dynamic link if you’re using Kadence Blocks Pro. The Kadence Advanced Gallery might be able to do what you’re looking for with a grouping of images. https://www.kadencewp.com/kadence-blocks/custom-blocks/advanced-gallery/
Thank you!
Can I add Text and a Button over an Advanced Image Block ?
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.
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?
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/
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)?
Please do add a feature request so our team and the community can see your idea! https://www.kadencewp.com/kadence-blocks/feature-requests/