AllDesignWidgetsImage Widget

Image Widget

Add images with alignment, links, and styling.

The Image widget lets you place standalone images, link them, and fine-tune styling.

Add an Image widget

1

Open the widget picker

In the page editor, open Widgets.

2

Drag Image

In Common, drag Image (image icon) onto the page.

3

Open Image Settings

Double-click the image or use the toolbar edit button.

Image settings

The settings dialog includes tabs for Image and Border.

Image tab

Use the Image tab to:

  • Choose or replace the image
  • Set Fit (contain or cover) and Position
  • Add Alt Text (placeholder: "Describe this image")
  • Add a Link Address using the link picker

Position tab

Use the Position tab to control visual placement and image masks.

Mask options

  • Mask Type:
    • None: no mask
    • Fade: soft edge fade
    • Preset: choose a built-in shape mask
  • Preset masks include blob, circle, squircle, and brush-style shapes.
  • Fade masks can be set globally or by side (Top, Right, Bottom, Left).

Border tab

Use the Border tab to customize:

  • Border color, width, and style
  • Corner radius (single or individual corners)
  • Shadow (outer or inner styles)

Toolbar actions

When an image is selected, the toolbar lets you:

  • Edit settings
  • Change alignment
  • Add or edit a link
  • Configure animation
  • Adjust position (offset, rotation, scale, skew, opacity, and masks)
  • Copy or delete the widget

Tips

  • Use Alt Text for accessibility and SEO.
  • If the image looks cropped, switch Fit between contain and cover.
  • Use alignment controls to place the image left, center, or right in its column.
  • Images selected from media paths now resolve to stable live URLs automatically, including responsive variants when available.
  • Saved crops now carry through more consistently to responsive live images, so the focal area you set is more likely to stay aligned across screen sizes.
Updated Apr 14, 2026

Was this helpful?