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!
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: firstname.lastname@example.org or email@example.com
01:16:17 Marc Andreas Yao: okay thank you
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
00:18:58.950 --> 00:19:00.240
Joshua Mcquiston: event tonight. We have a
00:19:00.360 --> 00:19:06.270
Joshua Mcquiston: Free tool specific topic here with our presenters will introduce in just a moment.
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.
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.
00:19:27.060 --> 00:19:27.270
00:19:28.530 --> 00:19:30.840
Joshua Mcquiston: That you said good last done
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.
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.
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.
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.
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
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,
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
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.
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.
00:21:31.890 --> 00:21:33.420
Joshua Mcquiston: I can figure that out.
00:23:33.840 --> 00:23:38.940
Cyan Cooper: Well, so thank you everyone for attending. I think we have eight people altogether.
00:23:40.260 --> 00:23:42.510
Cyan Cooper: Very nice to meet you all. My name's
00:23:42.720 --> 00:23:49.080
Cyan Cooper: cyan and Stephanie. Stephanie where we founded a digital marketing agency here in
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
00:23:57.510 --> 00:24:01.890
Cyan Cooper: Our business has been making websites with a cool tool called workflow.
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.
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
00:24:33.240 --> 00:24:34.560
Cyan Cooper: Make websites and
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
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.
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.
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.
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.
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.
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
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
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.
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.
00:26:29.640 --> 00:26:32.460
Cyan Cooper: Without having a strong technical background.
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.
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.
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.
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
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.
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.
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.
00:27:47.520 --> 00:27:50.100
Cyan Cooper: Josh Wheaton, you're muted, man. We can we can
00:27:50.820 --> 00:27:54.270
Joshua Mcquiston: We can unmute themselves. And yeah, feel free to use the chat as well.
00:27:58.500 --> 00:28:00.600
Cyan Cooper: So yeah, please. At any point I'm
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,
00:28:12.660 --> 00:28:13.440
Cyan Cooper: So the red bubbles.
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
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
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.
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
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
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.
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
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.
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
00:29:46.440 --> 00:29:48.870
Cyan Cooper: Development level, I guess, a skill level so
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.
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.
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
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
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.
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.
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.
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.
00:31:07.890 --> 00:31:09.810
Cyan Cooper: Will definitely share that we'll get into that.
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.
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
00:31:28.410 --> 00:31:30.390
Cyan Cooper: Want a little bit more functionality.
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.
00:31:37.410 --> 00:31:38.580
Cyan Cooper: So there's a lot of people actually
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.
00:31:41.430 --> 00:31:43.230
Cyan Cooper: We'll jump into something like, well, that's a pretty
00:31:43.230 --> 00:31:43.950
Cyan Cooper: Standard
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
00:31:50.730 --> 00:31:51.960
Cyan Cooper: Bunch of templates available.
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.
00:32:00.180 --> 00:32:03.600
Cyan Cooper: So this is the the interface for web flow.
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
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.
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
00:32:34.560 --> 00:32:36.570
Cyan Cooper: Elements to build your, your website.
00:32:38.730 --> 00:32:40.140
Joshua Mcquiston: In the background and
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
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
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.
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.
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.
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.
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.
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.
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
00:34:11.220 --> 00:34:12.240
Cyan Cooper: To maybe see the nav bar.
00:34:14.130 --> 00:34:16.020
Cyan Cooper: No, it's not even somebody who's a shortcut here so
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
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.
00:34:41.880 --> 00:34:44.400
Cyan Cooper: Wide and it automatically add to that.
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
00:34:54.690 --> 00:34:55.860
Cyan Cooper: Able to then adjust
00:34:56.250 --> 00:34:58.830
Cyan Cooper: Precisely, like how much, how much padding, you want
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
00:35:09.420 --> 00:35:10.290
Let's make this white
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.
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.
00:35:34.890 --> 00:35:37.890
Cyan Cooper: And also make it so that if I change anything about that class.
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.
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
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.
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.
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.
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
00:36:43.500 --> 00:36:44.430
Joshua Mcquiston: People are reading
00:36:44.790 --> 00:36:45.960
Cyan Cooper: So looking good. Awesome.
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.
00:36:57.960 --> 00:36:58.440
Cyan Cooper: So,
00:36:59.790 --> 00:37:02.070
Cyan Cooper: You know, it's really easy to add a picture.
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.
00:37:16.890 --> 00:37:18.510
Cyan Cooper: And then inside of this
00:37:19.170 --> 00:37:20.760
Cyan Cooper: We need what's called the container.
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.
00:37:39.660 --> 00:37:45.660
Cyan Cooper: Center. This should. Why is this doing this behavior with 100%
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.
00:37:54.300 --> 00:37:56.370
Cyan Cooper: Am I know due to the section I thought
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
00:38:11.370 --> 00:38:13.830
Joshua Mcquiston: Make it a what sparks should do it.
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.
00:38:34.020 --> 00:38:35.880
Cyan Cooper: Say delete that. Now I got
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.
00:38:46.020 --> 00:38:48.870
Cyan Cooper: That also has a class for it. So I'll just type
00:38:49.890 --> 00:38:56.100
Cyan Cooper: Here row heading, boom, it automatically does it this is this is
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.
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
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.
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.
00:39:30.780 --> 00:39:34.500
Cyan Cooper: To the best company ever
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.
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
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.
00:40:06.570 --> 00:40:09.810
Cyan Cooper: Once you learn these tools which are accessible to anybody.
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.
00:40:25.800 --> 00:40:28.080
Cyan Cooper: I'm just to add a couple things onto there.
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.
00:40:36.300 --> 00:40:38.730
Cyan Cooper: The height and and all the
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.
00:40:54.390 --> 00:40:56.190
Cyan Cooper: And we set the default fonts.
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.
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
00:41:10.710 --> 00:41:15.030
Cyan Cooper: Your sizing and your colors. And when you're adding headings. The default will
00:41:15.060 --> 00:41:17.460
Cyan Cooper: Be the size and the colors that you've set
00:41:17.850 --> 00:41:20.190
Cyan Cooper: It also has a really cool thing called symbols.
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.
00:41:30.420 --> 00:41:33.510
Cyan Cooper: And we'll show you the one we've saved for our actual website.
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.
00:41:38.370 --> 00:41:40.200
Cyan Cooper: I can just change it on one page.
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.
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
00:41:52.740 --> 00:41:55.320
Cyan Cooper: Don't have to go and change it in 10 different places. Yeah.
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.
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.
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
00:42:32.340 --> 00:42:33.600
Cyan Cooper: Behavior to have so
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.
00:42:39.150 --> 00:42:40.860
Cyan Cooper: On any one of these breakpoints.
00:42:40.920 --> 00:42:42.180
Cyan Cooper: cascades down
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.
00:42:49.770 --> 00:42:51.270
Cyan Cooper: Make the adjustments that you need.
00:42:51.330 --> 00:42:52.590
Cyan Cooper: It won't affect the desktop.
00:42:52.590 --> 00:42:53.850
Cyan Cooper: Site and then go down to
00:42:54.660 --> 00:42:56.400
Cyan Cooper: Mobile landscape, etc, etc.
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.
00:43:09.360 --> 00:43:10.950
Cyan Cooper: Let's see the video.
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
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
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
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.
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.
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.
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,
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
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
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
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
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
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
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
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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
00:48:02.850 --> 00:48:05.880
Cyan Cooper: Your cookie blocker for marketers who don't let anyone market. Yeah.
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.
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
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
00:48:43.980 --> 00:48:46.080
Cyan Cooper: Pay a developer to go in and make changes.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
00:50:19.290 --> 00:50:24.330
Cyan Cooper: Yeah, so as design as the designer. We go in good to
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.
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.
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
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
00:51:10.140 --> 00:51:12.180
Cyan Cooper: Another example of this.
00:51:13.200 --> 00:51:14.310
Cyan Cooper: Is
00:51:18.330 --> 00:51:19.170
Cyan Cooper: Your questions.
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.
00:51:36.630 --> 00:51:41.370
Cyan Cooper: And then for for you know HTML and CSS some element.
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
00:51:50.640 --> 00:51:56.370
Cyan Cooper: You know, apply something to just one page. You can you can go into
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.
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
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.
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
00:52:46.110 --> 00:52:46.920
Cyan Cooper: Great questions.
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.
00:52:55.410 --> 00:52:56.760
Cyan Cooper: will touch on price so far.
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.
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
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.
00:53:58.620 --> 00:53:59.550
Cyan Cooper: The text.
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.
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.
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.
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.
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.
00:55:00.510 --> 00:55:04.860
Zohar Lindenbaum: Sounds awesome guys thank you so much. You're awesome. Your work is fantastic.
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
00:55:11.670 --> 00:55:12.300
Cyan Cooper: Get some grub.
00:55:13.110 --> 00:55:13.470
Zohar Lindenbaum: On
00:55:13.860 --> 00:55:14.340
Cyan Cooper: The care.
00:55:14.460 --> 00:55:15.390
Zohar Lindenbaum: Thank you. All right.
00:55:18.000 --> 00:55:21.960
Cyan Cooper: Um, let's see someone said, Do you want right out of Web flow.
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.
00:55:35.070 --> 00:55:36.600
Cyan Cooper: Makes it really fast.
00:55:36.960 --> 00:55:40.860
Cyan Cooper: And they actually offer a free SSL certificate
00:55:40.860 --> 00:55:41.280
Joshua Mcquiston: With
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
00:55:54.300 --> 00:55:56.970
Cyan Cooper: Gives you access to things like this editor feature.
00:55:57.990 --> 00:55:58.620
Cyan Cooper: Which
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.
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
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
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.
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.
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
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.
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.
00:57:21.780 --> 00:57:24.300
Cyan Cooper: But the amount of the amount of money that you that you save
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
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.
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.
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
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
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.
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
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.
00:59:01.050 --> 00:59:05.280
Cyan Cooper: And so then, and then you just scroll down and boom, it pops in.
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.
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.
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.
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.
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.
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.
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.
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.
01:00:33.450 --> 01:00:36.360
Cyan Cooper: Pushing the box there should have made that
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
01:00:55.920 --> 01:00:56.130
Cyan Cooper: It. Yeah.
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.
01:01:08.280 --> 01:01:10.050
Joshua Mcquiston: Is that something you could do.
01:01:10.440 --> 01:01:14.280
Cyan Cooper: So what would the database of information be for an example.
01:01:15.150 --> 01:01:20.550
Joshua Mcquiston: Oh, I don't know, say like a list of names and addresses and
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
01:01:30.150 --> 01:01:31.860
Joshua Mcquiston: You know, add to the database like
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.
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.
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.
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,
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.
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.
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.
01:02:36.930 --> 01:02:37.500
Cyan Cooper: Without
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.
01:02:52.710 --> 01:02:54.990
Cyan Cooper: Oh yeah, I've done that was
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
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.
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
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
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.
01:03:46.680 --> 01:03:49.020
Cyan Cooper: Marcus I you unmuted yourself. Do you have a question.
01:03:58.050 --> 01:04:01.140
Cyan Cooper: Any, any other questions from from the audience.
01:04:02.820 --> 01:04:04.080
Cyan Cooper: What do y'all think
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.
01:04:22.500 --> 01:04:23.520
Joshua Mcquiston: And Mark, what
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
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.
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.
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
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
01:05:13.110 --> 01:05:15.360
Cyan Cooper: who's on the call are terrible with names, who
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
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
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
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
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.
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.
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
01:06:10.230 --> 01:06:13.740
Cyan Cooper: Ask them questions because they want people to be able to use this
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.
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
01:06:30.420 --> 01:06:32.280
Cyan Cooper: A discount on their standard prices.
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
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,
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.
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.
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.
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.
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.
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.
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
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
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
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.
01:08:25.140 --> 01:08:26.190
Cyan Cooper: Make sure we're not missing.
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.
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
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
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
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
01:09:19.350 --> 01:09:20.100
Cyan Cooper: Who are
01:09:20.400 --> 01:09:22.350
Cyan Cooper: Much better with web flow than we are.
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.
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.
01:09:46.860 --> 01:09:49.410
Cyan Cooper: I see another question mark you had asked about
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
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
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,
01:10:18.750 --> 01:10:21.240
Cyan Cooper: It behaves as any other element in web flow, you can
01:10:21.270 --> 01:10:22.350
Cyan Cooper: set parameters.
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
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.
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
01:10:57.180 --> 01:10:58.200
Marc Andreas Yao: Yes, I see.
01:10:58.560 --> 01:10:58.770
01:11:00.270 --> 01:11:03.360
Cyan Cooper: Yeah, that's a background video in this video. Yeah.
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.
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.
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.
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.
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.
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.
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.
01:12:20.160 --> 01:12:21.270
Cyan Cooper: Great questions.
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
01:12:35.190 --> 01:12:37.920
Cyan Cooper: trying it a thumbs up, thumbs up
01:12:38.550 --> 01:12:39.120
01:12:41.100 --> 01:12:44.880
Joshua Mcquiston: A lot of when I'm built a number of Wordpress sites and
01:12:46.110 --> 01:12:50.940
Joshua Mcquiston: You know, had mixed results. And this seems like you'd probably be
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.
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
01:13:07.560 --> 01:13:09.360
Joshua Mcquiston: Anyone can just jump in use it.
01:13:10.290 --> 01:13:10.710
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.
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.
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
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.
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.
01:13:53.280 --> 01:13:56.670
Joshua Mcquiston: PHP, which is not a great fun.
01:13:57.930 --> 01:14:01.200
Joshua Mcquiston: No fun language to code. And I don't know.
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.
01:14:09.510 --> 01:14:14.400
Joshua Mcquiston: You can do like some HTML and CSS, but like actual, like the coding
01:14:17.820 --> 01:14:19.740
Cyan Cooper: Like edit the code of the page.
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
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.
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
01:14:48.990 --> 01:14:50.070
Joshua Mcquiston: You can edit like the actual
01:14:50.130 --> 01:14:50.820
Joshua Mcquiston: Text that it
01:14:51.570 --> 01:14:53.790
Cyan Cooper: Develops for the page, not sure if you can
01:14:53.820 --> 01:14:54.930
Cyan Cooper: Unless you export it of
01:14:54.930 --> 01:14:55.860
Cyan Cooper: Course, then you can add
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
01:15:06.480 --> 01:15:07.680
Cyan Cooper: Um, any, any questions.
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.
01:15:16.740 --> 01:15:17.970
Joshua Mcquiston: So really think
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
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
01:15:38.700 --> 01:15:40.440
Joshua Mcquiston: Coming up on data visualization
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.
01:15:48.840 --> 01:15:50.640
Cyan Cooper: Last word I can type it in.
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
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.
01:16:15.540 --> 01:16:17.370
Cyan Cooper: Have a wonderful evening. Bye, everyone.