Kастомный код работает только на платных планах (кроме архивного плана Creator). На плане Free кастомный код будет отображаться только в режиме превью и не будет работать после публикации.
Градиентный фон
Градиентный фон можно добавить к следующим виджетам: Shape, Button, Text. Сделаем это на примере виджета Shape:
- Добавьте виджет Shape.
- Найдите ID этого виджета, как показано здесь.
- Откройте Code Editor и вставьте этот код во вкладку CSS. Не забудьте заменить фрагмент
"PASTE WIDGET ID HERE"на ID виджета.
[data-id="PASTE WIDGET ID HERE"] {
background: linear-gradient(90deg, #EFC4C4 0%, #94BBE9 100%);
}
4 Опубликуйте (или переопубликуйте) проект. Изменения не будут видны в режиме редактирования, но появятся в режиме превью и в опубликованной версии.
Изменяемые параметры
linear-gradient: замените на radial-gradient, чтобы градиент исходил по окружности из определенной точки. Не забудьте удалить 90deg (или любой другой атрибут deg) из кода.
90deg: замените на 45deg, чтобы градиент исходил из нижнего левого угла — или удалите этот параметр совсем, чтобы градиент заполнял фон сверху вниз.
#EFC4C4: это цветовой код. Выбрать цвет и скопировать его код можно в палитре виджета.
Узнать подробнее о свойстве gradient вы можете здесь.
Градиент для текста
Для текста тоже можно создать градиентную заливку. Основной принцип остается прежним, но необходимо добавить параметры, которые преобразуют текст в маску. Финальный код будет выглядеть так:
[data-id="PASTE WIDGET ID HERE"] {
background: -webkit-linear-gradient(45deg, #EFC4C4 0%, #94BBE9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
А так это выглядит в опубликованном проекте:
Градиент для текстового фона
Любому тексту в вашем проекте можно добавить градиентную заливку. Вот как это делается:
- Добавьте новый текстовый виджет.
- Найдите ID текстового виджета по инструкции здесь.
- Добавьте виджет Code и откройте вкладку CSS.
- Скопируйте код, представленный ниже и вставьте его во вкладку CSS. Не забудьте заменить фрагмент "PASTE WIDGET ID HERE" на ID текстового виджета из пункта 2.
[data-id="PASTE WIDGET ID HERE"] {
background-image: linear-gradient(red, yellow);
}
Процесс выглядит так:
