Skip to main content

Image Box: Features and How to Use It

This article explains the features of the Image Box in Studio.Design, as well as how to add, edit, delete, and specify images by URL.

Updated today

Available for: All plans


What Is the Image Box?

The Image Box lets you add images to your page in Studio.Design. You can:

  • Use images you’ve uploaded to Studio.Design

  • Choose free images from connected photo resources from Unsplash

  • Display images hosted outside Studio.Design by entering their URL

In Box Mode, you can freely adjust the layout and style of your image directly on the canvas using the [Style Menu].

Types of Images You Can Use

Images Uploaded to Studio.Design

You can upload image files up to 1GB each for use in your page designs.

For details on supported file types, size limits, and how to upload, see these Help articles:

Tips: If your image file is over 1GB, you can use a free image compression tool to reduce the file size without losing quality. Studio.Design does not provide a file size reduction tool.

Free Images (Unsplash)

You can use high-quality, free photos from [Unsplash]. For more on How to use free images, see the related Help article.

Images Hosted Outside Studio.Design

You can display images stored on external servers or cloud storage by specifying their URL. See the section on Using Images from an External Server (by URL) for details.

Box Mode vs. Img Mode

The Image Box has two modes: Box Mode and Img Mode. Each mode handles images differently and offers different features.

For a detailed comparison and how to switch modes, see the Help article on Box mode・Img mode.

Box Mode Features

  • Overlay text or other elements on top of your image

  • Apply filter effects like blur or brightness

  • Does not support maintaining aspect ratio or setting alt text

Use Case

Why Use It?

Main visual/hero area

Layer headlines or buttons over a background image

Section backgrounds

Use images as part of the layout, regardless of size or aspect ratio

Decorative backgrounds

Enhance design with blur, brightness, or other filter effects

Decorative images

Easily style and modify images for decorative purposes

Img Mode Features

  • Maintains the image’s aspect ratio

  • Allows you to set alt text for accessibility and SEO

  • Does not support overlaying other elements or applying filter effects

Use Case

Why Use It?

Product photos/catalogs

Keep image proportions and add product names/descriptions with alt text

News article graphics

Describe content with alt text for better communication and accessibility

Company/brand logos

Specify company or brand names in alt text for SEO and accessibility

Staff profile photos

Maintain proportions and describe names/roles with alt text

Photo galleries/portfolios

Keep proportions and add supplementary info via alt text

Service intro images/photos

Explain services in alt text while maintaining image proportions

Styling Images

In Box Mode, you can edit and style your image directly in the editor using the [Style Menu]. Available options include:

  • Brightness

  • Contrast

  • Saturation

  • Grayscale

  • Sepia

  • Blur

  • Alignment

  • Image size adjustment

  • Repeat settings

  • Position adjustment

Setting Alt Text

In Img Mode, you can set alt text (alternative text) for your images. Alt text helps search engines and screen readers understand your images, which is important for SEO and accessibility. For more details, see the Help article on How to set an alt for an image.

How to Use the Image Box

Adding an Image Box

You can add a blank Image Box, an uploaded image, or a free image.

To add a blank Image Box:

  1. Drag and drop the Image Box from the left side of the editor.

  2. Or, open the [Add] panel from the left sidebar, select [Box], then [Image], and place it on your page.

To add an uploaded or free image (from Unsplash):

  1. Open the [Add] panel from the left sidebar.

  2. Select either [Upload] or [Unsplash] from the list.

  3. Drag and drop your chosen image onto the page.

Changing an Image

You can change an image either directly on the page or from the [Layer] panel.

Tip:If your image is managed by [CMS] or [List], the process is different. See the Help article on editing templates for more details.

To change an image directly on the page:

  1. Double-click the Image Box you want to change.

  2. In the left panel, choose a new image from [Upload] or [Unsplash]. Click to apply it to the box.

To change an image from the Layer panel:

If you can’t double-click the Image Box directly (for example, due to layer order):

  1. Open the [Layer] panel from the left sidebar.

  2. Find and select the layer for the Image Box you want to change.

  3. Open the [Box] settings panel from the right sidebar.

  4. Double-click the image thumbnail. [Upload] and [Unsplash] will appear in the left panel.

  5. Click the new image to apply it.

Deleting an Image Box

  1. Double-click the Image Box you want to delete.

  2. In the menu that appears, select [Delete Box].

Tips: If it’s hard to select the box on the page, use the [Layer] panel to select and double-click it for easier access.

Using Images from an External Server (by URL)

To display images stored outside Studio.Design:

  1. Select the Image Box.

  2. Open the [Box] settings panel from the right sidebar.

  3. Enter the image URL.


Did this answer your question?