Multi Builder Elements, Multi Theme and Website Builder
3 minutes read

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.