Image Block
Image Block options:
- Alignment – set the image alignment. Choose from left, center, right, wide and fullwidth. This option is available at the top block panel.
- Image – to add the image, click on the icon in the center of the block. Choose an image from your WordPress Media Library or upload a file from your computer.
- Image alternative text – add image alt text.
- Title – add a title to your image.
- Image width – set image width in pixels.
- Image height – set image height in pixels.
- Link URL – you can add a link to your image.
- Link rel parameter – you can set “rel” attribute here
- Deeplink – choose whether your image’s link is going to appear as a deeplink. More info here.
- Deeplink tooltip – add a deeplink tooltip.
- Where to open the link – choose where to open the link: default, new window/tab, or lightbox.
- Additional image class – you can add a CSS class you want to attach to the image, and not the whole block.
- Top margin – set the top margin. Use any CSS-compatible margin value.
- Bottom margin – set the bottom margin. Use any CSS-compatible margin value.
- Top margin (mobile) – set the top margin for mobile devices. Use any CSS-compatible margin value.
- Position on mobile – set the image position on mobile devices to left, center, or right.
- Max width – set the image maximum width. Use any CSS-compatible value.
- Apply fancy border – you can add a decorative border to your image.
- Border width – set the image border width.
- Border spacing – set the spacing between the image and the border.
- Border color – set the image border color.
- Hover effect – add a hover effect to a linked image, choosing from Zoom in, Zoom out and Reversed greyscale, or use the default hover effect from Customize > General.
- Rounded corners – set the corner radius for all image corners. You can use pixels or percentages for each corner.
- Use shadow – enable or disable image shadow.
- Shadow color – set the color of the shadow.
- Shadow blur – set the blur of the shadow.
- Horizontal offset – set the horizontal offset of the shadow.
- Vertical offset – set the vertical offset of the shadow.
- Shadow type – set the shadow type to outer or inner.
- Use shadow (on mouse hover) – enable or disable image hover shadow.
- Shadow hover color – set the hover color of the shadow.
- Shadow hover blur – set the hover blur of the shadow.
- Hover horizontal offset – set the hover horizontal offset of the shadow.
- Hover vertical offset – set the hover vertical offset of the shadow.
- Filters – default state – add an image filter, choosing from:
- Grayscale
- Blur
- Sepia
- Saturate
- Opacity
- Brightness
- Contrast
- Hue
- Invert
- Filters – mouse over – add an image filter on mouse hover, choosing from:
- Grayscale
- Blur
- Sepia
- Saturate
- Opacity
- Brightness
- Contrast
- Hue
- Invert
- Animation – you can add animation to your image.
- Animation delay (in milliseconds) – set animation delay.
- Animate anytime this block enters the viewport – you can choose to animate the block anytime it enters the viewport, instead of only once.
- Class – add a custom CSS class to your image.
- ID – add a custom CSS ID to your image.
- Style – add an inline CSS style to your image.
- Additional CSS Class (Advanced) – add additional CSS class to your image.