> For the complete documentation index, see [llms.txt](https://help.zenky.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.zenky.io/app/builder/visual.md).

# Визуальное оформление

## Настроить визуальное оформление приложения

Визуальное оформление состоит из блоков:

* Отступы закругления элементов и тени.
* Цвета
* Верхнее меню
* Нижнее меню
* Кнопки
* Тексты
* Картинки

### Отступы

<figure><img src="/files/ReHcFuaZiWTcgZZqT3Ry" alt=""><figcaption></figcaption></figure>

### Цвета

* Акцентированный цвет приложения (цвет кнопок)
* Цвет фона приложения
* Цвет уведолмния об ошибках (ошибка адреса, отсутствие товара на складе и пр)
* Цвет информационных уведомлений
* Цвет текстовых инпутов (полей ввода текста - фио, телефон, адрес и пр.)
* Цвет информационных виджетов (статусы заказа, бронирование столов и пр.)

<figure><img src="/files/ImERWyucb0zxHVlCubRZ" alt=""><figcaption></figcaption></figure>

### Верхнее меню приложения

* Цвет верхнего меню
* Цвет текста верхнего меню
* Размер шрифта в верхнем меню

### Нижнее меню

* Цвет нижнего меню
* Цвет активной иконки и текста в меню
* Цвет неактивной иконки и текста в меню
* Размер шрифта в нижем меню

### Кнопки в приложении

* Цвет основных кнопок
* Цвет вспомогательных кнопок
* Цвет текста основных кнопок
* Цвет текста вспомогательных кнопок

### Тексты в приложении

* Размер шрифта заголовков
* Размер шрифта заголовков карточек
* Размер шрифта подзаголовков карточек
* Размер шрифта описания карточек

<figure><img src="/files/cPh6RPxt1SnGmp3wZkl7" alt=""><figcaption></figcaption></figure>

### Картинки в приложении

* Настройки размеров картинок коллекций
  * Выбрать соотношение сторон (1:1, 1:2, 1:3, 3:2, 4:3)
* Настройки расположения картинок коллекций
  * Растягивать изображение по наименьшей стороне
  * Растягивать изображение по наибольшей стороне стороне
  * Вписать картинку в область
  * Использовать пропорции оригинальной картинки
* Настройки размеров картинок каталога
  * Выбрать соотношение сторон (1:1, 1:2, 1:3, 3:2, 4:3)
* Настройки расположения картинок каталога
  * Растягивать изображение по наименьшей стороне
  * Растягивать изображение по наибольшей стороне стороне
  * Вписать картинку в область
  * Использовать пропорции оригинальной картинки

## Видео инструкция

{% embed url="<https://youtu.be/l4NKgYRoMB4>" %}