While there are dozens of great tools for building a website, Wix offers the fastest route to a complete and fully-functioning site. With AI-powered tools like the Wix ADI (Artificial Design Intelligence), you can enjoy a hands-off website building experience without sacrificing your personal touch. In this Wix tutorial, we will guide you through building a website from start to finish.
📚 Table of contents:
Wix tutorial: Getting started from scratch
Not everyone knows that you can build an entire website without writing any code with Wix. However, the Wix ADI module takes this one step further by letting you delegate most of the design work to Wix itself. Read: Wix does everything for you!
If you’re looking for a user-friendly way to build a stunning website, then go to the Wix homepage and click on Get Started.
Personalize your Wix experience
Your first task is to answer some questions about your goals for the website. While you can skip this step, it only takes a few seconds to do this, and your answers will help Wix find your best starting point.
For example, if this is your first site, Wix will suggest using the Wix ADI Editor. More experienced users, on the other hand, will be pushed toward the traditional Editor.
We recommend letting Wix ADI do the heavy lifting and build most of your site.
Set up your site with Wix ADI
The first thing you will notice is another batch of questions. Consider these questions essential because they help Wix ADI find the best design and features for your website.
When it comes to website niches, Wix has everything covered. Scroll through the list to find something that matches your goals and click next to start adding features.
Depending on the type of website you are building, Wix will suggest several different things. If Wix doesn’t recommend something you’d love to have on your site, then just scroll down the list to see the entire range of options available.
The next step in this Wix tutorial is your website name!
You can put anything in here – like your business name, a nickname, or anything else that springs to mind. If you don’t have a name yet, you can skip this step or create one on the fly using a name generator.
Once you have settled on a name, you’re going to see an option to import content. You can skip ahead here. I know it sounds like a great timesaver, but it’s never been better than hit and miss for me.
Now, this Wix tutorial moves onto the nitty-gritty. You should take a moment to add some details like physical address, your contact numbers, and social media pages.
It’s also a convenient time to add your logo. Don’t have one yet? You can build one quickly with an online logo maker (also don’t forget to use the right fonts).
Once you’re satisfied with the business details, click on Next to start the design phase.
Choose a theme design
Once Wix has your details, it’s time to design your website. No matter if you’re building a site for your business or for yourself personally, the process is the same.
Fortunately, Wix makes everything really effortless. For example, the theme design screen doesn’t slow you down with too many styles while offering a good range of colors and designs.
For more detail, roll over the squares to reveal the color palette and fonts.
You don’t need to spend too much time worrying about your choice; you can change the theme and colors at any point without starting from scratch.
Once you make a choice, Wix takes a few minutes to design your homepage. Based on your previous answers, Wix will provide images and designs that are perfect for your site. Not only that, but each of the homepage options will follow popular trends in web design.
We’ve almost finished the setup in this Wix tutorial already! Our final step is picking some extra pages.
If you want to speed up the design process, click Add Page on any of the pre-designed pages. With this in mind, consider adding the essentials like About, Contact, and Privacy Policy pages.
Wix tutorial: Editing your Wix website
Click on Edit Site to customize your site.
When you came to this Wix tutorial, you were probably most excited about the customization part. And, finally, we’re ready to add the personal touches, fine-tune the appearance, and add some exciting elements.
Fine-tune your Wix website design
On the surface, this sounds like a lot of work. But, you’ll find the necessary options in the top bar menu items. You should see something like this:
Clicking on any block will open the editing sidebar. For example, clicking on the main hero image lets you change images, alter text, or add a button. If you don’t like your page, then change the layout via the Section Design button.
You can also experiment with different section layouts via the Design button. Clicking any of the options will immediately replace your existing layout. Don’t like it? Click the Undo arrow to bring your old design back as good as new.
Customize fonts
Wix ADI will provide you with pre-matched fonts that should be adequate for most cases, but if you’d like to do some fine-tuning, then you’ll find the font options in the Design → Fonts menu.
Again, Wix reduces the difficulty by giving you a versatile range of options with a slider to help you get a perfect size. You should experiment with all these options to find a look that is both appealing and readable for titles, subtitles, and button texts.
Customize website colors
The team at Wix has taken the sweat out of picking colors for your website.
Open the color options through the Design → Colors menu. There’s no overwhelming screen with colors and numbers.
Just define one color and Wix will build a consistent color palette based on it. Once you provide this seed color, Wix will give you a number of color schemes to use.
You can even edit the color modes (light, dark, mix, tinted, colorful, or vibrant) and add specific colors via the Edit Palette Colors mode.
Customize and add sections
Wix makes it easy to get a fully functional site built, but you might find that you’d like to add a section to your homepage. Fortunately, all pages on a Wix website are built as a sequence of individual sections pieced together. This means you can add, remove, and alter sections at any time.
Wix ADI gives you two easy-to-use options for adding sections:
First, click on an existing section and then click on one of the blue + icons:
Second, you can click on the Add item and then Section to Page.
It doesn’t matter which method you use because they both open the design sidebar with a wide-range of content sections. You’ll find recommended sections at the very top of the list. You can also find:
- FAQs
- Resume
- Opening hours
- Video players
- Galleries
- Forms
- And much more
Fortunately, they are categorized according to sections that are most likely to match your niche.
Once you find the section you need, just drag it over to the page.
When the section is in place, you can edit it much like any other section. For example, the “opening hours” section lets you adjust your working hours, change the image, or add a booking button. You can even move the section using the arrow buttons on the right side of the screen.
Customize and add pages
Now that you have colors and fonts, you can fill out your website with other pages. Wix makes it easy to visit, add and edit your pages through the Page menu in the top-left corner.
Once the menu is open, you can click + Add Page to start bolstering your site.
Once again, you’re going to see a lot of options. But for a good start, About Me is a page that most websites will want to have.
When you’re ready to get started, scroll through the different layouts and pick your favorite one.
When your About page is added, you can immediately start editing. Just make sure the page communicates your site’s mission and tells people what to expect. Because it doesn’t matter whether you are running a restaurant or a dental surgery, your About page should engage your visitors and answer their questions.
In a few minutes, you should have a descriptive and attractive page to show your visitors.
Adding a contact page
No Wix tutorial would be complete without a Contact page. For a business site, it’s a crucial page for turning visitors into customers. For that reason, it should help visitors:
- ☑️ Make an appointment or booking
- ☑️ Subscribe to your blog
- ☑️ Find a way to talk directly to you
Wix makes all of this easy with clean designs and layouts built to contain all the information your visitors need. This includes:
- Forms
- Direct email
- Social media handles
- Telephone numbers
- Maps with physical addresses
The editing process is similar to the process for changing the text in any section. If there’s anything you don’t want to share, click the checkbox to remove the field. You can even disable the map if you don’t have a physical location.
Customize your navigation menu
Your main nav menu is crucial to keeping visitors on the website. It might seem obvious, but when visitors can’t find what they’re looking for, they tend to leave.
Fortunately, Wix will automatically add your new pages to the menu. However, if you’d like to change their order, click on the headers and then Edit next to Site Menu.
You can change the order of the menu items by dragging-and-dropping them into place. If you’d like to perform more fine-tuning, click the three horizontal dots to open the editing menu. You can even add external links via the Add Menu Item option.
Generally, your menu items should follow these rules:
- Clear names
- Avoid nesting or creating menus with multiple levels
- If you must nest, then use no more than two connected levels
Prepare your mobile website
As fantastic as editing a desktop site is, you’re going to need a mobile version of the website too. Switch between mobile and desktop views via the switcher in the top-bar:
You’ll probably be relieved to see that your mobile website looks great right out of the gate. However, there’s the odd occasion when you see something that needs a tweak. If it is a mobile-only problem, then make the change in the mobile view. It won’t impact your desktop site in any way.
💡 What makes for a good mobile site?
- Decorative images that look great on a desktop, are just taking up space on a mobile device. Hide and resize your images for the best mobile experience.
- Put the important information like contact and pricing high on the page.
- Put links and buttons front and center where they can be reached by a thumb.
Wix has abundant options to help you organize your mobile site, but experiment and test them to make sure your mobile site meets your expectations.
All of your changes will be saved automatically when you return to your desktop view.
Wix tutorial: Adding a blog
If you’re running a business, adding a blog might be something you’re considering. An informative and well-maintained blog can help you attract new customers while also enhancing your brand. With this in mind, Wix has made it easy to add a blog to your website without any technical demands.
You already know how to do most of the work. First, go to Add → Page and scroll down to Blog to see the layout options available. Second, click on the layout you like and wait a few seconds for it to appear on your site.
Editing the blog page follows the same process as every Wix page. You have three main options:
- Click on the three dots to see the blog display options. With a few clicks, you can add and remove elements like author name, number of likes, and reading time.
- The design menu will re-open the layout options for your Blog.
- Manage will open the Wix dashboard where you can add (and find) writers, write posts, and study analytics.
Write a blog post
Open the Wix dashboard from the Blog page, and start with your existing published posts. When you’re ready to add another post, click Create New Post.
Not only is the Wix post editor easy to use, but it also follows the standard workflows you’ll find everywhere from social media to work processing.
You can find the formatting and visual elements, like video and images, on the bottom of the screen. For settings and SEO, look to the left.
Wix tutorial: Adding a store and products
Depending on your site, you might like to add an online store to it as well. While setting up a Wix eCommerce store is enough for its own Wix tutorial, let’s consider the basics. With this in mind, Wix does have eCommerce functionality that can be added without large scale changes like switching platforms.
Indeed, the process is similar to adding any other page. Click Add → Page and scroll down to Online Store. You can then experiment with Wix’s layouts to find one that will work best for you.
Once you’ve found a design you like, you can click on the store sections and then Manage to add your first products.
You can run an entire eCommerce store right from this Wix dashboard. You can add your products and write descriptions while also setting prices and stock numbers.
👉 If you would like to learn more on how to start an eCommerce business from the ground up, this guide will get you going.
Tweak visual elements of the store
At this stage of the Wix tutorial it is time to consider how to add those small, attractive visual elements that bring your site to life.
While Wix supplies an abundance of images in the initial design stage, you might have your own content you’d like to add, too.
You can edit or replace images by clicking on any section to open the sidebar. Locate the Image section and click on the thumbnail to replace it.
Once you open the Wix media dashboard, you’ll see a range of suggested images from the Wix library. You can also opt to check Unsplash or the paid Shutterstock library. If you already have images of your own, then upload them with the Upload Media button.
If you’d just like to make adjustments to the image, you can click the Settings option in the sidebar.
Once you enter the editing screen, you can change the layout, the ALT text, the opacity, and even the background color.
OK, so maybe you’d like to add different media elements, too. Wix can help you add videos, patterns, and galleries to your page.
You’ll find them all at the top of the Media Settings sidebar.
All you need to do is click Organize Media to open the media library and arrange all of the media you want to display on your site.
Wix tutorial: Mastering the Wix dashboard
The Wix dashboard will become the most important tool once you have finished this Wix tutorial and published your site. Not only is it a tool for monitoring your site’s performance, but it provides a central location for managing diverse aspects like blog posts, products, and marketing.
On the left, the sidebar is the main navigation area for skipping to different parts of your site. This is the starting point for products, orders, bookings, and your analytics and marketing tools.
At the very bottom of the sidebar, you will find the Settings option. This is where you will find a variety of technical aspects like custom code, cookies, and payment options. While you might not necessarily need them, it is good to be familiar with this area of your site.
Returning to the center of the screen, you will find helpful Wix tutorials covering everything from syncing with Facebook and Google Workspace to building a community. You will also find helpful suggestions on how to take your site to the next level after covering the basic Wix tutorial.
Wix apps
This is usually the part of the Wix tutorial that is the most exciting: adding extra features with apps! The Wix ADI platform helped us achieve a lot, but you might be interested in adding some extra features.
You’ll love the Wix app marketplace. With over 300 web apps, services, and features, you can find just about anything. We’ve narrowed it down to 15 essential Wix apps for every website here.
Unfortunately, the bulk of the apps are only available with the traditional Wix editor (not the ADI). You can switch to the Wix editor at any time, but you can’t easily come back to the ADI editor after that. If you switch between the editors, then you will lose any changes you made. We recommend switching editors only when you have finished the design phase of your Wix website.
You can open the app marketplace by going to Manage App → All apps and then scrolling down to find a link to the Editor.
The app marketplace is the place to look for less common features. Once your site is live, and you’re feeling confident, you can add third-party apps that embed Instagram feeds or integrate with your favorite accounting software.
Wix tutorial: Publishing your site
When you’re satisfied with your site design, it is time to finally enjoy the benefits of your hard work! You’ll find the Publish button in the top-right corner. And, as stated at the beginning of this Wix tutorial, you can choose to stay on the free plan forever. In this case, your site will be published under the Wix subdomain: www.yoursitename.wixsite.com
.
On the other hand, if you are ready to take the plunge, see if a healthy discount is available when you pay upfront. If you have an established business, then grab one of these deals with both hands.
Here’s a rundown of the pricing:
Which plan is best? It depends
If you’re not planning to sell anything, but you still want a serious website or blog, then go for the Unlimited plan. It comes with a free domain and unlimited bandwidth. You will also have access to analytics data and some video hosting.
If you plan to sell products, you will need to opt for one of the eCommerce plans:
The best plan for an eCommerce store is the Business Unlimited plan for dropshipping, selling subscriptions, or selling in multiple currencies. For everything else, the Business Basic plan has everything you need to run a successful store.
Wix tutorial: Conclusion
With help from Wix ADI, it is safe to say that making a website has never been so easy! It’s incredible to think that you can have a fully-functional site online in just a few hours without sacrificing any sleep or even opening your wallet. When it comes to getting online, Wix is the best option currently available.
One of the great things about Wix is the room to grow. If you want to add more functionality, you can add apps. When your website starts to attract more and more traffic, you will be able to upgrade your plan to accommodate it. Finally, if you ever get a burst of creativity, you can always edit your site with the more technical Wix Editor. All in all, Wix has everything the emerging business, blogger, or solopreneur needs to build a successful web presence!
Would you like to see how Wix compares to the competition? Check out our other Wix articles:
👉 See how Wix compares to WordPress
👉 and Squarespace vs Wix
Got any questions on how to build a website with Wix? Feel free to ask away in the comments section below.
…
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
Layout and presentation by Chris Fitzgerald and Karol K.