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 hide or remove free Weebly footer from your site. If you are looking for adding multiple column drag and drop footer to your free Weebly site then check out our separate article.
If you are upgrading Weebly because of this footer then consider migrating your Weebly site to WordPress to have a complete control. In order to remove footer ads, you need to have Weebly Starter plan costing $8 per month. Instead of this you can spend around $12 per month and buy a cheap hosting plan for new sites. All popular hosting companies like Bluehost, SiteGround and HostGator offers Weebly site builder on cloud. For example, you can buy SiteGround Startup plan $3.95 per month or Bluehost plan for less than $3 and upgrade Weebly Starter plan to remove the footer ad. The advantage here is that you can have WordPress, Drupal, PHP, Joomla or any other type of websites along with your Weebly site. Also you will get free domain and email hosting plans for which you need to pay separately on Weebly.
Remove Free Weebly Footer Message
Login to your Weebly account and select “Edit” button against the site you want to remove the footer. In Weebly editor select “Edit HTML/CSS” under “Theme” tab.
Editing Source HTML and CSS in Weebly
Choose one of the header type (in this example we modify “no-header.html”) and search for the footer section. Since the footer code may vary based on the theme you use for your site, find something like below code. There should be a {footer} tag in all Weebly page layouts and locate that tag.
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></div> |
OR
1 | <div id="footer">{footer}</div> |
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 | <div id="footer" style="visibility:hidden">{footer}</div> |
Hiding Free Weebly Footer
If you have enabled “Auto Preview” then you can view the footer is disappeared under the preview section.
For Recent Weebly Update in October 2017
Simply hiding the footer is no more working as Weebly updated the backend to get the footer styles dynamically to make it visible again. Follow the below steps to hide the free footer:
- Right click on the “Powered by Weebly” footer and click on the “Inspect Element” or “Inspect” option.
Viewing Source CSS of Free Weebly Footer
- This will show you the CSS code of the footer element of your site like below. If you need more details, checkout these articles on how to view source CSS on Chrome, Safari and Firefox.
Copy Weebly Footer Signup Container HTML Code
- You can see the footer advertisement is coming from the id “weebly-footer-signup-container”. Remember this name may vary based on your theme, but basically it should be a footer signup container. As you can see the “visibility” is made as “visible !important;” in each element under the footer signup container block. This is the reason the footer will not hide even you hide the footer or footer wrapper in source HTML.
- Now that there are many ways to copy the complete code block of the Weebly footer signup container. Right click on the element and click “Edit as HTML” then copy the code block. Or right click and go to “Copy > Copy OuterHTML” to copy the code.
Copying Footer Code
- Paste the copied code into a text editor like Notepad++ or brackets. The code should look something like below:
1 2 3 4 5 6 7 8 | <div id="weebly-footer-signup-container" class="light" style="display:block !important; visibility:visible !important;height: 62px !important;"> <div class="signup-container-header trigger-signup" style="display:block !important; visibility:visible !important;"> <button class="start-free" style="display:block !important; visibility:visible !important;">Create a free website</button> <div class="powered-by" style="display:block !important; visibility:visible !important;"> Powered by <span class="link weebly-icon" style="display:block !important; visibility:visible !important;display:inline-block !important; visibility:visible !important;"></span> </div> </div> </div> |
- Replace all occurrences of “visibility:visible !important;” to “visibility:hidden !important;”. Basically you can find the word “visible” and replace it with “hidden”. Finally the modified code should look like below:
1 2 3 4 5 6 7 8 | <div id="weebly-footer-signup-container" class="light" style="display:block !important; visibility:hidden !important;height: 62px !important;"> <div class="signup-container-header trigger-signup" style="display:block !important; visibility:hidden !important;"> <button class="start-free" style="display:block !important; visibility:hidden !important;">Create a free website</button> <div class="powered-by" style="display:block !important; visibility:hidden !important;"> Powered by <span class="link weebly-icon" style="display:block !important; visibility:hidden !important;display:inline-block !important; visibility:hidden !important;"></span> </div> </div> </div> |
- Paste this code under “Settings > SEO > Header Code” section of your site inside Weebly editor.
Adding Code in Header Code Section
- Save your changes and publish the site and check the footer should have been removed.
Basically the modified code will overwrite the default Weebly footer code to hide the footer banner. You can still follow the below steps to add your custom links but need to adjust the height, colors to fit your theme’s layout.
If pasting the code inside header code section does not work for you then try pasting it in different ways.
- Paste the code under “Setting > SEO > Footer Code” section at site level.
- Try pasting the code in footer / header code section of each page of your site under “Pages > Select the Page > SEO Settings > Header / Footer Code”.
- Use embed code element and insert the code inside the content area of each page.
- Insert the code in “main.less” file in code editor. The main CSS file can be accessed under “Theme > Edit HTML / CSS > Styles” section.
- Paste the code inside the source HTML files in code editor. The source HTML files can be accessed under “Theme > Edit HTML / CSS > Head Type”. Generally, three types of HTML files will be part of your Weebly theme – header.html, no-header.html and splash.html. Paste the code just above the scripts as shown below in all the files.
Insert Code in Weebly Source HTML Files
Creating Custom Weebly Footer
Now that you have hided the footer and the next step is to start building your own footer links. In order to do that replace the existing footer code with the following code:
1 2 | <div align="center"> © 2015 "My Site"</div> <div id="footer" style="visibility:hidden">{footer}</div> |
Ensure to replace “My Site” with your site name. 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 | <br><br> <div align="center"> © 2015 <a href="http://mysite.weebly.com "> My Site </a></div> <div id="footer"style="visibility:hidden">{footer}</div> |
Line break <br> and align=”center” attributes are used to position the links in the middle of the footer.
Adding Custom Links in Weebly Footer
You can insert multiple links to show links to pages like Contact, Privacy, Sitemap, etc. After you have finished all, the complete code should look like this:
1 2 3 4 5 6 7 8 | <br><br> <div align="center"> © 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> |
Your preview will show something like below picture. You can link pages in your own site or external URL as per your need.
Custom Footer Preview in Weebly
Save the changes and publish your site. Your site now will look like a Pro site created with good looking footer links.
Check Footer Links in Published Weebly Site
For Weebly Update on March 2019
Weebly continues to update the backend to show powered by Weebly footer message using different methods. Some of the users sent us the below code for removing the footer after recent update in March 2019.
You can add one of the code in “Settings > SEO > Footer Code” section of your Weebly site.
1 2 3 | $(document).ready(function() { document.getElementsByClassName("footer-published-ab-powered-by")[0].remove(); }); |
1 2 3 4 | document.addEventListener('DOMContentLoaded', function() { var element = document.getElementById("weebly-footer-signup-container-v3"); element.parentNode.removeChild(element); }, false); |
Alternate Method
Hiding the footer will sometimes lead to additional blank space in the footer area which is not possible to remove. To overcome the height problem of the footer, instead of hiding it you can remove it by using “display:none” style as shown below:
1 2 3 4 5 6 7 8 | <br><br> <div align="center"> © 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><br><br> <div id="footer" style="display:none">{footer}</div> |
You can also watch out the step by step demo in this YouTube video.
Free footer should also be hidden on mobile devices with the above explained method for all responsive themes. Otherwise you may need to hide it using separate CSS or change your theme to one of the latest responsive themes.
Conclusion
The primary focus of Weebly is shifted towards online store, especially after the acquisition of Weebly by Square. If you are focusing on content site then it doesn’t make sense to build a site with Weebly. Even the above explained method works, Weebly always change the backend to populate the ads on footer. In all scenarios, we strongly recommend to go for a premium hosting with Bluehost, SiteGround or HostGator. You combine the power of WordPress and Weebly on single place along with free domain and email solutions.
132 Comments
Leave your reply.