Studio

Various Boxes

Learn about the different types of sections you can use to organize content and build layouts on your page, plus how to add them. Pre-set responsive section parts make placement…

Sections and Section Parts

Sections

The image box is a box element used to add images to your page. Studio.Design supports images uploaded to Studio.Design, free images from Unsplash, and URLs of images hosted on…

Image Box

Learn the differences between Box Mode and Img Mode in Studio.Design's image box. This guide covers each mode's features, ideal use cases, basic usage, and key things to watch out…

Image Box: Box Mode vs. Img Mode

Learn how to edit images directly in the Studio.Design editor. This guide covers filters like brightness, contrast, and monochrome, as well as how to adjust background image size, repeat, and…

Image Box: Apply Background Effects to Images

Learn how to add alt text to image boxes in img mode. Setting alt text is important for SEO. We'll also show you how to set different alt text for…

Image Box: Setting Alt Text

In Img mode, image boxes adjust flexibly while keeping their aspect ratio. However, setting both height and width to fixed values like px can cause the aspect ratio to break.

Image Box: Fixing aspect ratio issues in Img mode

In Studio.Design, you can use free, high-quality photos from Unsplash and AI-generated, high-resolution images from Studio.Stock. Search for images right in the design editor and add your selection to the…

Image Box: Using Free Images

To keep an image's aspect ratio in Studio.Design, switch the toggle in the top-right of the image box to Img. In Img mode, your image displays while preserving its original…

Image Box: Lock the image aspect ratio

Learn how to adjust an image's position within its box to create a visual cropping effect.

Image Box: Crop Images Visually by Adjusting Placement

Fix a background image so it stays in place while users scroll. This article walks you through the steps to set up a fixed background image.

Image Box: Fix Background Image in Place

The Video Box lets you place MP4 or WebM videos directly on your page. Like images and text, you can lay them out freely—perfect for adding motion and visual impact…

Video Box

Image box

Learn how to add and edit text boxes to display written content on your web page.

Text Box

With the rich text box, you can apply styles to just part of your text or write using Markdown. This article covers how to use it for long-form content and…

Rich Text Box

Learn how to adjust text size, weight, line height, alignment, and more. You can make these changes from the Text tab in the right panel.

Edit text alignment and design

Learn how to change text orientation between horizontal and vertical in Studio.Design. This article explains the differences between each option and the conditions for using this feature.

Change Text Orientation (Horizontal or Vertical)

Learn how to use the rich text box to change the color or background color of specific parts of your text in Studio.Design.

Change Text Color or Background Color for Part of Your Text

The bulleted list feature in Studio.Design's Rich Text only supports "1." and "•" formats. If you'd like to customize the numbering or create nested lists, please format it manually as…

Customizing or nesting bulleted lists in Rich Text

When you link a CMS property or a property from a list or component to a text box, you can apply text filters to customize how the content appears.

Set up text filters for properties

Text box

Studio.Design supports two icon libraries: Font Awesome and Material Symbols. With Material Symbols, you can adjust line weight, style, and fill to match your design.

Icon Box

Icons placed before November 2, 2023 may become unavailable once you change them.

About the Font Awesome Icon Version Update

Icon box

With the Embed box in Studio.Design, you can add HTML, CSS, and JavaScript code or embed external services on your page. This article covers how to add the box, the…

Embed Box

Learn how to use the Instagram embed box to add individual posts from your feed to your website.

Embed an Instagram post

Learn how to embed a specific post on your website using the X (Twitter) embed box.

Embed an Individual X (Twitter) Post

Learn how to embed and display YouTube videos on your site using the embed box. You can also customize options like autoplay and loop playback.

Embed a YouTube Video

You can embed TikTok videos and feeds into your site using the embed box.

Embed a TikTok video

Learn how to embed Facebook content like the Like button or posts into your page.

Embed Facebook content

Learn how to embed a Google Calendar into your web page using the Embed box. Adding a Google Calendar to your site lets you share your schedule with visitors.

Embed a Google Calendar

Learn how to embed a Google Form into your webpage using the Embed box. This is helpful when you need advanced features like multiple-choice fields that aren't available in Studio.Design's…

Embed a Google Form

Learn how to embed Google Maps into your Studio.Design site and how to update the location shown on an embedded map.

Embed Google Maps

You can add a button to your Studio.Design site that takes visitors directly to the LINE friend registration screen.

How to create a LINE friend registration button

Learn how to embed videos from Vimeo into Studio.Design. Just grab the embed code and paste it in—it's that easy. We'll also show you how to enable autoplay and looping.

Embed a Vimeo Video

With the Embed box, you can easily embed external services using an iframe.

Embedding an iframe

Use the Lottie embed box to add Lottie animations to your Studio.Design site. Choose from 6 playback options, including scroll-triggered animations, and customize them to fit your needs.

Embedding Lottie animations

Learn how to embed a form created with formrun—a service for form creation and customer management—into your Studio.Design site.

Embedding formrun

Learn how to embed Firework vertical videos into Studio.Design. Just grab the embed code and paste it in — it's that simple.

Embedding Firework videos

Learn how to embed a HubSpot Form into your Studio.Design site.

Embed a HubSpot Form

With Studio.Design, you can add HTML and scripts using the Embed box or the custom code feature. However, you can't directly edit a page's HTML or export the code.

HTML in Studio.Design

Learn how to embed YouTube or Vimeo videos on your web page and use them as a background or main visual.

Set an Embedded Video as a Background

Automatically display RSS article lists from external services like note on your Studio.Design site. This article covers how to add an RSS URL, place a list, connect data, and update…

RSS Integration (RSS Lists)

Learn how to use Studio.Design's RSS feature to display the latest articles from note on your site.

Display the latest note articles in a list using RSS

Learn why RSS feeds placed on your page may not refresh in the editor or live preview, and how to manually update them.

What to do if RSS content doesn't update in the editor or live preview

Learn how to set up an Embed box so it keeps a fixed aspect ratio as it resizes. This article walks you through an example: keeping an embedded YouTube video…

Responsive settings to lock the aspect ratio of an Embed box

Embed box

Lists let you efficiently manage the content and design of elements that share the same layout. While the layout stays consistent, you can customize text, images, colors, and visibility for…

Lists

Learn how to set a unique image for each item in a static list. We also cover what to watch out for if all the images in your list end…

Lists: Set a different image for each item

Learn how to set different text for each item in a static list. We'll also cover what to watch out for if all items in your list end up showing…

Lists: Setting different text for each item

Learn how to set a unique link for each item in a static list. We'll also cover what to watch out for if all the links in your list end…

Lists: Setting different links for each item

In Studio.Design lists, you can customize the design of each item individually, including colors and button visibility. This article shows how to use boolean properties to show or hide elements…

Lists: Show or hide the container box for each item

Learn how to use the color property to manage box colors individually for each item in a list. This is useful when you want to assign different colors by category.

List: Change colors for each item

Dynamic Lists let you connect external data from Studio CMS, APIs, or RSS feeds to the design editor and automatically display it as a list. This article explains how data…

Dynamic Lists

Learn how to switch list items between vertical and horizontal layouts in the Studio.Design editor.

How to arrange list items vertically or horizontally

A carousel lets you display multiple pieces of content as a slideshow. Studio.Design offers two types: a static list carousel and a dynamic CMS carousel powered by Studio CMS content.

Carousel

A carousel cycles through multiple items, like images or text, at set intervals. This article explains how to add and edit a list carousel using Studio.Design's list feature, set up…

List Carousel

In Studio.Design, you can set carousels to play automatically. This article walks you through how to set up auto-play.

Auto-play a carousel

List box

Learn about toggle boxes that open and close on click or hover. This article covers their structure, how to add them, configuration options, opening direction, and animation settings.

Toggle Box

LoopBox is a box element that automatically scrolls its child elements in an infinite loop. Use it to create dynamic content like banners, logo marquees, and scrolling text.

Set up infinite loop (marquee) effects with LoopBox

Studio.Design

Studio.Blog

Studio.Showcase

What's New

Updates

Official Site

Blog

Case Study

Find answers and get help from Intercom Support and Community Experts

Conversations you've started through the messenger will appear here.

No conversations created by you

Try using different keywords or checking for typos.

No conversations found

Title

This site employs cookies and other technologies that we and our third party vendors use to monitor and record personal information about you and your interactions with the site (including content viewed, cursor movements, screen recordings, and chat contents) for the purposes described in our Cookie Policy. By continuing to visit our site, you agree to our {websiteTermsLink}, {privacyPolicyLink} and {cookiePolicyLink}.

This site uses cookies and similar technologies ("cookies") as strictly necessary for site operation. We and our partners also would like to set additional cookies to enable site performance analytics, functionality, advertising and social media features. See our {cookiePolicyLink} for details. You can change your cookie preferences in our Cookie Settings.

We use cookies to make our site work and also for analytics and advertising purposes. You can enable or disable optional cookies as desired. See our {cookiePolicyLink} for more details.

Advertising cookies are set by our advertising partners to collect information about your use of the site, our communications, and other online services over time and with different browsers and devices. They use this information to show you ads online that they think will interest you and measure the ads' performance. Social media cookies are set by social media platforms to enable you to share content on those platforms, and are capable of tracking information about your activity across other online services for use as described in their privacy policies.

These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.

These cookies are necessary for the website to function and cannot be switched off in our systems.

These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

You have the right to opt out of the sale of your personal information. See our {cookiePolicyLink} for more details about how we use your data.

Your Privacy Choices

We use cookies to enhance your experience. You can customize your cookie preferences below. See our {cookiePolicyLink} for more details.

Cookie Settings

Empty Help Center

Uh oh. That page doesn’t exist.

Home

Search results

Disappointed

Neutral

Smiley

Thinking...

Searching through sources...

Analyzing...

Tickets submitted through the messenger or by a support agent in your conversation will appear here.

No tickets created by you

No tickets found

Track the progress of all tickets and conversations related to your company.

Customer Portal.

Track the progress of all tickets related to your company.

Tickets portal.

{assigneeName} needs more information from you

Tickets

No access to tickets portal

Search and ask

Find guides, answers, and references.

Skip the search. Describe what you’re trying to do and get a grounded answer.

Browse articles and guides in this topic.

Create your workspace and invite the people you work with.

Set up your account

Build your first workflow and watch it run end to end.

Ship something

Connect the tools your team already uses to bring data in.

Connect your stack

A quick lap of the product so you know where everything lives.

{appName} in 60 seconds

This prototype demo is aware that you are reading “{title}”. It can point you back to the current article, but a production article-aware Fin contract is still follow-up work.

Prototype article-aware answer

Because you already asked about invitations, this prototype demo can add the follow-up: use the role selector before sending each invite to limit access to the teammate responsibilities.

Prototype role-limiting follow-up

This prototype demo suggests starting with your workspace profile, inviting the team members who need access, and then connecting the integrations you use.

Prototype getting-started answer

In this prototype demo, integrations are configured from workspace settings. Choose the integration, connect the account, and review the enabled permissions.

Prototype integrations answer

In this prototype demo, invite teammates from workspace settings, then choose the access each teammate needs before sending the invitation.

Prototype invite-team answer

This prototype demo does not have a scripted answer for that question yet. Try asking how to invite your team or open a source article. No production Fin API was called.

Prototype answer unavailable

I’ve got this page open. Ask me anything about it and I’ll answer from the docs.