0
41
2019-03-16

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

Рассмотрим добавление своего разделителя секций для плагина elementor. При помощи данной инструкции вы сможете указывать свои svg изображения для разделения секций при помощи плагина Elementor.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

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

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

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

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

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

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

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

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

https://www.pngtosvg.com/

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

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

Далее сохраните полученный 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

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

Теперь когда файл готов скопируйте его к себе на хостинг в папку плагина, по пути:

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

В качестве примера будем иметь ввиду что наш SVG файл имеет имя shape_TOP.svg

Следовательно он должен будет находится здесь:

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

Что ж перейдем к написанию функции которая и подключит наш разделитель секций. Для этого откройте файл function.php и добавьте в него данный код:

// Elementor
// добавление своего Shape Divider
// https://github.com/elementor/elementor/issues/4759
// https://github.com/elementor/elementor/issues/6550
// Важные заметки
// Для применения цвета в SVG обязательно вставить <path class="elementor-shape-fill"
// Для возможности масштабирования (особенно правим preserveAspectRatio) :
// <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">

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

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