Managing the single-session full Landing page tab


Hosts can customize the branding and design of their registration pages, using the Page Builder, to follow their brand identity and be more engaging for event attendees. The Page Builder customizes attendee registration landing pages. This feature by default uses the host's event logo, and hosts can customize the headline, page text, and images, and create designs and content. Hosts can use the rich text editor for the header and paragraph text, and they can apply text styles as well as hyperlinks to images and text. The pages automatically inherit the event’s branding and color palette. Additionally, hosts can drag and drop sections and configure the section settings.

This feature is available for full single-session events and used in registration, and hosts can access it through the landing page within the registration.

Learn more about creating a single-session event.

Note: The Landing page builder is currently only available for single-session full events.

This article covers:

Prerequisites for managing the single-session Landing page

How to access the Landing page tab

Access Page Builder in the event creation setup navigation menu

  1. Create a single-session full event.
    You can also edit an upcoming event to access event setup.
  2. In the navigation menu, click Registration & Join, then click Landing page.

Access Page Builder in the event creation setup

  1. Create a single-session full event.
  2. In the navigation menu, click Registration & Join, then click Landing page.
  3. Click the page you want to edit to access the Page Builder.
    You will be directed to the Page Builder where you customize the page's branding. A live preview of the landing page is updated and displayed—in real-time—on the right side of the editing canvas as you add information throughout the customization process.

How to use additional header menu actions

  1. Access Page Builder in Zoom Events.
  2. In the top header menu, click the following actions:
    • Preview Page: View the simple design preview of the page from the attendee's perspective. Toggle between a desktop and mobile view to see the design responsiveness.
      1. Click the swap-view icon to switch the preview between a desktop or mobile layout.
      2. Click Exit Preview to close the preview.
    • Reset Page: Reset the page to its default form to remove all color and content changes.
    • Save: Save your progress.
    • Undo or Redo: Click the Undo button to undo your previous action, or click Redo to redo something that you've undone.

How to use page building

Manage page-building components

  1. Access Page Builder in Zoom Events.
  2. On the right side of the screen, hover your cursor over and click the different content blocks and sections to customize them.
  3. Customize your styling components.
  4. Use the rich text editor for header and paragraph text to apply text styles as well as hyperlinks.
  5. In the top-right corner of the page, click Save to save changes.

Manage page-building sections

  1. Access Page Builder in Zoom Events.
  2. On the right side of the screen, in the editing canvas, complete the following actions:
    • Edit the section settings:
      1. Click a section on the editing canvas.
        The section will show an orange outline.
      2. Modify the following settings:
        • Section background image
        • Background color: The color applied to the background behind the section.
        • Padding: Set the space around the entire section or specific sides.
        • Radius: Select how much radius (rounded corners) you want for the section.
        • Hide in mobile: Click the toggle to enable or disable it. Hosts can hide or show entire sections in either desktop or mobile views in Page Builder to optimize content for different views. Sections will be hidden or displayed accordingly based on the toggle settings.
    • Save a section as a reusable block.
      Note: Saving reusable blocks is different than saving the section. Section changes will save with all other page builder changes in the overall Save button on the page.
      1. Hover your cursor over a section, then click the Save icon .
        A pop-up window will appear.
      2. In the window, enter a name for the block.
      3. Click Save.
        Giving the section a name and saving it as a block will allow the block to be re-used in this event or in other events (style and non-event content will be carried over).
        The Blocks tab will appear in the left navigation menu.

Manage additional actions for components

  1. Access Page Builder in Zoom Events.
  2. On the page preview on the right side of the screen, hover your cursor over a component or section, then select from the following actions:
    • 6 dots : Click and drag the component to a different location on the page preview.
    • Copy : Duplicate the component.
    • Delete : Delete the component.

How to manage the Page tab

  1. Access Page Builder in Zoom Events.
  2. In the left navigation menu, click the Page tab.
  3. Under Page Settings, enter or view information for the following fields:
    • Page URL: Includes the registration link. You can view and copy this link after the event is published.
    • Favicon: Click the image, then upload a new image or use AI image generation. This feature is for the browser favicon.
    • Browser tab name: Enter a name for the browser tab.
    • Page background: Add a background image or video for the landing page.
      Note: Upload a JPEG, PNG, or MP4 file. The maximum file size is 10MB. The maximum video length is 60 seconds.
    • Background color: Select the color for the background: To the right of the component you want to customize, click the circle color bubble.
      A color picker will open.
      Note: This is the background color for the entire landing page and will appear behind images or video content.
      • Select the color you want to apply to the component by using the following methods:
        • Click a circle to use a color you added to the event color palette.
        • Use the slider to select a color.
        • Enter a HEX number.
        • Enter RGB numbers.
    • Content canvas width: Click the dropdown and select the canvas width.
    • Font style: Click the dropdown and select from a list of standard web-safe fonts.
    • Alignment: Select if you want the landing page content to be aligned Left, Center, or Right.

How to manage the Style tab

Customize the Style panel (default page styles)

The Style tab sets default colors for common components like text, buttons, and dividers. As you define the colors of the sections in the color palette, the colors will be applied to the mapped visual components automatically. You can manually override the color applied to an component if you don't want the color from the color palette used.

  1. Access Page Builder in Zoom Events.
  2. In the left navigation menu, click the Style tab.
  3. Under Global Styling, access the section (Page, Text, Button, etc.) that you want to customize:
    • Select the color for each component: To the right of the component you want to customize, click the circle color bubble.
      A color picker will open.
      • Select the color you want to apply to the component by using the following methods:
        • Click a circle to use a color you added to the event color palette.
        • Use the slider to select a color.
        • Enter a HEX number.
        • Enter RGB numbers.

Understand the Global Styling and Styling panel components

Global Styling components

The following components appear when you first click the Style tab in the left navigation menu. This displays the shared styling for common components on the page; this is inherited by default from the Event Branding tab but can be customized to the landing page.

Page

The page section lets you change the colors mapped to the core design components on the page.

Note: The page background color is handled in the Page tab—not this area. These only affect the header, footer, and dividers.

  • Header background: The color applied to the background behind the page's header.
  • Header body text: The color applied to the page's header body text.
  • Footer background: The color applied to the background behind the page's footer.
  • Footer body text: The color applied to the page's footer body text.
  • Dividers: The color applied to the page's dividers.

Text

The text section lets you change the default colors used in the primary and secondary text that appears. Primary text relates to the most essential text necessary—title and dates of the event—while secondary text relates to text that helps with navigation, such as tabs that appear on the event details page.

  • Primary: The color applied to primary text.
  • Secondary: The color applied to secondary text.
  • Paragraph: The color applied to text in paragraphs.
  • Hyperlink: The color applied to the hyperlink text.
  • Hyperlink hover: The color applied to a hyperlink when a cursor is hovered over the hyperlink text.

Button

The button section lets you change the default colors used in buttons that appear on the page. Primary buttons are the buttons that execute the most important action when clicked, while secondary buttons relate to actions that are less important than primary buttons when clicked:

  • Primary Button Color: The color applied to primary buttons.
  • Primary Button Text: The color applied to text in primary buttons.
  • Primary Button Hover: The color applied to primary buttons when they are hovered over.
  • Secondary Button Color: The color applied to secondary buttons.
  • Secondary Button Text: The color applied to text in secondary buttons.
  • Secondary Button Hover: The color applied to secondary buttons when they are hovered over.
  • Secondary Button Border: The color applied to the borders of secondary buttons.

Tag

  • Tag color: The color applied to tags.
  • Tag text color: The color applied to tag text.

Component options menu

The following components appear in the left panel when you click a specific component on the editing canvas. You can customize these components, using different tools.

Text

  • Background color: Select the text's background color.
  • Padding: The space around the text component.

Image

When you click an image, the image options section lets you change the image's alignment, spacing, and URL. This visual component enhances your page and helps break up text.

  • Image: The image that you can change or upload. You can also generate images using AI Companion, if it's enabled.
  • Link to: The image's URL that you can enter.
  • Alt text: Describe the appearance or function of an image on a page.
  • Container Color: Select the color of the container that surrounds the image.
  • Alignment: Select the position of the image within the image component. This will only be visible if the image is scaled lower than 100%.
  • Radius: Select how much radius (rounded corners) you want for the image.
  • Padding: Set the space around the image around the image component.
  • Scale: Apply resizing to the image.

Spacer

  • Color: Select the spacer color.
  • Height: Use the slider to select the height of the spacer.

Button

  • Link to: Add a URL to any valid webpage.
  • Button color: Set the button's color.
  • Button hover color: Select the button's color when it's hovered over.
  • Text color: Select the color of the button text.
  • Font style: Select the button's font.
  • Font size: Select the button's font size.
  • Button text: Enter the button text.
  • Border color: Select the button's border color.
  • Border width: Use the slider to select the border width.
  • Border style: Click the dropdown and select the button's border style.
  • Shape: Select the Square, Round, and Pill shape for the button.
  • Size: Select if the button will be Small, Medium, or Large.
    Note: Button width and font size will also impact the button size.
  • Width: Use the slider to adjust the button's width.
  • Alignment: Select if you want the button to be aligned Left, Center, or Right.
  • Padding: Set the space around the button.

Divider

  • Color: Select the divider color.
  • Style: Click the dropdown and select the divider's appearance.
  • Weight: Select how heavy you want the divider to appear.
  • Padding: Set the space around the divider.

Video

  • Video: Select if you want to enter a video link or upload a video file.
    Note: The maximum video length is 5 minutes. The maximum video size is 150MB, MP4 files only. Only YouTube and Vimeo are supported.
  • Alignment: Select the position that the video is in.
    Note: This will only be visible if the video scale is less than 100%.
  • Radius: Select how much radius (rounded corners) you want for the video.
  • Padding: Set the space around the video component.
  • Scale: Apply resizing to the video.

Event detail

The Event detail component is a native component that automatically uses data from the event creation setup. It is used to show basic event information and show the default registration button to capture registrations.

Note: Changes made to the Terminology section in the event creation setup may not appear here in the builder but will appear correctly on the published event page.

  • Primary Button Color: Select the color applied to primary buttons.
  • Primary Button Text: Select the color applied to text in primary buttons.
  • Primary Button Hover: Select the color applied to primary buttons when they are hovered over.
  • Secondary Button Color: Select the color applied to secondary buttons.
  • Secondary Button Text: Select the color applied to text in secondary buttons.
  • Secondary Button Hover: Select the color applied to secondary buttons when they are hovered over.
  • Secondary Button Border: Select the color applied to the borders of secondary buttons.
  • Padding: Set the space around the video.
  • Hide share link: Click the toggle to enable or disable it. When enabled, the Share icon will be hidden from attendees.

Speakers

The Speakers component automatically pulls the speakers for the event. Speakers will display or hide as speakers are added or removed from the event.

Note: Changes made in the Terminology section may not appear here in the builder but will appear correctly on the published event page.

  • Alignment: Select if you want the button to be aligned Left, Center, or Right.
  • Padding: Set the space around the component.

Masthead

The masthead image automatically uses the masthead image from the event. This will update as the event masthead is updated. If you want a different image for the landing page, add a new image component from the Add tab.

  • Alignment: Select if you want the button to be aligned Left, Center, or Right.
  • Radius: Select how much radius (rounded corners) you want for the image.
  • Padding: Set the space around the image.
  • Scale: Apply resizing to the image.

Timer

  • Select if you want the timer to count down to Session time or set a Custom time.
  • Container color/Number color/Number tile color: Select the colors of the timer's container, numbers, and number tiles.
  • Font style: Select the button's font.
  • Alignment: Select if you want the button to be aligned Left, Center, or Right.
  • Radius: Select how much radius (rounded corners) you want for the component.
  • Padding: Set the space around the component.
  • Scale: Apply resizing to the timer component.

How to use the Add tab

The Add tab is an important area where you can add custom content to the editing canvas. The Add tab includes native and generic components.

  1. Access Page Builder in Zoom Events.
  2. In the left navigation menu, click the Add tab.
  3. Under Content, select the components you want to add to your page:
    • Under Generic, add the following components:
      • Text: Add a text box.
      • Image: Add an image and customize the image's styling.
      • Spacer: Add vertical or horizontal spacing to the page.
      • Button: Add and customize a button.
      • Divider: Add a visual, horizontal divider for your content.
      • Video: Add a video and customize the video's styling.
    • Under Event, add the following native components:
      Note: These components pull their information dynamically from the event setup.
      • Event Details: Add a section with helpful tips about joining the event and the event information.
      • Speakers: Add a Speakers section that includes speaker photos and details.
      • Masthead: Add a masthead image for the landing page.
      • Timer: Add a customized countdown timer for the event.
  4. Click and drag the component that you want to add to the page preview on the right side of the screen.

How to use the Sections tab

Sections give the page structure and house the different content components on the page.

  1. Access Page Builder in Zoom Events.
  2. In the left navigation menu, click the Sections tab.
  3. Under Sections, click and drag the sections onto the editing canvas.
    The section will appear with + Content blocks.
  4. Click a + Content block to add content; or, drag and drop components from the Add tab.
    You will be directed to the Add tab.
  5. Add content to the section.

How to manage the Layers tab

The Layers tab makes it simple to organize and reorder sections within larger, robust landing pages.

  1. Access Page Builder in Zoom Events.
  2. In the left navigation menu, click the Layers tab.
  3. In the Layers tab, view sections that organize your page.
    Additional sections can be added.
  4. To re-organize sections, click the 6 dots to the left of a section and drag and drop the section in the order that you want.
  5. On a section, click the down arrow to view your section's rows.
    Note: You can duplicate or delete your section's rows.
  6. (Optional) To the right of a section, click the trash icon to delete a section.
  7. (Optional) Click + Add section to add more sections.

How to manage the Blocks tab

Hosts can save sections of their page as content blocks and easily reuse these blocks within the same event or across different events. This eliminates the need to rebuild common page components from scratch, saving time and ensuring brand consistency.

After saving sections of your page as content blocks, you can access the Blocks tab.

  1. Access Page Builder in Zoom Events.
  2. Ensure that you have saved sections of your page as content blocks.
  3. In the left navigation menu, click the Blocks tab.
  4. Click and drag the content block into the Page Builder screen.
    The block will appear in the page builder, where you can modify it.
  5. (Optional) On a content block you want to remove, click the trash icon to delete it.

How to use localization in Page Builder

Zoom Events registration pages can be translated into other languages using the localization feature. Any customized text in Page Builder cannot be localized. All default content is localized per the selected language. Hosts can always reset their pages to the original compatible version. By default, all content seen in Page Builder pages will be translated for the supported languages if another language is selected.

Note: To ensure translation still occurs, do not add custom content and do not make individual content component changes that will stop localization from working.

  1. Access Page Builder in Zoom Events.
  2. In the left navigation menu, click the Page tab.
  3. Under Language setting for pages, click the dropdown menu, then select a language.

Limitations of localization in Page Builder

Localization in Page Builder has the following limitations: