Webflow custom code? Isn’t the whole premise of Webflow right the opposite? A no-code builder that helps you build beautiful sites without needing to write a single line of code? Technically yes, but sometimes you want to add some custom code. In this article, we teach you all you need to know to add custom code to your Webflow site.
Why add custom code?
Webflow is a no-code tool that gives you the power to build responsive websites without writing a single line of code. Being a Webflow designer, you get the power of CSS, HTML, and JavaScript in an easy-to-use visual canvas. The platform transforms your every move in the semantic code while you build it in a completely visual way. But here is a catch!
With the underlying code still accessible, you get the power of complete design freedom. You can manually tweak, insert or remove code to make your site 100% tailored to your needs. Those features allow you to stand out from the crowd and stop limiting yourself to the same templates everyone uses. Website is usually the first impression your visitors have and serves as a crucial attribute in lead generation. Adding custom code to Webflow will enable you to improve your user experience and convert more visitors to leads.
Types of Webflow custom code
What is HTML?
HTML is not exactly a programming (coding) language, but it is a markup language that serves as a big part of a website's content. The average website includes several HTML pages like the home page, about page, contact page, and more. Images, videos, links, buttons, headings, and texts are all HTML elements.
Use cases of using HTML consist of:
- Web developers use HTML to design how a browser displays web page elements.
- Users can easily navigate between pages as HTML is used to embed hyperlinks.
- HTML makes it possible to organize and format documents.
In code, HTML elements consist of an open and closing tag containing the element name. Some examples are:
- <h1>Heading 1</h1>
- <p>Text</p>
- <a href="url">link text</a>
Webflow gives you direct access to those elements, so there is no need to code your own.
What is CSS?
CSS stands for Cascading Style Sheet and allows you to create web pages that look good. It describes how HTML elements will be displayed on media and can control the layout of web pages. To put it simply, CSS is a language for specifying how elements will be presented to web users.
Like in HTML, all CSS styles have an open and closing style tag. An example of CSS for styling an H1 would be:
<style>
h1 {
color: green;
background-color: black;
font-family: "Times New Roman", Times, serif;
}
</style>
Pro tip: Use lowercase letters and dashes in your class names to ensure that your class names match the classes in the custom code.
What is JavaScript?
JavaScript is the programming language of the web. It is the world's most popular programming language for creating web pages. It enables you to implement complex features like timely content updates, interactive maps, animated 2D/3D graphics, and more.
Webflow comes with jQuery. This is a simple version of JavaScript, that helps you make the process of writing and understanding code easier. According to the Webflow blog post, an example of using jQuery on your Webflow page would be:
<script>
$( ".button-class" ).click(function() {
$( ".card-class" ).addClass("card-shadow");
});
</script>
How to add custom code in Webflow?
Via Site Settings
First, you can add it via Site Settings which are easily accessible in the top-left menu. Head over to the custom code and manually add custom CSS and HTML. When you add custom code, it will appear on all website pages.
You can add custom code at the end of the <head> tag and before the </body> tag.
Via Page Settings
The next option is to add a custom code via the Page Settings. You can access it by clicking the cog icon of a selected page. Scroll down to the bottom of the settings panel, and you will see the same slots as the Site Settings.
Adding custom code to Page Settings will affect only a selected page, not every single page of your site.
Via HTML Embed
Last but not least is the HTML Embed that you can find at the bottom of the Add panel. Adding a custom code via HTML Embed will allow you full control over the code location. What is great about HTML Embed is that HTML and CSS will be immediately visible to the designer.
What is the character limit for Webflow custom code?
As you may already know, Webflow has a character limit on the custom code block. When adding custom code in Page Settings in the <head> tag and before the </body> tag, you are limited to 10.000 characters. The Head and Footer code sections in Site Settings allow you to add up to 20.000 characters each.
But there is a workaround if your code is longer. You can store it on another server and reference the script in your custom code, or minify a custom code using a third-party tool.
Here is a simple step-by-step process you can follow to embed HTML:
- Make a GitHub account.
- Create a repository and make it public.
- Copy your HTML and then paste the code into the new file.
- Name your file and add the extension .html.
- 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 where you require the HTML and add a custom code block.
- Paste your copied RAW url into the ‘YOUR COPIED LINK HERE’ section, and then press save.
Pro tip: Make sure to use different IDs in the script when you add multiple HTML embeds.
Tips for adding custom code
We are finishing these 5 Webflow principles with top tips for using custom code in Webflow. Following best practices will speed up your work process and ramp up the quality of your code.
- 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 stated at the beginning of this article: Webflow doesn't have to be only a no-code tool. Adding custom code will enable you to set yourself apart from the competition and offer a unique experience to your visitors.
Adding custom HTML, JS, and CSS will allow you to stand out and fully align your website with your brand. Webflow makes the process of adding custom code easy. Add it via Site Settings, Page Settings or as an HTML Embed directly on the website.
Flowout can give you a hand in making your website stand out. We design and develop custom solutions exclusively for you and your business needs. Check out some of our work on this link here.
