WIX Tutorial: How To Create A Website with WIX – Editor Basics

so today I’m showing you how to use the Wix editor I am picking a template today to show you how to use the basics of the editor I’m just here in the health and wellness section of the templates and I’m just gonna pick one at random I’m going with the yoga studio so this is the first lesson on how to access the Wix editor and what the Wix editor is anywhere on your Wix account that says the word edit allows you to go in and use the editor to
edit your site relatively self-explanatory but have had questions about that before so click edit it will always pop up in a new tab and as you can see it’s labeled Wix website editor so that’s how you know that you’re in the right place once it’s loaded it looks a little something like this so this is the Wix editor and as you can see the template has loaded and there is a lot going on in the Wix editor so my aim today is to help simplify this
for you and show you exactly where everything is to get you started on creating your site so what we’re going to do today is we’re gonna look at this top panel here and as you can see as I scroll across things pop down and light up and that’s a feature of weeks it tries its hardest to show you exactly what everything is and explain it for you but sometimes we all need a little extra help so saying with this top section we’re going to work left to
right and we will start here with the pages menu and this shows you all the pages of your website so if I click it on the drop down you will see that’s all the pages that are in this particular template that I’ve chosen to demonstrate with today in this yoga template you’ll see there’s a home about private sessions contact blog and other functions to add pages so this is where you can navigate between your pages when you’re designing so if you
click for example about what loads up is the about page private sessions the private sessions page contact contact page and so forth that little icon here at the top that looks like a little house I’m just circling here that is your home page whatever that symbol is attached that is where your homepage is which page it is and the basics of this as well you can move it around just by grabbing it that little grab button you see that little grab
button and some other features that we work our way through weeks and that just lets you move the order around just like that and that’s how it will reflect on the menu up here you also see a very standard thing of weeks and that’s how to toggle in and out of certain features so the ex allows you to close it down and the little question mark button is your little Help section you can click that and a little help button loads and it helps you you
know search this you might have found similar functions in something like Word or Excel and Wix has replicated that quite nicely here it’s great things you use if you’re if you’re feeling a little bit daunted by it you don’t remember what you’ve learned in this tutorial today you can always search it and find out what it is and there’s always reuse and stuff in there to help you to X out of that X so that takes us back to the editor so as we
scroll across the top we have a couple of drop-down menus the first of which is site so these are general site tools the first one is save so when you want to save your work you can click that and it allows you to do so preview this allows you to look at what the website looks like if it was live and so without all the editor tools and the menus that you see around it get feedback now this is a function that is specific to my account as a Wix
design expert it allows my clients to give me feedback on particular designs most people won’t have this function but if you do it’s a great thing to use to get feedback from other people publish now publish is the big button that you want to avoid clicking until you are 100% ready publish means that your site goes live means you your design is now visible to the wide web the problem is is that once you hit publish you can’t go back so make sure
you publish wisely avoiding that button and avoid doing it too soon you publish site now this is obviously a grayed out because the site isn’t live it’s it’s still in the editing phase so once it is live and is attached to a WWE you publish site would be no longer greyed out and allow me to click it a new tab will open and I’ll be able to see what the site is actually looking like right then and there what’s publish to the site it saves you from
typing in the www into a new browser it’s just got it therefore you get found on Google now this is helping you with your SEO now if you’re just in the design beginning stages of your website don’t worry about this just yet you don’t confuse yourself with any SEO you’re just trying to work on the design we’ll come back to that a little bit later in another tutorial so you but essentially this helps you work out where all your SEO needs to go and
checks that your site is loaded with the correct SEO that you need accessibility some little features actually to help you and I’m just going to click that one and it’s going to show you your user-friendly experience for the browsing experience it lets your visitors navigate your website intuitively with a keyboard only I haven’t really used this before but it’s a great thing to activate to let your visitors use your site a little bit more easily
it’s not a deal-breaker in your design so I wouldn’t be worrying too much about it just yet come back a peeler site connect the domain and upgrade now these are two features that you’d be looking at once you’re ready to go live with your site you would connect your domain or purchase the domain through weeks and so we all know a domain is a WWE address and upgrade and so upgrading allows you to have a full WWE main and also allows any of your
premium features like running an online store it allows them to actually run and for you to take payments as you intended to do so again you don’t need to worry about these two things until you’re ready to go but you do need to acknowledge that some of your functions are going to work in its entire until you do an online story is one of those things you can’t fully test it until it goes live the mobile editor now at the moment we’re looking
what’s called the the desktop version because this is what we’d look like on a desktop PC or a Mac or whatever type of computer that you have the mobile editor is for mobile devices so in a separate tutorial I’m going to take you through how to use the mobile editor but basically this is where you can toggle between the desktop version and the mobile editor and work through the changes for the mobile site and make it pre just like you’ve done
with the PC version ok image sharpening is a really cool tool is a pro feature so I’m not going to go on too much about that my dashboard site manager site history these three things are ways of managing your account seeing things like your contacts or the applications you’ve got all those extra things surrounding your site even like you when you send out your emails it all comes from your dashboard site manager and we can go through your SEO
putting in the social media links to the backend of your site checking that you’ve done everything and site history all the changes in previous versions of your site so these are the things that don’t directly affect your design but I add on extras where you can go and manage them I’m going to take you through the specifics of those in a separate tutorial and show you a lot about how to send out emails through weeks and how to look at the site
history this is a really interesting one especially if you’ve published a version that you’re not so excited about and exit the editor this one is pretty self-explanatory it allows you to exit out of the editor once you’re done however you can do it really simply all you do is jump up onto the tab hit the X and Google Chrome’s really awesome with this it says do you want to go you haven’t Save Changes or or you know your changes might be lost
what do you want to do and we can hit stay or leave it’s up to you the next on your menu is the Tools drop-down now these are designer tools and they’re things to help you with making your design easier so the toolbar as you can see here is selected and that is this thing over here and I’m gonna take you through a little bit later in this tutorial all the different elements of the toolbar but I love it I always design with it on unless I’m having
to get rid of it so I can see my whole design a little bit easily or work with something on that side of the site rulers now I don’t use rulers a lot they’re not a default once you come in but if you take a look where the ruler is applied you’ll see at the top it kind of looks a little bit like word now they’ve got the the measurements there I don’t use it I don’t need it I used some other features which I’m going to show you but if this is
something that appeals to you and and your brain likes it for your designing and it’s a great feature to have switched on but great thing is you can always switch it off grid lines now grid lines are extremely important because they do indicate something very important when you’re when you’re designing grid lines on and off you can see the background changing little gridlines changing however I am gonna show you this the grid lines here on the
sides and your left and right this part here in the middle this shows you what is seen by a tablet so if you design something outside of those lines if I move the social bar outside of those lines the the components of to the right so you’ll see the Instagram and Twitter symbols they’re not going to be seen on a tablet version of the site so that can be really problematic that can be a big issue if you put really important things like social
media links on the outsides of these lines you’re not going to get them when someone’s on a tablet they’re not going to be able to see them at all so that is it can be really problematic so the key is is to use these lines and do not go outside of them for the most important things now an image going and expanding the whole site it’s not going to be a problem because even on a tablet you still see the full site and you’ll see that sorry the full
image so you’re not going to lose it and something like a link so you avoid things that are functioning like links buttons text that needs to be read outside of those lines okay in there the gridlines help you see that the other the other really awesome thing about the gridlines that shows you the header which is up here and if I scroll down to the bottom you’ll see the footer and it’s it’s cut off so you know that anything sitting in this area
will be the footer and anything up here will be the hitter and that means it’s gonna appear on every page of your site unless you specify otherwise I’ve got here developer tools once again this is something that not everyone has this is because I have a special Wix account as a professional designer and it’s something that allows me to do we use Wix code for websites but I’m not going to go into that today here you have your help function and
you’ve got a whole lot of videos keyboard shortcuts and the Help Center this is a great resource and it’s a really great place to start if you’re having some troubles I find sometimes though that some of the instructions are a little basic so it gives me a good indicator but sometimes I do need to go research further and watch other videos like this it’s totally up to you and how you learn but Wix does have some of that support there for you and
upgrade so upgrade you will see everywhere in your account I don’t want you to fear it I want you to embrace it because upgrading getting you to pay the hosting and pay a domain fee whether buying the domain or hosting it this is how wicks makes its money okay so of course it’s going to be everywhere they’ve got to push you to upgrade but I I’m a big advocate of upgrading I think it’s most most important things you can do if you want to have a
really quality site a verified site and a site that actually attracts visitors because the free domains do not attract visitors they do not help you with SEO and they don’t help you run anything like your online store or any of those cool features so upgrading is one of the most important things you can do and I don’t seeing it everywhere it often reminds me that that’s something that needs to happen but it’s there in case you need it scrolling
along we have a zoom out and zoom in function so that’s pretty stock standard we have an undo and redo buttons so if I wanted to I could click undo and the social media links go back to where I had them or I could click redo and then move back so those functions are really awesome I use them all the time especially when I’ve actively grabbed something and moved it without intending to mobile switch to mobile view so this is where you can toggle
between the PC and the mobile view if I click mobile it lets me edit the desktop view and edit the mobile view okay edit mobile view says welcome to the mobile editor I always click don’t try this again because I understand it but if you still want that prompt make sure you leave it on there and this allows you to edit the mobile site I’m gonna switch back to the desktop view and there we are back again save go ahead and save your website this is
where you can name it and of course there is the upgrade function remember that that upgrade is so important two weeks so important to them making money of course it’s going to be there don’t get offended by it it’s always going to prompt and remind you but remember you can always ex out of it not ready preview so all those editor tools disappear and now you can see what the website would look like if you hit publish right then and there okay
because this is a template there’s no domain connected it’s going to be a free site so we’re gonna have these Wix ads like this here it says you don’t remove this ad click upgrade now this is what it looks like right now if you hit publish okay back to editor and then publish okay we’re not going to click that today because the publishing is instant you don’t get much of a choice I’m afraid so now we’ve gone through the top menu of the edit our
we’re now going to look at the left hand side panel which is just here first section we’ve got is background and this allows you to choose the background color image or video for that particular page and you can then apply it to other pages we’re going to look at this more in the designing of a website not just the editor basics but this is so you know it’s here the next is the plus button now the plus button is probably the area I spend the most
in this is where you can add in your text your images galleries your slideshows your social media links music videos adding a new menu so it’s just loading their lightbox those little pop-ups so these are the all a little extra things that you want to add in this is where you’re going to get it from each section has a little pop up so you can see it says add text and as you scroll here on the right hand side of this is all the other different
options that you can have so titles it’ll take you to the title section for example paragraphs will take you the paragraph text and related apps every section has a related apps this is all the different applications through the app store that you can add in based on that category now I’m going to take you to the app store in that in a minute but the app store is essentially like what you’ve got on your phone you’ve got the basics which are
always included and then you’ve always got things that you can purchase and add on the apps okay you got to think of it like that slideshow we have a look there’s only full width and box we go to video week’s video related app so they are again he’s a big one contact get subscribers contact forms Google Maps for with Google Maps there’s a lot there so when you’re learning how to use weeks I just recommend you spend some time on this section
grabbing things adding them to your site delaying them adding things again and sort of familiarizing yourself with what you can actually add into your saw into your site the Wix app market now this is a place where you can find what you’re looking for if you want to add something very specific to your site this is the place to see if it exists the free things that are in the plus button are all in here too so in case you just can’t find it on
that little plus section come to the app store have a look and see what’s there so if you say look I want to add an online store for example that’s that it’s my most obvious one there it says 37 results for online store so that means there are 37 different applications you can add in that are for an online store or like an online store there will be suggestions in this list that don’t directly give you the solution you need but might indirectly
do so that is because for example an online store is such a broad topic and if we take a look here one of the things is Wix bookings that’s so people can schedule appointments and run a booking sheet for example it’s not a traditional online store like how we know it but it’s still a version of an online store it’s still ecommerce it’s still taking money it’s still making bookings via a website so as you can see here you’ve got an application
bill made by Wix and as we scroll down you can see this one here it c.width this is one built by an outside company and their applications that are just like how Apple have got their own applications for your iPhone and then there’s all these other companies that make them – same thing easy winners put together an online store that you can add in to your Wix website if you click on it it will have a pop up and go through an overview of what that
app is a demo video features and pricings that shows you what the free package is versus what the premium is just like on your phone you do need to pay up to use these applications reviews now the reviews as well I always take a look at how old the reviews are four years old from this first one things are probably changed since then I’m going to know this five stars it could mean it’s gone better gone worse one of the cases I often go to social
media for an updated review I’m I try and connect with other people other Wix users and see if they’ve had any luck with this and develop it in fro this is a little bit about a seaweed if you don’t know them never heard them before this is your way of finding out a little bit more about them and the more of this story as you can see over 1.5 million merchants they’re not a small company so you that they’re a little bit more trusted of course
weeks wouldn’t add them in if they weren’t trusted so and when it comes to picking something from the App Store I tend to stick with wix’s applications not only they normally free or they’ll just require an upgrade of the hosting but they are normally built with wix’s or functioning already in mind they often work with things that are coming in the future and they just seem to integrate a lot better and a lot smoother but that is just my
experience you know you make your own experience from that I’m gonna X out of the whip market and come over here to my uploads now my uploads these are all the things that you upload to your site to help you create images videos fonts documents and single tracks ie music recordings so each has its own library if you click three oh it’s gonna tell me to save we’re not gonna save today but that’s a reminder you’ll often see images and this is the
management of my images I’ve got folders of images I’ve got a whole bunch of random images social images right here I could connect up my Facebook and pull on my facebook images and use them free from Wix they’ve got their gallery of completely free images you can use so if I search party party images come up and I can use these 100% free and big stock images I can do the same thing parties already been searching for me and as I hover through it
shows me how much it costs to use that image okay and then once I’ve selected the image by image the orange button here allows me to upload my image so and then take me to my computer to upload whatever I’d like close out of that videos is the same thing this one you can’t purchase or pull any videos from your social media you can only upload just say fonts upload your fonts now here you can see what files they accept so I’m always make sure that
anything you upload BAM sticks to those otherwise actually what upload so you’ll find that pretty quickly documents same thing my documents or the files there too and the file sizes I can upload or select and have them in and you guess that single tracks are gonna be the same thing upload your tracks so images has obviously the most options there for you but I’m sure weeks will develop these further along the track now these here start blogging
and bookings these are just bigger applications that this template has for example bookings if I click that it will take me to my bookings page which it has so this is something that if once your template or your design has this on it you’ll see those features if you add an online store for example that would get added in here too so I I don’t worry too much about them until I know exactly what I’m keeping but if I know I wanted a booking
application that’s there that’s where I could go in and manage it and finally we’re going to take a look at the toolbar so I’m moving into the middle as you can see here you’ve got your little group that allows you to move it around you can close it down if it’s annoying you and you can always get it back up using the toolbar just here bring it back to the middle so these are all wonderful shortcuts to help you with your design and some sizing
and positioning tools to help you understand where your items are going okay so copy really basic copy an item paste paste the item duplicate no duplicate means that you copy that item write that in there and it appears on the page that your honor so if I click that and click duplicate there it is it appears on the page that I’m on whereas you use copy and paste if you were traveling between pages and delete my item was highlighted so I deleted
it once not remember nothing’s highlighted I’ll just get nothing highlighted nothing can get deleted I’m just gonna lose that little arrange so you can arrange things between in front and behind each other so if you want the the word private session to go behind this strip here you can do that a line you can make sure things are aligned your elements are aligned vertically and horizontally using the align tools they’re distribute and match sighs
so this match size is a really awesome tool and helps you match like same images to each other so it applies to all of them being the same size distribute just evenly distribute elements on your page I tend not to use this because it’s sort of taking away some of the designing for you if you want to give it a try go for it but I tend to move things around myself and and put them where I need them but that’s sort of my designers eye now this thing
here is a rotation button for all images on your site supposed to move the other way I click an image you can then rotate that and you can say I want to go 90 degrees and then it turns 90 degrees this will also show you on your selected item the size and the position of that image so you can go okay it’s 68 by 67 I now want to make sure all my images on my site are 68 by 67 you have those details and you can go through and change it if you want
to go no I want all of my images to be 100 by 100 and then I can change it that way and then you can position and grab it and move it around like that it shows you the position as well I often use this what I’m trying to get say a heading like this this processions heading when I want to be in the same position and every page I’ll use this position tool go go to that page and make sure everything is the same using that and the show on all pages
that means it highlights orange it means that it’s going to appear on every page it’s best that things on every page appear actually in the header and often not so great in the middle of a random page like that okay the last thing is just here all this stuff is replicated when you right-click on anything you can edit the text to animate so there are specific instructions to the text then you’ve got all these other things you can do with the text
which we saw before undo function you cut your copy you duplicate your arranging you delete all those all those things are there you show on all pages that’s your using right click instead the toolbox so weeks has given you a couple of other ways to access the tools that you need you’ve got your toolbox you’ve got your right click there’s one other tool I want to show you that I didn’t get to before and that is snap to objects and this is one of
the most underrated things in weeks and I think that I’m actually obsessed with and snap to objects is it so snap to objects allows you to make sure things that even it gives you some ways of centering and measuring your images and your text and basically what it does is that once you move things around see there’s the center position it’s going to show you I’m in center of my text in the center of my page center of the page is the full line
center of the Tex is just the mini line and there we go that’s such objects it actually helps when you’re lining things up and you want things to be perfect it helps you get that very uniform finish when you remove the snap to objects just appear you don’t get those lines so you can just move it anyway I mean it’s great if you’re a little bit more freeform and you don’t need that uniform nature but if for example you want that in the middle how
do you know where the middle is unless you like that snap to objects turned on it’s a very underrated feature it can really transform a professional site that’s very amateur site into a professional site with just those little features the last thing with the editor is to see that little button you grabby you grab button allows you to move things around most things as you can see you can just grab and move as you need and adjust things size wise
as you need all those little wonderful things if you’ve used word before your you’ll know some of those little grab tools pretty well you’ll see the rotate on when you can and you can move things around so my recommendation is you’re starting with your editor flaps and things on the page grab them move them around resize them get a feel for how they move and and make sure you’re using all these buttons go through all these menus and adding in as
such things as you need I hope you’ve enjoyed this tutorial I hope that’s given you some insight on how to use the Edit are please comment on this video below either in Facebook YouTube or even just sending me an email I’d love to know more about the things that you need to help you with your Wix website and some more tutorials that can offer you thanks guys