Wix Website Tutorial - Build a Website from Scratch

Building a website from scratch can be a daunting task, but with Wix, it's easier than you think. Wix offers a drag-and-drop editor that allows you to create a website without any coding knowledge.

You can choose from hundreds of customizable templates to get started. These templates are fully responsive, meaning they'll look great on any device.

In this tutorial, we'll walk you through the process of building a website from scratch using Wix.

To get started with Wix, head to the 'Start Now' button and fill out your information to begin. You can also sign up with Facebook or Google, but for this tutorial, we'll use the email, password, and 'Sign Up' option.

You'll then be asked to choose the type of small business website you plan on creating. Enter your business type or keyword in the search bar to locate the appropriate option. For this example, we'll choose 'Building Contractor'.

Here are the two main options to choose from to start building your Wix website: WIX Editor and WIX ADI (although WIX ADI is being phased out).

Signing up for Wix is easy and straightforward. You can sign up using your Facebook or Google account, or you can enter your email and password directly.

To get started, navigate up to the 'Start Now' button and fill out your information. You can also use Wix's intuitive interface, which makes it easy to follow along even if the interface changes slightly.

Click on the "Get Started" button to create a new login or login with your existing social media account. At this stage, it's completely free to use, so you won't need to provide any payment details.

Enter the name of your website, which can be your business name, project name, or your own name. This will display in your website's page title, but you can change it later if needed.

You have the option to choose the type of small business website you plan on creating. Enter your business type or keyword related to your business in the search bar to locate the appropriate option.

Getting Started with Wix requires a solid understanding of its interface. You have two options to choose from: Wix Editor and Wix ADI, although ADI seems to be phased out.

Before starting your build, it's essential to know about the different elements the editor offers. These elements will be crucial for your build on the Wix editor.

You can choose from a large range of templates available for a site, relating to various categories such as E-Commerce, Design, and Portfolio. You can also use a blank template and start from scratch.

The Wix editor is completely drag-and-drop, meaning you can drag any element on your page and place it wherever you like. The editor is where you'll make changes to the content of your site – text, images, and so on.

Here's a quick rundown of the main sections of the Wix editor:

Building a website with Wix is a straightforward process. You can choose from more than 500 visually striking templates, categorized according to your website's goal or industry.

To start building your website, you'll need to choose a template that suits your needs. Wix offers two options: Wix ADI, which uses artificial intelligence to design a website for you, and Wix Editor, which lets you customize a designed template with drag-and-drop tools.

If you want more control and flexibility over your website design, Wix Editor is the better option. You can start from scratch with a blank template for more creative freedom, or choose from hundreds of templates and customize them to your liking.

Here are the steps to choose a template:

Once you've chosen your template, you can start customizing it to make it your own. Wix offers a range of features to help you do this, including a drag-and-drop builder, a library of free images, and the ability to add custom fonts and colors.

Building a website can be a fun and creative process, but it can also be overwhelming, especially when it comes to organizing your content into different pages. You can start by adding individual web pages using the Wix website builder, and then select 'Edit Site' in the top-right corner to make changes to each page.

You can add various types of pages, such as an about us page, services page, projects, contact, testimonials, get a quote, and more. To find other website pages, simply drag your cursor to 'Page' Home' on the top-left, which will open a menu. From there, you can select a page to edit or add a new one.

One of the most important pages to have is a contact page, which should contain all the social media links and a form for users to contact the owners/editors of the site or company. This form should include fields such as a means to contact the user back directly, a name, and a reason for contacting the company.

You can also use Wix's drag-and-drop builder to easily add sections, background, and other elements to your website's layout. By clicking Add Section and dragging and dropping them onto the canvas, you can access a wide range of pre-designed sections that are available for free.

Here are some examples of the types of pages you can add to your website:

Remember, the key is to keep your content organized and easy to navigate, so make sure to add a clear and concise menu to your website.

Building a website can be a daunting task, especially when it comes to the cost. WIX is one of the largest website builders in the world and it's actually a free service.

You may need to purchase different features to have a more professional website, such as a domain name and apps for your site. These features can range from forms to applications for an online store and business tools.

You can customize each section of your website using Wix ADI, starting with selecting a design from the left-hand side. This will give you a variety of options to choose from for each section.

To further customize, click on the three vertical dots next to 'Design' to access options like Duplicate, Move to, Adjust height, and Delete. You can also move the section down by clicking the downward arrow on the right-hand side.

You can add individual sections by pointing your cursor to any of the sections and clicking the '+' sign above or below them. To add apps to your website, click on 'Apps' under 'Add' on the top-left, and you'll find various options like Blog, Groups, and Online Store.

If you want more freedom and creativity to develop your website, you can use Corvid by Wix, which allows you to customize the back end of your site, including how it manages data and behaves. This feature is ideal for those with advanced design and web development skills.

Here are some key features of Corvid by Wix:

Remember, Wix offers video tutorials and coding examples on their Support page to help you navigate this process.

Customize your site with Wix code features to gain more freedom and creativity in developing your website outside of Wix's templates.

You can use Corvid by Wix to build and amend the back end of your site, offering you the opportunity to customize more than just the cosmetics of your site, including how it manages data and behaves.

To add custom widgets, such as a weather widget, you can use Wix's Corvid feature, which allows you to add your own code.

Wix recommends features you may want to code into your site's functionality yourself, such as adding custom widgets or making advanced forms.

There are dozens of video tutorials and coding examples on Wix Support to walk you through this process.

Wix even offers a wide range of pre-designed sections that are available for free and can be easily added to your website with just a few clicks.

You can access these sections by clicking Add Section and dragging and dropping them onto the canvas.

To edit your added section, move your pointer to it and click Quick Edit, where you can change the section's background, art vectors, and images to match the whole site.

You can also customize your website's layout by adding sections, background, and more, depending on the style you choose.

Wix offers a variety of design options for each section, which you can select from the left menu.

You can duplicate, move, adjust the height, or delete any section as needed.

To add individual sections, point your cursor to any of the sections and click the '+' sign above or below them.

You can also add apps to your website by clicking on the 'Apps' option in the top-left menu.

Wix App Market offers hundreds of add-ons to increase your site's functionality and take your site to the next level.

From online forums and social media applications to marketing tools and analytics, the App Market has a quick-click solution that you can easily add to your website in no time.

You can customize your website's fonts and colors by clicking Site Design, then hovering over Color & Text Theme and clicking Customize.

Here, you can select a theme from the list or create your own, and customize text and colors as needed.

You can also set up contact forms and other widgets by clicking the '+' button and choosing Contact & Forms.

To customize your form fields, labels, buttons, colors, fonts, and email notification settings, click on the form and use the settings panel.

You can add other widgets to your website, such as social media icons, maps, testimonials, chatbots, and more, by finding them under the '+' button in different categories.

Customize Your Website Settings

To connect your site's domain name, add your site's favicon, and set up analytics, you can access the Site Settings panel.

Here, you will also find options to connect your professional mailbox and more.

Customize Your Mobile View

To customize how your website looks and works on mobile devices, click Switch to Mobile on the top bar of the Wix Editor.

You can choose any element on your site and use the toolbar to edit its design and functionality.

You can also drag and drop elements to rearrange them on your mobile layout.

Customize Your Toolbar

The Toolbar element offers various tools to help you build your website, including a toolbar, rulers, grid-lines, and snap to objects.

Grid-lines help you arrange your website in a nice layout, while the snap to objects feature makes it easy to place objects and apps on your website.

This feature uses the grid-lines to snap the objects to edges, making it a great time-saver.

Customize Your Code

If you want to incorporate certain functionality that isn't available through the Wix Editor, you can add custom code to your platform.

To enable Corvid, turn on Dev Mode in the Editor's top menu bar.

You can also add a snippet of code to your site to bring additional features to life by following the steps below:

1. Click Add in the Editor's left menu.

2. Select Embed (you may have to hit More at the bottom of the menu first).

3. Select Custom Element and drag it onto your page.

4. Click Choose Source, select Server URL, paste the relevant URL, and enter a tag name.

5. Click the Set Attributes icon to define the element's attributes.

By following these steps, you can add custom code to your Wix website and take your site to the next level.

You can add social icons to your website in just a few clicks using Wix's free icons or icons from Google.

To add social media links, go to the add element and click on social. You'll see a range of icons including Facebook, Twitter, Google+, Instagram, Pinterest, YouTube, and many more.

Drag and drop these icons from the social add element to the right part of your page.

To find images for your site, including social icons, you can use search engines like Google. Just remember to check the usage rights to avoid copyright issues.

Some images on Google Images may be allowed for non-commercial re-use, while others may not be labelled to re-use commercially. Always watch out for this.

To filter images that are labelled for re-use, click on tools and change the usage rights on Google.

Here are the simple steps to integrate social media and other apps on Wix:

Wix lets you integrate your website with various social media platforms and apps to boost your online presence and functionality.

To take your site to the next level, you can explore the Wix App Market, which has a huge array of apps that are completely free and mobile-friendly.

You can upgrade to WIX Premium to get rid of ads on your site. This means your visitors will have a cleaner and more professional experience.

Upgrading to WIX Premium also gives you access to Google Analytics, which can help your site rank better in search engines.

With a WIX Premium plan, you can connect your hosting and domain, making it easier to publish your site.

Once your hosting and domain are set up, you can publish your site and share it with the world.

Designing your website's layout is a crucial step in creating a visually appealing and user-friendly site. You can adjust your website's layout in various ways, like adding sections, background, and so on, depending on the style you choose.

Wix offers a wide range of pre-designed sections that are available for free and can be easily added to your website with just a few clicks. You can access these sections by clicking Add Section and dragging and dropping them onto the canvas.

To edit your added section, move your pointer to it and click Quick Edit. Then, you can change the section's background, art vectors, and images to match the whole site. This is a great way to customize your website's layout to your liking.

You can also customize each section using Wix ADI by clicking the downward arrow on the right-hand side and moving the section down. Additionally, you can duplicate, move to, adjust height, or delete sections as needed.

Here are some key options to consider when customizing sections:

By customizing your website's layout, you can create a unique and engaging user experience that sets your site apart from others.

You can adjust your website's layout in various ways, like adding sections, background, and so on, depending on the style you choose. Wix offers a wide range of pre-designed sections that are available for free and can be easily added to your website with just a few clicks.

To access these sections, click Add Section and drag and drop them onto the canvas. You can also edit your added section by moving your pointer to it and clicking Quick Edit. Then, change the section's background, art vectors, and images to match the whole site.

Wix allows you to customize each section on your web page. On the left, you can select from a variety of designs for each particular section. You can do this for any section on your web page, besides the design, make sure you edit the content according to your requirements.

Here are some options you can find next to 'Design': Duplicate, Move to, Adjust height, and Delete. By clicking the downward arrow on the right-hand side, you can also move the section down.

Design is a crucial aspect of creating a website that's both visually appealing and user-friendly. A well-designed website can make a great first impression and keep visitors engaged.

To create a navigation menu, click on "Add Elements" and choose "Menu & Anchor." From there, you can select the type of menu you want to create.

A navigation menu helps visitors find what they want and navigate your site easily. You can customize your menu by clicking on it and using the settings panel to change menu items, links, colors, fonts, and animations.

To add a new section to your WIX site, go to the "Add Element" and choose "Menu within this element." This will give you access to many different styles of menus.

Navigation is essential to a multiple-page site, and WIX will automatically include each of your pages within the navigation bar once you choose the navigation you want. You can then drag and drop the navigation to place it on your page.

To manage your navigation, double-click on your menu. This will give you access to design settings, including the color of the menu, the text of the menu, the layout, and more.

Here are some key features to consider when designing your navigation menu:

Remember to place your navigation within the header of the page, as this will make it visible on each page of your site. You can also fix the size of your navigation to make it big or small, depending on your preference.

As you progress in creating your Wix website, you'll have the opportunity to add advanced features that will enhance your site's functionality and user experience. You can add features like a chat function to interact with your visitors or a bookings system to allow them to schedule appointments.

To help your website rank higher on search engines, consider adding a blog section to regularly push content and drive traffic. This is especially useful if you're in the hospitality industry and want to create a restaurant website, where features like table reservations, food orders, and restaurant menus are essential.

You can also customize your website's color palette based on your logo, or skip it for now and pick out suitable colors later on.

Wix ADI uses an AI algorithm to combine industry-standard design rules with your social media content to create professional site options for you.

This process is made simple and streamlined by asking a brief set of questions to learn what you're looking for in a website.

You'll have the option to base the colors for the site on those in your logo as well as to choose a style for fonts and backgrounds.

In Phase 3: Enabling Advanced Features, you'll think about the features you want your website to have. This could be a feature that allows you to chat with your visitors or allow them to schedule appointments on your website.

To help your website rank higher on search engines, you may also add a 'Blog' section to regularly push content and drive traffic. This is especially useful in industries like hospitality, where adding features like 'Table Reservations' can be a game-changer.

You can always add new features to your website later on, but it's a good idea to prioritize the ones that are most important for your business. For example, if you're creating a restaurant website, features like 'Food Orders' and 'Restaurant Menus' are essential.

In this phase, you'll also be asked if you've ever created a website before. Since this is a beginner's tutorial, we'll select "This is my first time" as our preferred option. If you already have a website, you can import your content by copying and pasting your website's URL in the field provided.

Creating a color palette based on your logo is also part of this phase. You can click 'Use These Colors' in the bottom right corner, or skip it and pick out appropriate colors later on.

To publish your Wix website, navigate to the top-right and click on 'Preview'. If you're happy with the result, click 'Publish' to make it live online. You'll have the option to View Site to see it live, and if you haven't upgraded to a Premium plan and connected a custom domain yet, the platform will prompt you to do so.

You can publish your site using a free Wix domain, but this option is only suitable for testing or personal projects. A custom domain name is a better choice for businesses or e-sellers, as it improves branding, credibility, and SEO.

To track your website analytics and performance, go to your Wix dashboard and click on 'Analytics & Reports'. You can also use Google Analytics, Google Search Console, or Bing Webmaster Tool to track your site's performance.

Here are the key features to track:

Publishing your website to the web is a crucial step in making it visible to the public. You can preview your site to ensure everything looks and functions as it should.

To publish your site, click the 'Publish' button in the top menu bar. This will make your site live online, and you'll have the option to view it live by clicking 'View Site'.

Wix gives you two options for publishing your site: using a free Wix domain or connecting a custom domain. If you use a free Wix domain, your site's URL will look like username.wixsite.com/sitename, which is suitable for testing or personal projects.

However, for businesses or e-sellers, a custom domain name is a better choice as it improves branding, credibility, and SEO. But this option is only available for paid plans.

Wix also offers free web hosting, which makes the process of publishing your site simple and secure. This hosting includes 500 MB of cloud storage and 500 MB of bandwidth, which should be sufficient for small sites.

To upgrade your hosting, you can purchase more storage space or upgrade to a Premium plan, which will also allow you to remove Wix branding from your site.

Here are the benefits of Wix hosting:

Tracking your website's performance is crucial to its success. You can check its analytics and performance by going to your Wix dashboard and clicking on ‘Analytics & Reports‘.

This will give you access to key measurements like Traffic Overview, Sales Overview, Marketing Overview, Behavior Overview, Reports, and Insights. You can use these to measure your site's success and make improvements.

To get a more comprehensive view, you can also utilize tools like Google Analytics, Google Search Console, or Bing Webmaster Tool to track your site's performance.

Improving page loading speed is crucial for a good user experience and SEO. Faster websites tend to have lower bounce rates and higher rankings.

Faster websites load quickly on different devices and browsers. This is because slower websites can frustrate users and lead to a higher bounce rate.

Optimizing images for web use can improve page loading speed. This is because images take up a lot of space and bandwidth.

Using relevant, high-quality, and properly sized images can increase page loading speed. This is a simple yet effective way to improve your website's performance.

Animations, videos, widgets, and plugins can add visual appeal and functionality to your website, but they can also slow it down if not optimized or used sparingly.

Ecommerce on Wix is a breeze, with over 600,000 active online stores already using the platform. You can easily add ecommerce capabilities to your site by clicking the "+" symbol and selecting the Store add-on.

If your site doesn't already have a sell online element, you can get it from the app market. This will allow you to start selling products on your site almost instantly.

Some key elements to add to your ecommerce site include a Grid Product Gallery, Slider Product Gallery, Related Products, Product Widget, Shopping Cart, Add To Cart Button, and Currency Converter. These will help make your site user-friendly and efficient.

You can earn money from WIX by selling products on your ecommerce site, having your own domain, and displaying your own advertisements.

Selling online with WIX is a straightforward process. You can start selling products on your site almost instantly if it has a sell online element.

To get started, you'll need to check if your site already has a sell online element. If it does, you can begin selling right away. If not, you can easily get it from the app market.

Over 600,000 active online stores are using WIX for website building, ranging from small businesses to large enterprises across various industries and regions. This shows just how popular WIX is for e-commerce.

To incorporate e-commerce capabilities into your WIX website, you can choose the Store add-on by clicking the ‘+‘ symbol. Once you've selected Store, choose one of the following elements to add to your store landing pages:

Having your own domain is also very helpful in earning money from WIX, as your site should rank higher within search engines.

Bookings are a crucial aspect of any online business, and Wix makes it easy to integrate them into your website.

You can find the bookings element in the app market, or if you're using a template, it might already be pre-installed.

To add a bookings feature, click on "Add Apps" in the left menu and search for "Wix Bookings".

Wix Bookings is a handy app for photographers, for example, who want to take photoshoot bookings through their website.

You can add a bookings section to your home page by creating a new section and dragging the Wix Bookings block into it.

To manage services, click on the "Manage Services" button above the section and choose from existing options or start from scratch.

You can edit services by changing the duration, price, and payment options, as well as adding more images and customizing your booking form.

With Wix Bookings, you can start taking bookings on your site as soon as it's published, and manage bookings and add new services to your site.

By using Wix Bookings, you can streamline your business operations and provide a better experience for your customers.