The Ultimate Weebly Widget Builder is here: Icons, Service Boxes, Pricing Tables & more! FIND OUT MORE
This in-depth guide is more than just an awesome Weebly Tutorial. We have gone the extra mile to show you how to build a Weebly website. We appreciate this is a lot to read but this tutorial goes into detail of the thinking process behind a website as well as the basic steps of creating a website in the Weebly platform.
There are many reasons for wanting or needing a website. Maybe you want to show off your family photo albums, get your small business online or take your existing website to a new level so that it performs better.
Why don't you take a look at a very in depth weebly review from our friends over at websitetooltester.com. They have spent a lot of time helping users pick the right website builders, themes and more.
Regardless of whether you know how to build a website or not, this in-depth Weebly Tutorial will give you some insights into the professional process and methods that we at Webfire Themes, use when building a new website. We hope, that even if you are a seasoned Weebly user, this guide will be useful, as it explains a lot of the basic information about what you need to do to make your website a success.
Before you start, some insight from Webfire Themes.
Don't be fooled by the hundreds of guides available that tell you that ‘building a successful website is easy’. There is a lot more involved that just putting something together that looks good. And we’re here to help you get started on making your website a success. The good news is that the actual "building" bit of your website and getting it live and online can be quick and easy if you use Weebly.
The biggest hurdle people come across when learning how to build a Weebly website, is the myth you need your website to be an all singing, all dancing website right from the word go before you can ‘go live’. In fact, we know a little secret about Weebly: the main reason they introduced the Weebly 4 functionality with ready-made layouts was because a huge number of their 20+million+ customers never actually get as far as publishing their website! An interesting nugget of information.
We think this failure to publish arises from the common misconception that when you launch a website you HAVE to have a fully-fledged website at the get go, one that's ready to rock and roll immediately. This is of course complete nonsense.
One of the main lessons we've learned over the years as professional web designers (and we will be saying this again later) is to start off small, keep things simple, then nurture it just like a puppy and it will grow! Remember a website is not just for Christmas, it's for life! It will take time (sometimes a LOT of time) to get your website performing as you want it to but a lot of that tweaking and nurturing can happen after your site is published.
So before you go any further, and we're not saying this to put you off in any way, before you jump in feet first make sure that you're in it for the long run, and are willing to put in the time and effort needed to build a successful website.
When you're learning how to build a Weebly website for the first time, start off by getting your homepage and a few supporting pages setup, then launch it. Don't hesitate, just get it live, tell your friends and family, and ask them to give the site a once- over and ask for their thoughts. Use their feedback to update and tweak, then start telling the world about your new website using email, marketing, social media or any other way you can think of. Once you've done this, start adding to the site, build on it and then waitto see how it performs. That way, you’ll get a clear idea of what steps you need to take to make it more effective. can then get an idea of what else you need to do to make it better.
Now that you've read through our thoughts and recommendations about how to approach your website, let's get down to the first step of our building a website in Weebly tutorial.
Step 1 - Sign up or Log into Weebly.com
If you haven't already got a Weebly account, you’ll want to go to the Weebly website. You can log into weebly in three ways, either via your Facebook account, Google account or by creating an account linked to your email address.
It’s always a good idea to read the landing page first, just to get the gist of what Weebly is about and what they have to offer: basically there are two kinds of subscriptions: Free, and premium. One of the best things about Weebly is that you can build an entire website completely free of charge. You’ll have to pay to launch, to register your domain name and if you wish to use certain more advanced features within Weebly.
However, at this stage, we would recommend that you start off with the free account, then upgrade later as and when you need to.
If you have already got an account in Weebly log in and move to the next step!
Step 2 - Create your site and select site type.
Once you're logged in, creating a new website is simple. If it's your first time logging in, then you'll immediately be prompted and asked if you want to sell online or not via your website. This will help Weebly decide what settings to present you with when you start to build your first site.
If you're not planning to be an online store, or just not ready to add the Weebly eCommerce features yet, you can easily add them later. Weebly are really helpful, so if this is the first time you’ve built a website, you can use Weebly's interactive guide (which is built into the platform) to walk you through each step. They want to make sure your site functions properly as much as you do.
Step 3 - Chose your Theme
Once you’ve chosen the kind of website you want to create, you can begin to build it with ready-made free Weebly themes. This is easier than it sounds. So easy a child can do it (so my daughter tells me!). You can choose from ready-made themes and layouts, and use what is called “drag and drop”. This is where you use your mouse to click onto and then drag the elements you want to use to where you want them. This allows you to personalise your website in pretty much any way you want.
This is the screen that will automatically pop up after you've selected the type of website you plan to build where you'll be prompted to select your theme.
As you can see there are quite a few basic free Weebly themes available for you to use Which are grouped into different categories to suit which of the many types of website you may wish to build. You will notice some of the themes are seen more than once under different categories. This is because not only will your selection load the theme to your site, it will also load a pre-designed layout that is specifically geared towards the category you've chosen. This will be a good starting point for you and you can see exactly how it will work and what it will look like before deciding whether to use it or not.
It's important to note at this point, your decision isn't final, you can change your theme and swap for another Free Weebly theme or even upload a unique Premium Weebly theme.
Step 4 - Get familiar with Weebly and its basic capabilities
So, you've done the easiest bits. Next comes the slightly more tricky part of building your personal website. However if things seem overwhelming don’t panic, and most importantly don't give up!
As with anything, learning how to build a Weebly website will take a little time, so just remember to tackle one thing at a time.
As you already know, Weebly is based on a ‘Drag and Drop’ principle. You have a container. which is essentially the main section on each of your website pages, where the content will sit. Within the Weebly Dashboard, you'll find a wide range of elements along the left hand side, so you simply drag the elements you want into your page, drop them into place and arrange as you wish. You can add Titles, Text, Pictures, Image Galleries, Maps, custom html code, even entirely new website sections and lots more.
You can also add these in columns as well as rows. meaning you can have two, three, or more columns next to each other (great for making a nice footer consisting of 3 or 4 columns ).
This is a lot to take in, and your mind is probably racing with ideas. Before you start your real website though, many people find it helpful to have a little play and get used to the basic Weebly interface. It really doesn't matter if you make a complete mess, you’re learning as you do it and you can create up to 10 websites all under the same Weebly account, and all for free, so play around a little bit and get used to things This also allows you to see how the different templates work in terms of YOUR website. Remember it is all about YOU and what you want your website to achieve.
Step 5 - Building the perfect Homepage.
When you're ready to jump in for real and start creating your website, then we could just say, Step 5 is "build your Weebly website". However, that would still be a bit overwhelming! So, we decided to break it down even more into bite sized chunks to help you to build the perfect Weebly website.
We're using the WebfireThemes homepage as our example here, and when building your own website, there's nothing wrong with using inspiration from other websites. Look at your biggest competitors, look at the sites that are showing up first in search engines and you’ll find you get some great ideas just by doing something similar to the other sites you admire. Just remember to put your own unique twist on your website so that it's not a "copy" but is a true reflection of you, of your brand.
Even as professional web designers and developers, we are learning new things every day when it comes to building websites, it has taken us years to get to where we are today. This is why we have put together this clear, in-depth Weebly Tutorial. After experimenting with several different approaches, this seems to be a winning formula By far the most important page on any website is the Homepage, so it goes without saying that this is the one you should focus on first, and should probably spend the most time working on. We recommend you clear your mind of everything else at this point, don't think about the menu structure, logo, sub-pages, store or anything else. Just put 100% of your focus into Weebly Homepage.
Your Homepage is normally your ‘landing page’ that is the page people go to first when visiting your website. It's also the page that has to make everyone take notice. If done well, the Homepage will lead your visitors in to continue looking around your website and to hopefully buy your product, use your service or follow your blog.
The saying "First impressions count" is very true when it comes to websites, so make your Homepage stand out. It needs to give the key information about you and your website, and needs to tempt people to explore further.
We break up the creation of a Homepage up into three smaller sections. You’ll see that we haven't added too much text here, it's got a snippet of all the most important things we have to say, with links and buttons leading the user to look further if they chose to. We also recommend whenever you are adding text, break it up a bit with images.
The Flow / Structure of your homepage
Most website Homepages have 4-6 sections, giving visitors a clean, simple sneak peek into in to the most vital bits of information your website. We like to say "your homepage is your shop window". So, it's important to capture your audience with your Homepage!
When building your Homepage, make sure you include ‘calls to action’ which are instructions to the visitor to "click here" or "take a look at" and are basically linking to other pages on your website which offer dedicated information such as services. Based on our very own website we've created the following main sections on our Homepage.
The Homepage Header
An image or slider that is the first thing anyone sees, it should contain short and punchy headline to get people interested and maybe a button that enables the visitor to scroll down or go to your store page etc.
Featured Products / Services
If you have an eCommerce Website showing off your featured products first is important. However service based companies should show off their key and featured services here. If you are don’t fall into either of those categories, then either miss this out or create an ‘Intro’ or ‘About us’ section instead. Remember this is your paydirt! so make it count :)
Unique Selling Point (USP)
After you've introduced your visitors, it's common to show off your USP or one of the "features" about your product/service/website. We've created this section to show off the fact that our products are Compatible with Weebly 4.
But it could be for anything important about your company, for example, the fact that your products are all organically grown, or that your kitchen fitting service only uses certified fitters. Basically this is what you'll use to draw your visitors in after they have seen what you have to offer.
This isn't really a "section" as it doesn't contain any information as such, but it does work as a great way to break up the content of your homepage, as well as to create another way to engage your visitors.
If you don't use social networking then you could add a ‘call to action’ banner here, where you could tell the user to click a button, got to another page, or just scroll down for more information..
We would always recommend you to use social networking as much as possible. Google and other search engines are starting to learn a lot from social networking engagements, and it's now considered as part of SEO for your website, so efforts should be made to get people to like your page, comment on your posts and leave a review!
More USP's and key Features of the website
So, if you look at our homepage then you'll see under our "Get Social" section we've added more USP's and key bits of information about our products and company. This isn't essential at the start but is something you should build into your site as you begin to tweak and add your personality to your site.
When we initially built this website in May 2017 these sections were not there. We have added these in since launching the site, so don't feel you HAVE to add extra USP/Features at this point.
Testimonials or endorsements are very important to help build trust with your visitors. We recommend having a section on your homepage with two or three choice testimonials from your clients that really show off your core values.
Call to Action
Something else that is very important is to have at least one "call to action" on your homepage. A Call to Action is a button/form/section/caption on your site which is calling for the visitor to actually DO something. By this time, if your visitors are scrolling down and reading the content on your Homepage as far as this point, you can consider that they’ve engaged.
Once you've successfully captured your audience if you tell them to do something (for example, to request a free quote, or to click here to look at our amazing offers, to subscribe to our newsletter) or whatever it is you want your visitors to do, then there's a good chance they will listen.
Your ‘Call to Action’ can literally be anything. However, it's not a good idea to try and push a hard sell on your visitors. People are getting wise to the ways of online sales techniques now and are often put off when you push too hard. Instead it's better to be honest and just give your visitors a clear and easy way to get to the right bits of information they are likely to want to see.
At this point for example, we've added in the ‘ call to action’ to guide people to our showcase, which shows off real live examples of stunning websites that have been created with our Premium Weebly Themes but you can add a call to action for anything from telling a visitor to register to your newsletter or take a look at your store page.
More Important info and USP's
At this point we've added more of our core values and unique selling points into the Homepage. You can use this space to add anything you want, but as an eCommerce website, we decided our Homepage should be geared around not only showing off our products, but also to giving people key information to help build their trust in us. No one wants to spend money these days without having confidence that what they're buying is legitimate and offers good value for money.
Another Call to Action?
If you plan to have a blog or a news page, then making sure it's visible via the homepage could be a good idea. We've added this last, as we know people can access it via the menu if they chose, but it gives the Homepage a nice finish as it's last section. Remember, this isn't mandatory and if you don't want it now, then you can always add later.
The footer is actually a section that will show up on every page of your site. It's an extremely important part of any website and in many ways is thought of as the index of your site. It's the place you can add in the key links and info that should be available to anyone at any time. Visitors know to look in the footer for things like a sitemap, contact us link, terms and conditions, disclaimers, location etc.
Step 6 - Get your page structure sorted.
Well done. Once you've got this far you've got past the first and hardest hurdle when learning how to build a Weebly Website. The rest will be a breeze now.
When your Homepage is built, you can turn your attention to the rest of your website. The other pages. Don't make the mistake seen on so many websites where there are hundreds of pages and sub-pages in the menu, making it impossible to navigate.
Start off simple, create just the main menu headers for the pages you NEED. This is the core structure of your website, and the pages that most people will be interested in.
Remember you can add pages to your site later, and those pages can be linked to elsewhere in the content, they don't HAVE to be in the menu. The menu items should be reserved for the most important of pages.
Most sites have an about us page, a services/products page, a testimonials/showcase/case studies page and a contact us page. Some will then possibly a few others that are specific to the business, but start off with the essentials (Adjust from the list below to suit your website better if needed).
In Weebly you can create new pages via the "Pages" section, you can use the drag and drop interface also to make the menu items parent or sub-menu items. At this stage don't worry too much about actually building each of the pages, just create them so you can see the menu structure.
Generally speaking, even for a mature and well developed website, the main menu wouldn't normally go much further than that. If your website will be a high content website then over time start creating relationships between pages by adding call to actions in commonly viewed pages and links in the content to other pages which might be useful, this is more organic than trying to add a menu item for every single page in your website, which will make it hard to navigate.
Step 7 - Content
You've got your page structure setup, so the next step when learning how to build a weebly website is filling your pages with content. Content is not only important for your visitors, but is also important for search engines, as they will analyse your content to decide where it should be placed in the search engine results.
Don't worry too much about the SEO elements at this stage. The biggest lesson we've learned about SEO is you can't cheat the system, it will catch up with you eventually, and if Google blacklist you for playing silly games to try and get your website ranking in the top spot, your website will be quickly forgotten about.. So don't try to come up with hare brained ideas to cheat Google and other search engines. Instead just be honest and truthful.
Here are a few key tips on how to write your content
1. For each page think of a keyword or phrase you want to be the focus, Try to use that evenly in your content, maybe 3-4 times. ensuring it's in the title and the first paragraph of the page
2. Try to make your content more than 300 words on each main page. Obviously this may not be needed for some pages, but you don't HAVE to SEO every page on your website.
3. Try to be honest and transparent, use clear language and make your content easy to understand.
4. When you upload images, give the image a name that relates to the content
5. Add alt tags to your images.
We've added some more in depth information about SEO in the final step of this Weebly Tutorial.
I guess the last thing to say about adding content to your site, is remember the things you've done on your homepage. the process is essentially the same:
1. Think of page structure
2. add the content
3. Style it to look nice and consistent with the rest of the website.
Step 8 - Add your products (If you're a store)
Weebly has a great interface for ecommerce, you can create digital, physical and service based products, which can be within groups, have pricing and purchase options, inventory control, product images, discounts and much more... Having a store in Weebly involves a cost to you, but the subscription is always based on how advanced your store is. The weebly pricing plan comparison clearly lays out and explains the different pricing options for Weebly. You can upgrade at any time so it's normally best to start on the lower package and upgrade as and when you need to make use of their more advanced services.
Again with your store, you need to put a bit of thought about how to lay it out. If you've got a lot of products, think of how the user will navigate, and make sure you build your products to be easy to search for and find.Also make sure the quality of the images is as good as possible. They should be uniform in size so they look neat and tidy, and they should not be pixelated. You wouldn't walk into a shop and buy something that looked tatty, so why would you expect someone to come to your online store and buy something where the images is pixelated and which doesn’t show your products in all their glory. It just doesn't look professional. The way you display your products, and your entire website for that matter, is the difference between gaining your visitors’ trust or putting them off so that they had off and find another online store on another website!
Step 9 - Blogging
A Blog is also very important on a website. a Blog will let you tell people about your company’s latest news, recently completed jobs, case studies, industry news, basically anything that is relevant to your business and website. The reason this is important is of course to open up the amount of content on your site, and give your visitors more useful information (if they chose to look at it) but it's also important because Google and other search engines LOVE IT. New fresh content shows that your website is active, and if that content is relative, and is optimized using the techniques described above with real, honest and relative content, it will, over time help your website to show up in more places on Google, sometimes even on the first pages of Google... Once your website is live try to add at least one blog post a month, better still, aim for one a week.
Again, Weebly has a very powerful blog interface, it lets you configure the way the blog behaves and you can set a blog sidebar, comment options and how many blog posts to display on each page.
The blog editor itself is also drag and drop, and has some additional drag and drop elements like a read more break. Creating a blog post is very similar to creating a normal page within your website. Just stick to the same principles. A few images to break up the text, keep it relevant, and try to make the blog post at least 600 words.
Step 10 - A bit more about SEO
SEO is Search Engine Optimization, this is the practice of making the content on your website good enough for Google to read it, and recognise it as relevant. The whole topic of SEO is massive, and depending on your competition, it can become very complex and difficult. There are hundreds of tricks you can use to improve things but they can get you into hot water if you are doing things to try and fool Google. The truth is. the most highly ranked websites in the world are the ones that have the most relative, genuine and organic content.
Google and other search engines are becoming more intelligent all the time and are even now making connections between the content on your website and the shares/likes/comments and reviews on your Facebook page, to help identify the most relevant data out there. so in all honesty,the best thing you can do when it comes to your content is to be as relevant as possible. Make sure you are using the key words and phrases in your content, but not so much it looks unnatural.
For example. if you wanted to attract people typing "Website Design Chicago" into Google you would make sure your content has phrases like "Website Design Chicago" , "Website Design Services Chicago", "Chicago based website company" etc., in that page... but not to the point that you're mentioning it in every other sentence.
There are numerous guides on the internet, some of which are conflicting, Our personal experience tells us that for a page to be properly optimized for Search Engines, it should contain somewhere in the region of 300-600+ words (More for big in depth articles that may have high competition or very niche search terms) and ensure the keyphrase you want to target is in the first sentence, and dotted around approximately once every 3-4 paragraphs (in a 600 word document, you'd possibly want to add in your keyphrase 4-6 times)
Anyway... We're not here to talk about the artform that is SEO, there's lots to think about but the key thing to remember is, SEO isn't something that happens overnight. Start off writing your pages with information that is relevant to your business/website and try to make it sound natural (as tthough you were typing an letter to a friend) Then, over time you can review and refine it.
Make sure you break up large chunks of text with images too. How boring would it be to land on a page where you just see endless text... breaking it up with images or weebly sections that have a ‘call to action’ item makes for much easier reading by your your customers.
Weebly has advanced SEO settings that you can set for each page. If you load up a page, in the "pages" section of the Weebly dashboard, you'll see a section for "SEO Options"
Here you can add a custom page title and description. This is quite important. The title should include your key-phrase and also the description, which shouldn't be very long, just a few sentences describing what the article is about (This is what will show up in the Google search page so try to make it interesting to capture more visitors)
Step 11 - That's it. go live, sit back and relax (For today anyway)
So you've done all this hard work... Do what any sane person would do. Go to bed, and get a good night's sleep, come back to your website first thing in the morning and give it a good check over, make sure it looks amazing, and that there are no last minute changes you wish to make.
If you're ready, then take a deep breath, and hit the publish button in the Weebly dashboard (top right)
Weebly will talk the rest through with you and hey presto you'll have a live website in no time.
The next step after this is to let Google index your site... This can take up to a few weeks (and even longer in some cases) so don't be in a rush to change all of your content just yet. Feel free to start adding things to your blog, and adding new sections in. Just remember to keep on top of it, and try to add content regularly. Google will LOVE THIS.
Thank you for taking the time to read this Weebly Tutorial on how to build a weebly website. We kindly ask you to share this around as much as possible to help people thinking about building their own websites, and to educate them about the power of Weebly.
Webfire Themes Blog
Welcome to the Webfire Themes Blog, where you can find out about our latest updates, great free resources, as well as Weebly News and all sorts of Tips and Tricks for Weebly.
Webfire Themes provide the best Weebly Themes & Templates on the planet. We love what we do and strive to give our customers exactly what they need to create stunning Weebly websites.