Services like Autopilot Convert require adding HTML code to your website. The Convert HTML snippet is a single line of HTML with an image (<img>) element. This should typically be placed on all pages on a website. The easiest way to do this is by adding the snippet to the site-wide footer. (If you don't have a footer but do have a navigation menu, the snippet could also be placed in navigation or a site-wide header.)These instructions cover adding a snippet to the footer on a Wordpress website.
These instructions cover adding a snippet to the footer on a Webflow website.
In Webflow, adding a footer to all pages can be done using built-in tools, symbols (components), or custom code. Below are different methods based on your needs.
If you want a consistent footer across all pages, turn it into a Symbol (now called a Component in Webflow 2023+).
Steps:
1. Open Webflow Designer and go to any page.
2. Create a Footer Section:
• Drag a Section from the Add Panel.
• Inside the section, add a Container.
• Add your footer elements (text, links, social icons, etc.).
3. Turn the Footer Into a Symbol (Component):
• Right-click the Footer Section.
• Select “Create Component” (previously called Symbols).
• Name it "Footer" and save.
4. Add It to All Pages:
• Open another page, go to the Add Panel.
• Drag the Footer Component onto the page.
🔹 Now, any edits made to the footer will update on all pages automatically.
If your site is CMS-driven, you may need to place the footer inside the Page Template.
Steps:
1. Go to “Pages” in Webflow Designer.
2. Click the “Body” of your site.
3. Scroll down and add a new Footer Section inside the template.
4. Add your content (text, links, social icons).
5. Click “Save” – now it will be on all CMS template pages.
🔹 Best for blog posts or CMS-driven pages.
If you need a fully custom footer, you can insert HTML & CSS into the Webflow Custom Code section.
Steps:
1. Go to Page Settings → Scroll to “Before tag”.
2. Add your custom footer code:
<footer class="custom-footer">
<p>© <span id="year"></span> YourWebsite.com - All Rights Reserved.</p>
</footer>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>
3. Add this to Site Settings → Custom CSS:
.custom-footer {
background: #333;
color: white;
text-align: center;
padding: 10px;
}
4. Save and Publish.
🔹 Best for developers needing full design control.
If you want a footer that stays at the bottom of the page even when there isn’t enough content, add this CSS to Custom Code:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
footer {
background: black;
color: white;
padding: 10px;
text-align: center;
}
How to Apply:
1. Wrap all your main content inside a div.wrapper.
2. Inside .wrapper, create a .content div that holds your page content.
3. Keep the footer outside the .content div.
🔹 Ensures the footer sticks to the bottom without overlap.
✅ Symbols (Components): Best for consistent footers on all pages
✅ Page Template Footer: Best for CMS or dynamic pages
✅ Custom Code: Best for custom styling & global footers
✅ Sticky Footer: Best for ensuring the footer stays at the bottom