Настройка цвета и стилей для сайта
Как задать настройки цвета и стилей для кнопок, текста, заголовков и ссылок
Посмотрите видеоинструкцию о том, как настроить глобальные стили на Тильде
Цвета и стили задаются в настройках сайта и применяются глобально ко всем страницам.
Таким способом проще поддерживать общий дизайн сайта и следовать утвержденной дизайнером айдентике.
Как задать глобальные настройки цвета для сайта
Подробнее
Как настраивать стили в проекте
Подробнее
Как добавить стили для цвета, типографики, кнопок
Подробнее
Как редактировать стили для цвета, типографики, кнопок
Подробнее
Как применять стили для цвета, типографики, кнопок
Подробнее
Как перенести стили из проекта в проект
Подробнее
Какие особенности переноса страницы со стилями
Подробнее
Общий лимит на создание стилей всех типов в проекте — 500.
Настройки цвета
Чтобы перейти к настройке цветов и стилей сайта, перейдите в «Настройки сайта» и нажмите на раздел «Цвета и стили».
Настройки сайта: раздел «Цвета и стили» в меню слева.
Чтобы установить глобально цвет для заголовков, текста, ссылок или фона страницы, нажмите на нужное поле и выберите цвет вручную в одном из трех форматов или впишите известный вам код цвета сразу.
В разделе «Цвета и стили»: поле «ЦВЕТ ЗАГОЛОВКОВ», а также выбор формата HEX, RGB, HSL и поле ввода цветового кода в палитре.
Указать цвет можно в трех форматах: HEX, RGB, HSL.
Чтобы изменить стиль всех ссылок на сайте, нажмите на ссылку «Дополнительные настройки». В настройках укажите толщину и цвет подчеркивания, а также стили ссылки при наведении.
Настройки стилей
Чтобы создать свою библиотеку стилей для проекта нажмите на кнопку «Управление стилями».
Вкладка «Цвета и стили» в настройках сайта: кнопка «Управление стилями» в блоке «Стили».
В панели управления стилями можно добавить цвет, стиль типографики и кнопку. Также вы можете скачать созданные стили и импортировать их в другой ваш проект.
Вкладка «Цвета и стили»: пункт «Загрузить стили» в меню кнопки «Управление стилями».
Добавление стилей
Чтобы добавить новый стиль в проект, нажмите на «Управлением стилями» и выберите любой пункт: «Добавить цвет», «Добавить типографику» или «Добавить кнопку».
Меню кнопки «Управление стилями»: пункты «Добавить цвет», «Добавить типографику» и «Добавить кнопку».
Если стили уже созданы, то чтобы добавить новый, нажмите на иконку плюса рядом с пунктом «Цвет», «Типографика» или «Кнопка». Новый стиль после создания появится рядом с предыдущим.
Кнопка с плюсом «Добавить кнопку» рядом с разделом «КНОПКА» и пустая карточка с плюсом для добавления нового стиля кнопки.
Чтобы отредактировать стиль, нажмите на него.
Вкладка «Цвета и стили»: карточка стиля кнопки в разделе «Кнопка».
Редактирование стилей
Цвет. При создании стиля для цвета задайте название и описание, которое затем отобразится в «Стилях проекта».
Раздел «Стили»: поля «Название стиля» и «Описание» в окне редактирования цвета палитры.
Типографика. При создании стиля для типографики доступны настройки цвета для текста, размер шрифта на разных диапазонах экрана, тип шрифта, насыщенность и другие шрифтовые настройки.

В верхней части редактора стиля типографики доступен предпросмотр шрифта. Чтобы увидеть, как шрифт отображается на мобильном устройстве — нажмите на нужный диапазон в панели брейкпоинтов.
Вкладка «Стили» в Настройках сайта: окно настройки стиля текста с полями шрифта, размера, насыщенности и цвета.
Чтобы отредактировать диапазоны устройств, нажмите на шестеренку и откроется меню с устройствами по умолчанию.
Настройка стиля текста: иконка шестерёнки над параметрами шрифта для открытия окна «Брейкпоинты».
Кнопка. При создании стиля кнопки можно дополнительно выбрать отображение иконки или перенос текста. Также можно задать настройки типографики, стиль при наведении и другие базовые настройки.

Для стиля кнопки также доступен предпросмотр на разных устройствах и редактирование диапазонов.
Настройка стиля кнопки: окно предпросмотра, параметры внешнего вида и разделы «При наведении», «Типографика», «Иконка», «Еще».
Использование стилей
Цвет. Чтобы использовать созданный стиль цвета — нажмите на любой пункт, где требуется указание цвета и в редакторе выберите «Стили проекта».
Палитра в поле «Цвет фона для всего блока»: выпадающий список «Стили проекта» с сохранёнными цветами в настройках блока.
Выберите нужный стиль, и он автоматически применится к блоку. В поле с указанием цвета отобразится название вашего стиля, а также иконка, обозначающая, что к полю применен именно стиль цвета проекта.
Настройка блока: поле «ЦВЕТ ФОНА ДЛЯ ВСЕГО БЛОКА», иконка связывания со стилем и выбор цвета из списка «Стили проекта» в палитре.
Типографика. Чтобы использовать созданный стиль типографики, в настройках блока выберите вкладку «Типографика» и нажмите на «Стили».

В контекстном меню нажмите на нужный стиль и он автоматически будет применен к блоку. Чтобы перейти в настройки стилей, нажмите на пункт «Перейти в библиотеку стилей».
Если у стиля не задано описание, то будут отображаться его настройки: название шрифта, размер и межстрочный интервал.
Кнопка «СТИЛИ» в настройках заголовка во вкладке «ТИПОГРАФИКА» и выбор варианта «Основной текст» в выпадающем окне «СТИЛИ ТЕКСТА».
Применить стиль для типографики можно в любом блоке, где используются текстовые элементы. Это может быть не обязательно вкладка «Типографика» в настройках блока.
После применения стилей для типографики в настройках останутся только те пункты, которые не были заданы для этого стиля. После внесения изменений в эти пункты, изменения будут применены только для текущего блока и никак не повлияют на заданный стиль типографики проекта.
Вкладка «Типографика» в настройках блока: поля выбора глобального стиля в разделах «Заголовок» и «Текст».
Важно: Если в примененном стиле не была указана какая-то настройка и вы указали ее прямо в блоке, то если добавить позднее эту же настройку с такими же или другими значениями в этот же стиль — произойдет конфликт.

В данном случае приоритетной будет та настройка, что указана в самом блоке.
В панели настроек блока во вкладке «Типографика» — предупреждение о переопределении настроек стиля с кнопкой «Сбросить».
Если отвязать стиль от блока, все поля настроек для текстового элемента будут заполнены значениями, которые были указаны для ранее примененного стиля.
Настройки блока: поле «Цвет» в разделе «Типографика» для подраздела «Текст».
Кнопка. Чтобы использовать созданный стиль для кнопок, в настройках блока выберите вкладку «Кнопка» и нажмите на «Стили» рядом с пресетами.

В контекстном меню нажмите на нужный стиль и он также автоматически будет применен.
В панели «Настройки» блока: кнопка «Стили» в окне «Кнопка» и выбор стиля в выпадающем списке «Стили кнопки».
Как и ранее, в настройках для кнопки останутся только те настройки, которые не были заданы в самом стиле. Вы можете их отредактировать или оставить без изменений.
Панель «Настройки» блока: раскрытая вкладка «Кнопка» и выбор стиля во всплывающем окне в поле «Стиль».
Чтобы добавить иконку к кнопке, перейдите в «Контент» блока.
В блоке CL21N: кнопка «Контент» в панели управления блоком и кнопка действия в самом блоке.
Рядом с кнопкой отобразится место под иконку. Нажмите на него, чтобы добавить иконку. Откроется меню, где будет доступны варианты иконок: стрелки, эмодзи, Tilda Icons, The Noun Project и возможность загрузить свои файлы с иконками.
В панели «Контент» карточки: выбор иконки для кнопки в поле «Текст кнопки».
Чтобы изменить иконку при наведении на кнопку, нажмите на пункт «Добавить иконку при наведении».
Панель «Контент»: кнопка «+ Добавить иконку при наведении» во всплывающем окне выбора иконки для кнопки.
Выберите иконку и сохраните изменения.
В панели «Контент»: вкладка «При наведении» в настройках добавления файла и окно выбора иконки Tilda Icons.
Чтобы удалить иконку, нажмите на ее изображение рядом с текстом кнопки. Выберите вкладку «Иконка» и нажмите на корзину. Сохраните изменения и иконка пропадет.
В панели «Контент»: вкладка «Иконка» во всплывающем окне выбора иконок и значок корзины «Удалить» рядом с загруженным файлом иконки.
Если вам необходимо отредактировать любой стиль после применения его в блоке, перейдете в «Настройки проекта», выберите раздел «Цвета и стили» и внесите изменения в стиль. Обязательно сохраните настройки проекта и опубликуйте его заново, чтобы изменения вступили в силу.

В блоках, где был применен стиль — изменения в стиль будут применены автоматически. Редактировать или заново назначать стиль в блоке не нужно.
Редактор страницы: пример оформления блока CL21N со светлым фоном, заголовком, описанием, оранжевой кнопкой и галереей изображений.
В блоке можно комбинировать стиль цвета и стиль типографики/кнопки для одного элемента. Например, если в стиле типографике не указан цвет текста, то в настройках блока можно назначить этот стиль, а для цвета назначить стиль цвета.
Настройки блока, раздел «Типографика»: поля «Стиль» и «Цвет» в блоке параметров «Заголовок».
Загрузка, скачивание и удаление стилей из проекта
Чтобы скачать стиль проекта, нажмите на кнопку «Управление стилями» и выберите нужный пункт. На ваше устройство будет скачан файл с названием проекта и расширением .tildastyles.
Загрузить в стили проекта можно только файл с расширением — .tildastyles

Другого формата файлы использовать не получится.
Чтобы загрузить стиль, выберите также соответствующий пункт из контекстного меню. Новые стили будут добавлены к ранее уже созданным стилям в проекте. Уже созданные стили в проекте не будут удалены или перезаписаны.
В меню кнопки «Управление стилями»: пункт «Скачать стили».
Загрузить стиль можно только в другой проект на Тильде или в свой же повторно. Редактировать и изменять вручную файлы .tildastyles нельзя.
Если удалить стиль из проекта, а затем сохранить настройки — стиль все еще будет применяться к настройкам блока в течение следующих 2 недель. В блоках, где был ранее применен стиль появится соответствующее уведомление.

Через две недели стиль будет полностью удален из проекта, а настройки блоков будут очищены.
Настройки блока, раздел «Кнопка»: статус стиля «[Удален] Button» в поле «Стиль».
Передача страницы со стилями в другой проект
Если стили были добавлены на страницу в одном проекте, а затем эту же страницу нужно передать в другой проект в текущем или в другом аккаунте — страница будет передана вместе со стилями.

При переносе страницы стили будут скопированы в новый проект для того, чтобы блоки отображались корректно.
Как передать страницу в другой проект или на другой аккаунт, читайте в этой инструкции.
Общий лимит на создание стилей всех типов в проекте — 500.
При попытке передать страницу или страницы со стилями в проект в рамках одного аккаунта, где превышен или будет достигнут лимит стилей — появится уведомление об ошибке. Чтобы завершить передачу страницы, необходимо удалить лишние стили в другом проекте.
Предупреждение о превышении количества глобальных стилей в окне «Перенести страницу в другой сайт».
При передаче страницы или страниц со стилями в проект в другом аккаунте, где достигнут лимит — страницы не будут переданы. При клике на «Принять» появится уведомление, что превышен лимит и нужно удалить лишние стили.
Окно с предупреждением о превышении допустимого количества глобальных стилей в проекте при приеме страницы.
Made on
Tilda