Transform the Way Your Agency Designs with Wix

All right, we ready? Hey everybody, welcome. Welcome to our very special WIX Editor Workshop. Workshop. Today we're going to be talking about ways you can transform the way your agency designs with wix. Anton, are you with me?

Yes, I am.

I can't see you. Will you make your video?

There we go.

There's Anthony. Anthony's going to be joining us and telling us a lot about this. Before we get going, Anthony, tell us a little bit about you and what your role at WIX is.

Absolutely. So yeah, I'm actually head of training and development for partners. Previous to joining wix, I was a top performing partner in the WIX marketplace. Did a really good job building sites for tons of small businesses.

We have a lot of people from all over, so it's really great to see this many people participating and we have a lot of stuff to talk about. Anthony, there's a lot of participants, but in a nutshell, can you kind of go over what we should expect from this workshop and maybe some takeaways everyone should expect to sort of get from here?

Definitely. So I really want to dive into like the techniques for like using the WIX editor. Like this includes site colors, themed elements, best practices, as well as like using strips and grid lines to really just optimize that development time. Some really key takeaways for today are going to be just using strips, doing things that really just streamline your workflow and ultimately using WIX to again, just supercharge your business or your agency.

That's a lot. Where do we even start with that? And by the way, this is a live webinar. We're live, so if there are questions, please feel free to drop them. And towards the end we'll have a little bit of a Q and A as well. So Anthony, where do we start? What's a good place to start?

With this? Yes, I'm actually going to. You know, I know that we can all probably get a little bit of nature in our lives these days, so I'm going to start kind of just building a site, you know, around glamping, which is like a really nice outdoor activity involving like a luxury theme. I mean, I want to kind of just build out from scratch and just show everybody like some of the best practices, you know, again, when you're building a website on wix.

So you're going to make us a pretend, a fake glamping site and we're just going to kind of see how you work and we'll go over tips. That's great. So if we're Going to build a site. Where do we start? Where do we start?

Absolutely. So I mean you're going to start pretty much in the editor. I mean that's where everything really comes to life. As you can see, I have tons of sites right here where I've kind of started building things for tons of different purposes. I'm going to just create a new site from scratch actually. And we're going to just start off by clicking on the other option and we're going to just click on choose a template. As you can see here, there's just so many styles that you can take and choose from. Some of these have pre installed apps, some of them don't. But we're actually going to go up top and just click on blank template and we're going to start today building out from scratch using a blank canvas. And I'll click on edit and we'll jump right in again as you follow me, just focus on all the things I'm doing. It's going to really just help optimize your workflow and just streamline the entire process with development time. All right, I know some of you might have seen what that looks like, but I'm still gonna kind of run through some of the options that we have here. So over on the left you might notice that you have some options in the vertical menu here. So we have first off menus and pages. So I can add additional pages right to my site pretty easily. By clicking on Add right below that I have a place where I can change my background. In wix, a background could be a color, an image or a video. Right below that you're gonna have options. The add button is pretty much gonna be your best friend. Like no matter what you wanna add, it could be something simple like text or, or something more complex like an actual native app from the app market. You can add that right onto your canvas. Then down below you have the app market itself. So you'll find tons of WIX native apps as well as third party apps as well. Things that again will just really give your site some additional functionality.

So what are you looking at here? This is the ad app, correct?

Yeah. So this is the app market. So you'll actually be able to go in here. And if I'm looking for something cool, like today we're going to add some booking functionality. I can just click on bookings and just like that you can. I have tons of options here. Some of them are going to be third parties, some of them are going to be native WIX apps. Either Or I can add it to my site and get that immediate boost in functionality.

So if it's a WIX app, it's clear here, because I believe I see it says buy wix, right?

Exactly. Yeah.

Okay.

I only wanted to see apps that were by wix, which are the ones that we support the best and the most. You can click here and see all of the different verticals that we have. So whether it be you trying to get like an online store online in the form of like a restaurant, we have that you can. You got somebody trying to be up and become an artist. We got a music solution as well. So again, tons of different verticals here that you can just easily click and add. And just like that, your site becomes more dynamic. All right, down below, you also have some additional options here for media. We'll talk about this as we build, I mean, tons of sources. Whether it be media that you want to actually upload or whether it be from a source like Facebook or Instagram or Google Photos, we have that as well, as well as, like some free options from wix and Shutterstock options as well. And then down below, you'll see some of our top apps shortcuts. We have the blog, and we also have a shortcut to add booking capabilities as well. All right, up top, you're also going to notice that you have an option to switch over to the mobile. We're going to really dive into the mobile a lot. I know some of you have questions about how to really optimize your site the best with mobile in mind, and we're going to talk about that being that again, 80% of users are going to go to your site from a mobile device. Up top, you're going to see some options here as well. One of the things I want to highlight here are going to be the Get Feedback tool. We'll talk about this a little bit later on. We kind of dive into like the handoff process and how it works, but in a nutshell, kind of like getting feedback is going to be a really cool way to just get some feedback and some comments from any clients that you want to send that site out to. Once you're done in Settings, you'll find tons of really cool shortcuts. One thing I really like about the settings part is going to be the accessibility option, too. Keeping those sites accessible is a key thing as well as being able to go to your dashboard really quickly. But as you can see here, tons of options to explore underneath tools. We're going to be in here a lot Today, a really good fresh practice is to kind of use that toolbar. Like as you build, you'll notice that the toolbar is already enabled here on my right hand side. Options to copy, paste, duplicate, rotate, change the angle, resize elements more precisely than just a drag and drop feature. So really cool things that you can do here to again make things more precise. If you ever want to dive into buildings out some cool custom code, you have an option here by turning on dev mode. The really cool help section here will have some nice keyboard shortcuts for you if you want to. Again, just maybe make that process quicker as you build over on the right, you know, the option to undo, to redo, save, preview and then publish. So I know it seems like a lot, you know, there's lots. But as I build, you know, I'm going to kind of try my best to really explain how all this works, you know, so you'll have a really good understanding of the rich that are today.

Now, Anthony, it seems that you've, you've sort of given us a brief sort of overview of what we would find inside the editor. And I think this is, this is really fantastic. So if we're gonna build a site, what's the next? Where do we start?

Absolutely. So, I mean, I think in wix, like one of the things that we like to say is it always starts with a strip, right? Especially when using the classic editor that you see right here. So we're gonna talk about strips before I dive into that, you know, I really want to talk a little bit about the grid lines that you see. You know, when I first started using Wix, you know, 10 years ago and I built my first website, I would come in here and I would feel like I was limited to having to build within these like, you know, grid lines that are only about 980 pixels in width. And you know, I really want you guys to understand that we could really, you know, break outside that boundary. You know, we're not limited by the grid lines that you see here. And I'm going to show you how to do that. Before I do, just a quick overview of real quick.

Anthony, not everybody's connection may be perfect so that you may come in and out. So if you can just slow down just a touch, make sure everybody's connections caught up, because I want to make sure everybody can hear you clearly because this is, you know, incredibly good information.

You got it? All right, so we're going to start just kind of explaining the structure, you know, of what you see here. Today. So up top, you know, we have the header, Right. And then, of course, anything that you put in that header is going to be on every single page. Right. So just think, anytime I see orange grid lines, like, that's going to be sticky from page to page. Same for the header. Anything I put in the same for the footer. Anything I put in the footer, it's going to be on every single page. In between, we have the content area, and whatever I put within these blue lines are going to be pretty much only specific to that one page. Now, we do have options to go and just say, okay, for this page, maybe I don't want to have a header or a footer. And you would find that under Page settings, which you can go into Manage Pages and see an option pretty handy that you can easily kind of use to kind of toggle that layout, you know, to have no header or no footer. Okay. So that if you want to make, like a really nice landing page that kind of says internal, that's the way to do that. Okay. All right. But before I dive into the site again today, we're going to be building a site around glamping again. I think that we can all get a touch of nature, and this will be a good way to kind of teach you guys how to use WIX the best way.

I'm missing some nature right now.

I know, Me too. I've been stuck in. I want to get out.

Let's at least do it on a beautiful WIX page.

Let's do it. Okay. All right, so let's go over to that handy add button that I spoke about. We're going to start by just adding a strip. All right. Now, you'll notice that there's tons of different presets that you can choose from. You know, some of them are going to be with contact sections about sections for your team. But I want to teach you again how to build everything from scratch. You know, when I started building on wix, I was kind of intimidated to use it from scratch, but it's really nice and actually gives you more freedom to build whatever you want. So I'm going to click on Classic. I'm going to go down below where I see the two blank presets here, and I'm going to choose the black one. And we're going to fully customize it. Now, if I just click it, it'll just kind of add right to my canvas right away. Just keeping no space in between that header and that content area, which is. Is super cool. Now If I need a bigger edit, no problem. I just drag it down just like that, have a bigger section, and down below my foot is still in place. All right? So now the first thing I'll do is I'll just click on the strip. Now, I happen to know, like, how, you know how much of a big fold I want. So I'm actually gonna make this about, you know, 940 pixels in height. And I'm doing this again by the toolbar. And if you ever don't see the toolbar, then just go up top, click on Tools and enable it. It's that simple. So I'm gonna click back to my strip here, and what I'm gonna do first off is just kind of change the strip background out, you know, for an image. And by the way, again, this could be a color or a video, but I'm going to happen to add an image today. All right? I can get this from my site media or I can even upload it. So I'm actually going to upload it today just to show you how simple it is. Okay, Go right to my dashboard here, and I'm just going to pull in here. Cool one that I put together. I'll add that right on. Give that a couple seconds. And you know, again, these images can come from several sources, not just my computer. It could come from Facebook, Instagram, you know, the list goes on and just click on Upload media. You can see all the options right here. Again, so if a client likes to dump thousands of Google Drive for you, then we have that system for you to get those in really quick.

So from here you can connect to a Google Drive, is that correct?

Absolutely. As long as that folder is shared with you, you'll be able to access it. Absolutely.

So as a partner, I just want to make sure I understand this. As a partner, if a client gives me a link to their Google Drive, with all of their logos, maybe some proprietary photos or some special photos that they have, they can share a Google Drive and you can connect to it right there.

Exactly. That could also be Dropbox as well. So it's not limiting you to any one type of option. You know, we have clients come from different, you know, tech levels and backgrounds, and it's really cool to adapt to the way that they do things. And, you know, sometimes when especially closing a deal, that could be a deal breaker. Right. Like if you can't say, yeah, I'll take those images out of Google Drive, you might not get that project. So, you know, again, WIX is really adapting around what us partners need to really build efficiently.

Great, great.

So I'm going to click this image that I uploaded here, I'm going to change that background to my strip and just notice that again, it just takes up that whole entire strip from top to bottom. Now we're talking about again breaking those boundaries. And the reason why I chose this image is because you might notice that we do have grid lines that we still have to respect. And in any environment in wix, grid lines are something that you must not exceed. So it's very important to make sure that the image that you add is, you know, is again, you know, the primary content or the focal point of the image must remain inside of the grid lines no matter how you align it. So I'll give you an example. Let's say that, for example, you wanted to make sure that nothing appeared to be cut off right now. You might think by using this strip and by looking at it right now that, okay, something's going to be cut off. You know, this tent is going to be cut down the middle because of the grid line that cuts right through it. That's not accurate. What you can actually do is go into layout and just align this more to the left, right? So now what this means is that that 980 width that we were talking about in terms of the viewable area is now shifted to the left, which is meaning that everybody's going to see the content between the furthest point of the left and the right dotted grid line. Right? Now that could be very useful depending on what you're trying to build and know how to execute that.

Anthony, I want to stop you for two seconds. We're already getting a lot of questions and specifically there's two things. I think maybe there's a little buffer if we could slow down just a touch. And two, there were a lot of questions when you were pointing that you were importing a picture. Okay, there were a couple questions. One of the. And it's, it's about, it's about optimizing the images. So one question was, when you're using an external source such as Google Drive or Dropbox, and you import it into your site, does WIX optimize that image?

So automatically any image that you upload is already converted to a webp format. We also sometimes will optimize that image to, again, just make it more efficiently and load that a little bit better for speed purposes as well too. If the image is just too large, then of course we won't upload it because we do have a limit to the size of each image that you do upload, but we do our own optimization. You do upload that image as well. We won't ever compress it to a point where it won't be a good quality, but it may sometimes be a little bit adjusted, you know, for speed purposes in mind.

Perfect. Perfect. That was a. Several people asked that and I just wanted to throw that out there. So thank you. Let's continue. Sorry, that was just a great question for sure.

Like that's one of my biggest questions that I get from partners today as well. So I'm glad we're able to answer that. All right, so as you can see here, we have that image looking pretty nice in the strip. I'm going to probably want to put some text on here a little bit later on, so I'm thinking I might go ahead and just maybe change up, you know, some settings here. So I'm going to go in and I'm going to change the opacity and I'm actually gonna set this up to be a different tone. But actually none of these are the colors I actually want here. Because let's pretend that. Let's say your client says, look, I have an exact style guide that I want to use as I build. Right. What can you do? Well, you can go to any place where you can change the color. You can click on site colors and we can actually update these one by one. So I actually know like which ones I'm gonna use for today. So I'm just gonna put. And as you can see here, they just automatically kind of update super easily. So I'm gonna be using that one. I'm also gonna be using white and I'm also gonna be using like a really nice version of a charcoal gray. And the last green color is not a part of my palette, but I may use it at some point as an accent color for like maybe like a call to action button at some point. Alright, so now we have our colors set up. So let's talk a little bit about side colors and the importance of this and why it's such a big deal. The reason why, again, a client might first off, just say, here's my style guide. I need to use these colors. Like, don't go against them. Stick with my branding. First thing you do before you begin to design anything is make sure that you can go into your color section and you can find that by going over into background into color. And then under color you can find site colors. And the first thing to do is just again, update every single one that you see here to the colors that you're going to be using as you build the site. That will just keep everything super consistent and save you time so you won't have to actually go and physically change the color for every element. Should a client come back to you and say, look, I want to update this, this, and this. You can just update it in one place. And every element that was, let's say, chosen to be blue could be clicked on and edited. And I could change that to a different tunnel, as you've seen before. Again, just doing things like this really just speed up. Since I'm here, I'll just go again and reconfirm all the colors that I want to use today. And again, really simple process.

Can you only use five colors you can use more?

But again, these are the ones that are gonna be my most primary. A brand is most consistent. When you have, like five colors that you're using, you know, consistently, that keeps everything with a nice, you know, flow of continuity. You could use additional colors, but those would be down below in what we call the My color section.

All right, so that was a question from Bobby. So you can use more than those colors, but for your. For your site colors, it's five, correct?

Exactly. That is right.

Great question, great answer. Thanks, Anthony.

You got it. All right, so now we're going to continue here. I think I got enough colors that I want to be using for today, so I'm going to go ahead and click back on my strip here, change the background, and I'll just click on my settings, and I want to have the color behind the image actually be one of these grays that I actually set up here. So I'm going to click on that gray. And again, just notice how I'm clicking from the color palette, not from down below in my colors. All right. And I want the opacity on this one to be about 25. Okay. Now I can adjust this. Maybe I want it to be black. No problem. I can just go and I can change it. And as you can see, it just automatically adjusts pretty nicely. Okay. So I can play with it and kind of see what I think would be best for a nice text overlay. I think 40 might look pretty decent. And it's totally up to you. A strict design. All right. All right, so now I'm going to just kind of make some changes here. Again, I know I want my content that I'm going to add onto the strip to kind of be left aligned. So I'M going to click on my left alignment and I'm going to go ahead and start adding in some custom text here. And now we have all of these types of theme text. The goal here is to make sure that no matter what you add, you have the ability to again, just speed up the process and not have to physically change something every single time you want to add a new type of text, I'll click on my heading one and, and again my grid lines are telling me that I can put this content anywhere from the far left to the dotted line over on this side. So I'll just position that anywhere I want. I'll go into edit and I'm gonna make some changes. But I want you to kind of pay attention to this area right over here by the little eye. You're gonna notice how it changes and gives me an option as I start to customize it. So I know I want this to be a size 60 and perhaps the client told me, look, use my font that I'm always using, Play fair display. So I click on that and I want the color because I'm on this darker background to be white. And again I'm pulling that white directly from my site colors. Right? Once I do that, I'll go over and I'll save my theme. Alright. And now if you notice, I even delete this, you know, and say, great, I'll finish tomorrow. I'm tired for the day. I can go back, go back to add, back to text, back to heading. And now that text is exactly how I want it to be and it'll stay that way unless I change that theme again and update it. Alright, so I happen to actually know which content I want here, so I'm going to go and pull it from another source. So again I'm just going to do a quick copy paste and we'll be on our way. Right. So as you can see here, like it's pretty much the way I want it to be still within my grid lines. I got it looking pretty good. Okay. And now I know I'm gonna have some text that's gonna fall right beneath. So I'm gonna go back over to add to text and this time we're gonna grab a paragraph, right? And you have six different heading types and three different paragraph types. So I'm gonna grab my paragraph.

So here's a good question now. And I'm watching you design this and Carol brings up a good point. You're dragging things outside of the line. Is that gonna show for all views? Is this okay?

Absolutely. And the reason why is because I'm outside of the grid line of the canvas, but not in the strip. So again, everything that we do need to abide by the grid lines of the actual section that we're in, but not the entire page. So I'll show you an example right now you'll notice how when I click inside of the strip, the grid lines are shifting, right? Because the grid lines and strips override the grid lines of the overall canvas. So although I'm like clicking the text and you might see those grid lines here, when I click in the strip, you can see that my content is still within the grid lines within that strip, therefore I'm safe. Now, if I built the same thing this exact way without a strip, then I wouldn't be able to click on the parent of that section and see that it was a part of a strip that was left aligned. If that makes sense.

Okay, yeah, that makes a lot of sense. Thank you.

You got it. And just like I customized my heading one, I also customize my paragraph one as well. And when I say all these like themes, like paragraph one, heading one, I want to be very clear and let you know that, you know, these are not for SEO purposes, right? These are for theme purposes for the style of your site. Down below you'll find the heading tag section where you can actually alter how Google reads the content from hierarchy perspective, like H1, H2, H3, H4 and so forth. And then you can actually use any type of definition for any paragraph using the p. Right? So Ps, P1, P2, P3, all falls under the P hierarchy structure for SEO purposes. All right, so again, it's, you know, you update your theme for design and then you go down and you change your heading tag specific to SEO. Alright? And there we have that. And maybe I want to go and maybe add like a different type of element here. So maybe I'll go into decorative. I'll take a line, pop a line in, and again, as long as I stay within that grid line, I'm pretty good, right? And I want my site to be consistent. So again, I'm just going to pull, you know, I need to use my colors and my colors only. I'll use the lighter tone of the gray and boom. And just like that, you know, we have a really simple way to kind of build that, you know, first section out. I haven't touched my header yet, but we'll do that in a bit. But I'm just gonna keep on customizing things up. Now this is Totally up to you now in terms of design choice now, how you want things to look and how you want things to feel. All right, so next up, I'm gonna go in and just grab a button, third option down, I'm gonna use my theme button and you'll see why later on. And just notice how when I first looked at this section, buttons weren't gray. When I kind of updated my site colors and then chose the theme button, now it's gray. Right. So just notice how the colors that we set really just are pulled from any app that we add later on in the future, which you'll see today when I add bookings as well. Alright, so I'm just gonna resize my button here. I can do that manually and I could also go in and start to customize my design. Now it's very important that we set themes up and I'm gonna show you why. So here, if I go into text and I try to find, I can first off, try to play and say, okay, what size should I want? Which style do I want? But why should I do that when I already know, you know, the style guide that I have? So I can actually go into font or into theme, and I can actually go and find the one for paragraph one. It's gonna pull the exact same text that I used for the paragraph. And just like that, I'm just making sure I'm consistent. Right. Automatically. And next up, maybe my button needs to be a different color. Right. Because it is a call to action. So I'm gonna go in, I'll change that background color up and instead of it saying button, maybe we'll have it say get started. Right. And again, just make it a little bit bigger. And there we go. All right, so look at how simple that was to build out a section. And again, this is going to be a full width design. It's not going to really limit us to anything. We're going to be able to break outside those boundaries. People will see the content on the tablet and they will see it on the mobile and they will see it on the desktop. So I think that pretty much solves that.

So as you can see, that's really fantastic.

Yep. So as you can see, I was able to kind of like take a section from blank, customize it, build it the way I wanted it to be, customize it, set my themes up. And now when I want to use these same exact themes later on, different parts of my site, they're already there to choose from. There's no need to rebuild it. All over again and waste that unnecessary time, which, again, just goes back into productivity and you can monetize all your time. So keep your eye on that. So the next thing I'm going to do here is just maybe start to add a header. I want to give my header some life. I actually have a logo that I want to use, and I also know that I have some navigation I'm going to be wanting to implement today. So I'm going to go ahead first and just make sure that I make some space for the strip that I'm gonna actually put into my header. And I know that might sound crazy, but it's actually a really good practice to make things, again, full width. I don't wanna have a content area that's gonna be full width. And then my head is gonna be like this, right? So I wanna kind of again, continue that full width and that page hierarchy. So I'm gonna actually go over into add, and we're gonna add a strip again, and this time it'll be under the classic section, and we'll go under the white preset, and I'll just take that strip and I'll paste it right above. All right, it's not in my header just yet because again, you know, blue content area, orange header. So I'm gonna go in, I'll resize this. I'm gonna use my tools and my toolbar to make this a certain size. I think I want this to be maybe 125 pixels, you know, in height here. Right now, it's only gonna be one strip. I wanna make it a couple columns. So I'm gonna drag that into my header. All right? And I'm gonna close up the huge gap I have here. Now, I could just drag it, but if this was like a longer page and it took a long time to drag it, I could just zoom out. And when I zoom out, I get the option to delete that extra space. Okay. And everything below is just what's in my header that I can just pull up. See that simple. All right, so what I'm gonna do is go on my strip, I'm gonna go to Layouts, and I'm gonna add some columns here. All right? Not one, not two. We're gonna have three. All right, and next up, I'll just click and I'll change the proportions. All right, so I'm gonna have one furthest to the left. Be about 20. Take some time to get it. Sometimes it's like a game, Brett, trying to play around sometimes with this.

Yeah, it's like, it's like Frogger or something. So for everybody just tuning. For everybody watching and tuning in, what are you shaping here? Just so we know?

Yes. I'm actually making, like, the structure of my header.

Okay.

And although I could just be kind of like putting content in and say, okay, great, that's it. You know, that's not what's going to make people go, wow. When they see something that's going to make them go, okay, it's a website, but I'm trying to show you how to really build things, you know, from a more professional standpoint and again, get a result that you would get on platforms that you might be used to. Exactly. In wix, the same exact way, you know, and using the best practice, because we can always. The beauty of WIX is that you can do whatever you want. And I think that's also sometimes one of the biggest challenges. Right. Is that you can do so much, but we can do sometimes so much of the wrong things. So I'm here to really just show you, like, the best ways to, you know, accomplish all of the same results that you're looking to get. Yeah.

And there are some incredible. I mean, there's a lot of engagement right now from our amazing viewers. And for example, like Nate wants to know, would you recommend building a site entirely on strips, or is there a reason not to use them for all of your content? When would you use strips?

I mean, you would use strips whenever you want to basically be in control of every single piece and section of how your content is divided based on the fold. Right. So, and that's again, the best practice right now. You could add, for example, there's sites where maybe you just add the WIX Pro Gallery and you add an app and that's the website because the person's a photographer who wants to get booked for consultations. But if you're actually building out a nice site with like tons of design tricks, or you want to maybe add like a custom shape into a strip and change off the angle of the focal point, you might want to use a strip to be able to control and have more control over each exact section of the area. All right, so again, just as I build today, you'll start to see the benefits of using strips when we start to go into the mobile and you see the mobile optimization flow and the benefit of doing it versus just kind of putting content on the canvas, they're completely different things. So I'm sure you understand, as we go along today, more and more as to why we use Strips? Yeah, yeah.

Well, you know, I'm watching the chat, it's going pretty crazy. But Jonathan uses strips like crazy. So one more question about the strips. Are they more of a responsive element when you use a stroke?

Yes, they actually are a responsive element, you know, and wix, the platform today is identified as adaptive and the tools on the classic editor are adaptive, but we do have responsive elements that we introduced after the initial inception of the product to make it more responsive and to behave in a more, you know, adaptive manner.

That's great, man. We've got some fantastic questions. This is really, really. Let's keep going though. I know there's a lot more to cover. So we're writing all these questions. I'm trying to keep up with them, but. Yeah, sorry, Anthony. This is great.

All right, you do it. Let's do it. Alright, so cool. So I have this extra space here, so I want to explain, if you just come in now, what I just did. So I just built out a strip in my content area. In my header I put a strip that had three different sections and I'm going to customize each one of them. One with the logo, one with the menu, and one with some, you know, member login. Later on we add bookings. But first off, you might see this extra space here. It's intentional. And I, and I did it because I wanted to be able to customize what happens when I start to scroll down my page because I have the strip that's inside of my header and if I just kind of close this up then I wouldn't have the opportunity to kind of go in and to modify the settings of the header because I would be touching the strip because I would take up 100% of that area. So I've actually made that space because I wanted to go in and customize some settings within that header background. Okay, so let me just kind of go here and we'll just drag this down a bit. Right. So I want to kind of keep that about right here and in my header. I'll go ahead and just change up the settings here. I'll make it freeze right so that it was going to be frozen. And I'm also going to go in and change the design of my header, making it a color and making that color all white. You'll notice why I do it later on. And now I'll just close up the header here and there we have it, 1, 2, 3. And if I scroll when I preview, it sticks with me. Okay.

Wow.

Yeah. So what I'm gonna Do here is I'm gonna start customizing some stuff. So far though, on the right here, I'm just gonna change my common background to a color. I'll go with that tone in the center. I'll leave it blank. I want my navigation to be on a very clean design. All right. And then over here I'll just go ahead and I'll start to make some changes. So I'm gonna go in and add an image. All right. And actually again, I'm gonna drop this right in from my computer. I have a nice little logo I put together. As you can see. Super quick to get that uploaded, adding that to my page and just resizing that. I'm just dragging that in from the corner.

There are a lot of questions about will this be available offline. I believe it will. So it will be available.

Okay. You can see I got my logo positioned right there pretty nicely. All right, so let's talk about another tool. Let me go back into my toolbar here. I want to make sure that all my, you know, content is going to be aligned, you know, to the word, the logo, camp. So what I'll do is I'll go into tools. I'll click on snap to objects and just like that, I can make sure that the content knows linking up with camp right above it. So I can move it over. Now, I don't have to do this individually. I can also select multiple elements by holding shift and moving it over. Okay. And once I have everything set up, I wanted to even group these elements to move them all at once. I can do the same thing, just holding shift in and grouping them all together.

We have some great questions and some of these if we have. Tom Anthony, I would like to ask a favor. Towards the end, some of these questions that are partners are asking. Is it possible that maybe we can have a demonstration of some of these questions? Because I see a few that are really, really great. Would you be okay with that?

100%.

Okay, great. I think we should put some of those away towards the end. Sorry. Keep going. This is great though.

All right, you got it. Alright, so as you can see, my head is almost done. Only missing is some navigation here. So I can actually. Now what if I wanted to customize like the color of the background? I can do that too. I can go into change, make it a color and make it a little bit lighter. Easy, right? Totally up to you. Again, that's a design choice. I can kind of scroll and just like that makes something pretty nice. All right, now I want to show you something else too. So we broke the boundaries, we went outside of those grid lines that most people don't think we can do. And now what we can do is actually go in to the options here and just kind of set up margins. So if I wanted to make this 20 pixels, you know, from left to right, I'm kind of adding in that margin, not padding, but a margin. And then here I'll do the same, making that 20 pixels. And that just kind of just builds up a really nice, cool design from both sides. And we'll keep that consistent with every strip that we add. So again, back to that initial question that we got about strips. This is something that you couldn't do if you weren't using strips. You couldn't kind of break the boundary and then decide, okay, now where do I really want it to fall? On the left and to the right. So another reason of why we use strips. Okay, all right, I'm going to add another section here. And now we're going to just kind of go to add. I'm going to happen to add another strip here and I really want you guys to pay attention to what I'm doing here in this section. So I'm going to go to Classic, we'll pull in, you know, like a white one, have that fall right below. And now we have our second section here. Right. And now we're going to go into tools to bar and I'm going to make this say about 940 pixels in height. All right. And what I want to actually put here is a gallery. Alright. So I'm going to go to add, I'm going to go to gallery, I'm going to grab the WIX Pro gallery and we're going to put that right on the strip. Okay, that's all we need to do here. And now next I can make it full width. Right now this is again another example of another responsive element that we've introduced, you know, to the classic editor and making the site more adaptive. So I can go ahead and stretch that to full width and instead of changing the margin of like just this gallery. Right. I can also just keep it regular and then change the margin of the actual strip itself.

And you're, and you're saying this is going to sort of be, it's going to be more adaptive whether I'm on a small desktop or mobile or anything like that.

Exactly right.

That's really awesome.

And then just notice how when I kind of change the margin of the strip, the, you know, gallery itself also kind of changed as well. So, again, that's the reason why we use strips. You know, everything kind of inherits what you put inside of it, provided that you do it in this. In this order.

Well, it's a great question. And Tanja just actually asked a great question. Why? Why are you adding margin? Why? Why? What's the advantage of adding a margin here?

I mean, I want to do it as a design choice. Right. You might want to keep it full screen. I'm adding a margin because I did want it to have a little bit of white space, you know, but I didn't want it to be as narrow as the page structure. Right. Because this doesn't look that great as having it full width, you know. But I also did want to still take some advantage of, you know, having some white, you know, margin on the right and to the left of it. So again, I kind of went and I broke the boundary and then I told Wix, actually, I want to just give it 20 pixels instead of what you would have gave me if I didn't use a strip, you know, and that's the control that you happen to use a strip.

Awesome. That's great. That's a great question, Tanja. Thank you. And Anthony, thank you for grabbing that.

You got it. All right, so as you can see here, I'm going to go into manage my media and I'm going to just go ahead and select all of these and we'll delete them. And one key thing about the WIX Pro Gallery is that it's not only for images. You can also add, you know, text and you can also add video as well. So I'm going to click on Add media here.

Can you add SVG files?

You cannot add SVG files to a WIX Pro Gallery. You have to add the vector first and then replace the vector with your own svg.

So it's possible to do it, but that's the process, right? Because that was a question. I'm just curious.

Yep. Great. All right. And now here what I'll do is I'll just maybe type in. You know, I'm in now my unsplash option on the left hand side. I'm going to look at some grabbing.

By the way, Sean says he loves that he saw this. He wish he had seen it before. It took him forever to figure out the margin. So that little tip was really awesome. He said, thanks.

It took me a long time, too. It actually took me out of the 10 years I used WIX maybe a few to figure it out. So I'M glad I'm able to catch you guys first couple sites in.

Well, latoya's enjoying the webinar, and that makes me happy. So I'm glad. Latoya.

Awesome. All right. And as you can see, I just kind of replaced everything that I have. And while I'm doing this, I'll maybe even go into settings and I'll change up the style. So what's really awesome about the WIX Pro Gallery is that I can change the layouts pretty nicely here. I'm just going to go ahead and customize this. I think I want maybe four images per row. Not two, not three, but four. There we go. And again, look how just nice. It just sits on top of that strip. Super clean. I really can control everything I'm doing here. And again, this really makes for a really simple design structure. I'm going to actually use the drag handle, so this is again, very important. So I'm using the drag handle because I want to make space to put a title within this section. If I just drag this, it's gonna just overlap the strip, and that's not good. You see that? It's not gonna actually be on that strip.

Yeah, that doesn't look good.

Yeah, I'm gonna drag it, make that space on that strip. Now that space is still on that strip, and I can add, like, a cool title right here. All right, so that's why I'm gonna go back over and grab some text. All right, so now this is very important, too. This was my first heading that I added, right? It was a heading one. It was white. It was a size 60. It was the same font that I'm gonna be using today. However, I wouldn't have a secondary option because I know that for contrast purposes, I'm gonna want to have another version that's black, But I don't want to keep changing it to a different color every single time I add it. So I'm go over to add. I'm gonna go to text, and I'm gonna grab heading two. I'm gonna place it right on my strip. All right, And I'm gonna start customizing this again. But this time I think I want the color to be black for my site colors or even. Maybe even like a nice darker gray. Let's do that one. And I will change this up to the same font that I'm using before, and I will go ahead and save that. All right, now, just like that, every single time that I'm adding a heading to, it's going to pull this exact styling, which is going to be ideal for whenever I am using, like, a really nice white background. And then I can close it up. So I can just say we go. Another option can be the same thing if I wanted to add also, like some additional text right below it. Again, I can just click on it, drag. I'm gonna go over to add, and this time I'll go over into text. I'll pull in second paragraph type, I'll go in, customize this, change the size to about 20, change this to our bottle thin, and we'll go ahead and we'll save that theme. And boom, there we go. And I can pretty much customize that text whatever I want, change the size of the text box, drag it back up, I want some additional spaces. And there we go here. So again, super clean. The ability to kind of add these sections in really nicely and you get a really nice result, you know, when it's all done. All right, so I know, Brett, you might be getting some questions coming in. So, I mean, let me know whatever kind of questions that come in. I think this is kind of unreal.

There's a lot. There's a lot. And Daisy asked a good question, are all these features? And I answered it. But I'll ask it. Are all these features available for all sites, or are these what you're doing within the editor, locked to a specific premium? So, for example, if I'm making a new site for a potential client or a client, do I have to pay before I have these features, or are they all unlocked already?

No, absolutely. You can kind of go in and just start to build everything. I think that's another beautiful thing about wix is that if you go to, like, certain other platforms, you might have to kind of upgrade before you can even add a certain number of static pages. Right. But in wix, you can practically build out the entire site from A to Z. And the only time you would have to really upgrade is if you wanted to see some real payment take place, you know, or a transaction. So I think it's really beautiful that you can just kind of jump in and build whatever you want, you know, and again, limits, you know.

Sure. And I'll just grab one more. There's such great questions and comments, and there's a lot of people asking questions and other people are answering them. But Bobby asked a great question. What are the SEO implications with setting H2 versus H1? And Bobby, I'll answer your other question. Yes, you can import other fonts, but what's the implications between H1 and H2, Anthony.

It means your H1 is going to be your primary heading, right? Like the one that Google's going to look at as the most prominent. And then your H2 is going to be a supporting text to that H1. You can actually build out a hierarchy of up to, you know, H1 all the way up to down. Well, still up to a priority of H6. So you can actually build. If I go back into what I was showing earlier on, and I could go in here and just kind of put in again, H1 all the way down to age six. Right. Defining that priority is super, super important, Wix. And we make it simple to be able to do that.

It's a great answer. Thank you. And thank you for asking that, Bobby. Okay, go ahead, Anthony.

All right, here we go. So again, we got a beautiful gallery here. We got some dogs in the pictures. That's amazing. Always good to have that. So I'm going to go ahead and we're going to continue out, but this time I'm going to actually add some navigation because I want you to start seeing how this menu is going to form and everything starts to come together before I build out my last fold and then eventually my footer. So we're gonna start by going over to add. I'm gonna add a menu under menu, and we'll see that we have tons of options. And again, just notice how it kind of pulls in all of the exact same themes that you have from before. So I'm gonna pull that right into my header. Okay. And within my header, I have grid lines right for that center section. So I'm just gonna go ahead and just pop that in, making sure my content stays in place. And then now I want to make sure that my fonts are consistent so I can go into customize, I can go to text, I can pull in my theme text, and I'll use my paragraph one. Okay. And just like that, now my menu is starting to come to life almost. All right, the next thing I want to dive into. I know we had a question at some point about anchors and what they are, so I want to use them. So I want to go over into add in menu. I'll also find a section called anchors, and I'll be able to add in an anchor. I just drag it and drop it to the point of the page. Page in which I want the top of the folder rest on. Okay. And I'll rename this my gallery.

So, by the way, it took me forever to find that.

Oh, my God. I'm sorry.

No, no. And just seeing you do it, had I watched this before I started designing. Yeah, that would have saved me just like, just like with the other things we're talking about. That helps her. I wish I had seen this. It was, it was so easy once I knew where it was though. So that's an anchor. Do that one more time. We need to touch that one more time. Just for me, Anthony.

Alright, cool, I got it. So we went over to add. I went down to menu. Underneath all the menu options that you have, click on anchor and you just literally take the cool anchor and you just drag it and you place it wherever you want.

Easy peasy.

Then you rename it so you can easily identify what it is when you want to link it up, you know, super cool. So right now we got our first one and it's called Gallery. Now what if I wanted to actually make this a clickable link in the menu, I can just go, you know, over to manage pages. I'll click on, add a link and I'm going to say that on my homepage I have an anchor and the anchor is called Gallery and I want to add that. And once I do, you'll see new link pop up. I'll say Gallery. I'll click on done. And now, boom, there it is. Super simple. All right, first done. All right. And now one other really cool tool as well. Like you saw me kind of build out everything on the strip today, but if you also like start to build the same design over and over and you started building it over and over, you can actually start to save these designs. So anything I build is as simple as just doing a right click, clicking on save to my designs and I could just say, cool, welcome strip. And now my next site, if somebody wants a similar style, Cool. I have a welcome strip saved in my designs. What I'm going to show you with a second. All right, and now the last thing I'm going to add is going to be my contact section. So if I go over to add really easy, I go to my designs and look at that. I got my welcome strip here. I got some other stuff that I fooled around with and I have a really nice, cool contact section that I'm going to use today for the graphing website. So I'm going to click it and just like that. And we'll be able to add it directly to our page and then further customize it, you know, once we get everything imported in. So again, just really speeds up the development time, you know, really, again Just adds things that allows you to, you know, just build a little bit quicker. And just like that, I get it onto my page, I customize it, I drag it to keep everything kind of underneath it. And just like that, super simple.

Kirby has a great point here talking about this is a great feature to save your design as a template. Great idea. Great, great, great idea.

In addition to, while we're on that topic, I mean, you could also kind of like copy one page to another site. You can also copy an entire element from one site to another too. But if you wanted to save and practically just design, you know, 20 or different, you know, 20 or 30 different styles, so strips, you can do that and then easily just import them and build out sites that are still custom, you know, but are very specific to the way that you build with your theme that you like to build with. So I think it's really important to be able to, you know, showcase that, you know, and build it really efficiently.

Very good.

So as you can see here, I just saved myself some time. I even pulled in the margins as well on this particular fold here. And I'm gonna go in now and just maybe add a cool contact form. So I'm gonna go over to add. I'll find contact in the forms and I'm gonna take my contact form here and I'll drag that right onto my shirt and put that right beneath my title. Okay, so look how easy all of that was. Like, it didn't take as much time to really get into this and just start customizing it if I wanted to then center out, you know, this contact box, I go into tools, I click on the toolbar and I could then center everything up really nicely. Now, of course, you might notice that this is not my styling that I'm keeping. So I'll just go in, I'll click on edit and I'll be able to just kind of find the theme that I want to use for each of those sections. So for this one, it'll be my heading one which I can go and I can modify easily. And as you can see here, it just changes everything up pretty nicely. But I'm going to go ahead and just kind of just play around with this. I'll customize it and then I also want to kind of show you some things that you can do in forms as well. But let's first go into design and just get this, you know, looking like the rest of the site. Alright, so first I'll go into text. I'll scroll down to my placeholder text And I'll use my theme that I'm using from my paragraph one, and I'll put that right in place. Next, I already have a button that I've been using, and I want to be consistent with that. So I'll go ahead and I'll use that button as well. And just like that, we've customized it. Maybe I want to have success text. I can show you some other options as well, but I'll put my success text when the message gets submitted right below and perhaps even sent to that, as well as within the text box. And my submit button will kind of be right here. All right, so now let's talk a little bit about the things that you can do on the form itself. So the first thing is I can go into my layouts, and I can make sure that I'm choosing a layout to be either one column or two columns. I'll keep it on one column and maybe even add some spacing in pixels between each one. Or I can keep it back to two up to you, and then also control the space in between the columns here as well. So maybe I'll make that 10. All right, and now we start to have, like, a really nice section. Another trick, too, is if I wanted to also make sure that, you know, the horizontal spacing was also the same or the vertical spacing, I could also just kind of, like, center it right underneath what I want. I can do shift one of my keyboard shortcuts, click down once, and that's 10 pixels that I move down. So now I know it's 10 pixels between and also between each row. So, again, super cool stuff that you can do here.

Now, that's a neat tip. I didn't know that, and it probably would have taken me another six years to figure it out. Say that one more time.

Yep. So if you want to just click any element, you ever have, like, several things on a page, and you want it to be the exact same amount of distance from one another, you can just kind of click it, hit shift down. And every time you do that in any direction, it actually moves it.

So you click it, you're holding the shift key, and you're pressing up and down exactly. By default, that's 10 pixels exactly.

Awesome.

That's probably another nugget of gold there.

Yeah. You also have options to kind of distribute elements evenly over here as well. So if you, like, grab a ton of buttons and you want them to be, again, the same amount of distance between each other, you can also do that as well. Using the toolbar which I'm happy to show. As you can see here, tons of options. Like I can literally dive into this all day. I mean options are endless with any feature enriched that you really want to customize. I want to highlight some of the things here that I know, Brett, you might have known or not maybe I don't know. So you can kind of click on recommended. Tons of different fields that you can add in. Most of them are pretty simple in this category. Text is also pretty straightforward here.

Good question. Before we jump, I have two follow ups to that neat trick you just told us about. The shift button. Is it always set to 10 pixels or can I go in and change my default?

It is always set to 10 pixels.

Okay. Is it the same on Mac and PC?

Correct.

Okay, so that was a great answer for Eric and Daisy. Awesome. Thanks Anthony.

You got it. Alright, so as you can see, I'm just kind of going through all the different types of fields that you can add into a form. We kind of built into the recommended ones and now we're going into the number option which is simple as that a number selection types. You have radio buttons, checkboxes, multi checkbox fields, dropdowns, rating fields, subscriber opt ins which are great for like GDPR purposes, especially in Europe. Down below you also have date and time upload buttons which are super important. Maybe you want to make a form that people can submit their content to. You can do that as well. You can also go in and add an opt in as well here and a recaptcha. Recently on my personal website I was getting tons of spam. I added this recaptcha which is a free feature and immediately got less responses from people who didn't really need my business or my help. So things that you can do just to kind of like again, just, you know, save yourself some time and prevent some angry emails from clients.

We don't, we don't like those.

All right. And then the very last option here, which I think is probably the most cool feature about the form, is the signature field. So I can practically have somebody make a really cool like signature option or it's just the possibilities with this form builder is like endless. Like I can do a lot of things, you know, build the way I want it to be, make it the way I want it to look. And as you can see, it doesn't take very long to get it customized and looking the right way.

So I want to add one, I want to touch on something and if you go back to adding something to that Form. I see this a lot from. From our partners and specifically in our. In our community. The recaptcha. Okay, this is. I see a lot of questions where people see or receive space from their forms. For those who don't know, Anthony, what is the recaptcha? And show us again how to get to it and why would we turn this on? I think. I think that's worth mentioning.

So the recaptcha is actually a tool that's basically making sure it's analyzing your ip, actually, and also kind of looking at your actions that you take and making sure you're not a robot. So, like, things that could, like, spark you as a person who's not a human could be, like multiple failed attempts, you know, you know, not using actual keyboard in the US like, things like that based on your geographical location control, like whether you're gonna get authenticated or reject it. Right. So the way we add it in is we pretty much just click on forms as a whole. We click on add a new field, we go down to recaptcha, and we just click add. I mean, it's that simple, and we now have it.

Yeah, that's great. And I think this is this day and age, probably a must.

Definitely, definitely. This is super, super important. I mean, I know some people might be like, oh, I don't want to click the car a thousand times. It happens to me. I even get it wrong a lot. But it saves the spam, you know.

Oh, absolutely.

Super cool stuff. All right, so again, we kind of sat here today, and we kind of built out, like, you know, three holes of a site, and I wanted to kind of show you also something pretty cool, too. So up top, I kind of went and I set up, you know, a header earlier using three different strips. Right. Or three different columns in a strip. So what I want to do is kind of like, just show you how I can take the same. Same design and apply it to the footer by just a quick duplicate, which you can do by hitting on controller command D. Once you have it duplicated, we'll grab it. Hold on one second. All right. And I'm just going to drag it literally down. There's a couple options to do this. I could also kind of go into zoom out and reorder and also decide to move it down because it's a little bit smaller. It's on top of the strip. I'm using this option. I'm going to drag it down because I want to have that same exact, you know, design over in my footer and I'll just go ahead and move that to the footer. And just like that, that same designs in my footer. Now, once it is, I can go in, I can manage it. And I could kind of move it over. Right. And I'll move this one over as well. All right. So now I just kind of flip the order and the positioning of it, you know, just like that. We have the same type of mirrored navigation between both the header and the footer. All right. And I'll do my last anchor here. For those who are just joining in, I'm going to also just add this last piece when.