How to Create a Website Using Wix (Step-by-Step Guide)

Wix is a simple drag and drop website making it easy for anyone to build a website faster without any coding or designing skills.

Why Build a website on Wix?

Wix is a drag and drop website builder, that allows you to design your website visually by moving across the page elements and typing directly on screen, rather than having to use code.

Signing up for an account with Wix provides you the access to a library offering 800 pre-designed templates to get you started. You can use these templates as they are or customize them to create a more unique design.

The Wix site builder is very easy to use for the beginners, and gives a lot of flexibility to those who want more control over how their site looks.

With Wix, there is no need for buying web hosting or installing software, you can sign up and go.

Building your first website on Wix for free. Wix free sites are given a Wix subdomain (like websitenewbie.wixsite.com) and have Wix brand ads on them.

Some of the other great features that Wix consists of:

  1. An AI site tool that will create a unique web design for you
  2. Manage everything in one place including hosting, security, email, and analytics
  3. Access to a comprehensive knowledgebase, with a support team on hand when you get stuck
  4. Tools for SEO, email, and social media marketing
  5. Integration with over 250 apps to add extra functionality to your site

Wix is a great solution if you want a quick way to build a website. It can be used to create:

  1. Personal sites.
  2. Business sites
  3. Online stores.
  4. Galleries and portfolios.
  5. Membership sites.
  6. Booking sites.
  7. Event sites with ticket sales.
  8. Music or video sites with membership or digital product sales.
  9. Restaurant sites with reservations and online ordering.

However, Wix is not suitable for everyone. If you want full control and flexibility over your site or you’re creating a complex site, building a site with WordPress may be a better option for you.

Step 1: Signing up with Wix

Navigate to Wix.com and click the blue “Get Started” button.

wix get started

You’ll see a sign-up screen where you have a choice to create a new Wix account or sign up with your Facebook or Google account.

After creating a new account or linked one of your social media accounts, you’ll see a quick questionnaire. It’s up to you to skip this step or take it, but it’s best to complete, as it will customize Wix to best fit according to your requirements.

wix lets do it

The questionnaire displays certain questions about who you are creating a site for, what kind of site it is, and your experience building websites.

An option will be displayed indicating you to move ahead and begin with a template and the Wix drag and drop editor or select the AI-powered website wizard, called ADI, which creates a site for you.

wix start now

Step 2: Choosing a Template for Your Wix Site

Click on the blue “Start Now” button and you’ll be seeing the Wix template directory where you can begin browsing through some site designs.

The templates will be shown according to your answers to the site setup questionnaire, so currently blog site templates are seen here. But you can browse and select from other types of site template such as business, store, creative, or community.

choose template in wix

Browse through all the themes until you find something that’s looks like you want or search by keyword like “food” or “tech” if you’re building a site with a specific theme.

To view each theme, hover over the thumbnail and click the “View” button.

templates in wix

These templates give you a basic layout and you can add images or change colors, fonts, and other design elements to your own created design.

Step 3: Introducing the Wix Site Builder

After selecting a theme and clicking the “Edit” button, you will be taken into the Wix drag and drop site builder.

wix design page

Area 1 in red is the main Wix account menu. It provides as view and restores previous versions of your site, connect a domain, setup email, improve your SEO, manage your social media accounts, and all other aspects of site management.

In this menu, you will find links to help articles and videos, upgrade your plan, hire a professional for help with design, development, or marketing, and “Dev Mode” which refers to the Corvid – Wix’s web application development platform.

Area 2 in blue consists of links that can be used to control saving your design and publishing your site.

Area 3 in green is a secondary menu that helps you in building your site. It allows you to change the tools visible on screen, which also includes layers, rulers, and guidelines, zoom out and reorder sections on the page, change the page you’re working on, switch to desktop or mobile view, undo or redo your last change, and search for tool, elements, and help articles.

Area 4 in purple is a real-time preview of your website looks like. You can see the changes immediately without needing to click the preview button.

Area 5 in yellow consists of buttons that are used to add and edit elements on your site. Here’s what’s you’ve access to:

Menus and pages – adding a new page, changing the page you’re working on, edit your website menus, and add a visual transition for clicking between pages.

Page background – choosing a color, image, or video for your background. Wix provides a library consisting of high-quality images and videos for you to use.

Add – add any element for your web page here. This includes text, images, buttons, boxes, galleries, slideshows, forms, etc.

Wix app market – This provides you with a lists third-party apps you can integrate into your site for analytics, chat, marketing, etc.

Media – a directory of free and premium stock images and videos consistsing of tools used for editing them.

Blog manager – creates and manages your blog posts, add a page to your blog, or add blog elements like an archive, recent posts widget, or category menu.

Area 6 in turquoise has tools used for customizing elements of your site design. It has tools such as copy and paste, change the alignment or order of your page elements, rotate or flip, and resize.

Step 4: Using Wix Artificial Design Intelligence (ADI)

The wizard begins with building on the information it already has from the initial questionnaire (if you filled it out).

While setting up my account, we decided to create a blog so at this point it is easy to decide on what type of blog we want to build.

creating wix site

As you start typing, the wizard attempts to auto-complete what you’re typing, so you can select a category from what comes up. We have entered “Lifestyle Blog”.

On the next page, you’ll be recommended some characteristics that may be suitable for your type of site. For lifestyle blog this was a subscription form to add visitors to our mailing list, a live chat box, and an Instagram feed. I decided to choose the subscription form and Instagram feed.

You can select whatever features you need by selecting the checkbox in the corner.

If you are not to see features you want on your site, scroll down to see more options.

Features available to add include:

  • Online store
  • Bookings
  • Video
  • Events
  • Pricing Plans
  • Forum
  • Music
  • Tour dates
  • Menus
  • Orders
  • Reservations
  • Groups (communities)

wix select template

By clicking on the blue “Next” button, you’ll be asked for the name of your blog, so go and type it in. You can change this name later.

name of blog in wix

Click on the next button. Now, you can import content from your existing blog, in-case you have one.

import images and text in wix

The next screen will ask you for details like your email address, address, phone number, social media accounts, and logo if you have one.

You don’t need to enter your personal address and phone number, but this is useful for business blogs.

Click the next button. Now, you can select a color scheme and fonts to match the appearance you’re going for on the site.

pick theme you like wix

Clicking on the continue button, Wix will move ahead and start producing some layouts for your new site.

pick homepage design wix

Select your favorite layout. You can choose form the options to add pages to your site. Some of these pages are pre-formatted for common use (e.g. contact page) and you can add blank pages and customize them.

add pages to your site

Once you’ve selected the pages, click the “Edit Site” button to view the full design and make any changes and customizations you wish.

 Step 5:  Customizing Your Wix Site

Let’s begin by editing the site header. You can adjust the look and behavior of the site header by clicking on it. There’s is a pop-up with buttons to change the header design, the settings, or the design.

style in wix

Clicking on the “Change Header Design” button will allow you to adjust the colors and style of your header. The pop-up displays a list of designs to choose from, and then you can click the “Customize Design” button to make any other changes to the width, opacity, border, corner style, and shadows.

The changes take place automatically when you click, or you can preview the changes by hovering.

customize design wix

In the design we have chosen, the header scrolls with the rest of the site, but we can change this by clicking the settings button.

header scroll setting wix

The color of my menu text needs changing, so we can do so by clicking directly on the text and buttons will pop up for manage menu, navigate, layout, design, animation, and stretch.

navigation in wix

We can adjust the text color by clicking the design button, clicking customize design, selecting text, and changing the color for regular, hover, and clicked links.

menu in wix

We can also select from a preset menu design with a selection of styles and colors, just as I could for the header.

On the menu pop-up, pages can also be changed that are listed in the menu, the menu alignment, add animation effects, and make it full-width if you wish.

Let’s add a background image. This can be done either by clicking on the “background” button on the left-hand side or by clicking anywhere on the background of your site and then clicking the “change page background” button.

change background in wix

In the pop-up that appears, we can select a background color, image, or video. Wix has its own library of images and videos so you don’t have to go trawling through stock sites.

page background wix

If you don’t find any other suitable options shown, you can click on the image or video buttons to browse or search the entire media library, upload your own images, import from the popular stock photo site – Unsplash, or buy a premium image directly from Shutterstock.

We are going to search for a cherry blossom image to match the  pink header, so we will search for this in the media library.

media from wix

If you find an image you like, select it and click the “Change Background” button.

This blog design had its own pre-set title and you’ll be willing to change that. To edit text on your site, just click on it. Then, click on the edit text and type over it directly. Change the font, size, color, and style from the pop-up.

Now, the site header, menu, and background has been adjusted, and now let’s add a new text box.

To do so, click on the “Add” button on the left, select the text, and choose heading, title, or paragraph. Adjust the size and position of your text box by clicking and dragging and style it as per requirement.

wix design layout

One interesting feature of Wix is that it will auto-suggest website copy for you in-case you are not sure what to type into a text area. Let’s try this out – click your text box and click the “Get Text Ideas button”.

In the pop-up that appears, type in a description of your site, and the topic of the text and Wix will recommend some copy for you.

We have chosen welcome text for design blog and it came up with three different options.

The first is: “We are all told, “live your life to the fullest”; I am here to do just that. YOUR BUSINESS NAME serves as a vessel to project my passions, and clue in my loyal readers as to what inspires me in this crazy world. So, sit back, relax, and read on.”

This is a great feature to get you started if you just don’t have any idea what to write on your site, and of course you can edit it as much as you wish.

If you are stuck at any time, click the help button that appears when you click on any element and you’ll be taken directly to a relevant article on the help center.

Wix contains library of videos that describes all features of the site builder and how to make any customizations you want. You can access this from the help link in the main menu.

wix video help center

Step 6: Publishing Your Wix Site

Once you’re satisfied with the design of your new site, now you can make it live. Move ahead and click on the blue publish button in the top right-hand corner.

publishing wix site

You will receive a message saying that your site has been published, with a direct link to it.

publish wix site

Step 7:  Managing and Updating Your Wix Site

You may continue with your free Wix account or upgrade to a paid account. If you don’t want the Wix ads, you can use your own domain or have functionality like an online store, you’ll have to upgrade. You can do this at any time by clicking the “upgrade” link in the main menu of the site builder.

Premium plans range from $4.50 to $24.50 a month for basic sites (note, the cheapest package includes Wix ads) or from $17 to $35 a month for a business or eCommerce site that takes online payments.

manage wix with premium

Apart from upgrading your site, you’ll be finding the most of the other options for managing your site under the “Settings” link in the main menu of the editor.

Once your site has been setup, you won’t need any change apart from making slight edits to text or adding a new page every now and again. You can doso with the help of the editor.

To add new blog posts, you can access the blog manager button on the left-hand side of the editor.

blog manager wix

Blog manager where you can add new posts, edit existing posts, and schedule posts for future publication

publishe blog in wix

The blog post editor is very easy to use and much alike to many other blogging tools. Simply type text, style it with the visual editor, and add new blocks for images, videos, galleries, etc.

blog design wix

 

 

 

 

 


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420