Градиент текста

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

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

Содержание:

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

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

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

1000202
Шаг 3. Скопируем код готового виджета:

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

1000203
В коде, который мы импортировали, уже есть текст внутри виджета.
Мы можем отредактировать его или заменить на свой.

В качестве примера мы заменим его на свой.

Шаг 5. Перетаскиваем нужный нам текст в “HTML-виджет” и
удаляем настроенный виджет “Заголовок” .

Если вы редактируете текст, который был установлен по умолчанию, то можно перейти к настройкам виджета.

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

1000204

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

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

1000205

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

Цвет 1 и Цвет 2

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

Размытие

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

1000209

Положение

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

1000211

Наклон

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

1000210

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

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

1000224

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

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

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

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

      • {{var12}} Цвет 1
      • {{var13}} Цвет 2
    • 3 переменные “Slider (Ползунок)”
      На скриншоте

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

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

1000207

Была ли эта статья полезна?

Похожие статьи