For quite some time, Elementor users have been asking the platform’s developers to expand its custom breakpoints. However, this feature could not be readily implemented. “We are determined to ship this feature, but we want to do it right,” wrote Elementor Co-founder and CTO Ariel Klikstein in a blog post in December last year.
Here’s an update. Elementor’s developers are finally ready to offer custom breakpoints with the release of version 3.4 of the leading WordPress website building platform. Alongside this new feature comes additional performance boosts to provide noticeably better experiences for website creators.
From Full Website Kits to Custom Breakpoints
In the previous Elementor upgrade, version 3.3, the platform introduced the full website kits feature, which makes it possible to package an entire website so that it can be reused in other website projects. Site settings, templates, content, error pages, headers and footers, pop-ups, fonts, color schemes, themes, landing pages, and other features of a website can be carried over to a new project through these kits.
The full website kits dramatically reduce the time it takes for website creators to complete projects that only need new content based on an existing website like in the case of the websites put up for new business branches or product lines. This was described by Elementor as a “massive jumpstart to website creation.”
Elementor version 3.4 brings something different with custom breakpoints, which focuses on the optimization of the experience of creating websites for different kinds of devices. Elementor used to have only two custom breakpoints, one for mobile and another for tablets. The latest version of the platform brings the total custom breakpoints to seven.
The new list of custom breakpoints is as follows: desktop, tablet, tablet extra, mobile, mobile extra, laptop, and widescreen. Tablet extra and mobile extra pertain to tablets and mobile devices that have displays that do not go by the usual 16:9 and 4:3 aspect ratios. The rise of near bezel-less mobile devices has resulted in the introduction of atypical aspect ratios such as the 19.5:9 of the latest iPhone devices and the 20:9 of the Samsung Galaxy and Xiaomi Mi flagships.
“Web creators will have the ability to fully control their website design for an extensive range of devices with a pixel-perfect viewport and fully responsive website design and UI. Crucially, Elementor enables the addition of custom breakpoints without significantly jeopardizing performance,” Elementor said in a statement.
As Klikstein said previously, there were challenges in granting the popularly requested custom breakpoint feature, since Elementor’s developers encountered problems with the code and performance. Elementor has not revealed how exactly did they manage to overcome the potential code and performance issues but based on Klikstein’s blog post, the following was likely instituted:
- Conversion of hard-coded usage of breakpoints to a dynamic system;
- Implementation of user interface and user experience improvements for responsive editing;
- New infrastructure for the addition, management, and utilization of Additional Custom Breakpoints;
- Modification of the registration, creation, and utilization of responsive controls to achieve an efficient structure.
Performance Boost
Elementor gained a performance upgrade with the release of version 3.3 in the earlier part of 2021. This improvement is attributed to the debut of new tools designed to facilitate workflow streamlining. Also, the previous Elementor version implemented optimizations that resulted in faster page loading times mainly due to conditional and inline CSS load. The 3.3 version revamped the handling of widgets to make sure that only the needed widgets get to load their dedicated CSS instead of loading multiple CSS all at the same time.
It was also in Elementor 3.3 when asset loading and accessibility changes, the use of lighter asset files, and the switch to conditionally loaded lightbox, conditional asset loading, and decreased number of extra DOM elements.
With version 3.4, Elementor moves forward with another round of performance enhancements starting with the decision to pull the plug on older web browser support. By doing away with codes needed to support backward compatibility with legacy and older browsers, Elementor says that they have managed to improve server response time by up to 23%, reduce memory usage by 5% and save up to 30% off of data traffic to the Editor load.
Moreover, version 3.4 of Elementor adds an improved Font Awesome SVG icons mechanism. This asynchronized loading scheme adopts a different method of displaying icons on a page to provide website creators better precision in configuring how icons are to be displayed on a page.
Upcoming Upgrades
“Elementor is committed to providing the best platform to meet our users’ needs. As part of these efforts, performance improvements continue to be a core focus in each version and we are excited to share more of these with our community,” Eran Alon, Elementor VP for Product Marketing at Elementor, said in a statement.
Users can expect more improvements on the platform in the months ahead. In particular, page loads are set to be streamlined increasingly with emphasis on the policy of loading only the resources that are necessary. Elementor is also set to reduce its reliance on JavaScript and CSS libraries. Additionally, more optimization and enhancements are set for existing internal JavaScript and CSS.
Achieving the Highest standards in Website Building
Elementor’s press statement on the release of version 3.4 characterizes the additions and improvements as a way of “enabling the highest standards for web creators.” The open-source code-free website building platform behind roughly 5 percent of all known websites worldwide continues to improve the experience of building an online presence through streamlined website building processes. The release of the platform’s latest version shows how much more can be improved in the website building process when things are made more convenient without making compromises on performance.
