This post is brought to you by Sponsor X, the best way to build paywalls and the sure way to understand your numbers.
Webflow custom code? Isn't Webflow all about no-code building? Yes, it is, but sometimes you might want to add custom code. In this article, we'll show you how to add custom code to your Webflow site.
Table of contents
Why add custom code?
Webflow lets you build websites without coding. As a Webflow designer, you can use CSS, HTML, and JavaScript easily. The platform changes your design into code automatically.
But, you can still edit the code yourself. This gives you full design freedom. You can make your site unique by adding custom code. This is important because your website is often the first thing visitors see.
Adding custom code can improve your site's user experience. It can also help turn more visitors into leads.
Types of Webflow custom code
What is HTML?
HTML is a markup language, not a programming language. It's a big part of a website's content. Websites have many HTML pages, like the home and about pages.
HTML is used for images, videos, links, and more. It helps organize and format documents.
HTML elements have an open and closing tag. For example:
1<h1>Heading 1</h1>
2<p>Text</p>
3<a href="url">link text</a>
Webflow lets you access these elements easily. You don't need to write your own HTML.
What is CSS?
CSS stands for Cascading Style Sheet. It makes web pages look good. CSS controls how HTML elements are displayed.
Like HTML, CSS styles have open and closing tags. For example:
1<style>
2h1 {
3color: green;
4background-color: black;
5font-family: "Times New Roman", Times, serif;
6}
7</style>Pro tip: Use lowercase letters and dashes in your class names. This ensures they match the custom code.
What is JavaScript?
JavaScript is the programming language of the web. It's the most popular language for web pages. It lets you add cool features like updates and animations.
Webflow has jQuery, a simpler version of JavaScript. According to the Webflow blog post, you can use it like this:
1<script>
2$( ".button-class" ).click(function() {
3$( ".card-class" ).addClass("card-shadow");
4});
5</script>
How to add custom code in Webflow?
Via Site Settings
You can add custom code in Site Settings. It's in the top-left menu. Just go to custom code and add your CSS and HTML.
Custom code will show up on all pages. You can add it at the end of the <head> tag and before the </body> tag.
Via Page Settings
You can also add custom code in Page Settings. Click the cog icon of a selected page. Then, scroll down to the bottom for the same slots as Site Settings.
Adding code here will only affect the selected page. It won't change every page on your site.
Via HTML Embed
The HTML Embed is at the bottom of the Add panel. It lets you control where the code goes. HTML and CSS will be visible to designers right away.
What is the character limit for Webflow custom code?
Webflow has a limit on custom code. In Page Settings, you can use up to 10.000 characters. Site Settings let you use up to 20.000 characters each in the Head and Footer sections.
If your code is too long, there's a workaround. You can store it on another server or minify it with a tool.
Here's how to embed HTML:
- Make a GitHub account.
- Create a repository and make it public.
- Copy your HTML and paste it into a new file.
- Name your file and add the .html extension.
- Click, commit a new file, and open your file in the repository.
- Click Raw, and copy the URL of Raw format.
- Go back to your Webflow page and add a custom code block.
- Paste your copied RAW url into the ‘YOUR COPIED LINK HERE’ section, and then press save.
Pro tip: Use different IDs for each HTML embed.
Tips for adding custom code
We're wrapping up with tips on using custom code in Webflow. By following best practices, you'll work faster and improve your code quality.
- Place your HTML embed inside a symbol and reuse it across pages.
- Write JS in a text editor with code formatting before pasting it in Webflow to avoid bugs.
- Test your JS before going live. You can do this by using console.log statements.
- Always publish your site to see the latest version of your custom code in action.
- Test and troubleshoot every new piece of code you add.
Conclusion
As we started, Webflow isn't just for no-code users. Adding custom code lets you stand out and offer a special experience to visitors.
Custom HTML, JS, and CSS help you align your site with your brand. Webflow makes adding custom code simple. You can do it through Site Settings, Page Settings, or as an HTML Embed on your site.
David Morgan
