Webflow is a powerful platform for building stunning websites. However, you might want to remove the "Made in Webflow" badge to further personalize your website's branding. This guide will walk you through the steps to eliminate the badge and explore other Webflow customization options.
Understanding the Webflow Badge
The "Made in Webflow" badge, often found in the footer, serves as a subtle attribution to the platform. While it's a standard feature, many users seek to hide the "Made with Webflow" label to present a more custom and professional appearance. This section will help you understand the purpose of the badge and why it's essential for Webflow's free plan but optional for premium users.
Basic Removal Methods
For users on paid Webflow plans, removing the badge is straightforward through the project settings. This is the recommended and most reliable approach.
Accessing project settings:
To remove the badge, follow these simple steps: Log in to your Webflow account. Open the project you wish to edit. Navigate to the Project Settings section.
Branding tab:
Within the Project Settings, find the "Branding" tab. Here, you'll find an option to toggle off the "Show Webflow badge" setting. This is the proper way to achieve Webflow branding removal.
Troubleshooting Badge Removal (Free Plans)
If you're on a free Webflow plan, the direct toggle option isn't available. This is where things become more complex. Below, we address the challenges and suggest alternative solutions for free plan users.
Custom code limitations:
Free plans have limited access to custom code, making direct CSS or JavaScript solutions challenging. Therefore, users on free plans have very limited options for removing the badge.
Plan upgrade:
The most reliable method to eliminate the Webflow badge from pages on free plans is to upgrade to a paid Webflow account. This will unlock full access to the project settings and the option to toggle off the badge.
Webflow Template Customization and Footer Adjustments
Regardless of your plan, you can further customize your Webflow website design tweaks and adjust Webflow footer content. The Webflow Designer offers powerful customization options for users looking to personalize their website beyond the badge removal.
Webflow page editing options: Webflow's visual editor allows you to modify footer elements such as text, layout, and styling. You can customize the footer's look to better match your website’s branding.
How to customize Webflow footer: To adjust the footer content, follow these steps:
- Within the Webflow Designer, select the footer element.
- Use the Style panel to make changes to its appearance and layout.
This is where you can begin adjusting Webflow footer content and removing unnecessary elements like the Webflow badge.
Advanced Customization (Paid Plans)
Paid plans unlock more advanced Webflow customization options, including the ability to integrate custom CSS or JavaScript into your website. These options allow you to remove the Webflow badge more effectively and make deeper design adjustments.
Custom code integration:
For more advanced users, adding custom CSS or JavaScript gives you the flexibility to further refine your website's appearance. This includes hiding the Webflow badge from the footer through custom code.
Hide footer branding on Webflow website:
If you're on a paid plan, you can use custom CSS to hide the footer branding. Here’s an example of how to target the Webflow badge:
/* Custom CSS to hide Webflow badge */
.webflow-footer .webflow-branding {
display: none;
}
This can be a solution to hide footer branding on Webflow websites, but always test your custom code to ensure it functions properly after platform updates.
Considerations for Custom Code
When adding custom code to your Webflow website, keep the following considerations in mind:
- Ensure your custom code is responsive and works across different devices.
- Regularly test the functionality of custom CSS or JavaScript to prevent issues after Webflow updates.
- Keep your website’s SEO performance in mind when making design adjustments through custom code.
Useful Links
Webflow Branding – Official guide on Webflow's branding options, including how to display or hide the "Made in Webflow" badge based on your plan.
Site Build: Footer – Webflow University tutorial on building a responsive footer, covering structure, content, and styling.
Build a Sticky Footer Using Flexbox – Guide on creating a footer that sticks to the bottom of the page using Flexbox in Webflow.
Free Footer Website Templates – Collection of free footer templates to inspire and kickstart your footer design in Webflow.
How to Remove 'Made in Webflow' Badge with Custom Code – Video tutorial demonstrating how to hide the "Made in Webflow" badge using custom CSS code.
Conclusion
Removing the "Made in Webflow" badge is a common request, and the process varies depending on your Webflow plan. By following these steps, you can effectively customize your website's branding and achieve a more professional look. Remember to explore Webflow's design settings and customization options to fully personalize your website.