Weebly has a default footer that can only be used if you're subscribed to Starter or PRO plan. In some cases that we can't take advantage of that feature , ill show you how to add a custom footer on your weebly website without being a PRO.
The custom weebly footer will have a drag and drop feature and weebly 4 compatible. You'll be able to customize the color , full width feature , custom font color and more. This footer is site-wide which means it will be all visible to all your pages (if you prefer to) .
On this Demo ill be using the "Mandy Miller-Centro" theme. This custom footer will work on any kind of weebly theme you choose and is fully responsive to all devices.
So, lets start by adding the base "HTML". On the recent weebly 4 update there are only three page layout available the Header, No Header and Splash. Currently "Mandy Miller" doesn't have the "splash" page layout so i will be adding the custom footer on two page layout only.
Copy the HTML code below and save it as we will add it later to the html section of this theme.
<div class="footer-top">
<div class="container">
<div class="footer2">{footer2:content}</div>
</div>
</div>
Save it and lets proceed on adding the CSS style for our custom footer.
For the CSS style of our custom footer i have included notes on what section is editable on your end. To change the custom footer background, title and paragraph color, font size etc. the responsive style is also included for responsiveness of the footer to any device.
copy this css code below and save it for later use
/* Footer */
.footer-top{
width: 100%;
background: #333333; /*footer background color*/
min-height: 50px;
}
.footer-top .container {
width: 100%;
overflow: initial;
}
.footer-top .footer2 {
width: 960px;
margin: 0 auto;
padding: 40px 20px 20px;
box-sizing: border-box;
}
.footer-top h2 {
font-size: 16px; /*Change this to update font size of title*/
margin-bottom: 10px;
color:#ffffff; /*footer title color*/
}
.footer-top p,
.footer-top div.paragraph {
font-size: 12px; /*Change this to update font size of paragraph*/
color:#ffffff; /*footer paragraph color*/
}
@media screen and (max-width: 992px) { /*Responsive*/
/* Footer */
.footer-top .footer2 {
width: 100%;
padding: 40px 20px 20px;
box-sizing: border-box;
}
.footer-top td.wsite-multicol-col {
margin-bottom: 25px !important;
}
.footer-top td.wsite-multicol-col:last-child {
width: 100% !important;
}
}
Quick Tip: Customize the above css as per with comments on which part to modify.
Now proceed to the main style css or the "main.less" section of your theme and add the code that you copied above to the very bottom of your css. (see image below)
Quick Tip: If you wish to copy this on your no-header page layout just follow the same procedure we did on the "header" page layout above and it should be all good.
Save your theme and you can now start dragging elements to your new custom footer.
Post a Comment