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.