Skip to main content

Right Panel

Studio.Design’s right-hand panel lets you style each box, edit its data, and manage site and page meta information directly from the design editor.

Updated today

The panels that open on the right side of the design editor are collectively referred to as the "right panel".

It is used to set design and styling settings for each box, edit tied data, and set meta information for the site or page.

How to Open the Right Panel

  • Click on any box in the screen.

  • Or, click the open/close icon in the upper right corner of the screen.

    スクリーンショット:画面右上部の開閉アイコンをクリックしている様子

How to Close the Right Panel

Click the open/close icon at the top of the right panel.

Once the right panel is closed, it cannot be opened by selecting a box. To reopen the right panel, use the Open/Close icon at the top right of the screen.

スクリーンショット:開いた右パネルの上部にある、開閉アイコンを表示している

Operations on the Right Panel

The operations performed on the right panel are as follows.

Operation

How to open the operation part

Supplementation

(1) Various settings for each box

Click on any box in the screen

The tabs that appear on the right panel will vary depending on the box selected.

Open the right panel with the box unselected.

The Site Settings and Page Settings tabs will appear.

(3) Check version history

Click the Version History icon in the navigation

Check and manage the editor's edit history.

(4) Switch to comment mode

Click the comment icon in the navigation

Added comments are displayed in the right panel.

(5) Switch to content edit mode

Click the Edit Contents icon in the navigation.

Editable sections will be displayed in the right panel.

(1) Various Settings for Boxes

Click on any box on the screen to display the editable items as tabs in the right panel. The type of tabs displayed depends on the selected box.

Typical tabs and their operations are as follows.

Tab name

Selected box

Settings

Related Article Groups

Box Tab

All Boxes

Layout, Appearance, Position

Transform Tab

All Boxes

Transforms, Animation

Settings Tab

All boxes

Link settings, Tag settings

Image Tab

Image Boxes

Various settings for images

Text Tab

Text Box

Various settings for text

Data Tab

Lists, boxes in dynamic pages, dynamic lists, dynamic modals

Box association settings with list data and CMS data

Icon Tabs

Icon Box

Icon Settings

Video Tab

Video Box

Various settings for videos

Contents Tab

Carousel, Rich Text Box

Settings related to each content

(2) Meta Information for Sites and Pages

Meta information for sites and pages is done from the Site Settings and Page Settings tabs.

Correct settings will improve your site's visibility in search results and social networking sites and attract more visitors.

Open the Site Settings and Page Setup Tab

  1. In the navigation, click on the page icon to open the Pages panel.

  2. In the Pages panel, select the page for which you want to add meta information.

  3. Open the right panel by clicking on the open/close icon at the top right of the screen.

  4. Select the [Site Settings] tab [Page Settings] tab on the right panel to toggle the view.

スクリーンショット:サイト設定・ページ設定タブを開く様子

(3) Version History

Click the Version History icon to display the editor's edit history in the right panel.

(4) Comment

Clicking the comment icon switches to comment mode, and the added comments are displayed in the right panel.

(5) Content Edit Mode

Clicking the content edit icon switches to content edit mode, and the edited part is displayed in the right panel.

Did this answer your question?