Customizing a Website Builder Experience

In this topic, you will learn how to customize the visual appearance of your Website Builder experience including styles, header, and footer.

Styles

The Styles panel allows you to customize the visual appearance of your Website Builder experience. Access it via the styles icon on the right side of the editor. The panel is organized into the following sections:

Theme

  • Theme: Choose between Dark or Light theme

Fonts

  • Primary Font: Changes the font for header, footer and video titles
  • Secondary Font: Select the secondary font for complementary text elements like text blocks and buttons

General

Contains global style settings that apply across the experience.

Duration Label

  • Background: Color of the duration label background
  • Text: Color of the duration label text

Primary Buttons

  • Background: Button background color
  • Background Hover: Button color when users hover over it
  • Text: Button text color
  • Icons: Button icon color

Secondary Buttons

  • Background: Button background color
  • Background Hover: Button color when users hover over it
  • Text: Button text color
  • Icons: Button icon color
  • Hover: Additional hover state styling
  • Border: Button border color

Tertiary Buttons

  • Background: Button background color
  • Background Hover: Button color when users hover over it
  • Text: Button text color
  • Icons: Button icon color
  • Logo Text: Color of the logo text
  • Link Text: Color of header/footer links
  • Link Icons: Color of header/footer icons
  • Link Background Hover: Background color when hovering over links

Video Elements

  • Titles: Video title color
  • Subtitles: Subtitle text color
  • Borders Full Screen: Color of borders in full screen mode
  • Duration Label Background: Background color for video duration labels
  • Duration Label Text: Text color for video duration labels
  • Primary Buttons Background/Text/Icon: Styling for primary buttons within video players
  • Secondary Buttons Background/Text/Icon: Styling for secondary buttons within video players
  • Call-to-action Background/Text/Icon: Styling for call-to-action buttons in videos
  • Tag Background/Text: Styling for video tags

Reset All Styles: Click this button at the bottom to reset all style customizations to default values.

The header and footer appear at the top and bottom of your Website Builder experience and can be customized to include branding, navigation, and search functionality.

Accessing Header Settings

Click the Customize Header button that appears when hovering over the header area in the editor, or access it through the gear icon in the top right corner of the editor.

  • Title: Enter the title text that appears in your header.
  • Logo Image: Upload a logo image (recommended size: 400px width, 2MB max). Click or drag an image into the upload area to add your logo.

Add navigation links to your header menu by clicking Add Menu Item. You can choose from three types of menu items:

  • Custom Link: Add a link to any external URL with custom text.
  • Collection: Link to a collection page within your experience.
  • Page: Link to one of your experience's pages.

Menu items appear in the header navigation and help users browse through your experience.

Enable site-wide search functionality to help viewers find content:

  • Check Enable site search to activate the search feature.
  • Include Tag: Enter video tags to include only specific videos in search results.
  • Exclude Tag: Enter video tags to exclude certain videos from search results.

Next: Website Builder Settings