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

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

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

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

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

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

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

Через две недели стиль будет полностью удален из проекта, а настройки блоков будут очищены.
Передача страницы со стилями в другой проект
Если стили были добавлены на страницу в одном проекте, а затем эту же страницу нужно передать в другой проект в текущем или в другом аккаунте — страница будет передана вместе со стилями.

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