Webinar: Get Started with Wix | Wix ADI

Hi, everyone. My name is Yoav and it's great to have you here. In today's session, we'll be walking you through the basics of creating your online presence. Now, I know that creating a site for the first time might seem like a challenge, but I'm here to show you how to get started. Today, we'll be focusing mainly on creating and designing your website, which is the first step in your online journey. But behind your site's design, there are powerful business solutions and we won't take a deep dive into them today. But do encourage you to poke around your WIX account and your dashboard and see how you can manage and grow your site with us. So I'm going to share my screen and we're going to get started. Here's what we'll be doing today. I'll be showing you how to generally navigate through our platform. We'll then be walking through the ADI workspace and discovering what page structure and sections are all about within the editor. And we'll be going over the basics of customizing each of these to make the site your own. Now, we also want to give you guys a couple of important links to take with you on your WIX journey. First of all, support.wix.com is our help center where you can find articles on basically everything regarding wix. The starter hub is where you'll be able to find various tips on creating, managing and growing your online presence. And Wix.com contact is our customer care center where you can reach experts for specific questions regarding your site. So let's get started. I'm going to start on this page, what we call our My Sites page. Now, when you log into Wix.com, if you have more than one website in your account, this is likely the page that you're going to see. If you have a single website in your account, you may see its dashboard. And no matter where we are on any one of these two pages, you want to find the Create a new site button on your dashboard. It's going to be here under Site Actions and Create a new site or on the My Sites page here on the top right. So we're going to click on that button and get started. Now, today we'll be creating a website for a digital marketing agency. And what you're going to be seeing on my screen is pretty much going to be the same flow that you will, that you will be seeing. There may be some subtle differences here or there, but it's pretty much going to lead us to, to the same place and that is to that that will be building a website with the ADI tool. We're first going to categorize what kind of website this is going to be because I'm building a website for a business digital marketing agency. I'm going to click on Business. We'll then choose the tool that we want to work with and we'll be using our artificial design intelligence tool, our adi, to get a website up and running pretty quickly. But we also encourage you to experiment with our drag and drop editor where you have a lot more design freedom and features. So again, we're going to start here today with the adi and this is going to be a two part build. First, we're going to start here with our wizard. We'll be inputting some information about our business and this will include information, some design preferences and layout preferences. We'll then move over to the actual interface where we will be customizing our site. So let's get started. We'll give the niche that we're looking to create a website for, in this case for a digital marketing agency. You'll notice that when I start typing here, the dropdown is going to give us various options. And this is because ADI wants to build and structure the website for this specific niche. It will also suggest that we add various features for this specific niche. When I click on Next, we'll be offered to add various apps to the site. In this case, WIX is offering to install bookings, which is our solution for managing your time with your clients, as well as chat, which is a power drive in terms of conversion. So we recommend using our chat feature as well. We could mix and match any of the features that we see over here. And we can also do this when we get to the actual user interface. Anything that we choose to install here, whether it's at this stage or the next stage, is going to be a one click install and one click uninstall. We'll click on NEXT and give a name to our business. I'm building a website today for Digi and we can attempt to import information if we do have a current website for migrating ooh, from a previous site. I don't have, so I'm going to skip that. But I do have a Google place. Now. I'm just going to use the WIX office in Tel Aviv as an example, but if you have information from your own Google place, you can just put that in here and you'll already see that that information is going to be populated on this next screen. So like our address Here. Now, if we're missing any sort of information from our Google place, we can add that. I'll just add a placeholder here for my phone number. And I'll just add a social link as well, so an Instagram link today. I'll also add our logo. And if you do have a logo, I recommend uploading it at this stage. You'll see why in a minute. But up until now, we've given information to the adi. The ADI is going to take that info of our business and keep it behind the scenes. And we'll see when we get to the actual builder where that's going to place that information. Right now, we'll click on next and start making some design choices. We'll get an initial theme that we want to work with. This is by no means all that the ADI offers, but it's a good starting point. I'm going to choose Inspire and click Continue. And if you remember, I spoke about something cool with our with our logo that we're going to do. And here it is. Instead of using the colors that we get from the theme that we selected, we can choose to create a color palette from our logo. And this is going to brand our website based on those colors. So this is my favorite screen of the ADI Wizard. I'm going to create a color palette from my logo and use these colors. The final two decisions that we're going to have to make here in the wizard is number one, to select a homepage we can scroll through and see here various designs. Again, this is just a starting point, but I want us to take something that's as close as I want to the starting point that I want. I'm going to choose this design and then select any additional pages that we want to add to our site. So an About Us page is a good idea. Projects and contact us. And that's pretty much it for the first stage. What ADI is going to do right now, once we've given all the information, it's going to put the final touches on both the desktop version and the mobile version of our site. And in just a second, we're going to see that website within the ADI user interface. And there it is, guys. Here is the first draft of our site. You'll see that we have here our logo. We have our social links that we added. If I scroll down here to the bottom, you'll also see our phone number that we entered. And that's looking like a really good starting point. Now, before we get to editing our website, let's talk about the tools that are available for us in the abi. I'm going to start here at the top on the left. We can navigate between the different pages that are currently on our site. Here's where we will also edit our menu. In a few minutes time we can add sections to our page, new pages and also apps. I remind you all of this is going to be a one click install and one click uninstall. We can edit the design of our website, including the colors and fonts that we currently have and manage everything that is currently installed on our site. We can undo and redo Control or Command Z or Control or Command Y. Your keyboard shortcuts will also work, so feel free to use them. And you'll notice that we don't have a save button. We just have a message here that is saying saying that our changes are saved automatically. So don't worry about clicking to save. We'll do that automatically for you. And if you do regret a lot of changes that you made, you want to go back to a previously saved version from a couple of days ago from a couple of weeks ago. We also have a site history tool which you can pretty much use to go back in time and go revert to previous saves if you'd like. On the right hand side we have the desktop and mobile versions of your site. Once you complete the desktop version, we recommend adapting your website for mobile. This is because a lot of the traffic that's going to come to your site is going to be from mobile devices, so you want to make sure that that's looking great for mobile as well. We have two help buttons, one here at the top and one here at the bottom. If I click on this button you'll see that we are taken to our knowledge base here which we can search for anything related to the ADI and wix. We also have tours of frequently used features within the editor that you can do and popular articles that are worth reading if you want to get some help in onboarding and using the tool. Next to our Help button we have our site menu. This is like the high level management menu of our site. From here we can go to some places like our Dashboard and our site history tool. And I just want to point out here that if you do start using the ADI but want to move the website over to the Drag and Drop editor with the design features design freedom that we have there with Drag and drop you can move your website over by switching to the editor. Now one thing to take into account is that if you do make any Changes within the WIX editor, the drag and drop editor. You won't be able to bring those back here to the adi. Next to that we have our preview button. What we'll get here, and we'll, we'll use this as well in a couple of minutes, is an internal preview of what our website currently looks like. This is going to include all the links that should be working, the videos that should be playing, the images that we that will be uploading, and next to that is our Publish button. What this will do is create a live URL of our website, a live address that anyone can visit. So we do recommend that you click on Publish to have a live version of your site as you're building it. First of all for you, so that you can view your website on different devices and make sure that it's looking awesome and that you can send to friends and family people who you want to get feedback from and help them give you feedback on creating your site as you build. Let's look at our workspace. We'll go here from the top to bottom. At the top over here, we have one important section known as the header. This is where our logo and our menu and our social links and some other stuff is going to be. At the bottom we also have another important section called the footer. Now the header and the footer are going to appear on every single page and we want to make sure that we're getting these two sections right at the top, it's going to be important to make sure that your navigation is clear and understood. And at the bottom, we're used to seeing as website visitors, things like privacy policy, contact information, those sort of things. So you want to make sure as well that your footer contains that information. Between the header and the footer, you will see that we have different sections and each one of these sections is going to tell us a single specific story about our website. So here we have Digi welcomes you. This is our welcome section. We have an our about section and some other sections over here which we'll get to in a little bit. If we want to change the order of our page, we can use here, move down and move up buttons for each section and also duplicate, move it to a different page, adjust height or delete it. So we'll be editing our sections in a little bit. But I think now it's time for us to start making some changes. And these I'm going to start with making some global changes to our site. If you remember, we chose an initial color theme we can see that here in our fonts, but I want to customize the colors of my website throughout. First and foremost, I'm going to go to my design button here at the top and click on themes. In the wizard, we had six themes that were available to us, but you can scroll through here and see additional themes that you can get live previews of. I'll click here on Prestige so we can see what that's going to look like. It's going to change the entire design of my site here just with a single click. And if I wanted to see additional themes, I can just again by scrolling through here and selecting them. But if I want to now further customize this theme with between our fonts and our and our colors, we can customize each one of those sections here by clicking on this button and selecting each one of these. So I am going to first go to my colors and if you remember, we had our logo color palette that we that we uploaded. And while I want to keep the fancier that the theme kit is giving me, I'm going to revert back here to the logo palette for colors, and that's going to give us a very similar color palette to what we had before. But again, with the new fonts that we have for this theme, if I wanted to further edit what this website is going to look like, I can change its color mode. So right now we're on light and vibrant. We can switch modes to be dark or mixed. And this is what we had previously when we started our build. But I like the light version actually more and I'm going to stick with that and also stick with the vibrant colors. I could also customize the fonts. As we said before, I like what this looks like. I like the prestige font, so I'm going to keep that. But if we did want to move between various fonts and change those up as well, we could. Here's a reminder as well that our site is being saved. I'll just click on Got it. And we could get back to our build. And one important thing to note here between our colors and our fonts is that this is going to be a kit that is going to follow us throughout the website. So I don't need to guess what kind of fonts I'll be using down the line. Wherever I go and I change my fonts, I'll be reverted back to the same font as well. And this gives us a really nice seamless design throughout our site. So that's looking really cool. What I recommend that we start doing now is looking at the layout of this homepage. And if you remember, we said that we have our welcome section. It's giving us the welcome over here and about section. And then we have our booking section. This is from the app that we installed in the Wizard. But I actually want to add an additional additional section between about and bookings. So I'm going to click on add a new section here in the user interface. And it's also going to be the same as using the add button here at the top. And I want to give some information about my team. I'm really proud of my team. They do a great job. And I'm going to choose to add them over here and choose a specific section design. So I'm just going to click to add that. That's going to be added between my about section and. And my booking section. And now it's time to go and customize this section that we've added. Let's start here by looking on the left. We're going to go from top to bottom and customize the design. If I click on section design, I like the layout. That's why I chose it with the people and their names and this like, top, bottom, checkerbox design. But I want to change the colors so I can customize the sections design and again go to color and revert back to those same red and black fonts that we had before with a white background that's looking really nice. And now I can go make specific changes to the content of this section. So this is my team. I said I'm proud of them. And I want to add a header to this section to make sure that everyone knows that this is our team. So I'm going to enable the header title over here and call this get to Know Us. I can put in any text here I want for our title and. And I'm going to not add any subtitle or description. I want people to get to know the people over here. So what I'm going to do is change out River Watts because these are. These are not my team members for the people that I have in my actual team. So I'm going to click on edit and get taken to this specific person's page or this section and again, just use the left panel here to edit that information. So instead of River Watts, I have Ryan Smith. He is our COO and co founder. I'll just add a dash there. And we want to switch out this default image for our own. Now, whenever we upload images to wix and generally documents, videos, whatever it is, we'll be taken here to our Media Manager and this is where we'll store all of those things. So documents, images, videos, all those things will live here in this Media Manager. If we don't have our own images, we could first of all use from our media from WIX library. This is going to be a free library that you can use on your site. And we can import images from Unsplash, also a free library. If you wanted to purchase images, we can use the Shutterstock integration here to directly purchase images within the user interface of the ADI and use that straightaway on our site. But I have Ryan's picture, so let's go and upload that. I'm going to upload it from my computer, but if I did have it stored in Google Drive, Facebook, Instagram, any one of the platforms that we have here on the left, I could import that directly, so no need to download and upload again. But I do have it saved on my computer. So I'm just going to upload his image straight away here to my Media Manager and then insert that instead of the default image that we got in the adi. And I would do this exact same thing for each one of the team members that we have here. I could also remove team members and add team members if I need to. And this again, we would just repetitively go and do this for each one of our members in the section. Let's move on. We're actually going to go back to the top of our page and go from top to bottom and start customizing each one of these sections. As I'm going to start you with the header, I'm going to highlight this section again and I can change its entire design here on the left, as we did before. But here's a tip for using the adi. We can highlight any one of the elements that we have on our website directly and click to change them. So our logo, for example, I want to change its settings and I think this is a little bit small. So I'm going to make it a little bit bigger. I want my logo to stand out. Okay, we'll make it a little bit bigger like that. I'll change the title as well here to say Digi Logo. That's good as well for accessibility and for SEO is to give titles or what we call alt text to our images. And a best practice generally around the web is to connect your logo to your homepage. And that's what we're going to do over here. We're Going to click to link our logo to go to somewhere on our website. In this case, to a page, our home, and to the top of the page. Now, throughout your website, you'll be creating links, and if you'll be linking them up to various places, you'll see that we can connect to web addresses to pages on our site. But if you are creating links to connect to you, meaning to email you or to phone you, you can also link those up here to email or phone. Now, why is this important? This is super important because if someone is visiting you from a mobile device, when they click on that link and it's an email address, they'll be taken to their default email app on their phone already with your address. With your address in the to line, a phone number will take your phone number and put it in a dialer. So all that's left to do is to click on call and call you. So no more of that annoying, you know, copying pasting numbers into dialers or email apps and so on. So we'll click on done here. And I want to make one additional change here to the top section. I'm going to click to customize the design of the section on the left. And I want to change its color to be that same red that we had before. And this is where our logo color palette comes in really handy because the minute I change that color to be red, it's going to take the same color as the background of my logo and apply that to the header. Now, you'll also notice that an additional change happened here on the right. My menu went from being black to being white. And this is because ADI notices that the colors weren't exactly the contrast wasn't working. Well. We want to make sure that our text is going to be clear throughout the site. So ADI is going to try and adjust those colors to make sure that it's always visible and always clear. Let's move on to our next section here, to the welcome section here. I also want to make one or two changes. This is a cool picture, but I want to add my own. So again, I'm going to highlight this image and click to replace it. WIX is going to recommend some images from our library. We could take any one of these. They're free to be used on your website. Or I could upload my own, as we've seen before. But in my case, I don't yet have the images that I want to use on my website from the photo shoot that I may be doing. So I'm going to Go to Media from Wix and I could search here for various media, various images that I want to use on my site. I actually have one here that I really like, this creative arrangement. And I'm going to apply that to this part of my image. Now we're taking a section that is divided into two. We have text on the right and we have our image on the left. And we're getting the center of the image and I want to adjust that slightly so again I can highlight the image here in the user interface directly on the website and adjust the position of it so I can get one of the two sides here with the actual content. So I'm just gonna move that guy over there and that's looking a lot better. We'll make one or two adjustments here to the, to the section as well. The title I want to. Even though I have my. The name of my company here, I want to make it something else. So inspiration lives here. And my subtitle is going to say, welcome to Digi. Our success is your success. And again, you can put in any of your content here, any of your copyright is going to live here. And this is going to be your content that's going to shine. We'll also, and this is again a best practice recommendation that I would suggest to add for the first folder, that first welcome section that you have on your site, it's recommended to add a CTA or a call to action button. So find out more is okay as a label that I want to put there, but maybe I want to just say directly contact us. We want to be directing to the point. And again I'm going to link this button up to somewhere on my site here. I'm going to put it to link up to my homepage. But to take us down to our bookings widget because again we have this app installed, people will be able to book with us directly if it's for a consultation call or whatever it is. Final change that I want to make on this section is I want this CTA button to stand out a little bit more. So again I'm going to highlight this. Excuse me, I'm going to highlight this button over here and select to change its design. I want to take the design that has a bit of a shade here at the background. And now people, when they log onto my website, they're definitely going to see that. What does this look like up until now with the changes that we've made to the first two sections of our page. Let's click Preview and see. I'M going to click on Preview. It's going to generate a preview of our site. This is currently again, internal. This is not yet live. I'm going to scroll down here and click on my button to make sure that that works. That's taking us here to our Bookings section. That's great. And I'm also going to just test my logo over here. So I'm just going to go to Book Online and then click on it. Great. That's taking us back to our homepage. Very cool. Okay, that's starting to take shape now. As I'm going along my build, I've actually realized that I forgot to add a page or I want to add another page to my site. So on the Add button here at the top, we're going to choose to add a page. And we've got a lot of good coverage in the press recently. So I'm going to add an in the news page and take one of the options that we have now. Just like we've done previously, I'm going to add this page. You can go and customize the design, add, remove sections, edit them again with the left panel that we've seen up until now. I'm not going to do that. But what I want to point out here is, number one, that it's taking the fonts that we know, the colors that we know, sticking with that same theme. And it's already added this page to my menu. We do need to make one slight adjustment here. What it's done is the ADI has added the in the News page to the end of my menu. We can customize this very easily because I want to move it to be in the middle of my menu and have Contact Us be on the right. And to do that, I'm going to go here and click on our Pages menu. I can navigate to go to different pages that I'm working on currently, but I want to edit my menu. I'm going to drag this page up above Contact Us. And now it's in the place that it should be. And I'm also going to click here on the three dots and rename this item to Press Coverage. Press Coverage. There we go. If I did want to add additional menu items, I could here as well. So to go to external links, documents and other things. But that menu is looking pretty cool so far. So, guys, to summarize this part of our session, what we've done up until now is we created a website pretty much from scratch using the ADI Wizard. We generated a first draft that if you remember looked very different from what we have over here. We changed the design of our site to be more light and with the colors from our logo palette. We edited our header section, we edited our welcome section. We also added a new section with our team. And these are the changes that you're going to make over and over again on each one of the pages that you have to make the website your own. In the final part of today's session, we want to talk about our site's dashboard. And to get to our dashboard, we're going to highlight here the site menu and click on Dashboard. This is going to open the back office of our site, which is going to be also the page that you're going to see on Wix.com before you start editing your website. When you log on again to wix, what do we have here on the dashboard? We have some general information on our site. We have the next steps that we recommend that you take to get your site set up on the right. Here we have analytics what's been happening on my website, who's been visiting, how many people have taken bookings, and so on, and additional suggestions for your business that we recommend that you follow. One final thing that we recommend that you do before you launch your site is to review its basic settings. By clicking here on the button on the left, you should be reviewing your general website settings, things like the URL, your website's address, the favicon, which is the icon that appears at the top of the browser, as well as on mobile devices, other images and basic settings for your site. Your business info, which includes the information that you put in the ADI Wizard. But it's always good to make sure that that's accurate, the language and region that you're currently working in, and if you do want to invite people to work on your website with you. So you could use our Roles and permissions feature to invite people to collaborate with you and help build your site. So guys, that's it for today. We're going to leave you with these important resources that we want you to save. As for your WIX journey, remember that our Customer Care team is Whenever you would like to ask any question regarding how to build and manage your site, we wish you the best of luck in creating it and we can't wait to see what you'll be doing. So again, thank you very much for joining today and good luck.