Image widget

The Image widget lets you add and customize images throughout your website.

In addition to displaying an image, the widget includes controls for cropping and focal point, image descriptions, shadows, captions, rounded corners, masks, reveal animations, and click actions.

This makes it useful for everything from simple content images to decorative image sections, clickable graphics, promotional visuals, and image-based calls to action.

This article explains the settings available in the Image widget and how to use them effectively.

Image Settings

Change image

Click Change to replace the current image.

You can then select or upload the image you want to display.

💡 Tip

Use images that are appropriately sized for where they will appear. Extremely large image files can increase page load times, while images that are too small may appear blurry when displayed at larger sizes.

Stretch if needed

Enable Stretch if needed to make the image fill the available image container.

Depending on the proportions of the image and its container, parts of the image may be cropped in order to completely fill the available space.

When Stretch if needed is disabled, the image keeps its natural proportions without using this fill-and-crop behavior.

Focal point

When Stretch if needed is enabled, you can set a focal point directly on the image.

Drag the focal point to the most important part of the image.

For example, if you are using a portrait, you would normally position the focal point over the person's face.

The focal point helps determine which part of the image should remain visible when the image needs to be cropped to fit its container.

💡 Tip

Always check cropped images on both desktop and mobile. Different screen proportions can cause different parts of an image to be cropped, and a well-positioned focal point helps keep the important subject visible.

Image description

Use Image description to add a meaningful description of the image.

When writing image descriptions:

  • Describe what is relevant in the image
  • Keep the description concise
  • Avoid unnecessary phrases such as "image of" when the context is already clear
  • Focus on information that helps explain the purpose or content of the image

Descriptive image information is particularly important when the image contributes meaning to the page.

Shadow

Click Change next to Shadow to add or customize a shadow around the image.

Shadow settings

Shadow type

Choose how the shadow should be displayed:

  • Outer Shadow – displays the shadow outside the image
  • Inner Shadow – displays the shadow inside the image edges
  • None – removes the shadow

Shadow color

Controls the color of the shadow.

Subtle neutral shadows are usually easiest to work with, but the color can be customized to match your design.

Horizontal offset

Controls how far the shadow moves horizontally.

This determines whether the shadow appears more toward the left or right side of the image.

Vertical offset

Controls how far the shadow moves vertically.

This determines whether the shadow appears higher or lower in relation to the image.

Blur radius

Controls how soft or sharp the shadow appears.

  • Lower value = sharper shadow
  • Higher value = softer, more diffused shadow

Spread radius

Controls how far the shadow expands beyond its original size.

Higher values make the shadow cover a larger area around the image.

💡 Tip

For most modern page designs, subtle shadows work best. Large, dark, or highly defined shadows can quickly make a design feel heavy

Image Caption

Enable Add Image Caption to display additional content together with the image.

Captions can be used for:

  • Image titles
  • Descriptions
  • Context or credits
  • Promotional messaging
  • Calls to action

Caption Type

The Caption Type setting controls how the caption is displayed in relation to the image.

For example, a caption can appear over the image on mouse over, creating an interactive image effect.

Choose the option that best matches how prominent the caption should be and how visitors should interact with the image.

Caption Box Style

Click Change to customize the position and appearance of the caption box.

Available positions include:

  • Full size
  • At the top
  • In the middle
  • At the bottom

Full size

The caption area covers the full image.

At the top

Positions the caption area at the top of the image.

In the middle

Positions the caption area around the center of the image.

At the bottom

Positions the caption area at the bottom of the image.

Caption styling

Text Color

Controls the color of the caption text.

Make sure there is sufficient contrast between the text, caption background, and underlying image.

Background color

Controls the background color of the caption area.

This is particularly useful when captions appear over an image, where a background can make the text easier to read.

Heading Font

Controls the font family used for the caption heading.

For consistency, it is usually best to use fonts that match the rest of your website.

Heading Font Size

Controls the size of the caption heading.

Use a size that clearly distinguishes the heading from the supporting caption text.

Caption Font

Controls the font family used for the supporting caption text.

Caption Font Size

Controls the size of the supporting caption text.

Make sure the text remains readable on both desktop and mobile.

Caption Shadow

Click Change to add a shadow to the caption.

The caption shadow uses the same controls as the main image shadow:

  • Shadow type
  • Shadow color
  • Horizontal offset
  • Vertical offset
  • Blur radius
  • Spread radius

Caption content

Caption Heading

Enter the main heading displayed in the image caption.

Keep it short and descriptive.

Caption Text

Enter the supporting text displayed with the caption heading.

Use this for additional context, descriptions, or promotional copy.

Add call-to-action button

Enable this option to include a button as part of the image caption.

For example:

  • Learn more
  • View program
  • Explore course
  • Get started

Add Overlay

Enable Add Overlay to place an additional overlay over the image.

Overlays can be useful when text or other content needs stronger contrast against the image.

Rounded corners

Enable Make corners rounded to round one or more corners of the image.

Click Change next to Corner radius for more detailed control.

Corner radius settings

Top left

Controls the radius of the top-left corner.

Top right

Controls the radius of the top-right corner.

Bottom right

Controls the radius of the bottom-right corner.

Bottom left

Controls the radius of the bottom-left corner.

This makes it possible to create anything from slightly rounded images to asymmetric shapes.

Sync all corners

Enable Sync all corners when you want all four corners to use the same radius.

This is the easiest option for creating a standard rounded rectangle.

Circle entire widget (50% border-radius)

Enable this option to turn the image into a circular shape where the image proportions allow it.

This works particularly well for:

  • Profile images
  • Portraits
  • Team photos
  • Avatars

Image Masks

Enable Enable Mask to display the image inside a predefined decorative shape.

Instead of the standard rectangular image frame, the selected mask determines which parts of the image remain visible.

There are multiple mask styles available, including:

  • Geometric shapes
  • Organic shapes
  • Brush-style shapes
  • Circular and rounded designs
  • Decorative abstract shapes

Click a mask to apply it to the image.

💡 Tip

Masks work best as intentional design accents. Use them selectively so important images remain easy to understand and the page does not become visually crowded.

Reveal animation

Enable Reveal animation to add an animated reveal effect to the masked image.

This creates a more dynamic entrance or transition as the image is revealed.

Reveal overlay color

Controls the color used during the reveal animation.

Choose a color that works with both the image and the surrounding page design.

For consistency, consider using one of your website's Global Colors.

💡 Tip

Animation attracts attention, so use reveal effects primarily for images that deserve additional emphasis. Using animated reveals on too many images can make a page feel unnecessarily busy.

Action on Click

The Action on Click settings determine what happens when a visitor clicks the image.

Available options include:

  • Open Image in Lightbox
  • Open link on click

Open Image in Lightbox

Select Open Image in Lightbox to display a larger version of the image in a popup when clicked.

This works particularly well for:

  • Photography
  • Portfolio images
  • Product images
  • Detailed graphics
  • Images visitors may want to inspect more closely

The visitor can view the larger image without leaving the current page.

Select Open link on click to make the image clickable and direct visitors to another destination.

This is useful when an image functions as:

  • A navigation element
  • A promotional banner
  • A product image
  • A call to action
  • A visual link to another page or resource

💡 Tip

If an image is clickable, make sure its design and surrounding context make that interaction reasonably clear to visitors.

Common use cases

The Image widget works particularly well for:

  • Content images
  • Hero and section imagery
  • Product images
  • Team or profile photos
  • Portfolio images
  • Promotional graphics
  • Clickable banners
  • Image-based calls to action
  • Decorative masked images
  • Images with captions

Best practices

  • Use appropriately sized, high-quality images
  • Set the focal point when using Stretch if needed
  • Check important crops on desktop and mobile
  • Add meaningful image descriptions
  • Keep shadows subtle unless they are an intentional part of the design
  • Maintain sufficient text contrast when captions appear over images
  • Use rounded corners consistently with the rest of your design
  • Use masks and reveal animations selectively
  • Use Lightbox when visitors benefit from seeing a larger version
  • Make clickable images visually understandable as interactive elements

💡 Tip

The Image widget includes many decorative options, but you rarely need to use all of them together. Start with a well-chosen image and add effects only when they improve the visual hierarchy or user experience

Summary

  • Use the Image widget to add and customize images throughout your website
  • Stretch if needed fills the available container and enables the focal point control
  • Add image descriptions and customize shadows
  • Add captions with headings, text, positioning, colors, and optional CTA buttons
  • Round individual corners or create circular images
  • Use Image Masks for decorative image shapes
  • Add a Reveal animation and customize its overlay color
  • Open images in a Lightbox or turn them into clickable links
  • Check image presentation carefully on both desktop and mobile

Used well, the Image widget gives you extensive control over both the presentation and behavior of images while keeping them integrated with the rest of your website design.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.