🔥 Elementor v3.27 Beta Release 🔥

[avivu]

===========

Beta Version Updates - Please Read Below!

===========

 

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 hearing 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:

1. Activate the “Container” feature by going to the Elementor menu in the WordPress Dashboard → Elementor → Settings → Features, and save the changes.
2. Create a new page and start building your design.
3. Add a Grid Container to the canvas.
4. Drag any widget into the grid layout and navigate to the Advanced tab of that widget.
5. Under Grid Item, adjust the column and row span to define your desired grid layout.
6. Choose the "Custom" option from the dropdown for column and row span.
7. 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).
8. 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.
• 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:

1. Go to the WordPress Dashboard, navigate to Elementor → Settings → Features, and activate the "Load Google Fonts Locally" experiment. Save the changes.
2. Create a new page and use widgets with the Typography control (e.g., Heading, Text Editor, etc.).
3. Ensure the fonts are loading correctly both in the Editor and on the Frontend.
4. 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 rather than at the end of the . 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

• Automatic Download: 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:

1. Go to the Advanced tab of any widget in your design.
2. Locate the Animate with AI button at the top of the Motion Effects section and click on it.
3. A prompt modal will appear, asking you to write the animation you want or select from a suggested option.
4. Once you’ve written or selected an animation, click Generate to let the AI create the animation.
5. Review the animation changes suggested by the AI. You can either apply the changes to the widget or try another prompt if needed.
6. After applying the animation, the relevant Motion Effects controls will be automatically configured and fully functional as suggested by the AI.
7. 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.

---

More Improvements

Free version

• New: Introducing advanced layout customization for Grid Container with column and row span controls for precise grid-based designs (✅ Enhanced Grid Control in Elementor 🌐 #25256)
• New: Introducing local loading of Google Fonts to improve performance and enhance user privacy (🔃 🚀 Feature Request: Make Elementor fully GDPR compliant #4544, ✅ 🔗 Host Google Fonts Locally (Related to #4544) #19966, ✅ 🔗 Allow hosting Google Fonts locally with Elementor Pro Custom Fonts (Duplicate of #19966) #23932, ✅ 🔗 Download Google Font to local Custom Fonts (Duplicate of #19966) #21716)
• New: Added the option to animate with AI motion effects for creating AI-generated animations
• Tweak: Add 'YouTube shorts' support in the video widget (✅ Allow YouTube Shorts in Video Widget #24220, ✅ 🔗 🚀 Feature Request: Add support for "YouTube Shorts" URLs in Elementor video components (Merged with #24220) #20330)
• Tweak: Added Safari browser compatibility for the 'Fit to Size' option in the Icon Widget (✅ 🐞 "Fit to Size" Icon's option breaks alignment on Safari iOS #27679)
• Tweak: Moved style loading to the head instead of the footer to improve CLS
• Tweak: Enabled conditional loading of Swiper.js based on widget dependencies to reduce unnecessary assets and improve page load times
• Tweak: Removed the elementor-widget-container div from the Spacer Widget as part of the Optimized Markup experiment to improve HTML structure
• Tweak: Improved keyboard accessibility for the nested container presets area
• Tweak: Added accessible and descriptive names to the icon link in the Icon Box widget
• Tweak: Optimize background video CSS by merging elementor-html5-video and elementor-background-video-hosted into a single class
• Tweak: Added the ability to disable the Element Cache
• Tweak: Removed animation class when no animations are set in Icon and Icon Widget widgets
• Tweak: Added support for captions on YouTube videos
• Tweak: Removed the limitation restricting heading hover color styling to links only
• Tweak: Removed aspect-ratio workaround for unsupported Safari browsers
• Fix: Switching between images in a lightbox on responsive mode displayed a tall blue rectangle (✅ 🐞 Switching between images in Gallery lightbox showing ugly rectangle on mobile #12830)
• Fix: Image editing tools with AI are not working when launched in WooCommerce
• Fix: Improved HTML markup validity by removing the type attribute from <script> tags

Pro version

• Tweak: Removed the elementor-widget-container div from the Menu, Loop, Table of Contents, Form, and Hotspot widgets as part of the Optimized Markup experiment to improve HTML structure
• Tweak: Reduced DOM size by optimizing the submit button markup in Search widget
• Tweak: Moved style loading to the head instead of the footer to improve CLS
• Tweak: Enabled conditional loading of Swiper.js based on widget dependencies to reduce unnecessary assets and improve page load times
• Tweak: Standardized navigation elements like arrows and bullets across all carousel and slider widgets for improved accessibility
• Tweak: Improved accessibility when the submit button has only an icon and no text in Search widget
• Tweak: Removed load_plugin_textdomain() function from Elementor Pro

---

How to Install the Beta Version

If you still haven't enabled beta testing in Elementor, please follow these steps:

1. Go to Elementor > Tools > Versions
2. Enable the beta tester feature
3. Go to Dashboard > Updates and update to the latest beta version.
4. This will get you set up to test the new Elementor 3.27 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 beta versions - open a new 🐞 Bug Report
• For feature requests - open a new 🚀 Feature Request
• For other comments specifically about this beta version - comment here

Designated time for release: January 20th, 2025 (Estimated)

Many thanks for your support and help!

Cheers,
Elementor Team

[toineenzo]

Great!! I'll be sure to test it out

[toineenzo]

Hi! I already tested the beta out and haven't encountered any bug yet. But I still need to test it more.
The first small thing I noticed: with the local Google fonts experiment enabled, the following code is still is listed in the frontend code. It preconnects to the Google servers:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
It doesn't seem to cause any external network activity in my console, it loads the local fonts perfectly. But it should only be needed for backend, right?

[rami-elementor]

Thank you very much for reporting this bug! We will fix this in the next beta release.

[KingGrizzly]

The span support is a huge step forward with grid, can't wait to try it.

[nicholaszein]

You can use the Custom value to define your own span settings just like you would setting rows and columns! For example:

2 / span 2

[KingGrizzly]

This is awesome! I'm so excited to use and teach this.

The "add widget" dotted line box can be confusing, please consider this quick demo showing how it make things look misaligned in the editor. I wonder if toggling the visibility of that '+' box on or off might be a good option?

[KingGrizzly]

@nicholaszein These grid containers are so good. I made a YouTube video. Here is a link to a timestamp where I do point out the alignment drift that happens with the widget add icon and how it goes away if it is hidden: https://youtu.be/AdX63kDWI3U?feature=shared&t=466

[nicholaszein]

Thanks for sharing your feedback @KingGrizzly! I'll pass it along to the team! 🙏

[KingGrizzly]

Your team is really starting to crush it!

[Henzxon]

This is perfect and the update I've been waiting for! So excited with the new Grid Feature!

[HeinrichMarketing]

had a talk a time ago with one of your guys... told exactly everything in this update.. .thank you very much. have tried it already, everything seems to work.

[KingGrizzly]

Anyone else getting an "Update failed: Download failed. Not Found" when trying to update to 3.27.0-dev1? I can update the dev plugin, and Pro, but not core. Thanks.

[nicholaszein]

Go to The WordPress Dashboard > Updates, and update from there. I would recommend always doing this for any plugin or theme.

[KingGrizzly]

Sure, thanks. For some reason, I still get this:

After I click the button:

[KingGrizzly]

Perhaps there is a zip folder I could upload instead? I'm not sure where to find that in the repo.

[nicholaszein]

Don't click that button. Click on "Check again" and wait for the download to appear. You might need to click on it a couple of times. That notice won't download the beta version, it will look for the latest stable version, which you already have installed.

If you wish, you can download the Elementor beta directly from WordPress:

1. Go to https://wordpress.org/plugins/elementor/#advanced
2. Scroll down until you see a field for you to select a version of Elementor
3. Select the version 3.27.0-beta1 (or -beta2, -beta3, etc.)
4. Click on Download to get the zip file for this version
5. Go to your WordPress Dashboard > Plugins > Install plugin and upload the zip file.
6. WordPress will ask you if you want to replace files, just confirm and let it replace them.
7. Update the Database once the plugin is updated.

[KingGrizzly]

"Check again" didn't seem to work. I tried all day. The manual upload has worked. Thanks!

[momo-fr]

Hi, 2 errors with loop grid with alternate template :

Fatal error: Allowed memory size of 805306368 bytes exhausted (tried to allocate 4096 bytes) in /Users/jean/Local Sites/elementor/app/public/wp-content/plugins/elementor-pro/modules/loop-builder/traits/alternate-templates-trait.php on line 349

Fatal error: Allowed memory size of 805306368 bytes exhausted (tried to allocate 24576 bytes) in /Users/jean/Local Sites/elementor/app/public/wp-includes/class-wpdb.php on line 2316

Website with 768MB allocated.

[nicholaszein]

Hi @momo-fr!

Thank you for reporting this. Can you share your Elementor System Info here? Follow this guide.

[m1ga]

Local fonts:

Cache Management: Clearing your site’s cache will also remove the self-hosted fonts, and trigger a new automatic download.

Is there way to disable that and keep the fonts all the time? Would it be better to have the fonts appear in the "Custom Fonts" manager and open that up for the free version. Then you have more control when to remove the font or not.

[nicholaszein]

Hey @m1ga, how's it going?

Thank you for sharing your feedback and showing interest in beta-testing! 🙏

Unfortunately, we cannot open Custom Fonts for the free version. But I understand your concern. The reason why we decided to re-download Google Fonts when the CSS & Data is Regenerated is because any Google Font may be selected anywhere while editing any document. This requires ensuring the correct and latest available files are downloaded. The Custom Fonts interface works quite differently and cannot handle this scenario. In this case we recommend you install the custom fonts manually.

[hitsgee]

This could be a stupid question so apologies in advance. If fonts are stored locally and the font is updated by Google (they do tweak and improve them occasionally especially with new font releases) is there a mechanism that routinely refreshes the local font? Is this cache controlled?

[nicholaszein]

Hi @hitsgee!

Thank you for asking this question and showing interest in this beta-testing! 🙏

It's actually a great question, and I just answered @m1ga something related!

Basically, every time Elementor's CSS & Data is Regenerated, these fonts will be downloaded again, ensuring they are always up-to-date. Since Elementor Regenerates the CSS & Data periodically already, this will be handled then. So, no worries about that aspect of the integration! 😉

[hitsgee]

Awesome I was hoping this would be the case :)

[KingGrizzly]

I think I may have found an issue with grid columns on mobile. Please watch and confirm.

https://www.loom.com/share/11a47accc8624fca97d8c08159743e28?sid=0787d976-fd4d-48a5-83e7-3436e7210bbd

[Daveden2]

@rami-elementor FYI: Here's a further 2 minute exploration showing how adding a widget seems to cause the mobile grid to behave oddly: https://www.loom.com/share/1ddedb6193bb4142b9ee40ef3bdbab91?sid=7606378d-b2c3-426c-a2a2-0fc6fe94bc1f

I've never trusted the grid outline in the elementor editor. It tends to feel buggy to me so I always turn it off.

Sometimes, if you turn the grid outline off and on, then it'll readjust.

[KingGrizzly]

Thanks @Daveden2 . I had similar thoughts, but you can see at 1:18 I changed the widget to span to column 4 on a 6 column parent grid and it doesn't work correctly.

[Daveden2]

@KingGrizzly when I tried it, I got the same bug but I got the outline working properly by simply toggling the Grid Outline off and on.

[nicholaszein]

Thanks for the videos @KingGrizzly.

@Daveden2's assessments are correct. Grids will try to adjust to what you declare.

Another point is that in your video, we can see clearly that the gap is higher than the width left for each column, and that the Heading widget is overflowing because there is not enough space. This is also a common behavior of CSS Grids.

We will, however, investigate this to see if we can improve the reliability of the outlines in the canvas.

Thank you! 🙏

[KingGrizzly]

@nicholaszein @Daveden2 Ah, okay. Turning the outlines on and off does help and I'll have to be mindful of gap widths. Thanks guys!

The outlines and the '+' box can get confusing.

[vcpaige]

Love the advanced grid controls! I have one suggestion. Once I change the Column Span or Row Span on tablet or mobile, I can no longer remove my selection. So let's say I decide to set a different Column Span on tablet but then change my mind and want it to just inherit what the Desktop is set to, I can't. I'm forced to make a selection.

[KingGrizzly]

I think this may be similar or the same as the issue here: https://www.loom.com/share/11a47accc8624fca97d8c08159743e28?sid=0787d976-fd4d-48a5-83e7-3436e7210bbd

[doronwolf]

Hi @vcpaige thank you very much for your valuable feedback, I'll try to see if we can promote an option to remove selection (meaning; restore the default so the tablet will inherit the desktop instead of the selected option)

[louiswol94]

We added a new option "Default", when you click on this option in responsive mode, it will clear the selection and re-inherit from the parent.

[Daveden2]

I noticed that all containers now have grid-column and grid-row CSS properties with a 3-class specificity, making it almost impossible to work with utility classes.

.elementor-7 .elementor-element.elementor-element-169eb53{
...
    grid-column: span 1;
    grid-row: span 1;
    --z-index: 2;
}

I guess @layers should be at the top of my wishlist now.

Previously, I could circumvent Elementor's grid property interfering with my CSS framework by setting the container to flex. However, that no longer seems viable.

[nicholaszein]

Hi @Daveden2! Thank you for the feedback.

We apply a lot of properties to the container in this way, and we specifically declared these two individually to avoid layout issues we identified during QA.

While we understand you'd prefer less specific declarations, we do consider these properties necessary.

We will still check this out to see what can be done to reduce the specificity.

Thank you for raising this! 🙏

[Daveden2]

@nicholaszein, to my limited knowledge, I see two options.

1. There should be a "default" option for each breakpoint that essentially doesn't set any value, because you don't always need to set a span to every grid child. This would also solve the problem raised by @vcpaige.
2. Use @layers so that our custom CSS can override Elementor's highly specific CSS rules. I hope this will be implemented in the v4 editor.

I noticed that if you change the grid-column to "custom" and leave the value blank, a span custom is applied. Is this expected?

[nicholaszein]

This is not expected. We'll need to verify this. Thanks for reporting!

As for the other points, we will discuss this and verify if there is a viable alternative.

[louiswol94]

I noticed that all containers now have grid-column and grid-row CSS properties with a 3-class specificity, making it almost impossible to work with utility classes.

This will be fixed :) Thanks!

[avivu]

Hi all,

We just released Elementor Free v3.27 Beta 2.

The versions include the following:

Free version

• Tweak: Removed preconnect link to Google Fonts CDN when Google Fonts are loaded locally
• Tweak: Enhanced functionality for handling empty value span columns and rows and general fixes in Grid Container
• Fix: Animate with AI controls are not vertically aligned properly

Pro version

No change.

–

Thank you!

[Daveden2]

Great! Thanks for the addition of the default option for grid-column and grid-row!

However, it appears that we still get the span custom when we use an empty custom value. Although, I'm not sure what the best solution should be for that scenario.

[nicholaszein]

Thanks for the feedback @Daveden2 !

We are still investigating ways for reducing the specificity of these two new properties. And when we do that we will see if we can prevent the word custom from being printed in the property. For now what will happen is that it will be an Invalid declaration.

Once we find a good solution, we'll release a patch. 😉

[nicholaszein]

Hi @efintina !

Thanks for reporting this. Can you confirm you're referencing the new option to automatically download Google Fonts? Just so we are on the same page.

Some file formats and fonts may not be fully compatible with text stroke. This is something known in CSS, especially for some variable fonts such as Roboto.

However, we will investigate this, and if we find something to improve, we'll release a patch.

[doronwolf]

Hi @efintina are you sure this is related to the new option to automatically download Google Fonts?
I believe this issue was there in earlier versions too and it's happening per font (meaning: some fonts display text stroke well while others don't)

[efintina]

Sorry for my late reply. I was away from the computer for a few days. After some additional testing I came to the conclusion that you are absolutely right. It seems that the problem is related to the font I was using. It seems strange that I did not notice the problem until now. Thank you very much for your help.

[nicholaszein]

Hi Beta Testers! 👋

Hey everyone!

Elementor and Elementor Pro version 3.27.0 were released to the public! 🚀 🥳 🙌

We appreciate you taking the time to share your feedback and contribute with your reports and suggestions! 🙏

Special thanks go to these contributors who helped make this release possible:

• @toineenzo
• @KingGrizzly
• @Henzxon
• @HeinrichMarketing
• @momo-fr
• @m1ga
• @hitsgee
• @Daveden2
• @vcpaige
• @efintina

See you on the next one! 💪 😉

Cheers 🥂

Changelogs of Elementor Core and Pro + Additional Information:
Elementor Core
Elementor Pro
Developers Update