Custom Code

Layers Panel
Variables
Symbols
Pop-up Builder
Media Manager
Figma to Kirki
API Integrations
Review and Publish
Layers Panel
Variables
Symbols
Pop-up Builder
Media Manager
Figma to Kirki
API Integrations
Review and Publish

Apart from the plethora of elements and the various styling options on Kirki, you can also add Custom Code. This is useful if you wish to customize your page further and make it your own using HTML, CSS & Javascript.

šŸ“ Note: There may be cases where your Custom Code interferes with Kirki’s performance, and thus, we cannot promise complete compatibility.

Compatible Code

As mentioned earlier, the compatible code that you can use is HTML, CSS & Javascript.

In the case of HTML Tags, make sure to use the appropriate opening and closing tags to ensure your code will work as it should. And, keep in mind not to include the tagsĀ ,Ā , orĀ Ā in your custom code as it will cause your site/page to break.

Adding Custom Code

To add your Custom Code, head over to Pages > Settings > Custom Code. Here, you’ll find the following two text boxes:

  • InsideĀ Ā Tag: Enter code inside theĀ Ā tag.
  • BeforeĀ Ā Tag: Enter code that’ll be placed before theĀ Ā tag.

Inside Tag

Inside Tag

Code added here will be placed after and before tags. HTML tags like , , and Ā must be placed here. You can also add the Ā tags but that will slow down your page’s load speed.

BeforeĀ Ā Tag

Code added here will be placed before closingĀ Ā tag. One thing to note is that addingĀ Ā tags here instead of insideĀ Ā tag usually helps to improve the site’s performance.

Was this page helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.