Стандартных разделителей Elementor хватает для типовой вёрстки, но когда макет требует уникального волнового контура, фирменного скоса или диагонали точь-в-точь как в дизайне, встроенный набор из 26 фигур уже не спасает. Дизайнер рисует кастомный переход между секциями, а верстальщик остаётся с вопросом: как затащить свой SVG в Elementor так, чтобы он подхватывал цвет из настроек и не слетел при ближайшем обновлении плагина.

Проблема не в отсутствии механизма, фильтр elementor/shapes/additional_shapes существует в ядре давно. Проблема в том, что большинство инструкций в сети предлагают класть SVG в папку самого плагина, а это прямой путь к потере файла при автообновлении. И параметры url/path часто опускают, без них разделитель просто не отображается в редакторе.

Ниже, выверенный порядок действий: от подготовки векторного файла до регистрации через фильтр с размещением в дочерней теме. После этого собственный shape divider появится в выпадающем списке наравне со стандартными и будет жить независимо от обновлений Elementor.

💡 Быстрый обзор:

• Готовим растровый эскиз в Photoshop: вырезаем нужную область и заливаем чёрным.
• Конвертируем PNG в SVG через онлайн-сервис, с упрощением до одного цвета.
• Приводим SVG-код к чистому виду: убираем лишние теги, добавляем elementor-shape-fill и preserveAspectRatio.
• Кладём файл в папку дочерней темы и регистрируем через add_filter с ключами url, path и has_negative.
• Проверяем разделитель в редакторе Elementor, меняем цвет и высоту.

Что такое Shape Divider и зачем добавлять свой

Shape Divider, это SVG-фигура, которая накладывается на верхнюю или нижнюю границу секции в Elementor. Она создаёт плавный переход между блоками: волну, скос, дугу, заострённый край. Стандартная библиотека включает 26 фигур: горы, капли, облака, кривые и так далее.

Свой разделитель нужен в трёх случаях. Во-первых, когда макет содержит уникальную форму, которой нет в стандартном наборе. Во-вторых, для брендирования, например, переход в виде логотипа или фирменной волны. В-третьих, когда несколько проектов используют один и тот же кастомный набор, тогда разделители добавляют централизованно через дочернюю тему или кастомный плагин.

Технически механизм реализован через фильтр elementor/shapes/additional_shapes. Хук принимает массив, где каждый элемент описывает один разделитель: название, путь к файлу, возможность отражения и негатива. После регистрации фигура появляется в выпадающем списке редактора.

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

Принцип работы shape divider в том, что видимой остаётся та область, которую вы закрасили в SVG. Поэтому первым делом нужно понять, какая именно часть эскиза станет формой.

Допустим, дизайнер нарисовал переход с голубой нижней секцией и белой верхней «волной». Формой должен стать белый контур, именно его нужно вырезать и залить сплошным цветом.

Ключевой момент: если ошибиться и взять голубую область вместо белой, разделитель в Elementor будет выглядеть перевёрнутым или обрезанным. Всегда определяйте, что именно должно быть видимой фигурой.

Порядок действий в Photoshop

Откройте эскиз в Photoshop и выполните три шага:

• Удалите фоновую область, которая НЕ должна быть разделителем. В примере выше, удалите голубую часть.

• Оставшуюся область (белую «волну») залейте чёрным цветом. Чёрный упрощает последующую трассировку в вектор, конвертер не путается в оттенках.

• Обрежьте холст по границам фигуры и экспортируйте в PNG. Photoshop генерирует SVG с лишними обёртками и артефактами, поэтому PNG как промежуточный формат надёжнее.

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

Результат после обработки в Photoshop:

Конвертация PNG в SVG

Дальше нужен чистый вектор. Используйте онлайн-конвертер pngtosvg.com, он не требует регистрации и справляется с одноцветными формами без лишнего шума в коде.

Загрузите PNG и укажите параметры:

• Максимальное упрощение, один цвет. Это убирает «мусорные» кривые и делает SVG компактным.

• Количество цветов, 1 (или 2, если нужен прозрачный фон; тогда второй цвет задайте как transparent).

Скачайте полученный SVG и откройте его в редакторе кода, Notepad++, VS Code или обычном блокноте. Дальше, ручная чистка.

Приведение SVG к требованиям Elementor

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

Добавьте класс elementor-shape-fill. Без него Elementor не сможет перекрашивать SVG. Найдите тег <path> или <polygon> и добавьте атрибут class="elementor-shape-fill".

Удалите width и height. Оставьте только viewBox и добавьте preserveAspectRatio="none", это позволит разделителю растягиваться на всю ширину секции. Если атрибутов ширины/высоты нет, ничего не трогайте, просто убедитесь что viewBox присутствует.

Вырежьте всё лишнее. Удалите конструкции <?xml...>, <!DOCTYPE...> и любые XML-заголовки вне тега <svg>. Оставьте чистый код внутри <svg>...</svg>, Elementor читает такие файлы стабильнее.

Итоговый SVG должен выглядеть примерно так:

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
2
  <path class="elementor-shape-fill" d="M0,0 C300,100 900,0 1200,120 L0,120 Z"/>
3
</svg>

Куда положить SVG-файл

Самое грубое и частое решение, папка /wp-content/plugins/elementor/assets/shapes/. Оно работает ровно до первого автообновления Elementor, которое молча перезаписывает содержимое папки плагина вместе с вашим файлом.

Правильный путь, дочерняя тема. Создайте внутри неё папку assets/shapes/ и положите SVG туда:

1
/wp-content/themes/your-child-theme/assets/shapes/shape-custom.svg

Почти все современные темы, Hello Elementor, GeneratePress, Astra, Kadence, поддерживают дочерние темы. Если у вас их нет, создайте: в корне темы достаточно style.css с заголовком /* Theme Name: My Child Theme Template: parent-theme */ и functions.php.

Альтернатива, кастомный плагин. Но для одного-двух разделителей дочерняя тема проще и не плодит лишних сущностей.

Код для регистрации разделителя

В файле functions.php дочерней темы (или через плагин Code Snippets) добавьте следующий код:

1
/**
2
 * Регистрирует кастомный shape divider в Elementor.
3
 * SVG лежит в папке assets/shapes/ дочерней темы.
4
 */
5
add_filter( 'elementor/shapes/additional_shapes', function( $additional_shapes ) {
6
 
7
    $additional_shapes['shape-custom-wave'] = [
8
        'title'        => esc_html__( 'Custom Wave', 'my-child-theme' ),
9
        'url'          => get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg',
10
        'path'         => get_stylesheet_directory() . '/assets/shapes/shape-custom.svg',
11
        'has_flip'     => true,
12
        'has_negative' => true,
13
        'height_only'  => false,
14
    ];
15
 
16
    return $additional_shapes;
17
 
18
} );

Разбор ключей:

• title, название разделителя в выпадающем списке редактора. Пишите латиницей, это внутренний идентификатор, в интерфейсе он отображается как есть.
• url, публичный URL файла, используется в превью редактора. get_stylesheet_directory_uri() указывает на папку дочерней темы.
• path, серверный путь к файлу. Нужен для серверного рендеринга и некоторых проверок.
• has_flip, разрешает вертикальное отражение разделителя (кнопка Flip в редакторе).
• has_negative, нужен, если у вас есть два файла: shape.svg (прямой) и shape-negative.svg (с инвертированными цветами). Если негатива нет, ставьте false.
• height_only, когда true, Elementor даёт менять только высоту разделителя; когда false, и ширину тоже.

Ключевое отличие от инструкций, кочующих по форумам: наличие url и path обязательно. Без них разделитель не отрендерится, Elementor просто не найдёт файл.

Важный нюанс про ID разделителя

Идентификатор shape-custom-wave (ключ массива) должен быть уникальным. Если другой плагин зарегистрирует разделитель с тем же ключом, ваш перетрётся. Всегда используйте префикс: например mytheme-wave-1 вместо просто wave.

Проверка в редакторе

После добавления кода откройте любую страницу в редакторе Elementor, выделите секцию и перейдите на вкладку Style → Shape Divider. Ваш разделитель должен появиться в выпадающем списке под стандартными.

Проверьте три сценария:

• Цвет, поменяйте цвет разделителя в настройках. SVG должен перекраситься. Если нет, проверьте наличие class="elementor-shape-fill" в файле.
• Высота, измените высоту ползунком. Разделитель должен масштабироваться без искажений.
• Flip, если has_flip включён, кнопка отражения должна быть активна.

Не отображается вообще, первым делом проверьте URL: откройте get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' в браузере. Должен открыться чистый SVG-код, а не 404.

Посмотрите весь процесс от макета до работающего разделителя в реальном времени, в этом видео автор проходит путь целиком, включая нюансы с preserveAspectRatio и отладку битых путей:

⁉️🤔 Частые вопросы

Пропадёт ли кастомный разделитель при обновлении Elementor?

Нет, если SVG лежит в дочерней теме или кастомном плагине. Обновление Elementor перезаписывает только собственную папку /wp-content/plugins/elementor/. Файлы темы оно не трогает. А вот если вы положили SVG в /wp-content/plugins/elementor/assets/shapes/, он сотрётся при первом же автообновлении.

Можно ли сделать разделитель с градиентом?

Напрямую через настройки Elementor, нет, там только сплошной цвет. Но можно прописать градиент прямо в SVG, внутри <defs> и <linearGradient>. Тогда Elementor не будет перекрашивать фигуру (класс elementor-shape-fill на такой путь не вешайте), разделитель отобразится с «зашитым» градиентом.

Почему разделитель не отображается в редакторе, хотя в коде ошибок нет?

Три самые частые причины: забытый url/path в массиве регистрации, битый путь к файлу (проверьте прямой доступ по URL), или отсутствие класса elementor-shape-fill в SVG, без него Elementor молча пропускает разделитель.

Обязательно ли использовать Photoshop?

Нет, подойдёт любой растровый редактор: GIMP, Figma (экспорт в PNG), Photopea, даже Paint.NET. Ключевое, получить чистый чёрный силуэт на прозрачном или белом фоне перед конвертацией в SVG. Сама трассировка делается не в редакторе, а через pngtosvg или аналог.

Сколько кастомных разделителей можно добавить?

Ограничений по количеству нет, регистрируйте в том же вызове add_filter сколько нужно. Каждый со своим ключом, путём и настройками. Практический предел, удобство: больше 10-15 разделителей в выпадающем списке уже некомфортно искать.

Стоит ли заморачиваться с кастомным Shape Divider

Если проект одноразовый и стандартной «волны» достаточно, не стоит. Встроенные 26 фигур Elementor покрывают большинство типовых макетов, а время на подготовку SVG и отладку кода лучше потратить на контент.

Но когда макет требует точного повторения дизайна или у вас линейка сайтов с одинаковым брендированным переходом между секциями, кастомный разделитель окупается с первого применения. Один раз добавили через дочернюю тему, и на всех страницах сети он доступен без танцев с бубном.

Главное, что нужно запомнить: **не кладите SVG в папку плагина, всегда указывайте url и path в фильтре, и не забывайте про **elementor-shape-fill. Эти три пункта, корень большинства проблем, которые всплывают в теме на форумах и в issues на GitHub.