3 Tips to Use Elementor 3.4 to Build a Lightning-Fast eCommerce Store

Tips to Use Elementor

Last updated - July 13, 2022

You’re in the WordPress space, which means you’ve heard of Elementor — the most popular drag-and-drop website builder tool with an active community of over 8 million web creators.

Considering how with Elementor, WordPress, and WooCommerce, you can build a fully functional and cost-effective eCommerce store with zero manual code, you’re likely using it to simplify your eCommerce design and development, too.

Last year, Elementor announced the release of version 3.0. It was a major release that introduced a few groundbreaking UX-centric features and improvements.

Throughout 2021 there were more iterations to this version and recently, they’ve rolled out Elementor 3.4 — a release focused on boosting website performance.

In this post, let’s take a look at how you can use the upgrades from these recent releases to build a lightning-fast eCommerce store, quickly and easily.

Tip #1: Use the Design System to Ensure Consistent eCommerce Branding

First off, what is a design system? In simple terms, a design system is the singular source of truth that forms the foundation around which a team designs a website.

That’s how big eCommerce brands like Nordstrom and Walmart manage to deliver a consistent, winning brand experience. No matter what product page, blog post, or marketing asset you visit, you get the same look and feel.

Ensuring coherent eCommerce branding — with all the colors, fonts, and layout across all your landing pages, product catalogs, resource pages, etc. to remain consistent to one design language has traditionally been a tall order.

But with Elementor’s new design system features, you can now design and edit your eCommerce store at a remarkable pace, shortening your time-to-market while hitting brand and visual consistency.

So if you have a team of marketers, designers, and developers, now they can stay in sync with all your website design elements built-in.

Use the new Site Settings panel to see your site-wide configuration tools, such as lightbox settings, theme styles, etc. From any page, go to the left panel, and click on the top-left icon to switch to the Global Settings panel where you’ll find:

  • Site Identity: Customize your cross-site identities such as logo, title, meta tagline, and favicon.
  • Layout: Define your default layout settings like default content width or default page layout.
  • Lightbox: Set the default styling of Elementor Lightboxes.
  • Theme Style: Customize your non-Elementor HTML elements (usually set by the theme) for typography, buttons, images, and forms.
Tips to Use Elementor

In particular, you can edit your global colors and fonts with extreme ease.

Need to change your store’s color scheme for the holidays but don’t wish to go over all of your pages and posts and edit each one of them individually? The new Global Colors feature lets you modify your store’s colors from one place, and have that color updated on all pages.

Start by picking your store’s four basic Global Colors. Next, go into any color style in Elementor, and set it to be one of the four colors. You can also add and name custom colors to the Global List.

Head back to Global Colors, and change any color. Your entire store’s color scheme changes according to the new global color.

Likewise, use the Global Fonts feature to apply typography settings across your website.

You can apply these settings to every widget that contains text and have your own Global Fonts beyond the basic list.

Tip #2: Get a Visual Birds-Eye-View with the New Theme Builder

Elementor is known for its intuitive Theme Builder that lets you design and manage all essential parts of your website (headers, footers, search pages, WooCommerce pages, etc.). You can visually customize hundreds of pre-built designer templates and edit everything from one place.

The recent update to the Theme Builder lets you look at your entire eCommerce store structure visually. Manage which template applies to which areas of your store, and readily edit, update or add content or products as needed.

Select the hamburger icon on the top left of the editor, then click on ‘Theme Builder’. You can also access it from the top admin bar or using the shortcut → CMD/CTRL + Shift + E from anywhere on your site.

Now, you can see all the key parts needed to build a complete website.

If your eCommerce website is new, start with any part to build the theme. Consider building the header or footer first, then move on to designing other parts, and integrate them to any page you’d like.

Tips to Use Elementor

Tip #3: Add Custom Breakpoints and Leverage the Performance Upgrades

While the above two tips were centered mostly around the new features introduced in Elementor 3.0, this final tip is all about the latest 3.4 version that supercharges performance and adds custom breakpoints, enabling the highest standards for eCommerce creators.

As mentioned in the intro, throughout 2021 there were more iterations to the 3.0 version that included performance highlights, such as improved asset loading and accessibility, smaller asset files, a conditionally loaded lightbox, reduced DOM Elements, inline loading, faster page load by minimizing the amount of unused JS and CSS generated, and more.

Furthermore, the new version reduces the JS asset file sizes by dropping support for old browsers (IE) with less code being loaded. 

All of the above mentioned improvements improve server response time by up to 23%, reduce the memory usage by about 5% and save approximately 30% off of data traffic to the Editor load. In other words, it makes everything run faster and smoother.

It also offers an improved Font Awesome SVG icons mechanism along with the biggest highlight of them all — six additional custom breakpoints.

A breakpoint is a “point” at which the content responds to the device’s width. You can now add custom breakpoints for your eCommerce store, giving you more control to optimize for any device. You can adjust the style for each breakpoint to deliver the best possible experience for the visitor.

For example, you might have a product catalog featuring three products in a row but want visitors on mobile to only see two products in a row. With custom breakpoints, you can customize your store’s layout for each device and screen size.

Tips to Use Elementor

Control each breakpoint value individually and visualize how values cascade from one device to another. See the starting values and change the breakpoints accordingly to keep your designs consistent on each screen.

The inherited values for elements like padding, margin, background images, and other numeric controls are displayed as placeholders. Note that you can only change the style per breakpoint for the values that have the device icon next to the title.

All in all, version 3.4 builds upon existing performance upgrades with dramatically reduced page loading scores, streamlined key processes, and the addition of custom breakpoints to fully control your store’s responsive design for a wide range of devices without hurting performance.

Elementor 3.4: Your Element of Speed

The favorite WordPress website builder tool has gone through some major revamps in the last year.

In terms of ranking your eCommerce store at the top of Google search results and providing an excellent user experience to potential customers, speed is the name of the game.

Use these new features and tips to visually (and quickly!) build a lightning-fast online store with consistent branding across your website.

Oh, and if you aren’t yet using Elementor to build your WooCommerce store, check out our step-by-step page builder tutorial to get started right away!

Did you know Elementor has a cloud service that will let you create a WordPress website effortlessly? Check the below video for more details:

Further reading

LEAVE A REPLY

Please enter your comment!
Please enter your name here