Elementor 3.13 Beta – Elementor Developers

Hi Elementor beta testers,

We are incredibly excited to introduce our new beta versions, Elementor 3.13. These versions include early access to a free trial of Elementor AI, which will transform the way you build websites. These updates also include a new CSS Grid Container, enhancements to the new Menu widget, additional UI updates to streamline your workflow, and more.

Try out our new beta versions and let us know what you think about our newest additions, which include:

Introducing: Elementor AI – Transform the Way You Build Websites

Boost your productivity and efficiency, while elevating your website’s design and content with Elementor AI. With a native integration to Elementor, the generative AI product empowers you to create and improve your website’s text, and customize your website design using professional custom code, without having to write a single line of code yourself. With contextual prompt suggestions, Elementor AI makes it seamless to create consistent messaging across your site, and translate it to multiple languages. Additionally, Elementor AI’s Code Assistant empowers you to create and add custom code snippets anywhere.

In the first phase, Elementor AI will be available in the following areas:

Content area – in the content (text) area of every widget, there will be a new feature ‘Write with AI’ available in the content area of the widget panel, and in the Editor when highlighting specific text.

Custom HTML – the HTML widget has a new ‘AI Code Assistant’ to help with generating or enhancing HTML scripts.

Custom CSS [available for PRO subscriptions only] – you will be able to use the AI Code Assistant in the Custom CSS of every widget. The AI Code Assistant will generate Custom CSS that is relevant to each widget you use it on, to provide you with relevant results.

Custom Code [available for PRO subscriptions only] – Custom Code in the WordPress dashboard will also have an ‘AI Code Assistant’ to generate custom code snippets, such as Google Analytics code or Facebook Pixel code to measure the impact of your website’s pages.

New Layout Option in Containers – CSS Grid

With Containers, you can achieve infinite design possibilities that accommodate any device, while improving your website’s performance. Now, when you add a Container, you can choose between Flexbox or Grid Containers. Using Grid Containers is ideal for grid-like layouts, helps you maintain the alignment of elements in the Container, and reduces the learning curve associated with the transition from the section-column layout to the container layout.

With Grid Containers, you can choose the number of rows and columns you want to compose your grid, determine the distance between your columns and rows using the Gaps control, and choose whether you want Auto-Flow to go based on column or row. You can also justify and align content and items, similar to how you would a Flexbox Container.

Each cell in the Grid can accept one element, that can be styled and edited as you normally would. To achieve a higher level of sophistication, you can place a Flexbox Container inside the cell of a Grid, and place as many elements as you’d like to, within the Flexbox Container.

To use the Container Grid, make sure to enable the Flexbox Container and the Grid Container features from WordPress Dashboard → Elementor → Settings → Features.

How to Test It:

[Pro] New Styling Capabilities in the Menu Widget

Elementor 3.12 first introduced the new Menu widget, which enables you to create simple, single level menus to sophisticated dropdown content menus. Elementor 3.13 includes two new styling capabilities available in the Menu widget: 

How to Test It:

Elementor Interface Revamp

In Elementor 3.12, we began the gradual roll out of upcoming changes to the Elementor interface. These changes are written in React, which improves performance and allows for future product growth and scale. Additionally, these changes promote Elementor best-practices, resulting in better and more streamlined user experience. 

Experiment: Top Bar Expanded

Elementor 3.13 expands the capabilities available in the Top Bar: 

[Pro] Automatically Populate The Post Excerpt from Your Post’s Content

Up until now, if you used the Post Excerpt widget or dynamic tag, the content would populate dynamically from the Custom Excerpt you had to manually insert in WordPress. WIth this update, you can choose whether you want to automatically populate your Post Excerpt’s content from the first few characters in your post, or from your Custom Excerpt in WordPress. This has been one of the main requests since the introduction of the Loop Builder, and the ability to add the Post Excerpt widget anywhere within your loop item.

How to Test It:

Performance Improvements

In previous versions performance improvements focused on the most common widgets on the main pages. With Elementor 3.13, the focus was shifted to widgets used mainly on inner pages, where site visitors often spend most of their time.

The Author Box, Post Info and Price List widgets display images and user profile pictures, these images now have a lazy load applied to them. This change should improve the initial page load of your inner pages.

In addition, since the Header appears above the fold, it should always load immediately upon page load. Therefore, lazy load was removed from headers to improve the visitor experience when using the Lazy Load Background Images experiment.

Accessibility Improvements

Elementor 3.13 is full of tweaks and fixes that improve your website’s accessibility, as well as the Elementor Editor. In this version, we focused on keyboard navigation, implementing additional ARIA tags, fixing existing ARIA compliance issues, and applying semantic markup.

The menu toggle icon in the WordPress Menu widget can now be opened and closed with the Enter / Space keys, in addition to a mouse click.

The toggle icon in the Table of Content widget can now be focused on, and opened/closed using keyboard keys, and also includes all the relevant ARIA tags. 

The Call to Action widget, Media Carousel widget and the Slides widget all display background images. The background images now have ARIA tags containing the images ALT text.

The Search Form widget received several a11y improvements. First, a hidden label was added to the form for screen readers, a few ROLE and ARIA tags were added and the buttons can now be accessed using your keyboard. Moreover, when using multiple search forms widgets on the page, you no longer have duplicate IDs.

The Gallery widget is now accessible to keyboard users in a unique scenario. When the images have no links (meaning that they are not focusable), but you set them to display the image titles on hover. In this case, keyboard users can’t navigate to the images to see the image text.

Fixed an issue in the Progress Bar widget that led to lower Lighthouse / PageSpeed scores in the accessibility section when inner text is not provided.

The Elementor Editor, where you spend most of your time, is receiving a lot of accessibility attention. Starting with semantic markup, ARIA attributes, landmark elements, making different elements accessible for screen-readers & keyboard-users, and improving the usability for non-mouse users.

General Improvements

Make An Impact: Share Feedback Before Features Are Released

We’re always looking to get to know Elementor customers on a deeper level. If you’re interested in meeting with our team and sharing your insights, feedback, and feature requests you’re welcome to sign up for some quality time with us here. Or download Elementor’s Dev Edition. Talk soon!

How to Install the Beta Version

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

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:

Designated time for release: May 8, 2023 (Estimated)

Many thanks for your support and help!
Cheers,
Elementor Team

This content was originally published here.