WEBVTT

1
00:00:12.585 --> 00:00:13.085
Hello,

2
00:00:13.865 --> 00:00:18.765
everyone. Not a long time no see. Alex. I saw your name. I got so excited.

3
00:00:20.345 --> 00:00:21.085
So fun.

4
00:00:21.465 --> 00:00:22.365
Hello. Hello.

5
00:00:22.665 --> 00:00:23.965
So good to see you.

6
00:00:24.920 --> 00:00:26.380
It's always good to see people

7
00:00:26.920 --> 00:00:28.860
two days in a row. You know?

8
00:00:30.840 --> 00:00:34.140
We love it. Hey, Rich. Hey, Dorta, Kaylee.

9
00:00:34.600 --> 00:00:36.780
Oh, Gunilla. So glad you joined.

10
00:00:37.735 --> 00:00:38.875
Valerie, Leandra,

11
00:00:39.335 --> 00:00:39.835
Brian,

12
00:00:40.535 --> 00:00:41.035
Henrique.

13
00:00:41.975 --> 00:00:43.434
You know, I wanna say

14
00:00:44.695 --> 00:00:45.195
Svanilika.

15
00:00:46.055 --> 00:00:48.394
I feel like I'm totally butchering your name.

16
00:00:51.400 --> 00:00:54.860
I'm not sure how to pronounce it, but you know what? You're welcome to correct me.

17
00:00:55.000 --> 00:00:56.460
So good to see you guys.

18
00:00:57.160 --> 00:00:57.900
Oh, Kaylee.

19
00:00:58.280 --> 00:00:59.660
So good to see your face.

20
00:01:01.480 --> 00:01:01.980
Yay.

21
00:01:02.360 --> 00:01:02.860
Alright.

22
00:01:04.144 --> 00:01:09.825
Well, I'm just gonna leave space in case anyone wants to pop in. We do have a lot to cover today.

23
00:01:09.825 --> 00:01:11.924
I will say this workshop is pretty robust,

24
00:01:12.545 --> 00:01:13.045
so

25
00:01:13.585 --> 00:01:17.604
get excited. If you're taking notes, I really recommend that you do.

26
00:01:17.665 --> 00:01:21.720
But we will have the, you you know, the recording as well, so you can always rewatch anything

27
00:01:22.100 --> 00:01:23.160
live on that recording.

28
00:01:24.420 --> 00:01:30.440
But, yeah, I'm just gonna go ahead and let anyone else in who is in the waiting room to make sure that that is

29
00:01:30.820 --> 00:01:34.360
taken care of. Oh, there we go. Let Nikki in here.

30
00:01:34.755 --> 00:01:39.095
And then we'll jump and get started. I'll do a little introduction, some housekeeping items,

31
00:01:39.475 --> 00:01:41.095
and then we'll jump in. Hey, Nikki.

32
00:01:41.555 --> 00:01:42.695
Good to see you.

33
00:01:43.475 --> 00:01:43.975
Awesome.

34
00:01:44.755 --> 00:01:46.515
Okay. Well, I'm gonna be letting people in.

35
00:01:46.515 --> 00:01:50.455
I know it's only a few minutes in, so there might be some more people who are coming. But,

36
00:01:51.210 --> 00:01:55.710
so good to see you guys. Hello. Hello. Yeah. Drop your name in the chat, where you're from.

37
00:01:56.009 --> 00:01:57.549
Glad to be here if you feel

38
00:01:58.170 --> 00:02:00.590
so cool. I love it. We're all from all over. But

39
00:02:01.369 --> 00:02:04.670
I am Christina. I know some of you have seen me in concierge

40
00:02:04.970 --> 00:02:11.044
and maybe tickets too for sure. Oh, Nikki's so cool. Vanilla from Sweden, from Michigan.

41
00:02:12.225 --> 00:02:13.285
Yeah. Awesome.

42
00:02:13.665 --> 00:02:14.405
So cool.

43
00:02:14.945 --> 00:02:19.205
So yeah. So I'm Christina. I'm a support and concierge specialist at Simplero.

44
00:02:19.665 --> 00:02:22.920
So my face is kind of everywhere. I wear a lot of hats.

45
00:02:23.160 --> 00:02:32.780
My goal with this workshop today is to help all of you feel super confident with the new builder or at least a little bit more confident than you were before.

46
00:02:34.040 --> 00:02:37.935
And then also to just give you some tips tips and tricks. I'm gonna let Michael in here.

47
00:02:38.175 --> 00:02:43.875
To give you some tips and tricks to level up your pages, there are so many little hidden features in the builder.

48
00:02:44.015 --> 00:02:46.495
We're not gonna get to everything. Unfortunately, I wish we could.

49
00:02:46.495 --> 00:02:50.755
But I wanna just at least hit on and touch on some really helpful ones,

50
00:02:52.180 --> 00:02:54.040
in order to just help you

51
00:02:54.340 --> 00:02:59.880
be able to keep building and not get stuck and find those little tweaks that can actually level up your pages.

52
00:03:00.739 --> 00:03:03.075
Hey, Michael. Just wanted to say hi.

53
00:03:03.395 --> 00:03:06.275
So so yeah. And also too, just a reminder that,

54
00:03:07.155 --> 00:03:14.515
the builder, if you're if you're not super comfortable with it yet, it's okay because as you start to use it more, it's gonna get easier.

55
00:03:14.515 --> 00:03:16.435
It's super magical. It's super robust.

56
00:03:16.435 --> 00:03:20.250
There's a lot in there, but it just it just gets a lot easier the more you use it.

57
00:03:20.250 --> 00:03:24.250
So that's just a quick reminder. Also, I've done this workshop before a couple times now.

58
00:03:24.250 --> 00:03:31.065
So if any of you have watched that replay or joined on those calls, we will be repeating quite a bit of information from there.

59
00:03:31.065 --> 00:03:34.125
But I'm adding in a few new things here and there because

60
00:03:34.505 --> 00:03:35.885
our tech team just keeps

61
00:03:36.425 --> 00:03:40.125
building the builder. And so we wanna make sure we're updating you guys

62
00:03:40.425 --> 00:03:44.360
on all the little new things that you may not be aware of. Okay.

63
00:03:44.659 --> 00:03:47.080
So just a few quick housekeeping reminders.

64
00:03:48.180 --> 00:03:51.959
Please try to keep your questions in the chat. If you have any that pop up,

65
00:03:52.340 --> 00:03:54.580
keep your mic muted and just drop it in the chat.

66
00:03:54.580 --> 00:03:58.760
And then at the end, I'm gonna try and save a little space for q and a.

67
00:03:59.015 --> 00:04:04.555
So we may not have a ton of time for it depending on how much we get through, but I'm gonna try and make sure we do.

68
00:04:04.855 --> 00:04:11.035
So during that time, when I open the floor for q and a, you can definitely hit that raise hand emoji.

69
00:04:12.709 --> 00:04:17.450
It's under the React tab. Zoom always changes their interface, but it's under the React button.

70
00:04:17.510 --> 00:04:19.029
So you should be able to click that.

71
00:04:19.029 --> 00:04:23.270
There's a raise hand option, and I'm just gonna go through any hands that are raised.

72
00:04:23.270 --> 00:04:26.730
If you have another question that comes up, hit that raise hand into question again,

73
00:04:27.175 --> 00:04:31.515
and we will, get to as many questions as we can within the hour.

74
00:04:31.815 --> 00:04:35.275
So that's just something to keep in mind, and I'm gonna try and monitor that chat,

75
00:04:36.215 --> 00:04:38.315
as well as I'm going through this.

76
00:04:39.090 --> 00:04:39.490
Let's see.

77
00:04:39.490 --> 00:04:46.930
And if you don't feel like like, if there's a question that you didn't get answered, but you really want help with it, go ahead and put in a support ticket.

78
00:04:46.930 --> 00:04:49.090
You can email support@simplero.com

79
00:04:49.090 --> 00:04:50.710
as well or do it from your dashboard.

80
00:04:51.010 --> 00:04:53.090
We're happy to just keep answering questions.

81
00:04:53.090 --> 00:04:59.675
And questions might pop up after you finish we finish this workshop, and you're like, oh, I actually didn't know this or this, and I wish I could have asked this.

82
00:04:59.895 --> 00:05:02.215
Drop a support ticket. We'll get back to you there,

83
00:05:02.935 --> 00:05:06.375
because our team definitely wants to make sure all your questions are answered as well.

84
00:05:06.375 --> 00:05:08.315
And we wanna know what questions you're asking.

85
00:05:09.160 --> 00:05:12.919
Another quick thing too is that so the builder is really robust. Right?

86
00:05:12.919 --> 00:05:15.259
So we're not gonna be able to get through every single thing.

87
00:05:15.720 --> 00:05:21.099
Silas, my colleague, has actually done a workshop, and I'm gonna drop the link in the chat,

88
00:05:21.785 --> 00:05:26.045
on the builder two point o. So I just wanna make sure you guys have that as a resource as well.

89
00:05:26.585 --> 00:05:30.025
I'm gonna show the functionality of the builder, but obviously, can't cover everything.

90
00:05:30.025 --> 00:05:34.205
So that workshop is another the next best option to getting more help with the builder.

91
00:05:35.830 --> 00:05:38.150
Okay. So we're gonna go ahead and jump right in.

92
00:05:38.150 --> 00:05:42.470
I'm gonna go ahead and share my screen, and we're gonna walk through a couple things.

93
00:05:42.470 --> 00:05:44.810
So let me go ahead and find the right

94
00:05:45.670 --> 00:05:46.730
screen to share

95
00:05:47.190 --> 00:05:48.890
because Zoom has so many options.

96
00:05:49.485 --> 00:05:53.425
Okay. Can every see everybody see this? We all good? See my screen?

97
00:05:53.965 --> 00:05:54.465
Perfect.

98
00:05:55.645 --> 00:05:56.125
Okay.

99
00:05:56.125 --> 00:06:03.425
So one of the best things about the builder, I built this page, and there's a couple things in this page I'm gonna touch on how to do.

100
00:06:04.080 --> 00:06:10.740
You know, you'll see here, obviously, you can add actually, the reason that this is not playing is because I need to refresh.

101
00:06:10.960 --> 00:06:15.540
But there's a video in this background, so you can have a background video that auto loops.

102
00:06:16.645 --> 00:06:21.845
You can have, like, the bottom dividers on your sections can be different shapes and designs.

103
00:06:21.845 --> 00:06:25.705
And so that's also something I wanna show you how to do yourself.

104
00:06:27.685 --> 00:06:33.659
Over here, you can have certain elements and columns and sections that overlay other sections.

105
00:06:34.120 --> 00:06:37.580
So, like, you can see her head is kind of going over the section above.

106
00:06:37.960 --> 00:06:42.539
Little design tweaks that can kind of add dimension to the page. I'll show you how to do that.

107
00:06:43.080 --> 00:06:48.065
You can see as I'm scrolling down the page, things are showing up, in like a faded,

108
00:06:48.765 --> 00:06:50.305
on Canva, I think they fade.

109
00:06:50.685 --> 00:06:53.265
But it's a it's a way to kind of have the page

110
00:06:53.645 --> 00:06:58.065
animate a little bit. So I'm gonna show you how to do that as well. We do have a feature for that.

111
00:06:58.525 --> 00:07:02.860
So a lot of little things like that are gonna come up as we walk through this.

112
00:07:03.560 --> 00:07:07.180
And then a reminder too that the builder hey, Tarek. Good to see you.

113
00:07:07.400 --> 00:07:09.180
A reminder too that the builder

114
00:07:09.880 --> 00:07:14.780
is the the two point o builder is the same for website pages and landing pages. Right? So,

115
00:07:15.085 --> 00:07:21.405
technically, we're gonna work on a landing page, but a lot of those features, pretty much all of them are on a website page as well.

116
00:07:21.405 --> 00:07:21.884
Right?

117
00:07:21.884 --> 00:07:28.365
So and I'm gonna show you how to convert a landing page to a website page for a specific use case if you need to as well.

118
00:07:28.365 --> 00:07:31.850
So just keep that in mind. If you're working on a website page, it'll be the same process.

119
00:07:33.110 --> 00:07:35.830
Alright. So we're gonna do this in our demo account here.

120
00:07:35.830 --> 00:07:39.370
I'm gonna go ahead and go to marketing, landing pages, and forms.

121
00:07:43.315 --> 00:07:48.755
And once it loads there we go. So, when you're here, you can click create new landing page.

122
00:07:48.755 --> 00:07:54.535
Now just a quick reminder, you can use our template options for full pages.

123
00:07:54.835 --> 00:07:58.055
We have full page template options for landing pages.

124
00:07:58.275 --> 00:08:01.890
On the left side of the page, we've got the different types of categories for that.

125
00:08:02.430 --> 00:08:04.930
If you're looking for an opt in or all,

126
00:08:05.550 --> 00:08:09.570
pricing, which would be more like a sales. Right? So we've got options here.

127
00:08:09.630 --> 00:08:13.490
Now the reason I mentioned that is because if you, for example, are

128
00:08:13.795 --> 00:08:20.995
building out a website page, we are in the process of trying to get some website page templates out for you, but we don't have those released yet.

129
00:08:20.995 --> 00:08:27.495
So in the meantime, if you need a template for a website page, which we don't have at the moment,

130
00:08:28.159 --> 00:08:33.140
you can choose you can create a new landing page with the template that you like. Right?

131
00:08:33.440 --> 00:08:39.380
And then on the list of landing pages and forms, once you've created it, just select it.

132
00:08:39.919 --> 00:08:44.275
Choose select Calvin, and then you can move it to the site. Okay?

133
00:08:44.275 --> 00:08:51.575
So that's just a quick tip if you wanna use a template that we already have that you can edit or add to or delete and make it your own,

134
00:08:52.195 --> 00:08:54.055
on one of your website pages.

135
00:08:54.195 --> 00:09:01.370
And just a a quick reminder is that when you do move a landing page and convert it to a site page, right, you're putting it onto a site.

136
00:09:01.670 --> 00:09:04.949
When you do that, it's gonna take the style guide from that site.

137
00:09:04.949 --> 00:09:08.410
So the colors might change depending on what that site style guide is.

138
00:09:08.949 --> 00:09:13.529
And now we'll talk about the style guide as well. It's the essentially, the theme for the page.

139
00:09:14.075 --> 00:09:17.515
And it's also gonna take the URL of the site as well. So that's just a quick tip.

140
00:09:17.515 --> 00:09:20.475
I don't wanna go too deep into that, but I wanted to make sure you knew.

141
00:09:20.475 --> 00:09:23.195
Can you simplify the difference between a website and landing page?

142
00:09:23.195 --> 00:09:25.135
That's such a good question, Valerie.

143
00:09:25.275 --> 00:09:29.790
So landing pages are essentially I like to think of the name to help me remember.

144
00:09:29.790 --> 00:09:31.810
It's where they land on the page,

145
00:09:32.269 --> 00:09:36.350
and the focus is solely whatever that landing page is offering. Right?

146
00:09:36.350 --> 00:09:39.810
Because it's a stand alone page that isn't necessarily

147
00:09:40.190 --> 00:09:41.490
linked to a website.

148
00:09:42.084 --> 00:09:43.945
Right? It's not living on a website.

149
00:09:44.404 --> 00:09:44.904
Right?

150
00:09:45.685 --> 00:09:53.625
And the purpose of that is, let's say, when you're sharing a campaign and you wanna promote your lead magnet or you wanna promote your offer,

151
00:09:54.100 --> 00:09:58.180
when you're sharing that link, you probably don't want them to have the option all the time.

152
00:09:58.180 --> 00:09:58.740
Maybe you do.

153
00:09:58.740 --> 00:10:08.760
But for a certain sales campaign, you might want them to just be able to see all the call to actions on that landing page and not see a top navigation menu with all these other pages they can go to.

154
00:10:09.404 --> 00:10:12.464
Because you want the focus to be, hey. I really want them to

155
00:10:12.845 --> 00:10:15.725
choose to click on that button if they're the right fit. Right?

156
00:10:15.725 --> 00:10:17.725
So that's kind of what a landing page is meant for.

157
00:10:17.725 --> 00:10:25.819
It's more for opt ins and sales and keeping the sole focus on the land on the page and all they can see is just those calls to action buttons.

158
00:10:26.040 --> 00:10:26.540
Right?

159
00:10:27.399 --> 00:10:28.779
Versus a website page

160
00:10:29.160 --> 00:10:37.480
lives on a whole site with a whole bunch of other pages, and each page has that top navigation menu where they can click and go to different pages.

161
00:10:37.480 --> 00:10:41.815
Like, I wanna go to the about page now. Now I wanna go to the page where I can see all the offers.

162
00:10:41.955 --> 00:10:46.755
Now I'm gonna go back to the home page. Right? So that's a super high level overview of,

163
00:10:47.635 --> 00:10:48.295
the difference.

164
00:10:48.755 --> 00:10:50.055
Great question. Okay.

165
00:10:50.915 --> 00:10:55.990
So oh, and I'm super glad to hear that that was helpful already. I built an updated page.

166
00:10:57.010 --> 00:11:00.790
However, there's a kind of thin line sections, which I can show you directly on that

167
00:11:01.090 --> 00:11:01.590
page.

168
00:11:02.370 --> 00:11:03.110
Yeah. Awesome.

169
00:11:03.410 --> 00:11:05.855
Okay. So we're gonna go ahead and jump right into

170
00:11:06.315 --> 00:11:11.615
creating a landing page, but I'm gonna build it from scratch for the purpose of this call.

171
00:11:11.675 --> 00:11:16.495
So when you're building a page from scratch, not a template, you'll choose start from blank page.

172
00:11:16.795 --> 00:11:18.815
I'm gonna call this Christina's page

173
00:11:19.610 --> 00:11:20.430
with an exclamation.

174
00:11:20.810 --> 00:11:22.590
Create page. K. So

175
00:11:23.210 --> 00:11:29.390
the moment you create the page, we are going to put this pop up on the page with different section templates.

176
00:11:29.690 --> 00:11:37.525
Just a quick reminder about that is that if you don't wanna have to create every single section on the page from scratch, you can choose a template.

177
00:11:37.525 --> 00:11:39.705
Right? So we've got a whole bunch of different templates

178
00:11:40.325 --> 00:11:40.825
for,

179
00:11:41.925 --> 00:11:42.245
yeah.

180
00:11:42.245 --> 00:11:47.980
Like any you'll see all the different types of templates over here, like a text template or a feature section.

181
00:11:47.980 --> 00:11:51.420
So if you're moving from our old builder, you remember the feature section. Right?

182
00:11:51.420 --> 00:11:54.560
So we have different templates that kinda cover that.

183
00:11:55.420 --> 00:12:03.555
The color the colors for these templates are pulling from the style guide that this landing page has, which is not very not very colorful right now.

184
00:12:03.555 --> 00:12:06.834
So we'll fix that. But yeah. So that's the first thing.

185
00:12:06.834 --> 00:12:14.375
You can choose a template to start with or you can add a blank section right here, and that allows you to just start building the section from scratch.

186
00:12:14.435 --> 00:12:14.935
Okay?

187
00:12:15.600 --> 00:12:22.339
So once you're on the page, the first place that I would always start with is the style guide just to begin

188
00:12:22.640 --> 00:12:28.180
so you so that as you're building out the page, you can choose from your style guide different design elements,

189
00:12:28.560 --> 00:12:29.060
colors,

190
00:12:30.240 --> 00:12:36.235
font types that are already preset in the style guide. So it's like the overall theme for the page.

191
00:12:37.014 --> 00:12:39.014
So I would always start there first.

192
00:12:39.014 --> 00:12:43.514
If you've already built a style guide, quick tip, you can click switch

193
00:12:43.894 --> 00:12:44.634
right here,

194
00:12:45.260 --> 00:12:51.760
and then you can choose from our list the list of style guides in your account to switch it to a style guide that you already have.

195
00:12:51.980 --> 00:12:55.840
So that's just another quick tip. I'm gonna choose the demo account one. Click select.

196
00:12:56.860 --> 00:13:01.865
Now I'm not gonna go too deep into the style guide, but I do wanna touch on a couple things.

197
00:13:02.084 --> 00:13:04.185
So colors, top left.

198
00:13:04.245 --> 00:13:09.865
You'll be able to add in your color palette when you click on each of these boxes and you put

199
00:13:10.240 --> 00:13:16.660
a hex code or you can choose from the different colors that are already in your account style guide if you have edited that one.

200
00:13:17.360 --> 00:13:19.280
Again, I'm not gonna go too deep into the style guides.

201
00:13:19.280 --> 00:13:22.420
We do have a style guide workshop that you can also dig into.

202
00:13:22.625 --> 00:13:26.644
But once you've added your color palette, you can add some custom colors as well.

203
00:13:26.785 --> 00:13:29.925
But and then system colors are for system generated,

204
00:13:31.185 --> 00:13:34.644
pages. So that's not really relevant to the landing page right now.

205
00:13:35.310 --> 00:13:37.870
Builder theme. So this is what I wanna touch on.

206
00:13:37.870 --> 00:13:42.850
So anything that's you put in your color palette up here is gonna be pulled into

207
00:13:43.390 --> 00:13:45.010
the themes for the builder.

208
00:13:45.230 --> 00:13:50.690
And you'll see them show up over here to give you, an overview of what each could look like

209
00:13:51.155 --> 00:13:53.495
with this each of these themes. Right?

210
00:13:53.715 --> 00:14:02.695
Now for each of these themes, you get to choose what the background color is, the pre headline color, the headline color, sub headline, paragraph links, right, forms.

211
00:14:03.250 --> 00:14:10.710
And what that means is for every single section on the page, you can literally just choose which theme you want it to use.

212
00:14:11.410 --> 00:14:15.750
And then every single element inside that page, whether it's the background color,

213
00:14:16.194 --> 00:14:21.815
if you have any headlines, pre headlines, etcetera, any links are all gonna pull from these colors automatically.

214
00:14:22.514 --> 00:14:25.415
So the goal is that we've got you get to preset,

215
00:14:25.795 --> 00:14:27.815
like, six different types of themes

216
00:14:28.130 --> 00:14:32.769
that you can then as you're building your sections, just choose which theme you wanna use. Boom.

217
00:14:32.769 --> 00:14:38.230
And it adjusts all the colors right there. Now each of these things can still be customized.

218
00:14:39.089 --> 00:14:42.225
Like, you could still customize it yourself outside of this the style guide.

219
00:14:42.225 --> 00:14:48.545
So you can always create something outside of what your style guide is preset to do to be, and I'll show you how to do that.

220
00:14:48.545 --> 00:14:53.584
But this is just a way for you to not have to customize the colors every single time you're creating a section.

221
00:14:53.584 --> 00:14:55.125
Right? We just wanna make it easy.

222
00:14:55.529 --> 00:14:58.589
And on the right side under builder styles, you're gonna see

223
00:14:58.970 --> 00:15:04.649
all the different pre previews of what those sections can look like with the themes that you preset here.

224
00:15:04.649 --> 00:15:10.375
And, again, to change those colors, you just click on the box, and then you can choose the hex code or adjust it here.

225
00:15:10.375 --> 00:15:12.555
Right? So you can play around with

226
00:15:12.935 --> 00:15:15.335
it. Okay. Another quick note on colors.

227
00:15:15.335 --> 00:15:18.395
I usually share this every single time because I think it's really helpful.

228
00:15:19.095 --> 00:15:24.019
There's different sites that you can use for color palette options just to generate your color palettes.

229
00:15:24.720 --> 00:15:29.540
We have one called Coolors. I share this a lot, because I know it's been really helpful.

230
00:15:29.920 --> 00:15:31.360
I'm gonna go ahead and close out here.

231
00:15:31.360 --> 00:15:41.705
You can start the generator and then just click the space bar on your computer, and it generates a whole bunch of color palettes that you could use if you're not sure what colors to use for your brand.

232
00:15:42.645 --> 00:15:46.185
And then the hex codes are right down here, so you can copy those.

233
00:15:47.525 --> 00:15:50.665
Another one and I'll drop all three of these in the chat.

234
00:15:51.209 --> 00:15:57.069
Another one is let Anne Riddle in here. Another one is Adobe color.

235
00:15:57.129 --> 00:15:59.370
I had a colleague just share that with me today.

236
00:15:59.850 --> 00:16:01.790
But you can drop some, like,

237
00:16:02.410 --> 00:16:07.845
different keywords up here, and then it'll generate some different palettes that you can use as inspiration.

238
00:16:08.545 --> 00:16:09.685
This is a very specific

239
00:16:10.385 --> 00:16:14.464
palette in the green realm, but I don't think I think that's just the home page.

240
00:16:14.464 --> 00:16:21.525
But, yeah, you can type ocean, wine, moonlight, luck lucky, red, pink, and it'll generate different types of palettes.

241
00:16:21.850 --> 00:16:27.150
And then lastly, not gonna touch too long on this, but there is another one that another colleague of mine shared

242
00:16:28.190 --> 00:16:29.070
Calvin colors

243
00:16:29.450 --> 00:16:30.510
with three s's.

244
00:16:31.770 --> 00:16:34.904
This will generate I just was looking and I was trying. Yeah.

245
00:16:34.904 --> 00:16:38.045
If you scroll, it just generates random colors down here.

246
00:16:38.665 --> 00:16:40.445
Just if you're looking for inspiration,

247
00:16:40.904 --> 00:16:48.125
you can also click filter up here and choose, like, a different type of like, if I'm looking for pastels or warm.

248
00:16:49.319 --> 00:16:51.420
Yeah. That's awesome. It'll just give you

249
00:16:52.040 --> 00:16:57.019
examples, and then you can, you know, grab the hex codes, RGB, all that stuff, whatever you need,

250
00:16:58.120 --> 00:16:59.660
to help give you some inspiration.

251
00:17:00.120 --> 00:17:05.835
So just wanted to drop those three in the chat real quick so that you have them.

252
00:17:07.915 --> 00:17:11.055
Let's see. Just do them quickly 1 x 1.

253
00:17:12.395 --> 00:17:16.875
So that way these links can probably help you in case you're looking for any inspiration there.

254
00:17:16.875 --> 00:17:20.450
I know sometimes I get stuck and I just need to find something that will help

255
00:17:20.829 --> 00:17:22.210
me get unstuck on that.

256
00:17:22.510 --> 00:17:23.970
So I'm gonna go out of there.

257
00:17:24.510 --> 00:17:30.210
Okay. So that's the the touch on colors. And then a couple other things, you can also preset

258
00:17:30.750 --> 00:17:31.490
the sizing

259
00:17:32.110 --> 00:17:33.250
and the family,

260
00:17:33.904 --> 00:17:36.065
the font family for your fonts. Right?

261
00:17:36.065 --> 00:17:39.904
So we've got headlines, paragraphs, sub headlines, pre headlines.

262
00:17:39.904 --> 00:17:42.005
These are the four I'm gonna focus on today.

263
00:17:43.184 --> 00:17:47.505
And then if you click on a headline, you're gonna see the different font families. Right?

264
00:17:47.505 --> 00:17:52.870
So I get to to choose what my headline font family is gonna be. What's the weight gonna be?

265
00:17:53.110 --> 00:17:55.370
You could choose bold, black, normal.

266
00:17:55.910 --> 00:18:00.870
And then you can also play with line height, extra large, large, medium, small.

267
00:18:00.870 --> 00:18:02.250
So why is this important?

268
00:18:02.554 --> 00:18:08.255
The reason we're giving you these options in the style guide is so that, again, when you're adding fonts

269
00:18:08.635 --> 00:18:12.575
to your page, you can just choose small, medium, large,

270
00:18:13.115 --> 00:18:18.090
and then or extra large. And it's gonna pull the settings that you set here.

271
00:18:18.090 --> 00:18:19.549
The size that you've chosen,

272
00:18:20.010 --> 00:18:20.890
it's gonna pull,

273
00:18:21.370 --> 00:18:25.950
if there's any line height adjusted, it's gonna pull that pixel size, letter spacing.

274
00:18:26.010 --> 00:18:30.590
It's gonna pull the settings that you put here so that you don't have to adjust those every time you're adding headline.

275
00:18:31.235 --> 00:18:34.755
Right? Now you can still customize your headlines, and I'm gonna show you how to do that.

276
00:18:34.755 --> 00:18:39.335
Not just headline, any font. You can still customize them outside of the style guide.

277
00:18:39.635 --> 00:18:41.955
So that is still going to be possible.

278
00:18:41.955 --> 00:18:46.135
Is it possible to use a custom font on just one page, not added into style guide?

279
00:18:46.559 --> 00:18:50.500
Yes. Silas mentioned there was an option to add a custom font. Where does that show up?

280
00:18:50.880 --> 00:18:54.639
Love it. Love the question. Let me cover that really quick. So good question.

281
00:18:54.639 --> 00:18:57.440
In the style guide, you'll see here, we've got these Google

282
00:18:57.840 --> 00:19:00.795
there's actually a couple custom fonts here, and I'll show you where we put them.

283
00:19:00.875 --> 00:19:03.215
We've got all these different Google fonts down here.

284
00:19:03.835 --> 00:19:08.555
And then if you have any custom fonts, they show up here. Where to add those custom fonts?

285
00:19:08.555 --> 00:19:11.535
So if we go back out into the account

286
00:19:12.315 --> 00:19:16.140
and you've got a custom font that's not on the list, but you want it to be on the list.

287
00:19:16.380 --> 00:19:20.400
You're gonna head to the settings gear icon, top right hand corner.

288
00:19:21.020 --> 00:19:24.320
Okay? And you're gonna go to custom fonts right here.

289
00:19:25.180 --> 00:19:28.220
Now you're still gonna have to add the files in here.

290
00:19:28.220 --> 00:19:33.925
So if you have your files, you can put them in here, give it the name, and then you're gonna upload those files.

291
00:19:34.705 --> 00:19:37.365
This one has five files, I think. So we uploaded

292
00:19:38.225 --> 00:19:40.545
the w o f f two files. Right? So,

293
00:19:41.940 --> 00:19:44.100
you can if you're buying the font, you'll find that.

294
00:19:44.100 --> 00:19:49.080
They'll give you all the all the files that you need, and you can just upload them here and upload each one.

295
00:19:49.139 --> 00:19:50.200
Give it the name.

296
00:19:51.299 --> 00:19:53.620
Same thing if you were using CSS. That's not really relevant.

297
00:19:53.620 --> 00:19:56.225
But give it the name here, name the drop down.

298
00:19:56.225 --> 00:19:59.445
That's gonna be relevant in the builder, and then you can choose the weight,

299
00:20:00.145 --> 00:20:05.345
and the style as well. So once you add them in here sorry. I'm just letting people in.

300
00:20:05.345 --> 00:20:07.605
Once you add your custom fonts in here,

301
00:20:07.930 --> 00:20:12.510
you'll go back to your page, and you'll be able to see in the style guide

302
00:20:12.890 --> 00:20:15.550
that it shows up as a custom font here.

303
00:20:16.090 --> 00:20:16.590
Right?

304
00:20:17.690 --> 00:20:21.050
It also shows up, and I'll touch a little bit more on this stuff later.

305
00:20:21.050 --> 00:20:23.955
But if I add a pre headline and I go here,

306
00:20:24.415 --> 00:20:27.934
it should also show up here. Yeah. So and I'm gonna show you guys what this means.

307
00:20:27.934 --> 00:20:30.595
But this little three dots essentially means I'm customizing

308
00:20:30.975 --> 00:20:34.595
the the pre headline outside of these preset styles

309
00:20:34.895 --> 00:20:36.810
that I put in my style guide.

310
00:20:36.970 --> 00:20:39.790
So I'm clicking these little three dots, and I'm just building it from scratch.

311
00:20:40.010 --> 00:20:42.350
And it will also show up here, your custom fonts.

312
00:20:43.050 --> 00:20:46.410
So that was a really great question. Yeah. No problem, Rich.

313
00:20:46.410 --> 00:20:48.590
Thank you for asking that, both you and Kaylee.

314
00:20:49.054 --> 00:20:49.554
Awesome.

315
00:20:50.174 --> 00:20:50.414
Okay.

316
00:20:50.414 --> 00:20:55.875
So let's keep going because there's a lot to cover, and I wanna get through as many pieces as we can.

317
00:20:56.255 --> 00:21:00.015
So alright. So once you've created your page, you're ready to start.

318
00:21:00.015 --> 00:21:06.230
The first place I always recommend going is after you've, you know, customized your style guide, head to the body section.

319
00:21:07.010 --> 00:21:09.970
Now that's over here on the right side. You'll see it right at the top.

320
00:21:09.970 --> 00:21:13.570
The body, I like to think of it as the skeleton of the page. Right?

321
00:21:13.570 --> 00:21:16.390
So it's what lives behind your sections.

322
00:21:17.095 --> 00:21:17.595
Alright?

323
00:21:18.295 --> 00:21:22.395
And what that means is you can have a preset theme or preset color

324
00:21:22.775 --> 00:21:23.275
behind

325
00:21:23.815 --> 00:21:28.375
the rows, the sections, the rows, the columns, and the elements inside your body.

326
00:21:28.375 --> 00:21:30.315
And I'm gonna go through each of those different

327
00:21:31.330 --> 00:21:32.470
aspects of the skeleton,

328
00:21:33.090 --> 00:21:33.910
in a minute.

329
00:21:33.970 --> 00:21:39.830
But the body is behind everything, and so you get to choose what that theme is gonna be, and you also get to choose an animation.

330
00:21:40.530 --> 00:21:46.845
So if you remember on this page, when you're building this page out and you're moving or I built this page out and I wanna move through the page.

331
00:21:46.845 --> 00:21:49.585
You see how everything appears as I'm moving down?

332
00:21:50.044 --> 00:21:54.365
The place to find that is under animation. You're gonna choose the style that you want,

333
00:21:54.924 --> 00:21:58.650
to use. I think I used fade, but you could also use slide up,

334
00:21:59.210 --> 00:22:01.150
scale, clips. You can play with that.

335
00:22:01.290 --> 00:22:05.470
Choose the animation you want, and then you can choose, like, slow, medium, or fast.

336
00:22:05.530 --> 00:22:06.590
We have these little

337
00:22:06.890 --> 00:22:12.855
animal icons to dictate the speed. So that is just an example of, how you can add animation.

338
00:22:12.855 --> 00:22:15.815
And then, again, if you're adding animation, it affects the whole page.

339
00:22:15.815 --> 00:22:22.395
So at the moment, we don't have a way to do animation for just one section unless it's a parallax feature, which I'm gonna show you what that is.

340
00:22:23.495 --> 00:22:26.155
So that is the body. Start with the skeleton.

341
00:22:26.590 --> 00:22:32.690
Now within your page, just a quick overview, you might already know this, but we're gonna touch on it again, repetition.

342
00:22:33.550 --> 00:22:34.690
The components

343
00:22:34.990 --> 00:22:37.730
of the two point o builder. You've got sections

344
00:22:38.350 --> 00:22:42.855
that can have as many rows as you want inside side the section.

345
00:22:43.475 --> 00:22:44.615
And then the rows

346
00:22:45.075 --> 00:22:49.255
can have as many columns as you want inside each row.

347
00:22:49.875 --> 00:22:51.335
And inside the columns,

348
00:22:51.955 --> 00:22:53.335
you can add elements

349
00:22:53.970 --> 00:22:57.890
like pictures or text or a countdown timer. Right?

350
00:22:57.890 --> 00:23:00.870
So that's and we'll we'll show you those different elements as well.

351
00:23:01.250 --> 00:23:02.470
So that's the

352
00:23:02.850 --> 00:23:05.669
high level overview of the skeleton. Right? Sections,

353
00:23:06.049 --> 00:23:08.230
rows, columns, and then elements

354
00:23:08.655 --> 00:23:10.675
inside those columns. Alright?

355
00:23:11.295 --> 00:23:11.795
So

356
00:23:12.095 --> 00:23:15.395
I'm gonna go over here. So let's say I'm adding a section. I'm adding,

357
00:23:16.335 --> 00:23:18.675
I've added a section here. There's nothing in it.

358
00:23:18.815 --> 00:23:25.450
You'll see here when you hover over each component of the skeleton, hover over the section and you can click on the title section.

359
00:23:25.750 --> 00:23:30.330
Now you're gonna see all the settings for that section, and we're gonna go through these settings and what they mean.

360
00:23:30.390 --> 00:23:31.350
But it's the same thing.

361
00:23:31.350 --> 00:23:34.890
The thing I love about the two point o builder is that everything is pretty consistent.

362
00:23:35.355 --> 00:23:41.355
Like, they've built it so that if you figure out how to do one thing, you might be able to figure that out in the row.

363
00:23:41.355 --> 00:23:41.674
Right?

364
00:23:41.674 --> 00:23:47.035
Like, the sections in the settings for the section are found by clicking on section, and now here they are.

365
00:23:47.035 --> 00:23:48.335
If I click on row,

366
00:23:48.710 --> 00:23:52.970
here are all the settings for the row, which are almost the same. And then if I click on column,

367
00:23:53.430 --> 00:23:56.970
here are the sections for the column inside that row, which right now there's just one.

368
00:23:57.190 --> 00:24:00.550
But if I click the plus icon here, now there's two. Right?

369
00:24:00.550 --> 00:24:06.075
So this is just a reminder that it's pretty consistent, and you can click on each one of these things to find the settings,

370
00:24:06.375 --> 00:24:10.315
which is important. We're gonna start with section settings. K? So if I go here,

371
00:24:10.855 --> 00:24:12.295
I can choose the theme. Right?

372
00:24:12.295 --> 00:24:17.940
So it's pulling from the style guide, or I can do a whole new custom theme that has nothing to do with the style guide.

373
00:24:17.940 --> 00:24:22.039
Click on each of these things and make it my own. So you can always do that if needed.

374
00:24:22.899 --> 00:24:23.799
You can align

375
00:24:24.100 --> 00:24:26.519
the different components inside the section,

376
00:24:27.940 --> 00:24:31.139
this way from there. I wanna talk about a couple things.

377
00:24:31.139 --> 00:24:35.495
So margin and padding, what's the difference? Right? So the margin

378
00:24:36.675 --> 00:24:37.175
is

379
00:24:37.715 --> 00:24:39.815
inside this section. Let's say this section,

380
00:24:40.595 --> 00:24:44.135
is full width, but you add some margin around it.

381
00:24:44.400 --> 00:24:50.100
Now the margin is essentially what's around the section. It's the padding that you add around

382
00:24:50.640 --> 00:24:51.860
the edges of the section

383
00:24:52.160 --> 00:24:53.220
versus padding

384
00:24:53.680 --> 00:24:55.940
is padding that you add inside

385
00:24:56.480 --> 00:24:57.140
the section.

386
00:24:57.520 --> 00:24:58.580
Does that make sense?

387
00:24:59.145 --> 00:25:01.245
So that's the difference between margin padding.

388
00:25:01.305 --> 00:25:06.665
The usually, what happens is you're gonna add margin around a column or a row.

389
00:25:06.665 --> 00:25:09.645
Like, that makes a little more sense because then the section is behind it.

390
00:25:09.865 --> 00:25:12.845
But you could also add margin around the section as well.

391
00:25:13.410 --> 00:25:16.770
The row gap, this is a pretty cool feature that we just added.

392
00:25:16.770 --> 00:25:18.690
So I wanna make sure you guys know about it.

393
00:25:18.690 --> 00:25:24.230
If you've got, let's say, one column and I add a headline. So this is my

394
00:25:25.345 --> 00:25:30.245
this is my element, and it's inside a row. And now I wanna add another row.

395
00:25:30.304 --> 00:25:31.845
So let's say I've got this row.

396
00:25:31.904 --> 00:25:36.725
I click the plus icon down here to add another row inside that section,

397
00:25:37.105 --> 00:25:40.565
and I want it to be one column. So now I've got two different rows.

398
00:25:40.650 --> 00:25:45.790
I'm gonna click on the row setting here and I'm gonna give them different colors so it's easier to see them.

399
00:25:46.410 --> 00:25:47.390
So there's one

400
00:25:48.330 --> 00:25:52.670
and there's two. Okay. And this one, I'm gonna give a headline as well.

401
00:25:53.095 --> 00:25:54.795
And I'm gonna put it in the middle.

402
00:25:55.015 --> 00:25:59.655
So now you'll see that there is this thing right here, which I'm super excited about this.

403
00:25:59.655 --> 00:26:01.495
I'm so happy that they did that they did this.

404
00:26:01.495 --> 00:26:04.055
But, essentially, I'm gonna go back to the settings sections.

405
00:26:04.055 --> 00:26:09.429
So you can see we have this thing called a row gap. So any rows that you have inside this section

406
00:26:09.730 --> 00:26:14.070
will have a gap, which is here set to 24, which is the medium size.

407
00:26:14.450 --> 00:26:16.309
You can adjust that gap here.

408
00:26:16.690 --> 00:26:22.149
And, again, if I had a third row, it would have the same amount between both of those rows.

409
00:26:22.545 --> 00:26:28.965
So the the cool thing is we're trying to make it easier for you to adjust the padding or the gap between your rows

410
00:26:29.665 --> 00:26:32.405
without having to do that manually all the time. Right?

411
00:26:32.465 --> 00:26:38.429
So if I adjust that gap and I'm doing it like this or I can have nothing, right, That's one option.

412
00:26:38.429 --> 00:26:40.610
You can also do it from over here.

413
00:26:41.070 --> 00:26:43.730
So you can adjust it by dragging and dropping,

414
00:26:44.510 --> 00:26:48.510
and then we're gonna actually choose that option over here with the little three dots.

415
00:26:48.510 --> 00:26:55.125
So, again, what I like about this is that you can see all of these different settings have the little three dots next to it.

416
00:26:55.745 --> 00:26:58.005
And that, again, is the same. It's consistent.

417
00:26:58.065 --> 00:27:00.565
Every time you click the little three dots, you're adjusting

418
00:27:00.865 --> 00:27:01.365
that

419
00:27:01.745 --> 00:27:02.245
feature

420
00:27:02.705 --> 00:27:05.765
manually instead of using the preset sizes.

421
00:27:06.360 --> 00:27:10.940
Okay? Same thing with the row gap. If I click these little three dots, I can adjust this

422
00:27:11.640 --> 00:27:12.620
with this slider,

423
00:27:13.000 --> 00:27:18.040
and I can also adjust it over here with the slider here. Okay? So that's the row gap.

424
00:27:18.040 --> 00:27:21.740
It's really cool. It's supposed to make your life a little easier.

425
00:27:22.485 --> 00:27:25.365
How does this work or show up on mobile devices? Great question.

426
00:27:25.365 --> 00:27:28.085
I'm gonna go over the mobile device at the end.

427
00:27:28.085 --> 00:27:33.065
When you're building a page, how do you typically choose what goes within the same section versus what belongs in a new section?

428
00:27:33.685 --> 00:27:38.130
Super good question there, Nikki. So what I usually think of is if I want

429
00:27:38.990 --> 00:27:39.490
components

430
00:27:39.790 --> 00:27:42.850
of a section to have the similar theme.

431
00:27:43.230 --> 00:27:45.630
Right? And you'll have to think about this as you're building.

432
00:27:45.630 --> 00:27:49.970
Like, here, let's say, I want them to all have the same section settings.

433
00:27:50.135 --> 00:27:52.635
I would probably keep those rows in the same section.

434
00:27:54.055 --> 00:27:58.535
And I'm gonna show you why. Because let's say this section down here, we've got some other options.

435
00:27:58.535 --> 00:28:00.315
Right? You can add a background image

436
00:28:00.695 --> 00:28:01.415
behind it. Right?

437
00:28:01.415 --> 00:28:05.995
You can pick an image and you can choose let's say, I I give it this background image.

438
00:28:06.720 --> 00:28:10.820
I don't know what that's gonna look like, but we'll find out. Sometimes it takes a minute to load.

439
00:28:10.880 --> 00:28:11.860
Yeah. So that's

440
00:28:12.160 --> 00:28:14.320
just an example. It doesn't look great with these colors.

441
00:28:14.320 --> 00:28:19.840
But so if I'm given a background image, let's say I want all these rows inside of it to live on that image.

442
00:28:19.840 --> 00:28:22.845
I'd probably wanna keep them all in the same section. Right?

443
00:28:24.105 --> 00:28:30.044
You'll see here there's this thing called object fit so you can adjust how the image is showing up in that section.

444
00:28:31.625 --> 00:28:35.625
The more technical reasons for this are on this little you can click on see how this property works.

445
00:28:35.625 --> 00:28:36.904
I'm not gonna go into that.

446
00:28:37.784 --> 00:28:40.900
But, yeah, you can play with that. And then the same thing, you can add a video

447
00:28:41.840 --> 00:28:46.420
instead of an image, and you can, make it autoplay or play on hover.

448
00:28:46.720 --> 00:28:49.940
You can loop it, and you can adjust the fit. So

449
00:28:50.315 --> 00:28:54.795
the obviously, if you want your rose to live on that video, you'd probably wanna keep them all in the same section.

450
00:28:54.795 --> 00:28:55.295
Right?

451
00:28:55.915 --> 00:29:00.875
Same down here. You can add a color overlay to the background of that section. So I could make that

452
00:29:01.515 --> 00:29:04.080
yeah. So if I click here, I can adjust the transparency.

453
00:29:05.100 --> 00:29:06.480
If I click on that little rainbow.

454
00:29:07.260 --> 00:29:08.880
And then if I go like this,

455
00:29:09.340 --> 00:29:10.640
that looks a little better.

456
00:29:11.900 --> 00:29:14.220
So that's just an example of how you can use the color overlay.

457
00:29:14.220 --> 00:29:18.400
But, again, going back to your original question, you'd probably wanna keep this all in the same section.

458
00:29:18.675 --> 00:29:22.455
And then the last thing down here, you can add a bottom divider for sections.

459
00:29:23.075 --> 00:29:26.835
So, your question is really great because it ties in with what I'm teaching.

460
00:29:26.835 --> 00:29:30.515
So here, obviously, there's nothing else on the page yet, so that's why this looks that way.

461
00:29:30.515 --> 00:29:32.910
But I could probably add something to

462
00:29:33.370 --> 00:29:34.670
make it a little bit

463
00:29:35.050 --> 00:29:35.950
more robust.

464
00:29:36.570 --> 00:29:40.990
There we go. So you'll see here, I can add a bottom divider at the bottom of any section,

465
00:29:41.450 --> 00:29:46.350
and I can choose the shape. And I can make it show like this, or I could make it go like this.

466
00:29:47.155 --> 00:29:50.215
I could flip it so it goes the other direction. I

467
00:29:50.835 --> 00:29:52.455
can see if I do this one.

468
00:29:52.835 --> 00:29:55.795
Flip it so it goes that way. Right? So you can play with that.

469
00:29:55.795 --> 00:29:58.215
You can adjust the width, which will change

470
00:29:58.755 --> 00:29:59.795
the amount of

471
00:30:00.870 --> 00:30:02.710
yeah, like, the different designs inside.

472
00:30:02.710 --> 00:30:06.250
You can change the height if you wanna make it a little taller or

473
00:30:06.630 --> 00:30:07.130
smaller.

474
00:30:07.670 --> 00:30:12.090
The reason I say this, it kinda goes back to your original question, let me put that back on large,

475
00:30:12.470 --> 00:30:16.455
is that let's say I want all of these things to be above that bottom divider.

476
00:30:16.455 --> 00:30:19.115
I'd probably keep them in that same section. Right?

477
00:30:19.735 --> 00:30:23.495
And then I would add a new section beneath it. And let's say I add a new section.

478
00:30:23.495 --> 00:30:24.715
I'm gonna make it blank.

479
00:30:25.095 --> 00:30:29.355
And I want this section, everything inside of it to have the background with a different color.

480
00:30:29.575 --> 00:30:31.750
Right? So I like to think of it that way.

481
00:30:31.750 --> 00:30:39.930
That usually helps me understand where I wanna place my elements and make sure that they're on the section that I want them to be on based on how I'm designing them.

482
00:30:40.710 --> 00:30:43.370
Yeah. No problem. That was such a good question. Okay.

483
00:30:43.825 --> 00:30:49.605
So I'm gonna keep moving forward so we can get through as much as possible in the next twenty, twenty five minutes.

484
00:30:49.905 --> 00:30:53.925
So another thing you can do, quick tip, you can drag and drop sections

485
00:30:54.305 --> 00:30:57.605
by I wanna make sure I do that slowly. So if you hover over the section

486
00:30:58.340 --> 00:30:59.720
on the actual page,

487
00:31:00.020 --> 00:31:03.880
you can press and hold on the section and move it down or up.

488
00:31:04.420 --> 00:31:07.620
Okay? And put it wherever you want it. Same with rows.

489
00:31:07.620 --> 00:31:11.080
If I hover over a row, I can move that down or up.

490
00:31:12.325 --> 00:31:13.865
Columns, same thing

491
00:31:15.685 --> 00:31:20.405
or elements. So if I wanna put this headline in that row, boom. I can just drag and drop.

492
00:31:20.405 --> 00:31:22.185
You can also do it over here.

493
00:31:22.245 --> 00:31:31.380
Again, if you hover over a section or row or column or element, and then you see these little six, gray dots, you can drag anything you want that way as well.

494
00:31:32.160 --> 00:31:34.420
Just so you know that that is also an option.

495
00:31:35.440 --> 00:31:39.440
And then again, we've got that element thing here. So now now it added a row gap.

496
00:31:39.440 --> 00:31:43.725
But so that's just one thing. Another thing too is just a reminder,

497
00:31:44.185 --> 00:31:47.785
so we the road gaps are one way that you can adjust directly on the page.

498
00:31:47.785 --> 00:31:52.525
We've also made this easier. I'm so happy about this too. Is that around the sections,

499
00:31:52.985 --> 00:31:53.885
you can adjust

500
00:31:54.265 --> 00:31:55.485
the padding.

501
00:31:55.810 --> 00:32:02.470
So I Calvin adjust this section so that this the left side has this much padding just by dragging and dropping this little

502
00:32:02.930 --> 00:32:04.550
blue thing here with the number.

503
00:32:05.250 --> 00:32:09.590
If I do that, I can do it over here. Same thing. Let me go back.

504
00:32:10.035 --> 00:32:13.795
We're just so unhinged on this page. These colors are not matching, but it's fine.

505
00:32:13.795 --> 00:32:18.935
I can't really get to it now. I have to move over. But yeah. So you can drag and drop any direction.

506
00:32:18.995 --> 00:32:25.015
Now on the right side, if I click on the section and I go to the settings or I click on the section from here,

507
00:32:26.190 --> 00:32:29.549
what I can do, you'll see around here, now it's adjusting the padding.

508
00:32:29.549 --> 00:32:33.390
It automatically adjusts the settings over here based on what you do. Right?

509
00:32:33.390 --> 00:32:35.970
So if I move I put it on 24,

510
00:32:36.190 --> 00:32:37.809
and then this one I put on

511
00:32:38.695 --> 00:32:44.475
52. You see how it's automatically adjusting these separate edges? So this the edges are different

512
00:32:45.015 --> 00:32:49.975
based on how much padding I want. So you don't have to manually go into the settings and adjust it.

513
00:32:49.975 --> 00:32:55.370
You can just literally drag and drop the settings directly on the builder, and it just makes it so much easier.

514
00:32:55.370 --> 00:32:57.150
You can also choose your padding

515
00:32:57.450 --> 00:33:01.310
automatically, small, medium, or large, and it'll just do it for you,

516
00:33:02.010 --> 00:33:06.465
consistently around the edges so that you don't have to do it manually on each section.

517
00:33:06.465 --> 00:33:10.725
But it's always nice to have the option to adjust things manually directly on the builder.

518
00:33:11.345 --> 00:33:13.525
Every time, I find. Having that option helps.

519
00:33:13.985 --> 00:33:17.445
Another thing that you can do with sections is you can adjust the width,

520
00:33:17.745 --> 00:33:20.725
and this is also a setting for rows. Okay?

521
00:33:21.030 --> 00:33:22.550
So on the right side here,

522
00:33:22.950 --> 00:33:28.630
this section is full width. I could make it medium. Now do you see what happens when I do that?

523
00:33:28.630 --> 00:33:34.330
It's living on the color that you chose for the body. Right? Because sections are

524
00:33:35.145 --> 00:33:36.605
above the body essentially.

525
00:33:36.905 --> 00:33:43.565
So that color will show up behind your section if you make the section smaller or, you know, narrower than full width.

526
00:33:43.865 --> 00:33:45.065
The other thing is rows.

527
00:33:45.065 --> 00:33:50.285
So if I click on this row, for example, right here and I adjust the width to be medium.

528
00:33:50.740 --> 00:33:55.700
Now you'll see it's living on that section, but I'm making the box Simplero, which can be really helpful.

529
00:33:55.700 --> 00:33:58.679
Again, if I click those little three dots, then I can adjust

530
00:33:59.140 --> 00:33:59.720
it myself

531
00:34:00.419 --> 00:34:01.399
with a slider.

532
00:34:02.419 --> 00:34:05.240
So that's just a quick reminder there.

533
00:34:06.825 --> 00:34:09.784
Okay. Just with change theme colors, we already talked about that.

534
00:34:09.784 --> 00:34:13.385
Background colors, images, or videos, we're just cruising through. We've already talked about that.

535
00:34:13.385 --> 00:34:18.284
Now borders and corners, this is another cool feature. So let's say I wanna give a border

536
00:34:18.830 --> 00:34:20.370
around this box,

537
00:34:20.830 --> 00:34:22.110
this headline or this,

538
00:34:22.750 --> 00:34:24.130
this row, let's say.

539
00:34:24.510 --> 00:34:26.050
And I wanna give it a border.

540
00:34:26.429 --> 00:34:30.190
I can click on the row settings, and over here, you're gonna see the border right here.

541
00:34:30.190 --> 00:34:32.130
So if I click border one,

542
00:34:32.655 --> 00:34:35.074
two, three, these one, two, and three

543
00:34:35.455 --> 00:34:39.074
options are pulling from the style guide. So if you remember,

544
00:34:39.375 --> 00:34:42.415
in the style guide, you have the option to edit borders.

545
00:34:42.415 --> 00:34:45.315
We didn't talk about buttons, borders, or shadows as much.

546
00:34:45.920 --> 00:34:49.140
So we do have some workshops on that. I will touch briefly on buttons.

547
00:34:49.280 --> 00:34:52.100
You can customize three different styles for your borders,

548
00:34:52.480 --> 00:34:54.500
and you'll see what they look like here as a preview.

549
00:34:54.800 --> 00:34:57.460
And then you can choose one, two, or three down here,

550
00:34:57.915 --> 00:35:02.335
or you can customize it manually with the little three dots as per usual. Right?

551
00:35:02.555 --> 00:35:04.255
So that's a really great

552
00:35:04.795 --> 00:35:05.295
feature.

553
00:35:05.995 --> 00:35:08.395
If I had two columns, let's say I had another column.

554
00:35:08.395 --> 00:35:15.210
So if I hover over the column section and I click plus, there's you can duplicate the column or you can add a new one next to it.

555
00:35:15.210 --> 00:35:17.150
Now we've got two columns. Right?

556
00:35:17.450 --> 00:35:22.750
So now if I hover over these columns, you're gonna see that I Calvin actually give this specific column

557
00:35:23.210 --> 00:35:24.750
a border if I want to.

558
00:35:25.325 --> 00:35:28.625
Sorry. I am not in the correct space. I need to give it,

559
00:35:31.244 --> 00:35:34.045
that's the column gap. I don't know why it's doing that.

560
00:35:34.045 --> 00:35:37.184
Actually, this should only go on the border. Funky funky.

561
00:35:37.980 --> 00:35:40.540
Well, that is supposed to be just on the Calvin. But you know what?

562
00:35:40.540 --> 00:35:43.760
I will go ahead and add another one. Might be a bug.

563
00:35:44.619 --> 00:35:45.600
Let's see here.

564
00:35:48.220 --> 00:35:51.680
Okay. Let's give this column a different color. Let me make it black.

565
00:35:52.325 --> 00:35:54.244
Oh, it's because it's living on the row, which has

566
00:35:55.765 --> 00:35:59.305
so fun fact. If your row has these colors behind

567
00:35:59.605 --> 00:36:03.944
it and you've chosen dark, you can click inherit if you've got a background image.

568
00:36:04.430 --> 00:36:07.090
And now you're gonna see that it's pulling it's

569
00:36:07.390 --> 00:36:07.890
inheriting

570
00:36:08.910 --> 00:36:09.730
the the

571
00:36:10.030 --> 00:36:13.010
essentially, the picture or the color or whatever the background

572
00:36:13.310 --> 00:36:15.170
color or image or video is

573
00:36:15.470 --> 00:36:17.250
behind it. So whatever the section

574
00:36:17.705 --> 00:36:21.325
picture is, which it's a picture, now the row is inheriting that.

575
00:36:21.385 --> 00:36:23.145
So that was what I needed to do there.

576
00:36:23.145 --> 00:36:26.845
Now if I want this column, I need to add something to it so it's not so lonely.

577
00:36:28.585 --> 00:36:29.485
Give it a headline.

578
00:36:30.025 --> 00:36:31.805
If I want this column specifically

579
00:36:32.559 --> 00:36:34.099
to have a border,

580
00:36:34.559 --> 00:36:37.619
now you'll see that doesn't look great, but that's the border. It's

581
00:36:38.079 --> 00:36:40.660
living just on the column alone. Right?

582
00:36:40.960 --> 00:36:44.160
So that is something you can do. You can add it to columns. You can add it to a row.

583
00:36:44.160 --> 00:36:47.599
You can add it to a section. You can add it anywhere you want. Right? So,

584
00:36:48.285 --> 00:36:53.025
and same with corners. If I wanted this call or let me see here. This, yeah, column

585
00:36:53.405 --> 00:36:53.964
to have

586
00:36:55.165 --> 00:36:57.405
you can't really see it with that border. Let me move the border.

587
00:36:57.405 --> 00:36:59.265
To have corners that look like this,

588
00:36:59.805 --> 00:37:03.585
I can do that, and I can add an element inside of it. Let's say I want a contact form

589
00:37:04.619 --> 00:37:09.440
That looks interesting, but that is an option. Right? So you can add make it a box with arrows.

590
00:37:09.500 --> 00:37:12.000
You can do all of that. And, again, the column itself,

591
00:37:13.099 --> 00:37:16.400
can have more padding. Looks like it has no padding.

592
00:37:17.285 --> 00:37:20.185
So boom. There we go. Now we've got something we really,

593
00:37:20.645 --> 00:37:24.245
can actually work with. So you can play around with that.

594
00:37:24.245 --> 00:37:28.245
You can give corners based on, and then you can also customize the corners here.

595
00:37:28.245 --> 00:37:29.545
You can give separate corners.

596
00:37:30.080 --> 00:37:34.820
Same thing. Just like separate edges, I can just make the left side look like this. Right?

597
00:37:35.920 --> 00:37:38.640
So that is another option there.

598
00:37:39.520 --> 00:37:41.200
We already talked about most of these things.

599
00:37:41.200 --> 00:37:47.244
I did wanna touch quickly on Parallax, and I wanna leave time so I can answer Anne's question about the mobile responsiveness.

600
00:37:47.865 --> 00:37:51.165
But if I scroll down here, let's say you're on the section.

601
00:37:51.944 --> 00:37:55.885
K. I click on the section settings on the right side. I scroll down.

602
00:37:56.105 --> 00:37:59.085
You're gonna see the option when you add a background image,

603
00:37:59.760 --> 00:38:04.660
The Parallax option is gonna show up. This is really cool. If you choose fixed,

604
00:38:04.960 --> 00:38:10.160
what that's gonna do is it's gonna make it so that when and it'll take a minute sometimes to load.

605
00:38:10.160 --> 00:38:11.780
I think I need to publish this.

606
00:38:12.605 --> 00:38:15.984
Let's see. Is that gonna help? No. Let me refresh the page.

607
00:38:17.724 --> 00:38:21.984
I'm so used to the little things that happen with the builder that it's not even phasing me

608
00:38:22.285 --> 00:38:23.105
at this point.

609
00:38:24.410 --> 00:38:25.530
Okay. That may be a bug.

610
00:38:25.530 --> 00:38:31.850
But so what happens is when and I think I have an example of parallax maybe here. Yeah. Here.

611
00:38:31.850 --> 00:38:36.670
So do you see how this background image here is fixed? And so when I move,

612
00:38:37.265 --> 00:38:42.485
you're gonna see how the background stays fixed. That's the fixed parallax effect. Right?

613
00:38:42.625 --> 00:38:47.045
And it's just a cool design element that we added so that you don't have to use code to do it.

614
00:38:47.585 --> 00:38:50.385
So that should be happening with this image. I don't know what's going on there.

615
00:38:50.385 --> 00:38:51.685
Sometimes things get wonky

616
00:38:52.000 --> 00:38:54.660
when I build really random pages. But,

617
00:38:55.280 --> 00:38:55.780
essentially,

618
00:38:56.080 --> 00:38:59.220
if you're on any section, you can only find it on the section,

619
00:39:00.240 --> 00:39:01.060
at the moment.

620
00:39:01.360 --> 00:39:03.620
You can add that. Now there's also a parallax

621
00:39:04.265 --> 00:39:10.525
animated option, which just makes it kind of move a little bit animated wise when you're moving down or up on the page.

622
00:39:11.785 --> 00:39:13.645
Oh, actually, I just had a realization.

623
00:39:14.185 --> 00:39:14.845
I think

624
00:39:16.370 --> 00:39:20.630
I no. Okay. Never mind. It might still be a bug. I'm just checking.

625
00:39:21.810 --> 00:39:24.050
Object fit. Yeah. I'm not sure why it's not,

626
00:39:25.410 --> 00:39:26.550
not pulling it.

627
00:39:27.490 --> 00:39:29.110
One more thing I'm gonna try.

628
00:39:30.255 --> 00:39:32.095
No. Okay. Yeah. That might be a bug.

629
00:39:32.095 --> 00:39:38.095
But, essentially, animated is also another form of parallax that just kinda moves the picture a little bit.

630
00:39:38.095 --> 00:39:44.434
It it's, like, animated as they're moving down, but it's not as much as the fixed option does.

631
00:39:45.270 --> 00:39:45.510
Okay.

632
00:39:45.510 --> 00:39:50.570
So that's just an example there of another element that you can use to kind of spruce up your page.

633
00:39:51.270 --> 00:39:53.690
Quick, super, super, super quick,

634
00:39:54.310 --> 00:39:55.690
advanced setting overview.

635
00:39:56.390 --> 00:40:01.245
So for sections, rows, elements, columns, etcetera, you'll see this advanced

636
00:40:02.185 --> 00:40:04.205
tab. That's gonna allow you to add shadows

637
00:40:04.505 --> 00:40:09.565
around any of those things. Right? So if I wanted to add a shadow around this column, for example,

638
00:40:10.185 --> 00:40:14.685
I can click on advanced and choose one of the shadows I created from my style guide.

639
00:40:15.519 --> 00:40:18.579
I don't think they show up very well on this one, unfortunately.

640
00:40:19.039 --> 00:40:21.440
So let me see. And it might also be that image that's

641
00:40:22.160 --> 00:40:24.960
I'm seeing it very lightly, but I don't think that's gonna help you guys.

642
00:40:24.960 --> 00:40:28.079
Let me go to the style guide to show you what those shadows look like.

643
00:40:28.079 --> 00:40:33.055
So I created these three shadows here. Down here, they're so subtle. That's why.

644
00:40:33.675 --> 00:40:34.655
You can see that,

645
00:40:35.115 --> 00:40:38.575
any sort of column or element that I add the shadow to will have these,

646
00:40:39.595 --> 00:40:41.195
around them. I can change that here.

647
00:40:41.195 --> 00:40:45.590
You can change those settings to make those three different types of shadows look that way.

648
00:40:46.130 --> 00:40:50.230
And then you can pull from those three here, or you can customize it manually here.

649
00:40:51.010 --> 00:40:52.630
So you'll have two different options.

650
00:40:53.810 --> 00:40:58.515
Inset kinda makes it go inward versus default makes it outward.

651
00:40:58.515 --> 00:41:00.694
I don't know how to describe that, but it's like

652
00:41:01.075 --> 00:41:01.575
the

653
00:41:02.275 --> 00:41:05.895
the column itself is sticking out and then the shadows behind it.

654
00:41:06.194 --> 00:41:11.494
And then I can play with the direction of the shadow, the blur amount, the color of the shadow.

655
00:41:12.119 --> 00:41:12.279
Right?

656
00:41:12.279 --> 00:41:18.460
And sometimes shadows can get a little too like, people overuse them, but I do think that Calvin be a nice subtle option,

657
00:41:19.079 --> 00:41:20.440
if you wanna play with that as well.

658
00:41:20.440 --> 00:41:24.859
And then down here, another advanced setting is you can show certain things conditionally

659
00:41:25.635 --> 00:41:28.115
by a tag, a list, a product, a browser, all of that.

660
00:41:28.115 --> 00:41:31.655
I'm not gonna go too deep into that just because that's a little bit less about,

661
00:41:32.755 --> 00:41:37.175
design, but that is just something to be aware of. Now the Zed Index,

662
00:41:37.490 --> 00:41:38.549
gonna talk about that.

663
00:41:39.490 --> 00:41:41.569
Let me see. I'm gonna talk about that when I get to column settings.

664
00:41:41.569 --> 00:41:44.289
So let me just talk a little bit about the column settings specifically.

665
00:41:44.289 --> 00:41:45.670
So let's click on this column.

666
00:41:45.890 --> 00:41:49.890
If I go back to format here, you can see that there's a couple things.

667
00:41:49.890 --> 00:41:54.565
One, inside the column, we have an element gap. So, again, there's a row gap.

668
00:41:54.785 --> 00:41:58.325
So between rows, you can adjust the gap inside a section.

669
00:41:58.625 --> 00:42:01.204
You can also adjust the gap between elements

670
00:42:01.505 --> 00:42:06.325
inside a column. Right? So if I've got this this contact form is an element.

671
00:42:07.000 --> 00:42:11.260
This headline is an element. Right? Anything orange, that orange box is an element.

672
00:42:11.480 --> 00:42:15.560
So if I click the s, now it's adjusting the gap between these two elements.

673
00:42:15.560 --> 00:42:16.860
If I had another element,

674
00:42:17.160 --> 00:42:17.660
like

675
00:42:18.040 --> 00:42:21.485
another paragraph maybe, it would adjust that here as well.

676
00:42:21.485 --> 00:42:24.205
If I make it large, now you see it's adjusting that gap.

677
00:42:24.205 --> 00:42:28.465
I can also adjust that manually myself here, and it will update the settings accordingly.

678
00:42:28.765 --> 00:42:31.105
So that's just something to keep in mind about the element gap.

679
00:42:31.645 --> 00:42:34.465
Between sections, so I'm gonna give this column

680
00:42:35.200 --> 00:42:36.740
its own color so that

681
00:42:37.280 --> 00:42:38.420
we can see it better.

682
00:42:38.880 --> 00:42:41.620
Say this column will also be pink maybe.

683
00:42:42.320 --> 00:42:46.740
So within the different columns sorry. Between columns, you can drag and drop

684
00:42:47.040 --> 00:42:47.540
here.

685
00:42:48.185 --> 00:42:50.685
K? And then you also have a column gap

686
00:42:50.985 --> 00:42:55.565
here. So, again, we've added the gap feature everywhere to try and help you

687
00:42:56.025 --> 00:42:57.885
not have to mess so much with

688
00:42:58.265 --> 00:43:00.285
the padding between everything. Right?

689
00:43:00.390 --> 00:43:04.630
The column gap is inside the row because those columns live inside the rows.

690
00:43:04.630 --> 00:43:10.089
So if I click on the row settings, I can adjust that column gap here as well or do it here.

691
00:43:10.390 --> 00:43:15.369
One caveat, if you adjust so that's the gap here for the padding between the columns.

692
00:43:15.605 --> 00:43:20.984
If you're clicking on the little green thing, that's adjusting the size of that particular column.

693
00:43:21.525 --> 00:43:22.904
The tricky thing is,

694
00:43:23.204 --> 00:43:29.224
with the sizing of the column is that we don't have a way yet to switch it back to the size it was originally,

695
00:43:30.069 --> 00:43:31.690
which has been heavily requested.

696
00:43:32.390 --> 00:43:38.089
Just because if you do slide things up and down and then maybe you go, actually, I just want them all to be the same size again.

697
00:43:38.630 --> 00:43:44.705
We're working on a way to get that so that you don't have to manually adjust it or redo the whole section, essentially.

698
00:43:44.705 --> 00:43:47.765
So just keep that in mind if you do drag and drop these

699
00:43:48.145 --> 00:43:49.445
green things to make

700
00:43:49.745 --> 00:43:50.725
particular columns,

701
00:43:51.585 --> 00:43:52.725
a different size.

702
00:43:53.985 --> 00:43:56.325
Gunilla, great to see you. Woo hoo.

703
00:43:56.865 --> 00:43:57.365
Okay.

704
00:43:58.370 --> 00:44:00.630
So I'm gonna go back in here.

705
00:44:01.330 --> 00:44:02.390
Let me see.

706
00:44:03.570 --> 00:44:05.330
What else have we so is that index.

707
00:44:05.330 --> 00:44:10.370
So one thing that I do think is really cool is you can overlay different things over each other.

708
00:44:10.370 --> 00:44:13.444
Okay? I'm gonna do a whole new section just to make it easier,

709
00:44:14.065 --> 00:44:15.285
to demonstrate this.

710
00:44:15.585 --> 00:44:18.565
Add a blank section here. I'm gonna give this section,

711
00:44:20.944 --> 00:44:22.085
maybe this color.

712
00:44:22.385 --> 00:44:26.565
No. Sorry. That's the row. In here it. K. Go back to the section.

713
00:44:28.190 --> 00:44:33.250
Sometimes you just gotta check and see which settings am I clicking on because sometimes I forget which one I clicked on.

714
00:44:33.789 --> 00:44:37.549
This one, I want to give it a different color to make it easier for you guys to see.

715
00:44:37.549 --> 00:44:38.849
So let's say I've got

716
00:44:39.204 --> 00:44:40.505
two columns in this

717
00:44:40.805 --> 00:44:45.224
row. And one column this is just an example of how you can do this. One column has,

718
00:44:45.845 --> 00:44:46.505
a headline.

719
00:44:47.204 --> 00:44:56.630
And that headline, I'm gonna click it, highlight it, and click this little if you highlight the text that you add, you'll see our little what you see is what you get editor pop up.

720
00:44:56.630 --> 00:44:57.930
I'm gonna center it.

721
00:44:58.470 --> 00:45:03.450
And then I'm gonna click on the column, and I'm gonna change that so that it's darker so it shows up.

722
00:45:04.025 --> 00:45:07.005
And then let's say I am going to press enter.

723
00:45:07.305 --> 00:45:10.605
No. Actually, I'm gonna add an element beneath it to look a little prettier.

724
00:45:10.905 --> 00:45:13.785
Let's make it a sub headline, put it in the middle. Boom.

725
00:45:13.785 --> 00:45:17.725
And then I'm gonna give the column click on the column settings here.

726
00:45:18.150 --> 00:45:24.010
Gonna give that some padding because it didn't have enough. Okay. So let's say I've got this.

727
00:45:24.150 --> 00:45:26.150
And then I wanna add in a new element.

728
00:45:26.150 --> 00:45:29.369
We're gonna go touch super briefly on elements, and I click an image.

729
00:45:29.510 --> 00:45:33.289
I'm gonna click that image here, and I'm gonna choose this photo.

730
00:45:33.845 --> 00:45:36.184
For the sake of time, I'm just choosing a random one.

731
00:45:36.484 --> 00:45:42.424
Now when you add an image, you can drag and drop the size here by clicking these little side lines.

732
00:45:43.285 --> 00:45:45.385
That's one way to do it directly on the editor.

733
00:45:45.525 --> 00:45:50.480
On the right side, you'll see the ability to adjust the width as well, which is the same thing, essentially.

734
00:45:51.660 --> 00:45:55.200
So I'm gonna drag and drop the size. I'm gonna click on this image

735
00:45:55.820 --> 00:45:59.280
here. Now, let's say I want this image to overlay

736
00:45:59.900 --> 00:46:04.560
this box. I don't know how else to say that. I wanted to kinda go over it.

737
00:46:04.605 --> 00:46:07.565
So I can click on the image here. There's a couple ways to do this.

738
00:46:07.565 --> 00:46:10.145
But what I would do is I can go down to the alignment

739
00:46:10.445 --> 00:46:13.665
and align it to the left, just to remove some of that extra space.

740
00:46:13.885 --> 00:46:16.625
Also, make this a little bit smaller here.

741
00:46:16.845 --> 00:46:20.890
And then I'm gonna click back on the image, and I'm going to adjust the margin.

742
00:46:21.030 --> 00:46:23.770
So remember, that's the padding around the image

743
00:46:24.470 --> 00:46:25.530
or around the element.

744
00:46:25.750 --> 00:46:29.030
I'm gonna click on separate edges, so I can just adjust the margin on one side.

745
00:46:29.030 --> 00:46:30.570
And then I'm gonna click here,

746
00:46:31.145 --> 00:46:34.525
and I'm gonna move it so it's got less margin on the left.

747
00:46:34.905 --> 00:46:38.384
And maybe I want it to go down a little bit. Oops. So that's not gonna take it down.

748
00:46:38.384 --> 00:46:42.605
Let me go this way. And maybe I want it to have a little bit extra above.

749
00:46:43.200 --> 00:46:45.859
So now you see I'm playing around with it. So it's overlaying

750
00:46:46.240 --> 00:46:47.380
and moving.

751
00:46:49.119 --> 00:46:50.579
A really cool feature, essentially.

752
00:46:50.960 --> 00:46:55.599
Now let's say I want this image or I want this, column to be behind this image.

753
00:46:55.599 --> 00:46:58.900
So that is where I was playing with the z index. I noticed,

754
00:46:59.575 --> 00:47:02.235
I don't really have a technical explanation for this.

755
00:47:02.535 --> 00:47:04.395
The team didn't really give me one either.

756
00:47:04.855 --> 00:47:08.935
The higher the zed index, that should make it go over what's behind it.

757
00:47:08.935 --> 00:47:12.795
So if I'm clicking on the image and I increase the zed index, that will make it go above.

758
00:47:13.320 --> 00:47:18.120
I think making it lower will make it disappear. But if I make this hold on.

759
00:47:18.120 --> 00:47:19.500
Let me remove the zed index.

760
00:47:19.960 --> 00:47:21.500
Again, it's under the advanced

761
00:47:21.800 --> 00:47:22.300
tab.

762
00:47:22.680 --> 00:47:26.140
Remove the zed index for the image. I'm gonna go to the column here.

763
00:47:27.545 --> 00:47:30.185
I'm gonna click advanced. No. If I yeah.

764
00:47:30.185 --> 00:47:34.125
So if I increase the zen index on the column, that makes it over the image.

765
00:47:34.745 --> 00:47:38.045
I don't have a great technical explanation for that, unfortunately.

766
00:47:38.825 --> 00:47:42.140
But that is what you can play with if you wanna decide what's above

767
00:47:42.599 --> 00:47:43.579
or below.

768
00:47:44.520 --> 00:47:50.279
I'd love to see my concern is that you can do your can on desktop is how it look on mobile mo oops.

769
00:47:50.279 --> 00:47:54.380
Sorry. Mobile. Yes. And I'm definitely gonna touch quickly on mobile.

770
00:47:54.755 --> 00:47:58.775
Kaylee, I love to see the undo feature work a little better on this page builder, command zed on Mac.

771
00:47:58.915 --> 00:48:02.695
100%. I think we talked about that. I think you always wondered what that did. Yep.

772
00:48:02.915 --> 00:48:05.975
Nikki, happy to bring shed some light. I also wondered that too.

773
00:48:06.115 --> 00:48:08.695
Now that I found it out, I was like, oh, that's helpful.

774
00:48:09.190 --> 00:48:13.050
Yeah, so this is just an example of how you can move things and overlay each other.

775
00:48:13.110 --> 00:48:15.430
So we are coming up close to the time.

776
00:48:15.430 --> 00:48:18.650
I don't wanna touch too much on the elements like I normally do.

777
00:48:18.710 --> 00:48:24.615
I've touched on elements in previous workshops, so you can definitely go back and review what I talked about there.

778
00:48:24.695 --> 00:48:27.115
I talk a little bit more about images, videos.

779
00:48:27.655 --> 00:48:33.834
If you click to add an element, remember elements are the orange box, so I can add one here inside a Calvin.

780
00:48:34.455 --> 00:48:37.440
Anywhere you want, really. You can choose from all of these options.

781
00:48:37.680 --> 00:48:39.359
So there's a whole bunch of things you can do.

782
00:48:39.359 --> 00:48:42.660
You can customize your fonts a little bit more nicely. You can customize.

783
00:48:42.720 --> 00:48:45.780
You can add a contact form, an audio file,

784
00:48:46.319 --> 00:48:50.640
buttons. So, again, the buttons are gonna pull from the style guide. Let me quickly touch on that.

785
00:48:50.640 --> 00:48:52.180
So if I add a button here,

786
00:48:53.484 --> 00:48:55.185
it looks really funky in this.

787
00:48:55.565 --> 00:48:59.345
Let's go back out here. If I add a button here. So let me add one.

788
00:48:59.484 --> 00:49:01.105
I'm gonna add a new row down here.

789
00:49:01.965 --> 00:49:04.385
Add an element. Add a button super quickly.

790
00:49:05.005 --> 00:49:09.440
It's pulling this GDPR thing because the settings in this account are to add a g GDPR,

791
00:49:10.060 --> 00:49:10.560
option.

792
00:49:10.940 --> 00:49:12.480
Now you can turn that off.

793
00:49:13.100 --> 00:49:14.960
Click on require GDPR consent.

794
00:49:15.180 --> 00:49:19.755
So when you add an a button element and you click on it, the button settings will show up.

795
00:49:19.835 --> 00:49:26.015
So anytime that you add, an element, you'll have to click on that element, and you'll see the settings for the element on the right.

796
00:49:26.394 --> 00:49:28.575
I've requested that it just automatically

797
00:49:28.875 --> 00:49:29.994
populates the settings,

798
00:49:30.634 --> 00:49:32.154
but they haven't implemented that yet.

799
00:49:32.154 --> 00:49:35.275
So, hopefully, at some point, they will, and it'll just be easier for you guys.

800
00:49:35.275 --> 00:49:38.950
But for now, no worries. You just click on the button and you'll see it here.

801
00:49:39.090 --> 00:49:48.310
The three styles that you customized in your style guide will show up here and you can click on them to choose what that button is gonna look like or you can customize the button yourself.

802
00:49:48.615 --> 00:49:52.592
So that's just one thing to keep in mind. You can make it bigger or Simplero.

803
00:49:52.615 --> 00:49:56.715
And then over here, you can choose the action on the button. I'm not gonna touch on that today.

804
00:49:57.255 --> 00:49:58.635
You can give it an icon.

805
00:49:58.935 --> 00:50:05.279
So this is something I used to have to do with code in our old builder, but if you wanna add an icon to the right, you can click on,

806
00:50:05.900 --> 00:50:07.519
the icon right toggle,

807
00:50:08.220 --> 00:50:09.359
browse icons.

808
00:50:10.619 --> 00:50:14.960
And then over here, let's say I wanna add a right arrow. That's just an example.

809
00:50:16.059 --> 00:50:19.385
You'll see some options. Again, this is, fontawesome.com.

810
00:50:19.385 --> 00:50:23.385
So they they don't have everything is not all free. So I usually just choose a free one.

811
00:50:23.385 --> 00:50:24.365
I don't have a paid.

812
00:50:24.744 --> 00:50:30.765
The pro ones are paid. And then if I click on the icon I wanna use, you can just click on the HTML.

813
00:50:31.800 --> 00:50:35.080
I wouldn't click start using this icon because it takes you a different place.

814
00:50:35.080 --> 00:50:37.740
I just click here to copy that code snippet.

815
00:50:38.440 --> 00:50:40.300
I go back into the page

816
00:50:40.760 --> 00:50:43.900
and I paste it under f a icon.

817
00:50:44.375 --> 00:50:46.135
And now you'll see that icon shows up here.

818
00:50:46.135 --> 00:50:49.835
So it's literally just clicking to copy it, paste it on the FA.

819
00:50:50.855 --> 00:50:54.474
Okay. So I just wanted to tug cover buttons super briefly.

820
00:50:55.095 --> 00:50:57.275
But, again, you can go back and watch my previous,

821
00:50:58.694 --> 00:50:59.355
my previous

822
00:50:59.730 --> 00:51:03.490
workshop and get some more information. And, Riley, what's the yellow triangle warning?

823
00:51:03.490 --> 00:51:06.070
Super good question. Super good point. So

824
00:51:06.530 --> 00:51:12.230
in our old builder, if you forget to add a link to a button, we didn't have a way to warn you

825
00:51:12.635 --> 00:51:19.835
because and so you you could maybe share your page and have no idea that maybe two of the links weren't tested and checked, and they're just going nowhere.

826
00:51:19.835 --> 00:51:22.875
Right? So we don't we wanna make it easier for you guys.

827
00:51:22.875 --> 00:51:33.430
In the back end of the page here when you're building, if something hasn't been linked to anything yet, like, there's nothing linked, we will show this little triangle error, and it says no inputs on the page.

828
00:51:33.430 --> 00:51:37.990
That just means there's no link on the button yet. So it's meant to help you.

829
00:51:37.990 --> 00:51:41.369
You could scan your page and be like, whoops. I forgot to link this button.

830
00:51:42.310 --> 00:51:43.210
I see the triangle.

831
00:51:43.535 --> 00:51:46.115
And you can click that button and boom, add,

832
00:51:46.415 --> 00:51:47.055
add a link.

833
00:51:47.055 --> 00:51:51.875
This one's the the action is an opt in, which means it's opting into a list, but there's no list selected.

834
00:51:52.095 --> 00:51:56.815
Right? So I could also click go to, and then that would also show because there's no link added.

835
00:51:56.815 --> 00:52:00.320
Where do I wanna go to? Right? So I kinda have to choose

836
00:52:00.700 --> 00:52:03.440
the one that I want. And now that thing disappears.

837
00:52:03.900 --> 00:52:08.000
Right? So that's a super good question, and thank you for bringing that up.

838
00:52:08.300 --> 00:52:10.800
So you'll see that on the pages as needed.

839
00:52:11.265 --> 00:52:13.924
So I wanna touch super quickly on a couple things,

840
00:52:14.305 --> 00:52:17.505
including responsive mode. I know we're at we're almost at time.

841
00:52:17.505 --> 00:52:21.045
I'll try and open q and a in the next few minutes. But really quickly,

842
00:52:21.424 --> 00:52:24.565
you can save your sections as a block.

843
00:52:24.780 --> 00:52:31.580
So that just means that you can save a section and add it somewhere else, right, on the page or on another page using that,

844
00:52:32.460 --> 00:52:35.980
same style guide, I believe, is the same thing. Or it might not be even the style guide.

845
00:52:35.980 --> 00:52:37.100
I have to test it again.

846
00:52:37.100 --> 00:52:41.654
But I was able to add it to another page, so it should be able to add it anywhere. But, essentially,

847
00:52:41.954 --> 00:52:46.035
when you hover over a section or you can do this for anything. You can do this for a row.

848
00:52:46.035 --> 00:52:47.734
You can do this for a column,

849
00:52:48.434 --> 00:52:49.174
a headline.

850
00:52:49.474 --> 00:52:52.035
I think you can do it for a column. No. You can't for a column. Sorry.

851
00:52:52.035 --> 00:52:53.974
So section, row, and elements.

852
00:52:54.700 --> 00:52:57.200
You'll see this little save icon here.

853
00:52:57.900 --> 00:53:00.540
You can save this section, give it a name like,

854
00:53:01.260 --> 00:53:02.080
my section.

855
00:53:02.860 --> 00:53:06.220
Whatever you wanna call it, a description. You can also make it a global block.

856
00:53:06.220 --> 00:53:10.775
I would not use this unless it's something that, like, for example, a footer.

857
00:53:11.075 --> 00:53:22.375
Global block just means that if you make a change, if you if you save this as a template and you upload it in multiple places, if you make a change to one of those blocks, it's gonna update the same change everywhere.

858
00:53:22.550 --> 00:53:29.930
So the one use case I usually feel is the most popular for that is if you create your own custom footer and you add it to a million pages.

859
00:53:30.150 --> 00:53:36.765
Obviously, you don't wanna edit one go have to go through and edit all of them if you wanna make a couple changes to the footer.

860
00:53:37.005 --> 00:53:39.904
So that would be really helpful to be a global block.

861
00:53:41.005 --> 00:53:43.565
Most things don't need to be a global block.

862
00:53:43.964 --> 00:53:48.385
If you make it a global block, just be aware we don't have a way to switch it back to a regular block.

863
00:53:48.444 --> 00:53:50.220
So I found that out the hard way.

864
00:53:50.780 --> 00:53:53.920
So yeah. So just make sure you need it if it's global block. I'm gonna save it.

865
00:53:53.980 --> 00:53:58.800
So if you save a section, let's say I'm gonna add a new section down here, add section.

866
00:53:59.420 --> 00:54:02.080
You can actually go to your saved blocks

867
00:54:02.475 --> 00:54:06.395
option here and find the one that you saved. So it's got a whole bunch of other blocks.

868
00:54:06.395 --> 00:54:09.775
You'll see if they're global, they show up here. Whole bunch of other blocks,

869
00:54:10.555 --> 00:54:15.435
as well. This is the one that I added here, my section. Boom. And now I can upload it.

870
00:54:15.435 --> 00:54:17.770
I click on it, and now it's uploaded. Right?

871
00:54:17.770 --> 00:54:21.710
So that's to help you not have to recreate sections a million times.

872
00:54:22.490 --> 00:54:24.170
We also implemented this new feature.

873
00:54:24.170 --> 00:54:28.109
I wanted to touch on this really quick Calvin copy to clipboard. K?

874
00:54:28.535 --> 00:54:33.355
So if you hover over anything, really, I think even the column also has this option.

875
00:54:33.575 --> 00:54:35.915
I can't really see on the column this time, but,

876
00:54:36.775 --> 00:54:40.155
no. Column doesn't. Man, column is just missing out. So the row

877
00:54:40.809 --> 00:54:41.630
and the section

878
00:54:42.010 --> 00:54:45.950
and the elements have this little thing called copy to clipboard.

879
00:54:46.410 --> 00:54:53.470
So if I want to duplicate this on the page, similar to saving it as a block, let's say I wanna save this particular image.

880
00:54:53.849 --> 00:54:55.950
So I click on copy to clipboard,

881
00:54:56.694 --> 00:54:59.575
and then let's say I add a new element because it's an element. Right?

882
00:54:59.575 --> 00:55:03.914
So down here, I want the image to show up as well. I can add the element down here.

883
00:55:04.214 --> 00:55:08.775
And now you'll see this icon for the clipboard in the top right corner right here.

884
00:55:08.775 --> 00:55:10.714
And I can paste what I copied

885
00:55:11.559 --> 00:55:12.859
so that it shows up here

886
00:55:13.319 --> 00:55:15.180
too. But, obviously, you have to adjust the settings,

887
00:55:16.599 --> 00:55:17.099
accordingly.

888
00:55:17.559 --> 00:55:21.260
Okay. So that's just another thing. You can do that for sections. You can do that for rows

889
00:55:21.640 --> 00:55:26.825
as well to just make it easier for you. Last thing I wanna talk about is responsive mode.

890
00:55:26.825 --> 00:55:30.205
So everything that I've been doing here is technically in desktop.

891
00:55:30.265 --> 00:55:33.165
Obviously, it doesn't look great, but we can pretend it does.

892
00:55:33.465 --> 00:55:38.185
So let's say you want to make sure everything looks good on different devices. Right?

893
00:55:38.185 --> 00:55:42.560
So we've got these little things up here that show tablet and then up here that show mobile.

894
00:55:42.859 --> 00:55:47.020
So you will have to adjust some things based on what they look like up here.

895
00:55:47.020 --> 00:55:50.240
Like, let's say I look here and I'm like, oh, this doesn't look that great

896
00:55:50.540 --> 00:55:51.280
on mobile.

897
00:55:52.255 --> 00:55:58.175
Most things are the same, like if you're dragging and dropping, I think, Anne, you were asking about the element gaps or the row gaps.

898
00:55:58.175 --> 00:56:01.875
They all you can adjust them on the page even if you're in mobile device,

899
00:56:02.335 --> 00:56:03.875
mobile device mode. Right?

900
00:56:04.040 --> 00:56:07.980
But you're gonna have to make some changes and I wanna just talk about responsive mode quickly.

901
00:56:08.359 --> 00:56:12.780
So what we have here is this thing called responsive mode. Meaning that when you're in

902
00:56:13.560 --> 00:56:17.500
tablet mode or mobile mode and you make changes,

903
00:56:18.225 --> 00:56:19.045
we actually

904
00:56:19.345 --> 00:56:19.845
don't

905
00:56:20.385 --> 00:56:24.625
make those changes affect the desktop or affect the other the other devices.

906
00:56:24.625 --> 00:56:28.645
So if I make a change in tablet in responsive mode, it won't affect

907
00:56:29.585 --> 00:56:31.765
it won't affect anything in desktop.

908
00:56:32.230 --> 00:56:36.390
So you can actually be in tablet and make changes and it won't affect it. That's the best thing.

909
00:56:36.390 --> 00:56:40.250
Now, caveat to this, and this is something I also learned the hard way.

910
00:56:41.590 --> 00:56:47.690
You have to make the changes in so if I'm in tablet and I don't want the changes I make here to affect desktop

911
00:56:48.045 --> 00:56:49.744
or to affect mobile. K?

912
00:56:50.525 --> 00:56:55.984
I need to make the changes over here in the settings. If I drag and drop something here

913
00:56:56.365 --> 00:56:57.825
or I delete,

914
00:56:59.645 --> 00:57:00.704
I delete a column,

915
00:57:01.085 --> 00:57:06.799
I add another element, All of those changes that I make here, even if I adjust an image size.

916
00:57:06.799 --> 00:57:10.339
I found that out also the hard way. If I adjust an image size here

917
00:57:10.799 --> 00:57:12.339
on the page dragging,

918
00:57:12.799 --> 00:57:14.980
that is going to make the change in desktop.

919
00:57:15.605 --> 00:57:17.625
Okay? It's gonna make the change in mobile.

920
00:57:18.244 --> 00:57:18.744
Versus

921
00:57:19.125 --> 00:57:24.025
if I adjust the width of the image over here in the settings, it will not

922
00:57:24.565 --> 00:57:25.065
affect

923
00:57:25.525 --> 00:57:26.025
desktop

924
00:57:26.645 --> 00:57:29.320
or mobile. Okay? So that is something that you have to keep in mind.

925
00:57:29.320 --> 00:57:31.500
You wanna adjust everything on the settings

926
00:57:31.880 --> 00:57:32.780
when you're in,

927
00:57:33.640 --> 00:57:34.700
responsive mode

928
00:57:35.080 --> 00:57:37.180
because then it will not affect

929
00:57:37.560 --> 00:57:38.119
the other,

930
00:57:38.440 --> 00:57:41.500
sections. And we didn't have that option on the the old builder, unfortunately.

931
00:57:42.345 --> 00:57:49.005
So if you're making changes in another another way, it was affecting your desktop again, and then you had to go back and fix it, and it was a whole thing.

932
00:57:49.705 --> 00:57:53.645
So anything that you adjust on the right side. Like, let's say I adjust the section settings.

933
00:57:54.460 --> 00:57:56.720
All of these things, if I adjust them here

934
00:57:57.020 --> 00:58:01.520
in tablet, these are only going to affect tablet, and same with mobile.

935
00:58:02.060 --> 00:58:02.560
Okay?

936
00:58:03.420 --> 00:58:05.280
Couple other quick things about mobile,

937
00:58:05.660 --> 00:58:09.840
how it can show up. So if you have things that are, like, maybe two columns.

938
00:58:09.885 --> 00:58:11.905
So this row has two columns. Right?

939
00:58:12.205 --> 00:58:13.105
And in desktop,

940
00:58:14.685 --> 00:58:20.145
it's not a great example, actually. This row no. Let's do this one. It has three columns. Right?

941
00:58:20.285 --> 00:58:21.185
So in desktop,

942
00:58:21.565 --> 00:58:25.780
it looks like this. They're side by side. That looks nice. Now if I go to mobile,

943
00:58:26.560 --> 00:58:29.140
it's stacked them, so they look like this.

944
00:58:29.600 --> 00:58:32.740
Now what you can do is you can click on the section settings.

945
00:58:33.520 --> 00:58:35.700
I'm gonna go back to the section settings.

946
00:58:37.585 --> 00:58:38.565
And in mobile,

947
00:58:39.185 --> 00:58:43.765
on the right side I don't know where is it. Stack. Stack. Stack.

948
00:58:46.545 --> 00:58:49.685
I have to find it, and they may not be in

949
00:58:50.910 --> 00:58:51.890
the row.

950
00:58:54.109 --> 00:58:55.970
We might have moved it. Let's see here.

951
00:58:58.190 --> 00:58:59.329
Correct the row.

952
00:59:02.109 --> 00:59:03.974
Column gap. There we go. So it's the row.

953
00:59:03.974 --> 00:59:08.134
So when you go to the row, you're gonna see this option called responsive behavior. Right?

954
00:59:08.134 --> 00:59:10.234
And I'm in mobile view.

955
00:59:10.615 --> 00:59:13.035
I can choose to make these columns stacked

956
00:59:13.575 --> 00:59:17.355
or I can stack them in a different order, reversed order, or none.

957
00:59:17.510 --> 00:59:22.470
When I choose none, it's slow, but it's gonna put this the columns side by side instead.

958
00:59:22.470 --> 00:59:24.809
And it actually looks a lot better when I have,

959
00:59:26.230 --> 00:59:31.795
images that are better example, but it'll put them side by side and remove that stacked option.

960
00:59:31.795 --> 00:59:34.295
So that's another way to kind of customize your

961
00:59:34.675 --> 00:59:37.415
mobile view when things stack on top of each other

962
00:59:37.715 --> 00:59:42.455
using the responsive behavior option here in the row. Okay?

963
00:59:44.330 --> 00:59:46.990
Yeah. It's not really loading right now. I don't know what's going on, but

964
00:59:47.450 --> 00:59:50.490
let's see. Thank you. I spent so long trying to figure out how to do that.

965
00:59:50.490 --> 00:59:54.090
Oh, so glad that's helpful. Delaney, you're supposed to woah. That's great. Yes.

966
00:59:54.090 --> 00:59:58.670
Can you even switch the order of section rose elements and have it not appear in the other modes?

967
00:59:59.065 --> 01:00:01.885
Learn the hard way. Yeah. I'll show you how to do that. Just joined from Norway.

968
01:00:02.185 --> 01:00:02.685
Recorded.

969
01:00:02.985 --> 01:00:05.225
Nina, it's so good to see you. Yes. Don't worry about it.

970
01:00:05.225 --> 01:00:08.665
We're we've recorded this, and we've also we have it already in,

971
01:00:09.225 --> 01:00:10.905
the workshop place, workshop

972
01:00:11.330 --> 01:00:12.230
community workshops,

973
01:00:13.170 --> 01:00:14.530
but and I'll link that here.

974
01:00:14.530 --> 01:00:18.470
But, yeah, we'll definitely be able to you'll be able to watch it later.

975
01:00:18.530 --> 01:00:20.210
And I'll be sending the recording,

976
01:00:20.690 --> 01:00:23.190
or we're trying to put it there. I think we're gonna replace it.

977
01:00:23.825 --> 01:00:24.484
Really quickly,

978
01:00:25.265 --> 01:00:29.664
one thing I did wanna touch on, Nikki, because that's a really good point. So if I go back here

979
01:00:30.305 --> 01:00:38.644
so this is the great thing about the responsive mode is that you don't have to really worry so much about the changes you're making, but there may still be some changes

980
01:00:39.099 --> 01:00:40.140
that need to be made.

981
01:00:40.140 --> 01:00:44.560
Like, I need to add a section, and I only want this section to show up on mobile and not

982
01:00:44.940 --> 01:00:45.440
responsive.

983
01:00:45.500 --> 01:00:50.240
But, again, if I make the changes here and not in the settings, it's gonna affect everything.

984
01:00:50.619 --> 01:00:56.964
So if you need anything to show up just on one device or one or two devices or something like that,

985
01:00:57.345 --> 01:01:01.585
you always have the option. So the way that you can do that is you can hover on the right side here.

986
01:01:01.585 --> 01:01:05.285
If you go out and you see this list of sections, rows, columns, and elements,

987
01:01:05.619 --> 01:01:12.760
you can hover over whatever you want to block from another device, and you can choose to make it only available on desktop

988
01:01:13.380 --> 01:01:15.080
or only available on tablet

989
01:01:15.780 --> 01:01:17.640
or only available on mobile.

990
01:01:18.315 --> 01:01:24.795
And just keep in mind that if you restrict based on the device, we will only show it on the preview as well.

991
01:01:24.795 --> 01:01:27.375
Right? So we won't show it on the actual device,

992
01:01:28.714 --> 01:01:33.010
depending on which preview you're looking at. So that's another option that you can do.

993
01:01:33.150 --> 01:01:41.710
Sometimes if you have a specific section that you need to duplicate, you could duplicate it three times, make one available on desktop, one available on tablet, one available on mobile.

994
01:01:41.710 --> 01:01:46.125
Again, responsive mode's gonna help you not have to do that for everything, but every once in a while, you might find that

995
01:01:48.045 --> 01:01:49.585
you do need to make changes here, that you don't want to affect another device.

996
01:01:50.045 --> 01:01:52.305
I would follow that process if you need to.

997
01:01:53.805 --> 01:01:58.125
That's not amazing. Yes. Awesome. Okay, guys. So we covered a lot.

998
01:01:58.125 --> 01:02:01.745
I just wanted to make sure we went through as many things as possible.

999
01:02:02.660 --> 01:02:08.120
But I do wanna open the floor if there are any questions just because I know it was a lot of things.

1000
01:02:08.180 --> 01:02:10.840
So I'm gonna go ahead and stop sharing

1001
01:02:11.700 --> 01:02:16.120
and then let you guys and you're free to go too if you need to. No problem.

1002
01:02:16.415 --> 01:02:20.575
But I just wanna make sure that we've covered your questions. So feel free to raise your hand.

1003
01:02:20.575 --> 01:02:21.855
Maybe we'll have five minutes.

1004
01:02:21.855 --> 01:02:27.234
If there's anything burning that you haven't asked yet, just wanna give you guys some space to do that.

1005
01:02:27.615 --> 01:02:30.515
Valerie says thank you. Yay. I'm so happy about that.

1006
01:02:32.460 --> 01:02:34.160
Woo hoo. So glad this is helpful, guys.

1007
01:02:35.420 --> 01:02:36.560
Awesome. Awesome.

1008
01:02:37.660 --> 01:02:40.960
Thanks. Yep. No problem, guys. I'm glad you joined.

1009
01:02:42.460 --> 01:02:43.840
Oh my gosh. I love it.

1010
01:02:44.484 --> 01:02:49.204
Just gonna monitor those participants. So helpful. Thank you so much. Yay. Aw. Well, this is good.

1011
01:02:49.204 --> 01:02:50.984
I'm glad there's feedback that this is helping.

1012
01:02:51.365 --> 01:02:54.165
And you guys will be able to watch these recordings later as well.

1013
01:02:54.165 --> 01:02:56.505
So, hopefully, that should give you some tips too.

1014
01:02:57.710 --> 01:02:58.210
Alright.

1015
01:02:58.670 --> 01:02:59.150
Okay.

1016
01:02:59.150 --> 01:03:04.990
Well, if there's no other feedback or questions or anything that you have, then we will go ahead and end it here.

1017
01:03:04.990 --> 01:03:07.869
Again, you'll be able to watch the recording in the workshop.

1018
01:03:07.869 --> 01:03:13.625
And, actually, what I'm gonna do, the list of workshops, I'm gonna drop it in the chat here for any of you guys who are still here.

1019
01:03:14.565 --> 01:03:14.965
Just

1020
01:03:15.365 --> 01:03:16.985
hopefully, it will load. But,

1021
01:03:17.685 --> 01:03:22.165
essentially, you can go to our community. If it loads, I'll I'll drop it in the chat.

1022
01:03:22.405 --> 01:03:25.305
Essentially, you can go to our community, simplero.community,

1023
01:03:26.440 --> 01:03:30.060
site. If you haven't joined yet, please join. You have a Simplero account. It's free.

1024
01:03:30.440 --> 01:03:35.260
Calvin's in there all the time updating everyone about what he is making changes on in the platform.

1025
01:03:35.480 --> 01:03:36.520
Simplero.community,

1026
01:03:36.520 --> 01:03:39.420
and you'll see on the left side, we have recordings.

1027
01:03:40.055 --> 01:03:42.775
So there we go. Okay. Sorry. I'm just waiting for it to load here.

1028
01:03:42.775 --> 01:03:46.075
Let me go ahead and snag that for you guys. Course directory.

1029
01:03:47.575 --> 01:03:50.135
And we've got all these workshops that you guys can use,

1030
01:03:51.095 --> 01:03:53.435
as well. Actually, you know what's so funny?

1031
01:03:53.950 --> 01:03:58.130
It's in the help site. Boom. Okay. Training workshops. There we go.

1032
01:03:59.550 --> 01:04:01.890
Alright. I'm gonna drop that in the chat right here.

1033
01:04:03.870 --> 01:04:04.190
Okay.

1034
01:04:04.190 --> 01:04:09.085
So we've got, also one version of this workshop there that you guys can go back and watch if you need it.

1035
01:04:09.085 --> 01:04:11.825
Again, if you have any other questions, please open a support ticket,

1036
01:04:12.444 --> 01:04:14.144
so we can keep answering them

1037
01:04:14.444 --> 01:04:17.105
and hear what you guys are needing. Alright.

1038
01:04:17.644 --> 01:04:20.944
It's good to see you all. Good end of here. Have a good weekend.

1039
01:04:25.456 --> 01:04:25.521
Bye.