Skip to main content
Bevel → Custom Elements → Custom Code holds snippets of HTML, CSS or JavaScript and prints them where and when you say: in <head>, at the start of <body>, or at its end, on the whole site or on pages matching a display condition. Managing snippets needs the manage options capability and permission to post unfiltered HTML, which on a single site means an administrator.

​
A snippet

  • Name.
  • Location: <head>, body start, or body end (default).
  • Priority 1 to 10: 1 prints first.
  • Always load jQuery if the snippet needs it on pages that would not otherwise load it.
  • Code: exactly what should print, with styles wrapped in a style tag and scripts in a script tag.
  • Where it prints: the same include and exclude conditions as the Theme Builder. A snippet with no conditions prints nowhere.
  • Save as draft, or publish.
The list tags each snippet by kind (styles, script, markup) with its size, and offers duplicate, publish or draft, trash, restore and delete. Administrators see an HTML comment naming each snippet around its code; visitors do not. Snippets never print inside the Elementor editor or in Elementor’s safe mode, so a broken script cannot lock you out of the editor.

​
Elementor Pro

Snippets are stored the way Pro stores them, so Pro-made snippets carry over. With Pro active, Pro’s Custom Code takes over. See Working next to Elementor Pro. For site-wide code without conditions, the Custom JS, Custom Content in Header and Custom Content in Footer fields under Site Settings → Custom CSS are quicker.