How to create your own website with Weebly

Would you like to build your small business website but you don’t have the technical skills and you don’t want to hire expensive web designer? Don’t worry, you can do it quickly and easily with Weebly – online website builder.

What is Weebly?

Weebly is online Content Management System (CMS) focused on visual web development. And I literally mean visual – you have a list of elements you can drag and drop onto page canvas, then you can resize, edit and move them around in just few mouse clicks.  It is really, really simple process and anyone can do it without any problems. You don’t need to know any HTML, PHP or CSS (although knowing some basics can help a  lot) and still be able to design really nice website.

What can I use Weebly for?

Let’s be honest – if you plan to make another Facebook site, Weebly is not for you. If you would like to create huge online store with thousands of items – I don’t think you should use Weebly as there are other, better options available. But if you want to build a small business site, your personal page or a blog – that’s exactly what Weebly was made for and that’s why Weebly is so popular: the service is used by about 12 million people.

How much does it cost?

Basic service is free but there are some limitations – you cannot use all the elements, you page has Weebly link in the footer etc. Nothing REALLY limiting. If you need more features there is STARTER plan for around $4/month and PRO  plan for around $8/month. Not bad, considering hosting these days is about 5$/month.

How to use Weebly?

Let’s take a closer look at Weebly functionality. First we need to sign up which is pretty easy and no nonsense process, it’s also completely free so no credit cards details are required. Log into your account and Weebly is gonna ask about your new website title and category.

Weebly - online website builder - website title
Weebly – online website builder – website title

After submitting these details we will be given three choices about our website address – we can use subdomain of weebly.com, register new domain using Weebly or use our domain which is already registered.

Weebly - online website builder - choose domain
Weebly – online website builder – choose domain

It is worth mentioning that domain registration with Weebly cost $39.95 for a year, while this domain registrar offer is just $9.99 for .com per year. As a starter you can use subdomain and buy proper domain later on. After choosing domain option we are presented with website builder window itself.

Weebly - online website builder - editor
Weebly – online website builder – editor

As you can see there is Weebly editor panel on the top where you can find all available site elements. To use them on the page, we simply drag and drop them onto the bottom part which are WYSIWYG (What You See Is What You Get) canvas. Once an element is on the canvas, you can hover cursor over it to get access to it’s configuration options.

Some elements can be edited by clicking them (texts) or resized by dragging their corners (images). The interface works really well and is quick so you can see your changes immediately. Everything is pretty intuitive and can be learned very quickly.

Let’s take a look at the page elements offered by Weebly:

Basic elements

Weebly - online website builder - basic elements
Weebly – online website builder – basic elements

Paragraph with title – very basic element, you can select size, alignment, attributes and color of both title and paragraph text. You can add links. Paragraph text can have ordered or bulleted list.

Paragraph with picture – similar to Paragraph with title, but there is additional image, which can have caption and link to another page, file, email or URL.

Image – another basic element, can be linked to Weebly page, file, email or URL.

Title – you can change its size, alignment, color and attributes. You can also add link to it.

Paragraph – simpler version of Paragraph with title, offering exactly same functionality.

Contact Form – pre-made contact form with First Name, Last Name, Email and Comment fields. It can be easily customized using Form Options, which enables more form-related elements like Short Text Box, Large Text Box, Options Buttons, Dropdown Boxes, Check Boxes and File Upload. I find form builder extremely handy and well implemented.

Multiple Columns – the main layout building element. Using Multiple Columns you can easily create up to 5 columns. Multiple Columns allow nesting, which gives you total control on your pages layouts.

Weebly - online website builder - columns
Weebly – online website builder – columns

By default columns’ widths are equal, but it’s very easy to change their horizontal dimensions just by dragging the dividers. Excellent solution, one which really works.

Button – basic element, you can choose one of four styles, alignment and link target.

Custom HTML – this element allows you to put any HTML code on your page, so you can easily extend functionality of your site.

Search Box – allows users to search content in your blog, available in PRO version only.

Multimedia elements

Weebly - online website builder - multimedia elements
Weebly – online website builder – multimedia elements

Photo Gallery – image gallery allowing you to arrange image thumbnails in a nice way. The original images are displayed using light box with thumbnails. You can upload multiple images from your hard drive.

Slideshow – nice looking image slider with good amount of config options. You can define thumbnail location, navigation controls’ style, one of five transitions and if you want the slider to autoplay its content.

File – allows you to add icon with link to downloadable file.

Audio Player – using this element you can put sound player control on your site – PRO version only.

Video Player – adds custom video player to your site, PRO version only.

Embedded document – allows you to put document (pdf, doc) with reader on your site.

Flash – using this control you can put swf files on your pages.

Google Map – really easy to use Google maps viewer, you can define width and height, address (including latitude and longitude), if you want to use satellite/hybrid views or map controls. Very handy if you need to put lots of Google maps on your site.

YouTube video – you can display YouTube video using few predefined sizes.

Revenue elements

Weebly - online website builder - revenue elements
Weebly – online website builder – revenue elements

Google AdSense – allows you to use Google AdSense adverts on your site. Remember that before applying for Google AdSense you should be 100% sure you fulfill the requirements, otherwise your application is gonna be denied.

Products – there are several elements for adding products to your site (you will have to use either Google Checkout or PayPal for payment processing). It is worth saying here that I don’t think you should try to build big internet store using Weebly – there are better solutions for this task. Weebly is great if you sell 5 different products for fixed price.

More elements

Weebly - online website builder - more elements
Weebly – online website builder – more elements

Divider – simple horizontal divider

Feed reader – using this element you can quickly add external RSS feeds on your site – e.g. show last 5 top stories from CNN. I am not sure if this is not penalized by Google right now as duplicating content, so watch out!

Block Quote – displays text as block quote. As with other text elements you can define links, font size, color, attributes and alignment.

Online BookingsWeebly offers on-site booking using BookFresh widget. It allows your client to book your services in easy way. It is not very sophisticated but does the job for simple bookings.

Forums by Tal.ki – using this element you can put very simple, limited forums on your site. Not very useful IMHO.

Social Icons – this element allows you to add social media to your pages. Weebly supports Facebook, Twitter, LinkedIn, Flickr, Pinterest, Google+, Vimeo, Yahoo and YouTube. You can also add RSS Feed and Email option.

Weebly - online website builder - social settings
Weebly – online website builder – social settings

Online Poll – this element display online polls created with PollDaddy.com service. PollDaddy allows you to easily create and track multiple surveys. There is free plan (limited to 10 questions per survey).

RSVP Form and Survey – these two are predefined forms you use out of the box. Remember that you can also use form builder to create your own, fully customized forms – and it works pretty good!

We have just covered Elements tab from top editor panel, but there are more tabs:

Design Tab

Weebly supports themes – you can find them on this tab. There is about 180 different templates, grouped into most popular categories like business, personal, weddings etc. At first glance they look very similar, a bit boxed,  but look closer – there are quite few wide, elegant, web2.0 style themes! I have strange feeling I saw them on some popular sites – pretty good sign!

Weebly - online website builder - themes
Weebly – online website builder – themes

You can preview and use all the themes, as well as change their color,  review and save them to your favourites. If you have some skills in HTML and CSS, you can create your own themes by using Weebly code editor. It allows you to add files to the template, edit them and define specific layout for your pages.

In other Design settings you can define fonts, their colors and sizes for your site, enable Search box, Social icons and Phone field, as well as define colors of links.

Pages Tab

Using this tab you can add more pages to your blog, as well as customize your menu structure. By adding pages to your blog you add them to the menu as well. All you need to do is select what kind of page you want to add – it can be standard page or blog-like page. After adding the page you have to choose it’s layout and name. If you want, you can password protect it or don’t display it in menu.

Weebly - online website builder - manage pages
Weebly – online website builder – manage pages

In Advanced settings you can do some SEO: define page title, description, META keywords and add some code to header and footer. If you don’t want this page to be indexed, you can tick “Hide this page from search engines”. If you add external link, all you have to do is define target URL.

Reorganizing your pages in the menu is very simple – you just drag them around. If you drop them indented, they become children of previous menu item. Simple and effective method.

Editors Tab

If you want to let your collaborators to develop your site, you can add them here. there are three roles – Administrator, Author (PRO) and Dashboard Access Only (PRO).

Settings Tab

Here you can change some site-wide settings like site name, global SEO, add favicon, Facebook sharing, E-commerce currency, enable / disable Mobile Theme or make backup of your blog.

Once your site is ready, don’t forget to press Publish button in the right top corner!

Conclusion

I find Weebly very interesting option for people who lack programming skills but need to create websites for small business or for personal use. In my opinion editor is really, really good – I had no problems at all adding and manipulating elements. There are some limitations, but nothing major. I think that most visual designs can be implemented using Weebly, as long as they are page based. Blog functionality could be a bit better, there could be more elements too. But as I said – overall it was good experience and I had no major problems.

If you don’t want to learn HTML, CSS and PHP to create your page, I recommend you give Weebly a try and see if it fits your needs!

3 Comments

Add a Comment