Image Module

The Image Module lets you add images to your app to enhance its visual appeal and structure. Whether you're showcasing a product, personalising a section, or building brand presence, this module provides flexible layout and styling options.

Written By Dorsa Arfa

Last updated 9 months ago

Adding the Image Module

To insert an image:

  1. Navigate to the Add Items menu on the editor toolbar (next to Page Management).

  2. Locate the Image Module under the General category.

  3. Click to add it to the canvas or drag it into the layout.

The image placeholder will appear with default settings.

Uploading or Linking an Image

Once the module is on the canvas:

  1. Click the image placeholder to open the Image Properties Pane on the left.

  2. Under Image Fill, choose how to add your image:

    • URL: Paste the link to a hosted image.

    • Upload: Use the upload tool (if available) to select an image from your device.

  3. Click Apply to confirm.

Sizing and Fit

You can define the image dimensions and how it behaves within its container:

  • Auto: The image scales with the container.

  • Custom: Input specific width and height (0–9999 px).

In Image Fill, choose how the image adjusts:

  • Contain: Keeps the full image visible.

  • Cover: Fills the space, cropping parts if needed.

  • Fill: Stretches to fully fit the container.

Styling and Effects

Customise the appearance of the image using the following options in the Properties Pane:

  • Radius: Add rounded corners (0–100).

  • Rotate: Rotate the image (0° to 360°).

  • Reflect: Flip the image horizontally or vertically.

These options help you align images with your design style, whether you're after sharp edges or a soft, polished aesthetic.

Use Cases

  • Display a product with styled images and consistent spacing.

  • Rotate and reflect visuals for layout variety.

  • Use radius and fill options to match branding.

  • Combine with other modules for rich visual storytelling.