«
»
ElementorWEBWordPressПлагины

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

Скажу сразу что данная задача оказалось не так легко решаемой, и по сути мой метод не является стопроцентным решением. Также я не исключаю что при обновлении плагина 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

  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 и добавьте в него данный код:

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

Связанные записи
WordPressВсе для разработки плагиновПримеры

Пример реализации ajax логирования (js,php примеры кода)

WordPressПлагины

Опросы (голосование) в WordPress или как получить обратную связь от ваших посетителей

WEBПолезные сайты

9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

Contact Form 7WEBWEB - PHPWordPressВсе для functions.phpПлагины

Как заставить Wordpress отправлять почту из Amazon EC2 с помощью SES