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.
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.
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.
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>
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.
- 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.
- 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.
- 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.
- 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.
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"> © 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"> © 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.
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"> © 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.
Save the changes and publish your site. Your site now will look like a Pro site created with good looking footer links.
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"> © 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.
Dear all,
thanks for all the tips and tricks.
I tried them all, nothing works. Weebly has won.
Best wishes
Indeed..nothing works…
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.
Check this article whether it helps https://www.webnots.com/add-multicolumn-drag-and-drop-footer-in-free-weebly-site/.
March 10, this patch is not working as of now. Don’t give up, arise souls on to next version for this fix..thanks
Who knows to fix the new footer since March 2019? Urgent! Thanks x 1000 !
As of 5th March, 2019, it is not working. Please anyone know how to fix it after this new update?
Sadly they must have done an update for March 2019 because that pesky footer is back. :(
yes – march 2019, the next chapter for a footerless site begins.
Doesn’t work anymore, unfortunately.
Agree, Weebly had another update…..
This was working like a charm up until last week. They must have changed their footer again. Any new tips? Thanks for your article!
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
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.
You can go to the code editor and modify the links.
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?
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.
Awesome, thanks!
Thanks for the tut, it was working before but now the foooter appears again, no matter what I do, footer still remains, any ideas now? thanks.
Thank you so much! I hope you will make more tutorials and update them weebly makes amendments. Also do you accept donations?
This is just a tutorial. Instead of donation you should probably buy Weebly premium plan.
It worked when I was used in 2017 but after now in 2018 it again appearing so how to change again can you help me out plzz,,
It worked. You made it easy. Thank you.
The update instructions are not working for me on my sites. Other methods?????
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.
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. :-)
Thanks works perfectly.
Works perfectly even after the update, love you!
its work for me thank you very much.
For Recent Weebly Update… I have followed all the steps you mentioned but it’s not working at all. The footer is still there… please help…. :'(
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.
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!
I succeeded in replacing my site by a copy I made a week ago….. pfffff, happy, although the Weebly footer still is there;-(
Hi!
Excellent article! But after removing my footer, at the end, my menu is appearing and I want to remove it but I am unable. Help me plz.
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?
Thank you for the article. Works 100%
Woah. Thanks for this article.Keep up the good work!
Woah. Thanks for this article. Been checking this page, and yes, it’s now updated. Thanks very much.
Thank you – it got rid of the free website thing on Weebly!!! Thanks!!
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
I have tried all your method and it does’t work anymore. Has weebly made some changes?
You are amazing! I love the fact that after Weebly patches these links, you update it to make the footer invisible again! Well done! You are great!
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.
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!
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.
PH! You too are a genious! This worked! Pasted code on every page in “embed code”. Thanks a ton to you and to Webnots as well!
how did you do the embed code? How is it different than pasting html from notepad? Thanks!
No difference, drag and drop an embed code element on each page and paste the code on the each page if your site is small.
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?
Thanks bro you’re the man!!!!!!! It works, people just don’t pay attention to details.
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
Your theme has the same code as in this article. Just copy and paste the code provided in the article under “Settings” section.
great you are reacting so fast! Thanks a lot! Where can I find your “Settings” section?
Settings menu will be inside the Weebly site editor when you are editing your site.
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 !!!
The code is still does not working as of 30 oct 2017 even though visibility settings in footer changed as per above!
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!!!
Your favicon code is not correct, it has two times link tab. Use the correct favicon code and try.
i have change the code but it still doesn’t work…
Still does not work as of 30 oct 2017 even though visibility settings in footer changed as per above. Please help.
The article is updated, try out the modification under the section “For Recent Weebly Update”.
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!
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
Check the updated section “For Recent Weebly Update” in the article.
NOT WORK 28-10-2017 CURRENT TIME.
The article is updated, check the section “For Recent Weebly Update”.
It doesn’t work now. Waiting for you to get a workaround.
Check out the updated part in the article under “For Recent Weebly Update”.
Thanks! It worked. I though the trick was finished as they put the footer code as a header which we won’t be able to edit directly.
This is not working anymore.
Is there any other way on how to remove the Weebly Footer Branding?
Check the updated section under “For Recent Weebly Update”.
Doesn’t work anymore? Any updates on how to change it?
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.
Thank you so much! This has been really helpful!
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..
You rock! Your instructions were perfect. Thank you!!!
Kathy
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)????????
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.
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!
OMG!!!
Actually works. (well for sure if you done it wright)
THANKS SO MUCH!
same!
Thank you!
Nice, work like a charm!
TY
Sweet, thanks for this, works beautifully!
It doesnt work anymore was updated july 2016, is there is a new way to do it?
no not yet
Thank you so much
How to create weebly footer like the first image? Thanks.
You need to create a custom sliding footer on click and place it on the footer area as explained in this article.
More effective method is just to comment the HTLM code: Screenshot —> http://i.imgur.com/zDEljKT.png
There are two div tags not closed properly as shown in your screenshot. When div tags are highlighted in the code editor they are not closed properly.
You are right I closed them ;-) I’m in the process to build a complete new custom footer, this thread is very useful to understand how it work http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height.
I’m new to Weebly and I like to have the ability to to tweak the HTML and CSS, for me it’s the best way to learn and understand (trial/error).
Thanks ! :)
Any new way to remove the footer then fixed the method above
Gah they fixed it :(
hey my weebly site doesnt show footer wrap any idea dude
I don’t have a Design tab in any of my websites (I created them yesterday), have they removed it?
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.
I have no word to thank you guys! thank you so much
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.
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 :-(
Nice! Thanks for edit footer my site on weebly.
Hello, I just want to remove the the footer, but it’s not working! I found the footer html, and did EXACTLY what you said, but it is just not working!
Omg thank you so much, really!! – It helped (Y)
(I totally forgot about the snapwidget, stupid me)
Good to know, it helped.
Thanks for the tutorial, display:none is perfectly working fine without any height problem.
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!
Use div style=”color:blue”; to change the text color and use line break “br” to move the text to next line.
I can’t get the text to change color, where do you put the code at?
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?
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.
It is perfectly working fine at least for whatever the old accounts we have.
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?
Use display:none instead of visibility:hidden to remove the footer completely. This will solve the height problem.
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?
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.
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?
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.
Hmm This not Working Because when i customize my own footer, It hides too :(
It works fine, may be you need to change the sequence and try it in appropriate place of CSS.
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.
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
There should not be any difference in doing the same thing with different theme files unless you miss something.
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.
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.
Thank you for the help, very much appreciated!
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!
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.
It helps a lot, thank you very much.
Thanks man this helped alot
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.
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.
I have a video on this on youtube, please check it out: youtube.com/watch?v=IFLp6GLhbmk
Can you do a video on this
A demo is added in this article.