Wix Tutorial: Build a Website in 7 Minutes [+ Videos]
Regardless whether you consider yourself tech savvy, allergic to technology, or somewhere in between, the idea of building your own website can be daunting. Wouldn’t a website tutorial be nice? What about someone walking you through step-by-step? What if we could have helped you create your website in one hour? Dream no more. Enter, our free Wix tutorial!
We are taking a look at exactly how to build a website using one of the most popular web builders: Wix.
I’ve been playing around to learn the ins and outs so you can hit the ground running. And good news for you, it is shockingly easy to build a professional looking site with our Wix tutorial! To prove it, here's a sped up view of how it took me less than 7 minutes to set up a website. 6 minutes and 36 seconds to be exact ⏱
Now to be fair, I didn't fill my website with content but the fact that you can set up a gorgeous looking website so fast is A-MAZING!
Wix ADI vs Editor
Once you open a Wix account and create a site—wait on this, we'll walk through it together in just a second—the first question you will be asked is if you want to use Wix ADI or Wix Editor. Our Wix tutorial only addresses the Wix ADI program. After trying out both, I fell in love with Wix ADI.
Why Wix ADI? The ADI program is like a page from a trendy adult coloring books and a set of color coordinated crayons. Wix Editor is like a blank page and a big ol’ tiered box of Crayolas.
While Wix Editor allows you the freedom to draw whatever you want in any color, it likely won’t look as good as the Wix ADI’s artfully pre-designed coloring book page with coordinating colors. Moral of the story, if you’re not a design buff I’d choose Wix ADI. It’s WAY easier to color in the lines ;)
Of course there are exceptions to the rule. Use Wix Editor if you have:
- A keen eye for design and website best practices
- A very specific website design idea in mind
- A lot of time to invest (or money for someone else to invest their time) to get the site exactly how you want it
So with that, Wix ADI is 100% the way to go. If you’re skeptical like me and worry that Wix ADI might scream, “I’M A TEMPLATE!,” (pssst, it doesn’t!), follow along with our Wix tutorial and within an hour, you’ll have a brand new website that screams “I’M CUSTOM AND BEAUTIFUL!”
With our Wix tutorial, getting your website set up happens so quickly that if you decide you want more editing abilities, you can transfer your site to Wix Editor (or you can create an entirely new Wix Editor site). You CANNOT change a site from Wix Editor to Wix ADI.
Get Ready! What You Need Before We Get Started
This truly is a step-by-step Wix tutorial meant for you to follow along with us and build your site on Wix ADI. If you’re not ready to get set up yet, don’t sweat it! Do yourself a favor and bookmark this page for later or, better yet, sign up for an email reminder from HAR. We'll check in after a month to see if you're ready to set your website up. 👇👇👇
Before we dive in, let’s make sure you have everything you need to breeze right through this Wix tutorial!
Here’s what you should have before starting:
- Your Logo
- Brand colors (if your logo is already multiple colors, Wix ADI can pick your brand colors)
- Content for your site (site layout, pages you want, substance (text, photos, videos) for those pages, etc.)
Nice to have items:
- Your Social Links - you can always add later but it's nice to do it all in one go!
Wix Tutorial: Set Up Questions
Remember, we’re going to be doing this together. Our first step? Go to Wix.com and select that you want to get started. Create your Wix account. See, pretty easy so far, right?
If you are new to Wix, you'll have a couple multiple choice questions about you first, those are:
- Who do you want to create a website for (Myself/My Business)
- Have you created a website before?
- What kind of website do you need?
If you already have an account, the link will just bring you to your account dashboard where you can create a new site (which we recommend if you're following this tutorial!)
More of a visual learner? We made short videos for all of the steps of this tutorial — including this one!
Now we should all be on the same page. In order for Wix to set up your site, it will prompt you with a few questions first. Here’s what you’ll be asked (and how you’ll want to answer):
1) What kind of website do you want to create?
Select “business.” Easy Peasy!
2) Choose How you Want to Create Your Website:
This is where you’ll select “Let Wix create an ADI for you.”
3) What type of website do you want to create?
Type in your business’ focus. Since we’re working mainly with travel advisors, this is where you’d put “travel agent” or “travel agency”. They even have other suggestions such as “Cruise Travel Agency”, “Dive Travel Agency”, “Travel Blog”, “Consulting Agency”.
4) What do you need on your new site?
This will show you different app features that you can add to your site such as calendar, chat, Instagram feed and blog (see the full list with descriptions at the end of this article[anchor]).
I’d skip adding any features at this point in our Wix tutorial. Why? The focus here is to get the backbone of your site set up! You don’t want to overwhelm or distract yourself when the goal is to get your Wix website up. Plus, you can always add these features later.
(In order to truly “skip” this step, you’ll need to deselect the options that are pre-selected)
5) Business Name
You should have this by now but if not, our travel agency name article will walk you through it
6) Do you want to import your images and text?
If you have an existing website or even a Google Places page, you can enter it to have data transfer over. If not, don’t worry about it and just skip this step!
7) Review and Edit your info
There’s a few things you will do in this step of our Wix tutorial:
- Upload your logo: I would highly recommend having your logo before you start this process. Wix ADI uses it to pull coordinating colors which is crucial to making a well designed website (more details in step 7)!
- Enter your contact info
- Connect social profiles
8) Pick a Theme
Now, what you’re seeing are general themes to narrow down your templates options. If you choose to create a custom color scheme from your logo in the next step, you don't need to worry about the colors of the theme as it will adapt to match your new color scheme. You can change the theme later if you change your mind.
9) Want to create a color palette from your logo?
I would recommend choosing ‘yes.’ You can always edit your color scheme later if you dislike it or want to add/remove colors. It will show you the color palette it has chosen and allows you to skip if you don’t like the initial palette shown.
10) Waiting…. Waiting….
It takes just a bit while Wix pulls your custom palette, which makes it a good time to check in with you! Are you still with me? We’re doing this Wix tutorial step-by-step together, right? Good!
11) Pick your favorite homepage design
This is where you'll choose your template. You can scroll up and down to see what the template homepage looks like. It’ll give you an idea of the design and layout. Much like everything else, you can always change this if you decide you don’t like it.
And… do you see it?!? Just like that, your beautiful new site is created.
But there’s more to do. Let’s keep this Wix tutorial going and help you fill in the content.
Wix Tutorial: Sections
After you answer Wix’s start up questions, it’ll create your brand new site consisting of a robust homepage.
Now we're getting to the meat of your site! Each page is made up of sections. That’s it! We'll be repeating the same edit and design process over and over again with different sections.
These sections can be edited and designed independently of each other.1 They can be rearranged, duplicated, deleted, and even moved to a new page.
Here is the Section Design Wix Tutorial video for you visual learners!
As you move your mouse over your page, the different sections will be highlighted in blue and you will see two options appear: Edit and Design.
I like to start with design where I can choose the way I want my section to look before moving on to edit the content.
Design is short for Section Design. This is where you’ll:
- Choose your section design layout
- Customize said layout to your liking.
Wix will highlight recommended designs but you can choose whichever fits your fancy!
If you like a particular section design layout but want to change some elements within it, be sure you play around in the Customize Section Design area.
Depending on the section design you chose, you’ll see some variation of these options:
- Media is where you can change the media type (image, gallery, video, pattern), choose the media item/s, and select how you want it to display.
- Color shows different ways to display the section using colors from the site palette. This is an ingenious way of allowing customization but making sure everything is still cohesive.
- Text design allows me to change the size and alignment for that section
- Height simply gives you +/- buttons to increase/decrease the height of your section. It doesn’t just add padding to the top and bottom but rather makes the whole section more spacious
- Animation lets you animate how the section appears. It is different for each section and affects different elements. Just hover over the animation types for examples.
Now that you have the section looking the way you want it, let’s edit the content!
Each section has different content depending on the section design you chose. Some examples of the fields you might see are titles, subtitles, media (images), description, buttons, forms and lists.
When editing a section, not only can you change the content out but you can also turn items within the section on and off. For instance, if you don’t want a button in a section, you can uncheck that field and it will go away. Like magic ✨!
Images & Files
If you want to edit the current media item or want to change it out altogether, just click “edit & replace”. This will bring you to the Media Settings where you can choose the media type you want: image, gallery (multiple images), video (fancy!), or pattern.
Depending on the media type chosen, you’ll see a variation of these options
- Media Layout - how you want the media to be placed
- Image Opacity - lower the percentage to make the image more transparent.
- Color behind image - this only matters if you’re going to make your image transparent with the image opacity. If you lower the opacity, your image will take on the shade of whatever color you choose here.
- Scroll effect - what the image does as you scroll by it.
It’d be tedious to go into every image option so I encourage you to play around! Changes are instantaneous so if you don’t know what something means, click on it and see what it does! Dislike it? Click the undo button!
For the media item itself, your options again depend on the media type. Here is a list of options you'll get depending on the media type.
- Image: Replace or Adjust
- Gallery: Organize Media (choose which images you want in your gallery)
- Video: Replace
- Pattern: Replace or Color
Adjusting an image opens up a whole mini photo studio with a pretty impressive collection of photo editing abilities. You can crop, enhance, filters, adjust, cut out, text and background. I consider this another neat feature if you have a specific need but most people will likely not used it.
Now let’s say you want a different image. When you click replace it will open up Wix’s Media Manager. This is the place where you can easily add, organize, manage and search site files (images and files you’ve uploaded) as well as gain access to Wix’s media library.
Wix has three libraries to for both free and paid images and videos:
- Wix library - Free images and videos
- Shutterstock library - images and videos for a price
- Unsplash library - Free images, no videos
They also have a “My Boards” tab which is another super useful feature. As you’re scrolling through images, you might find one you like but not for this particular page. You can create “boards” to save and organize different photos you like for future use.
“Replace” for a pattern will show you different pattern options.
Shown if you choose gallery, this will bring the gallery of all your site images. You are able to edit the title (alt text), description and link for each individual image. You’ll also be able to delete and/or add images.
This is only an option if you choose pattern as your media type. It will show you various color combos using your content and chosen pattern.
In addition to edit and design, each section (besides header and footer) have a few other options:
- Duplicate — Duplicates the entire section (design and content) to the same page
- Move to — Takes that entire section and moves it to another page of your choosing
- Delete — pretty self-explanatory here. Deletes the entire section
Each section also has arrows in the upper right hand corner. These allow you to move a section up or down one section.
Adding a Section
To add a section you can either use the Add feature in the top bar or just click one of the big blue plus signs that shows up as you roll your mouse over sections on the page.
Let’s do a quick example where we go through the process:
- Click the "+" to create a new section on the page.
- Choose a Section Type — You’re shown different types of sections first based on the type of business you selected. There are some great ones for travel agents (like traveling tips, get a quote, vacations, etc.), but just like the apps, careful to only select sections you already have content for.
- Choose a Design — After you choose your section, you’ll see thumbnails for lots of different design options. I love that it has text already in there. It is just default text so you should change it but it makes it so much easier to decide if you like how something will look when the text is pre-entered.
Once you’ve selected the design of the new section, it gets added to the page! You’re immediately brought to the edit area on the sidebar for your new section and can go through the edit and design options we went through above!
Every time I add a section I can’t help but think of those childhood games where you can mismatch different eyes, noses and mouths. Except with Wix, all of the parts go together seamlessly rather than making a ridiculous giraffe/whale/moose hybrid 😂
Wix Tutorial: Pages
I love the simplicity of the creating pages in Wix. A new page is really just a grouping of different sections. After you select the layout of your new page, you’ll be able to go in and add/edit/delete sections to make it just how you want it.
Adding a Page
Very similar to adding a section:
- Click the “Add” feature in the top bar then choose “Page” from the drop down. This will open up a sidebar listing all the page types you can add.
- Click on a page type to see different thumbnails of the design options for that page (just like when you choose a section). You can always choose “blank” if you want to create one from scratch.
- Select whichever thumbnail you like and the page will instantly be created.
- Edit your sections like we’ve done before!
Remember, you can rename, duplicate, delete, set as homepage and see page SEO in the “Page” drop down in the upper left hand corner. You can reorder your pages by clicking “Site Menu’ located in that same area.
Edit Page Settings
After clicking the Page drop down in the upper left hand corner, you’ll see all the pages of your site listed. Each page has a gear next to it where you’ll be able to access that page’s SEO, rename, duplicate or delete it. You can also choose to make it the homepage.
In the Page settings area, click the hyperlinked “Site Menu” text. From here, you’ll be able to drag and drop your pages in the order you’d like. This will change the order of your pages on the menu bar.
There are some duplicate options from the Page Settings but there are two very important new options: subitem and hide a page:
Subitem is how you ‘nest’ a page below another page. Perfect for grouping like pages and for keeping your menu bar less cluttered!
Let’s say I want to put the “Hours” page under “About Us”. I simply drag the Hours page directly under the About Us page, click the 3 horizontal dots on the Hours page and select “Set as Subitem”. Bam! Hours is no longer on the main menu bar and now shows up when you hover over “About Us”.
Hide Item is exactly what it sounds like. If you’re working on a page but it isn’t ready for the world yet. Or maybe it is a special page that you only show at certain times (think events, holidays, specials and the like). You can keep the page and all the hard work but hide it from being listed on your site.
I love that Wix has this feature. Your Wix website is already mobile responsive (meaning it automatically sizes to be viewed on mobile and tablet devices). This feature allows you to easily see how a certain page looks on mobile or desktop.
Better yet? You have specific design options for mobile. So if you don’t like how the desktop design for a section converts to mobile, you’ll have options that will change the view just for mobile!
Wix Tutorial: Site Design
Remember I told you you’d be able to change almost everything you selected in the set up? This is where you do that.
Click "Design" in the top edit bar. The options are almost all the ones we’ve seen on the section design level but changing them in this area will change things across your ENTIRE site!
- Themes — If you didn’t like the themes you were shown during setup, you can find more here. Why don’t you try to click one one of them to see how it would change your site? Choosing a new theme will default to that theme’s color scheme but you can still go in and select your logo palette after (see Colors below).
- Colors — This is where you can choose to use your logo palette or browse through their recommended color palettes. The recommended color palettes are based off of the main color you choose here. So let’s say you don’t want the color palette to completely match your logo colors. You could choose your favorite color from your logo as the main color and see what kind of palettes Wix comes up with!
- Fonts — Your theme has a recommended font that goes with it but if you dislike it, you have quite a few you can try out. Eeeeeek! So. Many. Options. Go ahead and click on them to try!
- Animation — This will add the animation you choose to elements across your site. You can click on an animation to see how it would look on your site. In general, I’d shy away from doing such a broad stroke animation but it can look good in some circumstances!
- Page Designs — Whatever page you are on, click this to see three different design options that use your existing sections and content. Perfect if your page has the content you need but the design just isn’t doing it for you.
We rolled the Site Design and Site Backend into one final Wix website video tutorial!
Wix Tutorial: Site Backend
Your site is set up but there are a few areas that I’m going to touch on it as they’re crucial to getting set up and maintaining your site!
These options are all found under the “Site” drop down in the top edit bar. This is where you’ll find your ‘big picture’ options. There is a lot here that I’d recommend exploring, but for the sake of brevity in this Wix tutorial, we’re just going to highlight the top ones.
Think of this as ‘Home’. The main part of the dashboard will show you your sites (if you have more than one), plans, help search, website checklist and tips.
You’re also able to get to your built in analytics to check out your site’s traffic and blog stats.
This allows you to revert your website to a previous version — yay!!! So if you were doing some late night work on the site rearranging how the site looks. Realized two days later you shouldn’t edit your site at 1am, you can go into your site history and restore the version before you changed anything!
Connect a Domain
Just a few more steps in this Wix tutorial! You’ll need to connect your domain before publishing your site live. You can get a domain through Wix.com or read more about your domain options in our How to Make a Website guide.
Get Found on Google
I was really impressed with this feature on Wix. SEO can be so intimidating it can make some people ignore it altogether. But their set up makes SEO accessible and doable for the average person without hiring help. They walk you through everything!
They’ll ask you for the name of your company, location (address or online), and 3 keywords (“Travel Agent”, “Travel Advisor”, “Travel Agency” would be ones to consider if you’re not going for a specific niche). It will then create a specialized plan with actionable items, descriptions on how to do said items, and will track your progress.
Now if you’re the type a person who wants to be the master of SEO, Wix has a large SEO guide you can peruse.
Review, review, review
The hard work is over! Now you just need to get a second (or third, fourth, fifth…) pair of eyes to look everything over. Send your new website to your friends and family to scour over. Ask for feedback on design, content and flow. Anything they’d like to see added/removed? Glaring typos?
I know it can be hard to take criticism on your baby. You don’t have to take everyone’s advice (it is your own design after all) but if you’re hearing the same thing multiple times, think on it :)
That's a wrap on this Wix tutorial! Your site should now be ready to hit the ground running 🏃🏽♀️
If you haven’t already, connect your website to your domain and publish that bad boy!
Spread the Word
With your site live, your job is now to promote it. Send to friends and family to let them know you’ve started your agency, share out on all your social platforms, add to your social accounts, business cards, you name it! You want people to know how to find you and learn more about you!
Another good way? Share your website in the comments below! I’d love to hear one thing you loved about Wix ADI and one thing you struggled with.
Note: We may receive compensation (at no cost to you) through some of the links on this page. If you've found the site useful, using the links is a great way to say thanks and help pay for Rigel's insatiable appetite for bones!
- The only exceptions are the header (top) and footer (bottom) sections. Any edits to the header or footer sections, regardless of the page you are on, will change across the site. ↩