TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

2 768

Скажу сразу что данная задача оказалось не так легко решаемой, и по сути мой метод не является стопроцентным решением. Также я не исключаю что при обновлении плагина Elementor svg файл который вы добавите в качестве разделителя может быть удалён, поэтому лучше на всякий случай сделайте его резервную копию где нибудь у себя в папке темы.

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

Перед тем как приступить к созданию разделителя стоит отметить что верным решением будет захват именно верхней части той области изображения которую Вы хотите применить. То есть допустим Вы создаете свой разделитель, и он состоит из вот такого изображения:

Пример разделителя для Elementor

Отталкиваясь от данного примера (моего примера), Вам нужна не голубая часть разделителя а белая его часть. Это очень Важный момент на этапе создания шейпа. И если мы будем создавать разделитель по данному примеру, значит нам необходимо в фотошопе удалить голубую часть разделителя, и залить его белую (или прозрачную часть) черным цветом. Почему черным? Для того чтобы можно было работать с разделителем в Elementore. Да и по большому счету без разницы какой цвет, мы все равно будем применять свой цвет во время работы с разделителем в Elementor’e.

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

Пример правильного разделителя для плагина Elementor

Для того чтобы svg изображение максимально было отзывчивым при работе в плагине elementor применим следующую стратегию по его созданию.

В начале и обрезаем изображение в Photoshop и сохраним его в PNG формате (почему сразу не в SVG? да потому что фотошоп создает SVG как-то уж слишком по своему). Далее перейдите на данный ресурс:

https://www.pngtosvg.com/

И переконвертируйте PNG в SVG.

Во время конвертирования укажите на сервисе максимум один цвет:

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

Далее сохраните полученный SVG файл у себя на компьютере, и откройте его в Notepad++.

Ниже реально работающий пример и мной уже используемый в качестве разделителя на одном из проектов:

shape_TOP.svg

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

Есть несколько важных деталей которые Вы обязательно должны знать при создании разделителя.

  1. Для применения цвета указанного в настройках разделителя секций Elementor’а, в SVG файле Вам обязательно нужно вставить класс <path class="elementor-shape-fill"
  2. Для возможности полного масштабирования удалите атрибуты 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

  3. В теле 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

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

Источник записи:

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее