This is where your fans will land when they visit your b.stage. The first thing they'll see is the cover area showing off your unique identity, followed by your latest content and Stories.

👉 Custom Page Editor

• Design Settings

  • You can set theme color and header items (logo, favicon). For more details, please check this article.

• Header

  • Menu Color: You can change the color of the menu items in the Header. (From left to right: system color, black, white, custom)

  • Logo & Favicon: Please refer to the Design Settings above.

👉 Section

By clicking the [+] button between sections, you can add a new section. When you hover over a section, you can perfrom actions such as editing, copying, deleting, and changing the order (Up or Down).

👉 Adding Section

✔️ Content/Products

• Horizontal List: Display the content in a horizontal list format with swipe navigation.
• Vertical List: Display the content in a vertical list format.
  • Currently, only [Custom] can be configured, and [Curation] and [Filtered] will be added later.
• Story Highlights: Show latest 20 stories instantly from Star. (Content Section ONLY)

• • Section Title: You can enter the title of the respective section (up to 100 characters)
  This will be shown only in default language if left blank.
  
  • Cover
  ৹ Layout: On mobile, the cover is always at the top of the list.
  ▪ Image
  ▪▪ You can enable settings for mobile and PC separately to upload different cover images.
  ▪▪ Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
  ▪▪ You can specify the aspect ratio (1:1/4:3/3:4/Custom) and add spacing.
  
  • Title/Description: You can enter a title and description of up to 100 characters each. These will be shown only in default language if left blank.
  
  • Link: Please enter a URL. If you don't set it to open in a new window, it will navigate in the current window.
  
  • Style
  ৹ Vertical Padding: You can move the button to add margin at the top or bottom.
  ৹ Content Align: You can set the alignment of content elements (left/center/right).
  
  ৹ Background: You can choose to show or hide the background. If it's hidden, a white background will be provided.
  ▪ You can enable settings for mobile and PC separately to upload different cover images.
  ▪ Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
  ▪ Unsplash is a website that provides high-resolution photos with free-to-use licenses.
  ▪ It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
  ৹ Enhance visibility of contents by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
  ৹ When you click on [Color], you can configure the color settings.

• • List Elements: You can configure the components (title, description, price, link, thumbnail, thumbnail size + ratio + shape) for the item list in that section.
  
  • Items: You can add up to a maximum of 100 items, and within the list, you have the options to [Delete All], [Import], and [Add] items.
  ৹ Delete All: You can delete all items within the list.
  ৹ Import: Customize the list with the registered items. You can select up to 50 items from the registered content types and then press "Apply" to create the list.
  ৹ Add: You can either add new items or import individual items from the registered ones.
  
  • Title/Description: You can enter a title of up to 100 characters and a description of up to 200 characters for each item. These will be shown only in default language if left blank.
  
  • Link: Please enter a URL. If you don't set it to open in a new window, it will navigate in the current window.
  
  • Thumbnail: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
  
  • Once all the information for each item is complete, please press "Save."

• • Section Title: You can enter the title of the respective section (up to 100 characters)
  
  
  • Style
  ৹ Vertical Padding: You can move the button to add margin at the top or bottom.
  ৹ Content Align: You can set the alignment of content elements (left/center/right).
  ৹ Background: You can choose to show or hide the background. If it's hidden, a white background will be provided.
  ▪ You can enable settings for mobile and PC separately to upload different cover images.
  ▪ Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
  ▪▪ Unsplash is a website that provides high-resolution photos with free-to-use licenses.
  ▪▪ It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
  ▪ Enhance visibility of contents by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
  ▪ When you click on [Color], you can configure the color settings.

✔️ Feed

• Show the most recent content by applying filters for content types and tags, or pin specific items to the top.

• • Section Title: You can enter the title of the respective section (up to 100 characters)
  This will be shown only in default language if left blank.
  
  • Pin
  ৹ Choose one item to pin at the top of the Main Home Feed.
  ৹ Recent content displays up to 100 in the Feed, with pinned content appearing below the first banner. Also, you can pin Star Stories.
  ৹ If you click the [All Contents], you can set the filter to [Uploaded videos] / [Embedded videos] / [Posts] / [Star Stories] / [Surveys] / [Polls].
  ৹ After selecting one item to pin, click [Pin] on the upper right corner.
  ৹ If you need to edit the pinned item, you can simply click [Remove] to reset.
  
  • View More Settings
  ৹ View More Option: Please select your desired option between 'Button' and 'Infinite Scroll.'. If you choose 'Button,' you can set the default number of items to display in the feed. Clicking the "View More" button will then show additional items in the quantity you've selected (4, 6, or 8 items). However, if you choose 'Infinite Scroll,' the feed will have a fixed number of 20 items, and it's recommended to place the feed section at the bottom of the page.
  
  • Style
  ৹ Vertical Padding: You can move the button to add margin at the top or bottom.
  ৹ Content Align: You can set the alignment of content elements (left/center/right).
  ৹ Background: You can choose to show or hide the background. If it's hidden, a white background will be provided.
  ▪ You can enable settings for mobile and PC separately to upload different cover images.
  ▪ Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
  ▪▪ Unsplash is a website that provides high-resolution photos with free-to-use licenses.
  ▪▪ It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
  ▪ Enhance visibility of Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
  ▪ When you click on [Color], you can configure the color settings.

• • The section will display content that corresponds to the filters applied. Content added later will be updated if it meets the conditions.
  • The content that matches the applied filters will be listed in the "Items" section at the bottom.
  
  • Pin
  ৹ Choose one item to pin at the top of the Main Home Feed.
  ৹ Recent content displays up to 100 in the Feed, with pinned content appearing below the first banner. Also, you can pin Star Stories.
  ৹ If you click the [All Contents], you can set the filter to [Uploaded videos] / [Embedded videos] / [Posts] / [Star Stories] / [Surveys] / [Polls].
  ৹ After selecting one item to pin, click [Pin] on the upper right corner.
  ৹ If you need to edit the pinned item, you can simply click [Remove] to reset.

✔️ Banner

• Slide Banner: Create a slideshow of multiple banners for simultaneous display.

• • Section Title: You can enter the title of the respective section (up to 100 characters)
  This will be shown only in default language if left blank.
  • Banner Design: You can configure the ratio (4:1, 3:1, 16:9, 4:3, 1:1, 3:4), shape (square, round, full-round), add spacing, and choose whether to display the original image. Please note that background colors may appear based on the original image ratio.
  
  • Transition: You can set the display time for a single banner (1 to 10 seconds, default 2 seconds). The animation effect is fixed as "Push."
  
  • Style
  ৹ Vertical Padding: You can move the button to add margin at the top or bottom.
  ৹ Content Align: You can set the alignment of content elements (left/center/right).
  ৹ Background: You can choose to show or hide the background. If it's hidden, a white background will be provided.
  ▪ You can enable settings for mobile and PC separately to upload different cover images.
  ▪ Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
  ▪▪ Unsplash is a website that provides high-resolution photos with free-to-use licenses.
  ▪▪ It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
  ▪ Enhance visibility of Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
  ▪ When you click on [Color], you can configure the color settings.

• • You can add up to a maximum of 12 banners. It is recommended to use images with a 4:1 ratio, a width of at least 1200px, and a maximum file size of 10MB in JPG, PNG, or GIF file formats.
  • Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
  • If you want to add text above the banners, please turn on the [Banner Text] button and enter up to 20 characters of text. You can configure multi-language, text color, and alignment.
  
  • Connected URL: Please insert an URL to redirect the users upon clicking. If you don't set it to open in a new window, it will navigate in the current window.
  
  • Visibility Settings
  ৹ You can specify [Display Now] / [Schedule Display] / [Private] / [Set Display End].
  ৹ If you set [Display End Date], the banner would be unexposed on the designated date and time.
  
  • When all settings are complete, click [Save] on the upper right corner.

💡 Banner editing

• If you need to edit a registered banner, you can edit it by clicking the pencil icon that appears when you mouse over the banner, or you can delete it by clicking the ⓧ icon.

✔️ Design - Cover

Brand Cover

• Introduce your b.stage's personality with images, videos, and customize elements like your logo, bio, buttons, and more.

• Hero Image

  • You can add a hero image on top of the brand cover background (including video backgrounds).
  • Click the [Upload] button to directly upload an image from your device or use [Unsplash] to search and add images.
    • JPG, PNG, and GIF file formats of up to 10MB are supported.
    • Ratio adjustment is possible.
      • Mobile - 1:1, 4:3, 3:4, Free
      • PC - 6:1, 4:1, 3:1, Free
    • You can also add spacing to the Hero Image.

• Logo

  • The Logo can be set either text or image that represents your brand exclusively. Please use the same logo you used in the top Home menu.
  • Text
    • Please click the input field to enter your brand name. You may add multiple langugages, if not entered, it will be displayed in the default language.
  • Image
    • Please upload your brand Logo in the format below.
      • Recommended size: Width should be at least 960px.
      • Supported formats: JPG, PNG, GIF
      • Up to 5MB
  • After uploading the image, you can use the [Zoom In/out] feature to adjust its size. (Minimum 0.1x, Maximum 3x)

• Description

  • Please add a simple description for your b.stage. (Maximum 200 characters)
  • You must enter the default language to save, and if you do not enter a multilingual language, it will be displayed in the default language.

• Social Links

  
  • From "Settings Basic Information Social Links Settings, you can add integrated social links or links of your choice (Up to 20 links can be added.)
  • By un-checking the [Show Texts] option, you can display only the link icons without any accompanying text.

• Button

  • Press [+] to add up to 5 buttons.
  • Choose between "Color Button" and "Default Button." When selecting the default button, the color can be inverted to match the Brand Cover background.
  • Select the button type.
    • Custom: Allows you to link to any desired page. Ensure the button is appropriately named for the intended link.
    • Log in: Encourage users to log in and is invisible to logged in users.
    • Membership: Links to membership and encourages people to sign up for membership.
    • Share: Copy address to share your b.stage link with members.
    • Sponsorship: A button that links to Sponsorship to encourage donations. (This option is only available if Sponsorship is enabled in "Settings Shop Settings.")
  • Enter the URL for the button. Internal links (within b.stage) will trigger a screen transition, while external links will open in a new window.
  • Button Name: Enter the name of the button in the desired language field. If left blank, it will be displayed in the default language.
  • After adding the button, you can use the [Style] menu to adjust the button's appearance, alignment, and color.

✔️ Adjust button order

• If there are two or more buttons, you can change the order by clicking and dragging the ⁝⁝ icon that appears when you mouse over.

✔️ Button editing

• If you need to edit a registered button, you can edit it by clicking the ••• that appears when you mouse over, or you can delete it by clicking the ⓧ icon.

• Style

  • Vertical Padding
    • You can move the button to add margin at the top or bottom.
  • Cover Height

• • • Choose Brand Cover height and upload corresponding image or video. Set mobile and desktop background separately for customer experience.
    • Full page: Brand Cover displays as full screen on any device.
    • Auto: Brand Cover height is automatically adjusted based on the uploaded contents. For Hero images, we suggest using the Auto setting.

• Content Align

  • You can set the alignment of content elements (logo, description, social links).
  • Note: If you set the [Cover Height] to Auto, only left, center, and right alignments will be available.

• • Background

• • • You can enable or disable the display of the background. When disabled, a white background will be provided.
    • When you click on [Image/Video], you can choose to set an image or a video as the background.
      
      • Image: Press the [Upload] button to directly upload an image from your device or use [Unsplash] to search and add images.
        
        • Unsplash is a website that provides high-resolution photos with free-to-use licenses.
        • JPG, PNG, and GIF file formats of up to 10MB are supported.
      • Video: Press the [Upload] button to directly upload your desired video.
        
        • MP4, MOV file formats of up to 300MB are supported.
    • When you click on [Color], you can configure the color settings.
    • Enhance visibility of Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.

✔️ Design - Divider

• Line: Add line as a divider between sections.
• Color: You can choose the color of the line.
• Line Settings: You can set the line thickness (1 to 8px) and width (Full, Inset, Ratio: 1% to 100%).
• Style
  • Vertical Padding: You can move the button to add margin at the top or bottom.
  • Background: You can enable or disable the display of the background. When disabled, a white background will be provided.
    • Enhance visibility of Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
    • When you click on [Color], you can configure the color settings.

✔️ Embed SNS - X (Twitter)

• Connect with your account to view the latest X (Twitter) feed. This section can only be added by Plus Plan customers.
• After clicking the "Add Section" > "X (Twitter) button, please enter the account ID you wish to connect.
• Section Title: You can enter the title of the respective section (up to 100 characters)
• Account: Display new posts from your connected account. (up to 24 hourly) You can modify the account information after adding the section.
• Style
  • Vertical Padding: You can move the button to add margin at the top or bottom.
  • Content Align: You can set the alignment of content elements (left/center/right).
  • Background: You can enable or disable the display of the background. When disabled, a white background will be provided.
    • You can enable settings for mobile and PC separately to upload different cover images.
    • Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
      • Unsplash is a website that provides high-resolution photos with free-to-use licenses.
      • It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
    • Enhance visibility of contents by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
    • When you click on [Color], you can configure the color settings.

✔️ Embed SNS - Instagram

• Connect with your account to view the latest Instagram feed. This section can only be added by Plus Plan customers.
• After clicking the "Add Section" > "Instagram" button, please enter the account ID you wish to connect. (Professional account only)
• Section Title: You can enter the title of the respective section (up to 100 characters)
• Layout
  • Card

• • • Simple

• Account: Display new posts from your connected account. (every 20 minutes) You can modify the account information after adding the section.
• Style
  • Vertical Padding: You can move the button to add margin at the top or bottom.
  • Content Align: You can set the alignment of content elements (left/center/right).
  • Background: You can enable or disable the display of the background. When disabled, a white background will be provided.
    • You can enable settings for mobile and PC separately to upload different cover images.
    • Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
      • Unsplash is a website that provides high-resolution photos with free-to-use licenses.
      • It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
    • Enhance visibility of contents by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
    • When you click on [Color], you can configure the color settings.

✔️ Embed - YouTube, Spotify, Apple Music

Embed: Embed content from YouTube, Spotify, and Apple Music in your sections.
Decorate a Custom Page by adding the music playlist or videos of your favorite Star.

After clicking the "Add section" button, please enter the Embed Code.

① YouTube

1. Click "Share" on the video you would like to add, and then select "Embed."

2. Copy the Ifame code and paste it into the Embed Code area.

② Apple Music

1. After clicking [⁝] icon from the album or music you would like to add, select "Share > Copy Embed Code". Then, paste the copied code into the Embed Code area.

③ Spotify

For Spotify, set height to 152px or below, or 352px and above if the area needs more filling.

1. Click [⁝] icon from the album, music or playlist you would like to add, select "Share > Embed Album/Track/Playlist".

2. Paste the copied code into the Embed Code area.

• Section Title: You can enter the title of the respective section (up to 100 characters)
  
  • This will be shown only in default language if left blank.
• Embed Code: You can click to modify the existing code. When making changes, please check if the code remains valid.
• Size
  
  • Preview is available for both mobile and PC by selecting each.
  • Width: Choose between "Full" and "Custom".
    
    • Custom: Adjust the ratio (%) by moving the button. (Individual settings for left and right are not available.)
    • Inset: Choose whether to add margin on the left and right.
    • Height: Click the right arrow (▼) to select a ratio.
      
      • If you choose "px" a field for numerical input will be activated. (You can set the height up to 2000px.)

• Style
  
  • Vertical Padding: You can move the button to add margin at the top or bottom.
  • Content Align: You can set the alignment of content elements (left/center/right).
  • Background: You can choose to show or hide the background. If it's hidden, a white background will be provided.
    
    • You can enable settings for mobile and PC separately to upload different cover images.
    • Image: Click the [Upload] button to directly upload an image, or use [Unsplash] to search and add images.
    • Unsplash is a website that provides high-resolution photos with free-to-use licenses.
    • It supports file formats such as JPG, PNG, and GIF, up to a maximum of 10MB in size.
  • Enhance visibility of Brand Cover by applying overlay effect. You can apply a solid color (with transparency) or a gradient effect.
  • When you click on [Color], you can configure the color settings.