In our previous article, we explained how to remove free Weebly footer and add your own links in free Weebly site which may not be sufficient to have a professional looking site. Generally, footer should be with few columns having content which should appear site wide. But multiple column footer is a Weebly premium plan feature and you need to upgrade to add drag and drop elements to your footer area. In this article, we explain the step by step process of how to add multicolumn drag and drop footer in free Weebly site just by modifying the CSS and page HTML.
What are the Steps Involved?
Below are the steps involved in adding elements to your footer:
- Login and edit your site.
- Add custom CSS code.
- Hide free footer.
- Add custom footer.
Step 1 – Accessing Site’s Source HTML/CSS
- Log in to your Weebly account and “Edit” the site that you want to remove the footer.
- In Weebly editor click on the “Edit HTML/CSS” button under “Theme” tab.
Step 2 – Modifying Main CSS
- In order to add a multiple column footer, you need to add the following CSS code in the “main.less” or “main_style.css” under “Assets” section. This code can be added anywhere in the CSS but add it with care to avoid over-lapping with another element.
/* Weebly Multi Column Drag and Drop Footer by WebNots*/
#multicolumnfooter{
width: 100%;
color:#ffffff;
font-size: 15px;
text-align: center;
padding: 10px 0px 10px 0px;
margin: 10px;
overflow-x: hidden;
overflow-y: hidden;
}- Customize the width, color, font, background and padding alignment to suit your site’s design. Also, you can add additional styles to make the footer area more beautiful.
- It should look like below after you added the code.
Note: All latest Weebly themes use main.less stylesheet while the older themes still use main_style.css.
Step 3 – Modifying Page Layout HTML to Hide Existing Footer
- Select the appropriate page layout as per your page customization under “Pages” tab. In this example, the page is customized as “Standard Page” (no header image) and hence the modification needs to be done in the page layout “no-header.html”.
- If you have multiple page layouts in your site then do the changes in all page layouts. Otherwise some pages will show drag and drop footer and some pages will not show.
- Browse through the HTML content and locate the
{footer}code. - Now add the following code to hide the existing free footer advertisement.
<div id="footer" style="display:none">{footer}</div>Note: Different themes may have different type of footer code. Some themes may have footer-wrap which you need to hide as a whole. In general all themes should have {footer} tag mandatorily and you need to hide that.
Step 4 – Adding Multi Column Footer
- Now that you have hided the existing footer and its time to add custom footer.
- Add the below code just above the hidden footer element.
<div id="multicolumnfooter">{multicolumnfooter:content}</div>- It should look like below after you have added the code:
- Save your changes.
Step 5 – Drag and Drop Elements in Footer
- Now you can drag and drop elements in the footer area in site editor like a pro users. Your site will look like a Weebly Pro site with a beautiful footer divided into multiple columns.
- Below is an example of three column footer on a free Weebly site.
Note: Adjust the footer margin with spacer element if the margin / padding provided in the CSS code is not effective.
wont work. no main style asset on my version of the website :/
Your tips are awesome. But I guess this one is outdated. Could you please update this post so that it works?
Hi!
I think the code worked for me, I don’t see the “free weebly footer” and I can drag and drop elements into the footer now. But my question is how to add “Latest Posts” like you did in the example of the Step 5?
That’s the feed reader element which you can drop and customize to show the latest blog posts.
Hi there,
I tried to follow the steps and at some point my weebly editing page went completely blank. All I see is their “change” button to upgrade to paid version.
I’ve restarted the editor, etc, to no avail. I can’t see anything on my editor. Any ideas as to how to get my editor back to visible and be able to edit my site?
That was weird and frustrating.
Thanks so much for your help
We assume you are using weebly.com and not any other hosting services. In this case, it could be a temporary issue (probably due to Weebly’s recent upgrade). If the problem is not resolved, you may need to contact their support team for help.
Hi,
since the weebly carbon update on october 1st, not only my favicon is not shown any more (in Chrome browser), but now I dont see my simple footer any more as well.
Will above steps still work?
Is weebly trying to force us into paid subscritpions..?
I was just about to ask the same thing! It is not working for me and I want the footer gone but I like the new and updated themes.
It is working on our demo site. If it is still not working for you then add the following code in main stylesheet and try:
#weebly-footer-signup-container {
display: none !important;
}
HI, when I add code to modify main style CSS it is all grey, doesn’t take effect. I tried to place it at the end and in various places in the middle.
Hi, this has worked great on my Weebly site except the weebly “powered by weebly” and “create a free website” still shows underneath. How can I make it hidden. (ps I have tried the code for visibility:hidden; but it hides everything on the footer including the new links I just made.
Try it in a sequence – multicolumn code, your own links then hiding the free footer.
I tried that, but it wont work this way. Are there other ways to do that?
Can you make a post on this please.
I tried it that way, but it doesn’t worked
after a while of trying i got the solution on your question.
1. add “visibility:hidden;” above the footer wrap (just the thing you do if you want to make the weebly ad invisible)
2. do step 2 of the artice above.
3. add “visibility:visible;” in a new line above “width: 100%;”
4. done, in the editor it looks like there is no footer anymore, but on the website itself, everything is just the way you want!
cheers, vinc
Dear Webnots, how to make the width and below margin covered with your footer (become full) .? Thank you!
You can change the width of “multicolumnfooter” to any required value (say 80%) to fit with your site’s layout.
You need to update this for the most current version of the CSS on weebly.