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

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

OR

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

OR 

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

The header type 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 pages with different header types such as header.html, no-header.html and splash.html. Otherwise some pages will show Weebly footer and some not, also when switching your page layout Weebly footer will be shown again.

Related:  How to Add Parallax Sections in Weebly Site?

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 below after you’ve done that:

<div id="footer" style="visibility:hidden">{footer}</div>
Hiding Free Weebly Footer
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
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
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
Copying Footer Code
  • Paste the copied code into a text editor like Notepad++ or brackets. The code should look something like below:
<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:
<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.
Related:  6 Tips for Customizing WordPress Admin Panel Interface
Adding Code in Header Code Section
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.

  1. Paste the code under “Setting > SEO > Footer Code” section at site level.
  2. 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”.
  3. Use embed code element and insert the code inside the content area of each page.
  4. Insert the code in “main.less” file in code editor. The main CSS file can be accessed under “Theme > Edit HTML / CSS > Styles” section.
  5. 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
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:

<div align="center"> &copy; 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.

<br><br>
<div align="center"> &copy; 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.

Related:  How to Use Flexible Drag and Drop Header in Weebly?
Adding Custom Links in Weebly 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:

<br><br>
<div 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>

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

$(document).ready(function() {
document.getElementsByClassName("footer-published-ab-powered-by").remove();
});
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:

<br><br>
<div 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><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 BluehostSiteGround or HostGator. You combine the power of WordPress and Weebly on single place along with free domain and email solutions.

Recommended Articles:

134 thoughts on “How to Remove Free Weebly Footer and Customize with Links?”

  1. Multiple Column Weebly Footer”– All is doing well but in the footer, it covers the window of footer area that is not matched with other content of a page. I could not explain well. Could you please take a look of my website and advice me to fix the thing?
    Will be waiting. Thank you.

    Reply
  2. This was working like a charm up until last week. They must have changed their footer again. Any new tips? Thanks for your article!

    Reply
  3. Thanks a ton for this! Works like a charm
    Just tried it for the free plan and the one with the latest pop up of Weebly sign UP.
    Thanks again buddy :D

    Reply
  4. Thank you, it worked well to change the footer, however the links are broken and Weebly does not allow me to edit it in the editor. How can I fix this, it goes to a 404 Error -Page Not Found (Weebly). Any suggestions would be great! Other than that I can simply eliminate the links.

    Reply
  5. Oh my, now WEEBLY has added a pop up banner on the left side of screen..on free websites. Do you know how to remove that?

    Reply
    • My free Weebly site has no pop-up banners from Weebly at all (my Adblock is turned off as well). I checked a random free Weebly site and no pop-ups there either. If you’re experiencing unknown pop-ups on your site you might want to contact Weebly for help.

      Reply
  6. Hiding the weebly footer works perfectly, but I can’t fix the height problem. I’ve put the given code in the site footer and header and each layout but neither place works. Please help.

    Reply
  7. I used the instructions to address the October 2017 changes and they worked perfectly. I’m grateful for the efforts of WebNots and its sharing helpful tips for us relative beginners. Much thanks. :-)

    Reply
  8. This must not work on all Weebly themes as Ive tried the head/footer on the main site and also on individual pages. Ive also tried changing the theme in the HTML. None of them will shift the footer since the update.

    Reply
  9. I just pasted the code as an embed code on my front page, as suggested. However, now I cannot any longer publish my site and, worse, when trying to opening it, it does not show up! PLEASE HELP!

    Reply
  10. Hi, I followed the instructions and the footer ad won’t go away:-( I checked the Theme code and cannot find the Weebly Ad Container contents; I suspect its located elsewhere. But when I ‘Inspect element’ of my webpage, it’s there. Any ideas?

    Reply
  11. So I tried all the options you mentioned here but none of them work. I just wanted to let you know that both of my sites with different themes ( one older one new ) and none of the options above prevent the weebly add at the bottom from popping up

    Reply
  12. I’ve tried all possible combinations of the instruction, even changed the SEO footer code, but no luck. Could you please help me out?

    PS. Thanks for a wonderful site! I’ve also used it before and it has worked fine until this obstruction.

    Reply
  13. all i can say is. you are amazing! a legend! i have used this article for 3 times now whenever weebly updates the footer. the steps are easy to understand and works everytime! thank you so much! keep it up! youre awesome!

    Reply
  14. What worked for me was pasting the udpated coded onto each page as ’embed code’. I don’t have a very big site so I was able to copy across to the other pages easily.

    Reply
  15. Something is not right… Every time I change visible to hidden and then save it & publish it, everything changes back to visible when I check the sources. But then I go to weebly again check settings under Seo and everything is hidden. Any idea please?

    Reply
  16. Good evening,
    when I rightclick on the footer, no menu appears. Besides
    the Weebly footer is transparent whenever I am in Weebly (on internet it’s just there). Would be GREAT if you could help me….
    Thanks,
    Hannah

    Reply
    • Your theme has the same code as in this article. Just copy and paste the code provided in the article under “Settings” section.

      Reply
          • Hello Webnots! Can you help me pleace? I have tried to put the Multiple Column Drag and Drop Footer on my Free Weebly Site but can’t get it to work! I have a big white space and the code for making weebly footer does not work. Can you add it for me pleace?

            Thank you !!!

  17. Hi!
    It works! But i have a new problem now…
    I had in header code the code to the favicon, but with that new code, the other one doesn’t work and i have a weebly favicon again.
    How can i fix it?
    Thanks!!!

    Reply
      • Following everything exactly to the letter as you have written it in the update, it still doesn’t work. The ad is still at the bottom of the page as of 31 October 2017. Is there anything else that could be done? Thank you!

        Reply
  18. Seems weebly changed the backend. Not working anymore. Only one html file index.html that too not cooperating. Please check… stucked since 26 Oct 2017

    Reply
    • You can check the updated section under “For Recent Weebly Update”.
      PS: You can’t enter code in the comments, that’s why your other comment was not published. Assume you wanted to mention the same as updated in the article.

      Reply
  19. This works as of 3/12/17
    However, I had to tweak the instructions… since I deleted all of the “footer” code…
    I copied and pasted the code provided into the HTML code. If it does not work, try moving the code around..

    Reply
  20. Hey can we get a IMPORTANT Q answered by someone who can use the Schwartz to give a detailed and correct answer, since most of us are to lazy to read the TOS over there (Weebly)..

    Q: If you use the codes for removing the Weebly footer, adding your favicon, or other codes which will allow paid./ for only features in weebly to be used in a
    free./ version mode of weebly.

    Will your site be DELETED for Violation of TOS? (seems like since they allow code access its allowed)????????

    Reply
    • Simple answer is – YES, they have rights to delete the site. But Weebly don’t do it, because half of Weebly users will be free users doing such stuff by editing the source. This is the reason they also don’t support when the code is modified or even you use embed code element.

      Reply
  21. It works! But i have one problem. In the left bottom corner appears this word.

    [object Object]

    when you scroll all the way to the bottom and when you scroll a little bit to the top it disapears.

    Can someone please give me an answer on how to get rid of this?

    I’am using the Brisk theme.

    Thanks!

    Reply
    • You need to create a custom sliding footer on click and place it on the footer area as explained in this article.

      Reply
    • That’s how Weebly guys work, so pathetic they never communicate appropriately and always do testing on live editor.

      They renamed “Design” to “Theme” and also moved the “Exit Editor” option from the top right corner to an “Arrow” placed on top left corner.

      Reply
    • Hope you are aware of Weebly TOS, creating/promoting PTC sites are not supported by Weebly. Look for other platform before your site is being deleted.

      Reply
  22. I don’t know if this is a problem with Carbon, but I just totally messed up the site I was working on trying to do this! It seemed it was working but then all of a sudden all the main code in the main_style css section was gone and it looked like the html code from a page. Very weird! Never mind frustrating. I now have to recreate the site :-(

    Reply
  23. How do you change the colour of the text e.g. make ‘contact us’ blue instead of white also how do you put text underneath the ©2015 please reply with the coding thanks!

    Reply
  24. hi! First of all, thank you so much for all the tips!
    I tried this one but the footer just wouldn’t disappear… Maybe weebly did something to stop this?

    Reply
    • Actually you can erase or modify it by upgrading your account
      and …
      Indeed Weebly upgraded their source code to make the footer stay intact no matter what we trying to do to mess around with the footer code “without paying”, but …
      Have you ever think of “covering” it ?
      Just cover it with a floating layer.
      Hate blanks ? put something on the floater like texts, links, pictures or ads.
      It works for me :D.

      Reply
  25. I want to know how to shorten the footer height. The footer height is too larger and I want to shorten the height down. How do I do this?

    Reply
      • Hello,
        I’ve done everything in the guide above, but the footer didn’t get shorter, so it looks a little funny. Is there any way that you can fix the problem for me?
        Can we get in touch by email, and then I can copy paste the things I’ve written, so you can correct it – or something like that?

        Reply
        • Looks you have a Instagram Snapwidget below the footer which is showing as a big white space. Remove the widget and check. If you want to add drag & drop elements in the footer then check out this article.
          Still have some problem then drop an email to us, we will try on your site.

          Reply
  26. Hi this trick works %100 in desktop view however in mobile view footer becomes visible again. I tried viewing my site in my smartphone the footer is visible. Is there any code for the mobile view?

    Reply
    • Footer should automatically hide in mobile layout as well especially if you are using responsive themes. You can try with the below CSS to hide the footer in mobile devices:

      @media all and (max-width: 480px) {
      #footer {
      display: none;
      }
      }

      #footer is the div id of the existing footer.

      Reply
  27. I have Tried it and i am success with it in desktop view but It isn’t work for mobile view .
    Please tell me what to do?
    Thanks.

    Reply
  28. hey hi , i changed my footer and done with successfully but the problem is 2 days back I changed my website theme and now i can remove weebly footer but i can’t create my own, when i tried to do that its showing empty ,how to create my own footer within new theme ? ,,please help me

    Reply
    • There should not be any difference in doing the same thing with different theme files unless you miss something.

      Reply
  29. this was awesome – thanks.
    ps, the only thing i would recommend is for newbies to FIRST copy all the code (Ctrl + A, Ctrl + C), paste it in a document and THEN do the change. that way if they mess it up they can simply copy and paste the original code.

    Reply
    • If you have messed up the code, you can always take the original code from original theme. Whenever you modify theme files the original will not get modified and you need to save the changes as a new theme.

      Reply
  30. Hi,
    Following this tutorial removes the Weebly footer, great! However, I use the Paris theme which after making the change set the theme to default yellow highlights for buttons and selections. It eliminated the additional colour options. Any corrective suggestions to keep the colour options while at the same time making footer modifications?
    Cheers!

    Reply
    • Once you save the modified theme your site will be using the custom theme and not Weebly’s default theme. Hence color options applicable for Weebly’s default theme will no more appear on your custom theme.
      This is applicable for all themes and not only Paris theme, once you modify the theme default color will be applied automatically.
      Hope this helps.

      Reply
  31. Hi, thank you for this sharing this great idea. I followed the instruction here for my website(www.voipfreedomidd.com) to create “Multiple Column Weebly Footer”– All is doing well but in the footer, it covers the window of footer area that is not matched with other content of a page. I could not explain well. Could you please take a look of my website and advice me to fix the thing?
    Will be waiting. Thank you.

    Reply
    • Though you entered comment in different article, the solution is to change the width of “multicolumnfooter” to 80% which looks matching your layout. Currently it is 100%, that is the reason footer is spread to full width.

      Reply

Leave a Comment