I can’t wait to share what we accomplished in the past couple of months. We’ve been drawing, coding, animating like sedulous little elves. Let me announce our new plugin, SVG Divider for Elementor to decorate a website to your heart’s content. It enables you to illustrate articles and show off things like this:
The purpose of these dividers is to split headings and text and to divide content sections. The plugin has everything from simple lines through patterns to ornamental artworks. For example, you can tune a drawn SVG divider’s complexity by adjusting an optional glitter layer that animates on a loop (forever, in a subtle way):
Above all, it animates the reveal of each divider according to their unique curls and your desired speed. I can’t wait for you to see and play with them! Some make us proud, I mean look at this cutie in slow-motion:
Classic style
Elementor’s built-in divider widget is okay, but we thought there is always room for improvement via a dedicated plugin. The above, intricate objects are actual SVG dividers and are a novelty. For purists, though, we offer a classic style. On the surface, they are similar to previously-existing divider solutions. However, we decided to do things a bit differently to add value.
- We bundled the Let’s WP icon set, which is a freebie, but it’s more comfortable to use in a plugin. Of course, we added exclusive travel and restaurant sets with some beautiful non-UI line icons like palm trees or cutlery. These are unavailable elsewhere. You are no longer limited to FontAwesome.
- You have access to an Elementor button as a middle element and even move the icon inside it, anywhere.
- Our double and dashed lines are unique. They aren’t preset patterns but flexible and fully-customizable using sliders.
Development
Firsh – frontend, backend, animation
I’ve always wanted to have something like this on my sites, after seeing some Photoshop brushes that looked like film festival laurels. Embedding a raster image as a divider is slow, impractical, and unanimated. So we came up with this idea to spice up people’s sites with some animated SVG dividers that are quick to load (just a few kilobytes)!
My primary task was to present our designs in a user-friendly format. During the process, I learned a lot about creating a custom Elementor widget, far behind what the documentation taught me about it. I’m a big fan of control conditions (hiding settings that depend on another). Thankfully, Elementor fully supports this concept, so working with it was like a playground to me. The result is just the right amount of settings, most of which are hidden from view when unused, to minimize clutter.
The most significant part of the plugin is a custom control, the artwork picker popup in which you choose SVG dividers or our Let’s Go icons — these feature mouse-activated animations and live search, respectively. I aimed to make a popup faster than Elementor’s while being more usable and colorful. Because of some intelligent UX mechanisms, switching between two divider designs takes just a few seconds – the popup puts the previously-selected artwork in view, and you can pick another with a double click. It’s swift, and we loved playing with it when testing. It’s much better in real life, but feel free to explore our designs below.
My favorite and most challenging part was handcrafting the animations. I decided not to use any animation library to reduce dependencies (to just jQuery). Therefore, CSS animates every single line. Each little petal, heart, curl of every design has a custom timing and duration, given a consistent base speed. You can re-scale these however you wish with one setting, without knowing intricate details about the anatomy of our SVG dividers. In the end, the full CSS became a few thousand lines long. However, we only add the actually used parts to your site.
During my work, that’s how an animation looked like in the Chrome Developer Tool’s Animations tab. Dividers from the Style C series often include dozens of individual SVG paths. Of course, I tried automating it all, but the overall look wasn’t right. Things were moving, but mindlessly! You could tell no human hand touched them, that’s where I decided to deep dive into this.
Denes – concept, design, site
He spent a good portion of his summer drawing the 90 elements, then designing the product site and editing its videos. A separate article will cover his story in-depth.
What’s next?
Our 2020 big hit is still in the works, but in the meantime, go ahead and check out the site of SVG Divider for Elementor! For now, I’ll continue posting a series of tales from development, highlighting our successes with Elementor’s undocumented pieces and animating SVG lines. I learned a lot on this journey, and I want to share it with you.
Download the configured divider examples from this article as Elementor templates below. This requires the plugin, of course.
Comments are closed.