How To Go “Themeless” Using Toolkit For Elementor

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.

Astra Theme In Dreamweaver

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.

Creating Your Theme Templates In Elementor Theme Builder

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.

Set Layout Under General Settings To Avoid Page CSS “Breaking.”
Layout Set To Full Width And Displays Properly.
Page Layout Set To Default Looks Broken

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.

Astra CSS Structure In Dreamweaver

Solution: Using Simple Custom CSS & JS Plugin

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.

Customizer View In Hello Theme

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.

Activating Themeless

Your WP Theme Area Will Be Inactive.

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.

This area is used to display additional content that you would like to be hidden. This can be useful for mobile users. For more information on this area and how to make one visit the Read More Toggle Tutorial.

Getting Stuck?

We Can Help You

if you are having trouble with Wordpress or Elementor, we do our best to help. We can walk you through an issue via email, phone, or TeamViewer.

We can also create Elementor templates for sections or pages to help you achieve a look or style you need. These can be easily exported/imported to your website via JSON files.

Hourly Rates Will Apply.

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on print
Share on email

Farhad Black Suede Heels

99 $

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Leather Purse

99 $

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Printed Trench

159 $

Fabulous items for fabulous prices.
You deserve it.

Farhad Black Silk Scarf

49 $

Fabulous items for fabulous prices.
You deserve it.