Free Download

Gutenberg Image Block Tutorial

Table Of Content

Introduction

Use the power of visuals on your WordPress website with Gutenberg Image Block! Showcase products, create captivating galleries, illustrate key points, optimize for search, and edit right in Gutenberg. Transform your content and elevate your website’s design for a truly engaging user experience.

Visit Demo Page
Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Image Block?

Insert the Premium Image Block into your Gutenberg editor, then decide whether to upload an image or select an already existing one by clicking on the “Media Library”.

01. General Settings

Once you select the image, you will be able to adjust the following controls.

  • Image Size: Control the image size by selecting from [Thumbnail, Medium, or Full Size].
  • Object Fit: Decide how the image should be resized to fit its container while maintaining its aspect ratio. You can select from [Fill, Cover, or Contain].
  • Alignment: Align your image to the [Left, Center, or Right].
  • Overlay Color: Add an overlay color to your image. This option could be enabled or disabled.
  • WP Lazy Load: Improve the page loading times and overall performance by loading only the images that are necessary for the user’s current view, rather than all images on the page at once. This option could be enabled or disabled.
  • Image Caption: Add a brief text description or caption for the image.
  • Caption Alignment: This setting adjusts the alignment of the image’s caption text with options for left, center, or right alignment.
  • Alt Text: Add a brief description of an image that is used by screen readers for visually impaired users, as well as displayed if the image fails to load.

If the ‘Enable Caption’ or ‘ALT TEXT’ features are activated, any pre-existing caption or alternative text that was input during the image upload will be automatically displayed.

Premium Image Blocks - General Settings, image size, object fit, etc.
Image Block for Gutenberg Editor
02. Gutenberg Image Mask Effect

Apply a mask or a specific shape to your Gutenberg Image Block. This option includes built-in illustrated shapes or you can upload your own by selecting the “Custom” option. The currently available image masks are:

  • Circle
  • Hexagon
  • Sketch
  • Flower
  • Triangle
  • Blob
  • Custom
  • Mask Shape: Choose the shape of the mask that will be applied to the image.
  • Mask Size: Adjust how the mask fits the image. The “Fit” option suggests that the mask will be scaled to fit the entire image.
  • Mask Position: Determine the position of the mask over the image. “Center Center” likely means that the mask will be centered both horizontally and vertically over the image.
  • Mask Repeat: Control whether the mask pattern is repeated over the image. “No Repeat” indicates that the mask will appear only once rather than tiling across the image.
Premium Image Blocks on Gutenberg editor - Mask Settings size, type, position or repeat
Gutenberg Image Mask Options

Gutenberg Image Block Styling Controls

  • CSS Filters: You can customize the image style by selecting one of the available filters: Blur, Brightness, Contrast, Saturation, or Hue.
  • Custom Image Width: Adjust the image width. Units can be pixels (px), ems (em), or percentages (%).
  • Custom Image Height: Adjust the image height of the image. Also measured in px, em, or %.
  • Opacity: Control the transparency level of the image on the normal/hover state.
  • Overlay Color: Set a color overlay that appears over the image on the normal/hover state.
  • Image Hover Effect: Select an effect that occurs when a user hovers over the image with a cursor such as Zoom In, Zoom Out, Scale, Gray Scale, Blur, Bright, Sepia, and Translate.
  • Border: Add a border around the image. You can define the style, width, and color of the border.
  • Border Radius: This control gives you the ability to make the image corners rounded. Values can be set separately for the top, right, left, and bottom edges.
  • Box Shadow: Add a shadow around the container to create depth or highlight.
  • Margin: Modify the spacing around the caption, with individual control over the top, right, bottom, and left margins.
  • Padding: Set the inner spacing of the caption, again with separate weights for top, right, bottom, and left.
Premium Image Block - Gutenberg Style image style settings with options for CSS filters, custom image width and height sliders, opacity control, and overlay color toggle
Gutenberg Image Block Styling Controls
Caption Style
  • Typography: Allows you to adjust the font properties of the caption text, including font size and font family.
  • Color: Provides a color picker to choose the text color for the caption.
  • Margin: Adjust the space outside the image’s caption and its border.
  • Padding: Add space between the image’s caption and its border.
Gutenberg Image Block Caption Styling Controls typography, color, margin etc
Gutenberg Image Block Caption Styling Controls

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support
Facebook Group

Global Features

Help Center

Our Products

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks