5 New Features In Elementor Users Need To Know & Use

Elementor, the software company hailed as one of the most promising Israeli startups in 2019, is known for its website builder, making it easy for WordPress users to create professional websites. The WordPress site builder has already amassed more than 5 million active installations. Its plugin, with a high 4.7-star rating, is one of the highest-rated on WordPress.org.

Over the past years, Elementor has undergone changes to improve its functions and enhance user experiences. The new features Elementor has added in 2021 are particularly noteworthy, as they respond to what users have been clamoring for and what would provide significant improvements in how web creators build their online presence.

Here are five new features that Elementor users should get acquainted with and use to make the most of their online presence. These features have been added with the last two versions of Elementor, which were released only this year.

 

Full Website Kits

Introduced in Elementor’s version 3.3 release, the full website kits feature enables the packaging of an entire website into a single kit to be reused multiple times when creating new but similar websites.

A company that opens new branches in different locations or new product lines, for example, will likely be using the same styles, fonts, color palette, layouts, and other page attributes in the websites of its new branches or products. The full website kit makes it easy to reuse these attributes over and over again.

 

 

Many WordPress site creators get frustrated with the need to start from scratch every time they want to create a new website even though they intend to use the same designs, layouts, fonts, headers, footers, pop-up messages, 404 error messages, themes, and landing pages. As the name suggests, a full website kit contains everything necessary to build an entire website. It serves as a convenient jumping point for the creation of similar websites or micro-sites.

Elementor’s full website kits are designed for professional website creators and newbies in website building, including marketers who need to produce new sites for a campaign rapidly. Even those whose websites were not created using Elementor can also take advantage of the full website kits. This is because Elementor also provides a Kits Library (more on this below).

 

Kits Library

As mentioned, the introduction of the full website kit feature in version 3.3 is supplemented by the Elementor Kits Library. It provides complete site components and attributes web creators can choose from, so they don’t have to start from scratch to complete a project with a short turnover.

 

 

The Kits Library helps those who are not accustomed to using WordPress to create professional-looking and stable websites by providing a guided website building process. This new feature can be accessed by going to the Elementor tab under the WordPress dashboard. It features over 87 full website kits that already have their respective content pages, theme builder parts, pop-ups, and other components.

Elementor says that these readily available complete website kits were created with the latest design trends considered. The different professionally designed full website kits are grouped according to different themes, including business, travel food, events, apparel,  and nongovernmental organizations. With these, anyone should quickly put up a new website and speedily establish a credible online presence.

 

Color Sampler

Another convenient new tool added to Elementor with the release of version 3.3 is the Color Sampler. Making it easy to identify and use colors from existing websites or images, this Elementor-integrated color picker helps web creators in coming up with designs that maintain color consistency, especially when they are building sites based on previous projects.

 

 

Color Sampler is now a native feature of Elementor, which gives it the advantage of being more responsive compared to third-party plug-ins or add-ons. It is very unlikely to create issues in Elementor or be the cause of memory leaks or unusual resource consumption.

 

Custom Breakpoints

Easily one of the most requested features of Elementor, additional custom breakpoints have been introduced with the release of Elementor version 3.4. The website building platform now offers more custom breakpoints to cover a total of seven devices. These devices are as follows: Desktop, Tablet, Tablet Extra, Mobile, Mobile Extra, Laptop, Widescreen.

 

 

As Elementor CTO and Co-Founder Ariel Klikstein shared in a blog post back in December 2020, an overwhelming number of users have been asking for additional custom breakpoints. “In fact, roughly 80% of all features have been developed based on such requests. Additional custom breakpoints have been at the top of the list for quite some time,” Klikstein wrote.

Elementor was originally created to support only two breakpoints. These are for mobile and tablet. The developers were aware of the clamor for additional custom breakpoints, but they encountered challenges particularly in adding the new breakpoints without breaking the code and jeopardizing performance.

The release of version 3.4 signals the apparent resolution of the said challenges. This year, Elementor is ready to provide users with—in the words of Elementor—” pixel-perfect viewport and fully responsive website design and UI.” The website builder now makes it easy for web creators to build websites optimized for the different screen sizes and resolutions of varying device displays.

Elementor says that adding these new breakpoints allows web designers to break design boundaries, especially given the varying screen resolutions and aspect ratios of different devices. The new breakpoints allow creators to select which breakpoints are to remain active,  choose the value of every breakpoint, and scale previews up or down to match what website users prefer to use.

Elementor employs a cascading approach with its breakpoints with desktop as the default screen setting. It also supports the setting of different titles for every breakpoint. Additionally, Elementor’s developers ensured that creators would not have difficulty identifying the styles set on other breakpoints. They have added a new function in the user interface to show the inherited values on attributes such as the margin, background, padding, and images.

Elementor optimized the addition of the new custom breakpoints by rebuilding the responsive control loading mechanism. This change, according to Elementor, has resulted in an improvement in server response by up to 23 percent and a reduction in memory usage by around 5 percent. Additionally, the optimizations have reduced data traffic to the editor board by about 30 percent.

Web creators who plan to use Elementor in building their websites should take full advantage of these additional custom breakpoints to achieve the optimum viewing experiences for any device.

 

Font Awesome SVG Icons

Font Awesome is one of the world’s most popular icon sets. However, some website creators avoid it because of worries over performance issues and the possibility that the icons may not be supported. There is no good fallback if a browser indeed lacks support for an icon set.

 

 

The release of Elementor version 3.4 comes with an upgrade in Font Awesome loading. Previously, whenever Font Awesome icons are loaded, the entire library was used by a website. This is inefficient and allows the website to take up resources unnecessarily. With the shift to the SVG approach, requests are reduced, creating improvements in performance for every KB reduced.

Elementor’s most recent version changes the loading mechanism from an icon into SVG. This results in the reduction of requests and improvements in load time across the board.

Ultimately, the upgrades in Elementor version 3.4 benefit not only website visitors but also website creators. The snappier loading of Font Awesome icons is advantageous to developers who easily get frustrated with responsiveness issues. Likewise, website visitors welcome the faster rendering of icons and page loading time.

To make it clear, Font Awesome icons are not the new feature or function debuting in Elementor Core 3.4. What is being pointed out here is that web creators should stop worrying about the possible issues that can come out of using Font Awesome. Elementor has been upgraded to ensure that this icon set is compatible with the platform and properly shielded.

 

More New Features & Enhancements To Come

Introducing the full website kits, the Kits Library, color sampler, additional custom breakpoints, and the new mechanism for dealing with Font Awesome SVG icons present many benefits or conveniences to Elementor users. These notable new features and functions for web creators further cement the status of Elementor as one of the best website building options.

Even better, Elementor is set to provide more upgrades in the future. Specifically, it plans to streamline page loads by adopting the “load only what you want” concept, reducing the reliance on JavaScript and CSS, and optimizing internal JavaScript and CSS.

“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,” says Eran Alon, Vice-President for Product Marketing at Elementor. For more info regarding Elementor, be sure to check the Elementor review.

 

 

AUTHOR BIO: Gal Shachar is a designer based in Tel Aviv specializing in digital UX, ad media, and branding. He has been active in the industry since 2017, following his studies at Ruppin College. Since then, Gal has worked with many well-known brands and businesses on web design, logo creation, user experience, and branding campaigns.