What are Box mode and Img mode?
Image boxes in Studio.Design have two modes: "Box mode" and "Img mode." These modes differ in how images are handled and which features are available.
Behavior / Editing options | Box mode | Img mode |
Layer other elements (text, buttons, etc.) on top to create a parent-child box structure | ○ | × |
Apply background image styling (background position, repeat, background size, filter) | ○ | × |
Display while keeping the aspect ratio (using auto) | × | ○ |
× | ○ |
Switching between Box mode and Img mode
Use the toggle switch in the top right of the image box to switch between modes.
Note: If you can't switch from Img mode to Box mode
Box mode recognizes the image's original size and keeps its aspect ratio, so either the height or width size unit must be set to auto.
Use one of the following methods to set the size to auto:
Double-click an edge of the image box.
In the [Image] tab in the right panel, change the box's height or width unit to auto.
Features and use cases for Box mode
In Box mode, you can layer other elements such as text on top of an image, or apply filter effects. It's a great fit when you want to use an image as a background or add visual effects.
Features
You can apply background styling to the image.
You can add child elements to create a parent-child box structure.
The image's original size isn't recognized, so you can't keep its aspect ratio automatically.
Use cases for Box mode
Use case | Why it works |
First view (main visual / hero image) | Layer headlines and buttons on top of a background image for a strong visual impact |
Section backgrounds | Use the image as part of the overall layout without depending on its specific ratio or size |
Backgrounds with blur, brightness, or other effects | Apply filter effects to enhance the design |
Decorative images | Easy to style and adjust when using images for decoration |
Features and use cases for Img mode
In Img mode, the image is treated as a standalone element. It keeps its original aspect ratio, and you can add an alt attribute (alternative text) to accurately convey information.
Features
Recognizes the image's aspect ratio and keeps it when set to auto.
You can set an alt attribute (alternative text).
You can't apply background styling.
You can't add child elements.
Use cases for Img mode
Use case | Why it works |
Product photos and catalogs | Keeps the image's aspect ratio, and you can add product names or descriptions with alt text |
Illustrations and graphs in news articles | Explain the content with alt text to ensure clear communication and accessibility |
Company and brand logos | Add company or brand names with alt text, which helps with SEO and accessibility |
Staff profile photos | Keep the image's aspect ratio and describe names and roles with alt text |
Photo galleries and portfolio sites | Maintain the aspect ratio and add details with alt text |
Images and photos on service pages | Describe the service content with alt text while keeping the image's aspect ratio |
image picture
image photo asset