NetSquared Portland - Webflow: Representing your Cause in Style!

NetSquared's picture

Recorded by NetSquared Portland, July 28, 2020

Webflow is a modern online visual editor platform that allows users to design, build, and launch websites without learning code. It enables organizations to create beautiful, fully responsive websites without hiring a developer or marketing agency, giving them complete control over their online presence. Join Stephanie Green and Cyan Cooper — owners of the Portland business development lab 100C — as they demonstrate how a non-profit organization can use Webflow to represent their cause in style!

 

Chat Log

00:28:00    Lynda Moe, Auckland, New Zealand:    I'm just designing a website now so just looking for great ideas to incorporate into my site.
00:28:36    Alissa Beddow:    No objective! Frequently use Squarespace and familiar with some of the common WP builders. Have been curious about Webflow for a while.
00:29:10    Zohar Lindenbaum:    I’m interested in hearing more about the marketing side of your business… if you don’t mind sharing :)
00:29:50    Michael Horenstein:    Will your presentation be available for downloading or copying? Thank you!
00:31:08    Megan Villwock:    The presentation is being recorded :)
00:31:36    Michael Horenstein:    TY, Megan!
00:32:47    Marc Andreas Yao:    Is it a graphic website builder ?
00:36:18    markdusseault:    looking good to me
00:36:28    Zohar Lindenbaum:    I’d love to learn more about your workflow, but I dont want to set the tone for everyone else… if they are newbies
00:36:30    Alissa Beddow:    Same!
00:36:42    Alissa Beddow:    (Looking good) :)
00:38:20    Joshua Mcquiston:    Did you forget to drink a beer for the demo-gods?
00:50:24    Marc Andreas Yao:    Is it possible to edit HTML CSS code for a better handling ?
00:51:18    Michael Horenstein:    Can you export a Webflow project to another platform such as Wix or Google Sites?
00:52:49    Alissa Beddow:    Looks super slick. So do you launch right out of Webflow? How about security and backups—do you rely on the webhost for this?
00:52:52    Zohar Lindenbaum:    Usually sites built in Webflow are exported to WordPress as its way cheaper
00:54:43    Zohar Lindenbaum:    You guys did a wonderful job with your sites and presentation! It’s 9:30pm NYC time here, gonna go have late dinner. I’ll see you all at the next meeting. Thanks and good luck!!!
00:58:07    Alissa Beddow:    Makes sense. So nice to have it all in one place. TY!
00:59:19    Marc Andreas Yao:    THAT’S COOL
01:08:23    Marc Andreas Yao:    Sorry guys I’ve a mistake with my micro but is it possible to add video background ?
01:11:14    Marc Andreas Yao:    okay got it
01:12:39    Alissa Beddow:    Great overview, thank you!
01:12:49    markdusseault:    thank you!
01:14:05    Marc Andreas Yao:    There’s a lot of question that i’ld ask about but could we add an API for buy something online?
01:14:52    Michael Horenstein:    Thank you for your presentation, Cyan & Stephanie! I look forward to accessing the recording.
01:15:04    Megan Villwock:    Thank you!
01:15:10    Alissa Beddow:    Thanks so much!
01:15:31    Marc Andreas Yao:    Thank you guys
01:15:48    Michael Horenstein:    What is your contact info?
01:16:01    Cyan Cooper:    stephanie@100c.io or cyan@100c.io
01:16:17    Marc Andreas Yao:    okay thank you

Transcript

00:18:46.950 --> 00:18:56.850
Joshua Mcquiston: Um, yeah, we'll just go ahead and get started. So to start off, this is the Portland next squared meetup and

157
00:18:58.950 --> 00:19:00.240
Joshua Mcquiston: event tonight. We have a

158
00:19:00.360 --> 00:19:06.270
Joshua Mcquiston: Free tool specific topic here with our presenters will introduce in just a moment.

159
00:19:07.590 --> 00:19:19.110
Joshua Mcquiston: Net Squared is a organization that gathers nonprofits activists tech leader leaders and unders together to use technology for social change.

160
00:19:20.160 --> 00:19:27.060
Joshua Mcquiston: And they are all over the world. I still, I need to get an update image because it doesn't actually show the Portland.

161
00:19:27.060 --> 00:19:27.270
One.

162
00:19:28.530 --> 00:19:30.840
Joshua Mcquiston: That you said good last done

163
00:19:33.690 --> 00:19:48.960
Joshua Mcquiston: This is the values of Net Squared. Basically, we welcome everyone. We put community first build stronger nonprofits. We invite participation and we treat each other with kindness and respect. So those are important values here.

164
00:19:51.090 --> 00:20:13.110
Joshua Mcquiston: And Net Squared is a program of tech soup and tech soup equips change makers with transformative technological solutions and skills and there are some forums available at forums that tech soup.org and you can learn more about tech soup going over there.

165
00:20:15.480 --> 00:20:23.160
Joshua Mcquiston: For were given to today's event. I'm just mentioned, we do have an event scheduled there will be more detail.

166
00:20:24.540 --> 00:20:30.090
Joshua Mcquiston: Megan Do you have any detail you want to add to that right now. Or if you want to mention about it.

167
00:20:30.720 --> 00:20:40.560
Megan Villwock: Yeah, sure. So, um, it'll focus on data visualization generally for nonprofits that will focus a little bit on some specific tools such as Microsoft Power VI, which

168
00:20:40.860 --> 00:20:54.960
Megan Villwock: Was listed. Microsoft is one of those texts, who partners that offers low costs, you know, services and tools for nonprofit. So it's a good option there will be a fuller description online to see if you're interested in that one. So,

169
00:20:56.340 --> 00:21:10.860
Joshua Mcquiston: Cool. All right. And so for today's event. We have representing your cause, and style about web flow with Stephanie green and saying, Cooper from 100. See, that's, that's how you say that right

170
00:21:12.210 --> 00:21:21.420
Joshua Mcquiston: And then once they're done will be lots of room for questions. And, you know, we'll just we'll try and hear little bit for everyone will have a huge group.

171
00:21:22.710 --> 00:21:30.360
Joshua Mcquiston: So I'll go ahead and share my screen and pass it over to let you guys share screen.

172
00:21:31.890 --> 00:21:33.420
Joshua Mcquiston: I can figure that out.

173
00:21:33.750 --> 00:21:34.110
Oh,

174
00:21:35.940 --> 00:21:36.120
Cyan Cooper: Oh,

175
00:21:39.420 --> 00:21:43.920
Cyan Cooper: Sure we don't have anything embarrassing on the screen right now. Well, I think there's a picture of us so

176
00:21:46.770 --> 00:21:47.760
Cyan Cooper: But they're already looking at

177
00:21:50.670 --> 00:21:53.280
Cyan Cooper: The deep end, there were there were originally 20 people in this meeting.

178
00:21:54.960 --> 00:21:57.810
Joshua Mcquiston: Okay, why am I not

179
00:21:59.160 --> 00:22:02.820
Joshua Mcquiston: Seeing how I'm sharing my screen. This is embarrassing.

180
00:22:02.850 --> 00:22:07.260
Cyan Cooper: I know right now zoom, zoom updated recently they changed everything around we

181
00:22:07.710 --> 00:22:13.650
Joshua Mcquiston: Don't have the main man. I'm trying to bring it up like the main full screen thing Smith.

182
00:22:31.050 --> 00:22:32.010
Cyan Cooper: What's reactions.

183
00:22:39.000 --> 00:22:40.650
Cyan Cooper: Like there's buttons. Let me press the button.

184
00:22:42.840 --> 00:22:45.150
Cyan Cooper: doesn't go away. It's just like the other guys.

185
00:22:46.740 --> 00:22:47.940
Cyan Cooper: Waiting for you to give your next

186
00:22:54.360 --> 00:22:57.690
Joshua Mcquiston: Oh, okay. Right there. Okay. There I stopped sharing

187
00:22:58.920 --> 00:23:01.560
Joshua Mcquiston: And you guys should be able to share now.

188
00:23:07.080 --> 00:23:13.230
Cyan Cooper: Share. Oh, it says you've disabled screen sharing for us. Yep, that you have to update a setting in allowable.

189
00:23:13.230 --> 00:23:14.910
Joshua Mcquiston: Right. Yeah, I know. Good.

190
00:23:16.440 --> 00:23:16.890
Joshua Mcquiston: Good.

191
00:23:17.850 --> 00:23:18.270
There.

192
00:23:24.840 --> 00:23:27.360
Cyan Cooper: Ok, can, can everyone see

193
00:23:29.760 --> 00:23:31.500
Cyan Cooper: Nice, nice. Awesome.

194
00:23:33.840 --> 00:23:38.940
Cyan Cooper: Well, so thank you everyone for attending. I think we have eight people altogether.

195
00:23:40.260 --> 00:23:42.510
Cyan Cooper: Very nice to meet you all. My name's

196
00:23:42.720 --> 00:23:49.080
Cyan Cooper: cyan and Stephanie. Stephanie where we founded a digital marketing agency here in

197
00:23:49.080 --> 00:23:57.360
Cyan Cooper: Portland called 100 see about two years ago and it's largely content marketing and a big part of

198
00:23:57.510 --> 00:24:01.890
Cyan Cooper: Our business has been making websites with a cool tool called workflow.

199
00:24:03.030 --> 00:24:20.130
Cyan Cooper: So when Josh reached out to us and mentioned that he has this mc squared meetup and mentioned that some of you are interested in websites. We figured that we would give you a quick breakdown of what workflow is why we use it and why you might want to consider doing the same.

200
00:24:21.990 --> 00:24:32.550
Cyan Cooper: Yeah, I'm disclaimer. We are in no way affiliated with web flow or getting paid for this. And anyway, it's just what we use, which is why we're sharing it because we what we use to

201
00:24:33.240 --> 00:24:34.560
Cyan Cooper: Make websites and

202
00:24:35.430 --> 00:24:41.430
Cyan Cooper: What flow definitely isn't for everyone. And we'll talk about you know what it is that we like about it and what might

203
00:24:41.580 --> 00:24:49.440
Cyan Cooper: Make it a good fit for you, but we recognize there are other website making tools out there and some people very much love their tools. So we're not talking about about any of the other ones.

204
00:24:49.740 --> 00:25:01.770
Cyan Cooper: We're just here to talk about what we use. And what makes it unique and some of the benefits and some of the things about it that make it really great friends for nonprofits and organizations around social change.

205
00:25:03.780 --> 00:25:13.680
Cyan Cooper: And what one final caveat. We are marketers. We're not tech people. Yeah. So if in the audience. There's a bunch of tech people, chances are good you know way more about tech than we do. Yeah.

206
00:25:14.220 --> 00:25:22.950
Cyan Cooper: But it sounds like there's, there's a lot of people who might be a non nonprofits. And if that's the case, and you're not a tech person and you're trying to save money.

207
00:25:23.490 --> 00:25:29.640
Cyan Cooper: By not hiring tech people workflow is a great option. So we thought we might be good candidates to to share it.

208
00:25:29.970 --> 00:25:49.290
Cyan Cooper: So when it comes to, you know, nonprofits, and the types of missions that they have the reason why we think web flow is a good choice for them is one that it's it permits a wide range of creative freedom. So, you know, we've we've we've played around with a lot of the other

209
00:25:50.400 --> 00:26:02.970
Cyan Cooper: website builders and we found that web flow gives you anything that we can make and say, you know, sketch or Photoshop or something like that, we can recreate and web flow easily

210
00:26:03.360 --> 00:26:09.780
Cyan Cooper: Other website builders, not so much. So whatever your creative vision might be you're able to make it with this tool.

211
00:26:10.590 --> 00:26:28.560
Cyan Cooper: Um, another important part of this that we think relates to you guys. If you are that that demographic is that it has what's called a content management system or a CMS that makes it very easy for you to regularly update your website with new information.

212
00:26:29.640 --> 00:26:32.460
Cyan Cooper: Without having a strong technical background.

213
00:26:32.790 --> 00:26:45.600
Cyan Cooper: And you can create some pretty cool websites that are dynamic in the sense that the information that's displayed on them will change depending on certain parameters as opposed to static where it just stays the same all the time.

214
00:26:46.350 --> 00:26:56.820
Cyan Cooper: And then finally, the fact that it's accessible and I kind of already touched on that, that if you know we were not tech people. We don't know. We don't know code.

215
00:26:57.450 --> 00:27:11.310
Cyan Cooper: But we we stumbled across web flow and within a relatively quick period of time, we were able to make websites that rivaled you know the appearance of any other website out there and get hired and get paid for them.

216
00:27:12.030 --> 00:27:25.440
Cyan Cooper: So that's kind of that's kind of the, the aim of our presentation today. Before we just dig into that we want to make sure that we're not boring people. So, you know, does anyone that anyone joined this with with a

217
00:27:26.310 --> 00:27:32.100
Cyan Cooper: Specific objective in mind or something that you're you're hoping to hear during a presentation.

218
00:27:34.650 --> 00:27:38.400
Cyan Cooper: And if you don't, the camera, you can feel free to chat and then you were able to see that.

219
00:27:39.450 --> 00:27:43.920
Cyan Cooper: And if there is, and if you can't unmute Joshua able to unmute themselves.

220
00:27:47.520 --> 00:27:50.100
Cyan Cooper: Josh Wheaton, you're muted, man. We can we can

221
00:27:50.820 --> 00:27:54.270
Joshua Mcquiston: We can unmute themselves. And yeah, feel free to use the chat as well.

222
00:27:54.750 --> 00:27:57.450
Cyan Cooper: Oh, nice. Oh, that's right. The chat. Yes.

223
00:27:58.500 --> 00:28:00.600
Cyan Cooper: So yeah, please. At any point I'm

224
00:28:01.620 --> 00:28:10.860
Cyan Cooper: Jumping so we're not just talking. Awesome. Ooh, fun, you're building a site now cool. Very cool. We'll leave this here. All right, we can see the chat. Now,

225
00:28:12.660 --> 00:28:13.440
Cyan Cooper: So the red bubbles.

226
00:28:15.030 --> 00:28:23.040
Cyan Cooper: Cool. I'm a nice. Okay, well, so I'm stuff all at you, kind of, if you want to

227
00:28:25.440 --> 00:28:35.850
Cyan Cooper: Yeah so. So one of the things we talked about is that web flow is one of those tools that even if you're not a coder, you're able to learn and make amazing websites and

228
00:28:36.390 --> 00:28:45.240
Cyan Cooper: I say that from somebody who two years ago started a digital marketing company with two other people having never built a website in my life.

229
00:28:45.600 --> 00:28:52.830
Cyan Cooper: Um, and so I have actually learned web flow, just from the tools that are available out on the internet. They haven't wonderful

230
00:28:53.700 --> 00:29:05.520
Cyan Cooper: And actually, so heart said it so wonderful. It's a community there's really a ton of users of what's low all around the world who love to share information and it starts with web flow, they have what they call web flow University. And so I just went through and took

231
00:29:05.550 --> 00:29:17.040
Cyan Cooper: It's a one and a half hour Crash Course and, you know, and then we've used it. So when we say, anyone can learn it. I truly mean that, because we've learned it to the point where we built a business around it.

232
00:29:17.640 --> 00:29:26.100
Cyan Cooper: Without having ever coded and we say, having never coded because it is a nice thing to know. You can get started with this tool without being a developer

233
00:29:26.370 --> 00:29:36.240
Cyan Cooper: But there are a ton of people all over the world who are developers and use this and it isn't just limited to drag and drop. So it does have the functionality to add completely custom code.

234
00:29:36.570 --> 00:29:45.540
Cyan Cooper: And go beyond it's it's just standard capabilities and that's a, it's a really nice option for anybody's

235
00:29:46.440 --> 00:29:48.870
Cyan Cooper: Development level, I guess, a skill level so

236
00:29:49.350 --> 00:29:55.620
Cyan Cooper: I always talked about it in the terms of like no code that's definitely how they market it because that's my perspective. What I like about it.

237
00:29:55.830 --> 00:30:06.480
Cyan Cooper: But I don't want that to turn off. Anyone who is a coder and it's like, Oh, does that mean I can't do all these other things that custom code allows me to do because you easily can yeah it permits.

238
00:30:06.840 --> 00:30:23.520
Cyan Cooper: custom code. And a lot of the people we know who are good at coding, they'll use web flow as sort of like a shortcut, you know, to set the website up the way they need it. And then, and then they'll reserve code for custom functionality that they need the website to do

239
00:30:24.960 --> 00:30:38.100
Cyan Cooper: So just to give everyone kind of an idea we're going to jump into web flow and show you. You know how it works. I'm sure you know we just talked to Zahar. It sounds like he's already familiar with, with web flow and how it works. So

240
00:30:38.520 --> 00:30:46.980
Cyan Cooper: Again, this is super basic what we're about to do if you're if you're coming from a tutorial an in depth tutorial on web flow. You're in the wrong place.

241
00:30:47.610 --> 00:30:51.150
Cyan Cooper: But we will show you kind of, you know, real simple. How, how it works.

242
00:30:51.450 --> 00:30:56.760
Cyan Cooper: Let me see if I can minimize this. Oh. Oh, nice. We got we got people in the chat.

243
00:30:57.930 --> 00:31:06.600
Cyan Cooper: Frequently use Squarespace familiar with some common WordPress builders been curious about web flow nice more about the marketing side of our business.

244
00:31:07.890 --> 00:31:09.810
Cyan Cooper: Will definitely share that we'll get into that.

245
00:31:11.250 --> 00:31:19.920
Cyan Cooper: For downloading copying as Josh, he just, oh, Megan. Megan got it nice and yeah and it's interesting as you're pulling this up.

246
00:31:21.060 --> 00:31:28.410
Cyan Cooper: A lot of people actually that we build websites for start with like a square space site that they built themselves and they get to a point where they

247
00:31:28.410 --> 00:31:30.390
Cyan Cooper: Want a little bit more functionality.

248
00:31:30.840 --> 00:31:36.390
Cyan Cooper: One of our clients recently sent to me, she's like, I just feel like you can look at my website and see that it was made and Squarespace.

249
00:31:37.410 --> 00:31:38.580
Cyan Cooper: So there's a lot of people actually

250
00:31:38.580 --> 00:31:41.370
Cyan Cooper: Start there. And then when they're ready to take it to the next level.

251
00:31:41.430 --> 00:31:43.230
Cyan Cooper: We'll jump into something like, well, that's a pretty

252
00:31:43.230 --> 00:31:43.950
Cyan Cooper: Standard

253
00:31:44.670 --> 00:31:50.730
Cyan Cooper: Kind of US continuum. Yeah. And then workflow also has for people who want to keep it simple. It also has a

254
00:31:50.730 --> 00:31:51.960
Cyan Cooper: Bunch of templates available.

255
00:31:52.020 --> 00:31:59.460
Cyan Cooper: So if you want to start with a template like Squarespace often does and then modify it however you'd like, you can do that. That's a great shortcut.

256
00:32:00.180 --> 00:32:03.600
Cyan Cooper: So this is the the interface for web flow.

257
00:32:04.410 --> 00:32:10.110
Cyan Cooper: Right now we have the the dreaded blank canvas that so many designers are are are intimidated by

258
00:32:11.040 --> 00:32:17.910
Cyan Cooper: And just real quick. I wanted to show you guys on to walk you through you know how to how to remake the homepage of our website.

259
00:32:18.540 --> 00:32:34.560
Cyan Cooper: Not the whole page just just the hero section to kind of show you how it works and the way I explained the way I describe what what web flow does is it's kind of like designing with visual code so behind the scenes as you're building as you're kind of using these drag and drop

260
00:32:34.560 --> 00:32:36.570
Cyan Cooper: Elements to build your, your website.

261
00:32:36.720 --> 00:32:38.700
Cyan Cooper: There's actually code being generated.

262
00:32:38.730 --> 00:32:40.140
Joshua Mcquiston: In the background and

263
00:32:40.200 --> 00:32:49.500
Cyan Cooper: You can pull it up and see it anytime you can even export it and go put it on WordPress. If you want to your entire site for any other or any other any other place you want to

264
00:32:50.850 --> 00:33:01.650
Cyan Cooper: So you have a row of tools over here and there's a bunch of, you know, things that come kind of pre made that are that are easy, make it really easy for you to

265
00:33:02.730 --> 00:33:15.150
Cyan Cooper: You know, add different elements, whether that's a video, whether that's a form. You know, it has rich text, there's, there's a whole bunch of stuff that we won't really get into here, but it makes it really easy to build websites.

266
00:33:16.200 --> 00:33:29.640
Cyan Cooper: And then essentially it for people who have no experience building websites. It's essentially using a series of boxes to organize your content. So for example, let's say I want you to shortcut.

267
00:33:29.640 --> 00:33:30.960
Cyan Cooper: Here, I'll drag things out.

268
00:33:30.960 --> 00:33:38.040
Cyan Cooper: So for example, when you're building a website, you want to. You always start with a section because if you ever go through a website, you see that it's divided into sections.

269
00:33:39.330 --> 00:33:44.370
Cyan Cooper: Once you drag an element onto the screen you can see here that we have the section that showing up here.

270
00:33:44.610 --> 00:33:53.970
Cyan Cooper: Then you have all these cool tools on the side to be able to tell it what to do. You can tell it how to position itself. How big it should be how the elements inside it should should act.

271
00:33:54.360 --> 00:34:02.940
Cyan Cooper: All that stuff. So, you know, for the height. I'm going to say 100 viewport height which tells it to be the entire height of my screen here.

272
00:34:04.560 --> 00:34:10.290
Cyan Cooper: I'm gonna need a now bar. So if I go in here. It's been a while since I used

273
00:34:11.220 --> 00:34:12.240
Cyan Cooper: To maybe see the nav bar.

274
00:34:13.260 --> 00:34:13.860
Cyan Cooper: Symbols.

275
00:34:14.130 --> 00:34:16.020
Cyan Cooper: No, it's not even somebody who's a shortcut here so

276
00:34:17.040 --> 00:34:29.130
Cyan Cooper: Now bar, you can just drag it out. It gives you the basic elements for it and then you can style it accordingly. So, you know, I want an image up in the upper right hand corner. I can choose what type of image I want

277
00:34:30.570 --> 00:34:41.610
Cyan Cooper: You know it's find our logo here, drop it in. It doesn't show up because it doesn't have any size properties. So I'm going to tell it that I want this image to be 100 pixels.

278
00:34:41.880 --> 00:34:44.400
Cyan Cooper: Wide and it automatically add to that.

279
00:34:45.660 --> 00:34:54.690
Cyan Cooper: It has no room to breathe here. It fills up the entire space, which isn't good. So then I'm going to tell its parent element, you have these these padding tools here. So you're

280
00:34:54.690 --> 00:34:55.860
Cyan Cooper: Able to then adjust

281
00:34:56.250 --> 00:34:58.830
Cyan Cooper: Precisely, like how much, how much padding, you want

282
00:35:00.480 --> 00:35:09.360
Cyan Cooper: This color this gray color super ugly. I do. I don't want this gray color here so you can go in and change the background color. So I'm going to say white

283
00:35:09.420 --> 00:35:10.290
Let's make this white

284
00:35:11.400 --> 00:35:26.430
Cyan Cooper: And then you can give classes to all of your different elements and wherever, whenever you want to repeat that element somewhere else on the site. You can just type that you can just click on it type that class. So in this case, I already have one.

285
00:35:26.430 --> 00:35:34.590
Cyan Cooper: Called nab link and it'll then automatically take all of the properties associated with that class and apply it to it.

286
00:35:34.890 --> 00:35:37.890
Cyan Cooper: And also make it so that if I change anything about that class.

287
00:35:38.070 --> 00:35:43.740
Cyan Cooper: It'll then change across the entire website so I don't have to go through and painstakingly change every single thing.

288
00:35:45.000 --> 00:35:49.560
Cyan Cooper: I do wanna. I do want to stop here and check with people is this

289
00:35:49.650 --> 00:35:56.400
Cyan Cooper: Is this along like is this to basic is this, were you hoping to to kind of get this kind of introduction to web flow. How we doing so far.

290
00:35:58.380 --> 00:35:58.620
Joshua Mcquiston: Show.

291
00:35:59.250 --> 00:36:00.000
Cyan Cooper: The video. Oh.

292
00:36:01.170 --> 00:36:01.410
Cyan Cooper: I think

293
00:36:04.140 --> 00:36:04.740
Cyan Cooper: Oh, this

294
00:36:11.730 --> 00:36:12.210
Cyan Cooper: Nothing.

295
00:36:14.280 --> 00:36:22.980
Cyan Cooper: Okay, well I'll finish. Real quick, then just to just to say you guys looking good to me. All right, awesome, awesome. Somebody, somebody, somebody out there is happy. And that's all I care about.

296
00:36:23.400 --> 00:36:31.470
Cyan Cooper: So, um, so to finish, you know, so I can apply the same the same class to all of these so that they all have they all look the same.

297
00:36:33.810 --> 00:36:34.380
Cyan Cooper: Natalie.

298
00:36:35.400 --> 00:36:43.440
Cyan Cooper: And then for the section in the background here. I want to add a picture. And so I can just add it as

299
00:36:43.500 --> 00:36:44.430
Joshua Mcquiston: People are reading

300
00:36:44.790 --> 00:36:45.960
Cyan Cooper: So looking good. Awesome.

301
00:36:48.600 --> 00:36:56.520
Cyan Cooper: If they're newbies so heart, though, are after this call, we can we can jump on a separate call and I'll tell you all the things I know about web flow.

302
00:36:57.960 --> 00:36:58.440
Cyan Cooper: So,

303
00:36:59.790 --> 00:37:02.070
Cyan Cooper: You know, it's really easy to add a picture.

304
00:37:03.120 --> 00:37:15.600
Cyan Cooper: The one on our website is a is a bunny count on cash when you add it, it just repeats it at a really small size, so you can set the dimensions of it. So in this case I want it to just cover the entire background so there it goes.

305
00:37:16.890 --> 00:37:18.510
Cyan Cooper: And then inside of this

306
00:37:19.170 --> 00:37:20.760
Cyan Cooper: We need what's called the container.

307
00:37:21.090 --> 00:37:38.580
Cyan Cooper: So that it constraints, how wide the information can get and I want that container to be in the middle because when you come to a web page usually see text right in the middle. And so I can set that for its parent element, I can say, okay, I need you to center this whoops. Let's see.

308
00:37:39.660 --> 00:37:45.660
Cyan Cooper: Center. This should. Why is this doing this behavior with 100%

309
00:37:46.710 --> 00:37:52.860
Cyan Cooper: Very interesting. I did this, I literally I literally did this before, before this presentation.

310
00:37:54.300 --> 00:37:56.370
Cyan Cooper: Am I know due to the section I thought

311
00:37:57.840 --> 00:38:09.840
Cyan Cooper: Yeah, students to the section. Oh, I see why it's doing it. I need to set this to absolute habit be up at the top there. Now, if I click section and

312
00:38:11.370 --> 00:38:13.830
Joshua Mcquiston: Make it a what sparks should do it.

313
00:38:15.300 --> 00:38:30.870
Cyan Cooper: There you go. Thank you. All right. Um, so then I see I don't want to add it to block. I want to add text. So it was dropped some text in here quickly. Again, I already have classes for hero title.

314
00:38:34.020 --> 00:38:35.880
Cyan Cooper: Say delete that. Now I got

315
00:38:38.940 --> 00:38:44.910
Cyan Cooper: Let's see. Where are we were in container. I want to add a heading. So, you know, H1 at a heading.

316
00:38:46.020 --> 00:38:48.870
Cyan Cooper: That also has a class for it. So I'll just type

317
00:38:49.890 --> 00:38:56.100
Cyan Cooper: Here row heading, boom, it automatically does it this is this is

318
00:38:57.120 --> 00:39:01.080
Cyan Cooper: drink a beer for the demo gods. I did forget to drink a beer for the demo gods. Yes.

319
00:39:02.160 --> 00:39:07.590
Cyan Cooper: This is looking a little washed out so you know something else. Super if I want to. If I want to

320
00:39:08.160 --> 00:39:22.170
Cyan Cooper: Adjust just slightly the background gradients. So that are overlay so that I can see this white text a little bit better. I can go ahead and add that. And, you know, adjust it however much I want. So now I can see the text a lot better.

321
00:39:23.640 --> 00:39:28.980
Cyan Cooper: And then, you know, it's just double click onto it and type, whatever, like, you know, welcome.

322
00:39:30.780 --> 00:39:34.500
Cyan Cooper: To the best company ever

323
00:39:38.100 --> 00:39:48.990
Cyan Cooper: We are 100 see and, you know, I think you guys get the idea. But just to kind of give you a feel for what it looks like and what it feels like using web flow.

324
00:39:50.280 --> 00:39:54.330
Cyan Cooper: You can, you can see that it's it's more complex than something like wicks

325
00:39:55.710 --> 00:40:06.420
Cyan Cooper: But the learning curve isn't so steep that you can't learn it within you know a few weeks, especially using the resources that they have. And because it's a little bit more complex.

326
00:40:06.570 --> 00:40:09.810
Cyan Cooper: Once you learn these tools which are accessible to anybody.

327
00:40:10.110 --> 00:40:24.840
Cyan Cooper: You're then able to create pretty much any type of website that you want to. So the complexity at the beginning might be a little bit daunting. Don't be daunted by it. In the end, you'll come to appreciate it, because you can make literally any website that you want. Yeah.

328
00:40:25.800 --> 00:40:28.080
Cyan Cooper: I'm just to add a couple things onto there.

329
00:40:28.770 --> 00:40:36.270
Cyan Cooper: Someone asked about workflow. And one of the things I like is that in the beginning, you're seeing him. I mean to drag in a section and set up.

330
00:40:36.300 --> 00:40:38.730
Cyan Cooper: The height and and all the

331
00:40:39.780 --> 00:40:54.090
Cyan Cooper: Dimensions dimensions of the of the different components and you're able to set those classes which make it really easy to reuse sections across your website you're able to also go in one of the first things we do is we just open a page that we call the style guide.

332
00:40:54.390 --> 00:40:56.190
Cyan Cooper: And we set the default fonts.

333
00:40:56.220 --> 00:41:00.810
Cyan Cooper: And the default sizing for all the different headings. So like when we click on heading here.

334
00:41:01.320 --> 00:41:10.710
Cyan Cooper: You know you have six different heading title tags that you can use. And we just go ahead and figure it so that way it's that's kind of the baseline with all of your branding with your fonts and

335
00:41:10.710 --> 00:41:15.030
Cyan Cooper: Your sizing and your colors. And when you're adding headings. The default will

336
00:41:15.060 --> 00:41:17.460
Cyan Cooper: Be the size and the colors that you've set

337
00:41:17.850 --> 00:41:20.190
Cyan Cooper: It also has a really cool thing called symbols.

338
00:41:20.250 --> 00:41:29.280
Cyan Cooper: So like this now bar, for example, it's a great example. Same with footers, things are using on every page you're able to just save that as what's called a symbol.

339
00:41:30.420 --> 00:41:33.510
Cyan Cooper: And we'll show you the one we've saved for our actual website.

340
00:41:33.750 --> 00:41:38.340
Cyan Cooper: And then you can just drag it onto every page. And if I ever want to make changes to this.

341
00:41:38.370 --> 00:41:40.200
Cyan Cooper: I can just change it on one page.

342
00:41:40.440 --> 00:41:47.070
Cyan Cooper: And it's going to display across every instance of this use across the whole site. So this is really great for repeat content.

343
00:41:47.460 --> 00:41:52.740
Cyan Cooper: And it's it's really handy to make sure that if you have something you're repeating on the website you

344
00:41:52.740 --> 00:41:55.320
Cyan Cooper: Don't have to go and change it in 10 different places. Yeah.

345
00:41:55.770 --> 00:42:05.610
Cyan Cooper: Yep. And then one last thing while we're in here you know everyone's on their phone nowadays. So web flow makes it really easy to look at different breakpoints.

346
00:42:06.000 --> 00:42:17.430
Cyan Cooper: And you know this breakpoint. The biggest break point is set to for a desktop, but you can go even you can add even larger breakpoints. If you'd like to. So, you know, this is for tablet.

347
00:42:17.970 --> 00:42:32.340
Cyan Cooper: This is for mobile landscape and for mobile portrait and, you know, obviously, this, this isn't centered this image, so then at each break point is then really easy to then go in and to tell it what type of

348
00:42:32.340 --> 00:42:33.600
Cyan Cooper: Behavior to have so

349
00:42:33.630 --> 00:42:39.060
Cyan Cooper: You know, I want it to be centered here on on the on the phone virgin and any changes that you make.

350
00:42:39.150 --> 00:42:40.860
Cyan Cooper: On any one of these breakpoints.

351
00:42:40.920 --> 00:42:42.180
Cyan Cooper: cascades down

352
00:42:42.390 --> 00:42:49.710
Cyan Cooper: But doesn't affect anything, any of the breakpoints above it. So it's really easy to design your desktop site, then go down to tablet.

353
00:42:49.770 --> 00:42:51.270
Cyan Cooper: Make the adjustments that you need.

354
00:42:51.330 --> 00:42:52.590
Cyan Cooper: It won't affect the desktop.

355
00:42:52.590 --> 00:42:53.850
Cyan Cooper: Site and then go down to

356
00:42:54.660 --> 00:42:56.400
Cyan Cooper: Mobile landscape, etc, etc.

357
00:42:57.930 --> 00:43:07.260
Cyan Cooper: Yeah, so how we how we doing so far. Any, any questions so far about about the interface of web flow and kind of how how it works.

358
00:43:09.360 --> 00:43:10.950
Cyan Cooper: Let's see the video.

359
00:43:13.620 --> 00:43:28.650
Joshua Mcquiston: So you mentioned being able to like use classes and share that those kind of configuration like across your website. Can you like export that and use it like on a completely different project easily or

360
00:43:28.860 --> 00:43:39.300
Cyan Cooper: Yeah, so, you know, that's one of our shortcuts for when we make websites. We have what are called UI kits and they will be you know areas that are

361
00:43:40.050 --> 00:43:50.910
Cyan Cooper: Kind of sections that are pre made, but they don't have a lot of designs with them, they're just they're just kind of the layout is all set up and we can copy those from one place and paste them into from one

362
00:43:51.510 --> 00:44:00.240
Cyan Cooper: From from the final project, project that they're in. Put them in another project and then either use those classes that it comes with or change the class names.

363
00:44:00.780 --> 00:44:11.670
Cyan Cooper: To whatever it just paste your classes, though. So we built out we have projects that we use is kind of like UI kit or just kind of a hub for things we've built that we want to copy and paste in other projects.

364
00:44:12.240 --> 00:44:23.790
Cyan Cooper: I'm just a disclaimers unknowns. Its appointed though we have a team account because we have so many projects. If you're using a free web flow account. You are limited to two projects on it. You can only have two websites running at a time.

365
00:44:24.390 --> 00:44:32.700
Cyan Cooper: Um, but yeah, that's definitely something to do is copy and pasting and it does bring those classes from one project to another, which is really nice, good question. Josh,

366
00:44:34.230 --> 00:44:48.780
Cyan Cooper: And so I'm going to jump into another thing about web flow that I think makes it so powerful and that's talking about what they call the CMS or another term for it is collections and these are

367
00:44:49.710 --> 00:44:55.050
Cyan Cooper: Groupings of information that you're going to use that you build custom for your website and

368
00:44:55.380 --> 00:45:06.900
Cyan Cooper: It makes it so you can really easily design with this information and change it, which will show you. It also makes it really easy to host a lot of information and

369
00:45:07.230 --> 00:45:16.680
Cyan Cooper: Have a similar type. So one of the most popular common examples of this is a block. So if you have a CMS and you have actually

370
00:45:17.100 --> 00:45:25.800
Cyan Cooper: One. First, if you have a CMS and you want to do a blog. This is a really common use. And we're actually going to jump over here and show you. This is a website, we built for

371
00:45:26.250 --> 00:45:35.370
Cyan Cooper: Somebody that has a automotive business so they sell new and used cars and on their homepage. They highlight

372
00:45:35.820 --> 00:45:52.410
Cyan Cooper: Four of their used vehicles that are for sale that they want to highlight and then they have a whole inventory page where they display all of their different used vehicles and that that they have available on the line in real time. And so I'm going to jump in here and show you

373
00:45:55.980 --> 00:46:06.900
Cyan Cooper: So we built the first step is you build out the collection and what you do is you choose which fields you want your collection to have. So what kind of information and you have a ton of different options available to you.

374
00:46:07.410 --> 00:46:14.760
Cyan Cooper: So you can have text, you can have rich text, images, videos, links email addresses contact information, basically.

375
00:46:15.420 --> 00:46:23.490
Cyan Cooper: You can even have color fields. This is helpful for designing so like in one of the blogs, we built. Each category has a little badge on it. It's a

376
00:46:23.880 --> 00:46:28.950
Cyan Cooper: The colors associated with the category of that post and it pulls it from this field.

377
00:46:29.580 --> 00:46:41.340
Cyan Cooper: You can have drop downs files and then you can even reference other collection list. So for a blog might have another list of categories, you might have another list of tasks.

378
00:46:41.580 --> 00:46:48.810
Cyan Cooper: And for the one blog post, you're able to click a single reference one category and then a multi reference click all the tags associated with that.

379
00:46:49.950 --> 00:46:59.460
Cyan Cooper: Um, so this is good. So then you can come over here and you can see all of the different entries into this CMS.

380
00:46:59.820 --> 00:47:12.480
Cyan Cooper: And when you go to add one, it's essentially as simple as filling out a form to add more information to your website. And so I actually went in here earlier because he has a new car. He sent us and entered all the information in

381
00:47:12.900 --> 00:47:19.590
Cyan Cooper: Um, I was able to. So we have a multi reference field we picked out the features of this car we put in the images.

382
00:47:20.610 --> 00:47:27.990
Cyan Cooper: And I want to give you a preview. Because what flow actually has two interfaces. So what we're looking at is what's called the designer and when you're building the site.

383
00:47:28.800 --> 00:47:37.890
Cyan Cooper: That's, that's what you're working in one of the amazing things about workflow is it has what's called the editor and this is for people on your team. You want to collaborate on the website.

384
00:47:38.310 --> 00:47:52.470
Cyan Cooper: And don't want to give them the possibility of breaking your website or messing it up in any way, shape, or form. It's but it allows them to update it. It's really nice. And so I'm going to just pop over there and show you what this looks like from that interface.

385
00:47:55.110 --> 00:48:01.080
Cyan Cooper: Um, and so, oh, you haven't said it. Sorry. You have to turn off your

386
00:48:02.850 --> 00:48:05.880
Cyan Cooper: Your cookie blocker for marketers who don't let anyone market. Yeah.

387
00:48:13.860 --> 00:48:20.940
Cyan Cooper: And this is really handy if you have members on your team, or if you're making a website for a client who's not particularly tech savvy.

388
00:48:21.150 --> 00:48:33.270
Cyan Cooper: You can give them access to the editor like this and then they'll, they'll be able to go and make their own updates and yeah and that's one of the things that we think makes web flow, a great fit for nonprofits and small groups is

389
00:48:34.170 --> 00:48:43.500
Cyan Cooper: I hate when I hear of an organization that pays a ton of money to make a website and they aren't able to update it because they don't know how or they're afraid of breaking it where they don't have money to

390
00:48:43.980 --> 00:48:46.080
Cyan Cooper: Pay a developer to go in and make changes.

391
00:48:46.830 --> 00:48:57.480
Cyan Cooper: I like that web flow has the ability to update some basic content with the editor and it's simple enough that if you even want to learn and the designer to make changes, you can feel confident to do that.

392
00:48:58.350 --> 00:49:03.930
Cyan Cooper: So this would be something you gave someone on your team. If you want them to be able to go in and make small updates.

393
00:49:04.500 --> 00:49:10.170
Cyan Cooper: Or you want them to be able to manage those those different collections. So you come down here and you've got collections.

394
00:49:10.470 --> 00:49:15.240
Cyan Cooper: So these are those features for the vehicle, if I wanted to add a new one. They're all in here.

395
00:49:15.600 --> 00:49:24.060
Cyan Cooper: And then I can see the vehicles and so again it's really as simple as coming in here and I'm filling out a form and putting all that information in here.

396
00:49:24.900 --> 00:49:37.680
Cyan Cooper: And you can then save it and you can schedule it you can save it as a draft. You can schedule this. So, for a lot of people who have blog posts or use this for events. Maybe they want to wait till a specific day for the event to go on the site.

397
00:49:38.070 --> 00:49:44.550
Cyan Cooper: You can schedule a day in time for that to automatically publish itself, or you can go ahead and you can just publish it.

398
00:49:45.510 --> 00:49:58.860
Cyan Cooper: And so once we publish it's published and then you can see if we go back. First, go to the, oh yeah, it says it's published and so then if we come back here and we look at the live site, we go back to the homepage.

399
00:50:00.150 --> 00:50:08.220
Cyan Cooper: We should see that new white vehicle is now listed and it's got our top for that we've told that these are the four most recent vehicles that have gone up for sale.

400
00:50:08.760 --> 00:50:18.210
Cyan Cooper: And so it doesn't mess with the design, but it'll pop that information in how how you've told it with its logic on the site. Wherever you pulled it to be.

401
00:50:19.290 --> 00:50:24.330
Cyan Cooper: Yeah, so as design as the designer. We go in good to

402
00:50:25.560 --> 00:50:32.100
Cyan Cooper: We go in and we we set all this up so that it displays a certain way, you know, we designed this so that these will display this way.

403
00:50:32.400 --> 00:50:45.600
Cyan Cooper: And then the owner of the company just needs to come in to the editor like this, fill out a form for all the required information hit publish and automatically shows up at the, you know, in whatever spot we we tell it to show up.

404
00:50:46.200 --> 00:50:57.420
Cyan Cooper: perfectly designed so that's pretty cool, you know, not only in our circumstances marketers, but also for people, you know, if you have a lot of events, for example, that you that you regularly cut out

405
00:50:57.660 --> 00:51:06.780
Cyan Cooper: You could have your team just go into the editor fill out all the required information for the new event can publish and automatically updates on your site perfectly designed

406
00:51:10.140 --> 00:51:12.180
Cyan Cooper: Another example of this.

407
00:51:13.200 --> 00:51:14.310
Cyan Cooper: Is

408
00:51:18.330 --> 00:51:19.170
Cyan Cooper: Your questions.

409
00:51:20.760 --> 00:51:36.090
Cyan Cooper: So you can export the code of the website and you can host it on another platform. I'm not sure about wicks or Google Sites specifically. But if you can import the code onto onto those platforms. I'm sure you'd be able to, because you can export the code of the project.

410
00:51:36.630 --> 00:51:41.370
Cyan Cooper: And then for for you know HTML and CSS some element.

411
00:51:42.750 --> 00:51:49.710
Cyan Cooper: You know, you're always able to come in here and see, you know, how it's how it's structured and if you want to

412
00:51:50.640 --> 00:51:56.370
Cyan Cooper: You know, apply something to just one page. You can you can go into

413
00:51:56.880 --> 00:52:06.480
Cyan Cooper: That page go into the settings for that page, and then you have access to, you know, the header tag and the body tags or you can put any custom code that will then be reflected on that page.

414
00:52:06.720 --> 00:52:17.220
Cyan Cooper: And then you can also do that at the project level. If you want something to apply to your entire site. And then if you just have like a widget or something. That's the HTML and CSS that you want to

415
00:52:17.880 --> 00:52:24.690
Cyan Cooper: That you want to apply that's still an end but we actually have one on. Here's an example. So, oops.

416
00:52:26.070 --> 00:52:43.800
Cyan Cooper: So we put an embed code in here somewhere for all of the titles show up. Yep. So we just have an embed element here. It's got our code and it's telling it to have all of our titles display with a gradient tax so you can pop them on this on the page at any point

417
00:52:46.110 --> 00:52:46.920
Cyan Cooper: Great questions.

418
00:52:48.360 --> 00:52:53.190
Cyan Cooper: Another one to show you just kind of with that editor view for your team.

419
00:52:55.410 --> 00:52:56.760
Cyan Cooper: will touch on price so far.

420
00:53:19.800 --> 00:53:32.250
Cyan Cooper: So another example of using those collections on this. This one has a blog. They also have a podcast where they come in here and they're able to enter in their different podcast episodes.

421
00:53:34.260 --> 00:53:45.450
Cyan Cooper: Your podcast. And then also, in addition to entering you know information in your collections. It makes making small changes on your site's

422
00:53:45.870 --> 00:53:58.620
Cyan Cooper: Really easy through this editor feature. So it makes the site essentially editable as if it was kind of like a document. So you can see this, I can come in and replace this image here, and I could come in here and I could change.

423
00:53:58.620 --> 00:53:59.550
Cyan Cooper: The text.

424
00:54:00.000 --> 00:54:09.270
Cyan Cooper: And it allows you to down here, I can come in here and I want to change this button, I can edit it's linked settings or edit the text.

425
00:54:09.900 --> 00:54:20.100
Cyan Cooper: So it makes making changes directly on the site really quick and easy through the editor. And then it also has one of the features I wanted to share in here.

426
00:54:20.940 --> 00:54:33.540
Cyan Cooper: Is it we put a rich text field in here. So these are often used for for blogs where you can change in here. If I wanted to put um, you can see I have an embedded element. And I've been bedded a podcast player for that episode.

427
00:54:34.110 --> 00:54:46.440
Cyan Cooper: And you can also put in text, images, it gives a really dynamic field for somebody to come in here and enter a lot of information and have control over how it displays without needing to go into that designer view to make changes.

428
00:54:48.630 --> 00:54:59.790
Cyan Cooper: So how are you checking out, man. All right, or I will follow will catch you later you shoot us shoot us a message through our site will will will get in touch and we can geek out about about web flow.

429
00:55:00.510 --> 00:55:04.860
Zohar Lindenbaum: Sounds awesome guys thank you so much. You're awesome. Your work is fantastic.

430
00:55:05.790 --> 00:55:10.590
Zohar Lindenbaum: I would love to connect with you guys. This is New York City here. I haven't had dinner. We're going to go

431
00:55:11.670 --> 00:55:12.300
Cyan Cooper: Get some grub.

432
00:55:13.110 --> 00:55:13.470
Zohar Lindenbaum: On

433
00:55:13.860 --> 00:55:14.340
Cyan Cooper: The care.

434
00:55:14.460 --> 00:55:15.390
Zohar Lindenbaum: Thank you. All right.

435
00:55:18.000 --> 00:55:21.960
Cyan Cooper: Um, let's see someone said, Do you want right out of Web flow.

436
00:55:23.580 --> 00:55:34.500
Cyan Cooper: And then how about security and backups to your land a web host. So yeah, we, we actually do host all of our sites with web flow. One of the things we like is there. Um, global CDN.

437
00:55:35.070 --> 00:55:36.600
Cyan Cooper: Makes it really fast.

438
00:55:36.960 --> 00:55:40.860
Cyan Cooper: And they actually offer a free SSL certificate

439
00:55:40.860 --> 00:55:41.280
Joshua Mcquiston: With

440
00:55:41.730 --> 00:55:53.730
Cyan Cooper: Their hosting plans. I know that hosting is more expensive with web flow than like a WordPress, but personally I think that the speed and security that web flow offers make makes it a no brainer. It also

441
00:55:54.300 --> 00:55:56.970
Cyan Cooper: Gives you access to things like this editor feature.

442
00:55:57.990 --> 00:55:58.620
Cyan Cooper: Which

443
00:55:58.680 --> 00:56:08.010
Cyan Cooper: Which our clients really love. So they're hosting for a site like this is it's $192 a year you pay upfront or $20 a month.

444
00:56:08.880 --> 00:56:24.600
Cyan Cooper: There are plans if you're just starting. And you can. You don't even mind using like a web flow sub domain, you can actually build and launch a website for free using web flow, but most people are going to go up to a hosting plan to to be able to connect a custom domain and

445
00:56:25.710 --> 00:56:31.170
Cyan Cooper: That is one of the things you'll hear and we're upfront about that with our clients is, this is not the cheapest hosting

446
00:56:32.010 --> 00:56:40.830
Cyan Cooper: A personally I think that what it offers in terms of speed and securities. It has backups. So every version of your website from every change you've made is available.

447
00:56:41.460 --> 00:56:55.200
Cyan Cooper: In your settings. So we can go in here and in your project settings. This is where you can add integrations with all your analytics tools. And one of the things that offers is you have a full history of your backup.

448
00:56:56.700 --> 00:57:00.960
Cyan Cooper: Since the complete history of your website, I believe, is what we haven't set for so

449
00:57:01.500 --> 00:57:09.780
Cyan Cooper: Um, it is really nice. It does have that option for you. And we do prefer web flow hosting some people do export it and hosted in other places.

450
00:57:10.170 --> 00:57:20.220
Cyan Cooper: Um, that's just not something that we've we've done or that we we recommend to our client. I mean, the amount, in my opinion, the amount of money that you save and we're going to talk about. We're gonna talk about this later.

451
00:57:21.780 --> 00:57:24.300
Cyan Cooper: But the amount of the amount of money that you that you save

452
00:57:24.990 --> 00:57:40.710
Cyan Cooper: Is it, like, what's your time worth, right, because if you if you export your, your site at to say WordPress every time you then want to make an update to it. You have to come into web flow make your changes export the code and then put it back in and put it into

453
00:57:41.970 --> 00:57:52.770
Cyan Cooper: Code and you're going to editing the code directly. And so it's a you know I it's I'll happily pay the extra you know five bucks a month or whatever to make that happen.

454
00:57:53.430 --> 00:58:03.390
Cyan Cooper: So yeah, it is it is a preference. It's definitely an option. Um, but we we have chose to host with web flow with all of our different clients so far. And they've been really happy with it.

455
00:58:04.890 --> 00:58:07.260
Cyan Cooper: Yeah. Yeah, I'm good questions.

456
00:58:08.310 --> 00:58:09.150
Cyan Cooper: Yeah, exactly.

457
00:58:10.440 --> 00:58:19.590
Cyan Cooper: And then one other thing I wanted to touch on that. Going back to the designing that is super cool about web flow is how easy it makes

458
00:58:21.180 --> 00:58:32.880
Cyan Cooper: Oh, let's see. We just how easy it makes it to add animations to things you love the animation, you know, so many websites that I go to today. They're so boring. They just sit there and I say this, but ours does that

459
00:58:33.600 --> 00:58:36.510
Cyan Cooper: We don't ask marketers to make their own when we, when we were there.

460
00:58:37.020 --> 00:58:44.190
Cyan Cooper: We haven't put nearly as much TLC into our website as we have other people's websites. But so, like, for example, say I wanted this heading to like

461
00:58:44.430 --> 00:58:59.970
Cyan Cooper: You know, fly in they have this cool tool that makes it so you can just say okay on this element when it scrolls interview I want it to slide in from the left and you know at once it's 20% of the way onto the page.

462
00:59:01.050 --> 00:59:05.280
Cyan Cooper: And so then, and then you just scroll down and boom, it pops in.

463
00:59:05.640 --> 00:59:20.610
Cyan Cooper: And you can create they have a tool to create custom animations and for people who have experienced with things like after effects or something like that. You can make some some really intricate animations that look amazing and are seamless. Yeah.

464
00:59:20.670 --> 00:59:25.680
Cyan Cooper: Yeah, I think the animations are one of the areas that really save you a ton of time.

465
00:59:25.860 --> 00:59:33.360
Cyan Cooper: We work with someone who's a developer and he is. He's been making websites forever, and he doesn't straight with code.

466
00:59:33.780 --> 00:59:45.630
Cyan Cooper: And the animations were one of the areas that he was like that saves a ton of time from having to code it. But for the lobby files. I think a great example is are you have some ways our editor page.

467
00:59:47.520 --> 01:00:00.570
Cyan Cooper: There on our web design page you know this this right here, this is a lot e file and you know when we're in the editor, the designer here, it doesn't show up. You can you can make it preview.

468
01:00:02.940 --> 01:00:13.050
Cyan Cooper: And it's, you know, anything you can create an after effects. You can then turn it into a Lottie file and upload it right here in the designer.

469
01:00:13.500 --> 01:00:21.930
Cyan Cooper: So, so, you know, the times quickly approaching where people have super like dynamic and incredible websites that have a lot going on.

470
01:00:22.740 --> 01:00:32.070
Cyan Cooper: This is, this is not our best creation, but this is an example of to two different Lottie files and accent. You know the background here and this little guy.

471
01:00:33.450 --> 01:00:36.360
Cyan Cooper: Pushing the box there should have made that

472
01:00:37.920 --> 01:00:53.550
Cyan Cooper: So, but anyways. We don't want to ramble any question. Yeah. Um, any keep keep the questions coming, you guys don't have to stay muted to if you want to unmute yourself and and chat with us. Let's, let's see here. Let's, let's do

473
01:00:55.920 --> 01:00:56.130
Cyan Cooper: It. Yeah.

474
01:00:56.190 --> 01:01:06.390
Joshua Mcquiston: What about like if you had a say like a database of information and I wanted to create some feature on my site that like search that database.

475
01:01:08.280 --> 01:01:10.050
Joshua Mcquiston: Is that something you could do.

476
01:01:10.440 --> 01:01:14.280
Cyan Cooper: So what would the database of information be for an example.

477
01:01:15.150 --> 01:01:20.550
Joshua Mcquiston: Oh, I don't know, say like a list of names and addresses and

478
01:01:22.920 --> 01:01:29.970
Joshua Mcquiston: I mean, say you wanted to be like part of the website with like something where you could like interact

479
01:01:30.150 --> 01:01:31.860
Joshua Mcquiston: You know, add to the database like

480
01:01:32.160 --> 01:01:38.610
Joshua Mcquiston: You know, if you have you in a box and like, oh, type your name here to get added to our email list.

481
01:01:38.700 --> 01:01:51.900
Cyan Cooper: Or something. Yeah. Yeah, we definitely have, um, so, so for something like that, it would be a simple form with an integration into your database. We do a lot of people have their email list for submitting forms.

482
01:01:52.710 --> 01:02:00.810
Cyan Cooper: A common use case for like a site searches and blogs. For most people, you know, if you want to search for information on a site, you can definitely do.

483
01:02:01.710 --> 01:02:09.060
Cyan Cooper: Searchable content in your site. And what's nice is you can exclude anything you want. So it does give you the ability to exclude things, um,

484
01:02:09.600 --> 01:02:16.830
Cyan Cooper: So yeah, you could definitely could set up those integrations on depending on the use case for for your database and what you're trying to do with it.

485
01:02:18.060 --> 01:02:24.750
Cyan Cooper: And then when it comes to custom code, you know, if you know how to do it, say in WordPress with custom code, you can do it and web flow.

486
01:02:25.320 --> 01:02:35.070
Cyan Cooper: The only things I've ever seen people say they're not able to do in web flow are things that simply aren't able to be done on pretty much any website like like integrating Salesforce.

487
01:02:36.930 --> 01:02:37.500
Cyan Cooper: Without

488
01:02:38.790 --> 01:02:52.170
Joshua Mcquiston: Saying I don't blog and WordPress and I have like all that content is stored in a database. And I wanted to just like migrated to a web flow site.

489
01:02:52.710 --> 01:02:54.990
Cyan Cooper: Oh yeah, I've done that was

490
01:02:55.350 --> 01:03:04.800
Cyan Cooper: Tricky. I've done that before. Yes. No, I actually moved one of our clients had like 900 blog posts and so we export it from WordPress and then

491
01:03:05.970 --> 01:03:17.520
Cyan Cooper: You can actually in your CMS. You can import documents. So like as long as I so I exported it and then I obviously set up all the columns. So the fields match. And then I imported it in here.

492
01:03:17.820 --> 01:03:24.780
Cyan Cooper: And I won't lie and say that it was perfect. There was an hit. Part of it was, it was really interesting. I'll say because

493
01:03:25.080 --> 01:03:32.850
Cyan Cooper: There were very specific date points where I think WordPress updates were built before that the information wasn't is pretty mad to do a lot more cleaning up

494
01:03:33.810 --> 01:03:43.620
Cyan Cooper: But it is very doable, to be able to export from from your WordPress site and then import it into your web flow site. I'm done. I've done that before.

495
01:03:46.680 --> 01:03:49.020
Cyan Cooper: Marcus I you unmuted yourself. Do you have a question.

496
01:03:54.870 --> 01:03:55.470
Cyan Cooper: No. Okay.

497
01:03:58.050 --> 01:04:01.140
Cyan Cooper: Any, any other questions from from the audience.

498
01:04:02.820 --> 01:04:04.080
Cyan Cooper: What do y'all think

499
01:04:06.630 --> 01:04:20.670
markdusseault: Well, I'm all new to this and it's one of the tools that I've been looking at. So it's, it's great to have somebody I've tried to do a few things. And it's great to just kind of see how simple it is. So I appreciate you guys doing this.

500
01:04:20.820 --> 01:04:22.170
Cyan Cooper: Nice. Oh, yeah, yeah.

501
01:04:22.500 --> 01:04:23.520
Joshua Mcquiston: And Mark, what

502
01:04:23.880 --> 01:04:30.960
Joshua Mcquiston: What sort of use case, or do you work for a nonprofit or what kind of websites do you build

503
01:04:31.530 --> 01:04:45.390
markdusseault: I mean in Victoria in Canada, and I work for a theater company. So we've been WordPress based for a long time. And we're just trying to figure out, certainly with all this covert stuff.

504
01:04:46.680 --> 01:04:54.420
markdusseault: Trying to get more people to contribute to what we do on the web. And I'm just kind of evaluating tools.

505
01:04:55.290 --> 01:05:03.720
Cyan Cooper: Cool. Nice. Nice. Yeah, we have a nonprofit. We built a site for and they definitely love the donation pop up. I think these

506
01:05:05.130 --> 01:05:11.340
Cyan Cooper: People, right, I forgot to say I'm but yeah it's really easy on one of the things I recommend

507
01:05:13.110 --> 01:05:15.360
Cyan Cooper: who's on the call are terrible with names, who

508
01:05:15.450 --> 01:05:25.830
Cyan Cooper: Left so heart. He said he said a great so there's a great community. So if you do want to give web flow a try. Um, we're, we love to talk about this, obviously we're geeks about Egypt us but

509
01:05:26.130 --> 01:05:33.000
Cyan Cooper: There's some great Facebook groups. You can join, um, they also have a really active forum and then they have

510
01:05:34.890 --> 01:05:42.630
Cyan Cooper: What flow University. I could see if I can type. Um, I would start here. This is what I

511
01:05:42.630 --> 01:05:46.050
Cyan Cooper: Did I personally came in here and took the web flow one on one. Crash Course

512
01:05:46.140 --> 01:05:51.120
Cyan Cooper: And then if I don't know how to do something I I'll just Google it. And I find that they have a great tutorial.

513
01:05:52.080 --> 01:06:03.240
Cyan Cooper: That teaches me and what I love. We, we appreciate. Anyone who values humor and so I love that all of their tutorials. They. They're so funny, they may get interesting. Even if you're doing something really kind of boring.

514
01:06:04.020 --> 01:06:09.810
Cyan Cooper: So they add a lot of character to it and they give a lot of resources for people to be able to set up their sites and

515
01:06:10.230 --> 01:06:13.740
Cyan Cooper: Ask them questions because they want people to be able to use this

516
01:06:13.800 --> 01:06:20.460
Cyan Cooper: And I forgot to mention earlier, I do believe that they offer a nonprofit discount. So reach out to them if you did want to purchase a hosting plan.

517
01:06:20.880 --> 01:06:29.400
Cyan Cooper: Um, I know in coven happened, they were doing a lot of discounts around that. So just always ask them and tell them what your organization is and then they may offer

518
01:06:30.420 --> 01:06:32.280
Cyan Cooper: A discount on their standard prices.

519
01:06:36.060 --> 01:06:37.470
markdusseault: That's perfect. Thank you.

520
01:06:37.830 --> 01:06:41.520
Cyan Cooper: And one other one of the other things, I'll say I recently ran into this

521
01:06:42.570 --> 01:06:49.860
Cyan Cooper: Is if you have a members only area of your site that can be one of the limitations, like you want people to log in, um,

522
01:06:50.460 --> 01:07:00.120
Cyan Cooper: Web flow natively does not do that. But there's another company that recently came out from people who are using web flow wanting to make sites with members only area called member stack.

523
01:07:00.630 --> 01:07:06.480
Cyan Cooper: And they built that company to integrate with web flow. And it's the same idea. It's a no code tool.

524
01:07:06.780 --> 01:07:17.100
Cyan Cooper: And they have built a very similar. They have a great day. Have a Slack channel you can join. They have a great community and it makes it really easy to build a website and then also to build a member only area.

525
01:07:17.730 --> 01:07:26.100
Cyan Cooper: If your site requires that kind of functionality, where you want people to be able to log in and see member only content, which I know is a growing thing in web design.

526
01:07:28.560 --> 01:07:33.750
Cyan Cooper: And workflow is likely going to be around for a long time. They just got a $73 million investment.

527
01:07:34.800 --> 01:07:45.000
Cyan Cooper: Which is sizable and they're in the process of knocking out their wish list. Yeah. From all from everything that all the features that their community wants from them.

528
01:07:46.440 --> 01:07:57.870
Cyan Cooper: And another thing we didn't touch a lot on it is the e commerce side of things, they definitely have e commerce functionality and integrations with things like Shopify and I remember all the other ones, but

529
01:07:58.530 --> 01:08:04.470
Cyan Cooper: If you have any comments on your website, you know, I would look into that as well. And I really liked we we

530
01:08:05.280 --> 01:08:08.250
Cyan Cooper: We did build an e commerce. Oh gosh, it's been a minute ago, and

531
01:08:08.700 --> 01:08:22.710
Cyan Cooper: Their, their emails and just the whole order management side of the website. I found it to be really beautiful really simple and our client loved that about it. So they definitely have that as well if that's something that falls under your wheelhouse or needs with a website.

532
01:08:25.140 --> 01:08:26.190
Cyan Cooper: Make sure we're not missing.

533
01:08:26.670 --> 01:08:33.780
Joshua Mcquiston: Have you guys had to contact them for like direct support and how they been about that.

534
01:08:35.730 --> 01:08:48.690
Cyan Cooper: Um, oh yes, I know what what flows support quite well. Um, they're, they're a great company they, I will say like full disclosure, they don't have like chat or phone call, which I'm always

535
01:08:49.530 --> 01:09:00.540
Cyan Cooper: Preferable to but they have a ticketing system through like Zendesk and so they they're really responsive. They're really great. They always try to help resolve it. But I found

536
01:09:01.260 --> 01:09:11.340
Cyan Cooper: Like, like I said, with the community. It tends to be faster for me to actually go into one of the Facebook groups or the forum and post something and there's so many people that are so active I tend to get a

537
01:09:11.970 --> 01:09:19.320
Cyan Cooper: Just a response right away from from people in those forums as well. Yeah, it has a very, very dedicated community of people

538
01:09:19.350 --> 01:09:20.100
Cyan Cooper: Who are

539
01:09:20.400 --> 01:09:22.350
Cyan Cooper: Much better with web flow than we are.

540
01:09:23.400 --> 01:09:36.150
Cyan Cooper: Who, who I've, I have yet. I think, I think I have yet to come across something where, like, I couldn't find the answer to it. Yeah, most of the time the only time I've had to reach out to support was for like a refund on something.

541
01:09:37.170 --> 01:09:45.270
Cyan Cooper: For hosting. But yeah, it's, it's now because I got to the forums. But yeah, the support is there for in a couple of different places.

542
01:09:46.860 --> 01:09:49.410
Cyan Cooper: I see another question mark you had asked about

543
01:09:51.570 --> 01:09:57.330
Cyan Cooper: The background video. Let me see if I can do this. I did not drink the beer to the

544
01:10:00.240 --> 01:10:00.930
Joshua Mcquiston: Gods.

545
01:10:01.110 --> 01:10:08.670
Cyan Cooper: To the demo gods, but let me try to move these things around and show you real quick. Yeah, it's super easy to add that, again, let's do it for

546
01:10:11.070 --> 01:10:18.720
Cyan Cooper: You. It's just an element. So you go a background video and you just drag and drop it, you can, you know,

547
01:10:18.750 --> 01:10:21.240
Cyan Cooper: It behaves as any other element in web flow, you can

548
01:10:21.270 --> 01:10:22.350
Cyan Cooper: set parameters.

549
01:10:24.150 --> 01:10:39.030
Cyan Cooper: Let's see. I just was bad. Was that mortgage. He's at i don't i just not it's not showing up. But yeah, and then it just takes a second it syncs with it. I think it has a limit of

550
01:10:39.540 --> 01:10:40.830
Cyan Cooper: 3030 megabytes.

551
01:10:42.120 --> 01:10:48.330
Cyan Cooper: Do you can opt in. You don't want anything larger than 30 megabytes on your site. But then, yeah, and it'll play seamlessly.

552
01:10:49.620 --> 01:10:57.120
Cyan Cooper: And then for other videos that aren't background. Do you, you can just set up with like a link to a Vimeo or YouTube or

553
01:10:57.180 --> 01:10:58.200
Marc Andreas Yao: Yes, I see.

554
01:10:58.560 --> 01:10:58.770
Yeah.

555
01:11:00.270 --> 01:11:03.360
Cyan Cooper: Yeah, that's a background video in this video. Yeah.

556
01:11:04.020 --> 01:11:16.410
Joshua Mcquiston: Do you, do you guys too much with in terms of like search engine optimization for your clients and this this have that kind of functionality like tags and stuff built in.

557
01:11:16.980 --> 01:11:25.410
Cyan Cooper: Yeah, that's, that's a great question. So a lot of. So yeah, like if you're using the headers and the paragraph, it's going to set all those tags for you automatically.

558
01:11:25.770 --> 01:11:39.660
Cyan Cooper: Um, it definitely tries to help you with optimizing your SEO. And what's nice is in the editor, the client has some some really easy controls as well for coming in and and doing if I could get. I click the right thing.

559
01:11:40.530 --> 01:11:49.980
Cyan Cooper: For any page. If you want to add all of your title and your meta description in your open graphs and exclude anything from from your site search and such as in here.

560
01:11:50.880 --> 01:11:59.970
Cyan Cooper: So you do have that capability as well. And you can update schema and any you know whatever whatever extent, you want to take your SEO to, you can do it.

561
01:12:00.930 --> 01:12:08.070
Cyan Cooper: And then for any of your images, obviously you can set all of your old texts and for all of your stuff. And what's nice is with your classes. I can help.

562
01:12:10.020 --> 01:12:15.630
Cyan Cooper: You're reusing images to set up with the class, it'll use that same data across the use of that image.

563
01:12:20.160 --> 01:12:21.270
Cyan Cooper: Great questions.

564
01:12:22.560 --> 01:12:31.650
Cyan Cooper: Cool. Well, so what's, what's the verdict from from people who sat through sat through our, our presentation I'm

565
01:12:35.190 --> 01:12:37.920
Cyan Cooper: trying it a thumbs up, thumbs up

566
01:12:38.550 --> 01:12:39.120
Cool.

567
01:12:41.100 --> 01:12:44.880
Joshua Mcquiston: A lot of when I'm built a number of Wordpress sites and

568
01:12:46.110 --> 01:12:50.940
Joshua Mcquiston: You know, had mixed results. And this seems like you'd probably be

569
01:12:52.500 --> 01:12:59.340
Joshua Mcquiston: I mean you can do with anything with WordPress, but it doesn't necessarily mean it's going to be easy to get there.

570
01:13:00.360 --> 01:13:06.390
Joshua Mcquiston: So this looks like it might be a little more slick little more, you know, kind of

571
01:13:07.560 --> 01:13:09.360
Joshua Mcquiston: Anyone can just jump in use it.

572
01:13:10.290 --> 01:13:10.710
Yeah.

573
01:13:11.790 --> 01:13:18.630
Cyan Cooper: Like, I think one of the differences is with WordPress, like you said, you can do anything you can get there. A lot of times that involves different plugins.

574
01:13:19.230 --> 01:13:26.340
Cyan Cooper: And so when I have to go into a new clients WordPress site and I'm trying to like figure out how its laid out. Sometimes it's a guessing game.

575
01:13:26.940 --> 01:13:40.890
Cyan Cooper: Plugin does what to get it where I need to go and I like to this is all just kind of contained in one place. Yeah, a metaphor. I've used to compare WordPress to web flow is WordPress is like Android and web flow is like is like Apple

576
01:13:41.610 --> 01:13:48.840
Cyan Cooper: Where now everything. It's all contained in one spot. You don't have to go and like find all these plugins and stuff to make it work. It just works.

577
01:13:49.620 --> 01:13:53.280
Joshua Mcquiston: Yeah, like WordPress. I mean, if you really want to get into. You have to code.

578
01:13:53.280 --> 01:13:56.670
Joshua Mcquiston: PHP, which is not a great fun.

579
01:13:57.930 --> 01:14:01.200
Joshua Mcquiston: No fun language to code. And I don't know.

580
01:14:02.640 --> 01:14:07.860
Joshua Mcquiston: If web flow really lets you get in there and like edit at that level.

581
01:14:09.510 --> 01:14:14.400
Joshua Mcquiston: You can do like some HTML and CSS, but like actual, like the coding

582
01:14:17.820 --> 01:14:19.740
Cyan Cooper: Like edit the code of the page.

583
01:14:19.830 --> 01:14:28.560
Cyan Cooper: Yeah, I'm, I'm not. I think you can you edit the code of the elements in here all we've ever needed. We haven't needed to

584
01:14:30.480 --> 01:14:40.230
Cyan Cooper: Element or that I've never needed to go and edit the code for an element because usually get them to display properly, you know, then do what you want.

585
01:14:40.860 --> 01:14:48.750
Cyan Cooper: I guess no. You know, all you need to do is add an embed like the example we showed with the gradient text, you know, web flow couldn't do that native that

586
01:14:48.990 --> 01:14:50.070
Joshua Mcquiston: You can edit like the actual

587
01:14:50.130 --> 01:14:50.820
Joshua Mcquiston: Text that it

588
01:14:51.570 --> 01:14:53.790
Cyan Cooper: Develops for the page, not sure if you can

589
01:14:53.820 --> 01:14:54.930
Cyan Cooper: Unless you export it of

590
01:14:54.930 --> 01:14:55.860
Cyan Cooper: Course, then you can add

591
01:14:57.840 --> 01:15:05.820
Cyan Cooper: Some Michael, thank you. Thank you very much. Nice. Thanks for hanging out and if anyone does have questions later, feel free to reach out to us. We're happy to chat with

592
01:15:05.820 --> 01:15:06.390
Cyan Cooper: Anyone

593
01:15:06.480 --> 01:15:07.680
Cyan Cooper: Um, any, any questions.

594
01:15:08.940 --> 01:15:16.470
Joshua Mcquiston: Cool. All right. Well, it looks like we're reaching the end of the hour. So like to, you know, wrap things up on time.

595
01:15:16.740 --> 01:15:17.970
Joshua Mcquiston: So really think

596
01:15:18.510 --> 01:15:24.900
Joshua Mcquiston: Big thanks to Stephanie and sign for presenting and seems like a lot of people really

597
01:15:25.350 --> 01:15:38.700
Joshua Mcquiston: Liked the presentation. So thanks for everyone for coming. And we do have the next event coming up. So it's always gonna be like the last Tuesday of the month, but you'll get emails from from me about that, but we have one

598
01:15:38.700 --> 01:15:40.440
Joshua Mcquiston: Coming up on data visualization

599
01:15:41.100 --> 01:15:48.480
Joshua Mcquiston: Um, so making the gym. Any last words at all for everyone. Or does anybody else have any last words, they want to say.

600
01:15:48.840 --> 01:15:50.640
Cyan Cooper: Last word I can type it in.

601
01:16:00.870 --> 01:16:07.950
Cyan Cooper: I'm here our emails for anyone that wants to reach out to us. Yeah. Free fielding, feel free to reach out anytime

602
01:16:09.120 --> 01:16:14.100
Joshua Mcquiston: Cool. All right. Well, thank you very much guys and hope everyone has a good night.

603
01:16:15.540 --> 01:16:17.370
Cyan Cooper: Have a wonderful evening. Bye, everyone.