What’s New in Elementor 3.12 Update

The latest update for the free version of Elementor website builder plugin is out now.

And in this article we have discussed what’s new in Elementor 3.12 update.

Elementor 3.12 is packed with improvements and it includes changes to the Elementor interface, addition of size units to various elements and more.

Keeping this in mind, if you are looking to give Elementor 3.12 a try then you can do so by clicking our SPECIAL LINK or the button below.

Elementor 3.12 Update

Before we learn more about Elementor 3.12, it is important to know that- this update was released on 29th March 2023.

And below are the topics covered.

Elementor Interface Revamp

The first change that you will come across in Elementor 3.12 is that its interface has been improved.

This was a much needed change as Elementor has been consistently adding new features and widgets.

However, the interface or the Elementor editor is still the same as it was first released.

Now, to facilitate future product growth, a revamp was required.

Keeping this in mind, it is important to know that the new Elementor interface is built using REACT.

And in upcoming releases more interface related improvements will be released.

In other words, this revamp is a slow and gradual process and will span across multiple Elementor updates.

New Color Scheme

Now that you are familiar with the fact that Elementor interface revamp will be spread across multiple releases, the first change that you will come across in Elementor 3.12 is that the colors are more optimized in both light and dark mode.

See the below screenshot for reference

  • Light Mode before Elementor 3.12
Light Mode before Elementor 3.12
Light Mode before Elementor 3.12
  • Light Mode after Elementor 3.12
Light Mode after Elementor 3.12
Light Mode after Elementor 3.12
  • Dark Mode before Elementor 3.12
Dark mode before Elementor 3.12
Dark mode before Elementor 3.12
  • Dark Mode after Elementor 3.12
Dark mode after Elementor 3.12
Dark mode after Elementor 3.12

As you can see, in the new interface text is more clear and colors are more contrasting which makes it easier on the eyes.

New Editor Top Bar

Another change that has been introduced in Elementor 3.12 for the interface is the addition of a new top bar in the editor.

This new editor top bar will give you quick access to a few features such as

  • Theme Builder
  • History
  • User Preferences
  • Keyboard Shortcuts
  • Exit to dashboard
  • Site Settings
  • Responsive Menu
  • Publish

And more.

New Editor top bar in Elementor 3.12
New Editor top bar in Elementor 3.12

It is important to know that this new top bar is built using REACT and is released an an experiment.

As of now it comes disabled by default and its status is Alpha.

To enable the new top bar, you will have to navigate to Settings under Elementor in your WordPress dashboard.

Elementor Settings in WordPress dashboard
Elementor Settings in WordPress dashboard

And under the Features tab you will find the Editor top bar experiment.

New editor top bar experiment in Elementor 3.12
New editor top bar experiment in Elementor 3.12

Now, to activate editor top bar in Elementor, all you have to do is select Active in the dropdown and then Save changes.

New Editor top bar experiment active in Elementor 3.12
New Editor top bar experiment active in Elementor 3.12

Before we move forward, it is important to know that the earlier known Experiments tab was renamed to Features in Elementor 3.11 to correctly reflect its purpose.

Icon List widget in Elementor 3.12

Moving on from the improvements to the Elementor editor interface, the next change that we are going to discuss is for the Icon List widget.

There are quite a few improvements that you will come across and the first one is the

Addition of Vertical Alignment for icons

If you have been using the Elementor Icon List widget then you must have noticed, in situations where the content spans beyond one line, the icon at times looks out of place.

Or in other words, it does not look aligned when compared with other list items.

See the below screenshot for reference.

Icons not aligned vertically in Elementor Icon list widget
Icons not aligned vertically in Elementor Icon list widget

Before Elementor 3.12, there was no easy way to fix this issue as the vertical alignment option for icons was missing.

Vertical alignment for icons missing in Icon List widget before Elementor 3.12
Vertical alignment for icons missing in Icon List widget before Elementor 3.12

This has changed after Elementor 3.12 and the vertical alignment option has now been added.

Vertical Alignment in Icon List widget after Elementor 3.12
Vertical Alignment in Icon List widget after Elementor 3.12

You will find this option under the Icons tab in the Style Settings.

It is important to know that this option is followed by another setting known as Adjust Vertical Position.

Adjust vertical position in Icon List widget after Elementor 3.12
Adjust vertical position in Icon List widget after Elementor 3.12

And using it, you will be able to adjust the position of the icons more precisely.

Normal and Hover Color in Tab View

The next change that you will come across in the Icon list widget in Elementor 3.12 is that the Normal and Hover colors are now in Tab view.

  • Before Elementor 3.12
Normal and hover colors in Icon List widget before Elementor 3.12
Normal and hover colors in Icon List widget before Elementor 3.12
  • After Elementor 3.12
Normal and Hover colors in tab view after Elementor 3.12
Normal and Hover colors in tab view after Elementor 3.12

It is important to know that in most Elementor widgets the normal and hover states are already in Tab view.

And this improvement aligns Icon List with other widgets.

Transition Duration

While we are on the topic of Normal and Hover, a new feature transition duration has been added in the Hover tab.

And using it you can set the time it will take to show the change of colors.

Transition duration in Icon List widget in Elementor 3.12
Transition duration in Icon List widget in Elementor 3.12

Here you will be able to set duration in ms, s or can even select custom.

Choose units in transition duration in Elementor 3.12
Choose units in transition duration in Elementor 3.12

Title and Description

After the changes to the Icon List widget, the next improvement that we are going to discuss has been released for the Icon Box and Image Box widgets.

And in this, after Elementor 3.12 update you will find the title and description options are separate.

Image Box

  • Before Elementor 3.12
Title and Description in Image Box widget before Elementor 3.12
Title and Description in Image Box widget before Elementor 3.12
  • After Elementor 3.12
Title and Description in Image Box widget after Elementor 3.12
Title and Description in Image Box widget after Elementor 3.12

Icon Box

  • Before Elementor 3.12
Title and Description in Icon Box widget before Elementor 3.12
Title and Description in Icon Box widget before Elementor 3.12
  • After Elementor 3.12
Title and Description in Icon Box widget after Elementor 3.12
Title and Description in Icon Box widget after Elementor 3.12

This improvement will make it easier for users to know where to add title and description in both these widgets.

Social Icons widget in Elementor 3.12

Moving on from the title and description, the next improvement that has been introduced in Elementor 3.12 is for the social icons widget.

And in this additional size units have been added to the Icon size. See the below screenshot for reference.

  • Before Elementor 3.12
Size units missing in Social Icons widget before Elementor 3.12
Size units missing in Social Icons widget before Elementor 3.12
  • After Elementor 3.12
Size Units in Social Icons after Elementor 3.12
Size Units in Social Icons after Elementor 3.12

Now to select / change size units, all you have to do is click the size units dropdown.

Select size units in Social Icons widget after Elementor 3.12
Select size units in Social Icons widget after Elementor 3.12

And it will show you all the options including Custom Size units.

Remember the option to select / choose custom size units was introduced in Elementor 3.10.

VW in Section, Column and Container

While we are on the topic of size units, it is important to know that vw has been added to margin and padding in section, column and container.

To see this change, you need to navigate to Advanced tab and then click the size units dropdown.

Section

  • Margin before Elementor 3.12
vw missing in margin in section before Elementor 3.12
vw missing in margin in section before Elementor 3.12
  • Margin after Elementor 3.12
vw in margin in section after Elementor 3.12
vw in margin in section after Elementor 3.12
  • Padding before Elementor 3.12
vw missing in padding in section before Elementor 3.12
vw missing in padding in section before Elementor 3.12
  • Padding after Elementor 3.12
vw in padding in section after Elementor 3.12
vw in padding in section after Elementor 3.12

Column

  • Padding before Elementor 3.12
vw missing in margin in column before Elementor 3.12
vw missing in margin in column before Elementor 3.12
  • Padding after Elementor 3.12
vw in margin in column after Elementor 3.12
vw in margin in column after Elementor 3.12
  • Padding before Elementor 3.12
vw missing in padding in column before Elementor 3.12
vw missing in padding in column before Elementor 3.12
  • Padding after Elementor 3.12
vw in padding in column after Elementor 3.12
vw in padding in column after Elementor 3.12

Container

  • Margin before Elementor 3.12
vw missing in margin in container before Elementor 3.12
vw missing in margin in container before Elementor 3.12
  • Margin after Elementor 3.12
vw in margin in container after Elementor 3.12
vw in margin in container after Elementor 3.12
  • Padding before Elementor 3.12
vw missing in padding in container before Elementor 3.12
vw missing in padding in container before Elementor 3.12
  • Padding after Elementor 3.12
vw in padding in container after Elementor 3.12
vw in padding in container after Elementor 3.12

Text Path widget in Elementor 3.12

Text Path widget was released in Elementor 3.2 and in Elementor 3.12 update, additional size units including custom size units have been added to Word Spacing.

See the below screenshot for reference

  • Before Elementor 3.12
Size units in Text Path widget Word Spacing before Elementor 3.12
Size units in Text Path widget Word Spacing before Elementor 3.12
  • After Elementor 3.12
Size units in Text Path widget Word Spacing after Elementor 3.12
Size units in Text Path widget Word Spacing after Elementor 3.12

Remove Current Kit Alert

After the improvements to the Text Path widget, the next change that we are going to discuss has been introduced for the site kits.

In this, Elementor will show you an alert to remove current kit before applying the new one.

To see this change, you will have to visit Elementor’s Kit Library and then choose any of the Site Kits that you want to install on your site.

After this you need to click Apply Kit and it will show you a prompt to remove the existing kit.

Remove existing kit option in Elementor 3.12
Remove existing kit option in Elementor 3.12

On clicking remove existing kit, it will take you to the Remove most recent kit option inside your WordPress dashboard.

It is important to know that this option was introduced in Elementor 3.8.

Before we move forward, it is important to know that for this option to appear you need to have a kit already installed.

This means if you are on a blank site or are not using Site Kits then you will not see this option.

Keeping this in mind, once you have removed the kit, it will take you back to the Preview and here you need to click Apply Kit.

And it will install the Elementor Site Kit.

Thumbnail of Recent Kit

After you have successfully installed the kit, a thumbnail of it will be visible in the Import / Export Kit tab under Elementor Tools.

Thumbnail of most recent kit in Elementor 3.12
Thumbnail of most recent kit in Elementor 3.12

Other changes in Elementor 3.12

  • Upgrade Swiper Library feature promoted to stable
  • Save as Default feature merged to version
  • Update minimum requirement to WordPress 5.9.

This concludes everything you need to know about Elementor 3.12 update.

If you have liked what you have read and want to get a Elementor Pro license key then you can do so by clicking our SPECIAL LINK or the button below.

Elementor 3.12 pricing

By now you are familiar with what’s new in Elementor 3.12 update, in this section we are going to discuss Elementor Pro pricing and plans.

Elementor has 4 plans

  • Essential (1 site)- $59
  • Advanced (3 sites)- $99
  • Expert (25 sites)- $199
  • Agency (1000 sites)- $399
Elementor 3.12 pricing and plans
Elementor 3.12 pricing and plans

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 the Elementor Pro cost, the next step is to choose a plan, create a free account on Elementor

Moving on,

If you are looking to for a reliable platform to host you Elementor site then Cloud Website is for you.

Elementor Cloud Website is a all-in-one-platform using which you can build your site using Elementor from scratch.

It has 4 plans and using our SPECIAL LINK you will get discount on Elementor Cloud

  • Basic- $9.99
  • Business- $19.99
  • Grow- $22.99
  • Scale- $49.99
Get Elementor 3.12 with Cloud Website plans
Get Elementor 3.12 with Cloud Website plans

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 with Elementor Cloud

Elementor 3.12

Elementor 3.12 Update

Having said that,

I hope you will find this article helpful and now know what’s new in Elementor 3.12 update.

In case you have any queries then feel free to reach out.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *