Weebly sits alongside Wix as one of the most capable hosted website building tools out there. Weebly offers one of the easiest ways to build a simple yet attractive Web presence, and even includes functionality for basic online shops.
One of the most tempting reasons to choose Weebly as the platform for your website is the cost of getting started. Essentially, the cost can be ZERO if you’re happy to use Weebly’s free hosting and have a Weebly website address. However, for most professional purposes, it’s better to pay for one of Weebly’s inexpensive commercial packages, so that you can choose a domain name of your own.
Why Weebly?
Before we get started on this Weebly tutorial, let’s consider a few of the reasons why Weebly may be a good choice of platform for your website:
- Weebly has a really simple drag and drop interface: 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 either free or very inexpensive: Weebly don’t pressure you to upgrade to their paid plans. However, for those that need them they provide very good value. Best of all, you can try Weebly out without handing over any credit card details, and carry on using the free service for as long as it meets your requirements.
- 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.
With all of this is mind, Weebly really is a good choice if you want to get a simple but attractive website up and running, whilst keeping things really easy to manage.
How we will help you
Here at Make a Website, our team have built hundreds of different websites, and we recognise that Weebly is a great choice for those who have no desire to learn the intricacies of a more complicated platform.
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. Once you find a theme you like, click on it, and you will be given the ability to tweak the exact colour scheme (as shown in the screenshot below).
For the purposes of the tutorial, we’ve gone for a bold, corporate-looking theme, but you can choose whatever you like – it shouldn’t affect your understanding of this guide. Click the orange “choose” button when you are sure of your selection.
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.” 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.
As you can see from the screenshot above, the site itself is shown in the bottom right of the screen (depicted in the screenshot with the yellow arrow). The toolbox on the left (shown with the pink arrow) provides you with a host of content types that you can drag into your website design.
Let’s start with some basics:
1. First, we will change the name of the site. We’re going to call the site “Make a Website Demo Site” but you should, of course, call yours whatever you wish. Simply click on the existing “My Site” text and type over it as required:
2. Next, let’s change the main image. As you hover your pointer over the image, 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:
3. 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.
4. Next, let’s add a couple of other pages to your site. For the sake of this demo, we will add an “About Us” page, and a “Contact Us” page, but you are, of course, free to add as many as you need.
First, 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.
5. Add the first page you want, then click “save and edit.” Then, go back to the “Pages” option, and add as many others as you need.
In the screenshot below, you will see how our site has changed with the addition of the two new pages. You will also notice the new page title, and the different header image we uploaded in step two.
It’s worth noting 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, as shown below.
Adding Page Elements
Now you know enough to build the basic structure of your site, let’s look at adding new elements to your pages.
We’re going to use our demo “Contact” page here, so click into it using the Weebly editor.
1. Scroll down to the lower part of the page, until you see the area that says “DRAG ELEMENTS HERE.”
2. 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 shown above.
3. 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.
4. Contact pages often also 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.
Thinking Mobile
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.
Next Steps
You are now getting close to being able to publish your site, but here are a few more things you may want to do first:
1. Think about social networks: Many of Weebly’s designs already include social networking buttons. Click on these and ensure they are linked to the relevant accounts, or delete them if you don’t wish to use them.
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. Complete your content: Now you know your way around the Weebly interface, you will be able to upload more text and images to complete your site content.
4. 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 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!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon