Build your website with the Wix Editor | Full Course | Wix Learn

Your website should tell a story about your brand, your products, your values, and you have all the tools to be able to tell that story in an eye catching, effective way. I'm Ali. I specialize in the WIX Editor and throughout this course I'm going to show you how to use all of your tools to build a powerful website that does exactly what you need it to do. We'll cover things like structure and design and how to add and customize elements on your pages. And I'll be walking you through every step of the way, from creation to launch. But before we dive into all that, let's start by looking into your toolbox. Your WIX Editor. To start, you'll need to pick your site either by choosing an existing website to edit, or by creating a brand new site. You can start from a blank slate, get help from the WIX AI, or use one of these as a starting point. And I can browse templates by category, but that doesn't mean I have to choose one that exactly fits my intent or industry. Say I want to create a site for my services and a blog and find a template that I love, but it doesn't have those elements built in. I can start with the template that caught my eye and I can always add those elements to my site later on. I've already created a site that I'll be editing throughout this course, so let's jump into my editor. The first thing you'll see in your new workplace is your canvas. This serves as both a preview and a space to edit your pages freely. Take a look at your left bar. This is where you'll find all of your tools to customize your site and manage your business. So let's go through it together. First we have add elements. This is also where I can add things like text, image, button strip, even decorative elements. I can also add things like galleries, interactive elements, or links to my social media. We'll dive into adding some of those elements later in this course, but all of these elements will live within something called sections on your page. You can see how my site is split up into sections, and I can move entire sections up and down just by clicking here. All of these design elements within the section move along with it. Now I can add a new section to my page by just clicking over here. Whenever you add a section in, they'll come already formatted to fit your site's theme. Another important element is my Pages menu. This includes exactly what you'd expect, the individual pages that make up my site. Here I can add Remove rearrange pages on my site or sort them into folders to keep my site organized. Now let's check out your site design. Site themes are helpful tools that ensure your entire site can, gets and stays on brand by keeping all your fonts and colors consistent. You can choose from pre made color and text themes, all designed to comply with accessibility standards, and I can try out these feature themes. See, when I click on any of these themes, the rest of my site changes in one click. And if I want to change something specific about this theme, I can click colors or text and customize it to fit what I need. We'll take a look at this more in a later lesson, but for now, one of my favorite things about the editor is that I can seamlessly integrate apps into my site without even opening a new window. I can search for any tool that I need or extension I want to offer my site visitors like a chatbot or a translator app. And as my business grows, I can always come back and explore the App Store for new tools to enhance and even monetize my site. And speaking of applications, you can manage all of your business applications right here in the My Business tab. So you saw that you can add images and videos to your site in the Add Elements menu, but your Media menu is where you can manage all of your content for on and off your site. This is my media center. From here I can upload images or videos to my site, see the files I've already uploaded, and edit those images and videos right here. If I want to add any new images, I can upload my own or pick free ones from wix's Photo Studio. You also have the Content Manager and Ascend business tools which are both accessible right from this editor. For more about either of these, we have our Content Manager course and a course on promoting your business where we talk about the Ascend tools. Down here all the way at the bottom you have Layers. Layers helps you get a comprehensive look at everything on your page, from the largest images down to the tiniest design elements. This is a great tool to use when you want to hone in on a specific element within a page, a section or a strip. Now let's move on. The last stop on our tour of your workspace is your top bar. This is where you can manage your settings and your view of your workspace. Let's start all the way at the top here. Under Site you can save, preview, publish, view your live site, and even get a QR code to view your mobile site. In settings you can work on your SEO and even update your business information. In Dev mode, you can add code and under Help you can search the Editor and also search the Editor Help Center. Over here we have Save, Preview, and Publish. Moving down to the next row, we have another Pages area. Unlike the Pages menu in your left bar, this menu is just designed to help you navigate between your existing pages while you're editing your site. You can click Manage Pages here to quickly jump back to the Pages menu and make any changes that you want. When you switch to the mobile editor, your site's design and content will automatically adapt to a smaller screen. You'll be able to make changes just to your mobile site so you can tailor your visitors experience for mobile browsing. Here in the center, you can manage your site's address or domain, sticking with a free WIX URL or connecting a branded domain name. Next we have Undo and Redo. This zoomed out view is great for seeing your entire page all at once. Broken out into sections. This is the best way to reorganize your page without wondering if things are landing in the right place. Once you get more comfortable with your site, this toolbar offers even more tools to get your layout just right. We'll take a look at some of these tools in a later lesson. And last but not least, your workspace has a search bar. It'll help you find any of the tools we just mentioned in a pinch, or find a help article to answer any questions that come up as you build your site. And if you decide you want to edit freely on your canvas, you can always click this arrow at the top of your screen to hide all of your controls temporarily. Now that you have a feel for the workspace, it's time to get creative. In our next few lessons, we'll go over how to use all of these elements and tools to create your dream website, starting with the structure of your pages. Your site structure is one of the most important factors for determining its success. Think about it like a physical store, even if it has the best products, if you have trouble finding and purchasing what you need, you'll leave for the next best option. The same goes for how you structure your website, making sure it's all easy for your users to navigate. So in this lesson, we'll cover how to build out and structure your pages. We'll talk about what components every site should include, what role each plays, and how to build them all yourself. First, let's take a look at the layout of your homepage. A well structured site should follow a format that visitors can recognize and understand. Offer up the most important information first and make it easy for them to take the action you want them to take before leaving. You've got your header here at the top, followed by all of your page content, and then you've got your footer here at the bottom. Everything on your page between your header and footer is divided into sections, and you can get a quick look at your sections by clicking the Zoom out tool here at the top of your workspace. And while we're going to focus on your homepage first, you can get to the other pages of your site using this Pages panel at the top. Now let's walk through customizing my homepage from top to bottom. Your header here is your visitor's main form of navigation on your site, and it should include buttons linking to all of your most important information. Before you begin building your site, try to decide what those buttons will be. What places within your website will your users want to go? It's also about knowing what your users won't need to see right away. You don't want to overcrowd your main menu, so you may have a page like Terms and Conditions, but will that be what your visitors are looking for? First thing, for any header, you'll want to include your logo navigation bar and if you offer products on your site, your customer's cart. If you don't have a logo, you can always create one using wix's Logo Maker. You'll also see that my header is highlighted here in orange rather than purple or blue. When elements are highlighted in orange, it means they'll appear on all of my pages across my site, while the ones highlighted in purple or blue will will only appear on one specific page. So visitors will see my header wherever they go. Let's look at a few ways I can customize this menu. We're going to click on the menu and go to Manage menu and let's click the three dots here beside collections. Each of these menu items is attached to a link you can link just about anywhere within your site, like a web address, any section on any of my pages, the top or bottom of a page, or other resources like a document, or my contact information. I'll link collections so that whenever a user clicks on it, it'll take them to the Collection section on my homepage. You can see here when I click where on the page we're currently set to welcome, so let's adjust it to Collections and press done. Let's go to Preview and see how this works. You can see when we click Collections. It brings us straight to the Collection section. Now let's add another menu item to my navigation bar. I'll do that by clicking my menu, going to Manage Menu, and choosing Add Menu Items. From here I can choose Site Pages and let's add a Sale page. So I click Sale and then click Apply. So now my visitors can easily jump right to my Sale page. Once my menu is all set up. I can also customize whether my header always sticks to the top of my page or if it disappears as I scroll. I want my visitors to have easy access to my header at all times, so I can just freeze it by clicking the header and choosing this gear icon. Here you can see it's currently set to scroll with sites, but I'm going to set it to freezes. Let's go to Preview and take a look at how this works. You can see now as I scroll my site, the header remains. Like we said earlier, everything on your pages between your header and your footer is grouped into sections and a section can be made up of any combination of elements from images and and text to galleries or videos. Basically, anything you add to your site will live in a section. You can move your existing sections up and down to quickly reorganize your site. You can see the buttons here, but let's start with the first section of my site and this is what we call a Hero section. That's the first thing your users will see when they get to your page before they scroll. Each Hero section should have three very important elements. A visual element like a picture or a video, short text to explain what your site is about, and a CTA or a call to Action button. CTA buttons encourage your viewers to take a specific action. An example could be like Shop now, learn more, sign up, or maybe contact us. And an effective CTA should mirror your site theme and design style and include action driven text to entice a viewer to click. For example, instead of something like see our products I've written here, start exploring and the reason is I think that this will be more fun and will likely result in more clicks. If you'd still like to learn a bit more about effective CTAs, check out the link I've included in the Resources tab below. Moving on to one of my favorite tools. This is the Quick Edit tool. I can take any section of my page and apply the changes that I want without affecting the rest of its design. I can change up backgrounds and edit text, all while keeping everything the same. So for example, let's edit this title here you can see it currently says all about us, but let's change it to our story. These changes are all applied to my section in real time, so I can make sure I like how they look on my page while I'm still in the editor. And if I don't like my changes, I can always just undo them in just a click. This tool is great for delegating small edits to other team members, since you can trust that they'll only update the text without altering your design at all. Sections divide up and structure your site pages, but strips are design elements that help you create complex and engaging layouts within those sections. So if I want to create a more exciting layout here, I can do that by adding and customizing strips. Let me show you a little about what I mean. Let's take this strip for example. You can see here that this strip lives inside of my section. And while you can add elements directly to your sections, by adding this strip I was able to create two columns and adjust my margins to create a more interesting layout for my content. And the best part, strips are adaptive, meaning however I adjust my layout, all of the elements within the grid lines will automatically adjust to fit on any screen size. But don't worry about strips, columns, or different screen sizes just yet. We're going to cover all of that in our next lesson. Let's move on to my footer. This is where I can put all of the links my visitors might need. And one tip here. Make sure that this footer includes your nap or your name, address and phone number. Including this information here is good for search engines, and it's helpful for users. I can edit this the same way I edited my header, adding links to pages or sections and customizing my layout. So that was the structure of my homepage, but many sites are made up of at least a few fat pages. I've already gone ahead and added a few pages to my site, but I've also added a link to a helpful article below to help you add the right pages to your site. So let's jump over to my Pages panel. Here I can see all of the pages that already exist on my site. I can sort them into folders or click and drag to rearrange them to keep myself organized. This is also where you can add new pages, but just like your site menu, make sure you map out which pages you want to add and what those pages will include before you start. Planning ahead can help give your users the smoothest, least confusing experience possible. Let's say you want to add an FAQ page. You can click Add Page here. And you can see that you've got some pre designed pages where you can also add a blank page. So let's go ahead and add a blank page. We'll call this page faq. So this isn't one of my most important pages, but I do want people to be able to access it quickly. So what I'll do is set this as a sub page in my menu. All I need to do is go to Manage Menu. I can move FAQ up, and then I'll quickly drag and place FAQ on top of Contact Us. You can see now that FAQ is a subpage of Contact Us. Let me show you how this works in Preview. Perfect. You can see when I hover over Contact Us, that FAQ appears. Let's go back to the editor. I can make a more advanced menu by adding a sub menu to even this menu. So for example, you can have an FAQ page and then a sub menu under that, which splits up your FAQ into more sections. I can also add multiple menus to my site, like adding another menu to your footer. You can do this by going into the Add menu panel and dragging a new one onto my canvas. And while you're working on pages, I can hide them so users won't be able to see them. I can do this by just clicking here. I'll go to Manage Menu. I'll go in and choose the page I don't want to see, click the three dots and just simply choose Hide from Menu. Once you're happy with the setup of your site, you can start diving more into design. A strong website layout can lead your visitors focus in the right direction, pointing them toward what matters most first. Your layouts can also enhance your site's design, create engaging interactions and and bring your content up to date with web design trends. With the WIX editor, you can customize the layout of your site pretty much any way you want. We'll learn how to create a complex layout using grid lines, strips and columns. Let's check it out. To give you the simplest view of your grid lines, let's add a section. We can do this by going over here. Let's add a blank section. Okay, the first thing that I'm going to do is change the section background. Let's go to color and change it to blue. Great. Now we can see the grid lines here on my new section. One on the left and one on the right. These will be on all of my sections from top to bottom. These are so important because they serve as guidelines for where your content should be placed. If you place something too far outside of these lines, there's a chance that it'll be cut off on smaller screens. I'll add a heading directly onto my section. I can do this by going to my add panel. Going to text and I'll choose a theme text. Let's add heading one. I'm going to change this text to new arrivals. I'll change the font color. I'll adjust the text box so all the text fits great. And now let's make sure that it's centered. Perfect. I'm keeping this section really, really, really simple. It's just to show you the grid lines. So I'll also add an image and a button. To add an image, I'll go to add elements. Go to image and I'll go to my image uploads. Let's choose this image. We'll click add to page and then we can readjust it to make sure it's the size that we want. Perfect. I'll also add a call to action button. I'll go to add elements. Go to button and I'll choose one of my themed buttons. Let's choose this one. Okay. Let's go to preview to see how this looks. You can see that as I adjust my screen size, nothing is cut off. Now let me show you what happens when I place something outside of these grid lines. We'll go back to the editor and I'm going to take this button and drag it outside of the gridlines. You can see we get a message here to let you know that you've placed an element outside of the gridlines. And this is why we'll go to preview again. And you'll see as I adjust my screen, the button begins to cut off. If you want to create a design that you can use the full width of your visitor screens, this is where strips come in. So let's go over strips. Strips are helpful design elements that allow you create complex layouts within your sections. And while you can add elements directly to your sections and adding strips helps you create more dynamic, visually appealing layouts to your site. To show strips in action, let's jump here. I created this layout from a simple pre made section and a blank strip. So let's recreate it together. What we'll do here is click add section. You can see we have pre designed sections and also blank sections. I'm going to choose this section here. Believe it or not, this is the pre made section. That I started with when I created my about section. And while it might look a lot different, it only takes a few minutes to achieve the results I have here. First, I can go ahead and update my heading. All I need to do is double click, and in this case, I'll change it to our story. Now I'm ready to start customizing my layout. So first I want to add some white space here. I can do that by just dragging the section down. I can also go to Tools and open up my toolbar, and here I can input the pixels to be very precise about how tall I want my section to be. You might feel tempted to fill any blank space with content, but spreading things out a bit gives your visitors room to breathe between sections, making your layouts feel more balanced. Next, I know that I'm going to change up this layout, so I'll just remove this button and text. Instead. I'm going to add a new blank strip. Here I'll go to add elements, come down to strip, and I'll take a white strip. Okay, let's resize this strip. Again we'll go to Tools, open up the toolbar, and this time let's set it to 500 pixels. Now we're ready to add in some columns. To do this, I can go to Layout and choose Add column. You can see that my grid lines have adjusted and I've got two sets. Now, I don't want this strip to quite reach the edges of my page, so I'll just increase the margins here. I can do this by clicking into the strip, going to stretch, and adjusting the margins. In this case, I'm going to set them as 50 pixels. You saw in my example before that, I have an image in my left column and some text and a button on the right. But two important tips before I add an image. First, I'm not just picking any image to add here. I'm choosing one that complements the overall design of my page, shows off the value I have to offer, and makes sense in this section of my site, for my about section, I'm picking a photo that has a solid background color that matches my theme, shows off my products, and includes members of my team. You'll see, when I add my image, I'm going to make it my left column's background, which makes it fit perfectly in this half my strip. Let me show you what I mean. I'll click into this left column and go to Change column background, and then choose Image. I'll go to my site files, and from here I can choose My image. Now, it fits neatly in this half of the space. Now let's quickly add a solid background color to my other column. I can do this by clicking Change column background. Going to color, and I'm going to choose this nice purple color. And now I have a nice solid base for my text. Now I'm going to add a paragraph. I can do this by going to add elements, go into text, and let's go to theme text, and I'll choose a paragraph. I can just place it inside the column and you can see that it just snaps into place. Let's also add a call to Action button. Here. I'll select one of the themed buttons that already matches my site. Go to button. Go to themed buttons. And I'll take this nice orange button. I'll align it here with the left side of my text. If you're looking for a more complex layout, you can actually add multiple strips that that will live inside of one section. So let's add another strip here. In this case, I'm actually going to duplicate this strip. All you need to do is right click and choose Duplicate. And now you can see I have two of the same strip. Now, if I click on Manage Columns, I can quickly swap duplicate or delete columns, or even add up to four columns in a single strip. I want to create a grid effect. So let's swap these two columns. By just quickly duplicating and swapping the position of those columns, I created a dynamic grid. And I can change the text and image on this new strip the same way. Let's preview it. You can see in preview that even as I make this screen smaller, all the content I added stays within the grid lines and everything is still visible. Plus, the two strips live within the same section. So if I go back to my editor like so, and I click Zoom out now when I move this section up or down, you can see that both of these strips move along with it. We can make our layout even more complex by changing up our column proportions. So let's delete this duplicate strip. Now we'll just focus on this single strip. I want to decrease the size of this section, so I can double click this purple button here and it will snap right into place like so. And then to create some space, I'll adjust the section height to exactly where I want it. Let's go back to the strip layout. Right now, you can see that the columns are equal at 50 50, but you can choose any of these other proportions or set custom proportions to tailor your layout even further. So if I pick something like 4060 and I click on each of my columns, you can see that the grid lines on the left are smaller than the grid lines on the right. So as I'm laying out my content in each column, I still have those really helpful guidelines to keep my layout adaptable to different screen sizes. I'm just going to readjust this to 5050 because I like the way that that looks. The last thing I want to show you about creating layouts is column spacing. Let's say I don't want the image in my left column and the background color in my right column touching. All I need to do is add a little extra column spacing. We go back to our layout here and you can see that I can adjust the column spacing by just pulling up and down. You can see that whatever I've set as my default background fills the space between. And I can also adjust the padding here. This increases the space above and below my columns within my strip, which adds great definition to my visuals. You've customized some of the layouts on your page to create a website that really stands out. And to keep that going, in the next lesson we'll talk about design. We'll go over some of the elements that you can add to make your pages really pop. When a visitor lands on your site, what do you want them to think? How should they feel? Ideally, whatever the answer is will be a reflection of your brand and your business's values. And the way you can create that feeling is through your site's design. In this lesson, we'll talk about how themes, strips and other design elements work together to help you create a cohesive site that clearly communicates your message. Let's start with one of the most time saving design tools in the editor themes. By selecting a pre built theme or customizing your own, you can bring every page of your site on brand in just one click. And they're quick to set up too. I'll show you how I made mine. Let's go to site design. Here we can see my site theme. I'm going to click Customize. There are three ways you can use and customize your themes here. By selecting or creating a color and text theme, by customizing just your color theme, or by customizing just your text theme. So to start, I can choose from any of these pre made themes. Let's test out a few. You can see here that they change in just a matter of a click. Since I already have an established look for my brand, I created my own so here under current theme you can see the colors and fonts I selected to be automatically applied across my site. So now for example, if I were to add a heading to my page, it would already be in the default font that I've chosen. And if I went to change its color, I'll see all of my theme colors right away. To edit just my color theme, I'll just click here. I can add up to five colors, but you should really focus on three. A primary color, a secondary color, and an accent color. And if I click change here under my color theme I can select from pre made themes that will just change the colors on my site, leaving my fonts as is. And there you have it. Or I can create my own theme by clicking into any of these five colors and picking one for myself. And now my text. My text theme is made up of individual text styles for all the different kinds of content on my site. And I can customize each of these different text styles if I want to. Let's take heading one for example. You can see here that I can change its font size, change the character spacing, and even change the line spacing. A few rules of thumb for your fonts use two to three fonts max. This keeps things looking clean and cohesive, and too many fonts can actually slow down your site's loading speed. I always recommend keeping it to just two. One for your headings and buttons and one for paragraphs. Next, make sure your font makes sense for your brand. You may really love a bold, eye catching font, but that might not make sense for say, a minimalist yoga studio. Remember, your design should tell your brand story, so take some time to find a font that really helps to do that. And lastly, and probably most importantly, make sure that your fonts are easily readable. Every font in the editor meets accessibility standards, but make sure you're using those fonts where they make sense. Bigger, bolder fonts make great headings, but could be hard to read in a paragraph. If you want to learn a bit more about choosing the right fonts, I've linked a helpful blog post in the Resources tab below. Once you're happy with your color and text theme, you can apply it to your entire site in just a single click. Now let's go back to our site design menu. I'm going to show you how I selected my default background. You can see here I can change my background to a color. In this case, I'm going to change my background to an image. Let's go to site files and I'LL select this image. You can see that the background changes throughout the whole page. I actually don't really like this much, so I'm going to undo. If you're not sure what to choose for your background, I've included a link in the Resources tab with a few popular site backgrounds and some really helpful tips to help you remember. You can always come back and customize all of your theme and background settings later on, and even create multiple themes for things like seasonable campaigns or an updated brand identity. And you'll always have the option to switch back to this look with your original theme. We've talked about sections and strips quite a bit already, but let's recap. Sections are the building blocks that structure your pages and divide your content into meaningful segments. Everything between your header and your footer lives within a section. Meanwhile, strips are design elements that help you create complex layouts within your sections. And when you use strips to design your sections, you can create unique visual layouts that help your content become more eye catching and organized while helping your site flow naturally. In our last lesson, we created a layout for my about section using strips and columns. Now let me show you how I can add a bit of design flair to that same layout. You can see here in our completed section. There are a few things that make the design of this section work. My fonts and colors are all on theme, which helps it flow seamlessly with the sections above and below it. I also have a mix of design elements here like text, an image, vector art, and a gradient, all without overwhelming the page or having too much going on in the space. So now let's go back to the section that we laid out together and walk through how I designed it. First I want to update the color of my heading and bring it on theme. All of my theme colors come up right away. Let me show you. I just go to edit text, go to color and here I can see all of my theme colors. I'll choose this color. Now I want to add that star shape that I have in a few other spots on my site. This is called vector art and it's a really simple tool to add a professionally designed look to your site. Try choosing one simple shape that you like and using a few places across pages like I did here, essentially making it a part of your brand. Here's how you can do it. You'll go to the Add menu and you'll come down here to decorative. In here you can see vector art. Let's go to Featured, but let's go to all Vector art to see everything that we have. Let's say you're looking for a specific shape. You can type it in here. Then you can just scroll down until you find exactly what you need. I'm going to choose this star here. I'm going to drag it and align it with my text. Now I can adjust the vector art design and I'll choose this central theme color. Similar to my images. I can find any vector art I've already used in my site files. I could stop designing here, but I really want to have those colors from my other sections above and below flow into each other smoothly. So I'm going to make this background of this entire section a gradient with my brand colors. First, I'll just slightly adjust the section background, and now I'm going to go to change section background gradient. Backgrounds in the editor are really effective for creating unique branded visuals and adding contrast and energy to your page. Plus they add a feeling of movement to your site. In here I can choose gradient. Here we have linear gradients, radial gradients, but I'm going to choose fluid gradient. This is because I want my background to feel a bit more organic. You can see here that I can drag these points and it changes the way the design looks. I can add unlimited colors here, and I can also change the way they scatter on the page and adjust all of these settings. And I can save this new gradient to my site files so I can use it again in other sections, in slideshows, on lightboxes, or anywhere else on my site. And that's all it takes to design a dynamic section like this. Even after you've created your layouts and designed your sections, you'll still need to maintain your site content over time. Luckily, it's a much simpler process when you can use your Quick Edit tools. To show you how these work, let's scroll down to my Special Offer section. Every section has this Quick Actions bar that allows you to move an entire section up or down on your page in just one click. This is also where you'll find Quick Edit tools. Here we can get a quick overview of all the elements in the section and change them here on the side without even touching the canvas at all. This is great for when you or someone on your team just wants to update the text in a section without worrying that you'll accidentally move something or change your design. So here we have our Special Offers section. Let's say I want to update this with a different offer than my store is currently promoting. I can just change the text here To Summer Sale, for example, I can also change the paragraph text, and I can also change the button text if I want. The background I have here isn't looking too great with this layout, so let's change it. Okay, so. So this image doesn't exactly fit into my shape, so I'm going to click out into the Layouts tab. This feature uses AI to identify all of the elements in a section and suggests alternative layouts for your content. You can see that there are so many to choose from. With just one click, I can transform my entire section into any of these alternative layouts, all featuring the exact same content, images, and other elements that are already in my section. Some elements on your site are so important, you'll want to keep them in view from anywhere on any page. And you can do that by pinning objects. One of the most common objects to pin is the social bar, and for good reason. Most people who want to connect with a brand start on social media. So by pinning a social bar, you're making sure that anyone who lands on your site can keep in touch with you, however, and wherever they prefer. Here's how we'll do it. Let's go to our ad panel. We'll go to social, and let's choose this social bar. There are a few things I can do to customize the design here. I can go to layout, and I can make the element vertical. Horizontal. Let's choose vertical. I can also adjust the icon spacing, and I can change the icon size. I can even upload custom social icons that match my theme or branding. Once I like the look of my bar, I can link it to all my social accounts and then I'm ready to pin it. All I need to do is right click and choose pin to screen. Let's set it here on the right. You can also adjust the horizontal offset and the vertical offset, but I think it's perfect where it is. Now, as I scroll my page, you can see that it stays in the exact same spot I picked. And if I want to apply this item on all of my pages, I can right click and just choose show on all pages. You're all set to start customizing your site's design. And now that you know the basics, the possibilities really are endless. But there's still one more crucial piece that needs to be designed, and that's your mobile site. Mobile users make up more than half of global website traffic, and that number is only growing. That means if you aren't optimizing your site for smartphones, you're missing out on a huge part of your potential audience. And while everything you design for your desktop site is automatically adjusted for mobile, you can actually make mobile only customizations with the editor. Let's get started. So here in my editor, I'm going to go over to my mobile view by clicking on the icon at the top. The main thing you'll want to focus on when you are designing your mobile site is speed, making sure users get what they need as quickly and as easy as possible. Things move faster on mobile and your website lives on a smaller screen here. So with that in mind, here are a few best practices. First, you want to minimize the scroll. So for example, I can lessen the spacing here to cut down on the amount of scrolling my users will have to do as they go through my site. All I need to do is click my repeater, click layout, and then I can adjust the vertical spacing. This about section looks great on my desktop site, but my visitors want to shop and I want to bring them there quickly. So this doesn't need to be here on my home screen. Instead, I'm going to click this section and I'm going to click hide. This will only hide this section from my mobile view and it'll stay exactly the same on desktop. But let's say I don't want to hide this. I'll go over to my hidden section on mobile and I can click this and it brings our story back. And I'm just bringing this section back to show you the next best practice, which is to get rid of large blocks of text on your page. They can overwhelm your pages on mobile and slow down your user's browsing experience. So there are a few things I can do here. I can make this block of text smaller by clicking on this icon. This will change the text on mobile, but again, it won't affect my desktop site. If you do this, make sure you keep text large enough to easily read. No one should have to zoom into your website to read it. I don't think this text works for mobile users. Instead, I want to create a completely new paragraph just for people who are browsing from their phones. So what I'm going to do is I'm going to hide this text here. Now, a really cool feature here. I can add an element that will only show up on my mobile site. It can be an image, buttons, anything you see here. In this case, let's add some text. Let's go to our theme text and choose a paragraph. We can place it here and quickly adjust the text let's also make sure that the text is centered. Great. You can also see that my CTA button here is really large and eye catching. Clicking a mouse is so much more precise than clicking with your thumb. So on mobile you have to make sure that buttons are big enough to click and spaced out enough so that users don't accidentally click the wrong one. Another tip for mobile, you'll want to keep all of your headings large so that users can see them at a glance. Let's say I want to make one of these bigger. I can do so by clicking this button here. So, speaking of browsing, you'll want to keep your site menu handy for users no matter where they are on the page. Let's take a look at the header you can see here. If I click the three dots that my header scroll is set to scroll my site, I'm going to change this to freeze. This way my users will have my site menu on their screens at all times. I can also click on this expandable menu or hamburger menu and see how it will look on mobile. You can see here that the text is a bit too close together, so let's adjust it. It's great that I can edit from here, making sure to keep this mobile menu clear and simple again for quick navigation. Now let's talk about a few tools I can add to my mobile page. In the name of speed, you have a few mobile tools that will help your users quickly move through your site. Let's take a look at our mobile tools. Here you can add a back to top button. This means that visitors can click on it to jump back to the top of your page. Let's also add a quick action bar. Visitors can easily access any of your contact information from here. You can edit which actions will show up here. Whether that's your contact information or social media profiles. Let's click the design icon. You can also change up the design just as easy as this. Okay, so another trick. Like I said, things move faster on mobile. Users on their phone don't like to see a blank screen as they wait for a site to load. So. So a hack here is that I can create a welcome screen. This will show up and give my website some time to load behind it. So let's add one. I can customize what they'll see as they wait, including what the screen says, how it shows up the colors, and any animations. With all these tools and design elements, you have everything you need to optimize your site for mobile users. In the next lesson, we'll cover another essential media. Adding media to your website does just make it look better. It can also encourage people to come to your site, buy more products, and interact with your pages for longer. In this lesson, we'll talk about a few types of media, including images, videos, and vector art, and how to customize each to make them really pop on your site. Let's get started. Your media center lives right here. From here, you can upload your own visuals from your computer or social media accounts, and once you do, they'll show up under your site files here, scrolling down. You can edit your photos from here and even create your own videos. And if you don't have images of your own, you can choose from the thousands of photos and videos in the WIX library or use stock photos from Shutterstock. I like how this piece of luggage on the top of my site looks, so I can search for suitcase up in this search bar or I can find the one I like in my site files. Let's go to show more and let's choose this suitcase. I'm going to drag this further down the page. You can see that this image quickly and easily moves between sections with no problem. So let's find a good place to put it. Let's place it here for now. Okay, let's quickly adjust its size as it's a little big. It's also not exactly what I want, so I'm going to customize it a bit by opening up the Photo Studio. I can do this by clicking Settings and go to Adjust. You can see that there are a lot of things you can adjust here, such as the brightness, contrast, highlights, shadows, all of the above. I want my image to appear without a background, so I'm just going to go to Cutout and choose Auto Cutout. Okay, let's click Save and there we have it. Now I can just drag it into place if I want to add a frame to my image. I can also do that by going to Design and you can see here that there are different frames that you can choose from. I can even add some movement to my image, but I'll get into all the options to do that in our lesson on animations. Lastly, I can add a link to the image to bring my viewers to the next step when they click on it. So that's adding a single image. But what if I want to add a gallery of images to my site? Here's how I'll do it. First, I'm going to go and add a blank section. I'll click Sections and click Blank section. Let's increase it slightly. Okay. Now I'm ready to add my gallery. To do this, I'll go to the Add panel. Come down to Gallery and you can see that there are different ones to choose from. I'll take this slider gallery. Let's add a few of my pictures. To replace these, we'll go into Change Images and we can easily delete the images here. Just by clicking Delete, we'll go into Add Images and let's add some of our product images. All we need to do is click them and press Add to Gallery. Great. I'm also going to stretch this to fit my whole page. So I'll click this stretch icon here. Let's open up Layout. From here I can customize my layout until it matches what I need. For Ecom stores like mine, I added a product gallery that visitors can directly click and shop with. You can see mine here in Best Sellers. To add your own, all you need to do is go back to the Add Elements menu, come down to store and you can choose a product gallery. Now let's talk video. Whatever impact an image can make on your site, video can do the same tenfold. And there are a few different kinds of videos you can use in different ways on your site. Let's add a blank section. We'll go to Add section and choose Blank section. Now we're going to go to the Add panel and go down to Video and Music. You can see that there are a lot of different options. First, I can add my own video or add in videos from YouTube, Vimeo or even Facebook. The same way I added images. There are even pre made videos you can use from wix scrolling down. Here we have video boxes. These are great design tools to liven up your site and add a bit of movement to your sections. Along with video masks which cut videos into shapes for a really unique visual effect. And we have transparent videos that feature an invisible background creating an animated look that jumps right off the screen. Let's start by adding a transparent video. We'll go over here to more videos. I'm going to choose this asterisk. It's a little big, so first let's make it smaller. Okay, now that it's added, let's take a quick look at the settings. I can choose how I want my video to play if it starts automatically or on a click or hover, along with how it pauses and ends. Let's go to design. I can change the color by clicking this recolor video toggle on and then click Custom to Customize this completely. I can even add an animation. But let's skip that. Since there's already enough movement here. Let's preview to see what it looks like. This looks great, but maybe let's try a video box instead. I can take this element and click delete. Now I'm going to go to my add panel and I'm going to come to Video box. I can click more videos and I'm going to search Travel as that's what my site is about. Let's take a look at what's available. Okay. I think this video will be suitable. Let's click Add to page. So as opposed to adding a YouTube video with its own link and branding to your site, these video boxes really tie into the rest of your site's design. Just like the transparent videos, I can click to choose its settings and behaviors and customize the design. I'll have this one play when someone hovers their mouse over it. I can do this by going to behaviors, clicking how does it play and choosing on hover. And with a video box, I also have a really cool option which is that I can mask my video. That means I can have it appear inside one of these shapes. I like this one. Okay, so back in design, you can also choose a cover image. Okay, let's go to design and let's look at Pattern overlay. I can add an overlay to my video for an extra pop or to help it better tie into the rest of my site. Great. Let's see how this looks in preview. Awesome. As you can see, there are a lot of options when it comes to adding video to your site. But just be careful with how much you add so you don't slow down your site's performance. Okay, onto another fun feature. You can see here that I have a number of stars throughout my site. They add an extra pop to my site's design. This is called Vector Art and I'll show you how you can add some for yourself. Let's go over to our add panel and we're going to come to Decorative. You can see here that there are loads of different options under Vector Art. Let's go to Featured and go to all Vector Art. Here we can search for Star. Great. And here's the star that I need. Let's go ahead and add it to our page. We can also drag this vector out up throughout our sections with no problem. So let's add it up here to our collection section. Just like any other media, I can customize this to match exactly what I need. So I can change the color. You can see here that I see all my site theme colors. This is really good as it keeps my branding here consistent. But I can make it any color I want, really. So let's choose orange for this one. I'm going to add animation. I'll come here and click animation and I'm going to choose fade in. Great. Let's see how it looks. Perfect. Throughout this lesson we talked about how to add all kinds of media. And you can see on my site how much images, video and art add to a page. But I also want to show you this. Under my collection section you can see that I have these categories and they all have the same look and feel and interact in the same way. These are called repeaters and they're a really great way to organize your content so that it looks great and is fun for your users to interact with. There are plenty of ways to show off your products, collections and content on your site, but there's one visual element that helps you display them in a customized, cohesive and eye catching way. Let's take a look at repeaters. Let's go to preview and we'll take a look at the collection section. Here's a repeater that I made for my ecommerce site and you can see that each of its elements is formatted the same and has the same hover interaction. I use this to organize my products, but any website can use one of these to organize things like blog posts, events or services. So in this lesson, I'll show you how to create one yourself. Let's get started. First things first. As I said, a repeater is essentially a list of items that have the same design and layout, but different content in each. And they look great no matter where they're appearing. Since they're adaptive to different screen sizes, let's add a blank section. Perfect. Now we have some space to add our repeater. We'll come down here to interactive and come to hover repeaters again. You can see that there are a number of different ones to choose from, but let's take this one and it's added to the section. Each hover repeater contains a slightly different effect that animates its items when you hover over them, making them stand out even more on your page. And if I want to delete or add more items to this repeater beyond the three I can see, I can just do this, go to manage items, click these three dots and I can duplicate or delete. In this case, I'm going to stick with These three. Now it's time to customize it. So let's say I want this repeater to be about some of the services my shop offers. The first thing I'm going to do is expand this section so that I can add a heading. This is so that my site viewers will know exactly what they're looking at. I'll pull the repeater down, go to the add panel, and come to text. From here, I'll choose one of the theme texts. Let's choose heading one. Now I'm going to adjust this text to say services. My services include personal shoppers, monthly memberships, and monogramming. So I already went ahead and edited my content to reflect that. And like all text, I can do things like change the fonts, font sizes, color spacing, whatever else I need to to make it look exactly how I want it to, as you can see here. So this is what my content will look like when it isn't being interacted with. But I want something to change when a visitor hovers their mouse over each of these items. So all I need to do is go to repeater and come here to hover here. You can see that when someone hovers over their mouse, a link appears at the bottom. So I'm going to change this text. So now I've set my content for both when someone is hovering over my repeater and when someone isn't. I can take this even further with another cool trick. I can actually connect one of my content collections to this repeater to learn all about how to work with the Content Manager and repeaters. We have a full Content Manager course. I'm going to link it in the resources section for you. Then once I have my content ready, I can move on to design to make changes to the overall layout of my repeater. I'll highlight the entire thing. I can then click this layout icon. This is where I can change things like how my repeater appears on a page and how much space is between each item. Next, I'm going to add images. Let's take this first repeater. We'll click into image and go to change image. I can choose any of these from my site files. I'm going to quickly change the other images also. So let's add sunglasses here and let's add some ear fonts here. I can also change the background color of this box by picking Change Background and I can choose a solid color, a gradient, or an image. But I'm going to leave mine as is. I can also click on design here and add a Border. Let's take a look. You can see that you can change the color and you can also adjust the width of the border onto hover interactions. I'll click on hover again to show what the design will look like when a visitor puts their mouse over these boxes. Okay, let's see what it will look like. It's on shrink mode now, but let's see Skew. You can press play here to see that it works. We'll keep this on shrink now under timing, I have control over exactly how this hover interaction plays out. So I think we're at a good place with this repeater. Let's preview it to see how it all looks. You can see that when I hover over any of these, all the changes that we made together will apply. So that about covers repeaters. Throughout this lesson, we worked a bit with interactions and animations. And in the next lesson, we're diving deeper into both of those topics to help you create sites that are eye catching, engaging, and fun for your visitors to explore. Adding animations, scrolling effects, and interactions to your site creates a really engaging experience for your users. And the more users engage with your website, the more likely they are to click around, read your content, buy your products, or sign up for your services. So this lesson is all about all of those interactions that will make your site pop. We'll cover a few topics, from scrolling effects to interactions, animations, and finally lightboxes. We have a few different kinds of scrolling effects you can use to add movement and create a flow that's fun for your users to explore. So let's take a look. First, we'll come over here and go to preview mode. You can see here as I'm scrolling through my site, all of my sections show up as you'd expect, one after the other. But let me show you how this will change. Once I add some scrolling effects to the site, we'll go back to editor mode. I'm going to come here to collections and I'm going to change this background scroll effect and set it to fade in. Now that I've set it to fade in, this section background will fade in as my visitor scrolls. I could even add scroll effects specifically to a picture or an element, but I don't want to overdo it on my page. So let's spread things out a bit and go a bit further down here. In best sellers, I'm going to change the background scroll effect and this time I'm going to choose fade out. So let's see how it looks. You can See that? As I scroll down the page, my background color fades in. And as I scroll back up, the color fades to white. Down in the bestseller section, the background color fades to white. As I scroll down. As I scroll back up, the color reappears. Hover interactions work when a visitor hovers their mouse over a certain element on a page, and they're a great way to add a bit of playfulness to your site. Let's take a look in preview so I can show you what I mean. I'm going to hover over this button. You can see when I hover my mouse over the CTA that the color changes slightly. There are a few ways to add hover interactions to your site, so I'll head back to my editor. Let's go to the best seller section. I have this Shop now button here and I want to add some hover effects. So I'm going to go into design and go to customize design. Like the button I just showed you. I want this button to change when someone hovers over it. So all I need to do is go to hover, click background fills, and I'm going to change this to this color here. I can also change the text here and I'm going to change the text color to orange. While we're at it, I'll add another type of interaction down here in the next section. I want this entire box to change when someone hovers over it. So I'm going to highlight this box and I'm going to click hover interactions. Okay, let's click get started. As you can see, this highlights the entire element that I'm adding an interaction to and shows me how it'll appear when when it's in hover mode. Just like the button I just showed, I could go in and just change the design. On hover, I can change the background color, the borders, or even add a shadow. But let's go to the design tool here. I want to show you something else. I want to draw more attention to this box. So I'm going to choose a different type of hover effect. Let's go to choose effect. Okay, let's try out grow. I can see how it'll look by pressing the play button up here. This looks good so far. Let's go into preview mode to really see how this all works together. Now you can see that I have my hover animation for my button down here and for my box and both really add some extra depth to my site. Let's move on to some animations. Our eyes tend to seek movement and focus on things in action. So even the smallest animation on your page can lead your visitors where you want them to go. To keep them on your site even longer, I'll show you a few. But when you're adding these animations, just keep in mind that while you can add a bunch of elements, that doesn't necessarily mean that you should. Spacing out your animations will make sure your page doesn't seem too chaotic or cluttered. And it'll help really draw attention to the elements that do have animations. So you can add animations to something like a single piece of text. Let's go back to our editor and try this out. In the best seller section, let's click on the text and come to animations. We can see that we have it set to glide in, so let's choose float in instead. This isn't exactly how I want it to appear, so let's customize it. We'll click customize and let's change the direction and let's choose from the left instead. We can also change the duration and we can also change the delay. Okay, now let's try this on an image. I'm going to add a blank section. Great. Let's increase its height. Okay, now I'm going to go to add elements and I'm going to come here to images. Let's go to my uploads. Let's choose this suitcase here and add it to the page. So before we do this, let's change the background of the section. We can do this by clicking Change section background and choosing color. Great. So I want this suitcase to reveal like it's being pushed into the frame. When I highlight this image, I see it has this animation icon on top. So I'm going to click this. Let's try slide in. It looks good, but it isn't exactly right. So I'm going to customize this one. I can click customize. Now I'm going to set the power. So I'm going to change it from hard to soft. I can also set the duration, which is 1.2, but I'm going to change it to 2.5. Okay, so let's press play and see how it looks. Great. Let's scroll to the top and go to preview. Great. So we can see all of our animations that we've set up, including the fade in, Fade out. You can see our image slide in and our best sellers fade in. Moving on to lightboxes. You may know them as pop ups, but at wix we Call them lightboxes and they're a really powerful way to encourage engagement on your site, as long as you use them right. Lightboxes are often used to gather potential customers contact information like an email address or phone number. But they can be really helpful in drawing visitors towards your goals. You can use them to share important information like deals, promotions or events. So let's build one together. We're going to come over here to our ad panel and let's come down to interactive. Here we can see there are a number of different lightboxes. I want to use mine to promote a summer sale I'm having. So I'm going to go to promotion. I like this one here, so let's click it. Okay, so this will take me into Lightbox mode. So let's customize this a bit to match my branding. First, let's choose the image. I'm going to go to change image. And let's take this image. Great. Now let's change our title. Okay, so you can see here that this is set to paragraph two, but I'm going to change the site theme and I'm going to move it to heading four. Okay, great. We can also adjust the text box to make sure that the font all fits perfectly. We don't really need this subheading, so let's delete it. Also, I don't really need this subscription form, so. So I'm going to delete this and I'm also going to add a button. I'll come over here to my add panel and I'll come to button. I can choose one of my themed buttons and I'm going to choose this orange one. I can just drag it on. And let's adjust the text. Let's change this to shop. Now I'm also going to add a link so that it links to my product page. Perfect. Always make sure that you adjust the button size to make sure that all the text is visible. Okay, it's looking really good. But I also want to change this overlay a bit since it doesn't really match the rest of my site. I'm going to go to change overlay and I'll go to color. I'm going to choose this orange color. Best practice here. I'm going to change the opacity of this overlay so that when it pops up, visitors can still see my site behind it and will know it's a lightbox and that they haven't left my page that they're on. All I need to do is go to settings and I Can adjust it here. Great. So stubborn pop ups can be frustrating. So you want to make sure that your users can easily leave this lightbox too. So what I'm going to do is drag this X onto the box so that they can find it. As you see here, the X has gone behind. So all I need to do is right click and choose arrange and then say bring to front. Perfect. So last thing, setting up when and how my Lightbox will appear on my page. I want this to show up on my homepage, but not right away. I want to give visitors a bit of time on my site to see what I offer before I direct them to my sale. So I'm going to go to set triggers. First I can rename my lightbox. Now I can click yes and choose when I want it to appear. In this instance, I'm going to click first page visitor sees. Now I can go back and set the delay. I'm going to Change this to 5 seconds. Now I can change how it will appear by clicking on this animation icon. There's a few here that I can choose from, but I'm going to choose turn in. Okay, great. Now let's see what this looks like for my visitors. Let's go to preview. Great. So you can see when we click X it just takes us back to the site. If I want to make changes or delete this at any time, I can get to my lightbox by going through my pages in my editor. So we just went through a few features that will really help build your site's engagement. So in the next lesson, we'll cover how to take your site live, Diving into things like your site settings and getting you set up with a domain name. You've put in the work. And now it's finally time to launch your site. But whether you're publishing an update or going live for the first time, you there are a few things you need to take care of before the visitors start rolling in. So let's get started. Let's take a look at some of the most important details behind your site setup here in your settings. All I need to do is go to site, come down to my dashboard. From here I can go to settings and go into my business information. Here I can see a ton of information about my business and my site. Let's set up my business name. So I'm going to type in solar. You can also describe the category which best matches your business. So I'm going to put ecommerce site. You can also add a logo here. So I'm going to click and scroll down in my site files to find my logo. Okay, I'm also going to provide a short description, and if your business goes beyond your site, you can add your location and contact information right down here back in my Settings menu. There's another feature in here that you can and should add once you connect your domain, but let's talk about it while we're here. We're going to come back to our settings and come into Website settings. If you're watching this course on a desktop, you most likely see a small icon right next to the site title. In this tab and any other tabs you have open, this is your favicon. This might seem like a tiny addition to your site, but it can leave an impression that's much bigger than its actual size. For Wix, it's our logo, but for your site, it can be whatever you want. A good rule of thumb when you're uploading your own, make sure it's readable, recognizable, and the right size. Favicons only take up a few pixels on your page, so you want to choose the smallest version of your logo here, even if it doesn't include any text. And if your site name doesn't fit in your favicon, it's totally fine since it will be displayed right beside it in the tab anyway. Just below your favicon in your settings, you can add a general social image. If you manage or connect your social account through your wix dashboard, this will automatically share your selected image on your profiles. And if you haven't connected a Facebook profile yet, you can do that right here, too. The last tool here in your settings is an important one. Your site history houses all of the changes you've made to your site up until this point. Unless you restore your site to an older version, this is a huge time saver for things like removing seasonal branding after the holidays or undoing a handful of changes all at once. Next, you'll need to connect a domain to your site. You might know it as a URL, but a domain is the name or address that viewers and search engines will use to reach your site. For example, Wix's domain is wix.com when you're choosing your unique domain name, make sure it's easy to type, spell, and pronounce. Easy to remember. Every week's site comes with a free domain, which is great if you're just starting out and aren't ready to invest just yet. But once you're ready to step it up, you can either buy or connect a custom domain to your site. If you're having trouble coming up with one on your own, WIX has a domain name search that can help you find the right one and we'll check that it's available. I've linked to the domain name search in the Resources tab, and if you want to learn a bit more about what makes a good domain, I've also included links to a few helpful articles below. Once you have a name, you can connect it right from your editor. I've already connected mine as you can see here, but if you haven't, you can just click right here. Or we can head over to the Domains menu. Here you can see I already connected a primary domain. This is a great example of how you can get creative with domains using something a bit more Fun than the regular.com format. But a site isn't limited to just one domain. Adding a second or third domain to your site just creates more ways for your visitors to find you. So for example, I might want to buy this same domain with.com in case someone searched me that way. And if that domain is available I can buy it right here. And lucky me, it's available. So I can just click get it and I'll be brought right to a purchase page to make it my own. Keep in mind, it can take up to 24 hours for a new domain to connect to your site, so if you're planning a big launch, I always recommend doing this step a few days in advance. Alright, it's time for your last few looks before launching. Go ahead and jump into your preview to make sure everything is exactly how you want it. Even if you've been previewing your changes along the way, there are a few things you'll want to double or triple check as you preview all of your pages. First, take a few minutes to read over your text and check for typos. This is also a good time to make sure any choices you made with your text are consistent like words you want to capitalize. Next, double check your links. Click through your site menu, your buttons, your images, and anything else that you've linked. Make sure the links are working quickly and take visitors where you want them to go. Then take one last look at your Accessibility wizard to make sure your site will be easily accessible for all your visitors before launching. And lastly, make sure you preview your mobile site as well, both for the smaller screen layout and especially if you changed any of your site's text or content for mobile. Once you've previewed everything and it all looks good, it's time to click Publish. So let's quickly recap. In this course, we created, laid out, and designed a web and mobile site built with best practices and accessibility standards in mind. All of the tools we learned to use in this course will always be right here in your editor, so as your business grows and evolves, your site can ride along with it. And if you're looking to pick up more skills as your site grows, check out our library of courses to help you manage and grow your business with wix on wix Learn. Thanks so much for watching.