⚙️Project Settings
Set project-wide configuration.
Last updated
Set project-wide configuration.
Last updated
Project Settings are located in the top left by clicking the Webstudio logo > Project Settings.
Site Name – Used to output WebSite structured data to clearly define your website's identity.
Favicon – Output your logo in search engines, browser tabs, and more.
Custom Code – Global field to output scripts in the head. Custom Code is often used to add analytics scripts such as Google Analytics, PostHog, Plausible, and any other scripts/code you want to output on every page. Please note that this code does not output in the Builder, so your scripts aren't tracking Builder page views. For outputting a script in the body on every page, use a Slot. For example, add HTML Embed(s) to your Footer Slot so that it outputs on every page.
Compiler – Atomic CSS reduces the CSS file size by ~70% in many cases. See more below.
When enabled, the class and CSS structure under the hood contains one style per class. This algorithm allows classes to be reused, significantly reducing the amount of CSS, ultimately leading to a faster-loading website.
For example, in the UI, you may create a Token called “Card” and give it a background color, padding, and a border-radius.
With atomic CSS enabled, it will output like this:
Even though this seems to take up more space, its benefits become apparent as you style more parts of the website. Now, anytime you add 20px of padding, it’ll automatically reuse the cu6yur2 class. Generally speaking, there are somewhat of a finite amount of styles you’ll use on your website, so as the website gets bigger, the CSS file does not grow proportionally – in fact, its growth slows down as the site gets bigger as it doesn’t need to continue creating classes for styles you’ve already used. Pretty neat.
Let’s quantify the CSS file size savings when using atomic CSS on Webstudio.
4-page brochure website
With atomic: 21 KB
Without atomic: 75 KB
23-page SaaS website
With atomic: 23 KB
Without atomic: 83 KB
In both cases, enabling atomic CSS reduces the file size by around 72%!
Even though atomic CSS improves website performance by reducing the CSS file size, there are use cases to disable it.
When exporting your Project to self-host it, you may want to modify CSS and classes outside of Webstudio. By disabling atomic CSS, your classes are human-readable, instead of using an optimized algorithm.
If you need classes to target but want to enable atomic CSS, you can add classes in the settings panel. These will always output exactly as they are entered. Watch this short video to learn more.
When atomic CSS is disabled, your components will have two classes:
A default class, such as w-box
Your Tokens and Local Styles merged into another class
The same example from above looks like this when atomic is disabled:
Redirects old URLs to new ones so that you don’t lose any traffic or search engine rankings. 301 and 302 status codes are available.
You can contribute free or paid templates by creating a Project and submitting it for review. Approved templates will appear in the Marketplace.
For more information, see Contributing to the Marketplace.
