So, you want to create a website of your own?
It’s no surprise; modern life seems to revolve around the Internet, and whether you want to promote yourself or your business, or simply share an interest or hobby, setting up your own website is the perfect way to do it.
We have some great news for you:
1. It needn’t cost any money at all.
2. You can do it all by yourself.
In this article, we’re going to take you right through the process from start to finish. If you’re able to find your way around a computer, you should have no problem following these instructions – there’s no need for you to be any kind of Internet expert.
For the purposes of this article, we’re going to use the popular Weebly platform to create our site. You should be able to use the guide as the basis for any kind of website you like, but for demo purposes, the site we’re going to build is for an imaginary freelance hairdresser called “Harriet.”
Before we get begin to show you how to create your own website, let’s discuss why we’ve chosen Weebly as the platform for this project:
- Weebly is really easy to use: You really don’t need to understand any code to build an attractive Weebly website. Furthermore, the interface is very intuitive and easy to use.
- Weebly is free: You can get started with Weebly without handing over any money at all. If you’re happy to have a Weebly Web address (i.e. www.yoursitename.weebly.com) you can launch your site completely free of charge. However, we would urge you to consider upgrading to one of Weebly’s great value premium packages, so you can have an ad-free site with a more professional looking address.
- Weebly boasts a huge array of templates: There are hundreds of free templates (themes) for Weebly websites, and there are more being added to the service all the time. If you do have some knowledge of HTML and / or CSS, the code is accessible so you can further customise them to your requirements.
- Separate Web hosting is not required: You don’t need a separate Web hosting account to operate a Weebly site, as your website is hosted on Weebly’s servers. This eliminates the need for you to to know lots about Web hosting and means you have one less account to manage.
These are the factors we’ve taken into account when choosing Weebly as the system of choice for this guide to making your own website.
How we will help you
We’ve built hundreds of sites here at Make a Website, and we see Weebly as a great choice for people who want to quickly build an effective site without becoming expert Web designers.
In this tutorial, we will take you through every stage of building your first website using Weebly – from signing up to the service to making your site available to the public.
What You’ll Need
You really don’t need very much to get started on your first Weebly website. This list is probably the smallest of all of those provided across our wide range of Website building tutorials! Here’s what you will need:
- A credit card, should you wish to use any of Weebly’s chargeable services (recommended)
- A Web browser of your choice (we prefer Google Chrome or Firefox)
- Some content with which to populate your site – both text and images
- A little patience while you learn the basics
Weebly is so easy to use that just a few uninterrupted hours should be all you need to get your basic site up and running.
Getting Started with Weebly
1. Go to the Weebly website by clicking this link. The Weebly website will open in a new window or tab so you can continue to refer back to this tutorial.
2. Begin by signing up. We recommend you sign up using a separate account rather than linking to Facebook. The latter may seem like an easier option, but who’s to say you might not prefer to keep things separate in the future?
As such, fill in your name, email address and desired password, and click the orange “sign up” button.
3. You will now be taken straight to Weebly’s theme selection screen – we told you it would be easy! Here you can scroll through all of Weebly’s available templates.
The choices can feel a little bewildering at first, so you may find it helps to flick through the “styles” and “colors” menus to help you choose a suitable look for your site.
4. As we stated above, our demo subject for this tutorial is “Harriet the Hairdresser.” As such, we’ve chosen one of the themes from the “minimalist” section that looks appropriate for this kind of business. You are, of course, free to select whichever theme takes your fancy – it shouldn’t affect your ability to continue with the tutorial.
5. With your theme chosen, you will be asked to choose a domain name for your site. For the purposes of this guide, we are going to choose the first option: “a subdomain of Weebly,” and call the site “harrietthehairdresser.” However, we would suggest that you register a domain of your own if you want your site to look truly professional. Choosing the second option will allow you to buy a proper Web domain.
6. Click “Continue” when you are done, and you will be given the opportunity to watch a short introductory video – we recommend doing so. Once you’re finished, you will be presented with Weebly’s browser-based page editor.
Customizing your Weebly Website
Once you arrive at the page editor, you will notice your chosen template is already loaded.
Let’s discuss the basics of the Weebly editor: The site itself is shown in the bottom right of the screen. The toolbox on the left provides you with a host of content types that you can drag into your website design. The menu bar at the top allows you to control the main settings related to your site.
Let’s start with the basics:
1. First, we will change the name of the site. We’re will call ours “Harriet the Hairdresser” but you can, of course, call yours whatever you wish. Simply click on the existing “My Site” text and type over it as required:
2. For our purposes, we’re going to leave the main header image as it is, as the photo on our chosen theme is perfect for a hairdressing site. However, if you wish to change the image, just do the following:
Hover your pointer over the image, and you will notice an “edit image” option appear. Click on it, and you will be given the choice of adding an image. Choose a suitably sized image file from your computer, and drag the file to the box that appears, as shown below:
Once the image is uploaded, you can make some basic edits to it (if needed) using the buttons shown below. You can also add multiple images and turn the image area into a slideshow.
Once you’re done with your image, click the orange “Save” button, then click “Save to all pages.” This will make your chosen image (or slideshow) the header for all the pages throughout your site.
3. Now we will add a few more pages to the site. Exactly what pages you add (and how many) is entirely up to you. For our demo hairdressing site, we’re going to add the following pages:
– About Harriet
This is a fairly typical selection of pages for a site of this nature.
Click on “Pages” at the top of the editing screen, then click “Add Page.” You can choose from standard pages, blog pages, store pages or external links. For the purposes of this tutorial, the pages we will add will all be standard pages.
As you add each page, you can choose whether they will have a full-size header image or a small header (these options are shown in the below screenshot with a pink arrow).
After naming each page and selecting your preferred layout option, click “Save and Edit,” then click back to the “Pages” menu and repeat the process.
4. As you can see from the below screenshot, we’ve followed our own process and added the pages we decided on above.
It’s worth noting at this point that you can go back to the “Pages” option at any time, and reorder your pages (or create subpages) by simply dragging and dropping them on the page list on the left,
When we flick to the preview view of Harriet’s website, we can now see the new pages in the navigation menu.
Adding Page Content
We’ve now created the structure of our demo website, so we need to start to add some real content to the site.
Let’s start with our “About Harriet” page.
1. Click onto the “About” page (or whatever page you are choosing to edit at this point). You will notice a section underneath the header that says “drag elements here.”
2. You would typically place text on an “About” page, so drag the Text element from the left-hand toolbox on the editing screen. You should notice that the words “Click here to edit” appear on the page.
3. Click where it says, and you will find you can enter freeform text. A toolbar containing some basic text editing tools also appears so you can format your text as needed, adding bold text and italics as needed. Simply click anywhere outside the text box once you’re done.
4. Let’s add a photo of “Harriet” to this page too. The process is much the same. Drag the Photo element from the left, to the space underneath your text box. Then drag a suitable image file from your computer into the space provided.
5. Once the image is uploaded, you can drag the corners of the image box to resize it, and change the alignment and various other settings in the options box shown below.
6. Once again, just click away from the image box when you’re done. Here’s our completed content area for the “About Harriet” page.
You should now know enough of the basics of Weebly to go on and populate the rest of your pages with content.
Before you do, however, we will show you how to add a nice contact page with a map, as the process for this is slightly different.
Adding the Contact Page
1. As this is a “Contact” page, we need to add a contact form. Scroll down the tools on the left of the page until you find the “Contact Form” option, then drag it into the white space below the header on your “Contact” page.
2. A new contact form immediately appears on your site. You can click to change the text above it, just as you changed the title of the main site, or click on individual areas of the form to change settings, such as making each field compulsory. You can also add extra fields to the form by dragging them from the left-hand menu. Click the orange “save” button when you are done.
3. Contact pages usually include a map. Once you’re finished with the contact form, drag the “map” element from the left to the body of your “Contact” page.
Click on the map once it appears, and you can change the address the map points to, and control all kinds of other settings specific to the map element.
As you should now see, each of the Weebly page elements has its own set of settings, and is easily dragged into the editing window to provide more functionality for your site.
Explaining each of the different elements in detail is obviously beyond the scope of this tutorial guide. However, as you will have noticed, all of the options are clear and simple, so there’s no harm in getting stuck in and trying new things out.
One great thing about Weebly is that it helps you to build a mobile version of your site in parallel to the desktop version.
In the top right of the screen, just click the mobile icon (to the left of the publish button). You are then taken to a similar editing screen that shows exactly what your site will look like on a mobile device.
Assuming you’ve uploaded content of your own (rather than creating a copy of our website for Harriet the Hairdresser!), you are now nearly ready to launch your site, but there are a few things you should do first:
1. Think about social networks: Most Weebly themes include social networking buttons. On our chosen theme, they’re located on the top-right. Click on these and ensure they are linked to the relevant accounts, or delete them if you don’t wish to use them. If you ARE promoting a business, having a Facebook and / or Twitter presence to complement your website is a very sensible strategy.
2. Configure SEO Settings: Click on “Settings” and then “SEO” and fill in the site description and keyword fields. This will help search engines find your site in the future.
3. Reconsider your theme: Even if you have populated your entire site, you can still change your theme colours, or even the theme itself. Just click on the “Design” option if you think you need to do so!
Once this is all done it’s time to publish your site.
Publishing your Site
Publishing your Weebly site is easy. Just click the orange “publish” button in the top right of the screen. You will again be asked to confirm your domain.
Now is a good time to decide for sure whether you want to use Weebly’s hosting, or choose a domain name of your own. If you want your site to be taken seriously, we would urge you to choose a domain of your own and not use a “.weebly.com” address.
Click “Continue” when you are done, and then select a category for your site.
You will then have to enter some CAPTCHA information to verify that you are setting up the site legitimately.
After a very brief delay, you will receive confirmation that your site has been published.
Here is our completed demo site, shown using the Google Chrome browser:
Developing your Site
Congratulations! Your site is now ready to receive its first visitors. You may want to ask some family and friends to take a look in case you’ve made any mistakes that need correcting.
Once your site is live, the most important thing is to keep adding new content to keep the site fresh. The more quality content you add, the more chance you have of your site appearing high up the search listings.
A Final Word
By now, we hope you’ve seen the power of Weebly, and how easy it makes it to build a really professional looking site with limited Web experience.
We wish you every success with your new site. If you’ve not built it yet, why not head over to Weebly now and get started!
IMAGE CREDIT: flikr