Стандартних роздільників 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.