Webinar: Get Started with Wix | Wix Editor

Hi everyone, my name is Yoav and it's great to have you here. In today's session, we will be walking you through the basics of creating your online presence. Now, I know creating a site for the first time may seem challenging, but I'm here to show you how to get started. Now, we'll focus mainly today on designing your site, which is the first step to your online journey. But behind your site's design, there are powerful business solutions. We won't take a deep dive into them today, but I encourage you to poke around your WIX account and your dashboard to see how you can manage and grow your site. Now, we also realize that we'll be talking about a lot of new terms and ideas that may be foreign to you. We'll be sending this webinar to your email address so that you can watch it again if you wish and pause it when you want to replicate steps or rewatch certain parts. The email will also include some useful links and a checklist of the basics that we will see here today. So I'm going to start by sharing my screen. And showing you what we're going to cover. Firstly, we'll navigate through our platform. We'll then go over to our Templates page and I'll show you some tips on choosing the best template for yourself. And I'll walk you through the WIX Editor workspace where we'll show you the basics of customizing templates to make sure that they're your own. Now, during the entire session, we encourage you to ask questions in the Q and A tab. My colleagues here from Customer Care will be happy to answer them and questions will be answered privately so you can feel free to ask away. Just keep in mind please that we won't be able to answer site specific questions today. For that, you're more than welcome to contact our support team. Now, before we dive into our platform, here are some useful resources that I recommend that you guys save on your Wix journey. They include our help center support.wix.com Here you'll be able to find articles on everything regarding wix. The Getting Started Hub is where you'll be able to find various tips on creating and managing and growing your presence online. And Our Customer Care Wix.com contact is where you can reach out to an expert to answer specific questions about your site. So let's get started. I am going to go over to Wix.com and for today we'll be building a website for a digital marketing consultant. But the principles that we'll be Talking about today will be applicable for every type of website. The first thing we're going to do is start here by clicking on the Create a new site button. Now, if you see the same page as me, this is my sites page. You'll find it here on the top right. But for some of you, you may see your dashboard, which is if you have a single website in your account, and to find the Create a new site button, you're going to click on Site actions and then create a new site. No matter where you click on it. It's going to be pretty much the same journey that you're going to start on. And the journey itself, the actual setup of your website may change depending on the geolocation that you're in, but the same everything is going to be pretty much the same in terms of the journey that we're going to see. So we're going to be selecting a category, then selecting a template, and then starting to edit our site. The version that I'm seeing here is our button version of categories. You may see a dropdown, you may see another variation of this, but in our case, we're going to choose a business. We're going to see here a split screen next, which is going to divide the options between using our adi, which stands for Artificial Design Intelligence, and the WIX editor. Now, we'll be focusing on the editor today, but I do highly, highly recommend starting to or playing around with the adi. What this is going to do is give you, within just a few minutes, a structured custom site by answering just a few questions. It's a really, really cool tool. In our case, we said we're going to start by editing a template, and this is where our Templates page is going to open. Now, you'll notice here that we have a lot to choose from. We have hundreds of templates that are divided into categories, and each of these can be previewed by clicking on View. We'll get a small preview of what our template actually looks like. And if we want to view a full demo, this will open the template in full window, which you can browse as if this was a website. In our case, it's just a template. If we do like this, we can go and edit the site. If I'm not sure about it, I can always just close the window and go back and browse. Now, how do you find the right template for you? I recommend first of all, starting with the subcategory that is closest to you. So in our case, consulting and coaching is probably closest to what we're looking for. If you're not sure if you want to go beyond your subcategory, of course you can browse any one of our categories here at the top. If you're feeling extra creative, you can start from a blank template. And on the top, you can also search our templates here for anything that may fit your needs. Now, in our case, we're starting in the subcategory group with consultants and coaches. We can again view any one of these. But what caught my eye is this social media consultant templates. So I'm just going to make sure that I actually like this. I see this looks initially really nice. I'm going to click to view a full demo and then I can scroll myself through the homepage and make sure I do actually like the layout, the fonts and everything. I want to take a template that's going to be as close as possible to the best starting point that I want. And obviously we'll customize this to make sure that it belongs to us, to our brand or colors, those sort of things. So let's click to edit the site here on the top. Right. And while our editor loads, I'll mention that on this side, we're going to get the bookings app and the blog app installed in this template. And that's because these have been catered by wix, you know, and added to this template for this type of business. It makes sense if I'm a consultant, that I may want to take bookings to, you know, talk to potential clients. But this doesn't mean that this is the only thing that we can use. Within every template within wix, within every website, we can mix and match various apps and various functionalities to suit exactly what we need for ourselves. But right now we have our template that's been opened in our editor. And what we're going to do now is a quick overview of the tools that we have here before we get working. On the left, we'll start here. On the left, we have our site building menu and a couple of buttons that are important here that we'll be using a lot today. Number one, our ad panel. The plus button here on the left. When we open this, you'll see that we have various elements that we can add drag and drop pretty much to our. To our canvas that we'll be working on. We won't go through everything today, but as you start building your website, you'll see that you'll be going through these categories and selecting various of the various elements to work with. Menus and pages is where we will manage the pages and the menu of our site. Each page can be managed individually. We can also delete pages and add pages as well. Underneath that is our theme manager. This is where we will manage the colors of the website. And this includes colors that are related both to things that you see here at the top, like our menus, our buttons and so on. And we can also change the text theme of our site. So here right now you'll see that we have six headings with Helvetica and paragraphs, and we can change these across the website with a single click. Underneath that, we can control the background of every page between colors, images and videos. We can add our apps from our app market. And this is where again, we'll mix and match what functionalities we want to add to our website beyond what comes installed with a template. If we want to find what's an offer from Wix out of the box, we can go to Wix Business Solutions and here's where we'll see everything that's on offer. Now we can take any one of these and install them on any site and we can also remove anything very easily. We also have third party apps that you can install in your site just with a couple of clicks. Let's move on here to the top. We can navigate between the different pages of our site that we're currently working on. We can switch between the desktop version and the mobile version of our site. And we highly recommend going to the mobile version to make sure that once you've completed the desktop version that it's that it's fully adapted to mobile. Remember that a lot of the visitors to your site will be visiting from a mobile device. So you want to make sure that you've adapted the version, the desktop version of your site to what they're going to be seeing on the go on their specific devices. At the top here we have site settings, Dev mode, Hire, partner, help. This is pretty much like File View editing most other computer programs that you've been using up until today. You also have the upgrade button here at the end. When you're ready to upgrade. That's where you can compare the various plans that WIX is currently offering. Let's move here onto the right. You'll see that we have an undo and a redo button, Command Z or Control Z and Command Y or Control Y on your keyboard. These will also work to step back and forth between the changes that you're making. In the editor we have a zoom out and reorder tool, which we'll use in a little bit. We'll see why that's useful. Additional tools that we can open in the editor to use and a search function that will search between elements, apps and help articles throughout wix. At the top here we have our Save button. We do have an autosave feature that will save your progress as you build your site, but we do recommend hitting Control s on your keyboard or clicking on Save once in a while. Preview will show you an internal preview of what your website looks like and how it's behaving and publish will turn your website into a live URL. And we recommend doing this throughout the build process so that you can see your website on different devices, tablets, desktops and mobile devices, and share this with family and friends so they can also give you feedback along the way. Let's look at the structure of our page now, the actual workspace that we'll be working with. So every page on WIX is divided into three parts and I'm going to start here at the top. I'm going to highlight these elements here, as you can see, and they're all going to be highlighted in orange. This here at the top is called the header. This is where you see we have our logo, we have our navigation menu, we have a call to action button which stands out nicely so that we draw the attention of anyone who's visiting the site. And anything here in our header is going to appear at the top of every page on our site. So we want to make sure that we're getting this right down to the smallest details to make sure that everything is clear for our users to navigate and find what they need to. If we slide all the way down here to the bottom of the page, you'll notice that we have an additional section that when I highlight things here that will also be in orange. And this is called the footer. The footer is also super important to get right. Reason being is that here's where we'll put things like a contact form, subscription form, contact information, maybe copyright information, policies, those sort of things. What we're used to as, you know, website visitors finding at the body of websites, sorry, at the bottom of websites. Remember as well that both the header and the footer are going to appear on every page on your site. So you want to make sure that again, you're making this clear, this information clear and concise, and that it appears where it needs to appear. What will change though, between the header and the footer is what we have here in the middle, everything that's going to be highlighted in blue. And this is called the body. The body itself will. Our content will change from page to page. So here we have our homepage. We'll have an about page, services page, whatever. However we want to design our sites structure. But every page that we design in WIX is going to behave pretty much the same. And we're going to give you here a couple of best practices to follow. Number one, take note of these grid lines that we have here on the right and on the left what these are, these are defining the margins of the page. If we scroll down, we'll see that these run all the way along the page and within specific elements, like here at the top of our page. If I select this strip or the section and then select the specific column, it's defining the borders within the column itself. The rule of thumb here is to place your media, whatever you're putting here, images and text and so on between the grid lines or within the space that the grid lines are defined. If I drag something out of here by mistake, you'll notice that we get a warning that I dragged an element out of the grid line and that some visitors won't be able to see it. The reason is that desktops have different sizes, different margins, and if we're putting something outside of the grid line, not all computers will be able to adapt to make sure that we see everything. So here, in this case, the grid lines are actually helping us to show more information in, in the specific space. So here we've got a beautiful image next to some nice text. And we want to make sure that anyone visiting from any desktop computer will be able to see that. The second rule of thumb is to make sure that our pages are divided into sections. And here you'll see that we mentioned before, we have a strip or a section here at the top, which is a welcome section, nice big text that is telling us what you can get out of this business and why you should engage with us with a really nice image that, that also draws attention. Underneath that we have what I do or the services section and, and underneath that an about us section and so on and so forth. No matter what page it is, no matter where it is on your site, you want to make sure that you're getting the vision of your, of your page correctly set up so that every message within each section is clear and concise. Every section, one message. Now that we've gone over our workspace and our tools, let's start actually making some changes to this, to this template to make it our own. And what I'm actually going to do is I'm going to start with more of a global change. So I want to change all the colors of my text on the website. If you remember here on the left, we're going to start with a theme manager. To do that, I'm going to click on the theme manager and here you'll see under colors that either we can change the entire theme of our site. WIX actually gives us some themes that are out of the box and you can choose yourself or we can go and change specific colors. So in this case I'm going to change my blue to be something else, a nice, a nice green. I have the hex code for this color and I'm gonna change that. But if I do have RGB values or an HSB values as well, then I can add those here or I can choose from, you know, the free color picker. What I've done here is you see that I've changed all the elements on my screen that take this design, that take this color here, like our menu, our call to action button and the text. As we'll see in a second, all those now have taken that shade of green. I can do something similar if I wanted to with my text. I can take all the headings and the paragraphs that belong to various sections of my site and change their font, change their color, change their size, and that'll replicate across the website and change everything that's tied into this theme. We won't do that. I actually like this Helvetica. So let's move on and make some more specific changes. Here you go is my green text. Let's move on and first change this, this image. We're going to click on the column itself. And you'll notice that when I click on any elements within the WIX editor that we're going to get this mini action menu that pops up which is telling us exactly what we can do with the elements. So in this case I can manage my columns, the column background, I can click on any one of the other buttons here to change the layout or add effects. And on any element in wix, the action bar at the end is going to have this help button. This is going to take you straight to our, to our help center and straight to the article that deals with that specific element. So here is my column within my strip. I could also search here and find any other article that I need within the WIX knowledge base. But let's go and Change our background. I'm going to click on Change column background. I want to change this to be a different image and I'll be taken to our Media Manager, which is the central place where you can upload all of your content for your site. So things like documents and images and videos will all be placed in our Media Manager. If you don't have media to upload at the moment, by the way, you can also take media from Wix, which is a free library of image assets and videos, and Unsplash, which is also free if you want to purchase any images or videos, you can also do that directly through Shutterstock within our own user interface. In my case though, as I mentioned, I have my own image. I can either import from any one of these places that I have. So Instagram, Dropbox, Google Drive, etc. I have though my image on my computer, so I'm going to upload that and that's just going to take a second and there it is. I'll change my background to be this image and that's going to tie in nicely with the green theme that I'm creating for the site. So we have our image, we have our colors. Let's move on to the text element over here. I've selected it. You'll see that I get my action menu again with the helpful help button here at the end. And I want to change up the copy for, you know that's written in this text element. So we could edit the text directly and change everything that we want here. You'll notice as well that we can change the font size. We can bold, italic and underline text and change its color as well if we wanted to. This is going to be from the same color theme that we've defined previously, but say I'm not a copywriter. Here's where we can use the get text ideas to get some ideas of text that we want in place here. Let's search for digital marketing agency and get some ideas for a welcome text. Create those. We've got some titles here that we can look at and I actually really like this more than your usual digital marketing agency going to use that text and that's been added here to. To my text element. But I'm not actually a marketing agency. We said I'm a consultant. So I'm going to edit that text again. Click on Edit text and change this to be consultant. Great. I like this text. I don't like exactly where it's placed. So the next thing that we're going to do is we're going to move this text by selecting it and dragging it up. And I want this to be at the center of my strip. So here's where our pink lines, as you can see, they've already popped up, come in really handy because as I align my text, you'll notice that the snaps into place and I can let go and that's where it's going to live. I can also move up my CTA button, my Call to Action button, to be more under my text or closer to it. And that's looking pretty nice. One final tip, by the way, for your welcome strip, is to always have a Call to Action button here within the first thing that your visitors will see. The reason is that if someone comes to your website, they come with some sort of intent and they want to know what to do on your site. So placing a Call to Action button here at the top will be very helpful in directing them to what they should do next on your site. Let's move on to our second section. What I do is some nice text, but I don't like its size and I don't like exactly what it says. So I'm going to edit this text to say services I offer. I'm going to select all the text over here and change its size. Let's make it nice and big. Great. Now, within the section, you'll notice that I have five options for services that this consultant offers, but I actually only offer three. So what we want to do is remove some of these sections. I'm going to right click on. I'm going to right click on the strip over here and select to delete it. And I can also use my keyboard to do some of those things as well. So there we go. I've got rid of my lines and I've got rid of my strips, but now I'm left with this blank space that I don't really have what to do with it. I actually want to get rid of it. And this is where our zoom out and reorder tool will come in really handy. You can see when I zoom out that I can get a nice overview of exactly what's happening on my page from top to bottom. You can also see that when I highlight a section, I can move it up and down, I can duplicate it and I can delete it. And if I have an empty space, WIX will notice that and will offer to delete it. So I'm just going to click on delete and there it's gone. We'll exit the mode, go back and that's looking great. Let's move on to our third section, the About Us section. And what I want to do with this, I could do this either in the Zoom out tool or do it straight here as we've done before. I like the section, I like what it's saying, but I don't exactly like the design. So I'm going to just delete this on my keyboard and replace it with a section that I'm building myself. So here I have again my empty space. I don't want to get rid of this. I actually want to place something in its place. So here's where I can use the add strip button, either directly within the editor or the add panel here on the left. This will take us straight to the strip section and either I can take a pre designed section from Wix or a classic blank section which I can add to my site. And here I have my strip. Stretch it out a little bit and I'm going to move it just slightly up. And this is our blank section that we can start playing with and designing it to be our own. If you remember, our top section had two columns, was divided into two. And this is what I kind of want to do here as well. I want to place an image on the right, different to what we had previously in the section that we just deleted. But I also want to put some text on the left. So to set up our section to start working with, to set up our strip, I'm going to click on the layout button within our action bar and add a column. And you'll notice that we get within our columns the exact same grid lines that we saw previously. This column, where I want my image to be, I'm going to change to be a color. In this case, not an image, a color. I'm going to select that same green that we've been working with up until now. And I want to add an image that's going to live within the section. I want to place it at the center and maybe make it stand out a little bit. So I'm going to go to my ad panel here again on the left, go down to image. And right now I don't have the exact image that I'm that I want to work with. Or maybe I want to use an image from the Free from WIX library. I'm actually going to take this image over here and add it to the page. I'll make it slightly smaller so that I can fit within my section. Then again just drag it as we've done previously into the section and place it using my lines. Great. Final thing that I'm gonna do with this image is I'm gonna use the design button and add a frame to make it stand out. Let's move on to our left section over here again, I'm going to go to my add panel. In this case, I'm going to take a couple of text elements, drag them to my editor and place them where I want to. This case, we're going to talk about us. That's going to be the message of the section. Some information about us or about me. I'm gonna also add a decorative line. It's gonna live here underneath the heading. Actually, let's take this and fix this to say about me and add one more text element. It's gonna take contain some paragraph text. You'll see that I'm aligning everything and snapping everything into place so that lives nicely together. Now I actually have prepared some some text previously. So I'm just going to find that and copy that into my editor. Paste that here into into my section. And the final element that we want to add to the section is a button. Again, we highly recommend placing buttons and links along your website so that people can navigate and find exactly what they're looking for. We're going to change the buttons text to say read more because that makes sense if we want to find out more about about this person and we don't yet have one. What to link this button to on our menu. If we scroll here to the top of our website, you'll notice that we don't have yet an about us page. So let's add the about us page as well. And then we'll go back to that button and link it up. I'm going to go here underneath our ad panel to our menus and pages and click to add a page. We could take a blank page if we wanted to if we wanted to start designing from scratch. But we are also offered various templates that come from wix. I'm going to take this one and add it. And you'll notice that when we add the page, we're also tying this in with the themes of the site. So our colors, our fonts, all those things will align straight away. Going to click on done. And I can move this if I want to within my menu, back and forth and place it where I want to. You'll notice that our about section will change in its placement within our menu. But this is looking nice and you guys already know what we'll do on this page we'll go, we'll edit the text, we'll add images, we'll add sections, we'll delete certain parts, we'll customize it to be your own. If you go back to our homepage, we now want to take care of, of that button and link it up to that page. So here's where I'll go. So I'll select our button, select the link, select the page that we want to work with, in this case, about. And that's pretty much it. I'm going to pause here to give you guys some additional tips when, when it comes to creating links. When you're linking to a page on your site, you're going to select page, connect it up, as I just did, and you want to make sure that it's opening within the same window. If you're going to connect this to an external address, say to Wix.com, you want this to open in a new window. And then your website will stay open in the browser of the visitor behind the scenes, they can always return to your site. You can also connect links up to some very cool things like documents, email addresses, and phone numbers. And these are very useful to take your visitors directly to where they want to go, especially email and phone number. If your visitors are on the go, they're visiting from a mobile device. When they tap on the email or they tap on the phone number, they'll be taken either to their default emailing application so they can send you an email directly or they'll be taken to their dialer in the case of a phone number, and they can call you straight away. But in our case, again, we're connecting up to our about page. Let's preview this website and we will see what we have so far. Let's go to the top. Really nice welcome section. The services that I offer our About Me section that we just started creating. Read more and that'll take us to our About Us page. Very cool. Okay, so let's go back to our editor. This is looking really nice. And let's summarize what we've done up until now. We did some edits on our site to make it look and feel like it's our own. We added a page. We edited the colors, the visuals, the text, and this is what we'd continue to do to customize it for our business. Let's move on to the last part of our webinar. And this is where we're going to be discussing the website's back office, or what we call the dashboard. And so to go to our dashboard we're going to go to Settings and then to my dashboard. And this may also be the page that you're going to see when you log on to Wix.com next time or when you log on to Wix.com and select one of your websites. This is the page that you're going to see before you go back to editing. And what this is giving you is quite a bit of information you can see. You have your general information here at the top about your site, the current plan that it's on, and additional site actions that you can take. You can edit your website here using the button to go back into the editor. For some users it may appear here on the bottom left. We have some additional steps that we recommend taking to get your website set up, some analytics, additional suggestions that you'll take further on on your journey. Highly recommend going through your dashboard to getting to know and getting to know some of the parts of it. Some final things that we recommend though setting up on your website before you go live with it is to go into the Settings tab here on the left and go through the first four areas here to make sure that all your details are set. So things like your site's name and your favicon, which is the icon that appears at the top of your browser and on mobile devices as well. Social, social share images and quite a few other things. Your business info, where you are, what your contact information is so that visitors can find you, your region and your language. And if you do want to invite people to work with you on your site, you can send them an invitation and assign a role so that they can edit your site with you. So that's it for today guys. I'm hoping that you got a lot out of our webinar. I'm going to go back here to our slide with the important resources that you may need. You'll also be receiving an email with a recording of this webinar and I highly encourage you to watch it again, pause it when you need to go back and retract the steps and do it yourself. We wish you the best of luck in creating your website and remember that our Customer Care team is here to help you along your journey as you create your online presence. Thanks very much.