---

Step 1. Open Weebly's hTML/CSS editor

Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.

---

Step 2. add HTML code

On the left, under "HEADER TYPE", click on the first page layout, and on the right, scroll down until you find the inherent footer <div> of that first page layout. Add the following code below, directly above the footer <div> and repeat this process for every other page layout under "HEADER TYPE".

<div class="my-footer">
    <div class="container">{my-footer:content}</div>
</div>

​Click save.

---

Step 3. drag and drop elements into footer

Once you're back in the Weebly editor, go to "Build" at the top, grab some elements from the left, and start dropping them in the southern most drag and drop area - this is your new footer.

---

You're done! Publish your site to see your new footer!

---

Additional information & tips

If there is no padding or space between your elements in your new footer and the area in which these elements reside, you can choose to add the CSS code below to your site's CSS file.

Go to "Theme" at the top and then click on "Edit HTML/CSS" in the bottom-left. On the left under "Styles", click on "main.less" -- this is your site's main CSS file. Add the code below to the CSS file:

.my-footer .container {
    max-width: 1200px; /* The max width of other containers on your site */
    margin:0 auto; /* Center's the footer container */
    padding:2em; /* The space between the elements and their area they're contained within */
​    box-sizing:border-box;
}

---

comments powered by Disqus