Webflow Custom Code: All You Need to Know
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. Webflow Custom code 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:
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 Project Settings
First, you can add it via Project 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 to Project Settings, it will appear on all website pages.?
You can add custom code at the end of the <head> tag and the end of 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 Project 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.?
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.
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 Page Settings, Project Settings, or as an HTML Embed
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 .?
Providing urgent relief and support for OCD sufferers when it's needed most! | OCD Survivor & Advocate | Founder ObsessLess
1 年*dives deeper into JS*