Kicking My Elementor Theme
TLDR: I’m converting the Elementor-based theme of my freelancing website into a custom WP theme and sharing my experience.
My freelancing website, Bizjelly, was originally fully built with Elementor, a page-builder plugin for WordPress. The entire look and feel was pieced together with Elementor’s template system, which allowed for a much quicker design & development process compared to manually programming everything.
Page-builders, like Elementor, Beaver Builder or Visual Composer, are high-level technologies that provide power and ease-of-use in the web design process. With them, creation of richer webpages is more accessible to non-techies and perhaps making workflows more efficient for existing web designers.
However all of the goodness comes at the expense of increased loading time (for both live pages and the editing experience) and having to add yet another layer of technology with increased fragmentation and points of failure.
Ultimately, for parts of the website that will remain relatively static for long periods of time, like my header and footer, I feel it’s a lot more performant to render those with a traditional theme rather than with a page builder. Besides, there seems to be constant FOUC issues with Elementor and are only solved by manually building components anyhow.
As an exercise of curiosity and skill sharpening I’m converting my Elementor-based theme into a proper WordPress custom theme. An optimized custom theme will provide the equivalent look-and-feel, will load much faster and perform better (ie scrolling). As well, this is an opportunity to make observations, learn things and adjust my workflows accordingly.
Project phases, broadly:
- Phase 1: Convert header and footer
- Phase 2: Researching and implementing Gutenberg integration
- Phase 3: Re-building Elementor-created pages with just the Gutenberg editor and building up my theme style objects as I go along
Then, perhaps preparing the theme for public release!
- Phase 4: Exposing theme elements as options accessible via Appearance/Themes/Customize
- Phase 5: Optimization for semantics/SEO/accessibility/browsers
- Phase 6: Packaging and release
Stay tuned for updates to come!