Скажу сразу что данная задача оказалось не так легко решаемой, и по сути мой метод не является стопроцентным решением. Также я не исключаю что при обновлении плагина Elementor svg файл который вы добавите в качестве разделителя может быть удалён, поэтому лучше на всякий случай сделайте его резервную копию где нибудь у себя в папке темы.
Создание SVG файла для разделителя
Перед тем как приступить к созданию разделителя стоит отметить что верным решением будет захват именно верхней части той области изображения которую Вы хотите применить. То есть допустим Вы создаете свой разделитель, и он состоит из вот такого изображения:
Отталкиваясь от данного примера (моего примера), Вам нужна не голубая часть разделителя а белая его часть. Это очень Важный момент на этапе создания шейпа. И если мы будем создавать разделитель по данному примеру, значит нам необходимо в фотошопе удалить голубую часть разделителя, и залить его белую (или прозрачную часть) черным цветом. Почему черным? Для того чтобы можно было работать с разделителем в Elementore. Да и по большому счету без разницы какой цвет, мы все равно будем применять свой цвет во время работы с разделителем в Elementor’e.
То есть изображение должно получиться таким:
Для того чтобы svg изображение максимально было отзывчивым при работе в плагине elementor применим следующую стратегию по его созданию.
В начале и обрезаем изображение в Photoshop и сохраним его в PNG формате (почему сразу не в SVG? да потому что фотошоп создает SVG как-то уж слишком по своему). Далее перейдите на данный ресурс:
И переконвертируйте PNG в SVG.
Во время конвертирования укажите на сервисе максимум один цвет:
Далее сохраните полученный SVG файл у себя на компьютере, и откройте его в Notepad++.
Ниже реально работающий пример и мной уже используемый в качестве разделителя на одном из проектов:
Важные моменты в теле SVG файла
Есть несколько важных деталей которые Вы обязательно должны знать при создании разделителя.
- Для применения цвета указанного в настройках разделителя секций Elementor’а, в SVG файле Вам обязательно нужно вставить класс
<path class="elementor-shape-fill"
- Для возможности полного масштабирования удалите атрибуты width и height:
<svg xmlns="http:www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" version="1.1" viewBox="0 0 387 320" preserveAspectRatio="none">
далее руками добиваемся правильного отображения пропорций при помощи цифр в
preserveAspectRatio
- В теле SVG файла не должно быть не каких лишних тегов типа:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Только все что в нутри <svg>
тега
Функция для добавления своего разделителя в Elementor
Теперь когда файл готов скопируйте его к себе на хостинг в папку плагина, по пути:
/wp-content/plugins/elementor/assets/shapes/
В качестве примера будем иметь ввиду что наш SVG файл имеет имя shape_TOP.svg
Следовательно он должен будет находится здесь:
https://ВашСайт/wp-content/plugins/elementor/assets/shapes/shape_TOP.svg
Что ж перейдем к написанию функции которая и подключит наш разделитель секций. Для этого откройте файл function.php
и добавьте в него данный код:
Полезные ссылки по теме
https://github.com/elementor/elementor/issues/4759