
Display Image with lot of style, button and overlay in Gutenberg Post Blocks.
Settings
- Image
- Upload Image: Upload your image via WordPress default media uploader.
- Image Alt Text: Change your image Alt text in here.
- Link Type: Type of link you want to use. “Link” and “Button” type is used in here.
- Link: Put the link in here.
- Link Target: Set your link target.
- Button Text: Change your button text from here.
- Button Link: Set your button link in here.
- Button Link Target: Set your button target.
- Button Position: Set position of the button over image.
- Caption Enable: Enable caption of the Button.
Style
- Image
- Hover Animation: Use this Dropdown to choose an image on hover animation.
- Image Align
- Width: Use this slider to overwrite image width.
- Height: Use this slider to overwrite image height.
- Gray Scale: Use this slider to change the image grayscale.
- Radius: Use this field to change the border radius.
- BoxShadow: Use this group field to select shadow, inset & color in this option.
- Margin: Use this field to change the margin of the image.
- Overlay: Use this switch to show the overlay.
- Overlay Type: Use this dropdown to show the overlay type.
- Custom Color: Use this color picker to pick overlay color.
- Overlay Opacity: Use this slider to change the overlay opacity.
- Caption
- Alignment: Choose alignment of the Caption.
- Caption Color: Use this color picker to pick caption color.
- Caption Typography: To change font family, font weight, font size, line height, letter, spacing, transform, text decoration.It support for responsive settings.
- Caption Margin: Use this field to change the margin of the image.
Advanced
- General
- ID: Use this field to add an ID to the block.
- Z-index: Use this field to change the z-index of the block.
- Margin: Use this field to change the margin of the block.
- Padding: Use this field to change the padding of the block.
- Background: Use this color picker to pick a background color.
- Border: Use this group field to change border width, style and color.
- BoxShadow: Use this group field to select shadow, inset & color in this option.
- Border Radius: Use this field to change the border radius.
- Custom CSS: Add Custom CSS via this field.
- Advanced
- Additional CSS class: Add CSS class to the block.