How to turn on Weebly Footer for Pro & Starter Plan Users

For our DivTag templates that have the drag and drop footer feature, the template actually has 2 footers:

1) DivTag Drag and Drop Footer

2) Weebly Drag and Drop Footer (this is only available to Weebly Pro users)

What we do is that we hide the Weebly footer so our customers can use our DivTag footer as it is designed to suit the template design.

However, one of the issues is that if you switch on the Weebly mobile optimization mode, our DivTag footer will not appear on the mobile device.  To work around this, you will need to switch OFF the DivTag footer, and switch ON the Weebly footer (remember this is only available to Pro and Starter plan users).

For Weebly users who are using a Free Weebly account, you will not have the Weebly Footer available to you.  However, if you are using our DivTag templates, you will have a drag & drop footer no matter if you are using a Free, Starter OR Pro accounts.

This tutorial will show you how to switch OFF the DivTag footer and switch ON the Weebly footer, so the footer will appear in mobile devices IF you switch on the mobile optimization mode.

 

Open Code Editor

We will first log into your Weebly site (click here) and click on “design” and on “edit html/css” to open the code editor. Depending on your theme you will have different number of  page layouts. Choose the page layout you want to turn on the Weebly Footer by clicking on the name of the page layout on the left hand column

OLD EDITOR

Open-Code-Editor

NEW EDITOR

edit-html-css


Edit HTML

Scroll to near the bottom of the page and locate this code:

weeblyfooter1

These are the two codes we will be modifying:

<div id=”footer-content”>{bottom:content}</div>
<div class=”weeblyfooter” style=”display:none;”>{footer}</div>

Depending on your template, this code may look a little different. The important identifying parts are {bottom:content} and {footer}

Here we will place  style=”display:none;” in a different location like this:

<div id=”footer-content” style=”display:none;”>{bottom:content}</div>
<div class=”weeblyfooter”>{footer}</div>

 

Repeat Previous Step

To change all the footers in your website, you will need to repeat the previous step with all your page layouts.

 

Save & Exit

Once you have completed the modification, you can move your mouse cursor to the footer area, and you should see a blue border light up when you are near the footer. Click on the blue bordered box to start editing your footer.

 

Tags: