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 the footer should be with few columns having content which should appear site wide. But multiple column footer is a Weebly Pro 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 select “Edit” button against the site you want to remove the footer.
- In Weebly editor select “Edit HTML/CSS” under “Design” tab.
Edit HTML Button in Weebly Design 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_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.
Modify Main Style Sheet in Weebly
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), 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>
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:
Add Multicolumn Footer in HTML
- 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.
Weebly Free Drag and Drop Footer Look
Adjust the footer margin with spacer element if the margin / padding provided in the CSS code is not effective.
18 Comments
Leave your reply.