Event Agenda Module for HubSpot

When you add the module to the page, you will see the default text and images in place.

Now, let's look at what you can edit and what the fields mean. Each module has two main tabs. Content and Styles. I recommend adjusting the content tab first and then once you have that set move on to the styles tab to make visual refinements.

Content

The first thing to note is this module allows you to add content for any number of multiple days. Inside each day you can then add a nested list of multiple time slots.

Days (Repeater)

Date

Use the date picker to choose your day.

Text Label

By default, the date will appear in the tab navigation. You can enter text here, if you would like to override that.

Tab Heading

By default, the date will appear in the content section. You can enter text here if you would like to override that. Or completely hide it.

Time Slots (Repeater)

Each day can have multiple time slots. Once you add a time slot you will see the following editable fields.

Start / End Time (required)

Manually enter how you would like your timestamp to appear.

Time (required)

Enter a title

Subtitle

Enter a subtitle if desired

Description

A rich text field for your description of the event.

Time Slot Label

In my demo I use this to display a sponsor for a particular timeslot. But you could either delete this text or change it to another label if you would like. It could even be used to label multiple tracks with a unique track name.

Background Color Override

Change the row background color to bring attention or for color coding multiple track presentations.

Time Slot Label Text Color Override

Override the default row text color.

Speakers (repeater)

Inside each time slot you can add multiple speakers for each time slot. Once you add a speaker by clicking + Add you will see the following editable fields.

First Last Name

Enter the speaker's fullname

Job Title

Enter their job title. Leave blank to hide.

Headshot

Upload and add their headshot. Use a square cropped image. If you are not sure how to crop your image, read this tutorial.

LinkedIn Profile

Add the full public profile url

Twitter Profile

Add the full public profile url

Company Name

Enter the company name

Company Website URL

Enter the company website address

Company Logo

Upload the company logo and adjust the width and height to be properly sized. You might notice your image is still large after making a size adjustment. This is because it takes a few minutes for HubSpot to render a smaller version of your image. After a few minutes, refresh the page and you should see the smaller image.

Text Labels

This module uses some default text labels for the tab navigation and when displaying sponsors. You can override these text labels to your native language if needed.

Show All / Time Slot Label / Day

Additional Information

Use this rich text field to display any legal text or any information relevant to all days.

Styles

Navigation

Border Color

Link Color

Button Top Border Color

Button Background

Button Text

Button Active Background

Button Active Text

Day Content

Day Row Background

Content Card Background Color

Content Card Spacing

Category Text Color

Day Row Text

Day Small Text

Change the color of the text with the small HTML element. Used in the day title subtitle.

Day Title Font

Changes the font and color of the day title in the content card.

Time Slot Description Font

Change the font and color for each time slot description.

Additional Information Font

Change the font and color the rich text field below the agenda.