Чтобы перейти к настройке цветов и стилей сайта, перейдите в «Настройки сайта» и нажмите на раздел «Цвета и стили».

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

Чтобы изменить стиль всех ссылок на сайте, нажмите на ссылку «Дополнительные настройки». В настройках укажите толщину и цвет подчеркивания, а также стили ссылки при наведении.

Чтобы создать свою библиотеку стилей для проекта нажмите на кнопку «Управление стилями».

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

Чтобы добавить новый стиль в проект, нажмите на «Управлением стилями» и выберите любой пункт: «Добавить цвет», «Добавить типографику» или «Добавить кнопку».

Если стили уже созданы, то чтобы добавить новый, нажмите на иконку плюса рядом с пунктом «Цвет», «Типографика» или «Кнопка». Новый стиль после создания появится рядом с предыдущим.

Чтобы отредактировать стиль, нажмите на него.

Цвет. При создании стиля для цвета задайте название и описание, которое затем отобразится в «Стилях проекта».

Типографика. При создании стиля для типографики доступны настройки цвета для текста, размер шрифта на разных диапазонах экрана, тип шрифта, насыщенность и другие шрифтовые настройки.

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

Чтобы отредактировать диапазоны устройств, нажмите на шестеренку и откроется меню с устройствами по умолчанию.

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

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

Цвет. Чтобы использовать созданный стиль цвета — нажмите на любой пункт, где требуется указание цвета и в редакторе выберите «Стили проекта».

Выберите нужный стиль, и он автоматически применится к блоку. В поле с указанием цвета отобразится название вашего стиля, а также иконка, обозначающая, что к полю применен именно стиль цвета проекта.

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

В контекстном меню нажмите на нужный стиль и он автоматически будет применен к блоку. Чтобы перейдите в настройки стилей, нажмите на пункт «Перейти в библиотеку стилей».

После применения стилей для типографики в настройках останутся только те пункты, которые не были заданы для этого стиля. После внесения изменений в эти пункты, изменения будут применены только для текущего блока и никак не повлияют на заданный стиль типографики проекта.

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

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

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

Чтобы добавить иконку к кнопке, перейдите в «Контент» блока.

Рядом с кнопкой отобразится место под иконку. Нажмите на него, чтобы добавить иконку. Откроется меню, где будет доступны варианты иконок: стрелки, эмодзи, Tilda Icons, The Noun Project и возможность загрузить свои файлы с иконками.

Чтобы изменить иконку при наведении на кнопку, нажмите на пункт «Добавить иконку при наведении».

Выберите иконку и сохраните изменения.

Чтобы удалить иконку, нажмите на нее изображение рядом с текстом кнопки. Выберите вкладку «Иконка» и нажмите на корзину. Сохраните изменения и иконка пропадет.

Чтобы скачать стиль проекта, нажмите на кнопку «Управление стилями» и выберите нужный пункт. На ваше устройство будет скачан файл с названием проекта и расширением .tildastyles.

Чтобы загрузить стиль, выберите также соответствующий пункт из контекстного меню. Новые стили будут добавлены к ранее уже созданным стилям в проекте. Уже созданные стили в проекте не будут удалены или перезаписаны.