Studio

Editor

System Requirements For Editor

Magnification of the screen

Back Button

Live Preview

The number of pages you can publish on a website created with Studio varies by plan. This article explains the page limits for each plan and how to check your…

Published Page Limits by Plan

Learn about different page types in Studio

Different Page Types

Manage pages

Page name

How to set a path

SEO settings for each page

noindex

Use modals (pop-ups) to display additional information on your page.

Adding a Modal Menu

404 Page

Setting up a link to a modal

Pages

Adding a box

How many directory hierarchies can I make

How to select an element or multiple elements

Selecting a box

Grouping

Explaining the relationship between parent blocks and small blocks

Relationships between boxes

Box Arrangement

How to align the box horizontally

Create a box that can expand or collapse when clicked or hovered over.

Adding a Toggle Box

I don't know how to change elements in a template.

Can I place a box at the bottom or right edge of the screen?

The Position feature lets you control how boxes are placed on your page.

Positions: Relative, Fixed, Absolute, and Sticky.

Introducing the size units you can set for a box placed on a page. You can configure fixed values, relative values, and more.

How to Set Box Size Units

Learn how to add spacing to boxes in Studio. This article explains the three features and how to set them step by step.

How to Set Margins, Padding, and Gaps

Negative margin

Display Settings

Overflow

Layer order

Transparency

Learn how to change box colors. You can set colors using saved colors, RGBA/HEX values, or default colors.

How to Set Colors for Boxes

You can add borders to boxes and customize their color, style, and thickness. Borders are a great way to separate content or add design accents.

How to Add and Customize Borders for Boxes

Shadow

Learn to add softness and emphasis to your design with STUDIO's rounded corner feature.

How to Set Rounded Corners on Boxes

Blend mode, Filter, and Backdrop filter

How to create a long vertical modal that allows you to scroll within the Modal.

The key to creating a vertical Modal

How to create a slanted background

Setting styles based on conditions such as hover and appearance

Conditional styles

Stylebar

Text box

Rich Text Box

Learn how to customize text styles, including size, weight, line height, and alignment.

How to Customize Text Formatting

Studio offers a wide range of fonts to enhance your site’s visual appeal and readability. Learn how to manage fonts effectively with built-in features.

How to Manage Fonts

Can I change text colors partially?

Can I upload a font, or use a font I have?

Studio lets you use a variety of fonts to make your site more expressive. This article explains how to set up and batch replace for text.

How to Set Up, Replace, and Delete Fonts

This article explains how to choose fonts when creating websites with Studio, with a focus on system fonts and web fonts

Font Selection Guide: Understanding System Fonts and Web Fonts

Learn about font usage limits in Studio projects. FONTPLUS allows up to 50 font families, while other font services have no limitations.

What is the maximum number of fonts I can use in one project?

One reason fonts set in the editor may not display correctly is the use of system fonts. This article covers how to check your font settings and apply the right…

How to Ensure Fonts Set in the Editor Display Correctly on PCs and Smartphones

Learn about the different types of fonts available for your website in Studio. You can use web fonts like FONTPLUS, Google Fonts, TypeSquare, as well as system fonts.

Fonts Available in Studio

Image box

Changing an image

How to specify the image URL

Image Style Menu

Understanding the two modes of image boxes and when to use each.

Box mode・Img mode

How to set an alt for an image

How to use free images

Can I put/pin an image on the background?

How to publish images without losing quality

When I upload a long vertical image, it makes image coarse. What should I do?

Fixed image ratio

How to freely change the placement of the image in the box

the Video Box lets you place mp4 or webm videos (up to 1GB) directly onto your page.

Video Box: Features and How to Use It

Display external services with an Embed box

Adding an Embed box

Embed YouTube videos in iframes

Embed Vimeo videos

Embed Twitter content

How to embed Twitter feed into Studio

Embed Facebook content

Embed Firework in iframes

Instructions on how to use HubSpot Form in Studio.

Embed HubSpot Form in iframes

If you really want to use a radio button or a check button, embedding a Google form is a good idea.

Embed Google Form in iframe

Embed Google Calendar

How to place Google Maps

Display items in embed box with the appropriate proportion

Display embedded items nicely

Add animation to your site using the Lottie Embed Box

Embedding and Customizing Lottie

How to set up a background video

RSS linkage

The RSS display is not updated in the Editor or Live Preview.

Embed box

Icon box

Changing the icon

Icon Style

Icons placed before November 2, 2023 may become unavailable once changed

About the Font Awesome Icon Version Update

Types of Links and How to Set Them Up

This article explains the types of HTML tags that can be set in Studio boxes and the steps to configure them.

HTML tag

How to place a Twitter share button

How to create a button that can share content to a social media website

How to create a "Share" button

You can set tel: and mailto: to make calls and send emails with a click or tap

How to set up a link to make a phone call

How to activate the phone or email app

Setting panel

How to swap the image by hover

Animation

The animation set using "Appear" is not displayed.

How can I autoplay the carousel/slider?

List

A simple carousel feature to display list data

How to make a Carousel / Slider using List Data

Components

List box

Turn your website responsive

Custom breakpoints

How to change the screen size

You can create a responsive layout that's less likely to cause problems on various screen sizes by setting a parent box height to auto.

Why a box height should be auto?

You can change the image depending on screen size

How to change the image in the mobile view

How to create a Hamburger menu

The images disappear on my tablet or mobile. What should I do?

Mobile design is reflected in the PC design as well.

Responsive

Learn how to create tab navigation in Studio to organize content and make your page clean and easy to navigate.

Creating Tab Navigation

How do I change my "Home Page"  (page type)?

Can I create a breadcrumb list?

Learn about the "Text Styles" feature that helps you efficiently manage text style settings such as size and font.

Text Styles: Setup and Management

Quickly view and edit the colors used in selected elements. Learn how to highlight color usage and adjust your page’s color scheme.

Viewing and Changing Selection Colors in Bulk

Sections

Explaining the content editing mode where only text, images, and other content can be edited in the editor.

Content Editing Mode

Quickly navigate between dashboards, search for pages and projects, and more with ⌘+K / Ctrl+K.

Using the Command Palette

Learn how to work more efficiently in Studio with these keyboard shortcuts.

Keyboard Shortcuts

AI automatically generates meta information (titles and descriptions) for your site and pages based on the text content.

Automatically Generate Titles and Descriptions with AI

Easily manage frequently used colors, like brand colors, by saving them as "Color Styles." Learn how to organize them efficiently with labels and hierarchy.

How to Set Up Color Styles

This section describes the procedure for adding and managing comments using design editor comment feature.

Comment in design editor

As of March 13, 2025, new color registration in My Colors will no longer be supported, and the feature will be discontinued by late April.

My Colors Discontinued: How to Transfer Your Colors

Process optimization

How to add and edit custom blocks of code before the </head> and </body> tags

Embedding Custom Code to Your Site of Page

Help search engines to understand the content and structure of your site's pages and improve SEO.

Defining contents of your site with Structured data

Methods for Uploading, Deleting, and Setting as Link Destinations

Uploading and Managing PDF Files

You can upload images, videos, and PDFs to Studio.Design to use in your website’s design and layout.

File Formats and Size Limits When Uploading

You can upload video files in mp4 or webm format, up to 1GB per file, directly to the Studio.Design editor.

Can I Upload Videos Directly to Studio.Design?

You can upload images, videos, and PDF files to use in your projects.

Uploading and Managing Files (Images, Videos, PDFs)

Setting up the download button

Horizontal scroll does not show scroll bar

The warning modal appears as "Design Editor storage getting full."

How can I manage space around a movie when I place a movie as a background?

I can't copy & paste

What to look for when a blue screen is applied and characters cannot be inserted

Can't put text on the image.

Applying a parallaxing effect

Studio HP

Studio Blog

Showcase

機能アップデートのお知らせ

Find answers and get help from Intercom Support and Community Experts

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.

Link, Press control-option-right-arrow to exit

Empty Help Center

Uh oh. That page doesn’t exist.

Disappointed

Neutral

Smiley

Thinking...

Searching through sources...

Analyzing...

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