In the last few weeks, we worked on stabilizing the UB Atoms theme as well as adding some new features. The 1.0.2 release today brings a complete improvement of the Color configuration, integration of the latest UB Mega Menu v1.2.4, optimization for Core Web Vitals, and compatibility updates to Magento 2.4.2-p1.
Here’s a short overview of the most important changes.
Improved Color, Primary/Secondary Button configuration
UB Atoms v1.0.2 improved the whole theme’s Colors including:
- Base colors that set predefined global colors for Background, Border, Text, and Link.
- Brand colors for Primary, Secondary, and semantic colors like Success, Warning, Alerts, etc.
- Specific sections’ colors for Top Bar, Header, Mega Menu, Footer, Product Labels, Primary/Secondary Buttons.
You can use the UB Atoms’s default predefined colors or change them by selecting any custom color to be used from the Color Picker (where you can select a new color from the existing color palette or specify a new custom color of your choice). You can learn which elements are impacted by the global color palette via this user guide.
Updated UB Mega Menu v1.2.4
Two weeks ago, we introduced UB Mega Menu module v1.2.4 packed with a new handy feature -- enabling the off-canvas menu on Desktop by default.
In this release, UB Atoms integrates the latest UB Mega Menu v1.2.4 so you can take full advantage of the flexibility of native off-canvas layout on Desktop. The off-canvas menu refers to a navigation type where the main menu appears on the side of your Magento site instead of the top. When you click the hamburger icon, a panel slides in from the left.
If it fits with your project, you can set up the off-canvas menu (vertical/accordion/drill-down) on the Desktop with ease. You can also use UB Mega Menu to manage the sidebar or footer menu if you choose to.
Having well-structured mega navigation can be a real pain and there are no strict guidelines for these menus. This step-by-step guide will walk you through the various options for this key feature of your storefront.
Optimizing UB Atoms for Core Web Vitals
Google has recently rolled out a change in the way it ranks sites in search results that includes a set of three new performance metrics, known as Core Web Vitals.
The Core Web Vitals currently focuses on three aspects of the user experience:
- (Loading) LCP: Largest Contentful Paint
- (Interactivity) FID: First Input Delay
- (Visual Stability) CLS: Cumulative Layout Shift
Since the new Google algorithm update is all about optimizing online stores for a better user experience, we improved UB Atoms following Google guidelines here.
Fully compatible with Yireo_WebP2 module
We all know that the faster the shop is, the higher Google Lighthouse Score will be. And the images are an important part of performance optimization. Besides the CDN (Content Delivery Network) solution, there’s an easier way to optimize the images -- the Yireo_WebP2, an open-source module by Jisse Reitsma. The module automatically transforms traditional image formats JPG or PNG into WebP -- an image format developed by Google.
UB Atoms v1.0.2 has been tested and fully compatible with the Yireo_WebP2 module. Once you install the module (following this user guide), it helps generate optimized WebP images automatically based on the corresponding JPG or PNG on your Magento 2 site (Just one note, the module does not support the background images by default). You can go deeper into the WebP image format and the Yireo_WebP2 module here.
Magento 2.4.2-p1 Ready
UB Atoms v1.0.2 has been tested and verified to work with the latest Magento 2.4.2-p1.
Magento 2.4.2 and 2.4.2-p1 introduce not only performance and security enhancement but also platform improvements. This release includes over 280 new fixes to core code and 35 security enhancements including the support for the SameSite attribute for all cookies. You can learn more details via the official Magento release note.
Send us your feedback
If you have any ideas or features that you’d like to see, we’d be more than happy to hear about them. Please leave your feedback and share your experience in the comments or get in touch with us via info (at) ubertheme.com.