Introducing Shape Divider

Today we are excited to introduce Shape Divider - a new refreshing design feature that will transform your pages and help you create beautiful professional looking designs.

Here in Elementor, we not only follow top design trends, we also set them. Shape Divider is a perfect example of that, as it broadens the range of design possibilities considerably and allows you to create cool separator effects, that until now were simply not possible.

We really fell in love with this feature. So much so, that we decided to release it to the entire Elementor community, and not just to pro users.

We are starting off with 18 shapes you can choose from. These are starter shapes, that can be customized to create an endless and versatile array of dividers.

Here they are:

shape divider 900

How Shape Divider Works

The Shape Divider feature uses highly optimized SVG shapes, that are manipulated and customized on our frontend editor.

When we developed this feature, we had two important guidelines we focused on: making sure the shapes were lightweight and optimized, while delivering shapes that looked great on any screen, resolution and device.

Besides making the shapes lightweight SVG files, we have also made their loading asynchronous, meaning they only load when you need them to, and after the page has finished loading, so it doesn't affect page speed.

Because the shapes are SVGs, this guarantees they are always seen as high resolution, including on retina screens.

Control Over Shapes

Flexibility is an important factor when creating shapes. In Elementor, you have control over the various settings that help customize each and every shape:

shape-example-1

Background: You can separate any background with shapes, including color, image, video and gradient backgrounds

shape-example-4

Controls: With the Shapes feature, you can control the size of the shapes, as well as invert them or flip them over

shape-example-3

Top & Bottom Shapes: Set a different shape for the top and bottom part of the section, with a separate set of controls for each side

elementor-shapes-mobile

Mobile editing: You can quickly customize a different shape to fit desktop, tablet and mobile screens, using Elementor's Mobile Editing feature.

tiny free templates

6 Shape Divider Templates to get you started!

We want you to get the fastest introduction into the shapes feature. This is why we've created 4 stunning FREE templates, that showcase a few creative ideas for using shapes. If you're a Pro user, you get 2 more shape templates that are no less stunning.

You are invited to use these templates for your own website, and tinker with the shapes to get to know just how easy it is to use.

Other Improvements

Because the new shapes feature is so substantial, we won't elaborate much on the other features added to Elementor this week. Hopefully, we will be able to publish a longer post depicting them in more detail further ahead.

In the meantime, here is a quick update on all the other improvements added to Elementor with this release.

Video Lightbox - You can now add a video lightbox modal, so when the user clicks on an image, the video opens as a lightbox. You can visually control various design settings of the lightbox. To see the video lighbox feature, make sure you add an image overlay to your video widget. 
Read more about Video Lightbox →

Button Shadow - We added box shadows to Elementor back in July, and if I am not mistaken this feature is still only available on our builder. Now, you can also add shadows to buttons. How cool is that?

Smooth Scroll - A few months ago, we introduced smooth scrolling to our anchor widget. This way, you can create a one-page navigation that moves from section to section smoothly. Now you can use an ID to add smooth scrolling to any Elementor element: section, column or widget, without having to use the Anchor widget.

Icon List Dividers - As per many of our users' request, we have now added the ability to separate the different list items with lines and spaces, and design the line style however you like. We have also fixed an issue where list items which were longer than one line wrapped around the icon instead of getting aligned one below the other.

Optimization Improvement - Without getting too technical, We've made sure JS scripts are included in the page only if you are using them. This means that your page only loads the widget JS scripts it needs, making Elementor pages load even faster.
Note: If you're a developer, follow this code example to understand how it works.

Conclusion

Shape Divider has been added to a list of features we have added since the beginning of the year to the Free Elementor Page Builder, including Revision History and Gradients.

We invite you to take the new Elementor version for a spin, and share some of your creative shape divider pages with us.

About the Author

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 when it was only used to blog.

120 Responses

  1. 👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾☕️☕️☕️☕️☕️👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾👏🏾

  2. Question: with the shape dividers, is it possible to have full width video above the divider (like in a Revolution Slider) and a parallax full width image below the divider such that the shape divider cuts into the full width image below it (I assume the full width image is in the row below)?

    1. I asked the same question before I used pro. Now that I’m actually using (without discount), I feel ashamed for ever asking. Not that you have to, I’m just saying the price they ask is WELL worth it!

      Great update!

  3. I’ve just updated my pro version, but couldn’t see this feature. Isn’t it yet available? Or am I missing something?

      1. Sorry, I just figured out shape divider appears when editing the style of a section. I thought it was a separate widget like Shape Separator. Oh boy, how stupid it was of me!

  4. I’ve been using elementor since beta, and purchased the pro (worth the money) since the first launched. I knew I didn’t chose wrong choice when I picked Elementor as my page builder. And off course this shape divider is another warm welcomed addition! can’t wait to play with it.

    Now now..I hope someday you guys would consider another feature such as blurring object when hover an image, particle and another fancy parallax effect.

    Elementor is getting better and better, thanks a lot for this shape divider feature.

  5. You guys keep hitting it out of the park. I preordered the pro version before it came out due to how impressive elementor was at the time. All I can say now is ‘WOW’. Plus your support team is amazing. You really are the builder to beat and every one else is trailing behind. Congratulations and keep up the good work!

  6. I am not prompted to update the free version, only the pro version. So I deleted the free version and re-installed it. When re-installing it, WordPress lists the free version as having been updated 7 days ago, not yesterday. Going to Section > Style, there is no option for “shape divider”, only the “background”, and “background overlay”, as before.

  7. I updated both std & pro in the WP plugin section, however at the top of the ‘Edit Page’ it says “Update Elementor Now”.

    Also, in the Elementor editor, under the section styles, i am not seeing the ‘Shape Divider’ option.

    What am i missing?

  8. Greetings!

    I’m a little confused as you open the post with “So much so, that we decided to release it to the entire Elementor community, and not just to pro users.” yet the currently available version was released 7 days ago and is 1.2.4 – I even tried downloading from the site here and was delivered 1.2.4 that doesn’t have any of the new features and is the same as released on WordPress 7 days ago….?

    Also I’ve attempted to contact you guys via twitter a few times re the BETA of the referral program and never get a response… how can we contact you as mentioned in a previous post as you have no contact form 🙂

    Many thanks – love the plugin, it’s stunning.

  9. Downloaded elementor. 1.3.0.zip 1.3.1.zip still cant find this new feature, and I have been to settings and no luck given up!

  10. Been there no reference to – Shape – Divider?? only style settings are these:

    Style Settings

    Disable Global Colors Checking this box will disable Elementor’s Global Colors, and make Elementor inherit the colors from your theme.

    Disable Global Fonts Checking this box will disable Elementor’s Global Fonts, and make Elementor inherit the fonts from your theme.

  11. I am aware of the blue border around the selection which is the first thing I explored when trying to find shape divider still not there it’s not in the section settings

  12. Ben,

    Yes you was right I was looking in the wrong place.

    I went to add section clicked edit and then style and it is there.

    Donut moment.

    Thanks for your help!

  13. I had absolutely no problems. The available update showed up yesterday in my WordPress plugin section.

    And you can clearly see in the video where you can find and use the Shape Divider. Folks, just watch the video attentively. 😉

  14. Hi Ben – yes it wasn’t available on WordPress repository at the time but is now, I think it was rolled back possibly at one point due to reported issues (see the support are on WP.org) as for the contact form, I know several Elite authors from ThemeForest wanted to contact but the form wasn’t available last week. I will let people know on the ThemeForest Elite slack channel that one is available! – Thanks 🙂

  15. Okay, I was able to update the free version of Elementor today, although it wasn’t available yesterday (after I saw this video).

    There is an issue. Everything looks great when I’m using shape divider on Elementor; on the right side of the screen, you can see that the feature should be fitting just fine into the bottom of the section.

    HOWEVER, when you open the page in a new tab (in chrome), the shape divider is literally upside down. It is still at the bottom of the section, but since it is upside down, it does not smoothly transition from the section to the next color. Instead, there is the background video, then the shape divider (white), then more background video under that.

    1. I’m experiencing the same problem with any shape I try at the bottom of a section. Looks great when editing with Elementor, then is upside down when viewing anywhere else.

  16. I can confirm that the shape divider is upside-down on both of my sites. So the triangle shape divider, for instance, is not resting on its base, but it’s flipped over and resting on its point.

    Again, it looks fine while you’re still working within elementor, but the problem appears when you refresh the page in a new tab.

  17. I can confirm the same situation; while in the “Elementor” building page the effect works as intended. After loading the final page in a separate browser page the effect is gone.

  18. hi ben nice updates, just have a recommendation i think it will be quite easy for you guys and will be a hit feature, something like a cost calculator, where you can put in different variables and come up with a price, eg to price up a hosting package

  19. What are the 6 new templates?

    I have only found 5, which am I missing?
    Homepage Copywriter Pro
    About Startup Free
    Shop Sweets Free
    Product Launch Free
    Landing Page Mobile App Free

    Thanks!

  20. Hi,
    I have designed a bigger project just now with Elementor and GeneratePress Premium…
    What I am missing in Elementor is a Table Option in the Editor, so I can design
    Price lists easily, if you have 50 items, where you want to display the price of each item like in a vertical list and have the prices all in the new column…
    Maybe I just have not found it yet ? But how would you do this easily ??
    Any quick solution ?
    Maybe I should go for the Pro Version and should look there ?
    There you have a Pro Template with a Coffe Shop price-list… How is this done ?
    Via Tables or do you have more sections there that replace HTML table tags ??
    Many thanks.
    Regards, Stefan.

  21. BTW, Shape dividers are great, but I just only use Wave Brush, the others are not too exiting…
    But here is another different question:

    1.Inside the Picture box there is no Editor for the text and how do I put the picture below the text ??
    2. How can I put 4×4 Buttons easily in a 4×4 Matrix, where I have the background settings for the
    4×4 matrix section ?? So that I have ONE background picture for the frame of the 4 x 4 Buttons ?
    3. Also there is still a bug in the round shaped background boxed… With the Shape Dividers
    they are not getting round edge, if you use them…but have set round shaped background boxes…
    Many tahnks.
    Regards, Stefan.

    1. Hi Stefan,
      1. I suggest you use the image widget and a separate text widget.
      2. Use the columns widget.
      3. This might be a conflict you are experiencing yourself. Please contact our support.

  22. Hi Ben,
    That’s a great feature I remember I made the string translation too but I cannot find it in my elementor, even in the pro version. I have the 1.3.4 installed. Where do I have to find this Shape Divider?
    thanks
    Angelo

  23. HAS THIS ISSUE BEEN RESOLVED?

    Can someone please tell me if the problems reported above about their divider showing “upside down” on viewing? Ie; was fine within Elementor but not on the final result?

  24. Thanks Ben, I’m now so excited about playing with it all that I think I’ll be awake all night!
    I’m not a dev – Elementor is wonderful for me – although I do still need to go through your tuts to give me confidence. I have so much DESIGN to get out of my head! Thanks for making it possible :))) you R O C K!

  25. can you include the table builder?
    i need to put simple with formatting and but i am unable to do that?
    i copy and pasted table build on other site but i am unable to change the text color
    any solution?

  26. I cannot delete a shape divider. It does not show up in elementor but it does in the wordpress customize area. How can I delete this?

  27. Hey Ben, do you think you will be adding more shapes to this awesome list? Is it possible to design our own svg shapes? or is that too difficult to implement? and if so is there a tutorial on this? Also whats your though on png image dividers? Last but not least would love to see you add header and footer options like fly in and overlay navigation in house. What an awesome plug in.

Leave a Reply