How Does Wix Work? A Step-by-Step Guide to Building A Wix Website

Tooltester is supported by readers like yourself. We may earn an affiliate commission when you purchase through our links, which enables us to offer our research for free.

Wix is a popular website-building platform that’s designed for beginners and experts alike. It offers an intuitive drag-and-drop editor that makes it easy to create a professional-looking website without any coding knowledge.

In this step-by-step guide, we’ll walk you through how Wix works, from choosing a template, to customizing your site with text and images. We’ll also cover important features like SEO optimization and mobile responsiveness, so you can ensure your website looks great on any device. And to make it even easier to follow along, we’ve included a video tutorial that demonstrates each step of the process.

So if you’re ready to create your own website with Wix, let’s get started!

How Wix Works: Our Step-by-Step Guide

In this guide, we’ll be creating a restaurant website with Wix, although the same steps will be relevant to most small business websites. Watch our video below, or follow each step below in our written guide.

Try Wix for free here.

Step 1 – Sign up for Wix

The very first thing to do is to sign up for Wix, which you can do here. It’s completely free to do – you won’t have to pay a thing if you’re happy to have a free website using a Wix domain (e.g. yourname.wixsite.com/yoursite). If you need one of Wix’s paid plans, you won’t have to pay for it until after your site is ready.

Next, you’ll be asked a series of simple questions about the kind of site you want to build, and your level of experience.

Step 2 – Choose Wix ADI or Editor

The next step is probably the biggest decision you’ll have to make about your site – should you use Wix ADI and have a site created for you (which you can tweak), or use their templates and Editor (more work, but you have greater design control)? Wix will suggest one of these options, depending on how you responded to the questions in step 1.

I’d personally recommend ADI only if:

• Your website will be very small (1-5 pages)
• You need to get a site up and running fast
• You don’t care too much about not having a lot of control over your design

With Wix Editor, you’ll get plenty more options for customizing your design, as well as access to a far greater range of apps and widgets – so this will be your best bet if your requirements are for a slightly more advanced site.

That’s why we are choosing Wix Editor to continue.

Step 3 – Choose your template

Here’s where it starts to get exciting! Based on the category you’ve chosen, Wix will suggest a few templates – all you have to do is choose the one you want.

Wix has hundreds of modern-looking templates to choose from, so you shouldn’t have any trouble finding one to start with. Remember, the Editor will let you make changes as you need, so don’t worry too much if you can’t find one that’s exactly what you’re after – it just needs to be close.

To preview a template, hover your mouse over it and click ‘View’. Then, select ‘View full demo’.

Once you’ve found the right template, simply click the ‘Edit’ button. In our case, we’re going to choose the ‘Food Delivery Service’ template under the ‘Restaurants and Food’ category.

Step 4 – Get to know the Editor

You’ll then be taken to Wix’s Editor, where you’ll be making changes to your site. If you get a popup informing you about Wix’s Velo platform, you can click out to ignore this – this is something that only advanced users will need.

Next, we want to make sure that Dev Mode is turned off, so you don’t see any unnecessary windows (again, you’ll only need these if you need to make changes to your code). Hover over ‘Dev Mode’ in the top menu, then click ‘Turn off Dev Mode’.

You should be left with a view similar to this one:

If you don’t see the toolbar at the right of the screen, don’t worry – just click ‘Tools’ in the top left, and make sure the ‘Toolbar’ checkbox is actually ticked:

Now, before I show you how to start making changes to your site, let me give you a quick rundown of what it is you’re actually seeing:

1. The page you’re looking at is your website’s homepage – pretty cool, huh? You’ll be making all your content changes – that is, changes to your text, images, and sections – in this part of the screen.

2. If you want to add more pages to your site, you’ll do that in the left menu. In fact, the left menu is responsible for helping you add all the extra things you’ll need on your site – menus, media, forms, blogs, apps, and so on. Click on each of the buttons to get a feel for all the different options available here. We’ll be taking a closer look at how to use this section shortly!

3. This toolbar on the right will help you tweak the appearance of your site’s content – for example, to align or rotate images on your pages. To be perfectly honest, this is probably the section that I use the least, as you can make a lot of changes directly within the Editor (section 1).

4. The top menu gives you access to the backend functions of your website (domain name, SEO etc). It’s not something you have to worry about at this stage, so we’ll cover it in more detail a little later.

For now, the most important thing to know is that you can undo and redo any changes in the top right of this section, as well as save your changes (although the Autosave function will also take care of that). You can also access your Site History to restore previous versions of the site, by hovering over the ‘Save’ link.

Still with me? Great! Let’s start editing your site then.

Step 5 – Edit the ‘hero section’ of your homepage

Pretty much everything you see within the Wix Editor – text, images, backgrounds etc. – is editable. All you need to do is double-click an element, and you’ll be able to edit it. So let’s start by double-clicking on the main heading.

Type in whatever text you’d like to use. You’ll also notice a new window called ‘Text Settings’ has popped up – here, you can change your font, font size, color, and even add effects. So go ahead, play around – and remember you can always undo changes by hitting the backwards arrow in the top menu.

You can also edit any text below the main heading in exactly the same way. If there are any text elements you want to delete, simply click the element and hit the ‘Delete’ button on your keyboard (or the trash can icon in the right toolbar).

So far, so good! But what if you want to change the background image? Easy – just click anywhere on the background image. You’ll see a button pop up with the text ‘Change strip background’ – click on that, and you’ll get options to replace the current background image with a color block, new image, or even a video.

If you click ‘Image’, you can choose to either upload your own image, or select a stock image from Wix, Unsplash or Shutterstock (the first two are free).

After selecting our image, our homepage’s hero section looks like this:

Looking delicious! Let’s scroll down to keep making changes to your homepage.

Step 6 – Deleting, adding and editing sections on your homepage

Scrolling down, you may find that you want to keep some of the horizontal sections in your template, but delete or change others. That’s totally fine.

Let’s start with the easy one first – deleting sections (or ‘Strips’ as Wix calls them). In the top toolbar, click the ‘Zoom Out & Reorder’ button:

This will take you to a zoomed-out view of your site. Click on the strip you want to delete. The strip will become highlighted by a blue border. Then, simply click the trash icon to the right of the section, to delete that section.

How about adding in new sections? Well, that’s where your left toolbar comes in handy.

First, click the green ‘Exit mode’ button in the top right of your screen, to go back to your Editor.

In the left toolbar, click on the button with the + icon (‘Add’). You’ll see a huge list of options of all the different elements you can add to your page – text, images, buttons, pop up lightboxes and so on.

For example, you may want to add a new ‘Strip’ to replace the one you’ve just deleted. This strip will effectively work as a container for the content (text, images etc) you want to add to that section. Choose from either a ‘Classic’ strip (a blank one), or one that already has content in it – an ‘About Us’ or ‘Testimonials’ strip, for example. Then, simply click and drag it to wherever you want on the page.

In our case, we’ll be adding a ‘Classic’ strip, and then changing the background colour so it fits in with the theme of our site. We’ll do this the same way we changed the background in Step 5 – select the strip, click the ‘Change strip background’ button, and then click the ‘Color’ option to change it to yellow.

Now, let’s play around with adding content. My best suggestion would be to explore all the options available in the + icon, and have a play around with adding different elements to your new strip. Again, you can always undo anything you don’t want to keep.

For example, if you want to add a heading and text to your strip, you can do that by first adding ‘Heading 1’. Drag it to where you want it to be positioned on the page, and then double-click to change the text.

To add text to sit below this heading, repeat the same process – but this time, instead of choosing ‘Heading’, choose one of your ‘Paragraph’ text options.

Once again, drag to reposition the text as you’d like, and double-click to change the text. Remember you can change font, colors and styling however you’d like, using the options in the Text Settings box.

That’s not looking too bad! But what if you want to add other elements? For example, a shape to use as a background to the text? No problem – you can go ahead and do that in the same way by clicking the + button in your left toolbar. This time, choose ‘Decorative elements’.

Select the shape you want, and position it where you want on the page. If it’s covering the text (rather than sitting behind it as a background), simply click the ‘Arrange’ icon in your right toolbar, and select ‘Send to back’.

That’s looking much better now!

Step 7 – Adding an image gallery

If you want to include a gallery of images on your page, that can easily be done. Once again, using your left toolbar, click the + button and select ‘Gallery’. You’ll have a ton of gallery options to choose from:

Simply select the one you want, and position it as you’d like on the page (if you need to make more space for it, remember you can drag strips/sections further down).

If your template already has an image gallery in it (like ours does), all you need to do is click on the gallery to select it. You’ll see a few options pop up, including ‘Manage media’ and ‘Settings’:

Choosing ‘Settings’ will let you change the layout of how your gallery is displayed – so if you prefer another layout, go ahead and select it:

You can then add your own images by selecting ‘Manage media’. Delete all the current images, and click ‘Add media’ to upload your own, or select some from Wix’s stock photo collection.

In this same window, you can also edit the title and description of each of your images (these won’t be visible on your site, but are good for SEO), as well as adding links (if you want).

Here’s what the final product looks like:

Step 8 – Adding a contact form

A contact form is an essential part of most websites. While you can add a contact form on a separate page, I’m going to show you how to add one to your homepage.

Once again using the left toolbar, click the + button. Select ‘Contact & Forms’, and choose the form you want to include (don’t worry, fields and styles can all be changed – I’ll show you how in a minute).

Position your form as you’d like on the page. In our case, we want it at the very bottom of the page, just above the footer:

Let’s first change the fields in our form. In our case, we want to use it to let customers place an order, so we want to add a few extra fields.

Click on your form, and then on the ‘Add new field’ button that pops up. Then choose the type of field you want to add in:

Once your new field is added, click on that field within the form. Click on the ‘Edit field’ button to edit the field title:

To edit the selection options, click the ‘Manage choices’ button:

Once you’ve added and edited all the fields you need, it’s time to change the styling of your form to make it match your site. Just click the form, and then hit the paintbrush button. Click ‘Customize design’ and you’ll be able to change colors, fonts, the submit button, and so on.

Here’s what our form now looks like – pretty cool!

Step 9 – Tidying up your webpage

We’re getting close to being ready to publish your Wix site! So let’s tie up the last few loose ends.

In your template, you may have noticed a few extra bits and pieces that you didn’t really want to include – a floating logo, social media icons, or a chat widget, for example.

To get rid of any of these, we’ll just delete it as we’ve deleted other elements previously – select the element, and either a) hit ‘Delete’ on your keyboard, or b) click the trash icon in the right toolbar.

In our case, since we’re only building a single-page site, we want to get rid of the floating menu that appears at the top of the page – so we’re going to select it and delete it.

Once you’ve deleted all the elements you don’t need, we just need to make sure your footer (the section at the bottom of the page) is updated. Double-click this section to enter your contact details and any other relevant information you’d like to include. You can also add images, as we’ve done below:

Happy with how your page is looking? Great – we’re on the home stretch then! Let’s move on to the next step – it’s one we definitely don’t want to skip.

Step 10 – Making your website mobile-friendly

So far, we’ve been working on the desktop version of your website. But with around 50% of traffic coming from mobile devices, it’s essential to make sure your site is mobile-friendly.

Unfortunately, Wix’s websites don’t come 100% mobile-ready by default. We’ll need to make a few small adjustments to get it there.

In the top menu (which we haven’t really used so far), you’ll notice a mobile icon in the middle of the screen – click on it to switch to the mobile view of your site.

As you can see, the mobile version of the site isn’t quite right yet – some elements are misplaced. First of all, let’s click the ‘Page Layout Optimizer’ button in the left menu, and then ‘Optimize Now’, to let Wix automatically fix some of the elements.

Now you can go ahead and manually fix anything that doesn’t look right, including the placement of any text, and the height of your sections/strips. You can delete or hide any unnecessary elements, and even reorder sections by clicking the arrow icons to the right of the mobile screen.

Step 11 – Update your business details and optimize your site for Google

This next step is completely optional, but we’d recommend it if getting found on Google is important for your business.

Remember the top menu – the one that gives you access to the backend (i.e. the “unseen” part) of your site? We’ll be using it to update your site’s business details – and get it optimized to increase your chances of being found on Google.

Click on ‘Settings’, and then choose ‘Business Info’.

You’ll then be taken to a dashboard where you can enter your contact details, business address if you have one, and your site’s regional settings (language, currency etc). Don’t forget to click ‘Save’ once you’re done.

Once that’s done, let’s take care of your search optimization settings. Again, click ‘Settings’ in the top navigation bar, and then choose ‘Get Found on Google’.

This will take you to Wix’s SEO Wizard, which will walk you through the steps of optimizing your site. Go through each step, entering your business name, and how you would describe your business.

You’ll then be presented with your tailored SEO plan – we recommend going through each step to optimize the various elements of your site (homepage title, SEO description, connecting to Google etc).

Step 12 – Preview and publish your site!

Congratulations – you’ve made it to the last step! Before you publish your site, let’s make sure it’s all looking ok. Hit the ‘Preview’ button in the top right of your screen, and check that you’re happy with both the desktop and mobile versions of your site.

To switch from desktop to mobile view (and vice-versa), click the icons below:

You’ll notice a banner ad at the top of your site saying ‘Create your Wix website today’. This will display if you keep your website on Wix’s free plan. If you want to remove it and access more Wix features, you can upgrade to a paid plan (more on that later).

Once you’re satisfied that everything looks okay, click the green ‘Back to Editor’ button at the top right of the screen. Now, let’s go ahead and hit that blue ‘Publish’ button, again at the top right of the screen.

And that’s it – your Wix site is now live! 🥳 🎉

You’ll see a little popup screen, with the URL of your free Wix website – you can click ‘View site’ to take a look at the published page. Or, if you’d like to use your own domain for your website (whether that’s an existing domain or a new one), click ‘Upgrade Now’ to upgrade to one of Wix’s paid plans.

If you want to see the site we made in this tutorial, check it out here.

How Does Wix Work: Conclusion

We hope that’s helped to answer your question on how Wix works!

As you can see, Wix lets you create a simple yet fully-functional website using the platform’s flexible templates and drag-and-drop editor.

But that’s really just scratching the surface. Thanks to its powerful features, there is a lot more that can be done with Wix. You can check out our Wix review for more information, or see some examples of real websites built with Wix.

If you’re ready to get started with Wix, you can begin creating your website here.

The authors

Learn more about us

Inka Wibowo

Content Manager

Hi, I'm Inka! I started using website builders and content management systems over 10 years ago, when I managed websites for clients in my first marketing role. Since then, I've worked on hundreds of web and digital projects. Now, at Tooltester, I'm happy to be able to use my experience to help users like you find the right website builder for your needs.

Raphaël Damain

Content Manager

Bonjour! After graduating with a MSc in management in France, I worked in the banking, retail and marketing industry. With more than 8 years of experience in content creation, I help users like you find the best online tools you need to make revenue online. I also run a YouTube channel with more than 18K subscribers.

Learn more about us