Introducing the Ultimate Freehand Design Experience

Elementor v2.5 brings you the power of position absolute, position fixed, side-by-side widgets, Flexbox distribution & performance improvements.

Play Video

#elementor's Flexible Layout: Freehand Web Design Never Before Possible on WordPress

Calling all web-designers!

Elementor is yet again pioneering a change that will make WordPress web design far more flexible than ever before – Meet Flexible Layout!

Flexible Layout includes a set of advanced positioning capabilities that help you fully customize your design and layout workflow.

Ready? Take a deep breath, we have A LOT of new and exciting features to cover. Let’s dive in!

Inline Elements

Side-By-Side Widgets

Want to place 2 buttons side by side in the same column? Now you can!

Before, each widget took up 100% of the column, since it was using Elementor’s grid layout. Now, you can set the widget to be ‘Inline’, meaning the widget will take up the minimum width that it holds.

You can now set the widget’s specific width for pixel perfect customization.

freehand Web Design

Move Elements Using Absolute Position

Designers never had a way to work freehand when designing in WordPress. Now – they finally do, with Absolute Positioning.

Go to any widget, choose ‘Position: Absolute’, and you will be able to drag the widget to any location on the page, regardless of the grid. Point anywhere on the screen, and simply drag the widget there.

Absolute position has a bad reputation in terms of responsive design. In Elementor, we allow you to set a separate custom position for mobile, tablet and desktop devices using percentage, VH, VW or pixel units.

With Absolute position, you run the risk of getting a horizontal scroll when the element exceeds the limits of the page. Luckily, we added an Overflow Hidden control, which condenses all of the section widgets inside and removes any unwanted scrolls.

follow on Scroll

Pin Elements Using Fixed Position

Do you enjoy using sticky positioning for widgets? Then you will LOVE fixed position. Set your widget to have a fixed position and place it wherever you like. Now your element will scroll alongside your user.

Confused by the difference between Sticky and Fixed?
Sticky is a scrolling effect, which is relative to the section it’s placed in, Fixed position, however, is relative to the user viewport. That’s it!

Distribute Elements Across

Flex Horizontal Alignment

Along with inline elements, we added a new horizontal alignment option for columns.

Once you place several widgets inline in a single column, you can easily align and spread them across the column using 6 optional settings:

  • Start
  • Center
  • End
  • Space Between – meaning Widgets start and end at the edge of the column, with equal space between them.
  • Space Around – where Widgets are spaced equally and the edges are half of the space.
  • And Space Evenly – where Widgets have equal space between, before and after them.

Distribute Elements down

Flex Vertical Alignment

Speaking of alignment, have you ever built a services section with buttons that are not properly aligned? 

Besides Top, Middle and Bottom vertical alignment, you also get 3 new flex options:

  • Space Between
  • Space Around
  • And Space Evenly

Responsive Columns

Hide Column Per Device

Elementor has a useful mobile editing setting for hiding and showing sections and widgets from appearing on desktop, tablet, and mobile devices.

Now, we added the option to hide columns as well, so you can easily hide or show them according to which device the visitor is currently using.

Newspaper-Style

Improved Text Editor Columns

What about the layout inside the text editor? You can now divide your Text Editor widget into columns, specify columns per device and set the gap between the columns.If you’re used to writing in Word, Google Docs or Apple Pages, you’ll appreciate this update.

Workflow Improvement

Remember Last Tab

Are you familiar with how Netflix remembers the point in the movie where you left off? Now Elementor does too!After you exit a widget to edit something else, the tab you used last will be remembered. Next time you edit the same widget, you start from the same tab.

Performance Improvement

50% Faster Editor Loading

Since day one, a key feature Elementor has been known for is its high performance, seen in all aspects of the product. Fast loading pages, fast responding controls, we have been, and still are, the fastest page builder for WordPress. ‘No more drag and wait’ was a slogan I really liked back in the day.

Now, we managed to considerably speed up an important aspect of Elementor – the editor loading time. 

We managed to reduce our editor loading time by over 50%, meaning you can start working much faster!

WordPress Web Design, Now More Flexible Than Ever Using Elementor

Summing up

SPREAD THE NEWS ABOUT V2.5​

Are there any web designers in your Rolodex not using WordPress? This is the best time to get them to make the switch to WordPress! 

The new Elementor Core 2.5 version gives web designers freehand design capabilities that were never before possible on WordPress. These options are extremely useful for both designers and marketers, and expand your freedom to create beautiful layouts however you imagine them.

Share Elementor v2.5 with your web designer friends – and let us know if you managed to convert them to WordPress users 🤗

Liked This Article?

We have a lot more where that came from! Join 674,452 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

164 Responses

      1. Love the updates, but same for me even with new update this morning custom positioning inline not working for me as well as vertical align new options running on Astra. wondering if it is me specific 🙂

  1. Yeahhh,
    Elementor v2.5 bring us the speed than we need and the tools than we use daily.
    Thanks a lot for the work than you provide.
    Regards.

  2. The latest update 2.5.0 broke the text box spacing and padding settings! My values are still on the value boxes but they are “default” in the actual page. Also my drop down menus from main menu are under the page text and are unclickable. Will not update the plugin until this gets fixed. :/ Thank goodness we had a backup.

  3. Wow wow wow… insane good improvement. These are the missing features I was waiting for. Absolute positioning design elements took forever to code, what a time saver. Also extending the display flex property into Elementor. I cannot praise you enough. Thank you!!!

    1. yea but they need to make the sidebars adjustable too and flexible cause i can’t stand the amount of empty space the widgets have

  4. Exciting features to the creativity of an web designer it’s an added feather to an mutiple feather given for a flying designer well done Elementor for your great tools.

  5. Newbie question: Does the update happen automatically or is there something that I need to do on my part? Version 2.5 looks amazing … thank-you!

  6. You guys are doing great work! That vertical alignment solution is going to be super helpful as I no longer need to write CSS to get things aligned perfectly. These innovations are definitely speeding up the process in building a custom website.

  7. Hello, that’s wonderful news. I’m looking forward to the new features that will give us web designers much more freedom. The design possibilities of the “old” version are already great 😉

  8. Thumbs up! But when you will complete the image selector? It still misses the image crop size selector quite everywhere 🙁 just couple of places has it, but not for the bacground images at all. Please fix this, this kills the productivity, when we have to crop them manually to not slow down the page with large images 😉

  9. How did I even live before Elementor? You guys are doing some amazing work for the industry. Keep it up! =D

  10. I’m not a developer and even I know how insanely awesome this new release is! Holy cow! I’m SO glad I chose Elementor Pro! You guys rock! And, Ben, love your humor in the vid :O) !

  11. THANK YOU !!!!! So good, already diving into it! your team is pushing to be the best and i love it!

    Quick question I noticed this line: “Please note! Custom positioning is not considered best practice for responsive web design and should not be used too frequently.” As a newbie DIY web developer/designer could you please elaborate on this as to why it is not considering best practice. What is considered too frequent? Once per page, multiple per page, once per category, once per site? Is this for desktop only, mobile only? etc…maybe a blog post or link to an article about what is best practice for layout? (ill start my own search as well and this statement further helped expand on my learning of webdesign)

    Sorry if these are redundant noob questions…thanking you in advance and …

    oh ya YOU GUYS RULE!!!!!

    1. Recomend you to do a seo score check on site. Then you wil be given advises to improve site og there is some.

    2. If you use absolute positioning on an item (and don’t correct it for responsive displays) you run the risk of that item going ‘off canvas’. The item will either not display on a mobile browser, or it will increase the total canvas area meaning the page will overflow the viewport, and the visitor will potentially be scrolling through lots of excess white space.

      Example: If I have DIV and position it 1000 px to the right, but my mobile display is 500px wide, I will have to scroll an additional 500px to the righ to see it (and it will probably stretch my page out to double width, causing scrolling annoyances). SEO tests may flag this or not, as it’s more of a UX/UI issue.

      So for that reason it’s good to either use media queries to adjust the position of the element for each display, or incorporate the element into a regular layout with ‘position: static;’ + media query. I haven’t played with v2.5 yet but I presume it would have those responsive layout toggles to let you do this.

  12. Some excellent additions! Love them all! I’ve been using tricks to get some of these in dire situations. Thank you.

  13. Incredible.. I was just thinking on how to redesign my site last night and you guys read my mind and made it a whole lot easier, thanks loads 🙂

  14. Thanks alot. Makes my day alot easier. Elementor is the smartest thing i ever used. Been with you 1.5 years now and not gona stop now 🙂

  15. good job
    A simple note, the image in the article needs to adjust text, so text appears in front and bottom of the image

  16. You are really unbelievable – how can you put the positioned elements in the background, are there different layers? So the lyrics are not obscured? Thanks/Regards

    1. Technically Elementor has a ‘no-time’ fee since a big chunk of it is free to use. However paying a yearly subscription for Pro features that continually evolve & update isn’t that big an issue either.

  17. Have paid version of Elementor and love it. Having lived through “Adobe Hell” with the issues with absolute and fixed positioning never working properly with a grid based system, I hope that’s not going to be the case here. I have left “all things Adobe” after 20 years. I wouldn’t ever go back.
    That said I’ve noticed some hiccups since updating to 2.5 and WP 5.1 so I don’t which is the culprit but permalinks are not always being created properly. Especially when creating WP audio playlists with featured images. The PL doesn’t always match the file name. Many parameters are randomly disappearing then reappearing.
    Concentrate on a rock solid app. By making such a great easy fast app. You have inadvertently attracted those “self appointed geniuses” to ask for features that are not web best practices and now you are doing the same with a disclaimer not to use them too often. I don’t know if this is the same as it was with Adobe, maybe not. I left Adobe and started with WP because of Elementor. I hope it’s not the reason I leave. Mobile Drop menus that don’t work is inexcusable. Please get all that’s broken fixed first before any new features. Still love you guys just some critisms…))

  18. Yay, now I can clear out all of the absolute positioning code in my Custom CSS section! Thanks for bringing this long awaited feature set to release.

  19. Wonderful! I’m going to update it right now! especially with moving elements to absolute positions, as for anyone reading this, be careful not to playing with this too much, there is a reason why most page builders don’t do this, and one of them is because it will easily break your UX, so do be careful and take extra work to test it for responsiveness sake.

  20. Nice updates but when are you gonna put the native WordPress theme left/right sidebar in the single product template? There are situations when the sidebar you provides it is off no use and the native sidebar needs to be in the single product. After registering all Elementor locations, the native sidebar is present in edit mode but not in preview..

    I am writing here because the answer to the ticket applied was not satisfied as only worked around was suggested. So… beside these magical updates also some technical updates will be nice..

    And since I am here…where is a native Elementor modal window?

    Thank you !

  21. I am getting more and more used to Elementor and am starting to enjoy it much more. Elementor has much better theming and dynamic integration that Throve Architect and with lots of third party elements/widget which is great. Some of Thrive’ workflow/productivity is brilliant though and really maksa huge difference.

    Remember Last Tab…this is great but I would love the option to be able to remeber the last tab Globally for all elements/widgets you select. Often you are working on the same thing for multiple elements/widgets and it’s still a bit of a ball-ache switching between. Thrive Architect have this part right.

    Also global colours, styles – Check out Thrive Architect for for these to. So fast and easy with unlimited colour pallet…EP is very limited in this area.

    One more: Responsive previewing. Thrive have 4 little icons center bottom of the edit window with Desktop|Tablet|Mobile| Preview a single click selects the one you want. Preview opens a an new TAB.

    The last one.
    When you select ‘Edit in Elementor’ whilst hovering over a page in the WP Page/Posts lists, I’d love it to open a new tab leaving the page listings tab there. Thrive do this and it really saves time later on giving a better workflow.

    Thanks fo the great work though.

  22. Fantastic!! PLEASE now fix the arrow buttons on the padding and margins to they don’t just stop working when you’re clicking away at them. 🙂 Keep up the unbelievable work! Elementor is far and away the best thing that has EVER happened to WordPress!~

  23. I was celebrating too early. Yes these new features are great, but the new update breaks sort every website I worked on since January 2018, about 30 websites. I make heavy use of CSS including positioning elements absolute or making use of display flex. It now appears every widget element has a default width of 100%. PLEASE, I really need a proper solution to fix this!

  24. This is amazing! Quick question, how do you change the “layer” order of images when using the absolute position feature? I was looking at you gif example, and noticed how some images were on top of each other.

  25. Of what use is an undocumented tool?
    /
    I searched docs.elementor.com for “Flexbox” and found nothing. The search results are below:
    “No articles were found. Care to try again?”
    (I dislike the sarcastic and unnecessary: “Care to try again?”.)
    /
    I know how to use CSS’s Flexbox because of the documentation at w3.org.
    doc.elementor.com has no information.

  26. Images on my page seem to disappear in responsive mode (on mobile) when they were working previously. This is off an Elementor template so having trouble understanding why.

  27. after updating the plugin from version 2.5.3. version 2.5.4 does not load the editor. The system information has the following errors:
    JS: 2019-02-17 18:20:17 [error X 1][https://*****.kz/wp-includes/js/jquery/jquery.js?ver=1.12.4:4:30811] Cannot read property \’pageYOffset\’ of undefined
    JS: 2019-03-11 04:58:02 [error X 16][https://*****.kz/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=2.5.4:2:14761] e.elementorWaypoint is not a function
    What to do?

    1. I think you can make this feature much better by creating smart guides as in adobe illustrator.
      those lines that show up when you are on line with other object and stuff like that.

  28. Nope. I must be missing something here. Not great and easy, but it’s probably me. But in theory and demos – it’s awsome.

  29. How about making an element fixed relative to another element? Say, that nifty triangle in your example being fixed in space relative to the photo it’s hiding behind. This would bypass a lot of responsiveness issues.

  30. I love the new features but could you just get around to fixing the lack of METHOD and ACTION in the Form editor? We need just your basic METHOD, such as POST or GET and the ability to select the URL for the ACTION. Just two simple little boxes you could add to the basic Form editor. Seems like that would be a lot easier than all the other cool stuff you just added!!!
    (Lovely though the Form editor is, the expectation that I only want to use ajax to submit a form is not realistic. )

Leave a Reply

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

Want to learn how to build better websites?

Join 674,452 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.