VIDEO TRANSCRIPT:
Let's go over the Event Calendar
module.
So this
is a
Scaffold Pro
only module, but it is a very cool
module and I'm gonna show you. And even
though it's Scaffold Pro,
I-it could still save you money on your,
uh, website costs.
So we'll go over that in a minute. But
Event Calendar, what is it?
It is what it sounds like. If you are running
a company
and you guys have, uh, events,
they could be virtual events, uh, like
online conferences or, uh,
seminars, or they could be
webinars,
uh, or in-person events. They could be,
uh, even like things like lunch and learns,
uh, trade shows, all kinds of things.
So it is a module
that you can have a-an events page on your website,
and you can list your upcoming events. And you can have,
uh, here as example, we have,
uh, a conference
in Texas. We have an upcoming webinar
online,
a trade s-show in Chicago.
So let me show you how this works. And for the user,
you know, they can click on each one of these things.
You see it hovers, and then it takes them to
the page,
uh, to register for the event.
I obviously have,
um, event registration page templates
pre-built in Scaffold Pro as well to go along with
this, as well as a, uh,
thank you page for if someone signs up
for that event,
there is a thank you page that they could download
like a calendar link or
get information, things like that.
But I'll show you the
first part. So here we have include event type
filters. So, uh,
I don't know why you wouldn't want them there, but for some reason
if you chose you didn't want the filters there, say
you only had webinars. Why am I gonna have
a filter for when they're all the
same thing?
So this is include event type filters.
I've removed it, but now when I click it,
you could see the event,
uh, filters come up, so you could choose between conference.
Th-this doesn't work in the editor,
but I'll show you what it looks like when it's live on your website.
Like I-- it's not, uh, it won't let me click
to choose,
uh, you know, to show you how it works when you're in the
page editor.
But if I show you here in the actual
page and you can see I'm on dark mode
here, which is another Scaffold
Pro only feature,
I can select conference, and then it's
only showing me the conferences. I could do lunch and learn,
trade show, upcoming webinar.
Here I distinguish... You can just put,
uh, just webinar if you want,
but I distinguish upcoming webinar
'cause I think, you know, upcoming webinars
should be on the events page.
And then if you have, uh, on-demand
webinars or past webinar recordings,
you could put that on your resources page, which
there's a module, a k-
a kind of sister module to this,
uh, where it's for resources.
But let's go back into here and show you how this works.
So if you do have filters
set up, you could change the size of them.
You know, small, you can make it itsy bitsy.
Uh, you could change the text style if you wanna
make it uppercase.
I'm just gonna go back to regular.
Uh, you could change the font type, so
monospace. So I actually like--
You can see I have used the font monospace on these
tags. I like having the monospace
font sometimes. I think it's, uh,
I don't know, it gives it like a cool techy look. So
things like filters, tags. Here
for the bit, for the location, we have the
font monospace. But for here, I'm actually gonna go
set it back to default.
I'll put the, uh, font weight back
to, was it at four?
And then the spacing here, you could choose how much spacing.
So basically, this is like,
you know, if, if you wanted to make sure
that the filters aren't gonna get, uh,
messed up looking on smaller screens basically
is what that's for. But I tested these on different
screens and they look fine
on different screen sizes. But anyway,
so those are the filters.
And then you have the events themselves. So,
uh, here you can't
do much in the way of styling. I, uh,
the rest of Scaffold is very flexible
and, like, you can completely change the color
of cards. You could change the border, you could change this, you could
change that. This is just
you get the style of the card here,
and you can add the information, and that's about it.
I, I didn't wanna get this module bogged
down. This is a very utilitarian module.
I didn't wanna get bogged down.
And we can add more features, styling features
like that in the, in the future.
But, um, this is kind of what you
get right now.
So if we click in here,
and now that I'm thinking out loud, I probably will add...
So let's see actually,
you can...
Okay, so you can change some of the settings
here. So event name you could
change for
SEO. So
just to show you, we have the events here,
but if you wanna change some of the styling,
I've-- This, this project is so massive
and I did it all, uh, coded it all,
so forgive me, I kinda forgot
about some of these settings right here. But,
so we do have style settings in here. We have,
um, things like,
uh, so you could choose for SEO purposes
what you want these,
uh, heading tags to be.
So you could change it to H3,
H1, whatever,
and then you could change the size here.
So let's change it back to three,
and we, we'll just keep this at H2 for
now. Uh, and then of course you can make it
uppercase, lowercase.
Uh, we could do the font monospace. We
could do the regular. We could change the font weight, letter
spacing, all this good stuff.
Now let's go to event description. You could change the size.
Let's close this
in a fun way. So all this good stuff. So you can
customize things.
The tag here, you could change the border
radius on the tag. So these are the tags right
here that show, um, what
type of event it is.
I think just a slight,
uh, thing right now it's at uppercase and,
and, uh, monospace.
Uh, the location you can change
so it's like you can, you know... Again, this
is for font monospace. If we change
it to default,
let's change it to mo-
monospace. So
and then let's look at the card settings here.
So here you can change the border radius
You can make them s-square,
you can add more shadow to them,
and you could choose whether you want them to lift on hover or
not. So like,
with that big shadow kind of looks weird. Let's
put it back
to this, and you can see the lift on hover.
And I've said this a, a bunch of times,
when you're editing in the HubSpot page editor and
things look really snappy like that,
they don't look like that when they're live. When they're
live,
you see it's like more like a smooth animation.
So that's just something to keep note of. Whenever you see that kind
of like snappy,
uh, ness in the editor, that's
just how it looks like on the editor. It's always smoother
in the actual page.
Um, and so yeah, this is where we
have our, our card setting. So yeah, you can't change
the color and stuff like that, but you can customize
the cards in here.
Um, so let's go back...
Actually, let's go back to style just to show you too.
Uh, Scaffold
Pro,
you could change the animation type too. So like
here, let's do the page
load again,
and they just kind of fade in. But you could change it if you
want them to like,
uh, if I go here,
and I set it to,
uh, let's do zoom in
and then save, and you can change the animation type, you could
change how long you want it to delay. So let's
do a hundred
milliseconds,
and we'll do the animation to
500 milliseconds.
And then when that's saved,
let's just seal this. So now you could see it's different.
It's a little longer.
It zooms in.
So yeah, just,
just to show you. E-e-every module
on Scaffold Pro has these settings
in the style. You can do,
uh, background color, spacing alignment,
page animations, all that good stuff. But
we got that out of the way. So let's show you how this works.
So this is just a repeater,
uh, field, field group.
So you can...
If I add a new one,
now we have a new one added over there.
Let me go back.
Let me delete that. You can,
you can, uh,
clone them. So if I clone this,
we have the same thing at the bottom there.
You can, uh, rearrange them however
you want. So
just a quick note.
I said that this is on Scaffold Pro, but it
could still end up saving you money.
So HubSpot's a little all
over on the place with this. I've seen
to, to get HubDB, normally how
I would set something like this up
is by using HubDB,
and I can't get access
to HubDB,
um, unless I pay thirteen hundred dollars
a month for
the Content Hub Pro.
So this is something I built,
so you can be on the base package
of HubSpot,
and sometimes I'm sure there's ways you can get access
to HubDB without going all the way
and spending that much money. But the
bottom line is this was set up
that you can use the base package
of HubSpot
and still get an event library,
or in the case of the resource library, an event
calendar or a resource library
similar to what you'd have on HubDB without
needing HubDB.
But there are certain drawbacks because of that.
So, and these are features I might
be able to add going forward.
But now it doesn't automatically...
It won't auto-automatically sort itself
by upcoming date. So like
obviously you'd want the most recent,
uh, or the soonest,
like the, the one that's gonna be coming up
in the least amount of time, you'd wanna show that first.
So we have, for example, this one that's
in March of twenty twenty-six,
then this one that's in May of twenty twenty-six,
then this one that's
in June,
and so on and so forth.
So that's manually set where I
could just... There's nothing stopping me from putting this
here. And now the one that's
in March is th-third
in order
instead of first.
So I, I have to look at,
uh, it's on the roadmap to update to
like have it, so even without using HubDB,
I can scan the date here
and automatically not show it if
the date is set,
you know, uh,
uh, or automatically sort it
if the, by the date. And then also
what's gonna happen here,
the way it is right now
is that,
uh, say I have an event for,
uh, well, today's Halloween.
So let's say I have an event for
Halloween,
and then next week
my event is still gonna be here on
the website unless I come,
if I, unless I have a note
to go to the page and remove it. So
that's just something to keep in mind,
something to keep track on. You have to manually...
And again, it's on the roadmap to update.
Um, I just think it's cool that you have this
module to begin with to,
that you can have an event calendar, like a
very professional
event calendar
on your website,
uh, without spending ridiculous amounts
of money to, or
custom coding some sort of crazy solution.
This is like a very useful thing to have.
It just takes a little bit of, uh, maintenance
to, to just... You,
you know when your events are over, you know when...
So you,
whoever's in charge of the website, when the event's over,
they just have to have a reminder to remove the
event from the page here,
which is as simple as going
boop. That wasn't
very hard, was it?
Okay. So let, let's go in here and, uh,
show you how you can select event type.
And basically,
whatever,
um, event types you set here, they automatically
get added to the filter up here.
So one of the things we're actually gonna,
uh, have is if
for whatever reason you have an event type you don't wanna
include in the filter up here, that's another thing on
the roadmap. But here you could see
we have a ton
of different event types: retreat,
award ceremony, charity, expo.
And if there's something on here you need that we don't
have, just contact us. Just
open up a ticket in support
and we will add it. We will add it as quickly as we
can. But you have all these different
event types.
Um, you have the,
you know, the event name, description,
link text are here.
So all of these are events that you have registered now, but you'll
see on the resource library, you might wanna have
Watch now for
a webinar recording or
Read now for a case study. So you can
change that text.
You have where you want to link to. It could be,
you know, it could be a,
a different, um,
it could be a different page. It could be a different website
if you have a partner. It could be a file,
or it could be a pop-up CTA. So you can have
a, uh, pop-up CTA t-
with a form to, like, fill out to sub-
to register for this event. But I think
usually the best thing is just to redirect
to a page.
Um, and then this is accessibility
that I would just put, like,
uh, sign up.
Sign, sign
up, I can't type,
for our,
our webinar on whatever.
And this is for people using screen readers and
things like that. It's important. You want your
website to be,
uh, accessible, as accessible
to as many people as possible.
You have your location, things like that.
So I don't think there's
much more to it. It's very intuitive.
I showed you how you can edit the styles,
um,
and I showed you how you can edit your filter
settings. I showed you how you can
add events. Oh,
the big thing too here is
you want-- So
you can add whatever image you want on these.
So I made a note here that, like, what image
I believe looks best is an image that's a sixteen
by nine aspect ratio,
and that every image should look
the s- should be the same size so this
looks, you know, consistent.
If I go here to the next card
and I add
just, like, a random image like this,
now that, you know, it's kind of
my module is kind of, like, all over
the place now. I mean, it's not terrible, but you could see
that it, it just doesn't look right.
Everything's different sizes. So let me,
um, tell you a trick that I like
to use. So if, if you're not,
uh, uh, if you're not
very good at photo editing or you don't use
photo editors a lot,
kind of a cool trick, um,
I've learned and taught other people to use
is that you can, you can open up, uh, Google
Sheets, and I'm sure something similar in PowerPoint.
But you can o- open up Google Sheets
and then say you
want a picture of New York City or whatever.
Open up Google Sheets,
then in another tab, open up Google,
um, and search
New York City in Google Images.
Save the image,
then drag and drop it or upload it to Google
Sheets, and then just
maximize it so it's taking up the entire
slide. And then you can, uh, you
can even make it go past the slide. Anything that's
past the borders, like the edge of the
slide, will be,
uh, cropped off.
And then you can, in the settings, you can
go to, I think it's view or edit,
and you can save that slide as an image, as
a PNG.
So that's just a, a easy way
that you can use Google Slides or something to make
these images. You just find the image you want,
copy it onto Google Slides,
then save the slide as an image,
and that way you'll get... And it's very similar aspect
ratio to what these are,
and that way you'll get a consistent,
uh, image size across this. So it's just, like, an easy
way. You might be
a Photoshop pro, I don't know. But if you're not,
it's just an easy way that you can keep a consistent,
uh, image sizes on, on
a module like this.
So that's it. I know
it was a lot. It's a very simple module.
I kind of probably gave you more information than you
needed to figure out how to use this,
but, um, I'm, I'm excited about this
module. I love it.
I think it's one of the most useful modules
for sure on Scaffold Pro.
So, um,
I'm excited to see what you build with it, and if you have any questions,
you can reach out, out to us
at support.