Elementor – Как добавить свой разделитель секции (Shape Divider)

Сразу скажу: эта задача решается не так просто, и описанный ниже способ не даёт 100% гарантии. Также есть риск, что при обновлении Elementor добавленный вами SVG-разделитель (если вы положите его в папку плагина) может быть перезаписан или удалён. Поэтому обязательно сохраните резервную копию SVG у себя (например, в папке темы или в отдельном каталоге на компьютере).

Создание SVG-файла для разделителя

Перед началом важно понимать принцип: для корректного результата нужно «снимать» (вырезать) именно ту часть изображения, которая будет видимой на странице. Например, если ваш разделитель выглядит так:

В этом примере нам нужна не голубая часть, а белая верхняя область — именно она должна стать формой (shape). Это ключевой момент: если выбрать не ту область, разделитель в Elementor будет выглядеть неправильно.

Если делать разделитель по этому примеру, то в Photoshop нужно:

• удалить голубую часть,
• а белую (или прозрачную) область залить сплошным цветом, чаще всего — чёрным.

Почему чёрным? Так проще конвертировать в вектор и контролировать форму. А цвет в Elementor всё равно будет задаваться отдельно, поэтому исходный цвет фигуры принципиальной роли не играет.

В итоге изображение должно получиться примерно таким:

Чтобы SVG был максимально «отзывчивым» (хорошо тянулся по ширине и корректно масштабировался), используем простую стратегию:

1. Обрежьте изображение в Photoshop и сохраните его в PNG (Photoshop часто генерирует SVG с лишними конструкциями).
2. Перейдите на сервис конвертации: https://www.pngtosvg.com/
3. Сконвертируйте PNG в SVG.
4. Во время конвертации укажите максимальное упрощение — один цвет (это сильно снижает «мусор» в SVG):

Сохраните полученный SVG на компьютер и откройте его в Notepad++ (или любом удобном редакторе кода).

Важные моменты в теле SVG-файла

Чтобы Elementor корректно подхватывал ваш файл и позволял управлять цветом и масштабированием, проверьте следующие моменты:

1. Чтобы применялся цвет из настроек Elementor, у должен быть класс elementor-shape-fill, например:
2. Для нормального масштабирования удалите атрибуты width и height у тега . Должно остаться viewBox и желательно preserveAspectRatio="none" для растягивания по ширине.
3. В файле не должно быть лишних заголовков и DTD, например: или . Оставьте только содержимое внутри .

Итог: в файле должен быть только чистый SVG-код без лишних оболочек — Elementor читает такие файлы стабильнее.

Функция для добавления своего разделителя в Elementor

Когда SVG готов, загрузите его на хостинг. Если вы положите файл в папку плагина, используйте путь:

/wp-content/plugins/elementor/assets/shapes/

Допустим, ваш файл называется shape_TOP.svg. Тогда он должен лежать здесь:

https://ВашСайт/wp-content/plugins/elementor/assets/shapes/shape_TOP.svg

Далее добавим функцию, которая подключит этот shape в список разделителей Elementor. Откройте файл functions.php вашей темы (или используйте Code Snippets) и добавьте код:

add_filter( 'elementor/shapes/additional_shapes', function( $additional_shapes ) {
    $additional_shapes['shape_TOP'] = [
        'title'    => _x( 'Shape TOP', 'Shapes', 'elementor' ),
        'has_flip' => true,
    ];

    return $additional_shapes;
} );

Полезные ссылки по теме

https://github.com/elementor/elementor/issues/4759