If you ever need to install a script on your website that must appear on all pages, you would normally be instructed to add this to either the Header or the Footer of your website.
This because on most websites, no matter what page you're on, there is always a Header or a Footer present.
The best way to install anything to your Header or Footer in EvolutionX is to use the Head or Footer Block.
You can find these in Appearance > Theme Options:
Head:
Footer:
1. Adding JavaScript in the <head> (Header)
The script loads before the HTML body is fully parsed.
It may block rendering, meaning the browser stops processing the page until the script is loaded and executed.
If the script interacts with elements that haven’t been loaded yet, you might get errors (e.g.,
document.getElementById()returningnull).Good for scripts that need to be available early (e.g., analytics, feature detection, configuration settings).
2. Adding JavaScript Before </body> (Footer)
The script loads after the page content is fully parsed.
Ensures that all elements are already in the DOM, reducing errors.
Prevents script execution from blocking page rendering, improving perceived performance.
Recommended for most cases, especially when working with DOM manipulation.
When to Use Each?
Placement | Pros | Cons |
| Loads early, useful for configurations, analytics, or preloading scripts | Can block rendering if not using |
| Improves page load speed, ensures DOM is ready before execution | Slight delay in execution since it loads last |
⚠️ In most cases you will be using the Appearance > Theme Options > Footer Block.