Transform the Way Your Agency Designs with Wix

all right we're ready hey everybody welcome welcome to our very special Wix editor workshop workshop today we're gonna be talking about ways you can transform the way your agency designs with Wix anthing 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 gonna be joining us and telling us a lot about this before we could go and Anthony uh tell us a little bit about you and and what your role at Wix is absolutely so yeah I'm actually ahead 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 with 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 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 like using the Wix editor like this includes site colors theme elements you know best practices as well as like using strips and gridlines to really just optimize that development time some really key takeaways for today you're gonna be just using strips you know doing things that really just scream line your workflow and ultimately using Wix to again just supercharge your business 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 if there are questions please feel free to drop them and towards the end we'll have a little bit of a QA as well so Anthony where do we start what's a good place to start with this yes I'm actually gonna you know I know that we can all probably get a little bit of nature in our lives these days so I'm gonna start kind of just building a site you know around glamping which is like a really nice outdoor activity involving like the 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 your website on race so you're gonna make us a a pretend a big glamping site and we're just going to kind of see how you work so and we'll go over tips that's great so if we're gonna build a site where do we start where do we start absolutely so I mean you're gonna start pretty much you know in the editor I mean that's where you know everything really comes to life I'm as you can see it apt tons of sites you know right here where I kind of started building you know things with tons of different purposes um I'm gonna just create a new site from scratch actually and we're gonna just start off by clicking on the other option and we're gonna just click on choose a template and as you can see here there's just so many styles that you can take and choose from you know some of these have you know pre-installed apps some of them don't but we're actually gonna go up top and just click on blank template and we're gonna start today building out from scratches and ablate canvas and I'll click on edit and we'll jump right in and again like as you followed me just kind of focus on all the things I'm doing this again it's gonna really just help you know optimize your work for them to streamline the entire process of development time alright I know some of you might have seen what that it looks like but I'm still gonna kind of run through some of the options that we have here so over on the left um you might notice that you have some options in the vertical menu here so we have first off music engages 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 and Wix that background could be a color and 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 want to add it could be something simple like text 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 you know third-party apps as well things that again will just really give you a cite 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 actually be able to go in here and if I'm looking for something cool like today we're gonna add some looking functionality I can just click on bookings and just like that you know I have tons of options here some of them are gonna be 3rd parties some of them are gonna be a native Wix apps either or I can add it to my site and get that immediate you know boost and functionality so if it's a Wix app it's it's clear here's because but because I believe I see it says by Wix right exactly yeah ok ok I only wanted to see apps that were by Wix which is the ones that we support the best and the most you can't but you can see all of the different verticals that we have so whether it be you trying to get like an online store online you know on the forms like a restaurant we have that you got somebody trying to be a becoming artist we got a music solution as well so again tons of different you know you can just easily click an ad and just like that it said becomes my dynamic alright down below you also have some additional options here for media and we'll talk about this as we build I mean tons of sources whether it be you know a media that you want to actually upload or whether it be you know from a source like Facebook Instagram and Google photos we have that as well as well as like some free options from Wix and shutterstock options as well alright and then down below you'll see some of our top apps shortcuts we have the blog and we also have a shortcut you know 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 gonna really dive into the mobile I know some of you have questions about you know how to really optimize your site the best you know with Mobile in mind and we're going to talk about that you know being that again 80% of users are gonna go you know to your site from a mobile device I'm up top you're gonna see some options here as well one of the things I want to highlight here gonna be the gift feedback tool I will 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 about getting feedback is gonna 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 I mean settings upon tons of really cool shortcuts one thing I really like about the settings part is gonna be the accessibility option to you 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 gonna be in here a lot today are really good breast pads is to kind of use that tool bar like as you build you'll notice that the tool bars already enabled here on my right hand side options to copy/paste duplicate you know rotate change the angle resize elements more precisely then just a drag-and-drop feature so really cool things that you can do it again make things more precise you ever wanted add-in to you know Billy's got some cool custom code you have an option here on 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 reduce a preview and then publish all right so I know it seemed like a lot you know there's lots but as I build you know I'm gonna kind of try to my best to it really explain how all this works you know so you'll have a really good understanding of its editor today now Anthony it seems that you've you've sort of given us a brief sort overview of what we would find inside of the editor and I think this is this is really fantastic so if we're gonna build the site what's the next where do we start absolutely so I mean I thinking Wix like one of the things that we like to say is it always starts with a strip right especially when using the classic either that you see right here so we're gonna talk about strips before I dive into that and 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 ten years ago and I built my first website I would come in here and I would feel like I was limited to you know having to build with the needs like you know grid lines that only about 980 pixels and 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 realize that you see here I'm gonna show you how to do that before I do just a quick overview 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 incredibly good information you got it all right so we're gonna 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 gonna be on every single page right so just think anytime I see orange gridlines like that's gonna be sticky from page to page same for the header anything I put in there think of the footer in the up in the foot it's gonna be on every single page I'm in between we have the content area and whatever I put within these blue lines are gonna 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 footer and you would find that under paint settings which you can go into manage pages and see an option pretty handy that you can easily kind of use the kind of toggle that layout you know to have no header or no footer okay so that if you wanna make like a really nice landing page that kind of says into now that's the way to do that okay all right but before I dive into the site again today we're gonna be building a site around glamping again I think that we can all get a touch of nature and this would be a good way to kind of teach you guys how to use which 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 or do it okay all right so let's go over to that handy Add button that I spoke about and we're going to start by just adding a strip now you'll notice that there's tons of different presets that you can choose from you know some of them I gonna be with contact sections about sections for your team well I'm gonna 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 you know freedom to build whatever you want um so I'm gonna click on classic I'm gonna go down below why I see the two blank presets here and I'm gonna choose the black one and we're gonna fully customize it now I just click it it'll just kind of add right to them on canvas right away just you know keeping no space in between them that header in that content area which is super cool now I need a bigger edit and no problem I'll just drag it down just like that I have a bigger section alright and down below my foot is still in place alright 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 hole that one so I'm actually going to make this about you know nine hundred and forty pixels a night and I'm doing this again by the toolbar and if you ever don't see the toolbars then just go up top click on tools and enable it is that simple um 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 that again this could be a color or a video but I'm gonna happen to add an image today alright I can get this from my site media or I can even upload it so I'm actually gonna upload it today just so y'all simple it is okay go right to my dashboard I'm just gonna 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 folks on is click on upload media and you can see all the options right here again so if a client likes to dump thousand so Google Drive for you then we have that uh you know system for you to get those anyway so so from here you can connect to a Google Drive is that correct absolutely long as that folder shared with you you'll be able to access it so 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 I could also be Dropbox as well so it's not limiting you to any one type of option you know we have your clients come from different you know tech levels and backgrounds and it's really cool to that so the way that they do things and you know sometimes we especially closing until that could be a deal-breaker right like you can't say yeah I'll take those images out of Google Drive you might not get that project so you know again which is really adapting around like you know us partners need to really build efficiently all right great alright so I'm gonna click this image that I uploaded here I'm gonna change that background to my strip and just notice that again it just takes up that whole entire strip you know from top to bottom now we're talking about again breaking those boundaries and the reason why I chose this image is because you know you might notice that we didn't have grid lines that we have to respect right and in any environment in Wix red lines are something that you must not exceed so it's very important to make sure that the image that you add you know was 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 about using their stripping by looking at it right now that okay something's gonna be cut off you know this chance may 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 going to layout and just a line there's more to the left right so now what this means is that 980 you know with that we were talking about in terms of the viewable area is now shifted to the left which is meaning that everybody's gonna see the content between at the furthest point of the left and the right dotted good line right now that could be very useful you know depending on what you're trying to build Anthony execute that anything I want to stop you for two seconds there are we're already getting a lot of questions and we're specifically uh 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 just Wix optimize that image yes so automatically any image that you upload is already converted to a web people on that when we can we also sometimes will optimize that image to again just you know make it more efficiently and look that a little bit better you know for Speed purposes as well too the image is just too large and of course we want to upload it because we do have a limit to the size of each image that you do upload but we do our own you know optimization you do upload that image as well we won't ever like compress it to a point where it won't be like a good quality but it may sometimes be you know a little bit you know adjusted you know for Speed purposes in mind perfect perfect that was a several people asked that and I just wanted to fill that out there so thank you let's continue sorry it was just a great question come for sure like that's one of my biggest questions that I get from partners today as well so I'm glad we able to answer that alright so as you can see here we have that image looking pretty nice in this trip I'm gonna 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 gonna go and I'm gonna 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 the 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 these in here 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 a sink color for like maybe like a call-to-action button at some point all right so now we have our color 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 love to say here is my style guide yeah I need to use these colors like don't go against them like 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 and to color and then under color you can find site colors are in 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 come back to you and say look I want to take this this and this you can just update it in one place and every element that was let's say you know chosen to be blue can be clicked on and edited and I could change that to a different tunnel and as you seen before alright so again just doing things like this really just speed up and since I'm here I'll just go again and we confirm all the colors that I want to use today and again we only can you only use five colors um you can use more but again these are the ones that are gonna be my most primary brand is most consistent when you have like five clothes 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 and what we call them might color section so so that was a question from Bobby so so you you can use more than those colors but for your for your for your site colors it's it's five correct exactly that is okay great question great answer thanks Anthony you got it alright alright so now we're gonna continue I think I got enough clothes that I want to be using for today so I'm gonna 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 the way these degrades that I actually set up here so I'm gonna click on that gray and again just notice how I'm clicking from the color palette not from down below in my colors alright and I want the opacity on this one to be about 25 ok 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 adjusted pretty nicely ok so I can play with it and I'm gonna see what I think would be the best way for a nice text overlay I think 40 might look pretty decent and it's totally up to you as strict as it was I'm sure all right all right so nominees just kind of make some changes yet um so again I'm not my content that I'm gonna add on to this trip to kind of be left aligned so I'm gonna click on my left alignment I'm gonna go ahead and start adding in some custom text here alright now we have all of these types of theme text right so the goal here is to make sure that you know no matter what you add you have the ability to kind of 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 right so I'll click on my heading 1 and again my grid lines are telling me that I can put this content anywhere from the far left to the dotter on this side alright so I'll just position that anywhere I want I'm going to 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 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 Playfair display so I click on that and I want the color because I'm on this target background to be white and again I'm playing that white directly from my site colors all 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 tied 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 all right so I happen to actually know you know which content I want here so I'm gonna go and pull it from another source so again I'm just gonna do a quick copy paste and we'll be on our way alright so as you can see here like it's pretty much the well going 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 something to 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 tubs so I'm gonna grab my diagraph so here's here's a good question now and I'm watching you design this and and Carol brings up a good point you 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 gridlines 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 gridlines of the overall canvas so although I'm like clicking the text and you might see those grid lines here when I click in this strip you can see that my content is still in 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 on the parent of that you know section and see that it was part of the strip that was left a lot if that makes sense then yeah that makes a lot of sense thank you you got it and just like I customized my heading 1 and also customized my paragraph 1 as well and when I'm saying all these like beams like paragraph 1 heading when 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 a heading tag section where you can actually alter you know how Gugu read the content you know from hierarchy perspective like h1 h2 h3 h4 and so forth and then you can actually use any type of definition for anything I graph using the P right so keys do you want B to be 3 all falls under the peak parking structure for SEO purposes all right so again it's you know get in for design and then you go down and you change your heading tag specific test yeah all right there we have that and maybe I want to go and maybe add like a different type of element here maybe I'm going to decorative I'll take a line upper line in and again 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 kind of cool you know I need to use my colors and my colors only values a lighter tone the gray and boom and just like that you know you 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 um but I'm just gonna keep on customizing things up now this is totally up to you now in terms of design choice you know how you want things to look at how you want things to feel all right so next up I'm gonna go in and just grab a button all right third option down I'm gonna use my beam button and you'll see why later on and just notice how when I first looked at this section buttons weren't Grabel and I kind of updated my site close and then chose the beam button now it's great right so just notice how the colors that we set really just are pulled from from any app that we added later on in the future which you'll see today when ad bookings as well all right 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 things up and I'm going to show you why so here by going to text and I try to find I can first don't try to play and say okay what slicer I want which style do I want but why should I do that when I already know you know the style guy that I have so I can actually go into font or engine team and I can actually and find the one from paragraph one there's gonna pull the exact same text that I use for the background and just like that I'm just making Shawn consistent all 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 it will have it's a good spot all right and again just make it a little bit bigger and there we go all right so look how simple that was to build out a section and again this is a gonna be a full lift you know design it's not going to really limit us to anything we're gonna be able to bring up those boundaries people will see the content on the tablet maybe we'll see it on a mobile and they will sit on the desktop so I think that pretty much solves that job that's really fantastic yep you know so as you can see I was able to kind of like take you know a section you know from blank you know customize it build the wetland it's repeating customize they set my ends up and now when I want to use these same exact games 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 you know which again just goes back into productivity and you can monetize all your time so you know keep your eye on that all right so the next thing I'm gonna do here is just maybe start to add a header I want to give my header some life I'm actually have a logo that I want to use and I also know that I have some navigation I'm gonna be one to implement today so I'm gonna go ahead first and just make sure that I make some space for this trip though I'm gonna actually put into my head and I know that might sound crazy but it's actually a really good practice to make things again full width I don't want to have a no content area that's gonna be full width and then my header is going to be like this right so I kind of again continue that at full width and that page hearty so I'm gonna actually go over into ad and we're gonna add a strip again and this time it'll be under the plastic 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 head and just yet because again you know blue content area orange better so I'm gonna go in I'll resize this I'm gonna use my tools in my tool bar 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 want to make it a couple columns so I'm gonna drag that into my all right 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 with jagged I could just zoom out and when i zoom I get the option to delete that extra space yeah 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 not 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 right trying to play around sometimes with this thing yeah it's like it's like Frogger or something so so for it already just to new everybody watching in to tuning in what are you shaping here just so we know yes I'm actually making like the structure of my header okay you know and although I could just be kind of like putting you know content in and saying okay great that's it you know that's not what's gonna make people go WOW when they see something that's gonna make them 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 which the same exact way you know and using the best practice because we can always the beauty of which 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 compla Saul of it the same results that you look really gonna get yeah and and there are some in credit I mean there's a lot of engagement right now from 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 and 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 their sites where maybe you just add the Wix flow gallery and you add an app and that's the website because the person is 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 so you want to maybe add like a custom shape and to strip and change off the angle of the focal point you might want to use this trick 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 and 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 candidates they're complete different things so I'm sure you understand as we go along today more and more in still our use terms yeah yeah well you know I'm watching the chat it's going pretty crazy but but Jonathan uses strips like like crazy so one more question about the strips are they are they more of a response to the element when you use a strap yes they actually are responsive element you know and wicks the platform today is identified as adaptive I mean the tools on the classic editor are adaptive but we do have responsibilities they'll be introduced after the initial inception of the product to make it more responsive and to behave in a more you know adaptive meant 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 how you doing all right 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 gonna customize each one of them one with the logo one with the menu and one with some you know maybe member login later on we add bookings but first off he makes his extra space here it's intentional 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 I just kind of closed this up then I wouldn't have the opportunity to kind of go in and to modify the settings of the header because I'll you touching this trip because I'll take up a hundred percent 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 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 Hills gonna be frozen and I'm also gonna go and change the design of my headed making it a color and making that color all-white you'll notice fly deer later on I announced close up the editor and then we have it on two three and if I scroll when I preview it sticks with me okay Wow yeah so what I'm gonna do here is I'm going to start customizing some stuff so far though and on the right here I'm just gonna change my common background into a color I'll go with that tone and the center I'll leave it blank I want my navigation of doing a very clean design all right and then over here I'll just go ahead and not start to make some changes so I'm gonna go in and add image alright and actually again I'm gonna jump drop this writing for my computer I have a nice little oh got put together as you can see super quick to get that uploaded adding that to my page and just resizing that and I'm just dragging that in from the corner there are a lot of questions about will this be available offline I I believe it will so it will be available okay you can see I got my logo positions right there pretty nicely alright so let's talk about another tool let me go back into my tool bar here I want to make sure that all my you know content he's gonna 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 it 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 then you 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 that are our 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 wondered was that okay great I think we should put some of those away towards the end sorry going this is great though oh you got it alright so as you can see my hip is almost done the only thing missing is some navigation here so I can actually now what if I wanted to customize like the color you know the background I can do that too I can go into change make it a color and make it a little bit like that easy right totally up to you again that's a design choice alright I can kind of scroll and just like that make some pretty nice alright now I want to show you something else too so we broke the boundaries and 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 you know to the options here and just kind of set up margin so 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 I just kind of just builds up not really nice cool design from 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 you couldn't do if you want to use in strips you couldn't kind of break the boundary and then decide okay now what do I really want it to fall on the left to the right so another reason of why we use strips okay all right I'm gonna add another section here and now we're gonna just kind of go to add I'm gonna happen to add another strip here and I'm really want you guys to pay attention to what I'm doing here in this section so I'm gonna go to classic we'll pull in you know like a white one have that full ride to load and now we have our second section here right and now we're gonna go into tools toolbar and I'm gonna make this let's say about a mile hundred and forty pixels at night all right and what I want to actually put here as a gallery alright so I'm gonna go to add I'm gonna go gallery I'm gonna grab the Wix pro gallery and we're gonna put that right on the strip okay that's all we need to do here and now next I can make it forward alright 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 your and you're saying this is going to sort of be it's gonna be more adaptive whether I'm on a small desktop or mobile or anything like that exactly great that's really awesome yep 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 squeezes what volume you strips and everything kind of inherits what you put inside of it provided that you doing this in this order well that's a great question and tangent just actually asked a great question why why are you adding margin 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 its full width you know but I also did want to still take some advantage of you know having some like no 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 absolutely I'm gonna just give it 20 pixels instead of what you would it gave me a better user strip you know and that's the control that you have any user strip awesome that's great that's a great question to answer thank you and Auntie thank you for grabbing that we got it alright so as you can see here I'm gonna go into manage my media and I'm gonna 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 gonna click on add media here and you can you add SVG files or you cannot add SVG files to a little gallery you would 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 cuz that was a question which curious rip yep great all right and now here what I'll do is I'll just made me type in you know I'm in now my unsplash option on the left hand side I'm gonna look at laughing by the way Sean says he he loves that he saw this he wish he had seen it before it took him forever to figure out the the margin so that little tip was really awesome he said he danced it took me a long time to it actually took me out of the ten years I used which maybe is to figure it out so I'm glad on that I'm glad I'm able to catch you guys first couple sites in well Latoya is enjoying the webinar and that makes me happy so I'm glad Latoya alright as kind of a place in everything they're havin but I'm doing this I'll maybe even go into settings and I'll I'll change up the style so what's really awesome about the wix4 gallery is that I can change the layouts pretty nicely here I'm just gonna go ahead and customize this I think I want every four images per row not two not three before there we go and again you look how just nice just sits on top of that you know strip right like super clean I really can control everything I'm doing here and again it really makes for really simple you know design structure all right I'm gonna 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 in this section I just drag this it's gonna just overlap this trip 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 alright so that's what 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 form that I'm gonna be using today however I wouldn't have a secondary option because I know that the 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 gonna go over to add I'm gonna go to text and I'm gonna grab a heading two I'm gonna place it right on my trip alright and I'm gonna start customizing this again but this time I think I know I want the color to be black for my side colors or even maybe even like a nice dark granite 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 alright now just like that every single time that I'm heading to was gonna pull this exact styling which is gonna be idea for that body I'm using like a really nice white background alright then I can close it up alright so I can just say glamping and there we go alright another option could 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 running 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 or above a pin and we'll go ahead and we'll save that theme and boom there we go alright and I can move pretty much best among that text whatever I want you know change the size of the text box drag it back up I want some additional spaces alright and there we go here so you're getting super clean you know the ability to kind of add these sections in nicely and you get a really nice result you know what it's all done alright so I know great you might be getting some persons coming in so I mean let me know you know whatever kind of questions that come in I think this is oh there's a lot there's a lot and and Daisy asks a good question for all these features and I answer it but I'll Alaska tour all these features available for all sites or these but you're doing it in 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 are they all unlocked already no no actually you can kind of go in and just start to build everything I think well that's another beautiful thing about which is that you know if you go to like you know certain other platforms you might have to you know kind of upgrade before you can even add a certain number of static pages right but in which you can privately build out the entire site you know from A to Z and the only time you're gonna have to really up it is if you wanted to see some real ami take place you know or a transaction so I think it's really beautiful that you can just kind of could jump in and build whatever you want you know I'm and again minutes yeah sure and 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 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't import other fonts but but what's the implications between h1 and h2 antony it means h1 is gonna be your primary heading right like the one that Google's gonna look at the most prominent and then your h2 is gonna be a supporting text of that h1 you can actually build out a hierarchy of up to you know h1 all the way up to download or still up to a priority of eight-six 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 eight-six right just finding that priority is super super important tricks 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 ante all right there we go so you gotta do for gallery here we got some dogs and pictures that's amazing always good at that so I'm gonna go ahead and we're gonna continue out but this time I'm gonna actually add some navigation cuz I want you to start seeing how this menus gonna 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 act I'm gonna add a menu under the menu I'm gonna 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 headed okay and in my header I have a good 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 when I make sure that my fonts are consistent so I can go into customize I'm I can go to text I can pull in my in text and I'll use my paragraph one okay and just like that and on my menu they're starting to come to life almost alright 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 and to add in menu I'll also find the section called anchors and I'll be able to be at in an anchor I just drag it and drop it to the point of the page in which I want the top of the call to 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 good that would have saved me so just like just like with the other things we're talking about that that helps her I wish I had seen this it was so easy once anywhere it was though so an anchor do that one more time we need to touch that one more time for me Anthony I feel like I remember to add um I went down to menu I underneath all the menu options that you have click on anchor and you just literally take the quake and you just drag it we place it wherever you want easy peasy rename it so you can easily identify what it is when you want to link it up you know super cool I'm 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 that comes dope you know over to manage pages I'll click on add a link and I'm gonna say that on my home page I have an anchor and the angle 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 alright first book there you guys OH done alright and now one other really cool tool as well like you saw me kind of build out you know everything on the trip today but if you also like start to build the same design over and over and you just write a billion over and over you can actually like start to save these designs so anything I build is as simple as just doing a right click you know clicking on safe to my designs and I could just say you know who welcomes trip right and now my next site if somebody wants a similar style oh I have a welcome strip saved in my designs what I'm going to show you what that second alright 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 full context section that I'm going to use today for the glamping website so I'm gonna 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 I'm 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 no super simple and 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 you know one page to another site you can also copy you know an entire element from one site to another too but if you wanted to sit and privately just design you know 20 are different you know 20 or 30 different mix dowels or strips you can do that and then easily support them and build out sites that are still custom you know but I'm very specific to the way that you build with your input 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 how to save 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 my fine contact in the forms and I'm gonna take my contact form you can I'll drag that right onto my strip and put that right beneath my title okay so look how easy all that 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 you know contact box I go into tools I click on the toolbar and after them Center you know everything up really nicely now of course you might notice that this is not my styling that I'm keeping sobs going I'll click on edit and I'll be able to just kind of find the theme that I want to use each of those sections so for this will be my adding one which I can go and I can modify easily and as you can see here just changes everything up pretty nicely I'm gonna go ahead and just kind of display around 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 could let me show you some other options as well but I'll put my success text when they must get submitted right below and perhaps even sits into that as well as within the text box okay 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 forum yourself so the first thing is I can go into my layouts and I can make sure that I'm you know choosing a layout to be either one column or two columns I'll keep it on one column and maybe even add some spacing with pixels between each one or I can keep it back to two up to you and then also control the spacing between the columns here as well so maybe I'll make that ten all right and now we start to have like a really nice section another trick to is if I want 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 then ten pixels then move down so I know I know it's ten pixels between and also between each row I'm super cool stuff that you can do here and that's a neat tip I didn't know that and probably would have taken me another six years to figure it out say that one more time the episode 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 on a distance from yes you just kind of click it hit shift down and every time you do that any direction it actually moves it and so you're you're you click it you're holding the shift key and you're pressing up and down exactly by default that's ten pixels you got good awesome that's another nugget of gold there yeah you also have options of kind of distribute elements evenly I'm 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'll Pat bucho but you can see here tons of options like I can literally dive into this all day I mean options are endless with any you know feature and rich that you really want to customize I want to highlight some of the things here that I know right you might have known I'm not maybe I don't know so you can kind of click on you know recommended tons of different pills that you can add in you know most of them are pretty simple in this category text is also pretty straightforward here the US chin before we jump I have two follow-ups to that any trick you just told us about the shift button is it always set to ten pixels or can I go in and change my default it is always that it's in pixels okay is it the same old Mac and PC correct okay so that was a great answer for Eric and Daisy awesome thanks Anthony you got it all right and as you can see I'm just kind of going through all the different types of fields that you can add into a form kind of build into the recommended ones and now we're going into the number optional just simple is that a number selection type see on radio buttons checkboxes multi checkbox fields dropdowns rating field subscriber opt-ins which are grateful i gdpr purposes especially in europe down below you also have you know bacon 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 recapture recently on my personal website I was getting tons of spam I had a district caption which is a free feature and immediately got less responses for people who didn't really need my business form out 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 I mean the very last option here which i think is probably the most cool feature about the forum is the signature field so I can probably have somebody make it really cool like signature option or it's just the possibilities with exactly own form builder I was like in looks like I do a lot of things you know building the way I want it to be making the way I want it to look 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 in it and you go back to adding something to that form I see this a lot from from our partners in specifically in our in our community the reCAPTCHA okay this is I see a lot of questions where people see or receive spam from their forms for those who don't know Anthony what is the reCAPTCHA and show us again how to get to it why would we turn this on I think I think that's worth mentioning so the recapture 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 not using actually keyboard in the US like things like that basically a geographical location control like whether you're gonna get you know authenticated or projected right so the way we added in is we pretty much just click on you know forms as a whole we click on add a new field we go down to recapture and we just clicked at I mean it's that simple but that's great and and I think this is at this day and age probably a must definitely definitely this is super super important I mean I know some people may 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 yeah absolutely super cool stuff alright 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 ahead of elea using three different strips right or throw three different columns mini strips so what I want to do is kind of like to show you how I can take the same design and apply it to the footer by just a quick duplicate which you can do by hitting on control of command D and once you have it duplicated will grab it one second I'm just gonna 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 small and it's on top of the strip I'm using this option I'm gonna drag it down because I don't have that same exact you know design okay I might put it and I'll just go ahead and move that to the footer and just like that that same design as my footer and once it is I can go in I can manage it and I could kind of move it over alright and I'll move this one over as well alright so now just kind of flip the order and the positioning of it you know I'm just like that we have the same type of mirrored navigation between both the header and the footer alright and I'll do my last anchor get for those who are just joining in I'm gonna also just add this last piece when did you do to zoom out and reorder we doesn't quickly Rachel Rachel wants to know that ok Rachel so I clicked on zoom out and reorder the option to the left of undo and then I was able to kind of like new things around you know the client was like you know what I think that contact form is just a little bit too far down on the page I want it to be before the gallery okay cool I'll just shift it and just like that now the reservation is here and I kind of like it I'm about you breath but I kind of liked it the other way yeah I mean you've got the eye my friend and Jesus thank you awesome you got it all right now we have it set up here and then again I want that contact you know option to be very very obvious so I'm gonna go ahead and just add you know another option for my anchor and menu anchor grab the anchor pop it in all right I'm gonna remain this to contact I'm just like that I'll go up manage my pages out of link that page is going to be contact all right you know I can easily just move the order of them right maybe even change the page transition and I want it to be out in nice little cool transition horizontal vertical or crossfade but as you can see here I mean we really just pretty now know that in pretty nicely alright so we built some functionality but I think the goal of this website beyond just building and making it look good is to make it work you know I think in which there's tons of ways that we can add you know additional functionality and we're gonna look into that app market now and see what we can do I'm so great I'm thinking of adding like a way to maybe get some bookings right I think that's a key do you think I mean that's a yeah I think that's a that's a fantastic app yeah so I'm gonna go to add app here so it's gonna be the option right below the ad or they just see what we have booking options so the first option I've seen anyway exploiting that I think is still allowed in your schedule my platform scheduler schedule an online booking so it's possible while you do this here's a great question that sue asks and I really this is this is great on your page where you have the gallery the contact and things on on your main page why would you do it that way instead of giving each of those its own page why did you design it that way Anthony yes I built it this way because I think that it's like it's pretty much like undisputable right that people are gonna want to go somewhere today so I thought it would be you know really simple to just have it on one page you know just really simple really easy to navigate and I also know that most of my visitors are going to be on mobile and I want to give them a really good experience without having to go from page to page and I also know that maybe this client doesn't really have a huge dependency on SEO so they don't need to really build out you know multiple pages that would have individualized metadata right so that's why I built this one you know in mine with a one page style but if I wanted to make each one unique you know um you know to each page I could do that 100% and as you can see you kind of added bookings to my site otherwise thank you for that thank you for that answer and soo thank you for the question you got it alright as you can see I have booking set up pretty nicely my categories in here my text is actually also being pulled in with the same theme as I said before let me ask you I see colors here that we selected earlier why are these colors already here absol actually utilize my site colors from earlier so when I added that app in certain verticals are gonna pull in so when you talk about vertical so I'm talking about things that I'd like which bookings stores you'll notice that it's gonna pull any color that's gonna be a part of your second column in your color palette right and typically it pulls in the center of the centralized color right here so this is atonement is using right now to build out the structure that makes a lot of sense and in it thank you for that so sorry but that was a great that was a great tip there you got it alright and as you can see here it's build up you know pretty nicely on the last thing I wanted to do that was just maybe change up the consistency of the name of the page so that I'm having it lowercase I'll regain that and I could make it whatever name I want by the way I'm just gonna make this a book now cuz I'm a call to action a person alright now as you add this it's adding it to your menu mm-hm so so does it automatically add to a menu and what if I wanted to hide that from the menu yeah if I wanted to actually hide this I can go in I can manage my pages I mean just like I just showed when I rename it I could also go into the options here and I could just choose to hide it you know I hide it does that mean it's not accessible it won't be accessible through the menu but I could make another link maybe in my footer I could add a button and put it in my header that look now that gets to this page because maybe you might not want to in your menu you know maybe you want your menu just say you know home contact and gallery and I can have a call to action that kind of sits over here that'll say book now that links into the book now page so hiding it doesn't mean you can't access the page it just being just not hotlinked from the menu exactly that perfect all right if I wanted to maybe add some additional like you know pages that are kind of hardwired in I can do that and I can just kind of like basically kind of mess them underneath other pages so if I wanted to have this new page be a part of you know drop down from the main page I can just literally you know I'm not sure he caught that but I can just click it make it a sub page ah it'll nest right underneath so if I preview it and I go to home just like that my new page is kind of sitting right below you know about a job I think there was a the reason I ask that is it was a question about the menu earlier and this was a perfect time to come back to it so thanks for that Anthony that was a great tip you got it all right and you might also notice that I have this little logon bar that automatically game you know once I added bookings right so let's talk about so basically once I add any vertical you know it's my option to have a login bar but some of the reasons why I might want it is because it allows a user to pretty much see you know like any type of information related to any one of the apps on my site so right now it says bookings if I were to add a store then I would go back and it would say my orders if I had a blog it would say my post if I had a forum it would say my post so it really just kind of gathers in you know there's usually accessible ap a dependent pulls in all the data from all the apps that you add it lets to use it whatever is logged in see all their bookings and all of the information laid it to any vertical that's been Jo it personalizes the experience of the user on the site that's relevant to them exactly it's really fantastic and I know a lot of partners build those sites for their for their clients and this is you know this is their business so it's it's important to give that personal touch to their their customers fantastic this is great Anthony alright now we spoke about you know pinch of screen always bloat about kind of like using strips and making it full width right we spoke about kind of adding you know one strip and having like an alignment to the left or to the right now I want to talk a little bit about pinning and and what it means all right um so I want to kind of take this login block that you saw kind of just pop up once I added bookings and I want to just right-click on it and then I'm gonna click on into screen and what you're gonna notice does not have like these different preset positions that I can choose to put this icon and I have this space right up here that kind of fits perfectly for this so I'm just gonna add this here and then once I do that I can just change like the offset up and horizontally and both vertically right and I'm pretty good at eyeballing stuff so boom there we go and now when I preview it you know and I slide to scroll down now that's mothers my face and I can click on it and see my bookings that I have up and coming you know I can see you know my account just like that I can change some information you know and again we didn't code it thing give me Bret I mean this was just pretty much I didn't see it unless you're some kind of a ninja by the way by the way for those who are seeing this this is that coming to the profile view by the way that's that's new that profile view that you went to that's that's new that's a that's a new profile view it's pretty nice looks great looks and I love how it's pulled the colors again from your directly from your template then I can also assign badges to which is a really cool thing to do when you have a community and you start adding you know different features like perform all of these things again something that's gonna be hugely accessible so all the things you do so again I'm pretty sure by now people are starting to understand the true importance you know being able to assign those site goes before you start the design process you know imagine if I had to now go in you know and change everything up one by one I mean it would be I might mean I think but yeah no doubt no doubt now it's starting to look really except for the you know the book now that we hit on the menu it's looking like a a full-fledged website and this did not take that long nope not at all and I'm gonna keep that showing because I want to take some bookings I think we need to make some money so I'm gonna keep it I'm gonna keep it visible there's several great questions I know you know the answer to this and I'm gonna jump to this one right here Ginny was Ginny wants to know how would you add logins if you had multiple blog writers and so if you have guest blog if you if you have that installed which we don't have the blog installed with this exact example Ginny but just like Anthony was showing you can actually give people blog writer access problems from your back end yeah you can make them a moderator and they'll be able to you know basically create post as well as moderate the community as well I mean those are features that work not only on the blog but also in the mix forum you know so if you wanted to have a community as well as a blog you know you can do that as well for you so the simple as going in and I'm pretty sure we'll have you know times that we dive deep into uh you know these other products but for sure it's a possibility there's a lot we've done so much so far what's lacking on this site I mean I think right now the one thing I really haven't touched too much is the mobile and you know being that eighty percent of my users are gonna be coming from mobile and you should dive into that and let's see you know how using ships has really made the process more efficient right um so I'm gonna just kind of move over into the mobile view and we're gonna see things look a little bit different than what we built the Matis and it's okay and I'm gonna explain why um to the first you know section that you're gonna you're gonna see here still gonna have you know one column you know two columns went over column but I don't need all of these of course so I can start to actually delete the ones I don't need right so what's cool about it is I can just click on column two I can hide that I can click on my column three I can hide that and then I can decide what I want to have you know be in this first trip here so I'll go ahead and I'll move my menu up here which by the way we actually have some really cool styles on different menus as well it really cool style you can just choose and modify so it's not just up a little hamburger menu now is it really kind of like really full-fledged I'm not gonna open it up and show you just how it you know behaves you know just really like really sleek kind of design right there I like just really nice now I'm those also knew what I could also do is kind of like resize up the header scroll pop that where I want it to be I could extend you know each section and again all my elements are grouped so I can just click and drag instead of having to move every single one one by one here's my you know gallery the programming super cool writing line and then down below I have my you know contact section all I have to do here just literally extend it so you can see where it says type your message here you know and just like that it's pretty much already optimized and then down below it on me and again with this trip I'm just clicking on delete another keyboard shortcut maybe on my mobile all I wanna see is the logo and then we're good to go but again we really took a lot of time to just build up you know a site but on the mobile tipping what maybe 20 or 30 seconds just kind of pull yeah yeah it an Albert asked a great question is can you change the way Moe can you change the way some things that are shown in mobile versus desktop can you remove certain things from mobile yes oh yeah you can absolutely like just click on LEM and they you don't know let's say for example you know somebody's on mobile I'm not gonna read like every single little line of text so maybe on mobile I don't need to have which says experience I love to read villas I can just click on hide the element you know keeping that extremely clean and straight to the point and emphasizing my call to action right so I can do that and again this does not affect you know my desktop site alright so again just keeping them super easy to modify or really nice maybe down here on my contact section you know I could probably go without you know the leave your contact details section and just put make a reservation again super simple and it's not gonna affect anything and I just have to extend that strip behind it and just like that we're good to go alright so ring is really easy to modify any of this and it's really clean really nice it's you know here's a great question Kareem is there asks is there a way to preview tablet to you alright until this the question is really good the solution is actually what you might already see in the actual editor so even easier to understand it is to kind of like see how you build things so I might have spoke about earlier how you know we have grid lines that we have to abide by so pretty much everything that's within the grid lines you know within the 980 pixel width is gonna be viewable on the tablet you know so basically somebody on a tablet is pretty much gonna see you know everything to the far left as well as to the right dotted lines so as long as it within the grid line that's the content that you'll see all right so nothing on this site today will be cut off at all on tablet devices long as you follow my best practices and the ones that work best with Wix don't have an issue of it not being visible on a tablet or an iPad well I mean by the way that's probably a great another piece of gold nugget you just dropped I see that question a lot from our partners in the community yep it's a super super important I mean I think the goal is like to just make sure that no matter which environment you're building in whether it be directly on the candidates which you couldn't do but I'm not suggesting it I'm saying use a strip I'm if you do use a strip like always make sure that all the content is again within the grid lines all right so on a tablet what would I see in this fold I'll probably see just where it says make a reservation and the 100 pixels to the left to the right and the mountain range in the background for our left and far right I wouldn't see so it's only gonna show me what's in grid lines which is why we always say important content like things that people need to see like we need to see that it's a place to make a reservation so I wouldn't want to put you know make a reservation here it might look good design guys I did want to do that I could do it but I would have to shift things I'd have to go in and I would change my layout to the left alignment right and that's how we again just again break those boundaries and control what the user is seeing what they're not see I'm glad you said that because I think that really just sort of solidified some of the questions that Alejo and a few others had regarding that so that's that's that's amazing absolutely I don't think would be fair if I didn't show maybe some of the things that we could do you know in the mobile as well in addition to just being able to optimize the thing optimization is like a key thing that you should be able to do so I want to give you some more things to take home with so you kind of go into all the options that you see I'm some really cool things is that your mobile background could be like different than the one that's actually on the desktop and again that could be a color and image or a video in the mobile tool section you can add a quick action bar again so if you're doing a lead generation website and somebody's a contractor and they want to get people calling them up emailing them and going on social media you can add all these options was by the way fully customizable like different styles but you can easily just add click in customize which i think is pretty cool I kind of think this one looks best what we got today over in mobile 2 is also about the top button so we built this one agent and I know earlier that was a question so we built it because we want to keep things simple but on the mobile also wanted to be a possibility with if I'm looking at this you know I'm starting to scroll down I usually can click these become jump their way back up to the top you know see here you know it's really nice in addition I also when I maybe have like a really cool mobile screen this is really great if you happen to really be concerned about the image quality but bloated like if there are images that are kind of like a little bit larger what you can do is you can actually customize like you know a welcome screen so I'm gonna add my own logo here now this is important because this is something that a lot of people have asked specifically sign optimization load speeds how to optimize right so you're showing a pretty awesome trick here yeah and by the way Ginny says thanks she's going to playing her editor right now some of these tips it's amazing glad to hear that as you can see here I can preview it and look how nice that would look I mean I'm on the website all the time I don't really see people doing this too much so I think a good way to stand out you know even with your own logo you know or your partner badge for example you know super good ways to kind of be able to you know just get that introductory like that first impression is everything you know so just really cool things you can do here to make it look really nice you know click on done and just like that you know we're pretty much you know when things pretty nicely also one thing that's also pretty cool is I can be able to change the color theme of my tool bar so that when it loads up everything is super consistent in google chrome alright which is again one of the most used browsers and then again having the option to again hide elements we didn't talk too much about it which is a good thing actually because I would have used this and maybe I wasn't building the most efficient way but if you ever get you know mixed up and things become a little bit jumbled you actually go in and optimize your entire site it'll do its best to kind of you know figure out what you're trying to build and again keep things a little bit more structured because today I use the best practices that you're probably gonna see and you know the process was extremely easy I don't have to really go in here and optimize anything but again an option to click on if you ever get things kind of you know mix around and in jumbled up just looking optimize now pretty much to see everything looking pretty good so we're we're we're there's so much information here and we're running a running into a lot of time here but I do an Anthony if you'll stay just a little bit we have a lot of QA and if if if anybody has questions specifically questions that Anthony can can because we've been active in the chat and been answering a lot of the questions so I want to I want to turn it over if anybody wants to ask a question or something and specifically I'm looking for some anything that I since we've got a screen share up I think it would be great if you could maybe demo some okay what's good but and I'm gonna start with this one because this was a hot topic just a moment ago from the firm from everybody that's attending what are some things we can do to optimize loading speed there was a lot of questions regarding images that are being imported from Google Drive Dropbox are there other places you can import there's so many questions so look let's just talk right quick site optimization what's something we can do I mean so the first thing is like you know it's always good to have a website that is beautifully designed right but it's also one thing to have a website that just has too much going on on it if there's any time that I feel like you know site speed is affected is when we just overuse things that shouldn't be used that much like you know animations right like let's say if I wanted to see what it says like explode the great outdoors I want this to be animated it's okay to do it may be here as a fade in but if you do it every single section and then you have odd cons that happen to be high resolution and those also animated just you know think about like when you turn your computer on right and you got like a thousand things that open up at the same time of course this third was gonna be a lot slower than a computer that might be optimized or like a cool even one or two apps so just think of that you know as a computer starting up right but you don't want tons of things just kind of like hit you know and say hey show me that show me that you know things and you know load and then they display so you have to make these that the load of course your time to not only navigate site but also your initial low is going to be article people lead websites you know and laughing about the people look at websites for about seven seconds so if it takes you seven seconds to look at nothing you gotta leave right so that goes a little bit now into conversion right into sales and things like that which are going to be good for you and also your clients so just keeping like animations limited to maybe wanted to you know primarily in an introductory section if you could hold off and maybe not have things like a video background or not on every single section of a photo that will be great in addition if you do have images that are gonna be a little bit of a higher quality like you can use like tons in like free online tools and professional software as well it's kind of like reduce you know I can press those files you know to as little as like two megabytes and it'll still be a good image that won't really look that poor you know at all and currently it actually looked pretty good still so you can really compress images you know limit those you know limit those a number of animations and I don't really just help your site load a lot quicker and have a more fluid experience that's really nice I want to say one thing by the way I want to thank everybody that that that did come and I also wanna let everybody know that this this workshop that we did was really shaped by the questions that you asked before we went live and so we tried to tailor this to some of your pre questions and you really impacted where we started with this and there's a lot of other great questions that you've asked during this webos workshop that more than likely this gives us a great place to go for the next one so i'm gonna i want to jump to another question Anthony I think you generated a lot of buzz from our participants when you started building and putting things outside of the grid lines so will you go back and show us the grid lines and show us how you did it why you did it and what one would expect if they what they would expect from the site if they do that I just want to touch that one more time awesome so my question exactly is I think it's really good to know like you know what to do right I'll show you what not to do and say that you can also be guided on what not to do is love so let's just say that I didn't add this you know strip here and with this image and I want to just kind of add content here I'll take the same exact content I'll paste it in the same position outside the grid lines of course it's white so I have to change the colors but in this case I'll actually just switch to my second theme right so no need to kind of toggle through my fonts yeah I just switched my themes up all right and then what I'm gonna do it just give you like a quick example of like what would a user see and they went with this option and they said okay what I have to use a strip before like I can just pop it here it's still aligned the snow is still snapping to the logo right above it it looks good on my preview how could this possibly be wrong you know and I think you know what we can actually do here is I want to show you if I kind of like resize this down and maybe even use like a really cool tool that I like to show you what an iPad would look like look at how that would be cut off right see how that doesn't actually show me what everything says now let's go back and actually look at it and how it would be if I kept it on top of this chip like it should be so I'm gonna put it right back onto this trip which has that left alignment stop step back step back show us how you did that everybody wants to nobody knows how you did that go back let's do that one more time well show us how you changed change the screen size or the view saw shows that again so I had it you know without a strip and I'm using an external extension right to kind of show you how it would look a lot of tablet mode when iPad what is that all right this is gonna be Windows resizer okay it's a free thing you can use and it's super useful and it just helps me understand it the tablet but now I know that if I design within the grid lines you know I'm pretty good but I like to always just use this too it kind of just be rest assured but I can tell my client like no this will be you know perfectly you is that you just you just you just triggered the participants they are so excited about that tool is that available do you know anything about that with what was the name of it again a windows resize it and you can actually down a little bit as a Chrome extension yeah okay awesome awesome I think everybody really likes that more than anything that's crazy what a great tip by the way I do in remind everybody this has been such a fantastic fantastic workshop hundreds of y'all showed up and tomorrow don't forget tomorrow we're also doing stores we're gonna talk all about which stores tomorrow and what you can do there for your clients super excited about that you they're asking for more so I wanted to make sure that they didn't know that tomorrow we're actually we have ones well it's amazing I wanted to quickly show also that I'm gonna take the same content but in the exact same position but because it's on a strip it's going to be visible see the difference and that's what we use trips is simple how wow that that right there is I see so often Anthony the questions in our partner community is sometimes about responsive but this right here this element is adaptive and it's not so good the entire site everything that I'm doing is 100% be viewed well are not that so again just use these best practices and you won't have the issue it's simple I mean I built you know 168 websites in 2018 you know and I have one client calling me and telling me that they couldn't look at their website in that you know these again the best practices this is this is fantastic I'm loving this there's so many there's so many great questions by the way the webinar for our excuse me the workshop for tomorrow is has been dropped so go ahead and make sure that you register for it I think I think Aviva just put that in there so it is happening Thanks okay we are way over but we're not suitable I want to quickly show in terms of like the streamlining your work process your hand off and you want to get feedback for clients is to be able to go into site click on get feedback you can actually give this link out to any clients that you work with and they'll be able to actually like pinpoint you know certain sections of the website but they want it you know some feedback on you know they wanted to make changes on so they'll say hey look you know I don't like this section too much maybe they can add a comment with their name and actually pinpoint exactly sections that they want a modify and you'll get an email and it also will live in your dashboard with all the modifications that you want to do so I mean I'll leave you guys with that I hope you enjoyed today and I hope you enjoy the following webinars that are soon to come so so I have to say Anthony I I I think there was just so much information here yeah my head's a little exploded there were probably I think there were five distinct moments where you talked about something that I I think absolutely really made it such such a gold nugget of information so for everybody that every for everybody that came and saw this and participated I'm so glad this will be available afterwards don't worry we will send you a link in your email so be expecting that and let's do it again I think I think we're doing it tomorrow with stores and and if again your feedback your questions really really shape this so maybe for the next one Anthony if we can strong-arm you into doing another one this is really great awesome awesome I want to thank everybody for being here thank you Anthony for taking the time and showcasing this make some amazing tools within Wix and we hope that you everybody participating goes forward and makes the most amazing websites for yourself and your clients thanks everybody thanks for coming

Channel: Wix.com

Views: 4,057

Keywords: wix, wix.com, website builder, web design, create a website, free website, how to make a website, make your own website, website maker, build a website from scratch, Wix Partners, Wix Workshop, Digital Agencies, Web Design, Freelance Business, Wix Editor

Id: uhp5_jjXSkg

Length: 80min 10sec (4810 seconds)

Published: Wed May 27 2020