> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://dots.crisp.help/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Налаштування дизайну веб-сайту та мобільних додатків Дизайн сайту та мобільних додатків може бути налаштований індивідуально залежно від переваг проекту. Додаткові параметри зовнішнього вигляду виконуються на панелі керування в розділі "Налаштування". 🎬Огляд, як налаштувати дизайн вебсайту та застосунків [за посиланням.](https://www.youtube.com/watch?v=o8t98Jf4-OA&list=PLgk9A9BYo-RHAPeZkae654owtAv1M14lm&index=28) ### Зміст 1. Шаблони 2. Макети 3. Налаштування зовнішнього вигляду веб-сайту 4. Конструктор головної сторінки веб-сайту 5. Мобільні додатки # Шаблони Інтерактивні шаблони доступні за нижченаведеними посиланнями, і дозволяють ознайомитися із зовнішнім виглядом веб-сайту на різних пристроях. [Десктоп-версія](https://www.figma.com/proto/0Me3Shzv7E1ztEZPmaHqgU/Main-page-design?page-id=0%3A1&type=design&node-id=3145-357&viewport=338%2C249%2C0.1&t=ADIGunPEnW1WE2Ka-1&scaling=min-zoom&starting-point-node-id=3145%3A357&mode=design) [Мобайл-версія](https://www.figma.com/proto/0Me3Shzv7E1ztEZPmaHqgU/Main-page-design?page-id=1%3A1617&type=design&node-id=3160-7756&viewport=246%2C1239%2C0.34&t=6ijj9q9qVppd9Thv-1&scaling=min-zoom&starting-point-node-id=3160%3A7756&mode=design) # Макети Всі макети веб-сайту доступні у Figma за [цим посиланням](https://www.figma.com/file/0Me3Shzv7E1ztEZPmaHqgU/Main-page-design?node-id=0%3A1). Для їх детального перегляду та використання необхідно авторизуватись у Figma. Ви можете скопіювати їх в окремий проект, щоб самостійно розробити дизайн свого веб-сайту. # Налаштування зовнішнього вигляду веб-сайту Незалежно від дизайну вашого веб-сайту, ви можете швидко змінити вигляд деяких елементів безпосередньо з панелі керування. Наприклад, кольорову схему сайту можна змінити у розділі **Налаштування => Інтерфейси => Схема кольорів**. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_gkklrm.png) ** [Колір ключових елементів](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-shema-koloriv-l6bd9d/) **. Відповідає за колір привітальних екранів в мобільному додатку, активних елементів інтерфейсу: фону привітальних вікон застосунку, основних кнопок, активних кнопок, обраних елементів списків. Цим кольором буде пофарбована кнопка "Показати ресторани" (для мультибрендів) або "Показати меню" (для монобрендів) на головній сторінці веб-сайту. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_311a7z.png) ** [Колір допоміжних елементів](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-shema-koloriv-l6bd9d/)**. Відповідає за колір другорядних елементів інтерфейсу користувача: лейбла акції, колір блоку відображуваного замість обкладинки акції, колір каунтерів в картці товару і в бічному меню, колір піна розташування користувача і куля кур`єра на екранах з картою, а також за колір зображення з сумою на сторінці кешбека. ** [Колір тексту ключових та допоміжних елементів](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-shema-koloriv-l6bd9d/). ** Відповідає за налаштування кольору тексту ключових і допоміжних елементів. Цим кольором буде виділено текст на кнопці "Показати ресторани" (для мультибрендів) або "Показати меню" (для монобрендів) на головній сторінці веб-сайту. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_167x0d.png) Також самостійно Ви можете змінювати іконки і логотипи. Це можна зробити **Налаштування => Інтерфейси => Веб: Графіка** ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_b84u45.png) ** [Іконка лого (маленька)](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-grafika-bykew1/). ** Логотип сервісу, який відображатиметься на панелі управління. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_1vsgo7n.png) ** [Favicon](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-grafika-bykew1/). ** Логотип сервісу, який відображатиметься у вкладці браузера перед назвою кожної зі сторінок веб-сайту. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_72byjf.png) ** [Велика іконка лого](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-grafika-bykew1/). ** Логотип сервісу, який відображатиметься у сніпеті, при надсиланні посилання на веб-сайт у месенджерах чи соцмережах. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_csp5t0.png) # Конструктор головної сторінки веб-сайту Головна сторінка веб-сайту складається з блоків, кожен із яких можна налаштувати відповідним чином. Щоб змінити налаштування блоків перейдіть **Налаштування => Інтерфейси => Головна сторінка** ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_v672yf.png) Докладніше див. [тут](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-golovna-storinka-1dl1qj8/). ** [Блок Header](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-golovna-storinka-header-1fegzgz/). ** Цей блок відображається у верхній частині всіх сторінок веб-сайту. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_dppsm.png) ** [Блок Стартовий екран](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-golovna-storinka-startovij-ekran-l1551l/) **. Цей блок містить зображення або коротке відео, яке буде відображатися клієнтам під час відкриття головної сторінки веб-сайту. Також у цьому блоці міститься кнопка "Показати меню"/"Показати ресторани" та короткий текст. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_1wj2nt6.png) ** [Блок Міні слайдер](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-golovna-storinka-mini-slajder-nbneci/). ** Цей блок може містити зображення з посиланнями на меню компаній, категорії товарів (страв) або спеціальні пропозиції для клієнтів. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_1ezoz95.png) ** [Блок Максі слайдер](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-golovna-storinka-maksi-slajder-15v9b0p/). ** Цей блок містить зображення з посиланнями на інформацію для клієнтів (особливості сервісу, акції або спеціальні пропозиції). [![](https://storage.crisp.chat/users/helpdesk/website/51ea3197ff146c00/c7814c02-5b7c-4ee3-963f-9420ca_h6cz56.png)](https://downloads.intercomcdn.com/i/o/325149422/4514b1df50ff34eda088cbfb/2021-04-16_14-15-08.png?expires=1619467200&signature=4abafc7409d5b2d72eb3dd94addb7bf3d7daac165b12473e5e35f18a5f03952e) ** [Блок Додатки](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-dodatki-puakdh/). ** Цей блок відповідає за відображення інформації про мобільний додаток сервісу на головній сторінці веб-сайту. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_px4w5w.png) ** [Блок Доставка та оплата](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-golovna-storinka-dostavka-i-oplata-11sf16i/). ** Цей блок відповідає за відображення інформації про доставку та оплату на головній сторінці веб-сайту. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_puktq9.png) ** [Блок Footer](https://dots.crisp.help/uk/article/20-panel-keruvannya-nalashtuvannya-interfejsi-veb-golovna-storinka-footer-1oeop05/).** Цей блок відображається у нижній частині головної сторінки веб-сайту. У блоці містяться опис сервісу, посилання на акції міста, а також посилання на соцмережі та правила використання сервісу. ![](https://storage.crisp.chat/users/helpdesk/website/3c7680cb850c3200/image_v7imle.png) # Мобільні додатки При необхідності можна налаштувати такі елементи мобільного додатку: * **Колір додатку.** * **Іконка додатку.** Векторні зображення без градієнтів. * **Іконка Push-сповіщення додатку.** Векторні зображення одного кольору. * **Splash-екран додатку.** Зображення під час завантаження додатку. * **Логотип компанії.** У разі виникнення питань щодо дизайну веб-сайту та мобільних додатків, ви можете зв'язатися зі службою підтримки Dots Platform. Посилання на цю статтю: [тут](https://dots.crisp.help/uk/article/nalashtuvannya-dizajnu-veb-sajtu-ta-mobilnih-dodatkiv-wdcbbw/).