Виджет собран из стороннего кода.

Готовый вариант можно посмотреть на странице: http://1ixepdv4.plp7.ru/

Как установить виджет

Шаг 1. Установим в секцию “HTML-виджет”.
 


 Шаг 2. Перейдём в меню “HTML-виджета” и выберем “Импорт”.
 


 Шаг 3. Скопируем код готового виджета по ссылке:
Код виджета

Шаг 4. Вставим код во всплывающее окно и “Сохраним”.
 


 В коде, который мы импортировали, уже есть текст внутри виджета.
 Мы можем отредактировать его или заменить на свой.
 
 В качестве примера мы заменим его на свой.
 
 Шаг 5. Перетаскиваем нужный нам текст в “HTML-виджет” и
 удаляем настроенный виджет “Заголовок” .
 
 Если вы редактируете текст, который был установлен по умолчанию, то можно перейти к настройкам виджета.
 


 Шаг 6. Перейдём в “Просмотр HTML-кода” текста.
 


 
 Шаг 7. Добавим класс к тегу <p>
 

class="gradient-text"

После добавления добавления этого класса к нашему тегу, он приобретает заданный стиль, и мы сможем изменять его в настройках “HTML-виджета”.
 Сам текст можно редактировать как обычный виджет “Текст”.
 

Настройки виджета “HTML-виджет”

Цвет 1 и Цвет 2

Градиент текста из примера задается в двух значениях.
 Выбираем нужные нам цвета для текста.
 

Размытие

Размытие позволяет сделать плавный или резкий переход между цветами.
 

Положение

Позволяет изменять положение границы, в котором происходит переход между двумя цветами.
 

Наклон

Границу изменения цветов можно не только перемещать, но и задать нужный наклон этой границы.
 

Адаптивность

К тексту можно применить адаптивность из настроек виджета, которая позволит отображать текст с градиентом на разных устройствах с разным размером шрифта.

Как собрать такой же виджет или даже лучше?

Мы взяли обычный код градиента текста из интернета и адаптировали его под редактор.
 Код:

.gradient-text {
  background: linear-gradient(45deg, #00660a 50%, #00d714 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

В “HTML-виджете” во вкладке “Настройки” добавим:

2 переменные “ColorPicker (Цвет)” – через которые будем задавать цвета для градиента. На скриншоте это {{var12}} Цвет 1 и {{var13}} Цвет 2


3 переменные “Slider (Ползунок)” На скриншоте:

  • {{var15}} Размытие
  • {{var16}} Положение
  • {{var20}} Наклон

Конечный вариант:

 Далее эти переменные необходимо правильно расставить в CSS коде.
 1) Заменим значения цветов в коде (#00660a и #00d714) на переменные ##{{var12}} и ##{{var13}} “ColorPicker (Цвет)”
 2)
Заменим значение 45deg на переменную ##{{var20}} “Slider (Ползунок)” (в настройках переменной задали минимальное значение 0 и максимальное значение 360 –при таких значениях граница перехода цвета сможет вращаться на 360 градусов)
 3) Заменим значения 50 и 50 на ##{{var16-var15}} и ##{{var16+var15}} – это простое вычисление позволит нам размывать границу цветов и перемещать её положение.
 

Вы нашли ответ?