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

Edited by Aliyyah Camp, Shelley, Melissa Rae, Eng and 3 others

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.

Aliyyah wixfinal.png


Method 1: Using Wix

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.

Steps

  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.
    Aliyyah wix1.png
    Advertisement
    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".
    Aliyyah wix2.png
    Advertisement
    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.
    Aliyyah wix3.png
    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.
    Aliyyah wix4.png
    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.
    Aliyyah wix5.png
    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.
    Aliyyah wix6.png
    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.
    Aliyyah wix7.png
    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.
    Aliyyah wix8.png
    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.
    Aliyyah wix11.png
    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.
    Aliyyah wix10(2).png
    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.
    Aliyyah wix13.png
    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.
    Aliyyah wix14.png
    Aliyyah wix15.png
    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.
    Aliyyah wix16.png
    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.
    Aliyyah wix17.png
    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.
    Aliyyah wix18.png
    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.
    Aliyyah wix19.png
    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.
    Aliyyah wix20.png
    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.
    Aliyyah wix21.png
    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".
    Aliyyah wix22.png
    You can then customize the app to fit the color scheme and layout of your website.
    Aliyyah wix23.png
    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.
    Aliyyah wixpublish.png
    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.
    Aliyyah wixfinal.png
    Was this step helpful? Yes | No| I need help

Method 2: Using Weebly

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.

Steps

  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.
    Aliyyah weebly1.png
    Advertisement
    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.
    Aliyyah weebly2.png
    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".
    Aliyyah weebly3.png
    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.
    Aliyyah weebly4.png
    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.
    Aliyyah weebly5.png
    Before adding products to our eCommerce website. It is important to know the Basic functions you can use to customize your Weebly website.
    Aliyyah weebly6.png
     
    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.
    Aliyyah weebly7.png
    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.
    Aliyyah weebly8.png
    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.
    Aliyyah weebly9.png
    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.
    Aliyyah weebly10.png
    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.
    Aliyyah weebly11.png
    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.
    Aliyyah weebly12.png
    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.
    Aliyyah weebly13.png
    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.
    Aliyyah weebly14.png
    Was this step helpful? Yes | No| I need help
  16. 16
    You now have a fully functional eCommerce website built on Weebly.
    Aliyyah weebly15.png
    Was this step helpful? Yes | No| I need help

Method 3: Using SquareSpace

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.

Steps

  1. 1
    To begin, select the "Get Started" button on the homepage of Squarespace.
    Aliyyah squarespace1.png
    Was this step helpful? Yes | No| I need help
  • 2
    You will be redirected to a page on which you can choose the template for your website. Scroll through the templates, preview some of them, and then select the one that most aligns with your design needs. For this tutorial, we chose the Bryant theme under the Businesses category.
    Aliyyah squarespace2.png
    You can search by category as well:  
    1. Businesses
    2. Portfolios
    3. Stores
    4. Personal
    5. Musicians
    6. Restaurants
    7. Weddings
    Was this step helpful? Yes | No| I need help
  • 3
    Select "Start With This Design" on the next page. You will be prompted to create an account in order to continue building your website. Enter your information and then select "Sign Up & Create Site".
    Aliyyah squarespace3.png
    Was this step helpful? Yes | No| I need help
  • 4
    To get you started, Squarespace will prompt you to answer several questions about your website. including:  
    1. Will you be using your website for personal use or for business?
    2. Please fill in a title for your website.
    3. Please fill in your business address.
    Was this step helpful? Yes | No| I need help
  • 5
    Select "Done" when you are finished entering in your information.
    Aliyyah squarespace4.png
    Was this step helpful? Yes | No| I need help
  • 6
    To begin building your website, select "Pages" from the main left hand menu on the editing screen.
    Aliyyah squarespace5.png
    Was this step helpful? Yes | No| I need help
  • 7
    The editing screen automatically fills your website with demo content. Simply click the trash icon next to each page on the left hand menu to delete the demo content and start fresh. What you are left with is the template with your site title and two empty navigation menus which we will populate with our own pages.
    Aliyyah squarespace6.png
    Was this step helpful? Yes | No| I need help
  • 8
    Before adding pages, it is a good idea to customize the home page. This way, you have an idea of where you would like certain content to go. Hover anywhere in the top banner section of the page and select "Settings". This will bring up an editing screen on the right where you can edit the home page content. Enter in your desired home page text.
    Aliyyah squarespace6(2).png
    Was this step helpful? Yes | No| I need help
  • 9
    Scroll down and select "getty images" under the Thumbnail Image option to choose a stock photo to be used in your home page's banner. You can also upload your own image.
    Aliyyah squarespace7.png
    Was this step helpful? Yes | No| I need help
  • 10
    Select "Set As Homepage" when you are finished.
    Was this step helpful? Yes | No| I need help
  • 11
    Scroll down, hover anywhere in the page contents and select the "Edit" button that appears in order to edit the rest of the content on the home page. Type in the content you would like to appear on the home page. Select the "Save" button in the upper left hand corner when you are finished.
    Aliyyah squarespace8.png
    Was this step helpful? Yes | No| I need help
  • 12
    Select the "+Add Page" button on the main left hand menu to begin adding custom pages to your corporate website.
    Aliyyah squarespace9.png
    Was this step helpful? Yes | No| I need help
  • 13
    We will add an Address page under the Info menu option. Enter in your business's address and then select the "Save" button when finished.
    Aliyyah squarespace10.png
    Was this step helpful? Yes | No| I need help
  • 14
    Next, we will add a page to the Main Navigation menu. Select the "+" sign next to the phrase "Main Navigation" in the main left hand menu and select "Page".
    Aliyyah squarespace11.png
    Was this step helpful? Yes | No| I need help
  • 15
    We will add a Corporate Culture page to appear before the Info menu option. Enter in some information about your company's culture and then select the "Save" button when finished.
    Aliyyah squarespace12.png
    Was this step helpful? Yes | No| I need help
  • 16
    Let us also add an external link to the Main Navigation menu. Select the "+" sign next to the phrase "Main Navigation" in the main left hand menu. This time, select "Link".
    Aliyyah squarespace13.png
    Was this step helpful? Yes | No| I need help
  • 17
    Enter the link title and the link URL and then select "Save". You now have a complete navigation menu on your corporate website.
    Aliyyah squarespace14.png
    Was this step helpful? Yes | No| I need help
  • 18
    Review your website to make sure that the menu links to the correct pages and that the home page looks the way you want.
    Was this step helpful? Yes | No| I need help
  • 19
    Select the "Upgrade Now" button when you are ready to publish your website.
    Aliyyah squarespace15.png
    You will be prompted to select either a Personal, Business, or Commerce website plan. After you make your selection and process payment, you can choose a custom domain for your website. This is the last step in the SquareSpace tutorial.
    Aliyyah squarespace16.png
    Was this step helpful? Yes | No| I need help

    • Method 4: Using WordPress

    WordPress is a content management system that provides a platform for all kinds of websites. In fact, it is the most commonly used website builder. WordPress is a great option if you want to create a blog website. Because WordPress requires more technical knowledge than the previous three website builders, we have a completely separate tutorial for how to Build a Website using WordPress.

    Method 5: Hosting in Brief

    Dedicated Domain Names

    A dedicated domain name is a web address that you own. It does not belong to the platform on which you built your website. It is a good idea to invest in a dedicated domain name for several reasons:

    • It gives you credibility. A domain name without the subdomain of a platform looks more professional to viewers. For example, www.VisiHow.com looks more professional than www.VisiHow.Weebly.com would.
    • You maintain your brand. When you have a dedicated domain name, you can keep it for as long as you like. If you decide to move your website from Wix to SquareSpace, you can transfer your domain name along with it. This is not the case if you are using the free domain names provided by the website platforms.
    • You will probably get dedicated email addresses as well. Most providers that sell domain names offer email service as well. If you have an email address such as YourName@YourWebsite.com, you will communicate that you mean business to anyone that visits your website.

    Here are a few providers that sell domain names:

    • GoDaddy
    • NameCheap
    • BlueHost
    • HostPapa
    • Google Domains

    The platform on which you built your website should have instructions on how to use your own dedicated domain name instead of its free one.

    Self Hosting

    When you self host your website, it is completely under control. Most people achieve this buy purchasing shared hosting through a web hosting service. Shared hosting is when your website resides on a server that places yours and many other websites on the web. When you choose to self host your website, you choose to own all the content you post on the web and take responsibility for its maintenance. It is a good idea to invest in self hosting for several reasons:

    • You expand the functionality of your website. When you self host your website, you have access to all the backend coding. This allows you to increase the functions your website can complete. For example, you can create custom widget codes.
    • You increase your ability to monetize your website. Free services often limit the amount of items you can sell on an eCommerce website or which advertisements you can post. With self hosting, you do not have to worry about those limitations
    • You have control over the look of your website. In addition to expanding the functionality, having complete access to the backend coding means you can customize every aspect of your website.

    Here are a few providers that offer self hosting:

    • GoDaddy
    • BlueHost
    • HostPapa
    • HostGator
    • JustHost

    If you choose to self host your website, WordPress is the most commonly used option. We provide a complete tutorial on how to Build a Website Using WordPress

    Quick Tips

    • Always reread all the content on your website editor before publishing. Spell check may check spelling errors but does not always catch minor grammatical errors.
    • It is a good idea to create a dedicated folder on your computer or cloud where you keep all of your website photos. This makes it easy to add them to your website from one place.
    • Whether you include "www." in the website domain name should not matter in terms of reaching the website. Contact your website builder support or self hosting provider support for assistance if you cannot access your website without adding "www." before the domain name.

    Questions and Answers

    How can I change my website from Wix to WebsiteBuilder for free?

    I have made a website on Wix but then later discovered that WebsiteBuilder is better. Can I transfer the work I've done on Wix for free?. I have tried: I haven't tried anything but I have read from Wix and WebsiteBuilder that if you pay money, you can use the domain name from somewhere else.. I think it was caused by: ?

    VisiHow QnA. This section is not written yet. Want to join in? Click EDIT to write this answer.

    If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.

    Comments

    Article Info

    Categories : Ultimate Guide To Build & Promote A Website

    Recent edits by: VC, Doug Collins, Eng

    Share this Article:

    Thanks to all authors for creating a page that has been read 799 times.

    x

    Thank Our Volunteer Authors.

    Would you like to give back to the community by fixing a spelling mistake? Yes | No