Hey Beta Testers!
We’re excited to announce that Elementor 3.27 Beta is now live. This release brings you advanced layouts options, local load for Google Fonts, performance optimizations, support for YouTube Shorts, accessibility enhancements and more.
Make an impact by testing Elementor 3.27 beta and sharing your impressions on the latest additions, including:
- Grid Container layout customization
- Local Google Fonts
- Performance optimizations
- YouTube Shorts support
- & More!
Looking forward to your thoughts and feedback on this update!
Grid Container Layout Customization
Grid Containers in Elementor 3.27 receive a significant upgrade, introducing advanced layout customization options that empower you to create even more dynamic and precise designs. These updates give you full control over how elements span across rows and columns, unlocking new possibilities for grid-based layouts.
Column and row span controls
With the new column and row span controls, you can define how much space a widget or container occupies within a grid. This flexibility enables intricate, creative layouts that were previously cumbersome to achieve.
- Pre-set options for quick adjustments:
A new dropdown in the Advanced Tab offers pre-defined span values, allowing you to quickly adjust an element’s placement and size within the grid. This is perfect for fast prototyping and creating visually balanced designs. - Custom input for precise control:
For greater precision, a custom input field allows you to manually define the span values for both columns and rows. Whether you’re designing a complex layout for a portfolio or a unique product grid, this feature ensures you’re not limited by any pre-set options. - Context specific controls:
The span controls are designed to appear only when relevant, ensuring a clean and efficient interface and they integrate seamlessly into your design process, enhancing productivity without adding complexity.
The addition of column and row span controls represents a significant leap forward in grid layout capabilities. You can now:
- Create visually dynamic layouts, without relying on complex workarounds.
- Ensure elements align perfectly, improving both aesthetics and functionality.
- Save time with intuitive, context-aware tools.
How to Test it
- Activate the “Container” feature by going to the Elementor menu in the WordPress Dashboard → Elementor → Settings → Features, and save the changes.
- Create a new page and start building your design.
- Add a Grid Container to the canvas.
- Drag any widget into the grid layout and navigate to the Advanced tab of that widget.
- Under Grid Item, adjust the column and row span to define your desired grid layout.
- Choose the “Custom” option from the dropdown for column and row span.
- In the revealed input field, add relevant grid properties to adjust your grid item, such as span 2 or 1/4 (using lines in the grid).
- Verify that everything works as expected in both the Editor and the frontend.
Load Google Fonts Locally
Elementor 3.27 introduces a new feature that allows you to load Google Fonts directly from your server instead of relying on external CDN links. This enhancement boosts website performance, enhances user privacy, and addresses a much-requested feature by our community. This new feature is under the “Load Google Fonts Locally” feature which is now on status beta, and inactive by default. To activate, go to Elementor → Settings → Features, and activate Load Google Fonts Locally.
Key Benefits
- Improved Performance:
By replacing external Google Fonts CDN requests with self-hosted font files, this feature significantly reduces page load times and enhances overall site speed. Fonts are now served directly from your server, streamlining the loading process. - Enhanced Privacy:
Hosting fonts locally ensures that no user data is shared with Google during font requests. This provides a privacy-focused experience, helping you comply with data protection regulations and meet user expectations for secure browsing.
How It Works
- Automatic Download:
Upon saving a page or during the first page load, Elementor detects Google Fonts references and downloads the required font files locally. - Self-Hosted CSS:
Font references in your site’s CSS are automatically updated to load from your server, eliminating external requests to Google’s servers. - Cache Management:
Clearing your site’s cache will also remove the self-hosted fonts, and trigger a new automatic download.
By integrating this feature, Elementor continues its commitment to providing tools that enhance website performance, comply with privacy standards, and align with modern web-building practices.
How to Test it
- Go to the WordPress Dashboard, navigate to Elementor → Settings → Features, and activate the “Load Google Fonts Locally” experiment. Save the changes.
- Create a new page and use widgets with the Typography control (e.g., Heading, Text Editor, etc.).
- Ensure the fonts are loading correctly both in the Editor and on the Frontend.
- Optionally, run a Page Speed Test before and after activating the experiment to compare page load performance.
Performance Optimization
Improving performance is one of Elementor’s top priorities, and version 3.27 takes it further by reducing the complexity of your website’s DOM. These optimizations not only improve load times but also enhance SEO and overall user experience by streamlining the code your website generates.
Always Load Styles in the <head>
To address issues with Cumulative Layout Shift (CLS) on the first page load, Elementor now ensures styles are always loaded in the <head> rather than at the end of the <body>. Previously, styles were loaded in the footer if no cached assets were available, leading to layout shifts during initial rendering. With this update, styles are applied earlier in the loading process, improving visual stability, reducing CLS, and ensuring a smoother user experience even on first visits.
Optimized markup experiment
As part of the Optimized Markup experiment, in version 3.26, we removed an extra <div> from almost all widgets, except six. Now, with version 3.27, all Elementor widgets are lighter with one less <div>. Widgets now optimized as part of 3.27: Spacer, Menu, Loop, Table of Contents, Form, and Hotspot. Each of these widgets now produces a leaner DOM structure, ensuring faster rendering and reduced resource consumption.
(Pro) Search Widget markup improvements
The Search widget has also been refined to address redundant HTML elements that were previously created when the Submit Button text was empty. This change eliminates unnecessary <span> elements, reducing DOM size and improving rendering efficiency.
Conditional Loading of Swiper.js
In previous versions Swiper.js loaded on all pages, regardless of whether it was needed. Elementor 3.27 loads the script conditionally based on widget dependencies, reducing unnecessary assets and improving page load times.
YouTube Shorts Support
With Elementor 3.27, the Video widget now fully supports embedding YouTube Shorts, enabling seamless integration of vertical video content into your designs. This highly requested update ensures that websites can adapt to the increasing demand for mobile-friendly, short-form video formats popularized by platforms like YouTube Shorts.
The integration allows you to embed YouTube Shorts just as easily as standard videos, by pasting the YouTube Short link and then adjusting the aspect ratio to 9:16 in the Style tab. This enhancement supports portrait video rendering and improves the visitor experience by ensuring a mobile-first playback experience.
Accessibility Enhancements
As part of Elementor 3.27. We’re introducing new features to make your websites more inclusive for all users:
- YouTube Caption Support: Enable default captions for embedded YouTube videos, making your content accessible to users who rely on subtitles or have hearing impairments.
- (Pro) Consistent Carousel Markup: All carousels and sliders now follow standardized HTML for better screen reader compatibility.
- (Pro) Search Widget Accessibility: When the submit button contains only an icon (and no text), an
aria-label="Search"is now automatically added, ensuring screen readers can interpret the element correctly. - Removed Unnecessary aria-required Attribute: We’ve removed the unnecessary aria-required attribute from elements that already use the required attribute. This adjustment eliminates redundancy and ensures compliance with modern web standards, providing cleaner, more accessible code for the Form widget.
- Descriptive Names for Links in the Icon Box Widget: We’ve addressed a common accessibility issue in the Icon Box widget, where linked icons lacked a discernible name. This caused warnings in tools like Lighthouse and created potential usability challenges for screen readers. To resolve this, we’ve added an aria-label to the icon link, providing a descriptive name that matches the widget’s content.
These improvements make your websites more accessible, helping you reach a broader audience and comply with accessibility standards.
(Elementor AI) AI Motion Effects
We’re introducing animations powered by AI assistance, a powerful feature that allows you to create animations effortlessly with a prompt. Creating animations for your elements can often feel repetitive and time-consuming. We’re here to make the process smoother. Simply describe your desired animation and Elementor AI will create it for you.
- How It Works:
Describe the desired animation or motion effect in plain text (e.g., “fade in,” “slide left on scroll”), and Elementor AI will automatically apply the appropriate settings using Elementor’s JSON format. - Key Animation Types:
- Entrance Animations: Generate smooth transitions like fade-ins or slides based on your description.
- Scroll Effects: Add scroll-triggered or mouse-tracking effects like “move up on scroll” or “tilt with mouse movement.” Customize speed, direction, and effect scope for a tailored experience.
- Hover Transform: Define hover effects such as “zoom on hover” or “rotate on hover” for engaging, dynamic interactions.
With AI-driven animations, you can achieve the precise animation effect much quicker, saving time and effort while enhancing user engagement.
How to Test it
- Go to the Advanced tab of any widget in your design.
- Locate the Animate with AI button at the top of the Motion Effects section and click on it.
- A prompt modal will appear, asking you to write the animation you want or select from a suggested option.
- Once you’ve written or selected an animation, click Generate to let the AI create the animation.
- Review the animation changes suggested by the AI. You can either apply the changes to the widget or try another prompt if needed.
- After applying the animation, the relevant Motion Effects controls will be automatically configured and fully functional as suggested by the AI.
- Verify the animation works as expected both in the Editor and on the frontend.
Additional Updates
Landing Pages Feature Deprecated: Marked inactive for new sites in version 3.22, and now in 3.27 a deprecated tag has been added. Existing pages won’t be affected, but we recommend avoiding its use moving forward. More details on the deprecation process will follow in later beta versions.
How to Install the Beta Version
If you still haven’t enabled beta testing in Elementor, please follow these steps:
- Go to Elementor > Tools > Versions
- Enable the beta tester feature
- Go to Dashboard > Updates and update to the latest beta version.
- This will get you set up to test the new Elementor 3.26 Beta.
Notes
As we make changes to our GitHub in an effort to keep it organized, improve the way we deliver information to you, and our ability to review your feedback, please follow the instructions below when reporting bugs, or making feature requests:
- To report a bug related to this beta version – open a new Bug report
- For feature requests – open a new Feature request issue
- For other comments specifically about this beta version – comment here
Designated time for release: January 20th (Estimated)
Many thanks for your support and help!
Cheers,
The Elementor Team
