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:
Drag and drop the Image Box from the left side of the editor.
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):
Open the [Add] panel from the left sidebar.
Select either [Upload] or [Unsplash] from the list.
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:
Double-click the Image Box you want to change.
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):
Open the [Layer] panel from the left sidebar.
Find and select the layer for the Image Box you want to change.
Open the [Box] settings panel from the right sidebar.
Double-click the image thumbnail. [Upload] and [Unsplash] will appear in the left panel.
Click the new image to apply it.
Deleting an Image Box
Double-click the Image Box you want to delete.
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:
Select the Image Box.
Open the [Box] settings panel from the right sidebar.
Enter the image URL.