Build a Website for Beginners Using Wix vs Weebly vs SquareSpace ... and 2 more

5 Methods:

Using Wix

Using Weebly

Using SquareSpace

Using WordPress

Hosting in Brief

Building a website is no easy task. With all the pages, links, and content to worry about, it is easy to become overwhelmed or feel that you need to outsource the work. Fortunately, this tutorial walks you through the process of building a website - from the very first step of creating an account to the very last step of publishing the content. The methods explained in this article feature some of the commonly used website platforms. We also discuss dedicated domain names and self hosting for the more technical users.

Wix is a drag and drop website builder that features over 500 website templates. The templates are known to be very colorful and interactive. If you like a website with a lot of icons and pictures, Wix may be a good option for you. If you are new to website building and have little to no coding skills, using Wix will be advantageous for you. Wix utilizes a 'What You See Is What You Get' or WYSIWYG interface, meaning that the editing options you use show exactly what will appear on the final website. For these reasons, Wix is best for artists, restaurant owners, and anyone looking to build a flashy website for their business or portfolio.

1. 1
   To start, go to Wix.com, select "I Need a Site for..." and choose what type of website you would like to create

   .

   For the purpose of this tutorial, we will be building a portfolio website.

   

   Was this step helpful? Yes | No| I need help
2. 2
   Select "Get Started" on the next screen and then enter an email address and password to create a new account

   .

   Then select "Go".

   

   Was this step helpful? Yes | No| I need help
3. 3
   The first step in creating a website with Wix is choosing a template

   .

   You can browse all templates available by simply scrolling through the templates in the website category you chose (in this case, portfolio). You can search for a specific template, such as "artist" or "restaurant". You can also choose a subcategory from the options on the left.

   

   Once you choose a template and publish your website, you cannot change it. So take your time and make sure you are happy with your choice. Hover over the template you would like to use and select "Edit". For the purpose of this tutorial, we chose the Illustrator template.

   

   Was this step helpful? Yes | No| I need help
4. 4
   Once you choose your template, you will be redirected to the Wix editor where you can customize the website

   .

   This is where you will spend the majority of your time. Here you can change the website's title and background color. You can add images, pages, and apps to make your website more user-friendly and interactive.

   

   Was this step helpful? Yes | No| I need help
5. 5
   The first step in editing a Wix website is changing the title

   .

   Simply select the text and a "Text Settings" box will appear on the screen. Type in your website title and then use the options in the "Text Settings" box to change the font, size, and color.

   

   Was this step helpful? Yes | No| I need help
6. 6
   Before proceeding with further edits, it is a good idea to save your work

   .

   Click "Save" in the upper right hand corner of your screen. You will be prompted to choose a domain name for your website. The first part of the domain name is automatically your username (which can be changed), followed by "wix". You decide what the last portion of the domain name will be. We chose "portfolio". After typing it in, click the "Save & Continue" button. There is an option to use a customized domain name. Dedicated domain names look more professional and are easier to remember. We will discuss dedicated domain names towards the end of this tutorial.

   

   Was this step helpful? Yes | No| I need help
7. 7
   Let us add photos to personalize the website

   .

   Click on any picture in the gallery and an option to "Change Images" will appear. Your options for adding images include: upload from your computer, add from your social media accounts, use free images from Wix, or buy images from Bigstock. For this tutorial, we will upload our own images. Simply drag and drop the images from your computer onto the main portion of the screen or select the "Add Images" button in the upper right hand corner and select the images you wish to display on your new portfolio.

   

   Was this step helpful? Yes | No| I need help
8. 8
   After you upload the images, highlight them all and select the "Apply" button to continue

   .

   You will need to delete the template images before selecting "Done". Do this by hovering over each image and clicking the trash icon.

   

   Was this step helpful? Yes | No| I need help
9. 9
   Rearrange and customize the images by clicking anywhere in the gallery and the selecting the second "Layouts" icon

   .

   You can: change or add more images, customize the settings of the images to appear in a pop up screen or show text underneath, reformat the layout of the gallery (we chose to have five columns for the images), and select animated gallery designs.

   

   Was this step helpful? Yes | No| I need help
10. 10
    Next, select the menu under the site title to and select "Manage Menu" to add pages

    .

    A "Pages" box will appear. Select the "Add Pages" button to include any additional pages you want on your website.

    

    Was this step helpful? Yes | No| I need help
11. 11
    You can add three things to the menu

    :

    a regular page to appear in the menu, a link to an external website, and subpages. For the purpose of this tutorial, we will add a Services page and a Testimonials page.

    

    

    Was this step helpful? Yes | No| I need help
12. 12
    Select the first page you want to edit in the "Pages" box to start making changes

    .

    Let us start off with the Contact page.

    

    Select the text and retype in your contact information. Then, select the form and enter in your email address so that visitors can send messages to your email.

    

    Was this step helpful? Yes | No| I need help
13. 13
    Access the other pages in your menu to edit them according to your liking

    .

    Select the plus sign on the left hand menu to bring up all the different things you can put on a page.

    

    We will put text and a button on our Services page. When you add text, you can reformat it just as you did with the website title. You can also drag the text box around the page to place it where you like.

    

    When you add a button, you type in what you would like the button to read and decide to where you would like it to link.

    

    Was this step helpful? Yes | No| I need help
14. 14
    Add Wix apps to make your website more interactive

    .

    Select the page on which you want to add the app and then click the booth icon on the left hand menu. This will open up with Wix App Market at which you can select from over 100 apps (both free and paid) to add to your website.

    

    We will add a Comments app to the Testimonials page. Hover over the app and select "Add to Site". A popup will appear; select "Add App".

    

    You can then customize the app to fit the color scheme and layout of your website.

    

    For your information, some other app options include: site search, visitor counter, social media feed, Google AdSense, live chat, newsletter sign up form, and much more.

    Was this step helpful? Yes | No| I need help
15. 15
    After you have finished adding images, pages, content, and apps, it is time to publish your website for the world to see

    .

    Select the "Publish" button in the upper right hand corner of your editor screen.

    

    Your website is now online. Simply share your domain name with anyone whom you would like to visit your website. You can always go back to edit your website after it is published.

    

    Was this step helpful? Yes | No| I need help

Weebly is another website builder that requires very little technical knowledge. With its drag and drop editor, you can customize your website's look and functionality with just the click of a button. Weebly grants access to the HTML/CSS code if you are tech savvy and want to tailor the templates. One of the great features Weebly offers is eCommerce functionality. You can build a small online store in less than hour. Weebly's flexibility and vast offering of functionalities makes it a good fit for small business owners or anyone looking to build a high-performance website.

1. 1
   The first step in building a website with Weebly is creating an account

   .

   Visit www.Weebly.com and select the "Try It Free" button on the home page.

   

   Was this step helpful? Yes | No| I need help
2. 2
   Enter your desired login credentials and select the "Sign Up Free" button to complete the process

   .

   

   Was this step helpful? Yes | No| I need help
3. 3
   Next, you will be prompted to choose what type of website you would like to create

   .

   For the purpose of this tutorial, we chose "Store".

   

   Was this step helpful? Yes | No| I need help
4. 4
   Next, you will choose a theme/template for your online store website

   .

   Scroll through the options to find one you like. We chose the Highlighter theme with a green color scheme. Unlike Wix, you can change the theme for your website later.

   

   Was this step helpful? Yes | No| I need help
5. 5
   Once you have chosen your theme, you will be redirected to the editor screen where you will be prompted to set up your website domain

   .

   You can use a Weebly subdomain for free, purchase a dedicated domain name through Weebly, or connect a previously owned domain name. For the purpose of this tutorial, we will use a Weebly subdomain. We discuss dedicated domain names later in this tutorial.

   

   Before adding products to our eCommerce website. It is important to know the Basic functions you can use to customize your Weebly website.

   

    

   1. Title - add header text anywhere on a page.
   2. Text - add regular text anywhere on a page.
   3. Image - add an image from your computer, a stock photo provided by Weebly, or an image from a URL.
   4. Gallery - add a series of images from any of the sources above.
   5. Slideshow - add a series of images from any of the sources above to appear in a widget that will rotate through the images.
   6. Map - add a Google Maps widget to display a specified location.
   7. Contact Form - add a widget for visitors to submit messages to you that will be delivered via email.
   8. Embed Code - add custom HTML code to display an application that is not normally available on Weebly.

   Was this step helpful? Yes | No| I need help
6. 6
   Change the name of the store by click the phrase "MY SITE" and retyping in your desired website name

   .

   Beneath that, drag and drop "Title" text from the Basic menu in order to add a subtitle under your website name.

   

   You can change the size of the text and even create a link using the text editing options that appear after you add new text.

   

   Was this step helpful? Yes | No| I need help
7. 7
   Now it is time to add products to our eCommerce store

   .

   Simply click the "+Add Product" button in the middle of the page. A popup will appear prompting you to upgrade your account in order to use eCommerce features. Choose the plan that best suits your needs and then enter in your payment details. You can bypass this step by signing up for a paid account at the beginning.

   

   Was this step helpful? Yes | No| I need help
8. 8
   You will be redirected back to the Products dashboard where you can add in your products

   .

   Enter the product name, description, product type, and price. Add an image to the listing and then select the "Save Product" button.

   

   Was this step helpful? Yes | No| I need help
9. 9
   To add more products, repeat the same process above.

   Was this step helpful? Yes | No| I need help
10. 10
    To complete your store, select the Settings category from the left hand menu of the dashboard

    .

    

    Was this step helpful? Yes | No| I need help
11. 11
    To customize your store, you can change things like the default currency, company name, return policy, and shipping policy

    .

    Select the "Save Settings" button in the bottom right hand corner when you are finished.

    

    Was this step helpful? Yes | No| I need help
12. 12
    There is no need to enter checkout information

    .

    Weebly automatically integrates credit card processing for your online store.

    Was this step helpful? Yes | No| I need help
13. 13
    Add a contact form to your online store so that users can reach you should they have any questions or comments

    .

    Select "Contact" from the page menu under the site title. Then, drag and drop the Contact Form widget from the main left hand menu anywhere into the editing screen.

    

    Messages will automatically be sent to the email address you used to create your Weebly account.

    Was this step helpful? Yes | No| I need help
14. 14
    Review your website content before publishing

    .

    Check that there are no spelling errors and that the images and descriptions for your products are correct.

    Was this step helpful? Yes | No| I need help
15. 15
    Select the "Publish" button when you have finished reviewing everything.

    

    Was this step helpful? Yes | No| I need help
16. 16
    You now have a fully functional eCommerce website built on Weebly

    .

    

    Was this step helpful? Yes | No| I need help

Squarespace is a website builder known for its branding. Squarespace gives you tons of styling features from which to choose, making it easy to build a one of a kind website. Some styling features include custom icons that can be used to create a logo and high quality stock photos that can be used ad page banners. Because of these features, Squarespace is a good website builder for corporate websites. In this tutorial, we will walk you through how to create a corporate website using Squarespace.

1. 1
   To begin, select the "Get Started" button on the homepage of Squarespace.

   
   Was this step helpful? Yes | No| I need help