What’s New in Elementor 3.14 Update
Do you want to know what’s new in Elementor 3.14 update?
If yes then in this article we have shared everything you need to know.
Elementor 3.14 update is for the free version of the plugin.
And this means anyone using Elementor page builder will get access to the new features and improvements included.
As far as the new features are concerned, AI for image creation, preview for Global Styles and more has been introduced.
Along with this Editor Top Bar, Image and Image Box widget have received a few improvements.
Keeping this in mind, if you are looking to get started with Elementor then you can do so by clicking our SPECIAL LINK or the button below
Elementor 3.14 Update
Before we learn more about Elementor 3.14, it is important to know that this update was released on June 19th 2023.
And below are the topics covered
Elementor AI for Images
In our previous article on Elementor 3.13, we have briefly touched on Elementor AI for Text.
And in Elementor 3.14, a free trial of Elementor AI for Images has been introduced.
Using Elementor AI for images you will be able to create and enhance images.
On top of this you will be able to create variations for already existing images on your site.
To see this feature, you will have to create a new page or post using Elementor or edit and existing one.
And doing this will take you to the Elementor editor.
In the next step you need to add a widget that uses images and you will find Create with AI option when choosing an image.
Before we move forward, it is important to know that Elementor AI for Image option is available in the Background type option under Styles Settings for sections, columns and containers as well.
See the below screenshot for reference.
Now to use the free trial of Elementor AI for Images, you will have to click Create with AI and a modal will appear asking you to Connect.
On clicking Connect, it will ask you to connect your site with Elementor account.
And on a successful connection, it will redirect you to your WordPress dashboard.
In the next step you need to Agree with TOS and Privacy Policy and click Get Started.
On clicking Get Started, it will take you to the Elementor AI for Images and here you will see an option to describe your image on the left.
Here you will have to enter your prompt for generating an image in the space provided.
Also, you will notice Enhance Prompt option inside the box.
On clicking this option, it will make your prompt more specific and detailed.
You can compare the below screenshot with the one above.
Once you are satisfied with the prompt, the next option allows you to select an Image Type and below are all the options.
- None
- Photographic
- Background
- Digital Art
- Handmade
- 3D
Here you will have to select an option by clicking the dropdown.
In the next step you will have to choose a Styles and these options will be based on your image type selection.
Once you are done till here, the last step is to select Aspect Ratio and below are all the options you will get.
- Square (1:1)
- Landscape (3:2)
- Landscape (4:3)
- Landscape (16:9)
- Portrait (2:3)
- Portrait (3:4)
- Portrait (9:16)
After you have set the aspect ratio, you need to click Generate Images.
And within a few seconds, it will show you all the images on the right.
Please note- While testing, the previous image generation was cancelled somehow and as a result of it the prompt is new and the images are different.
To insert any of these images, all you have to do is hover your cursor on the image you want to use and it will show you use Image option.
Clicking it will add the image in Elementor canvas.
Remember, you will find this image in WordPress Media Library and hence it can be used in other places as well.
In case you want to make changes to any of the AI generated images then you need to click the edit icon that appears when you hover your cursor over an image.
Clicking Edit will show you additional options such as
- Expand Image
- Generative Fill
- Resize
- Variations
You can make changes as per your requirements.
Before we move forward, it is important to know that if you have Elementor Pro license then you will see the AI for Images option in premium widgets as well.
In case you want to buy or upgrade to Elementor Pro then you can use our SPECIAL LINK.
Another thing you need to know is that Elementor AI for Images and Text is available as a free trial.
And to use it you will have to create a free account on Elementor and then connect it to your site.
In case you want to buy Elementor AI or upgrade then you will have to choose one of the Elementor AI plans.
And for that you can use our SPECIAL LINK and below is the pricing.
- AI Starter- 18,000 credits/ year
- AI Power- 50,000 credits/ year
Add Widgets with a Click
After Elementor AI for images, the next improvement that you will come across in Elementor 3.14 is the ability to add widgets on canvas with just a click.
If you have been using Elementor to create pages, posts, sections, templates or even complete sites then you must be familiar with the fact that you can add widget by dragging and dropping them on canvas.
- Before Elementor 3.14
As a result of this, Elementor is categorized as a drag and drop page / website builder.
In Elementor 3.14 update, the process of adding widgets has been improved and now you will be able to add widgets by clicking.
See the below gif for reference
Keep in mind, drag and drop still works and adding by clicking is another / alternative way.
Global Styles Preview
Global Styles in a feature that was introduced in Elementor 3.0 update.
And using it you can set Global Colors and Fonts for your site.
In Elementor 3.14, this feature has received an improvement and now you will be able to Preview Global Styles with just one click.
Global Styles Preview has been introduced as an Experiment in Elementor 3.14 and it comes disabled by default.
To activate Global Styles Preview in Elementor, you will have to navigate to Settings under Elementor in your WordPress dashboard.
And here you will have to click the Features tab.
On clicking Features, it will show you all the ongoing experiments and stable features.
Under ongoing experiments you will come across Global Style Guide.
To enable you need to select Active in the dropdown and then Save changes.
Once you have successfully activated this feature, you need to head over to Elementor Site Settings.
And on clicking you will come across Global Colors and Fonts under Design System.
When you will click any of these settings, a new Style Guide Preview toggle will appear on top.
- Global Colors
- Global Fonts
This toggle comes enabled by default and it will show you a Preview of the Global Colors and Fonts you have set on the Elementor canvas.
- Preview of Global Color
- Preview of Global Fonts
Remember, when you will disable Style Guide Preview, it will show you Page / Post you are creating.
Container Type Dropdown
The next change that you will come across in Elementor 3.14 is that the Container Type Dropdown has been moved to the top.
To see this, the first step is to activate Flexbox Container in Elementor.
And for this you will have to navigate to Settings under Elementor in your WordPress dashboard and then click Features.
On clicking Features, it will show you all the ongoing experiments followed by stable features.
And here you need to locate Flexbox Container and then select Active in the dropdown and save changes.
Before we move forward, it is important to know that on enabling Flexbox Container, you will not find inner section widget in Elementor editor as you cannot use Containers with Sections and Columns.
Remember, you will be able to edit / make changes to existing sections / posts / pages using sections and columns.
In the next step you need to activate Grid Container in Elementor.
And for this you will have to search for Grid Container under ongoing experiments, select Active in the dropdown and save changes.
Once you have successfully enabled both these features, you need to head over to Elementor editor and add Container widget.
On adding, you will notice Container Type Dropdown has been moved to the top.
See the below screenshot for reference
- Before Elementor 3.14 update
- After Elementor 3.14 update
Editor Top Bar in Elementor 3.14
After Container Type dropdown, the next few improvements that have been released in Elementor 3.14 update is for the Editor Top Bar.
Editor Top Bar was introduced in Elementor 3.12 update and it is a place where you will find all the common actions that you perform on a page.
This feature has been released as an experiment and comes disabled by default.
To activate Editor Top Bar in Elementor, you will have to head over to Features under Elementor Settings in WordPress dashboard.
In the next step you will have to select Active in the Editor Top Bar dropdown and Save changes.
There are quite a few changes that you will come across and below we have touched on each.
Manage Website
The first change that has been introduced for Editor Top Bar in Elementor 3.14 is the Exit To option replacing Manage Website.
To see this change you need to click Elementor icon on the Editor Top Bar and you will find this option at the very end.
See the below screenshot for reference.
- Before Elementor 3.14 update
- After Elementor 3.14 update
Keep in mind, Manage Website option used to take you to your WordPress dashboard which means Exit To preference that you have set was not working.
With Exit To replacing Manage Website, now you will be able to exit to All Posts, WordPress dashboard or the WordPress editor of the Post you are editing based on your selection in Preferences.
Add New Page
The next new option that you will come across in Editor Top Bar in Elementor 3.14 update is the introduction of Add New Page option in recently edited documents list.
To see this change you need to click the document name dropdown and it will show you Add New Page option.
- Before Elementor 3.14
- After Elementor 3.14
On clicking this option, it will add a new page in Elementor.
Please note- As of now if you are creating / editing a post using Elementor and you click this option then also, it will add a page and not post.
Loading a document without reloading
While we are on the topic of recently edited documents in the Editor Top Bar, it is important to know that this feature has received an improvement in Elementor 3.14.
And in this when navigating to any other recently edited document using the Editor Top Bar, it will open without reloading.
See the screenshot below for reference.
- Before Elementor 3.14 update
- After Elementor 3.14 update
Page Settings
Moving on from the Editor Top Bar, the next improvement that has been introduced in Elementor 3.14 is for the Page Settings.
There are quite a few changes and below we have touched on each briefly.
Addition of Comment Control
If you have been creating pages and posts using Elementor then you must be familiar with the fact that- to enable / disable comments on a specific page or post you had to visit the WordPress editor.
This means comments control was missing from Elementor Page Settings.
In Elementor 3.14, this option has been added to the Page Settings.
And to see it you will have to click the gear icon in the Elementor side panel.
In case you have the Editor Top Bar enabled then you need to click Gear icon next to document name.
Once you are in the Page Settings, you will find Comments Control below Order.
See the below screenshot for reference
- Before Elementor 3.14 update
- After Elementor 3.14 update.
Using this setting you will be able to allow / disallow comments on specific pages and posts with just one click.
Document Name
The next improvement that has been introduced in Elementor 3.14 for Page Settings is the simultaneous change of page name.
This basically means, now when you will update the title of a page, it will simultaneously change in the Editor Top Bar as well.
You do not have to save or update the page to reflect changes.
See the below screenshot for reference
- Before Elementor 3.14 update
- After Elementor 3.14 update
Please note- In the first gif we had to click Save to reflect changes while in the second Title automatically updates when typing.
Order Control
After the document name change, the next change that you will come across in Page Settings is the addition of Order Controls in Elementor 3.14.
Using this option you will be able to assign numerical values to a page and this is helpful when arranging pages in hierarchy.
Remember, you will not find this option in Post Settings.
Tabs widget in Elementor 3.14
If you have been following the development of Elementor then you must be familiar with the fact that Tabs widget was completely revamped in version 3.10.
And to activate new Tabs widget, you will have to enable multiple features.
For this you need to head over to Features under Elementor Settings in WordPress dashboard and enable Flexbox Container.
In the next step you have to activate Nested Elements in Elementor.
And for this you will have to select Active in Nested Elements dropdown and Save changes.
Once done, it will give you access to the New Tabs widget and you will no longer be able to use the older version.
Keeping this in mind, there are quite a few improvements that have been introduced and below we have covered each.
Breakpoints
The first improvement that has been released for Tabs widget in Elementor 3.14 is the addition of none option in Breakpoints.
To see this change you need to navigate to Additional Settings tab (Responsive Settings before Elementor 3.14 update).
And in the Breakpoint dropdown you will see none option.
See the below screenshot for reference
- Before Elementor 3.14
- After Elementor 3.14
On selecting None, the Tabs widget will not switch to Accordion layout when screen sizes change.
Horizontal Scrolling
The next improvement that has been released for the Tabs widget in Elementor 3.14 is the addition of Horizontal Scrolling.
You will find this option under Additional Settings.
And using it you can select if you want to enable Horizontal Scrolling when Tabs are exceeding the size of Container.
See the below gif for reference
As you can see using your pointer you can scroll through tabs horizontally when the tabs exceed the container size.
Icon Widget
Moving on from the Tabs widget, the next improvement that you will come across is for the Icon widget in Elementor 3.14.
And in this Fit to Size option has been introduced when you upload SVG.
To see this, you will have to first upload SVG in Elementor and then select it in the Icon widget.
In the next step you need to navigate to Style Settings where you will see the Fit to Size toggle.
- Before Elementor 3.14 update
- After Elementor 3.14 update
Image widget
After the Icon widget, the next improvement that has been released is for the Image widget.
And in Elementor 3.14, a new option Object Fit has been added to its Style Settings.
To see this change, you need to add Image widget and then upload an image.
In the next step you need to head over to its Style Settings and on making changes to Height and Width, a new dropdown for Object Fit will appear.
It has 4 options
- Default
- Fill
- Cover
- Contain
You can pick an option based on your requirements and Save changes.
Other Changes in Elementor 3.14
Keyboard shortcut for Page Settings, User Preference and Notes has been added to keyboard shortcuts modal.
This concludes everything you need to know about Elementor 3.14 update.
If you have found this helpful and want to buy Elementor Pro then you can do so by clicking our SPECIAL LINK or the button below
Elementor 3.14 Pricing and Plans
Till now in this article we have discussed everything you need to know about Elementor 3.14 update and the next topic we are going to discuss is how much does Elementor Pro cost.
Elementor has 4 plans
- Essential (1 site)- $59
- Advanced (3 sites)- $99
- Expert (25 sites)- $199
- Agency (1000 sites)- $399
What’s included
- 100+ Basic & Pro Widgets
- 300+ Basic & Pro Templates
- Theme Builder
- WooCommerce Store Builder
- Landing Page Builder
- Pop up Builder
- Form Builder
- Marketing Tools
- Premium Support
And more
Now that you are familiar with Elementor Pro pricing and plans, the next step is to choose and buy a plan and then
ooking for a reliable web hosting for your Elementor site then Elementor Hosting is for you.
Elementor WordPress Hosting or Elementor Cloud Website is a one stop platform using which you can build your site from scratch.
It has 4 plans and using our SPECIAL LINK you can claim Elementor Cloud Website discount
- Basic- $9.99
- Business- $19.99
- Grow- $22.99
- Scale- $49.99
What’s included
- Hosting powered by Google Cloud Platform
- Free SSL
- CDN from Cloudflare
- Free custom domain connection
- 100+ pre-designed websites
- Hello theme and WP pre-installed
- Automatic Backups
- Drag-and-drop, no code editor
- Staging Environment
- Premium support
And more
See- How to sign up for Elementor Cloud Website subscription
Having said that,
I hope you will find this article helpful and are now familiar with what’s new in Elementor 3.14 update.
In case you have any queries feel free to get in touch.
To stay up to date with our content we recommend you subscribe to our YouTube channel and email list.
Also, don’t forget to join our Facebook group.