How To Go “Themeless” Using Toolkit For Elementor.
The themeless feature in Toolkit For Elementor is one of the most interesting features for WordPress users. From the beginning, we used a theme as the only way to achieve a style in WordPress. As front-end page builders have progressed, we are now using the core of WP less than before and creating our page templates on the front side. This has resulted in us over-writing most all of the original theme using the Elementor Theme Builder. The only thing left, was to bridge the gap that WP and the builder need to talk to one another. This is where TKE “Themeless” comes into the picture.
Before you begin.
Going themeless is not something you activate on an existing site and expect it to all just do magic tricks, you need to plan your site build from the beginning. Elementor users who accustomed to using the Hello theme will find going themeless less painful. When activating Themeless it is best to already be using a very light theme. Hello, Astra, WP Ocean or Twenty – Sixteen all work well. While Themeless bypasses all the CSS of your theme, some of the functions.php will remain. For this reason, I suggest starting with Hello due to not needing to overwrite other themes functions.
Themeless Consideration: The Templates
All WordPress themes are built with a similar file structure. We generally need a header, footer, single, page, archive, single post, and 404-page template for all of our data to live in. Other plugins like WooCommerce will also need a template(s) created.
Solution: Creating The Templates In Elementor Theme Builder.
As you can see in this image, I have re-created an Elementor template for all of the needed part of my website similar to the file structure above. Each of these has its assigned instances and conditions set. This is much the same as using Hello theme.
Note: Set All Elementor Templates To “Full Width”
Please set all Elementor templates page settings to “Full Width” rather than Default to avoid the CSS “breaking” on the front end.
Themeless Consideration: The CSS
In addition to page templates, A theme also has special CSS stylesheets to handle the look and feel of the UX. When going themeless, you will also need to create your own CSS stylesheet(s) for your custom theme.
Solution: Using Simple Custom CSS & JS Plugin
In order to add CSS stylesheets to your website, this plugin is very helpful. Here I have created a stylesheet for my Themeless and a stylesheet for WooCommerce. Each contains all the needed CSS I need for my website global settings such as H tag sizes and other body CSS.
Sample Stylesheet For Hello/Themeless
This stylesheet uses the Fibonacci sequence in the typography settings. The base font is 13px. The headings are based upon the golden ratio. H1 89px, H2 55px, H3 34px, H4 21px, H5 13px, H6 8px.
Themeless Consideration: Life Without The Customizer.
The customizer panel in WordPress is only a few years old, but we have gotten very attached to it. When using themeless, our customizer has no effects on the design the way we are used to. You must set the site identity and other options in the old WordPress areas.
Finally Going Themeless
You can now activate Themeless in TKE. The site will work using your templates and custom CSS rather than the WP theme. You will need to further edit your CSS and polish it all up.
In Conclusion
Going “Themeless” is a bit of a challenge, it also requires a good bit of additional work and understanding of WordPress structures. Going Themeless is for users who want total control and build from scratch.