WP Manifestindependent plugin directory
manifest / builders / elementor-custom-shapes

Elementor Custom Shapes

Add custom shapes to Elementor page builder

by Marie Comet · github.com/mariecomet/elementor-custom-shapes · website

★ 14stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/mariecomet/elementor-custom-shapes/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/mariecomet/elementor-custom-shapes ↗

WordPress plugin that allows you to add custom shapes dividers to the Elementor page builder.

Prerequistes :

  • Elementor version >= 2.1.0 activated

Installation instructions

  • Upload and activate Elementor Custom Shapes plugin
  • Go to Elementor > Custom Shapes menu
  • Publish a new Custom Shape : a title and an SVG file as a post thumbnail
  • Your new shape will be available in Elementor Sections > Style > Shape divider select

:warning: Important notes

  • You need to allow SVG upload on your WordPress website, for example with the plugin Safe SVG
  • Your SVG files need to be cleaned up (no IDs, no styles), you can use SVGOMG for that
  • SVG paths must have CSS class "elementor-shape-fill"
  • "Invert" setting is not supported for custom shapes created with this plugin. If you need a shape inverted, create a second custom shapes with the same SVG but inverted. Please read : https://github.com/MarieComet/elementor-custom-shapes/issues/1#issuecomment-1024631273

SVG example

Below an SVG code example:

<svg viewBox="0 0 1000 50" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  <path class="elementor-shape-fill" d="M -0.19 51.146 L 1004.238 50.978 L -0.104 0.112 L -0.19 51.146 Z"/>
</svg>