/, Tutorials/How to Remove Free Weebly Footer and Customize it (Updated 2018)

How to Remove Free Weebly Footer and Customize it (Updated 2018)

Ever wondered how to remove free Weebly footer message and customize it? Well, as you might know, free websites created with Weebly display the following footer message “Create a free website with Weebly” or “Powered by Weebly” in every page. All free accounts under Weebly have this footer messages. It’s Weebly’s own ad. It can only be removed by upgrading to a higher Weebly plan. Upgrading to paid plan isn’t that interesting for someone who simply needs a small website with only a few pages.

remove free weebly footer

Well, the good part is, with the access for editing source HTML anyone, including those who have free accounts, still it is possible to remove or customize the message shown in the footer area in your Weebly website.

How to Remove Free Weebly Footer and Customize it



You can follow these steps to remove free Weebly footer message from your website.

Login to your Weebly account and select “Edit” button for the website you’d like to remove the footer. In Weebly editor select “Edit HTML/CSS” under “Theme” tab.

weebly free footer

Choose one of the header types (in this example we modify “no-header.html”) and search for the footer section. The footer code may vary based on the chosen theme you use for your website, find something like below code. There should be a {footer} tag in all Weebly page layouts and locate that tag.

<! footerwrap >
<div id=“footer-wrap” class=“content-wrap”>{footer}</div>
<! end footerwrap >

Or

<div id=“footer-wrap”>
<div id=“footer”>
{footer}
<div></div>

Or

<div id=“footer”>{footer}</div>

Once you found the code, now the first step is to hide the footer by adding the below code either in <div> id “footer” or “footer-wrap“.

style=“visibility:hidden”

It should look like this:

<div id=“footer” style=“visibility:hidden”>{footer}</div>

weebly free footer 2

For Recent Weebly Update in September 2017

For newer Weebly websites, the ones created in or after September 2017, hiding the footer is no more working as Weebly updated the back-end to get the footer styles dynamically to make it visible again. Here’s how to hide it:

  • Right click on the “Powered by Weebly” footer and click on the “Inspect Element” or “Inspect” option.

  • This will show the CSS code of the footer element of your Weebly website like below.

  • The footer advertisement is coming from the id “weebly-footer-signup-container”. That 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.

Paste the copied code into a text editor like Notepad++ . Once done, 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:

<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.

 

  • 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.

We hope this article helped you learn how to remove the free Weebly footer message from your website. If you liked this tutorial, then you may consider subscribing to our WeeblyTutorials YouTube Channel for Weebly video tutorials. You can also find us on Twitter and Facebook.

By | 2018-09-19T21:32:56+00:00 September 19th, 2018|Beginners Guide, Tutorials|0 Comments

About the Author:

Editorial Staff at WeeblyTutorials is a team of Weebly experts.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.