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