When Themeless is enabled, the WP Theme Framework is disabled and your theme’s CSS & JS files are not loaded. Simply use Elementor’s Theme Builder (Header, Footer, Single, etc) and Theme Styles (Global Styles) to build lighter sites natively.
We’ve put together this list of common questions users have when going Themeless for the first time:
Selecting the Proper Page Setting
When you enable Themeless, you may discover that your Single Post template and other Global Templates don’t render as they should- however this is super easy to fix.
Remember that your Theme’s CSS & JS are now dequeued from the front end. Whenever an Elementor Template has it’s page setting set to “Default”, it tries to load the Theme’s CSS- which is no longer enqueued.
Thus you’ll want to ensure that your Elementor Global Templates (Header, Footer, Single, Archive, etc) are set to a page setting of “Elementor Full Width” and not “Default”.
If you have any posts created in Gutenberg, (aka not using the Elementor Editor), you should leave that post attribute setting set to “Default”. This is because your post was not created in Elementor- but using WP/Gutenberg.
So as a summary, when Themeless is enabled:
1) Global Templates = Page Setting should be “Elementor Full Width”
2) Posts that were made in Gutenberg = Post Attributes should be “Default”
After updating your page settings, click save, regenerate Elementor CSS, and clear all cache.
Adding Custom Code
When going Themeless, since your theme’s CSS and JS aren’t loaded, you’ll want to either use ToolKit’s Code Manager, or a plugin like Code Snippets to easily manage and insert custom code snippets without the need for a theme’s function.php file.
Adding Custom CSS
There are 3 primary ways to insert custom CSS depending on your specific needs:
- Using Elementor’s custom CSS areas
You can either insert custom CSS per section, per template, per page, or now with Elementor v3.0, globally using their global CSS area under Theme Styles. - Using a CSS Manager or Plugin
Plugins like the popular Code Snippets plugin, Simple CSS & Javascript, Microthemer, and CSS Hero all allow users to easily manage custom CSS using their own frameworks.