Looking to create a new Weebly website but you aren’t so confident with your coding ability and you don’t know how to customize weebly themes? Don’t fret because our selection of premium Weebly themes and Weebly templates can help you build your very own Weebly site. Fully customizable Weebly templates, commented code and extensive documentation allow you to take a design and completely make it your own. Sometimes people can’t even find where the template comes from.
Feel interested? If yes, then just walk through this tutorial then you’ll be able to construct your own awesome Weebly site.
Who is this guide for?
If you don’t know much about web design or are new to Weebly, don’t worry, this tutorial typically explains step-by-step instructions that are quite easy to follow. You will be able to do far more things than you can imagine.
If you have a lot of experience using Weebly but don’t know much about customizing your Weebly theme, this tutorial would then help you truly get your site to the next level.
Skilled Weebly designers:
You might know everything we post here but this article can help you optimize your process of customizing Weebly themes for your clients.
1) Laying out the pages
The truth is that your content (text, image, video, etc.) itself actually differentiates your site from others. More than that, how you organize and arrange it will make your site not only unique but also user-friendly for your visitors.
To do that, you can use two powerful features of Weebly: Page Layout options and Multiple Columns element.
Selecting a Page Layout
The page layout options feature in Weebly gives you the ability to choose different page layouts for each page of your site.In most of our Weebly themes, you can find from 8 to 10 page layouts. Take advantage of this valuable feature to find the most effective way to present your content.It’s not hard to choose because we normally divide all page layouts into 3 groups: one group can be used for home page, one for inner pages and one for blog/news pages.
The best way is playing around with them, giving each of them a try then you’ll soon find the best one for each of your pages.
Use Multiple Columns element
While page layouts define the way your site looks on a given page, the Multiple Columns element helps you organize and arrange your content to make it more balanced and easier for your visitors to follow.
Examples of a good use of Multiple Columns:
2) Add Logo or Site Title
Make sure to upload your own logo before going through further customization. A website logo, which appears on all pages, is not only important for your branding but it also helps you find the best color scheme and font style for the site more easily.If you don’t have one yet, using Site Title is just fine. It is advised, however, that you experiment with the font style for your site title to make it more stylized and outstanding. Using normal fonts such as Arial with black/white color doesn’t help much.
3) Change default fonts
Good typography makes a huge difference between a mediocre website and a great one, but sadly, this is often overlooked. So don’t forget to pay attention to your font selections.Each of our premium Weebly themes has its own settings of font styling for all texts in your site. Sometimes, you don’t need to change anything; sometimes making some changes is a must.When you don’t find the default fonts complement your brand or logo style, you’d better spend some time making some adjustments to them.
You can quickly change font settings via the Design Options section found under the Design tab.
When browsing through and choosing fonts for your site, you can create a test page which has a short paragraph, long paragraph and multiple columns paragraph as in the page: http://seranadetemplate.weebly.com/no-header.html
Seeing the font in action with multiple ways of displaying can help you choose the best one more easily.
Here are examples of sites having great font combination:
4) Create a Unique image banner or sliding headers
Most websites nowadays are using a big header or sliding header in the home page. The reason is simple. Header image or sliding header are typically the first things people see when dropping by your site and they can help leave good impressions on visitors.Header image can also be used for your inner pages to make the site more attractive.Using effective header images can give your site a unique look and aid you in delivering your brand message more efficiently or presenting your best works.
Putting attention and efforts onto this can produce a big alteration, making visitors interested and eager to discover your site more.
Besides two options of using static header banner or header slideshow with default Weebly tool, our premium Weebly templates bring you more options of sliders including Nivo Slider, Flex Slider, Accordion, …
Choosing to use which one depends on your own purpose. Just keep in mind some tips below when creating your header image and sliding headers:
- They should reflect the content, purpose and intention of the site so you should use a purpose and point header. If you give your visitors a reason, they’ll definitely continue discovering your site.
- They should match the design style of the site.
Examples of Good Banners:
5) Change the color scheme
A final yet no-less-important step is changing the color scheme. This step, without any doubt, enhances your Weebly site to a great extent and gives it a whole new look.Finding a color scheme can be a challenge, especially for beginner users. However, you may notice that, in all of our Weebly templates, we use a simple color scheme: 1 main color (red, blue, orange, etc.) and some basic colors (black, white, grey, etc.) The easiest way for you is just changing the main color of the Weebly themes you use to your brand’s color or the color you like. This is effective and helps you have a unique look without much effort.
If you like something more special then you’re welcome to create your own color scheme. However, please make sure all colors are in harmony.
At the moment, changing the color scheme of the theme requires you to make changes in CSS of a Weebly theme. It isn’t hard even if you aren’t familiar with CSS though. Each of our Weebly templates has its specific tutorials which guide you how to change color scheme of the template.
Following are examples of how different your site can be just by changing the color palette:
6) Change Background images
In some of our Weebly templates such as Sentient, VOUS, Linen and Lamentia background images are one of the most important aspects that decide how attractive your Weebly site will be.Ideally, you can use images which display your office, products, etc as the background. You can also use images with blur effect to make site look more professional while keeping the content more focused. Like changing the theme color scheme, you can’t change the background images directly in the editor. However, the process is easier here.
With themes like Seranade, you just need to upload images via Files column then they’ll automatically replace the old ones. In Sentient, things are much easier since you can change the background image directly in the editor.
Examples of excellent use of background images for Weebly websites:
We hope that this article can give you some better ideas about how to customize Weebly themes. Customizing the site yourself takes time and great efforts but will, without a shred of doubt, save you a good sum of money.
Leave some comments and share your experience in customizing Weebly templates with us. What is the most challenging thing to you? Do you have any tips to share?
If you find this tutorial useful, please help us spread it to your friends who might need it. Just click here to share it!