[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-base-categories":3,"knowledge-base-article-website-builder-styli-saitu":245},[4,14,21,27,33,39,45,51,57,63,69,75,80,85,90,95,100,105,110,115,120,126,132,138,144,150,155,161,167,173,179,185,191,197,203,209,215,221,227,233,239],{"uuid":5,"name":6,"alias":7,"icon":8,"iconColor":9,"iconBg":10,"parent":11,"is_published":12,"parents":13,"has_children":12},"ce6fd0ef-910d-4b82-a078-ee5f6e96a443","westudy:category-faq","faq","streamline-ultimate:contact-us-faq-bold","success","",null,true,[],{"uuid":15,"name":16,"alias":17,"icon":18,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":19,"has_children":20},"39f2d064-df00-4593-be57-4f7a52e901cb","westudy:category-courses","course-settings-westudy","heroicons:academic-cap",[],false,{"uuid":22,"name":23,"alias":24,"icon":25,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":26,"has_children":20},"3ab94bce-9237-416c-9360-3ec4ed0d1859","westudy:category-webinars","webinar-settings","solar:translation-2-bold",[],{"uuid":28,"name":29,"alias":30,"icon":31,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":32,"has_children":20},"91b11c19-37b3-4d47-96c4-09435c032cdf","westudy:category-forms","form-settings-westudy","material-symbols-light:forms-add-on-outline-rounded",[],{"uuid":34,"name":35,"alias":36,"icon":37,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":38,"has_children":20},"537a87dd-52ee-4064-8ae7-fc73aa740bf5","westudy:category-orders","order-settings-westudy","lsicon:order-outline",[],{"uuid":40,"name":41,"alias":42,"icon":43,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":44,"has_children":20},"d101208a-b8f3-425f-9fb6-f5cfc0ff4ea5","westudy:category-crm","crm-settings-westudy","typcn:group-outline",[],{"uuid":46,"name":47,"alias":48,"icon":49,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":50,"has_children":20},"cbee3d9c-bfcb-4218-a691-7ae153de7e90","westudy:category-payments","payment-and-quota-settings-westudy","solar:card-outline",[],{"uuid":52,"name":53,"alias":54,"icon":55,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":56,"has_children":20},"18147986-d5ea-4854-8b60-584ecc9ef867","westudy:category-settings","settings-westudy","icon-park-outline:setting",[],{"uuid":58,"name":59,"alias":60,"icon":61,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":62,"has_children":20},"70973966-0210-429e-a632-cc09c0f461d6","westudy:category-profile","profile-westudy","iconamoon:profile-fill",[],{"uuid":64,"name":65,"alias":66,"icon":67,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":68,"has_children":20},"f5dcc1d1-b179-4cee-b5ec-26053690f0ad","westudy:category-mailing","mailing","iconamoon:email",[],{"uuid":70,"name":71,"alias":72,"icon":73,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":74,"has_children":20},"5ffc6400-c74a-4d27-94f2-2f66465f76e6","westudy:category-website_builder","website-builder","gridicons:site",[],{"uuid":76,"name":77,"alias":78,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":79,"has_children":20},"2bb281bd-1590-498a-9e02-1b20508313a9","westudy:category-lms_platform","faq-lms-platform",[5],{"uuid":81,"name":82,"alias":83,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":84,"has_children":20},"40aabf4d-d024-4b43-ad26-5f1d6eff08af","westudy:category-pricing","faq-pricing",[5],{"uuid":86,"name":87,"alias":88,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":89,"has_children":20},"853ce583-b8b4-4f2b-8983-20c15710d544","westudy:category-getting_started","faq-getting-started",[5],{"uuid":91,"name":92,"alias":93,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":94,"has_children":20},"26b5c847-7ebe-45d5-87fa-8dabc178cf8b","westudy:category-features_learning","faq-features-learning",[5],{"uuid":96,"name":97,"alias":98,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":99,"has_children":20},"4246b7dd-5362-47ce-8adb-a964249edbe2","westudy:category-branding_website","faq-branding-website",[5],{"uuid":101,"name":102,"alias":103,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":104,"has_children":20},"31874af7-7d18-4fd5-9e1d-ce2812f98d08","westudy:category-integrations_api","faq-integrations-api",[5],{"uuid":106,"name":107,"alias":108,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":109,"has_children":20},"0f787b4c-00f0-4694-8f7c-3e1c6c11c159","westudy:category-languages_international","faq-languages-international",[5],{"uuid":111,"name":112,"alias":113,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":114,"has_children":20},"7c8f2300-4d33-43da-91cb-d27a51afd319","westudy:category-affiliate_program","faq-affiliate-program",[5],{"uuid":116,"name":117,"alias":118,"icon":11,"iconColor":11,"iconBg":11,"parent":5,"is_published":12,"parents":119,"has_children":20},"e916c41c-4d93-4ff4-86a7-3ba9d0aaefb9","westudy:category-support_launch","faq-support-launch",[5],{"uuid":121,"name":122,"alias":123,"icon":124,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":125,"has_children":12},"edb45317-468b-4f86-916f-c9cf4622bad2","westudy:category-practical_guides","practical-guides","ep:guide",[],{"uuid":127,"name":128,"alias":129,"icon":130,"iconColor":11,"iconBg":11,"parent":121,"is_published":12,"parents":131,"has_children":20},"3e591998-6898-4eb3-aa63-dbd1ae7ac36c","westudy:category-course_launch","course-launch","hugeicons:course",[121],{"uuid":133,"name":134,"alias":135,"icon":136,"iconColor":11,"iconBg":11,"parent":121,"is_published":12,"parents":137,"has_children":20},"857cb02b-3358-42ca-bcfa-eb1f295c2332","westudy:category-sales_access","sales-and-access","carbon:sales-ops",[121],{"uuid":139,"name":140,"alias":141,"icon":142,"iconColor":11,"iconBg":11,"parent":121,"is_published":12,"parents":143,"has_children":20},"03f99330-0839-4533-9cff-7f154f678f93","westudy:category-learning_results","learning-and-results","iconoir:learning",[121],{"uuid":145,"name":146,"alias":147,"icon":148,"iconColor":11,"iconBg":11,"parent":121,"is_published":12,"parents":149,"has_children":20},"6355e2b8-2b5f-482b-a9fa-89a1df9f8d9b","westudy:category-webinars_communication","webinars-and-communication","cbi:stremio",[121],{"uuid":151,"name":152,"alias":153,"icon":11,"iconColor":11,"iconBg":11,"parent":121,"is_published":12,"parents":154,"has_children":20},"171facdd-19d7-46ea-b73a-db551baa2727","westudy:category-school_management","school-management",[121],{"uuid":156,"name":157,"alias":158,"icon":159,"iconColor":11,"iconBg":11,"parent":121,"is_published":12,"parents":160,"has_children":20},"88bf5b3b-f7b7-4e7c-845a-24cd75dcb519","westudy:category-advanced_features","advanced-features","pajamas:feature-flag",[121],{"uuid":162,"name":163,"alias":164,"icon":165,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":166,"has_children":12},"eb128f91-2232-4643-a58d-ef916896de41","westudy:category-student_account","student-account","ph:student-duotone",[],{"uuid":168,"name":169,"alias":170,"icon":171,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":172,"has_children":20},"aa1640fa-b103-43c7-91ac-6d77c61c5e4f","westudy:category-student_faq","student-faq","streamline-ultimate:contact-us-faq",[162],{"uuid":174,"name":175,"alias":176,"icon":177,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":178,"has_children":20},"227fbd1f-8b9f-4000-b686-77d732ea6ba6","westudy:category-student_login_profile","student-login-profile","iconmind:login-outline-thin",[162],{"uuid":180,"name":181,"alias":182,"icon":183,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":184,"has_children":20},"a212b6d6-f738-4c6d-b66d-5bbdc6b9fe08","westudy:category-student_payments_access","student-payments-access","hugeicons:access",[162],{"uuid":186,"name":187,"alias":188,"icon":189,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":190,"has_children":20},"5ef1a957-da53-45cc-a3a5-272f842ea935","westudy:category-student_webinars","student-webinars","boxicons:video",[162],{"uuid":192,"name":193,"alias":194,"icon":195,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":196,"has_children":20},"fcccc32a-1768-445b-b30c-bbd298b5a672","westudy:category-student_courses","student-courses","iconmind:course-enrol-outline-thin",[162],{"uuid":198,"name":199,"alias":200,"icon":201,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":202,"has_children":20},"cd405d54-2e5f-4dbc-a96d-ef87d784c7e0","westudy:category-student_lesson_materials","student-lesson-materials","iconmind:video-lesson-outline-thin",[162],{"uuid":204,"name":205,"alias":206,"icon":207,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":208,"has_children":20},"d033ec88-a110-438e-ac4b-563a5ce3b95d","westudy:category-student_assignments_tests","student-assignments-tests","picon:test",[162],{"uuid":210,"name":211,"alias":212,"icon":213,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":214,"has_children":20},"a67e432c-c63e-4f03-ba5c-c0c1a31bd8b0","westudy:category-student_communication_support","student-communication-support","mdi:support",[162],{"uuid":216,"name":217,"alias":218,"icon":219,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":220,"has_children":20},"93b74b78-e638-4f69-a098-6f5917799dbc","westudy:category-student_calendar_schedule","student-calendar-schedule","uil:schedule",[162],{"uuid":222,"name":223,"alias":224,"icon":225,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":226,"has_children":20},"ca7b7fbb-9191-4766-b046-4d31a1d7b878","westudy:category-student_certificates","student-certificates","griddy-icons:certificate",[162],{"uuid":228,"name":229,"alias":230,"icon":231,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":232,"has_children":20},"690ff045-2c3c-4588-a320-71f5884331c2","westudy:category-student_mobile","student-mobile","cil:mobile",[162],{"uuid":234,"name":235,"alias":236,"icon":237,"iconColor":11,"iconBg":11,"parent":162,"is_published":12,"parents":238,"has_children":20},"5709cf05-817b-4e53-b31e-86cd7df253bf","westudy:category-student_technical_support","student-technical-support","ix:support-ai",[162],{"uuid":240,"name":241,"alias":242,"icon":243,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":244,"has_children":20},"2d2ef88b-2c6f-42f3-9595-263d7ff1ff31","AI-помічник","ai-pomichnyk","heroicons:sparkles",[],{"uuid":246,"title":247,"description":248,"is_published":12,"alias":249,"category":70,"category_alias":72,"category_name":71,"date":250,"content":251},"35713bb5-3fcd-4d90-b08a-9111ebbf38a1","Як налаштувати шрифти та кольори сайту","Панель стилів сайту, шрифти, кольорові теми й параметри тексту, блоків, кнопок, значків, акордеона та шапки.","website-builder-styli-saitu","2026-10-13",{"type":252,"content":253},"doc",[254,260,273,295,302,306,350,358,367,393,398,402,454,458,467,471,503,508,512,564,571,580,606,611,615,687,691,700,720,725,729,751,755,764,790,795,799,861,865,872,881,913,918,922,927,931,1003,1007,1016,1020,1040,1045,1049,1101,1108,1117,1121,1147,1152,1156,1208,1217,1249,1253,1262],{"type":255,"content":256},"paragraph",[257],{"text":258,"type":259},"Стилі сайту задають спільне оформлення сторінок: шрифти, кольори та вигляд елементів. Узгоджені стилі допомагають зберігати однаковий вигляд заголовків, текстів і кнопок, коли ти додаєш нові блоки. У цьому матеріалі розглянуто панелі, які видно на скриншотах, і пояснено кожне показане налаштування кольору.","text",{"type":261,"attrs":262,"content":265},"heading",{"level":263,"id":264},2,"heading_2_1",[266],{"text":267,"type":259,"marks":268},"Відкрий стилі сайту",[269],{"type":270,"attrs":271},"textColor",{"color":272},"#EF8754",{"type":274,"content":275},"ordered_list",[276,283,289],{"type":277,"content":278},"list_item",[279],{"type":255,"content":280},[281],{"text":282,"type":259},"Відкрий потрібну сторінку в редакторі.",{"type":277,"content":284},[285],{"type":255,"content":286},[287],{"text":288,"type":259},"У верхній панелі натисни значок пензлика праворуч від перемикача комп’ютера й телефона.",{"type":277,"content":290},[291],{"type":255,"content":292},[293],{"text":294,"type":259},"У панелі «Стилі сайту» вибери потрібний розділ: «Шрифти», «Кольори», «Кнопки» або «Форми».",{"type":296,"attrs":297},"image_block",{"id":298,"alt":299,"url":300,"type":296,"float":11,"width":301,"preview":12},"a414d478-f1bc-5cfe-8b14-eeb337786b5a","Панель «Стилі сайту» з чотирма розділами оформлення.","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2F1d4311e7-3c45-43bf-84a4-88eddc582225.png","100%",{"type":255,"content":303},[304],{"text":305,"type":259},"Скриншот 5. Панель «Стилі сайту» з чотирма розділами оформлення.",{"type":307,"content":308},"bullet_list",[309,320,330,340],{"type":277,"content":310},[311],{"type":255,"content":312},[313,318],{"text":314,"type":259,"marks":315},"Шрифти. ",[316],{"type":317},"strong",{"text":319,"type":259},"Параметри текстового оформлення. На картці є приклад заголовка та звичайного параграфа.",{"type":277,"content":321},[322],{"type":255,"content":323},[324,328],{"text":325,"type":259,"marks":326},"Кольори. ",[327],{"type":317},{"text":329,"type":259},"Палітра й набори кольорів для тексту, блоків, кнопок та інших елементів.",{"type":277,"content":331},[332],{"type":255,"content":333},[334,338],{"text":335,"type":259,"marks":336},"Кнопки. ",[337],{"type":317},{"text":339,"type":259},"Окремий розділ стилю кнопок. У картці показано приклади заповненої та контурної кнопки.",{"type":277,"content":341},[342],{"type":255,"content":343},[344,348],{"text":345,"type":259,"marks":346},"Форми. ",[347],{"type":317},{"text":349,"type":259},"Окремий розділ оформлення форм. У картці показано приклад поля введення та кнопки надсилання.",{"type":255,"content":351},[352,356],{"text":353,"type":259,"marks":354},"Зверни увагу. ",[355],{"type":317},{"text":357,"type":259},"Це «Стилі сайту», тому зміни можуть впливати на різні сторінки й блоки, які використовують ці стилі. Після зміни спільного оформлення переглянь основні сторінки, а не лише поточний фрагмент.",{"type":261,"attrs":359,"content":361},{"level":263,"id":360},"heading_2_2",[362],{"text":363,"type":259,"marks":364},"Налаштування шрифтів",[365],{"type":270,"attrs":366},{"color":272},{"type":274,"content":368},[369,375,381,387],{"type":277,"content":370},[371],{"type":255,"content":372},[373],{"text":374,"type":259},"У «Стилях сайту» відкрий «Шрифти».",{"type":277,"content":376},[377],{"type":255,"content":378},[379],{"text":380,"type":259},"Переглянь зразок заголовка та параграфа у верхній картці.",{"type":277,"content":382},[383],{"type":255,"content":384},[385],{"text":386,"type":259},"Вибери групу, яку потрібно налаштувати: «Розміри текстів», «Заголовки», «Параграфи» або «Кнопка».",{"type":277,"content":388},[389],{"type":255,"content":390},[391],{"text":392,"type":259},"Після внесення потрібних змін скористайся «Зберегти». Переглянь результат на текстах різної довжини та в мобільному вигляді.",{"type":296,"attrs":394},{"id":395,"alt":396,"url":397,"type":296,"float":11,"width":301,"preview":12},"64206ba3-cb23-5cca-9053-1361ad3ee12a","Панель «Шрифти»: зразок Manrope та групи текстових налаштувань.","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2F6b9e109c-cd59-4e3b-abe8-54d0e702842c.png",{"type":255,"content":399},[400],{"text":401,"type":259},"Скриншот 6. Панель «Шрифти»: зразок Manrope та групи текстових налаштувань.",{"type":307,"content":403},[404,414,424,434,444],{"type":277,"content":405},[406],{"type":255,"content":407},[408,412],{"text":409,"type":259,"marks":410},"Зразок у верхній картці. ",[411],{"type":317},{"text":413,"type":259},"Показує поєднання заголовка та звичайного тексту. На прикладі для обох показано Manrope. Це налаштування конкретного сайту, а не обов’язкова вимога.",{"type":277,"content":415},[416],{"type":255,"content":417},[418,422],{"text":419,"type":259,"marks":420},"Розміри текстів. ",[421],{"type":317},{"text":423,"type":259},"Група для керування розмірами текстових стилів. Оціни загальну різницю між великими заголовками, підзаголовками та основним текстом.",{"type":277,"content":425},[426],{"type":255,"content":427},[428,432],{"text":429,"type":259,"marks":430},"Заголовки. ",[431],{"type":317},{"text":433,"type":259},"Група оформлення заголовків. Заголовок має допомагати читачеві зрозуміти тему секції.",{"type":277,"content":435},[436],{"type":255,"content":437},[438,442],{"text":439,"type":259,"marks":440},"Параграфи. ",[441],{"type":317},{"text":443,"type":259},"Група оформлення основного тексту. Перевіряй її на кількох абзацах, а не лише на одному короткому рядку.",{"type":277,"content":445},[446],{"type":255,"content":447},[448,452],{"text":449,"type":259,"marks":450},"Кнопка. ",[451],{"type":317},{"text":453,"type":259},"Текстове оформлення написів на кнопках. Воно має залишатися читабельним для коротких і довших підписів.",{"type":255,"content":455},[456],{"text":457,"type":259},"Для початку обери небагато текстових стилів і використовуй їх послідовно. Наприклад, великий заголовок — для першого екрана, менший — для секцій, параграф — для пояснень. Якщо текст перестає вміщуватися на телефоні, перевір не лише розмір, а й довжину самого формулювання.",{"type":261,"attrs":459,"content":461},{"level":263,"id":460},"heading_2_3",[462],{"text":463,"type":259,"marks":464},"Як пов’язані палітра й кольорова тема",[465],{"type":270,"attrs":466},{"color":272},{"type":255,"content":468},[469],{"text":470,"type":259},"Палітра — набір базових кольорів і відтінків. Кольорова тема визначає, як ці кольори застосовуються до тексту, блоків, кнопок, значків та інших частин сторінки. Наприклад, для світлого фону потрібен темний текст, а для темного — світлий.",{"type":274,"content":472},[473,479,485,491,497],{"type":277,"content":474},[475],{"type":255,"content":476},[477],{"text":478,"type":259},"Повернися до «Стилів сайту» та відкрий «Кольори».",{"type":277,"content":480},[481],{"type":255,"content":482},[483],{"text":484,"type":259},"У верхній частині знайди картку палітри з дією «Редагувати палітру».",{"type":277,"content":486},[487],{"type":255,"content":488},[489],{"text":490,"type":259},"Нижче відкрий список тем.",{"type":277,"content":492},[493],{"type":255,"content":494},[495],{"text":496,"type":259},"Вибери тему, параметри якої хочеш переглянути або змінити.",{"type":277,"content":498},[499],{"type":255,"content":500},[501],{"text":502,"type":259},"Розгорни потрібну групу налаштувань під вибраною темою.",{"type":296,"attrs":504},{"id":505,"alt":506,"url":507,"type":296,"float":11,"width":301,"preview":12},"2b4fde29-f563-5ffb-9c5c-ccefc6268b04","Список кольорових тем: «Світла тема», «Темна тема» та «Варіативна тема».","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2Ff887be25-4856-4353-b32a-b8bec4952739.png",{"type":255,"content":509},[510],{"text":511,"type":259},"Скриншот 7. Список кольорових тем: «Світла тема», «Темна тема» та «Варіативна тема».",{"type":307,"content":513},[514,524,534,544,554],{"type":277,"content":515},[516],{"type":255,"content":517},[518,522],{"text":519,"type":259,"marks":520},"Редагувати палітру. ",[521],{"type":317},{"text":523,"type":259},"Перехід до базових кольорів сайту. У поточному прикладі палітра містить світлий, фіолетові, бірюзовий і темний кольори.",{"type":277,"content":525},[526],{"type":255,"content":527},[528,532],{"text":529,"type":259,"marks":530},"Світла тема. ",[531],{"type":317},{"text":533,"type":259},"Набір оформлення, показаний у списку на світлому фоні.",{"type":277,"content":535},[536],{"type":255,"content":537},[538,542],{"text":539,"type":259,"marks":540},"Темна тема. ",[541],{"type":317},{"text":543,"type":259},"Набір оформлення, показаний у списку на темному фоні.",{"type":277,"content":545},[546],{"type":255,"content":547},[548,552],{"text":549,"type":259,"marks":550},"Варіативна тема. ",[551],{"type":317},{"text":553,"type":259},"Додатковий набір оформлення; у прикладі його картка має кольоровий градієнт.",{"type":277,"content":555},[556],{"type":255,"content":557},[558,562],{"text":559,"type":259,"marks":560},"Системна тема. ",[561],{"type":317},{"text":563,"type":259},"Позначка під назвою кожної з трьох тем у показаному інтерфейсі.",{"type":255,"content":565},[566,569],{"text":353,"type":259,"marks":567},[568],{"type":317},{"text":570,"type":259},"Вибір теми у цій панелі визначає, налаштування якої теми ти редагуєш. Не сприймай сам вибір у списку як підтвердження того, що весь сайт уже перемкнувся на цю тему.",{"type":261,"attrs":572,"content":574},{"level":263,"id":573},"heading_2_4",[575],{"text":576,"type":259,"marks":577},"Кольори тексту",[578],{"type":270,"attrs":579},{"color":272},{"type":274,"content":581},[582,588,594,600],{"type":277,"content":583},[584],{"type":255,"content":585},[586],{"text":587,"type":259},"У панелі «Кольори» вибери потрібну тему.",{"type":277,"content":589},[590],{"type":255,"content":591},[592],{"text":593,"type":259},"Розгорни групу «Текст».",{"type":277,"content":595},[596],{"type":255,"content":597},[598],{"text":599,"type":259},"Натисни кольоровий кружок або стрілку праворуч від потрібного текстового стилю.",{"type":277,"content":601},[602],{"type":255,"content":603},[604],{"text":605,"type":259},"Вибери колір і перевір, чи добре він читається на фоні відповідних блоків.",{"type":296,"attrs":607},{"id":608,"alt":609,"url":610,"type":296,"float":11,"width":301,"preview":12},"0e7b3477-f7d6-52fe-b975-f49745c0a637","Група «Текст»: окремі кольори заголовків і параграфів.","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2F01f0a5b3-6ec1-4b68-8b8a-980aaaa9ad55.png",{"type":255,"content":612},[613],{"text":614,"type":259},"Скриншот 8. Група «Текст»: окремі кольори заголовків і параграфів.",{"type":307,"content":616},[617,627,637,647,657,667,677],{"type":277,"content":618},[619],{"type":255,"content":620},[621,625],{"text":622,"type":259,"marks":623},"Заголовок 1. ",[624],{"type":317},{"text":626,"type":259},"Колір текстового стилю «Заголовок 1».",{"type":277,"content":628},[629],{"type":255,"content":630},[631,635],{"text":632,"type":259,"marks":633},"Заголовок 2. ",[634],{"type":317},{"text":636,"type":259},"Колір текстового стилю «Заголовок 2».",{"type":277,"content":638},[639],{"type":255,"content":640},[641,645],{"text":642,"type":259,"marks":643},"Заголовок 3. ",[644],{"type":317},{"text":646,"type":259},"Колір текстового стилю «Заголовок 3».",{"type":277,"content":648},[649],{"type":255,"content":650},[651,655],{"text":652,"type":259,"marks":653},"Заголовок 4. ",[654],{"type":317},{"text":656,"type":259},"Колір текстового стилю «Заголовок 4».",{"type":277,"content":658},[659],{"type":255,"content":660},[661,665],{"text":662,"type":259,"marks":663},"Параграф 1. ",[664],{"type":317},{"text":666,"type":259},"Колір першого стилю параграфа.",{"type":277,"content":668},[669],{"type":255,"content":670},[671,675],{"text":672,"type":259,"marks":673},"Параграф 2. ",[674],{"type":317},{"text":676,"type":259},"Колір другого стилю параграфа.",{"type":277,"content":678},[679],{"type":255,"content":680},[681,685],{"text":682,"type":259,"marks":683},"Параграф 3. ",[684],{"type":317},{"text":686,"type":259},"Колір третього стилю параграфа. У прикладі він візуально світліший за інші текстові кольори.",{"type":255,"content":688},[689],{"text":690,"type":259},"Налаштовуй колір відповідно до ролі тексту. Основний текст повинен легко читатися; менш помітний відтінок доречний для додаткових пояснень. Світлий текст на світлому фоні або темний на темному може зробити інформацію практично невидимою.",{"type":261,"attrs":692,"content":694},{"level":263,"id":693},"heading_2_5",[695],{"text":696,"type":259,"marks":697},"Кольори блока",[698],{"type":270,"attrs":699},{"color":272},{"type":274,"content":701},[702,708,714],{"type":277,"content":703},[704],{"type":255,"content":705},[706],{"text":707,"type":259},"У панелі «Кольори» розгорни групу «Блок».",{"type":277,"content":709},[710],{"type":255,"content":711},[712],{"text":713,"type":259},"Переглянь «Фон всього блоку» та «Колір фону».",{"type":277,"content":715},[716],{"type":255,"content":717},[718],{"text":719,"type":259},"Після зміни перевір секцію повністю: краї блока, внутрішню область і розміщені на ній елементи.",{"type":296,"attrs":721},{"id":722,"alt":723,"url":724,"type":296,"float":11,"width":301,"preview":12},"eca0e05e-725a-5e34-a24b-284db069bae0","Група «Блок» із полями «Фон всього блоку» та «Колір фону».","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2F5a03d8bd-b749-456b-ac1a-7b1fcfcf4e87.png",{"type":255,"content":726},[727],{"text":728,"type":259},"Скриншот 9. Група «Блок» із полями «Фон всього блоку» та «Колір фону».",{"type":307,"content":730},[731,741],{"type":277,"content":732},[733],{"type":255,"content":734},[735,739],{"text":736,"type":259,"marks":737},"Фон всього блоку. ",[738],{"type":317},{"text":740,"type":259},"Параметр фону секції як цілого. Його потрібно оцінювати разом із фоном сусідніх секцій.",{"type":277,"content":742},[743],{"type":255,"content":744},[745,749],{"text":746,"type":259,"marks":747},"Колір фону. ",[748],{"type":317},{"text":750,"type":259},"Окремий параметр фону, показаний нижче. Не вважай його автоматично тотожним першому: перевір, яка саме область змінюється у вибраному блоці.",{"type":255,"content":752},[753],{"text":754,"type":259},"Щоб секції візуально відділялися одна від одної, можна чергувати спокійні фони. Не потрібно робити кожен блок яскравим: сильний фон краще залишати для секцій, які мають привернути увагу.",{"type":261,"attrs":756,"content":758},{"level":263,"id":757},"heading_2_6",[759],{"text":760,"type":259,"marks":761},"Кольори кнопок",[762],{"type":270,"attrs":763},{"color":272},{"type":274,"content":765},[766,772,778,784],{"type":277,"content":767},[768],{"type":255,"content":769},[770],{"text":771,"type":259},"Розгорни групу «Кнопка».",{"type":277,"content":773},[774],{"type":255,"content":775},[776],{"text":777,"type":259},"Визнач, для якого стилю кнопки потрібна зміна: основного, другорядного чи додаткового.",{"type":277,"content":779},[780],{"type":255,"content":781},[782],{"text":783,"type":259},"Відкрий колір потрібного параметра.",{"type":277,"content":785},[786],{"type":255,"content":787},[788],{"text":789,"type":259},"Перевір напис і вигляд кнопки на відповідному фоні; для станів наведення наведи курсор на кнопку в перегляді сторінки.",{"type":296,"attrs":791},{"id":792,"alt":793,"url":794,"type":296,"float":11,"width":301,"preview":12},"2cc939a1-d1ae-53da-9004-e40fd7e4a3e6","Кольори основної, другорядної та додаткової кнопок.","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2Fe776a5da-4f3e-4532-ac8a-d56a133cb3ae.png",{"type":255,"content":796},[797],{"text":798,"type":259},"Скриншот 10. Кольори основної, другорядної та додаткової кнопок.",{"type":307,"content":800},[801,811,821,831,841,851],{"type":277,"content":802},[803],{"type":255,"content":804},[805,809],{"text":806,"type":259,"marks":807},"Основна: Фон. ",[808],{"type":317},{"text":810,"type":259},"Колір заливки основної кнопки.",{"type":277,"content":812},[813],{"type":255,"content":814},[815,819],{"text":816,"type":259,"marks":817},"Основна: Текст. ",[818],{"type":317},{"text":820,"type":259},"Колір напису на основній кнопці. Він має чітко відрізнятися від заливки.",{"type":277,"content":822},[823],{"type":255,"content":824},[825,829],{"text":826,"type":259,"marks":827},"Другорядна: Колір кнопки. ",[828],{"type":317},{"text":830,"type":259},"Базовий колір другорядної кнопки. У контурному варіанті цей колір використовується для контуру й тексту, а при наведенні — для фону.",{"type":277,"content":832},[833],{"type":255,"content":834},[835,839],{"text":836,"type":259,"marks":837},"Другорядна: Колір тексту при наведенні. ",[838],{"type":317},{"text":840,"type":259},"Колір напису під час наведення курсора на другорядну кнопку.",{"type":277,"content":842},[843],{"type":255,"content":844},[845,849],{"text":846,"type":259,"marks":847},"Додаткова: Колір кнопки. ",[848],{"type":317},{"text":850,"type":259},"Колір додаткової кнопки. Для текстового варіанта це колір напису.",{"type":277,"content":852},[853],{"type":255,"content":854},[855,859],{"text":856,"type":259,"marks":857},"Додаткова: Колір тексту при наведенні. ",[858],{"type":317},{"text":860,"type":259},"Окреме поле, показане в панелі. Перевір фактичний вигляд вибраного стилю у стані наведення, перш ніж покладатися на цей ефект.",{"type":255,"content":862},[863],{"text":864,"type":259},"Основну кнопку використовуй для головної дії секції, наприклад «Обрати навчання». Другорядна кнопка може вести до додаткової інформації, наприклад «Про програму». Коли всі кнопки однаково яскраві, відвідувачу складніше зрозуміти пріоритет дій.",{"type":255,"content":866},[867,870],{"text":353,"type":259,"marks":868},[869],{"type":317},{"text":871,"type":259},"Налаштування кольору не задає адресу переходу. Після оформлення потрібно окремо перевірити дію самої кнопки.",{"type":261,"attrs":873,"content":875},{"level":263,"id":874},"heading_2_7",[876],{"text":877,"type":259,"marks":878},"Колір значка та вибір відтінку",[879],{"type":270,"attrs":880},{"color":272},{"type":274,"content":882},[883,889,895,901,907],{"type":277,"content":884},[885],{"type":255,"content":886},[887],{"text":888,"type":259},"Розгорни групу «Значок».",{"type":277,"content":890},[891],{"type":255,"content":892},[893],{"text":894,"type":259},"У рядку «Колір значка» натисни кружок або стрілку праворуч.",{"type":277,"content":896},[897],{"type":255,"content":898},[899],{"text":900,"type":259},"Вибери базову роль палітри.",{"type":277,"content":902},[903],{"type":255,"content":904},[905],{"text":906,"type":259},"Вибери потрібний відтінок. За потреби розгорни «Більше відтінків».",{"type":277,"content":908},[909],{"type":255,"content":910},[911],{"text":912,"type":259},"Оціни контраст значка з фоном секції або картки.",{"type":296,"attrs":914},{"id":915,"alt":916,"url":917,"type":296,"float":11,"width":301,"preview":12},"d08443bb-b920-5b06-bafa-aedb465e8875","Група «Значок» з одним параметром — «Колір значка».","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2Fb8a93d10-6e21-4c59-8963-c964b0ef9698.png",{"type":255,"content":919},[920],{"text":921,"type":259},"Скриншот 11. Група «Значок» з одним параметром — «Колір значка».",{"type":296,"attrs":923},{"id":924,"alt":925,"url":926,"type":296,"float":11,"width":301,"preview":12},"dcbc731d-ed74-5afb-a273-1655d4d5539c","Відкритий вибір кольору: базові ролі палітри, відтінки та команда «Більше відтінків».","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2F75c07231-42a6-4480-b0dd-b781dbe27226.png",{"type":255,"content":928},[929],{"text":930,"type":259},"Скриншот 12. Відкритий вибір кольору: базові ролі палітри, відтінки та команда «Більше відтінків».",{"type":307,"content":932},[933,943,953,963,973,983,993],{"type":277,"content":934},[935],{"type":255,"content":936},[937,941],{"text":938,"type":259,"marks":939},"Light. ",[940],{"type":317},{"text":942,"type":259},"Світла базова роль палітри.",{"type":277,"content":944},[945],{"type":255,"content":946},[947,951],{"text":948,"type":259,"marks":949},"Primary. ",[950],{"type":317},{"text":952,"type":259},"Основна роль палітри. Її назва не означає, що всі основні кнопки обов’язково використовують саме її.",{"type":277,"content":954},[955],{"type":255,"content":956},[957,961],{"text":958,"type":259,"marks":959},"Secondary. ",[960],{"type":317},{"text":962,"type":259},"Друга базова роль палітри для узгодженого додаткового кольору.",{"type":277,"content":964},[965],{"type":255,"content":966},[967,971],{"text":968,"type":259,"marks":969},"Accent. ",[970],{"type":317},{"text":972,"type":259},"Акцентна роль для елементів, яким потрібно привернути увагу.",{"type":277,"content":974},[975],{"type":255,"content":976},[977,981],{"text":978,"type":259,"marks":979},"Dark. ",[980],{"type":317},{"text":982,"type":259},"Темна роль палітри. На скриншоті вона вибрана.",{"type":277,"content":984},[985],{"type":255,"content":986},[987,991],{"text":988,"type":259,"marks":989},"100, 300, 500, 700, 900. ",[990],{"type":317},{"text":992,"type":259},"Показані варіанти відтінків. Це позначення відтінків, а не відсотки прозорості. На прикладі вибрано 900.",{"type":277,"content":994},[995],{"type":255,"content":996},[997,1001],{"text":998,"type":259,"marks":999},"Більше відтінків. ",[1000],{"type":317},{"text":1002,"type":259},"Розгортає додатковий вибір відтінків у цьому інструменті.",{"type":255,"content":1004},[1005],{"text":1006,"type":259},"Використовуй кольори палітри послідовно: однакова роль значків у різних секціях допомагає зберігати єдиний стиль. Водночас перевіряй фон: один і той самий темний значок може бути добре видимий на світлій картці й губитися на темній.",{"type":261,"attrs":1008,"content":1010},{"level":263,"id":1009},"heading_2_8",[1011],{"text":1012,"type":259,"marks":1013},"Кольори акордеона",[1014],{"type":270,"attrs":1015},{"color":272},{"type":255,"content":1017},[1018],{"text":1019,"type":259},"Акордеон зручний для матеріалу, який подається окремими розгортаними пунктами, наприклад для запитань і відповідей. У стилях налаштовується оформлення його складових.",{"type":274,"content":1021},[1022,1028,1034],{"type":277,"content":1023},[1024],{"type":255,"content":1025},[1026],{"text":1027,"type":259},"У панелі «Кольори» знайди групу «Акордеон». Якщо вона нижче, прокрути праву панель.",{"type":277,"content":1029},[1030],{"type":255,"content":1031},[1032],{"text":1033,"type":259},"Розгорни групу та послідовно перевір кольори заголовка, тексту, значка, рамки та фону.",{"type":277,"content":1035},[1036],{"type":255,"content":1037},[1038],{"text":1039,"type":259},"Після оформлення переглянь закритий і відкритий пункт акордеона.",{"type":296,"attrs":1041},{"id":1042,"alt":1043,"url":1044,"type":296,"float":11,"width":301,"preview":12},"7e6e1112-395b-5b27-b76b-36d448fdd21e","Група «Акордеон» із п’ятьма параметрами кольору.","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2Facc49563-e425-451f-8f77-ec840144c1a3.png",{"type":255,"content":1046},[1047],{"text":1048,"type":259},"Скриншот 13. Група «Акордеон» із п’ятьма параметрами кольору.",{"type":307,"content":1050},[1051,1061,1071,1081,1091],{"type":277,"content":1052},[1053],{"type":255,"content":1054},[1055,1059],{"text":1056,"type":259,"marks":1057},"Колір заголовка. ",[1058],{"type":317},{"text":1060,"type":259},"Колір назви або запитання у пункті акордеона.",{"type":277,"content":1062},[1063],{"type":255,"content":1064},[1065,1069],{"text":1066,"type":259,"marks":1067},"Колір тексту. ",[1068],{"type":317},{"text":1070,"type":259},"Колір основного тексту, який читає відвідувач у розгорнутому пункті.",{"type":277,"content":1072},[1073],{"type":255,"content":1074},[1075,1079],{"text":1076,"type":259,"marks":1077},"Колір значка. ",[1078],{"type":317},{"text":1080,"type":259},"Колір індикатора, пов’язаного з розгортанням пункту.",{"type":277,"content":1082},[1083],{"type":255,"content":1084},[1085,1089],{"text":1086,"type":259,"marks":1087},"Колір рамки. ",[1088],{"type":317},{"text":1090,"type":259},"Колір межі пункту.",{"type":277,"content":1092},[1093],{"type":255,"content":1094},[1095,1099],{"text":1096,"type":259,"marks":1097},"Фон елементу. ",[1098],{"type":317},{"text":1100,"type":259},"Фон окремого пункту акордеона. Це не те саме, що фон усієї секції сторінки.",{"type":255,"content":1102},[1103,1106],{"text":353,"type":259,"marks":1104},[1105],{"type":317},{"text":1107,"type":259},"У показаному прикладі кілька параметрів акордеона мають світлі зразки кольору. Не копіюй їх механічно: перевір поєднання тексту, значка і фону на реальному пункті.",{"type":261,"attrs":1109,"content":1111},{"level":263,"id":1110},"heading_2_9",[1112],{"text":1113,"type":259,"marks":1114},"Кольори хедера",[1115],{"type":270,"attrs":1116},{"color":272},{"type":255,"content":1118},[1119],{"text":1120,"type":259},"Хедер — верхня частина сайту, тобто його шапка. Вона може містити назву або логотип, навігаційне меню та кнопку входу. У групі «Хедер» налаштовуються кольори цієї області та меню.",{"type":274,"content":1122},[1123,1129,1135,1141],{"type":277,"content":1124},[1125],{"type":255,"content":1126},[1127],{"text":1128,"type":259},"Розгорни групу «Хедер» у нижній частині панелі «Кольори».",{"type":277,"content":1130},[1131],{"type":255,"content":1132},[1133],{"text":1134,"type":259},"Перевір фон шапки та фон випадаючого меню.",{"type":277,"content":1136},[1137],{"type":255,"content":1138},[1139],{"text":1140,"type":259},"Налаштуй кольори пунктів меню і станів, які мають виділяти активний пункт.",{"type":277,"content":1142},[1143],{"type":255,"content":1144},[1145],{"text":1146,"type":259},"Переглянь шапку з відкритим меню, а також у мобільному вигляді.",{"type":296,"attrs":1148},{"id":1149,"alt":1150,"url":1151,"type":296,"float":11,"width":301,"preview":12},"1d653810-94c7-5020-81bf-bc7320217d79","Група «Хедер»: фони та кольори навігації.","https:\u002F\u002Fcloud.cs2.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2F4cb0ce63-1209-470d-bf6d-6428c121b485.png",{"type":255,"content":1153},[1154],{"text":1155,"type":259},"Скриншот 14. Група «Хедер»: фони та кольори навігації.",{"type":307,"content":1157},[1158,1168,1178,1188,1198],{"type":277,"content":1159},[1160],{"type":255,"content":1161},[1162,1166],{"text":1163,"type":259,"marks":1164},"Фон хедера. ",[1165],{"type":317},{"text":1167,"type":259},"Колір фону верхньої частини сайту.",{"type":277,"content":1169},[1170],{"type":255,"content":1171},[1172,1176],{"text":1173,"type":259,"marks":1174},"Колір фону випадаючого меню. ",[1175],{"type":317},{"text":1177,"type":259},"Фон області, яка з’являється при відкритті меню.",{"type":277,"content":1179},[1180],{"type":255,"content":1181},[1182,1186],{"text":1183,"type":259,"marks":1184},"Колір елементів меню. ",[1185],{"type":317},{"text":1187,"type":259},"Базовий колір пунктів навігації.",{"type":277,"content":1189},[1190],{"type":255,"content":1191},[1192,1196],{"text":1193,"type":259,"marks":1194},"Колір активних елементів меню. ",[1195],{"type":317},{"text":1197,"type":259},"Колір, яким виділяються активні пункти.",{"type":277,"content":1199},[1200],{"type":255,"content":1201},[1202,1206],{"text":1203,"type":259,"marks":1204},"Два нижні рядки дочірніх елементів. ",[1205],{"type":317},{"text":1207,"type":259},"На скриншоті обидва мають однаковий підпис «Колір активних дочірніх елементів меню», хоча показують різні кольори. Для точного розмежування цих двох налаштувань перевір їхній вплив на вкладене меню по одному.",{"type":261,"attrs":1209,"content":1211},{"level":263,"id":1210},"heading_2_10",[1212],{"text":1213,"type":259,"marks":1214},"Збережи й перевір результат",[1215],{"type":270,"attrs":1216},{"color":272},{"type":274,"content":1218},[1219,1225,1231,1237,1243],{"type":277,"content":1220},[1221],{"type":255,"content":1222},[1223],{"text":1224,"type":259},"Завершивши налаштування, натисни «Зберегти» внизу панелі стилів.",{"type":277,"content":1226},[1227],{"type":255,"content":1228},[1229],{"text":1230,"type":259},"Якщо не хочеш застосовувати поточні зміни панелі, скористайся «Скасувати».",{"type":277,"content":1232},[1233],{"type":255,"content":1234},[1235],{"text":1236,"type":259},"Перевір головний заголовок, звичайний текст, кнопки, значки та меню на світлому й темному фоні, якщо використовуєш обидва.",{"type":277,"content":1238},[1239],{"type":255,"content":1240},[1241],{"text":1242,"type":259},"Перемкни редактор на телефон і перевір читабельність.",{"type":277,"content":1244},[1245],{"type":255,"content":1246},[1247],{"text":1248,"type":259},"Перевір стан збереження сторінки у верхній панелі. Публікацію виконуй окремо, коли весь матеріал готовий.",{"type":255,"content":1250},[1251],{"text":1252,"type":259},"Стрілка у верхньому лівому куті панелі повертає до попереднього рівня налаштувань, а хрестик праворуч закриває панель. Для явного завершення редагування використовуй її кнопки «Зберегти» або «Скасувати».",{"type":261,"attrs":1254,"content":1256},{"level":263,"id":1255},"heading_2_11",[1257],{"text":1258,"type":259,"marks":1259},"Як уникнути типових помилок оформлення",[1260],{"type":270,"attrs":1261},{"color":272},{"type":307,"content":1263},[1264,1270,1276,1282,1288,1294],{"type":277,"content":1265},[1266],{"type":255,"content":1267},[1268],{"text":1269,"type":259},"Текст зливається з фоном: перевір колір текстового стилю і фон тієї самої секції.",{"type":277,"content":1271},[1272],{"type":255,"content":1273},[1274],{"text":1275,"type":259},"Змінено не ту тему: перед редагуванням перевір назву теми над групами параметрів.",{"type":277,"content":1277},[1278],{"type":255,"content":1279},[1280],{"text":1281,"type":259},"Усі дії виглядають однаково важливими: залиш основний стиль для головної кнопки, а додаткові дії оформи спокійніше.",{"type":277,"content":1283},[1284],{"type":255,"content":1285},[1286],{"text":1287,"type":259},"Значок зник на темному фоні: вибери для нього світліший відтінок або іншу контрастну роль палітри.",{"type":277,"content":1289},[1290],{"type":255,"content":1291},[1292],{"text":1293,"type":259},"Після зміни загальних стилів інша сторінка виглядає інакше: перевір сторінки, які використовують спільне оформлення.",{"type":277,"content":1295},[1296],{"type":255,"content":1297},[1298],{"text":1299,"type":259},"На комп’ютері все читається, а на телефоні заголовок надто довгий: перевір мобільний вигляд і скороти формулювання, якщо потрібно."]