As we know, we can get free hosting for our domains from the widely trusted free hosting service, Weebly. Even we can get a pro hosting by referring people. So, I explained about that in this article and put my referral link.
From the status on my Weebly dashboard, I noticed that many joined through my referral link. But they have not published a site. The reason might be they don’t know how to how to use Weebly website builder and publish websites.
So, to help them I have to publish this tutorial. This will explain you on how to use Weebly builder. Also, I am going to share some tips here.
Using Weebly Website Builder
After joining Weebly and logging in to your account, the dashboard will show you the list of your sites as given in the following image.
Click on the Edit button of a site to edit it using the website builder. The website builder will be opened and you can build your site.
If you have not created any site, click on Add Site button. Then you will be asked to choose a theme. Choose a theme for your site from the available themes. Then the website builder will be opened.
It will ask you to choose a domain for your site. You can choose a Weebly subdomain or use your own domain. Even you can register a new domain in Weebly itself. Weebly subdomain is free. So, choose it and type your sub domain name and click on Continue.
The website builder will be like the image given below.
Scroll down and find the editable region. You can see the space which shows the message ‘DRAG ELEMENTS HERE’.
You have to drag the page elements (they are on the left side) and drop to this space.
For example, to add a text element drag and drop this icon. After dropping, you will get the option to edit it. Type the text you want and then click on the outside of the element and the content will be saved.
Like that you can add other elements too.
Please note that free members have some restriction. For example they could not edit the footer and add some specific elements.
Doing Settings on Template Elements
These template elements like header image and title text are same for all pages. Any changes made on one page will reflect on all other pages. Hover the mouse cursor on an element to get the settings option.
Hover the mouse cursor on the title text. You will get the settings option as given in the following image.
Choose either logo or text as your website title or remove (off) the website title. Click on the title text to edit it.
Hover the mouse cursor on the header image. You will get the options as given in the following image. Do the settings you want.
How to Divide the Page and Create Sidebars?
Suppose if you want to divide a page into two parts, one is the main content part and another one is the sidebar. To do that, click on the icon (find at the left side) to get the division related element and drag and drop this element in the editable region. Do settings as given in the following image.
You can add elements in each division. For example, you may add main content in left side division and use the right side division as the sidebar to add advertisements.
Use your creative mind and design your pages using this column element.
How to Add Your Own HTML Code?
Suppose if you want to add an advertisement code, you have to embed the HTML code in your page. Click on this icon and you will get some page elements. Now drag and drop this custom HTML element in the place where you want. After adding click inside it and paste your HTML code. After pasting click outside of the element and the changes will be saved and visible to you.
Click on the Pages button which is in navigation and a page will be opened. There you can manage the existing pages and add new pages. Your pages list will appear in the left side. To add a new page click on the Add Page button and then choose an option. You can add a standard or blog page and even you can link an external website’s link in your site navigation.
To duplicate a page select the page and click on the Copy Page button.
To delete a page select the page and click on the Delete Page button.
Select a page, type the Page Name, choose the type of layout for the page and click on the Save & Edit button to edit the page in the website builder.
In the Advanced Settings option, you can edit SEO settings like page title, description and hiding the page from search engines.
You can arrange the page by dragging and placing them in the correct order. Refer the following snapshots.
Subpage 1 and Subpage 2 will come as a drop down list for the Page 1 on your website as given in the second snapshot. To arrange pages like this, drag and place the page little right side.
In the navigation of the site builder click on Settings button. Site settings option will be opened.
Do the necessary settings. Save each setting after changing it. The following image will give an outline about the site settings options.
How to edit or change the template?
Use the website builder navigation menu to go to Design option. Edit the template as you wish. Refer the following image for that.
Use the Edit HTML/CSS option to edit the template codes. You can add your own CSS files and link it in your template. You can highly customize your template if you know the HTML and CSS very well.
After editing your template, you have to save it as your custom template.
How to use the same sidebar (or some content) in all pages?
To create a page, we have to add elements. Even if some elements are common in all pages (static content), you have to add them again and again in all pages. If you create many pages, the process of building content will be an issue. Here is the solution for this.
Suppose if you want the same sidebar and some content should come in all pages, do like as explained below.
Create a new page and name it as contentTemplate. Choose the layout for the page and Hide it in the navigation menu and protect using a password as explained in the following image.
Note that you have to set the password for your site using the site settings option in the Settings tab. Hide the page from search engines using the Advanced Settings option. We do all these settings to hide this page from visitors as this page is like a template and does not have any main content. Then edit the page.
Divide the page by two columns. You may use the right side column as the sidebar. Drag and drop elements there to add content that should come in all pages. In the left side column you may add sharing buttons that should come in all pages to get shares from visitors or you may add comment box. Now, you can use this page to create pages easily.
When you create a new page, choose the contentTemplate page and Copy the page. Now the duplicate page will be created. Then select the duplicate page and revert all the hiding settings you have done for the contentTemplate page i.e. unhide the page in the navigation menu, remove the password protection and don’t hide the page from search engines. Then edit the page and add elements. As this page already has the static content, you have to add only the main content of the page in the left division.
Here you have to be careful to choose the static content. Think many times and finalize them. Because, if you want to edit them in the future, you have to edit in each page separately. This will frustrate you if you have more pages. Not only Weebly, most of the online website builders have this problem.
Optimizing Your Site for Mobiles
In Weebly we can make our site responsive. That is, we can make our sites mobile compatible.
To do that, while building a page, find this icon in the navigation bar. Click on it to do mobile settings. The website builder will show you how the page will look like in mobile. Arrange the elements as you wish. Note that, if you edit the content of an element, it will affect the desktop sites too. So, only arrange the elements to make the page responsive.
Publishing Your Site
Finally you have to publish your site to make it available to the world. Click on the Publish (find it at the top-right corner of the website builder) button. You may be asked to choose the domain settings. Choose your option and click Continue. Then you will be asked to choose the site category and click on Continue. Then your site will be published and others can view it.
That is all. Now you have learnt how to use Weebly website builder. I hope this article helped you. All I explained in this article is the basic about the Weebly free website builder and how to use it to create and publish sites. If you want more information please refer Weebly help page and blog.
Enjoy creating sites.
Never Miss Any Updates, Get Updates Via Mail:
Subscribe! By Submitting your email address: