Webinar Landing Page Documentation

Webinar Landing Page

last update 19.09.2024 (v1.0)

Created by Olha Vorozhtsova (UX & Designed by), Max Vorozhtsov (UX & Front-end) & Nastassia Kanavalava (Front-end)

Requirements

• All products and plans

Installation

1. Install the theme into your the HubSpot instance from the HubSpot marketplace. 
2. Create Website page / Landing Page using the templates in the Theme

Technology

• HTML (with Hubl)
• CSS
• JS

PLEASE NOTE: No plugins or additional libraries were used in the development of the theme.

Styling Setup

Initial theme styling includes:

• Colors (by the default HubSpot will use your brand colors if they were set)
  • Primary Color
  • Primary Color (Tin)
  • Text color
  • Text Color (Contrast)
  • Background Color

• Fonts
  • Text font & size (default - Poppins / 24px)
  • Titles Font (default - Lora)
• Page Width
  • Content Width (in %, default - 90%)
  • Max Content Width (in px, default 1200px)

Templates

Theme includes 6 templates:

• Webinar page (DEMO)
• Thank You page (DEMO)
• Recording Page (DEMO)
• Blog Listing (DEMO)
• Blog Post (DEMO)
• Custom Page (DEMO)

Theme also include 11 system templates in the theme styles.

In case you need additional template/-s in the theme - please reach out the support.

Sections

Theme includes 5 full width sections for enlarging the content:

• Image (Left) / Text (Right)
• Image (Right) / Text (Left)
• Reviews & Registration Form
• Speakers
• Upcoming Webinars

Modules

Theme includes 8 modules:

• Hero & Form (used on the main page)
  • content:
    • hero reach text
    • possibility to change the photo to the standard icon
    • hero image
    • hero button text
    • date
    • time
    • enable duration box
      • duration
    • form text
    • form title
    • form

• • styling:
    • enable hero image rotation
    • enable gradient
    • overwrite gradient color
      • gradient color
    • enable target image
    • enable line
• Line, Topics & Speakers (used on the main page)
  • content
    • enable line
      • line content
    • enable card's title
      • cards title
    • cards (repeatable)
      • card icon
      • card text
    • enable gift section
      • gift rich text
      • enable gift label
        • gift label (text)
    • enable speakers title
      • speakers title
    • speakers (repeatable)
      • speaker image
      • speaker name
      • speaker description
  • styles
    • enable gradient
    • enable line animation
    • speaker border radius
    • enable gradient on speakrs photo
    • enable decoration line
    • gifl label angle
    • gift block angle
• Reviews & Form (used on the main page)
  • content
    • enable reviews section
    • reviews as a slider
    • enable reviews title
      • feedback title
    • reviews (repeatable)
      • review text
      • review author
      • review author job
      • enable reviewer photo
        • reviewer photo
    • form title
    • form text
    • form
  • styles
    • enable gradient
    • form block border radius
    • form inputs border radius
• Upcoming Webinars (used on Thank You page & Recording Page)
  • content
    • title
    • enable register buttons
      • buttons text
    • upcoming webinars (repeatable)
      • image
      • date
      • title
      • link
  • styles
    • add gradient on the card image
• Thank you Message (used on Thank You page)
  • content
    • title
    • message
  • styles
    • enable gradient
    • enable line
• Recording (used on Recording Page)
  • content
    • add subtitle
      • subtitle
    • title
    • enable description
      • recording description
    • video type (select)
      • choise: video
        • video
      • choise: youtube embed
        • youtube video id
        • youtube video height (mobile)
        • youtube video height (tab)
        • youtube video height (desctop)

• • styles
    • enable gradient
    • adding line
• Speakers (alternate speakers module without additional decoration & content, used in the Speakers section)
  • content
    
    • enable speakers title
      • speakers title
    • speakers (repeatable)
      • speaker image
      • speaker name
      • speaker description
  • styles
    
    • speaker border radius
    • enable gradient on speakrs photo
• Custom Page (used on Custom Page)
  • content
    • page title
    • custom text
  • styles
    • enable gradient
    • enable thin container

In case of any questions - please reach out our support