Leaving the Unbounce CMS and thinking on Webflow vs Hubspot (plus mentions to Prismic, Strapi and Sanity)

Tech videos
Feb 27, 2023 8:32:25 AM
The video highlights a potentially successful workflow for website building and content management. While Webflow is a powerful tool for designers to create websites, its CMS is not ideal for marketing teams as editors can accidentally damage the website's structure. The video demonstrates several features that cannot be edited on Webflow, such as forms, bg videos, lists, and lotties. In contrast, the video showcases how marketing teams can easily edit complex interfaces using Hubspot's drag-and-drop calculator. The experience of using Webflow's CMS is compared to its designer's interface, and an example of a complex and interactive landing page created with Webflow is presented, featuring the Apple iMac 24'' presentation page. Lastly, the video introduces other CMS options, including Prismic, Strapi, and Sanity.
Enjoy at:
Youtube App icon

Episode transcription

0
00:00:02.100 --> 00:00:05.300
Alright, so here's what we have.

1
00:00:06.300 --> 00:00:10.600
With this workflow that combines webflow

2
00:00:09.600 --> 00:00:12.300
 for Builder interfaces and

3
00:00:12.300 --> 00:00:15.300
 helps palette 30 how to

4
00:00:15.300 --> 00:00:17.100
 manage content for dose interfaces.

5
00:00:19.100 --> 00:00:22.600
First let's say we have a design of

6
00:00:22.600 --> 00:00:25.100
 figment we can sign whatever one we

7
00:00:25.100 --> 00:00:28.800
 can't then get those designs into webflow. And

8
00:00:28.800 --> 00:00:31.500
 here's an example of those interfaces for this

9
00:00:31.500 --> 00:00:34.800
 L collection of blocks making

10
00:00:34.800 --> 00:00:38.100
 up a line page with navigation bar

11
00:00:37.100 --> 00:00:40.800
 headers, that's pneumonials.

12
00:00:40.800 --> 00:00:44.100
 And so and so and so and so on and

13
00:00:43.100 --> 00:00:46.200
 all this, although those

14
00:00:46.200 --> 00:00:49.300
 blocks are transformed into what

15
00:00:49.300 --> 00:00:50.300
 flow interfaces

16
00:00:52.100 --> 00:00:53.100
now coming from

17
00:00:54.400 --> 00:00:57.500
unbalanced what flow is

18
00:00:57.500 --> 00:01:00.400
 different in pretty much an average

19
00:01:00.400 --> 00:01:03.400
 regard and one of those regards is that what flow

20
00:01:03.400 --> 00:01:06.800
 is low enough to actually get to build any

21
00:01:06.800 --> 00:01:09.900
 interface that we want with control on

22
00:01:09.900 --> 00:01:14.300
 different breakpoints and we

23
00:01:12.300 --> 00:01:15.000
 can pretty much

24
00:01:15.400 --> 00:01:17.800
 built anything anything that we want with

25
00:01:18.700 --> 00:01:22.600
high quality with total control on the

26
00:01:21.600 --> 00:01:23.000
 interface

27
00:01:24.500 --> 00:01:27.800
So yes, first tab

28
00:01:27.800 --> 00:01:30.800
 design second step is webflow. Now.

29
00:01:30.800 --> 00:01:32.600
 What flow does have?

30
00:01:33.900 --> 00:01:36.700
the less low with the possibility

31
00:01:36.700 --> 00:01:39.300
 to manage content

32
00:01:40.100 --> 00:01:43.300
However, it is this is more like a

33
00:01:43.300 --> 00:01:46.300
 CM as that is integrated with

34
00:01:46.300 --> 00:01:49.600
 the Builder part of what flow and

35
00:01:49.600 --> 00:01:52.800
 then we'll allow editors to change

36
00:01:52.800 --> 00:01:56.000
 things here and there and I will

37
00:01:55.700 --> 00:01:58.900
 provide with a demonstration at

38
00:01:58.900 --> 00:02:01.700
 the end of this video. Probably in another separate

39
00:02:01.700 --> 00:02:03.300
 be just get things clean.

40
00:02:04.800 --> 00:02:07.500
The thing here is that what flow is

41
00:02:07.500 --> 00:02:08.600
 allowing us to build?

42
00:02:09.500 --> 00:02:12.100
Blocks and blocks and block sign I'm just showing you

43
00:02:12.100 --> 00:02:15.500
 actual blocks for our website, which isn't

44
00:02:15.500 --> 00:02:16.000
 HubSpot.

45
00:02:16.700 --> 00:02:19.700
and and we build things on webflow,

46
00:02:19.700 --> 00:02:23.000
 then we get those things on to

47
00:02:22.100 --> 00:02:25.500
 help but we're about to launched the

48
00:02:25.500 --> 00:02:26.900
 website and helps but

49
00:02:27.700 --> 00:02:27.900
now

50
00:02:28.800 --> 00:02:32.300
On the other side we have hotspot right

51
00:02:32.300 --> 00:02:32.900
 over here.

52
00:02:34.800 --> 00:02:38.600
And after having translated each

53
00:02:37.600 --> 00:02:41.200
 one of those blocks into HubSpot

54
00:02:40.200 --> 00:02:43.800
 that I'm showing you here and that

55
00:02:43.800 --> 00:02:46.500
 relates to all of this board of

56
00:02:46.500 --> 00:02:48.000
 design over there.

57
00:02:49.200 --> 00:02:52.600
After having done that we integrate those into

58
00:02:52.600 --> 00:02:55.400
 the HubSpot ecosystem into helps

59
00:02:55.400 --> 00:02:59.100
 HubSpot CMS. I'm sorry and we

60
00:02:58.100 --> 00:03:01.400
 have this over here. This is

61
00:03:01.400 --> 00:03:05.100
 just an index by the way, when I'm showing online on my

62
00:03:04.100 --> 00:03:07.400
 right. This is just an index of

63
00:03:07.400 --> 00:03:10.400
 the different blocks that we can

64
00:03:10.400 --> 00:03:13.200
 use and help spot. There are

65
00:03:13.200 --> 00:03:16.500
 some Heaven this index is because this is

66
00:03:16.500 --> 00:03:20.500
 just a visual way to to low

67
00:03:20.500 --> 00:03:23.800
 editors to Bros and say like, I don't

68
00:03:23.800 --> 00:03:26.300
 know I need a CDA. So this

69
00:03:26.300 --> 00:03:30.100
 is a CDA that it can use and and over

70
00:03:29.100 --> 00:03:30.900
 here and have any

71
00:03:31.500 --> 00:03:35.000
a ton of cdas navigation bars blocks for

72
00:03:34.200 --> 00:03:37.900
 video for content for for many

73
00:03:37.900 --> 00:03:38.100
 things.

74
00:03:39.500 --> 00:03:42.600
Then I can get here as a as an editor and

75
00:03:42.600 --> 00:03:46.100
 decide. Okay, I need a navigation. So

76
00:03:45.100 --> 00:03:49.000
 let me get started with a navigation

77
00:03:48.300 --> 00:03:51.700
 like this LG G

78
00:03:51.700 --> 00:03:54.500
 Dash app. By the way, the naming

79
00:03:54.500 --> 00:03:58.300
 convention is it is just because yeah, we

80
00:03:57.300 --> 00:04:00.500
 decided to name things with that

81
00:04:00.500 --> 00:04:03.300
 coding but we can

82
00:04:03.300 --> 00:04:06.400
 have anything that we want and over here after having

83
00:04:06.400 --> 00:04:09.500
 the side of that. Okay. I want to use this navigation with this

84
00:04:09.500 --> 00:04:12.500
 Mega menu and so on I just

85
00:04:12.500 --> 00:04:15.400
 search for for that navigation over here and

86
00:04:15.400 --> 00:04:16.500
 I drop it.

87
00:04:17.500 --> 00:04:18.500
And that is it.

88
00:04:19.300 --> 00:04:22.900
Well, this is a global navigation,

89
00:04:22.900 --> 00:04:25.300
 which means I have we have

90
00:04:25.300 --> 00:04:28.700
 set this up as Global which means that Anthony

91
00:04:28.700 --> 00:04:32.300
 that we added here will affect other instances

92
00:04:31.300 --> 00:04:34.700
 of this navigation in other parts of

93
00:04:34.700 --> 00:04:37.200
 the website because this is

94
00:04:37.200 --> 00:04:40.300
 a website and we just configured it this way.

95
00:04:41.400 --> 00:04:44.700
So we can edit the navigation with

96
00:04:44.700 --> 00:04:47.500
 the items that are inside and

97
00:04:47.500 --> 00:04:50.200
 work case studies Services just like

98
00:04:50.200 --> 00:04:54.000
 this this work and see case study this services and

99
00:04:53.300 --> 00:04:57.500
 for each we can edit the heading

100
00:04:56.500 --> 00:04:59.400
 the description we can

101
00:04:59.400 --> 00:05:01.000
 add more just like this.

102
00:05:02.500 --> 00:05:04.600
All right apply changes in.

103
00:05:05.100 --> 00:05:08.600
It is a third item on our navigation.

104
00:05:08.600 --> 00:05:11.100
 And so and so on by the way to let me

105
00:05:11.100 --> 00:05:14.400
 just delayed this additional one

106
00:05:14.400 --> 00:05:17.200
 that I created in a

107
00:05:17.200 --> 00:05:20.400
 minute. Okay. So let's say that we added or navigation.

108
00:05:20.400 --> 00:05:23.500
 We just edited all the items into

109
00:05:23.500 --> 00:05:25.000
 our navigation that we wanted.

110
00:05:26.500 --> 00:05:28.000
when editing things here

111
00:05:29.100 --> 00:05:34.600
We we actually get things to to

112
00:05:33.600 --> 00:05:36.400
 cultivate the changes for

113
00:05:36.400 --> 00:05:39.400
 the navigation on mobile. Let me

114
00:05:39.400 --> 00:05:42.100
 just publish this for you to have an idea

115
00:05:42.100 --> 00:05:42.900
 and Hostess work.

116
00:05:43.600 --> 00:05:46.100
So I just refreshed page that I

117
00:05:46.100 --> 00:05:49.400
 just created this over here is just this test over there.

118
00:05:50.200 --> 00:05:51.400
and I will

119
00:05:52.800 --> 00:05:55.400
show you how it looks like on mobile

120
00:05:55.400 --> 00:05:58.900
 immediately can see that the mobile interface is.

121
00:05:59.800 --> 00:06:01.300
different right

122
00:06:02.300 --> 00:06:02.400
so

123
00:06:05.400 --> 00:06:08.300
the what's cool about HubSpot is that we

124
00:06:08.300 --> 00:06:11.600
 we can set all this up so

125
00:06:11.600 --> 00:06:13.400
 that when when editing this

126
00:06:14.200 --> 00:06:17.900
Work link over here or this. I don't

127
00:06:17.900 --> 00:06:20.400
 know YouTube channel link over there.

128
00:06:20.400 --> 00:06:23.700
 They changes are going to be affecting both

129
00:06:23.700 --> 00:06:26.300
 the desktop and

130
00:06:26.300 --> 00:06:29.800
 mobile interface. All right up very soon

131
00:06:29.800 --> 00:06:30.600
 for editors.

132
00:06:31.500 --> 00:06:35.200
And I'm going to mention something that will make much much

133
00:06:34.200 --> 00:06:37.400
 more sense after work. When

134
00:06:37.400 --> 00:06:41.200
 I explain how who this will work with the CMS

135
00:06:40.200 --> 00:06:43.800
 from what flow not a builder CMS

136
00:06:43.800 --> 00:06:46.500
 from what flow? So what's cool

137
00:06:46.500 --> 00:06:49.500
 about HubSpot over here and there are other approaches

138
00:06:49.500 --> 00:06:52.300
 that I will also mention afterward and

139
00:06:52.300 --> 00:06:55.400
 other videos. What's cool about this kind of approaches is

140
00:06:55.400 --> 00:06:58.900
 that editors cannot damage things. So

141
00:06:58.900 --> 00:07:01.600
 let's keep this in mind. I will hold this later

142
00:07:01.600 --> 00:07:05.100
 on now, let's say that we now require

143
00:07:06.300 --> 00:07:09.300
I don't know. Maybe we want to build this page with

144
00:07:09.300 --> 00:07:10.700
 this hero section over here.

145
00:07:11.400 --> 00:07:14.600
THB hero, so let me just search for

146
00:07:14.600 --> 00:07:15.600
 this one over here.

147
00:07:20.600 --> 00:07:23.600
THV here it is. And I will drop this

148
00:07:23.600 --> 00:07:26.100
 into my canvas just like that.

149
00:07:28.100 --> 00:07:32.000
Here it is and I can edit the heading

150
00:07:31.500 --> 00:07:34.900
 for this to say something something.

151
00:07:36.400 --> 00:07:37.100
Else. I don't know.

152
00:07:38.200 --> 00:07:41.500
All right, let's give this like something over here

153
00:07:41.500 --> 00:07:44.600
 and I can edit the content

154
00:07:44.600 --> 00:07:48.600
 that is going to be shown in here as an

155
00:07:48.600 --> 00:07:52.400
 animation. This is very important was recall

156
00:07:51.400 --> 00:07:54.000
 this scenario because I'm going to

157
00:07:54.300 --> 00:07:57.600
 mention some difficultism Buffalo when it comes to add this

158
00:07:57.600 --> 00:07:58.200
 kind of things.

159
00:07:59.700 --> 00:08:01.100
So I'll update this.

160
00:08:01.700 --> 00:08:04.500
Update and continue editing and I will

161
00:08:04.500 --> 00:08:07.300
 refresh my page. Here it is. So this

162
00:08:07.300 --> 00:08:08.100
 is an animation.

163
00:08:08.900 --> 00:08:12.000
The reason I mentioned this about or emphasizing this

164
00:08:11.200 --> 00:08:14.700
 about what is different from webflow is

165
00:08:14.700 --> 00:08:17.900
 on what flow as editors we

166
00:08:17.900 --> 00:08:21.500
 can hover over text that

167
00:08:20.500 --> 00:08:24.300
 is immediately available on

168
00:08:23.300 --> 00:08:25.100
 interface.

169
00:08:25.700 --> 00:08:28.300
And edit that text like I

170
00:08:28.300 --> 00:08:31.400
 can what flow I can click over here and edit.

171
00:08:31.900 --> 00:08:34.400
However, there are some sort

172
00:08:34.400 --> 00:08:38.500
 of interfaces on which that is not possible either because

173
00:08:37.500 --> 00:08:41.100
 of the complexity of the the

174
00:08:40.100 --> 00:08:43.500
 interface interface which in this

175
00:08:43.500 --> 00:08:46.600
 case is an interface that is having this animation from side to

176
00:08:46.600 --> 00:08:49.200
 side and we cannot very easily edit this

177
00:08:49.200 --> 00:08:52.900
 on the webflow editor. Whereas in

178
00:08:52.900 --> 00:08:54.300
 here we can absolutely do that.

179
00:08:55.800 --> 00:08:58.700
And also there are odor interfaces in

180
00:08:58.700 --> 00:09:01.800
 which there are things that are hidden like

181
00:09:01.800 --> 00:09:04.300
 the previous menu that I

182
00:09:04.300 --> 00:09:07.800
 created everything that is under this the underdose

183
00:09:07.800 --> 00:09:10.300
 menu items

184
00:09:10.300 --> 00:09:13.300
 everything in here is hidden until you open

185
00:09:13.300 --> 00:09:17.300
 it and what flow you cannot edit anything of

186
00:09:16.300 --> 00:09:20.100
 this with the editor and certainly

187
00:09:19.100 --> 00:09:22.700
 you cannot add anything on the

188
00:09:22.700 --> 00:09:25.700
 mobile menu on the

189
00:09:25.700 --> 00:09:26.800
 editor interface.

190
00:09:28.800 --> 00:09:31.700
So, please keep this in mind it

191
00:09:31.700 --> 00:09:35.400
 will I promise this will make much more sense afterwards.

192
00:09:34.400 --> 00:09:38.100
 Okay, so I'll just

193
00:09:37.100 --> 00:09:40.400
 do a few more examples here,

194
00:09:40.400 --> 00:09:43.300
 but you get the idea I can just drag and drop

195
00:09:43.300 --> 00:09:47.100
 now I will I will search for examples there

196
00:09:46.100 --> 00:09:48.600
 are having further complexity.

197
00:09:50.400 --> 00:09:53.500
And remember and this this

198
00:09:53.500 --> 00:09:57.500
 is we're having here. We decide those

199
00:09:57.500 --> 00:10:00.800
 at the beginning. So anything that

200
00:10:00.800 --> 00:10:03.300
 we can have on figment and anything that

201
00:10:03.300 --> 00:10:07.200
 we can have what flow can be managed

202
00:10:06.200 --> 00:10:09.900
 here anything and much more because there

203
00:10:09.900 --> 00:10:12.500
 are things that webflow cannot build.

204
00:10:13.300 --> 00:10:16.900
Like very much complex animations that can

205
00:10:16.900 --> 00:10:19.200
 be anything can be

206
00:10:19.200 --> 00:10:22.100
 set up into HubSpot.

207
00:10:23.500 --> 00:10:26.800
So, let me just get you another example

208
00:10:26.800 --> 00:10:29.300
 with this one over here.

209
00:10:30.100 --> 00:10:31.600
BLT people

210
00:10:32.300 --> 00:10:33.100
let's say

211
00:10:35.400 --> 00:10:35.700
be

212
00:10:37.100 --> 00:10:40.200
so let's say that we needed this block on our line of page.

213
00:10:40.200 --> 00:10:43.000
 Oh, he's yes. This is the one

214
00:10:43.900 --> 00:10:46.200
we needed this block over here, which is

215
00:10:46.200 --> 00:10:49.600
 consisting of things that you need to repeat.

216
00:10:49.600 --> 00:10:52.400
 In this case. This is two rows of content

217
00:10:52.400 --> 00:10:53.700
 and each row.

218
00:10:54.700 --> 00:10:56.400
Is having one person over here.

219
00:10:57.500 --> 00:11:00.400
And maybe another one and maybe three and maybe four

220
00:11:00.400 --> 00:11:02.600
 what about six or seven?

221
00:11:03.500 --> 00:11:06.900
So this is something that we can do on HubSpot. We

222
00:11:06.900 --> 00:11:09.700
 can change anything for those

223
00:11:09.700 --> 00:11:12.800
 items over here. And also I

224
00:11:12.800 --> 00:11:13.000
 will

225
00:11:14.300 --> 00:11:17.100
people to the roast are below.

226
00:11:19.700 --> 00:11:22.400
Just over here. Number one.

227
00:11:22.400 --> 00:11:24.800
 Number two. Maybe just three will do.

228
00:11:25.300 --> 00:11:28.000
So this is something that helps pot a lot of us to do

229
00:11:28.800 --> 00:11:32.400
 very very easily. It is a

230
00:11:31.400 --> 00:11:33.100
 line us to

231
00:11:35.200 --> 00:11:39.200
To create lists to lists simple verb

232
00:11:38.200 --> 00:11:41.600
 or simple things. Now what flow is

233
00:11:41.600 --> 00:11:44.600
 having this functionality of collections, but that

234
00:11:44.600 --> 00:11:47.600
 is sort of a database thing. This

235
00:11:47.600 --> 00:11:50.700
 is not for landing pages on which you just needed to

236
00:11:50.700 --> 00:11:53.000
 drag and drop something and to

237
00:11:53.900 --> 00:11:56.300
add more and more and more persons in

238
00:11:56.300 --> 00:11:59.300
 this case or just imagine any sort of

239
00:11:59.300 --> 00:12:04.200
 list. Maybe this is a frequently Asked question list of

240
00:12:03.200 --> 00:12:06.100
 items. I don't know there are many

241
00:12:06.100 --> 00:12:06.900
 many things that are

242
00:12:09.200 --> 00:12:12.500
Available for us to accomplish on business scenario. So

243
00:12:12.500 --> 00:12:15.600
 this is something that webflow with the

244
00:12:15.600 --> 00:12:18.100
 editor and interface is not allowing you to do

245
00:12:18.100 --> 00:12:21.700
 because webflow editor interface only. Let

246
00:12:21.700 --> 00:12:22.600
 me just publish this.

247
00:12:23.800 --> 00:12:26.400
is only along you to

248
00:12:28.200 --> 00:12:30.200
hover over click

249
00:12:30.900 --> 00:12:33.500
And update and that's it. Nothing else.

250
00:12:34.200 --> 00:12:37.500
Now you can change it those things on what flow

251
00:12:37.500 --> 00:12:40.100
 when you try to do so, you will

252
00:12:40.100 --> 00:12:43.300
 find yourself into this interface that I'm showing you right

253
00:12:43.300 --> 00:12:46.700
 now over here, which is not meant for

254
00:12:46.700 --> 00:12:49.600
 editors. This is a the interface that

255
00:12:49.600 --> 00:12:53.100
 developers or designers are

256
00:12:52.100 --> 00:12:55.300
 going to be using to edit things.

257
00:12:56.100 --> 00:12:56.500
right

258
00:12:57.200 --> 00:12:58.900
So right over here.

259
00:13:01.800 --> 00:13:05.600
Developers can for instance create

260
00:13:04.600 --> 00:13:07.300
 more things add more things

261
00:13:07.300 --> 00:13:11.400
 to remove more things, but it can also destroy everything

262
00:13:10.400 --> 00:13:13.300
 and this is important because this is

263
00:13:13.300 --> 00:13:16.800
 this is the developer the the interface that

264
00:13:16.800 --> 00:13:19.100
 that allows you you to create

265
00:13:19.100 --> 00:13:22.700
 everything on a website and also to destroy to

266
00:13:22.700 --> 00:13:25.600
 Accidental modify. So this is

267
00:13:25.600 --> 00:13:28.100
 this is key on what flow where is

268
00:13:28.100 --> 00:13:32.000
 here? I'm having an interface that is only meant

269
00:13:31.400 --> 00:13:33.200
 for editors.

270
00:13:33.800 --> 00:13:36.800
Editors cannot destroy anything here.

271
00:13:36.800 --> 00:13:39.700
 They cannot modify the classes

272
00:13:39.700 --> 00:13:42.600
 the code for the website. Whereas a

273
00:13:42.600 --> 00:13:45.000
 webflow they absolutely can.

274
00:13:45.500 --> 00:13:49.300
And it is very easy to accidentally damage

275
00:13:48.300 --> 00:13:51.000
 things. This is by the way,

276
00:13:51.400 --> 00:13:54.400
 the reason why we're moving a group on website to help spot.

277
00:13:54.900 --> 00:13:57.700
And this is coming from a wealth

278
00:13:57.700 --> 00:14:00.700
 of developer telling you that it is very easy

279
00:14:00.700 --> 00:14:03.800
 for me as they will developer to damage

280
00:14:03.800 --> 00:14:06.800
 things on our own website. So believe

281
00:14:06.800 --> 00:14:09.200
 me it is it is very easy to

282
00:14:09.200 --> 00:14:12.500
 make mistakes here now here we're

283
00:14:12.500 --> 00:14:15.400
 having an editoring phase and it is alone asked to

284
00:14:15.400 --> 00:14:18.300
 duplicate this and drag and

285
00:14:18.300 --> 00:14:21.200
 drop this if one to and so

286
00:14:21.200 --> 00:14:21.600
 and so

287
00:14:22.400 --> 00:14:25.600
I will finish this with a little bit a few

288
00:14:25.600 --> 00:14:28.500
 more examples on what webflow is not capable

289
00:14:28.500 --> 00:14:31.000
 of offering you and HubSpot is

290
00:14:31.700 --> 00:14:34.100
By the way, I'm I was referring to

291
00:14:34.100 --> 00:14:37.500
 webflow as a editor as a

292
00:14:37.500 --> 00:14:41.100
 CMS because as you have seen we are

293
00:14:40.100 --> 00:14:43.700
 going to integrate what flow within this

294
00:14:43.700 --> 00:14:46.700
 workflow. It is just like webflow as

295
00:14:46.700 --> 00:14:49.700
 a builder and then HubSpot as

296
00:14:49.700 --> 00:14:51.200
 the CMS.

297
00:14:51.900 --> 00:14:54.300
I'm going to drop a form on this

298
00:14:54.300 --> 00:14:55.100
 line page.

299
00:14:57.200 --> 00:14:58.000
and again

300
00:14:59.300 --> 00:15:03.300
Everything here can be designed

301
00:15:02.300 --> 00:15:04.700
 as we wanted to.

302
00:15:05.700 --> 00:15:08.500
Show here's a form that maybe it

303
00:15:08.500 --> 00:15:11.800
 is not combined very well. Visually, I'm just providing you

304
00:15:11.800 --> 00:15:14.400
 with the very quick example over here. But let's

305
00:15:14.400 --> 00:15:18.000
 say that after it is we drop it out if formulary

306
00:15:17.800 --> 00:15:20.800
 now for families, we can't

307
00:15:20.800 --> 00:15:24.700
 yes edit this text over here just like

308
00:15:24.700 --> 00:15:25.300
 this.

309
00:15:26.900 --> 00:15:29.500
Applied changes and there it

310
00:15:29.500 --> 00:15:30.300
 is just like this.

311
00:15:31.400 --> 00:15:34.400
And maybe I want to add the

312
00:15:34.400 --> 00:15:37.600
 actual forum and I perhaps want

313
00:15:37.600 --> 00:15:40.300
 to add a new field or maybe you

314
00:15:40.300 --> 00:15:41.800
 want to delayed a feel.

315
00:15:42.600 --> 00:15:42.800
so

316
00:15:46.400 --> 00:15:49.400
maybe I want to choose another form. This

317
00:15:49.400 --> 00:15:52.300
 is something I can also do so, I will I will

318
00:15:52.300 --> 00:15:54.100
 not ask for the name here.

319
00:16:00.300 --> 00:16:03.400
So I will get rid of the name. Maybe I don't

320
00:16:03.400 --> 00:16:04.300
 need to brand either.

321
00:16:05.900 --> 00:16:08.300
So maybe just like this will be

322
00:16:08.300 --> 00:16:11.400
 a nurse for me. Also. I want to get the

323
00:16:11.400 --> 00:16:12.000
 email.

324
00:16:13.100 --> 00:16:15.400
Or no, let's just leave it as it.

325
00:16:15.900 --> 00:16:18.600
So there it is. I can modify things on for

326
00:16:18.600 --> 00:16:21.600
 this and what flow is something that again

327
00:16:21.600 --> 00:16:24.600
 editors cannot do most that editors

328
00:16:24.600 --> 00:16:27.600
 can do I'm going to update this most

329
00:16:27.600 --> 00:16:29.400
 they can do this editors.

330
00:16:31.200 --> 00:16:32.700
is to modify

331
00:16:35.100 --> 00:16:36.500
this text over here.

332
00:16:37.800 --> 00:16:39.600
or the let's say the

333
00:16:41.400 --> 00:16:44.300
um the beheadings for

334
00:16:44.300 --> 00:16:45.900
 each field on form

335
00:16:47.500 --> 00:16:50.100
They cannot even change the name of the Bottom by the

336
00:16:50.100 --> 00:16:53.500
 way, so that's everything the webflow is

337
00:16:53.500 --> 00:16:56.800
 going to a low editors to do and for

338
00:16:56.800 --> 00:16:59.400
 an editors then again, we are

339
00:16:59.400 --> 00:17:03.300
 moving our own website to help spot because as professional

340
00:17:02.300 --> 00:17:05.800
 workflow developers, we commit

341
00:17:05.800 --> 00:17:08.800
 mistakes from Heaven they websites or

342
00:17:08.800 --> 00:17:10.300
 many line pages.

343
00:17:11.500 --> 00:17:14.300
Anything that is bigger than than one landing page is is

344
00:17:14.300 --> 00:17:17.500
 we we have we

345
00:17:17.500 --> 00:17:20.700
 have had proved that it is impossible for us not commit

346
00:17:20.700 --> 00:17:24.900
 mistakes. This is from what flow professionals developers

347
00:17:23.900 --> 00:17:26.100
 not to mention

348
00:17:26.100 --> 00:17:29.700
 editors and as common editors we want

349
00:17:29.700 --> 00:17:32.700
 to move fast want to do things quickly. We

350
00:17:32.700 --> 00:17:36.000
 want to drag and drop create make variation

351
00:17:35.400 --> 00:17:40.200
 and to worry about whether we have destroyed

352
00:17:38.200 --> 00:17:41.700
 something in way with

353
00:17:41.700 --> 00:17:44.500
 HubSpot. We cannot destroy anything from other

354
00:17:44.500 --> 00:17:47.500
 line Pages or blocks on webflow would

355
00:17:47.500 --> 00:17:47.900
 definitely can.

356
00:17:49.300 --> 00:17:52.400
Okay, one last example for showing

357
00:17:52.400 --> 00:17:55.000
 you something that is not possible and webflow.

358
00:17:55.800 --> 00:17:59.400
I will mention I will go through those tiles

359
00:17:58.400 --> 00:18:02.300
 over here and mention things background videos

360
00:18:01.300 --> 00:18:04.800
 videos. This is something webflow

361
00:18:04.800 --> 00:18:07.300
 as editors again is not going to allow you

362
00:18:07.300 --> 00:18:08.700
 to edit not at all.

363
00:18:09.500 --> 00:18:12.400
So back from videos or things

364
00:18:12.400 --> 00:18:16.000
 like this the code BTS Me

365
00:18:15.300 --> 00:18:18.100
 Maybe. I'm going to use another one.

366
00:18:19.500 --> 00:18:21.300
BHB perhaps, yes.

367
00:18:30.600 --> 00:18:31.600
hph

368
00:18:33.100 --> 00:18:35.200
and I don't know just drop it here.

369
00:18:35.900 --> 00:18:36.100
so

370
00:18:37.700 --> 00:18:40.300
created something like this on HubSpot is a cc as

371
00:18:40.300 --> 00:18:42.900
 a replacement video for another one like this.

372
00:18:44.400 --> 00:18:45.100
There it is.

373
00:18:45.700 --> 00:18:48.200
And what flow you can as an editor?

374
00:18:48.200 --> 00:18:51.300
 You cannot get a video in there at all

375
00:18:51.300 --> 00:18:52.100
 and

376
00:18:53.600 --> 00:18:57.100
As a designer, it is very complex because dependent

377
00:18:56.100 --> 00:18:58.600
 where the video is located.

378
00:18:59.700 --> 00:19:03.500
Maybe the video is not like very neededly

379
00:19:02.500 --> 00:19:05.600
 available for you. Maybe I'm

380
00:19:05.600 --> 00:19:08.900
 going to leave some links to some upline pages

381
00:19:08.900 --> 00:19:12.200
 that are having videos like ledgered behind

382
00:19:11.200 --> 00:19:14.500
 orally years and you kind

383
00:19:14.500 --> 00:19:17.300
 of have to Broast through all of this code over

384
00:19:17.300 --> 00:19:17.400
 here.

385
00:19:18.200 --> 00:19:22.000
Code structure or down structure over here to to

386
00:19:21.500 --> 00:19:24.600
 find out your video then go here

387
00:19:24.600 --> 00:19:27.200
 and upload it and in path

388
00:19:27.200 --> 00:19:31.000
 to do that you'll lose momentum, which

389
00:19:30.100 --> 00:19:33.700
 is very important for marketing you lose

390
00:19:33.700 --> 00:19:36.400
 efficiency and you are very very

391
00:19:36.400 --> 00:19:39.700
 prone to damage things on the website. And here

392
00:19:39.700 --> 00:19:42.300
 is this Dragon drop place it is

393
00:19:43.300 --> 00:19:43.700
It is done.

394
00:19:44.300 --> 00:19:47.000
Same for lodi's Lotus are animations.

395
00:19:48.200 --> 00:19:49.800
Oh, I just accidentally.

396
00:19:51.400 --> 00:19:54.400
Move it out for this add an experience. Okay

397
00:19:54.400 --> 00:19:55.100
 load is

398
00:19:57.200 --> 00:19:58.300
so load. These are

399
00:19:59.600 --> 00:20:02.000
animations that are built on

400
00:20:04.700 --> 00:20:07.400
What's That named on unscroll?

401
00:20:08.100 --> 00:20:11.800
This is something that again but flow. It's not

402
00:20:11.800 --> 00:20:14.400
 gonna allow you to do easily at

403
00:20:14.400 --> 00:20:17.400
 all. You can only do that as they developer and it is

404
00:20:17.400 --> 00:20:20.800
 difficult to do that again this over

405
00:20:20.800 --> 00:20:23.000
 here notice that when I'm scrolling through

406
00:20:25.300 --> 00:20:28.600
The the animation is is plain.

407
00:20:29.100 --> 00:20:33.000
Forward backwards. So this this is a loading it

408
00:20:32.400 --> 00:20:35.500
 can allows you to do a lot

409
00:20:35.500 --> 00:20:38.700
 of things for designers who produce the

410
00:20:38.700 --> 00:20:41.400
 Lotus and for murderers. It

411
00:20:41.400 --> 00:20:44.700
 is only about clicking over here and replacing this

412
00:20:44.700 --> 00:20:46.300
 loading with another one. That's it.

413
00:20:47.600 --> 00:20:48.400
now

414
00:20:49.900 --> 00:20:52.300
The final example that

415
00:20:52.300 --> 00:20:55.800
 I want to give you. This is a very complex interface.

416
00:20:56.400 --> 00:20:59.500
Is our own pretty estimator it

417
00:20:59.500 --> 00:21:00.400
 is a calculator.

418
00:21:03.200 --> 00:21:06.800
I don't know where the drop is have not said that much

419
00:21:06.800 --> 00:21:10.200
 on the sign in something statically policing

420
00:21:09.200 --> 00:21:13.200
 when created this example. I'll just

421
00:21:13.200 --> 00:21:16.400
 drop it here. Click a date continue editing. Okay.

422
00:21:17.500 --> 00:21:20.500
So over our calculator consists of

423
00:21:20.500 --> 00:21:23.400
 let me just refresh he's just

424
00:21:23.400 --> 00:21:26.600
 show you it consists of this interface, which you

425
00:21:26.600 --> 00:21:26.600
 can

426
00:21:27.400 --> 00:21:30.400
Drag and drop blocks like the ones that we are

427
00:21:30.400 --> 00:21:30.500
 using.

428
00:21:31.500 --> 00:21:32.200
over here

429
00:21:33.300 --> 00:21:36.500
in this might be a landing number one or

430
00:21:36.500 --> 00:21:37.900
 hump page or whatever.

431
00:21:39.500 --> 00:21:42.400
and to create another page this is

432
00:21:43.900 --> 00:21:47.800
about page perhaps this is a I don't know another page

433
00:21:47.800 --> 00:21:50.500
 just like that. Our calculator is

434
00:21:50.500 --> 00:21:53.300
 allowing you along users who use this interface.

435
00:21:54.300 --> 00:21:55.700
To get things in here.

436
00:21:57.200 --> 00:21:57.500
and

437
00:21:58.800 --> 00:22:00.600
to have calculated

438
00:22:01.600 --> 00:22:04.800
the prices to build a another page

439
00:22:04.800 --> 00:22:07.200
 and about page in a home page

440
00:22:07.200 --> 00:22:08.100
 using those blocks.

441
00:22:09.100 --> 00:22:13.300
And the calculator offers a summary

442
00:22:12.300 --> 00:22:16.700
 of what blocks are being used and also how

443
00:22:15.700 --> 00:22:18.500
 much it is for UI design

444
00:22:18.500 --> 00:22:21.400
 for next proposal for the HTML being

445
00:22:21.400 --> 00:22:24.200
 producing webflow and later on for how much

446
00:22:24.200 --> 00:22:28.000
 it costs to integrate or to. Yes, because there's work

447
00:22:27.400 --> 00:22:28.900
 to integrate.

448
00:22:29.700 --> 00:22:32.300
Even if it is with and webflow said I'm

449
00:22:32.300 --> 00:22:35.100
 not Collections and symbols and components and

450
00:22:35.100 --> 00:22:38.200
 so on. It's it's a process to get the

451
00:22:38.200 --> 00:22:41.500
 CMS workable for for editors and what flow?

452
00:22:42.100 --> 00:22:45.700
There's also a price for HubSpot and for other CMS that

453
00:22:45.700 --> 00:22:48.000
 will I will talk about little a little later.

454
00:22:49.200 --> 00:22:49.300
so

455
00:22:51.100 --> 00:22:55.100
our interface is along people who

456
00:22:54.100 --> 00:22:57.500
 are learning in over online pages

457
00:22:57.500 --> 00:23:00.200
 to do that in order to get a price

458
00:23:00.200 --> 00:23:03.500
 and we can decide whether we'll show the

459
00:23:03.500 --> 00:23:07.000
 price after they give you their the gift.

460
00:23:06.300 --> 00:23:09.800
 They give us their email or or any

461
00:23:09.800 --> 00:23:12.500
 other details we can come up with that kind

462
00:23:12.500 --> 00:23:13.700
 of things in here.

463
00:23:14.700 --> 00:23:18.800
What's important though? Is that as marketers ourselves?

464
00:23:17.800 --> 00:23:20.400
 We can click over

465
00:23:20.400 --> 00:23:20.600
 here.

466
00:23:23.100 --> 00:23:26.200
And say you know what I'm going to offer.

467
00:23:27.700 --> 00:23:30.300
another new blog in here that will

468
00:23:30.300 --> 00:23:33.700
 serve the purpose of I don't know of

469
00:23:34.600 --> 00:23:37.900
a acda. This will be a CDA.

470
00:23:38.700 --> 00:23:39.000
Okay.

471
00:23:39.900 --> 00:23:40.700
maybe a

472
00:23:41.700 --> 00:23:44.300
play changes just like that. We're having

473
00:23:44.300 --> 00:23:47.100
 a new Block in here that users.

474
00:23:47.800 --> 00:23:48.900
Let me just update this.

475
00:23:49.600 --> 00:23:52.400
An inserts are going to be able to use.

476
00:23:53.600 --> 00:23:57.000
When they want to calculate things, so if that user

477
00:23:56.200 --> 00:23:59.700
 wanted a line one one of us to to

478
00:23:59.700 --> 00:24:02.600
 decide a line page with three different

479
00:24:02.600 --> 00:24:05.800
 variations of cdas, I can go here

480
00:24:05.800 --> 00:24:09.500
 and and work on a variation

481
00:24:08.500 --> 00:24:11.900
 number one or two number three and allow

482
00:24:11.900 --> 00:24:14.300
 users to to have a variation

483
00:24:14.300 --> 00:24:18.500
 number one. Number two number three for them to calculate how

484
00:24:17.500 --> 00:24:20.400
 much I mean the estimate of

485
00:24:20.400 --> 00:24:24.000
 how much will this cost? And so now there

486
00:24:23.200 --> 00:24:26.400
 isn't I'm finishing this demo with this

487
00:24:26.400 --> 00:24:29.400
 very very complex interface. It's just

488
00:24:29.400 --> 00:24:32.500
 to show you that hotspot is

489
00:24:32.500 --> 00:24:32.900
 along

490
00:24:33.700 --> 00:24:36.200
Marketers with a very very

491
00:24:36.200 --> 00:24:39.600
 friendly interface to do things as complex

492
00:24:39.600 --> 00:24:41.100
 as this one over here.

493
00:24:41.800 --> 00:24:43.500
and why this is important is

494
00:24:44.400 --> 00:24:46.600
well, we use it ourself.

495
00:24:47.500 --> 00:24:50.700
For marketing, this is something that would draw online pages.

496
00:24:52.500 --> 00:24:57.000
Our client trivia is using a a an

497
00:24:56.300 --> 00:24:59.600
 interface a calculator. It's like a calculator.

498
00:24:59.600 --> 00:25:02.300
 It is an application very similar to this one

499
00:25:02.300 --> 00:25:07.100
 in complexity, which there are there prospects

500
00:25:05.100 --> 00:25:08.500
 can drag and drop things and

501
00:25:08.500 --> 00:25:11.700
 print a PDF with the information the day they

502
00:25:11.700 --> 00:25:14.700
 move around on this interface

503
00:25:14.700 --> 00:25:18.800
 and that is also for them a line experience

504
00:25:17.800 --> 00:25:20.600
 and this that is

505
00:25:20.600 --> 00:25:23.500
 an experience that allows them to get emails

506
00:25:23.500 --> 00:25:24.600
 from prospects.

507
00:25:25.500 --> 00:25:26.800
And qualify them.

508
00:25:27.600 --> 00:25:30.300
So there is some bring this to the table.

509
00:25:30.300 --> 00:25:33.800
 It's just show that HubSpot and

510
00:25:33.800 --> 00:25:36.200
 also the other same as the that I'm

511
00:25:36.200 --> 00:25:37.900
 going to mention afterwards.

512
00:25:39.200 --> 00:25:42.600
A low for this to be possible for marketers

513
00:25:42.600 --> 00:25:43.800
 right over here.

514
00:25:45.400 --> 00:25:47.900
Now, let's go to webflow.

515
00:25:50.300 --> 00:25:51.300
actually, I'm going to just

516
00:25:52.200 --> 00:25:55.300
Do everything onto this very same

517
00:25:55.300 --> 00:25:55.500
 video?

518
00:25:57.800 --> 00:25:59.100
Okay webflow.

519
00:26:00.300 --> 00:26:03.500
Let me go to webflow as an editor right over here.

520
00:26:04.400 --> 00:26:07.300
And clicking the editor for going to the

521
00:26:07.300 --> 00:26:08.100
 other interface.

522
00:26:08.700 --> 00:26:08.900
and

523
00:26:11.300 --> 00:26:12.200
as an editor

524
00:26:13.300 --> 00:26:16.100
I will hover over and edit. Look at this.

525
00:26:17.200 --> 00:26:20.500
I can just it is it is beautiful in it regard

526
00:26:20.500 --> 00:26:21.700
 right I can.

527
00:26:23.200 --> 00:26:27.100
I can just ride over the

528
00:26:26.100 --> 00:26:28.500
 page and this is cool.

529
00:26:29.400 --> 00:26:32.500
Until you want to add this second line

530
00:26:32.500 --> 00:26:35.300
 over here. It happens that this second line over here.

531
00:26:36.500 --> 00:26:39.600
Changes those are about 10 to

532
00:26:39.600 --> 00:26:41.700
 12 messages that we're having over there.

533
00:26:42.600 --> 00:26:42.800
and

534
00:26:43.900 --> 00:26:45.700
I cannot have the the order.

535
00:26:46.300 --> 00:26:49.900
11 for me to change them. So right over

536
00:26:49.900 --> 00:26:51.700
 there there's a limit.

537
00:26:52.600 --> 00:26:55.400
There's also another very important limit as

538
00:26:55.400 --> 00:26:57.300
 an editor and it is that

539
00:26:58.500 --> 00:27:00.000
Everything that you're seeing here.

540
00:27:01.200 --> 00:27:04.200
It is already there. I didn't drag and drop

541
00:27:04.200 --> 00:27:07.800
 those blocks in there. They're just there.

542
00:27:08.500 --> 00:27:11.300
Right. So if I I find one to do

543
00:27:11.300 --> 00:27:14.200
 at something else I can't if I

544
00:27:14.200 --> 00:27:16.500
 wanted to have something less I can't.

545
00:27:17.600 --> 00:27:20.800
If I want to create a new page, I can't

546
00:27:20.800 --> 00:27:23.600
 not as an editor and this is an

547
00:27:23.600 --> 00:27:24.400
 editor's interface.

548
00:27:25.800 --> 00:27:29.300
So if I wanted to change, I

549
00:27:28.300 --> 00:27:29.500
 don't know.

550
00:27:31.500 --> 00:27:34.200
Let's go for something more complex. If I wanted

551
00:27:34.200 --> 00:27:37.400
 to add this is not complex at all if I wanted

552
00:27:37.400 --> 00:27:40.800
 to a new row over here. It can't.

553
00:27:41.600 --> 00:27:44.500
If I wanted to add new items to

554
00:27:44.500 --> 00:27:49.000
 this footer I

555
00:27:48.200 --> 00:27:52.100
 can't where is on and

556
00:27:51.100 --> 00:27:54.700
 help spot. I just added a new items we

557
00:27:54.700 --> 00:27:57.700
 can program the the CMS to

558
00:27:57.700 --> 00:27:59.000
 do is one.

559
00:28:00.200 --> 00:28:03.900
If I want to change a background color, I

560
00:28:03.900 --> 00:28:06.800
 can't if I wanted to change this video,

561
00:28:06.800 --> 00:28:09.900
 which is a background video. I can't if

562
00:28:09.900 --> 00:28:12.400
 I wanted to change this loaded interface

563
00:28:12.400 --> 00:28:14.000
 I cannot so

564
00:28:15.500 --> 00:28:18.200
You see the idea. There are many many many

565
00:28:18.200 --> 00:28:21.600
 things that we cannot do here on webflow.

566
00:28:21.600 --> 00:28:24.200
 If I wanted. This is a pocket. This is

567
00:28:24.200 --> 00:28:27.900
 not fertilizing pages, but I cannot change more

568
00:28:27.900 --> 00:28:30.300
 than pictures. I cannot change this video

569
00:28:30.300 --> 00:28:33.500
 which is a vimeo video so and so

570
00:28:33.500 --> 00:28:34.000
 and so on.

571
00:28:34.800 --> 00:28:37.300
Not to mention to mess up with this

572
00:28:37.300 --> 00:28:41.000
 over here. I cannot add new things or like tiles

573
00:28:40.200 --> 00:28:43.000
 over here. Not none of that.

574
00:28:43.500 --> 00:28:43.900
so

575
00:28:44.800 --> 00:28:45.700
and the other hand

576
00:28:47.300 --> 00:28:47.800
for

577
00:28:49.400 --> 00:28:52.600
like okay, the editor interface

578
00:28:52.600 --> 00:28:55.800
 is definitely not a line us to do pretty much

579
00:28:55.800 --> 00:28:58.300
 nothing as a marketers who

580
00:28:58.300 --> 00:29:01.100
 require to create new in the alignment pages.

581
00:29:01.800 --> 00:29:04.700
So what do we do? Well, go to the

582
00:29:04.700 --> 00:29:07.700
 designer slash The Vault

583
00:29:07.700 --> 00:29:09.700
 her or Dash default purse interface.

584
00:29:10.600 --> 00:29:12.300
And it is this one over here.

585
00:29:13.700 --> 00:29:16.500
No in here, I can

586
00:29:16.500 --> 00:29:19.200
 certainly change this. Let me show you how it is.

587
00:29:19.200 --> 00:29:22.300
 Who who is the I changed the outer lines over

588
00:29:22.300 --> 00:29:22.500
 here?

589
00:29:23.300 --> 00:29:24.400
I select the element.

590
00:29:25.400 --> 00:29:28.200
I noticed what the element is that I am

591
00:29:28.200 --> 00:29:31.700
 selecting. Then I go to the main slider element over here.

592
00:29:31.700 --> 00:29:34.200
 Then I go to this.

593
00:29:35.100 --> 00:29:38.400
Over this option over there and here I can

594
00:29:38.400 --> 00:29:40.300
 move through the slides.

595
00:29:41.100 --> 00:29:44.600
I select the one that I required to edit I

596
00:29:44.600 --> 00:29:46.200
 added it. There it is.

597
00:29:48.700 --> 00:29:49.000
No.

598
00:29:49.800 --> 00:29:53.100
Oh, let me show you how to edit a

599
00:29:52.100 --> 00:29:56.400
 menu item over here for mobile

600
00:29:55.400 --> 00:29:58.200
 because I have

601
00:29:58.200 --> 00:30:01.100
 to change both this one and I'll show the

602
00:30:01.100 --> 00:30:02.000
 other one mobile.

603
00:30:02.900 --> 00:30:05.700
So I go towards the

604
00:30:05.700 --> 00:30:08.600
 mobile interface. Click in here.

605
00:30:08.600 --> 00:30:11.800
 I go towards here.

606
00:30:11.800 --> 00:30:14.400
 I amplify everything that

607
00:30:14.400 --> 00:30:16.100
 I have here and I

608
00:30:16.800 --> 00:30:19.600
Remember because I I developed this myself.

609
00:30:20.800 --> 00:30:24.300
I remember that this item named menu

610
00:30:23.300 --> 00:30:26.500
 Dash open dash one over here,

611
00:30:26.500 --> 00:30:30.500
 which seventh symbol over here that notifies

612
00:30:29.500 --> 00:30:31.500
 that this hidden.

613
00:30:32.800 --> 00:30:35.500
I changed this which is hidden.

614
00:30:36.200 --> 00:30:39.200
Make sure that I am into the style tab I change

615
00:30:39.200 --> 00:30:40.500
 this to display.

616
00:30:41.700 --> 00:30:44.400
And this is to show all the items over here.

617
00:30:44.400 --> 00:30:47.700
 No, I have to remember what the item

618
00:30:47.700 --> 00:30:50.500
 is that I displayed because I don't

619
00:30:50.500 --> 00:30:53.500
 I do not want accidentally live it

620
00:30:53.500 --> 00:30:56.800
 as open. No one want to hide

621
00:30:56.800 --> 00:30:59.500
 another different element. I knit this

622
00:30:59.500 --> 00:31:03.900
 video element. I want to to display to

623
00:31:03.900 --> 00:31:05.100
 hide afterwards.

624
00:31:05.900 --> 00:31:08.900
Then I go to this drop down

625
00:31:08.900 --> 00:31:11.000
 over here then I moved to this.

626
00:31:12.900 --> 00:31:15.700
Gear icon then I show what's

627
00:31:15.700 --> 00:31:18.600
 inside then I click over this element

628
00:31:18.600 --> 00:31:20.400
 then I click.

629
00:31:21.100 --> 00:31:24.000
Here in the URL and I change it.

630
00:31:25.800 --> 00:31:26.600
I'm going to be.

631
00:31:28.600 --> 00:31:31.700
moving backwards on my steps

632
00:31:31.700 --> 00:31:34.500
 and I believe that the menu

633
00:31:34.500 --> 00:31:37.000
 open is the one that

634
00:31:37.000 --> 00:31:37.100
 I

635
00:31:38.100 --> 00:31:40.300
previously changed

636
00:31:42.200 --> 00:31:45.200
and I select none again to hide

637
00:31:45.200 --> 00:31:48.700
 the CSS or to set CSS property that

638
00:31:48.700 --> 00:31:51.100
 is high in this now. Let's imagine for a while

639
00:31:51.100 --> 00:31:54.700
 that I accidentally hit another element.

640
00:31:54.700 --> 00:31:56.300
 That wasn't the correct one.

641
00:31:57.200 --> 00:32:00.900
I just break the entire website, especially if

642
00:32:00.900 --> 00:32:03.200
 this navigation bar is present in I don't

643
00:32:03.200 --> 00:32:06.400
 know let's say that you I don't know whether you work only

644
00:32:06.400 --> 00:32:09.600
 with lineup Pages or also blocks. Let's say that you're

645
00:32:09.600 --> 00:32:14.200
 having four different blocks and you're having about 500 published

646
00:32:12.200 --> 00:32:14.700
 articles.

647
00:32:15.600 --> 00:32:18.700
And this land is this navigation bar is present all

648
00:32:18.700 --> 00:32:19.100
 of them.

649
00:32:20.200 --> 00:32:23.400
Done. They're just damaged right away.

650
00:32:24.800 --> 00:32:28.100
So again, I'm telling you that we as professional

651
00:32:27.100 --> 00:32:30.500
 webflow developers this covered

652
00:32:30.500 --> 00:32:33.300
 that we were damaging things on our website.

653
00:32:33.900 --> 00:32:36.600
Even worse we noticed those

654
00:32:36.600 --> 00:32:40.800
 mistakes months after

655
00:32:40.800 --> 00:32:43.300
 they were done. It is very easy

656
00:32:43.300 --> 00:32:46.500
 to accidentally close something you

657
00:32:46.500 --> 00:32:48.200
 shouldn't have closed.

658
00:32:48.800 --> 00:32:51.700
And you so then it was just right

659
00:32:51.700 --> 00:32:54.900
 and you didn't noticed show.

660
00:32:56.200 --> 00:32:59.600
I don't know. I can provide it with many many

661
00:32:59.600 --> 00:33:00.500
 more examples.

662
00:33:02.500 --> 00:33:05.500
Let's go to a very very

663
00:33:05.500 --> 00:33:07.000
 complex page over here.

664
00:33:07.900 --> 00:33:10.600
Because yeah, I mean some pages are

665
00:33:10.600 --> 00:33:13.100
 just like like those ones over here, but I

666
00:33:13.100 --> 00:33:16.200
 want I want to show you a very very complex.

667
00:33:17.700 --> 00:33:19.700
Pay an absolutely complex page.

668
00:33:22.500 --> 00:33:23.900
this was

669
00:33:24.800 --> 00:33:26.800
a line page from Apple

670
00:33:28.200 --> 00:33:31.300
right over here. Let me show you this one

671
00:33:31.300 --> 00:33:34.300
 over here. This is this is the iMac Colin page.

672
00:33:34.300 --> 00:33:37.400
 Do you know I'm at the 24 inches assignment plan

673
00:33:37.400 --> 00:33:37.700
 page.

674
00:33:38.800 --> 00:33:40.100
built on webflow

675
00:33:42.200 --> 00:33:43.200
But I want to show you.

676
00:33:44.300 --> 00:33:48.100
How cumbersome it could be for a an

677
00:33:47.100 --> 00:33:50.000
 editor have an access to this interface?

678
00:33:50.700 --> 00:33:53.600
To to modify something over

679
00:33:53.600 --> 00:33:53.700
 here.

680
00:33:56.200 --> 00:33:59.600
And I want to show you know how this interfere

681
00:33:59.600 --> 00:33:59.800
 looks like.

682
00:34:00.700 --> 00:34:03.300
So this is a line page for free. I'm

683
00:34:05.300 --> 00:34:05.600
computer

684
00:34:06.600 --> 00:34:10.200
and we're having all of those sort of complex animations

685
00:34:09.200 --> 00:34:11.700
 and so on and so forth.

686
00:34:12.600 --> 00:34:13.000
Let me just

687
00:34:14.500 --> 00:34:15.800
reduce this a little bit.

688
00:34:17.100 --> 00:34:17.600
Here we are.

689
00:34:18.800 --> 00:34:22.600
So yes as we scroll through load is

690
00:34:22.600 --> 00:34:25.300
 which were the animations that I previously shown

691
00:34:25.300 --> 00:34:28.100
 on. Our own website load is our

692
00:34:28.100 --> 00:34:31.400
 animated and this rotates instrument back

693
00:34:31.400 --> 00:34:32.400
 and forth. So

694
00:34:34.200 --> 00:34:37.900
let's say that we want it to edit this video

695
00:34:37.900 --> 00:34:41.000
 just this video over here, right?

696
00:34:43.200 --> 00:34:44.800
So in order to do that.

697
00:34:47.100 --> 00:34:48.100
will be going to

698
00:34:50.500 --> 00:34:53.600
this left area over here will

699
00:34:53.600 --> 00:34:53.800
 be.

700
00:34:55.100 --> 00:34:57.400
Shown everything then.

701
00:34:58.700 --> 00:35:00.100
We will be broken through.

702
00:35:02.300 --> 00:35:03.200
this video

703
00:35:04.800 --> 00:35:08.000
replace hit replace and that's

704
00:35:07.000 --> 00:35:08.100
 it.

705
00:35:08.900 --> 00:35:11.800
Let me know show you something a little bit more complex.

706
00:35:12.900 --> 00:35:16.200
Let me show you how this specific

707
00:35:15.200 --> 00:35:18.000
 part of land page said.

708
00:35:20.900 --> 00:35:24.100
Okay, so I'll go upwards and

709
00:35:23.100 --> 00:35:24.800
 here it is.

710
00:35:28.400 --> 00:35:29.000
but oops

711
00:35:29.800 --> 00:35:32.200
It is not there anymore. The reason why

712
00:35:32.200 --> 00:35:36.000
 is that their layers of animations one

713
00:35:35.400 --> 00:35:37.000
 after the odor?

714
00:35:37.800 --> 00:35:40.400
And and sharing is

715
00:35:40.400 --> 00:35:43.400
 something that I consider to make complex, but the logic here

716
00:35:43.400 --> 00:35:46.100
 we're red so that it can present for

717
00:35:46.100 --> 00:35:47.600
 things that are not as complex.

718
00:35:48.300 --> 00:35:51.900
Like I previously shown hidden items

719
00:35:51.900 --> 00:35:54.500
 text for our hero section

720
00:35:54.500 --> 00:35:56.900
 that ain't coolant very easily.

721
00:35:57.600 --> 00:36:01.700
So I have to search over here to reach

722
00:36:00.700 --> 00:36:02.000
 this.

723
00:36:02.600 --> 00:36:04.300
part of the page

724
00:36:05.000 --> 00:36:05.300
I

725
00:36:06.900 --> 00:36:09.300
downloaded loading. I reviewed a

726
00:36:09.300 --> 00:36:12.800
 loaded just to make sure that was the part of the page. Then

727
00:36:12.800 --> 00:36:15.600
 I can upload a new one after having done

728
00:36:15.600 --> 00:36:18.200
 that I go to the animations tab over here.

729
00:36:18.200 --> 00:36:21.400
 I hit on the trigger. I click in the

730
00:36:21.400 --> 00:36:24.400
 gear of the trigger and I make sure the animation is

731
00:36:24.400 --> 00:36:28.100
 going it's working properly on that stage in

732
00:36:27.100 --> 00:36:30.500
 order to preview it on this interface.

733
00:36:31.600 --> 00:36:34.300
Have to hit the old elements that

734
00:36:34.300 --> 00:36:37.800
 are overlapping above it. Then

735
00:36:37.800 --> 00:36:40.200
 I can preview it again and I can

736
00:36:40.200 --> 00:36:43.600
 modify the times on the animation then click done. I

737
00:36:43.600 --> 00:36:46.300
 do a lot of quality controls and a hit

738
00:36:46.300 --> 00:36:48.900
 publish and there it is change them.

739
00:36:49.700 --> 00:36:53.100
Not as busy as we might want to whereas on

740
00:36:52.100 --> 00:36:55.100
 the on the example of HubSpot. I just

741
00:36:55.100 --> 00:36:58.800
 go to HubSpot to block I

742
00:36:58.800 --> 00:37:02.000
 click on it and a click on on the

743
00:37:01.200 --> 00:37:04.500
 the video that isn't replaced and

744
00:37:04.500 --> 00:37:05.000
 that's it.

745
00:37:06.100 --> 00:37:06.400
So

746
00:37:07.800 --> 00:37:10.300
Enough for what flow? I believe this will be.

747
00:37:12.100 --> 00:37:15.700
This a good demonstration how

748
00:37:15.700 --> 00:37:18.400
 the CMS of what flow is

749
00:37:18.400 --> 00:37:19.100
 an s?

750
00:37:20.500 --> 00:37:23.200
Good for this purpose. I'm talking about

751
00:37:23.200 --> 00:37:26.700
 marketing teams needing to move fast with

752
00:37:26.700 --> 00:37:30.100
 thanks to keep up with our landing

753
00:37:29.100 --> 00:37:32.300
 pages maintains and others. I don't

754
00:37:32.300 --> 00:37:36.000
 order interfaces that might be required to

755
00:37:35.000 --> 00:37:36.300
 you.

756
00:37:37.900 --> 00:37:41.400
No, I will finalize with.

757
00:37:42.700 --> 00:37:46.000
A few more interfaces that allows with

758
00:37:45.800 --> 00:37:48.900
 experiences that are comparable

759
00:37:48.900 --> 00:37:51.400
 to this one on hops, but one of

760
00:37:51.400 --> 00:37:52.600
 those is prisming.

761
00:37:55.600 --> 00:37:58.600
Christmas is kind of similar in

762
00:37:58.600 --> 00:38:01.700
 terms of you drag and drop slices. They

763
00:38:01.700 --> 00:38:02.500
 call it that way.

764
00:38:03.500 --> 00:38:06.900
Call them blocks that they call them slices. I'm

765
00:38:06.900 --> 00:38:09.300
 talking about those in items over here. So they

766
00:38:09.300 --> 00:38:12.900
 drag and drop those items and they edit the

767
00:38:12.900 --> 00:38:15.500
 items very similarly to how

768
00:38:15.500 --> 00:38:17.500
 HubSpot allows.

769
00:38:18.400 --> 00:38:18.600
the

770
00:38:19.700 --> 00:38:22.600
the in the editors to do that. So this

771
00:38:22.600 --> 00:38:26.300
 is one consider. I'm not going to go deeper

772
00:38:25.300 --> 00:38:28.600
 into this because I believe the the

773
00:38:28.600 --> 00:38:31.800
 how it is done in hops, but is we'll

774
00:38:31.800 --> 00:38:34.400
 be in now for for you have an idea on the

775
00:38:34.400 --> 00:38:37.100
 key. I just wanted to show to keep

776
00:38:37.100 --> 00:38:40.900
 the ferns between the HubSpot approach.

777
00:38:41.700 --> 00:38:45.100
And and the webflow approach. No, I'm

778
00:38:45.100 --> 00:38:48.800
 going to go Dipper into how older HubSpot like

779
00:38:48.800 --> 00:38:51.900
 approaches or work or

780
00:38:51.900 --> 00:38:54.500
 just to mention. I'm sorry not go Dippers to

781
00:38:54.500 --> 00:38:57.100
 mention some some odor approaches that are similar to

782
00:38:57.100 --> 00:38:58.800
 help. So this is one prism.

783
00:39:02.800 --> 00:39:05.700
Oh, sorry, and press mink

784
00:39:05.700 --> 00:39:08.400
 is having the the example over here

785
00:39:08.400 --> 00:39:10.600
 for the land page builder.

786
00:39:11.900 --> 00:39:15.300
in which again as editors

787
00:39:14.300 --> 00:39:15.700
 we can just

788
00:39:16.800 --> 00:39:19.700
Take interfaces from here and drag them

789
00:39:19.700 --> 00:39:22.500
 and drop them where we want it and

790
00:39:22.500 --> 00:39:25.300
 to modify the content. It is somehow similar

791
00:39:25.300 --> 00:39:28.300
 like the approach similar. The interface is

792
00:39:28.300 --> 00:39:31.300
 different like the interface they're having is different. They're not

793
00:39:31.300 --> 00:39:35.600
 having like one side one thing one side and the updated

794
00:39:34.600 --> 00:39:37.500
 page in the order your images

795
00:39:37.500 --> 00:39:40.300
 everything from top to bottom

796
00:39:40.300 --> 00:39:43.100
 and you added you refresh the results

797
00:39:43.100 --> 00:39:46.900
 and so on but yes, this is this this in terms

798
00:39:46.900 --> 00:39:49.400
 of what it allows marketers to

799
00:39:49.400 --> 00:39:52.100
 do somehow similar. There's another one

800
00:39:52.100 --> 00:39:55.600
 that is following the first time approach of prismic and

801
00:39:55.600 --> 00:39:56.200
 it is name.

802
00:39:57.300 --> 00:39:57.900
trappy

803
00:40:00.900 --> 00:40:03.900
Here it is same approach and saying

804
00:40:03.900 --> 00:40:06.900
 workflow for all those with

805
00:40:06.900 --> 00:40:10.300
 a sign on figma with build that

806
00:40:09.300 --> 00:40:12.900
 sign as responsive HTML

807
00:40:12.900 --> 00:40:16.200
 and webflow, then we move those into

808
00:40:15.200 --> 00:40:18.500
 strappy or prismic or

809
00:40:18.500 --> 00:40:21.200
 HubSpot. So strappe isn't yet? Another one

810
00:40:21.200 --> 00:40:26.300
 that allows us to do the same. So we have and

811
00:40:25.300 --> 00:40:28.500
 then again what variates here's

812
00:40:28.500 --> 00:40:31.000
 kind of more like the interface for editors.

813
00:40:31.700 --> 00:40:35.600
But yes strap is is another one that

814
00:40:35.600 --> 00:40:38.500
 we can use what's different from strapping and

815
00:40:38.500 --> 00:40:41.100
 prismic is that Scrappy is more

816
00:40:41.100 --> 00:40:44.500
 flexible in terms of what we can do for

817
00:40:44.500 --> 00:40:47.800
 the editors experience itself.

818
00:40:47.800 --> 00:40:50.600
 We're not talking about the what the

819
00:40:50.600 --> 00:40:53.600
 line pages that will produce but the interface

820
00:40:53.600 --> 00:40:55.400
 to actually get content.

821
00:40:56.100 --> 00:40:59.900
Fold up into those lineup pages. So trap

822
00:40:59.900 --> 00:41:02.300
 is more flexible. But also it means that it is

823
00:41:02.300 --> 00:41:04.700
 having a kind of a more.

824
00:41:06.500 --> 00:41:08.500
It requires more backhand work.

825
00:41:09.100 --> 00:41:12.600
And there's another one that we also use.

826
00:41:13.500 --> 00:41:15.700
That is name sanity.

827
00:41:19.800 --> 00:41:22.600
Same approach same workflow first with

828
00:41:22.600 --> 00:41:25.600
 a sign then we get that design into webflow for

829
00:41:25.600 --> 00:41:29.200
 blowing that the sign into what flow then we get those

830
00:41:28.200 --> 00:41:32.400
 responsive slices

831
00:41:31.400 --> 00:41:35.000
 or blocks or whatever might want

832
00:41:34.100 --> 00:41:38.400
 to call them into sanity. And once insanity.

833
00:41:38.400 --> 00:41:42.100
 This is Holy the editors experience

834
00:41:41.100 --> 00:41:42.700
 looks like

835
00:41:43.500 --> 00:41:45.800
sanity is

836
00:41:47.200 --> 00:41:51.300
it's very flexible. It is absolutely absolutely flexible.

837
00:41:54.100 --> 00:41:55.900
What's different from sanity?

838
00:41:56.700 --> 00:41:58.300
when compared to strappy

839
00:41:58.900 --> 00:42:01.900
is that it is even more flexible, which

840
00:42:01.900 --> 00:42:03.700
 means that it is even more.

841
00:42:06.300 --> 00:42:08.400
difficult or it requires

842
00:42:09.400 --> 00:42:12.800
another next first step in order to

843
00:42:12.800 --> 00:42:14.400
 set up the in the CMS.

844
00:42:14.900 --> 00:42:17.200
But once set up the process is the

845
00:42:17.200 --> 00:42:20.000
 same we get blocks into the CMS.

846
00:42:20.600 --> 00:42:23.400
via getting them built into webflow and

847
00:42:23.400 --> 00:42:26.600
 then we can add it provide an added

848
00:42:26.600 --> 00:42:30.200
 an experience for the contents to mix and

849
00:42:30.200 --> 00:42:33.400
 reuse those blocks and it's content at their will

850
00:42:34.200 --> 00:42:38.400
So yes, there it is. I will hope this Verline

851
00:42:37.400 --> 00:42:40.200
 explanation will be

852
00:42:40.200 --> 00:42:43.600
 helpful to you and I ran absolutely.

853
00:42:45.600 --> 00:42:48.600
Open to answer any questions and

854
00:42:48.600 --> 00:42:51.800
 inquiries we would do use HubSpot

855
00:42:51.800 --> 00:42:54.500
 for marketing so we can also help with

856
00:42:54.500 --> 00:42:57.700
 increase that you might have had in

857
00:42:57.700 --> 00:42:59.700
 terms of the marketing.

858
00:43:00.900 --> 00:43:03.800
Hub I just talked about the

859
00:43:03.800 --> 00:43:07.400
 CMS up but I can also help you

860
00:43:07.400 --> 00:43:10.200
 answering questions or any injuries that you might

861
00:43:10.200 --> 00:43:13.800
 have in terms of Howdy in marketing helps integrates

862
00:43:13.800 --> 00:43:16.500
 with the CMS for things like I don't

863
00:43:16.500 --> 00:43:20.700
 know A/B Testing are multi

864
00:43:19.700 --> 00:43:22.600
 domain possibilities with with

865
00:43:22.600 --> 00:43:25.400
 which is something that maybe you're

866
00:43:25.400 --> 00:43:26.600
 considering out.

867
00:43:27.300 --> 00:43:30.700
Oh, yeah Bliss feel free to reach us

868
00:43:30.700 --> 00:43:33.700
 out with more questions. And also if you

869
00:43:33.700 --> 00:43:37.300
 from I I emphasized HubSpot

870
00:43:36.300 --> 00:43:38.400
 because you mentioned

871
00:43:39.400 --> 00:43:44.100
HubSpot, but if you want to know more about sanities crappy

872
00:43:43.100 --> 00:43:47.000
 and and prismic, please let

873
00:43:46.500 --> 00:43:48.300
 us know as well. Thank you.

About the series

This tech video series will cover various topics related to web design and development specifically tailored for marketing teams, business owners, and web designers. The series will delve into the challenges they face to keep up with their business and marketing activities regarding the required tech stack to support them.

Podcast episode poster
Enjoy at:
Youtube App icon
Support Quo team member headshot
Let's work together
Contact us
arrow icon
We can help with...
UI/UX design
Web development
CMS integration
eCommerce
AB web experimentation
Web and mobile apps
Illustration and animation
Marketing print design
Record to eBook workflows
Remote video production
Color grading
Remote crew assistance
Video and audio editing
Long to short video extraction
Product photo and video
Landing pages creation
Recurrent web maintenance
Packaging design