How to Remove Free Weebly Footer and Customize with Links?

Free sites created with Weebly shows the footer message “Create a free website with Weebly” or “Proudly powered by Weebly” in every page. Though Weebly says there are no forced advertisements on a free account this footer messages is their own ad and you can only remove this footer by upgrading to starter, Pro account or business plan. Upgrading to paid plan is costly for a user who needs only few online pages with a blog.  The good part is, with the access for editing source HTML even for a free users, still it is possible to hide this footer in your site and add your own content and links in footer area.

Weebly Free Footer Message

Follow the below step by step instructions to remove or hide free footer from your Weebly site. If you are looking for adding multiple column drag and drop footer to your free Weebly site then read out our separate article.

Hiding Free Weebly Footer Message

• Login to your Weebly account and select “Edit” button against the site you want to remove the footer.
• Note down the page layouts used in that site under “Pages” tab.

Note Down the Page Layout You Use

• In Weebly editor select “Edit HTML/CSS” under “Design” tab.

Edit Source HTML-CSS in Weebly

• Choose the page layout of your site and search for the footer section. You can find something like below code and the footer code may vary based on the theme you use for your site.

1 2 3

<!-- footer-wrap --> <div id="footer-wrap" class="content-wrap">{footer}</div> <!-- end footer-wrap -->

OR

1 2 3 4

<div id="footer-wrap">                                 <div id="footer">                                                 {footer} <div 'clear'></div>

OR 

1 2 3

<div id="footer">                 {footer} <div>

Find Footer Wrap Inside HTML Code

The page layout is activated as per your page customization under “Pages” tab.  In our case the page is customized as Standard Page (no header image), hence the above footer code need to be located in page layout “no-header.html”.

Get confused which layout to be selected?  It is very simple, do the changes in one page layout and copy paste it in all page layouts. You need to do this if your site has multiple pages with multiple page layouts or you are switching your page layouts. Otherwise some pages will show Weebly footer and some not and after switching your page layout Weebly footer will be shown again.

• Now the first step is to hide the footer by adding the below code either in <div> id “footer” or “footer-wrap“.

1	style="visibility:hidden"

• It should look like below after you’ve done that:

1 2 3

<div id="footer-wrap" style="visibility:hidden" class="content-wrap"> {footer} </div>

Hiding Free Weebly Footer

• After you do the changes, the below half section showing the “Preview” of your site will get auto updated. You can see the footer message is disappeared there.

Creating Custom Weebly Footer

• Now that you have hided the footer the next step is to start building your own footer. In order to do that replace the existing footer code with the following code:

1 2 3 4 5 6 7

<div id="footer-wrap"> <div class="wsite-footer" style="height:25px" align="center"> &copy; 2015 "My Site" </div> <div id="footer"style="visibility:hidden"> {footer} </div> </div>

• Now the default footer is hidden and your custom text will be shown in the footer area.

Adding Links to Custom Weebly Footer

• If you want to add link to “My Site” then insert the below code instead of the above and replace “URL Link” with your own link.

1 2 3 4 5 6 7 8

<div id="footer-wrap"> <div class="wsite-footer" style="height:25px" align="center"> &copy; 2015 <a href="http://mysite.weebly.com "> My Site </a> </div> <div id="footer"style="visibility:hidden"> {footer} </div> </div>

Add Your Own Link in Footer Area

• Add multiple links to show links to pages like Contact, Privacy, Sitemap, etc. After you finished all, it should look like this:

1 2 3 4 5 6 7 8 9 10 11

<div id="footer-wrap"> <div class="wsite-footer" style="height:25px" align="center"> &copy; 2015 <a href="http://mysite.weebly.com "> My Site </a> | <a href="http://mysite.weebly.com/contact.html"> Contact </a> | <a href="http://mysite.weebly.com/privacy.html"> Privacy </a> | <a href="http://mysite.weebly.com/sitemap.html"> Sitemap </a> </div> <div id="footer"style="visibility:hidden"> {footer} </div> </div>

Add Many Links in Free Weebly Site Footer

• Your preview will show something like this. You can link pages in your own site or external URL as per your need.

Custom Footer Preview in Weebly

• Save your changes and provide your theme name.

Save Your Weebly Theme

• Publish your site and your site now will look like a Pro site created with good looking footer links.

Check Footer Links in Published Weebly Site