[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-base-categories":3,"knowledge-base-article-website-builder-styli-saitu-pl":251},[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,245],{"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,"name":247,"alias":248,"icon":249,"iconColor":11,"iconBg":11,"parent":11,"is_published":12,"parents":250,"has_children":20},"625df7ce-785e-470e-8c3c-4d2469ffa51b","Westudy GPT","Westudy-GPT","hugeicons:chat-gpt",[],{"uuid":252,"title":253,"description":254,"is_published":12,"alias":255,"category":70,"category_alias":72,"category_name":71,"date":256,"content":257},"35713bb5-3fcd-4d90-b08a-9111ebbf38a1","Як налаштувати шрифти та кольори сайту","Панель стилів сайту, шрифти, кольорові теми й параметри тексту, блоків, кнопок, значків, акордеона та шапки.","website-builder-styli-saitu","2026-10-13",{"type":258,"content":259},"doc",[260,266,279,301,308,312,356,364,373,399,404,408,460,464,473,477,509,514,518,570,577,586,612,617,621,693,697,706,726,731,735,757,761,770,796,801,805,867,871,878,887,919,924,928,933,937,1009,1013,1022,1026,1046,1051,1055,1107,1114,1123,1127,1153,1158,1162,1214,1223,1255,1259,1268],{"type":261,"content":262},"paragraph",[263],{"text":264,"type":265},"Стилі сайту задають спільне оформлення сторінок: шрифти, кольори та вигляд елементів. Узгоджені стилі допомагають зберігати однаковий вигляд заголовків, текстів і кнопок, коли ти додаєш нові блоки. У цьому матеріалі розглянуто панелі, які видно на скриншотах, і пояснено кожне показане налаштування кольору.","text",{"type":267,"attrs":268,"content":271},"heading",{"level":269,"id":270},2,"heading_2_1",[272],{"text":273,"type":265,"marks":274},"Відкрий стилі сайту",[275],{"type":276,"attrs":277},"textColor",{"color":278},"#EF8754",{"type":280,"content":281},"ordered_list",[282,289,295],{"type":283,"content":284},"list_item",[285],{"type":261,"content":286},[287],{"text":288,"type":265},"Відкрий потрібну сторінку в редакторі.",{"type":283,"content":290},[291],{"type":261,"content":292},[293],{"text":294,"type":265},"У верхній панелі натисни значок пензлика праворуч від перемикача комп’ютера й телефона.",{"type":283,"content":296},[297],{"type":261,"content":298},[299],{"text":300,"type":265},"У панелі «Стилі сайту» вибери потрібний розділ: «Шрифти», «Кольори», «Кнопки» або «Форми».",{"type":302,"attrs":303},"image_block",{"id":304,"alt":305,"url":306,"type":302,"float":11,"width":307,"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":261,"content":309},[310],{"text":311,"type":265},"Скриншот 5. Панель «Стилі сайту» з чотирма розділами оформлення.",{"type":313,"content":314},"bullet_list",[315,326,336,346],{"type":283,"content":316},[317],{"type":261,"content":318},[319,324],{"text":320,"type":265,"marks":321},"Шрифти. ",[322],{"type":323},"strong",{"text":325,"type":265},"Параметри текстового оформлення. На картці є приклад заголовка та звичайного параграфа.",{"type":283,"content":327},[328],{"type":261,"content":329},[330,334],{"text":331,"type":265,"marks":332},"Кольори. ",[333],{"type":323},{"text":335,"type":265},"Палітра й набори кольорів для тексту, блоків, кнопок та інших елементів.",{"type":283,"content":337},[338],{"type":261,"content":339},[340,344],{"text":341,"type":265,"marks":342},"Кнопки. ",[343],{"type":323},{"text":345,"type":265},"Окремий розділ стилю кнопок. У картці показано приклади заповненої та контурної кнопки.",{"type":283,"content":347},[348],{"type":261,"content":349},[350,354],{"text":351,"type":265,"marks":352},"Форми. ",[353],{"type":323},{"text":355,"type":265},"Окремий розділ оформлення форм. У картці показано приклад поля введення та кнопки надсилання.",{"type":261,"content":357},[358,362],{"text":359,"type":265,"marks":360},"Зверни увагу. ",[361],{"type":323},{"text":363,"type":265},"Це «Стилі сайту», тому зміни можуть впливати на різні сторінки й блоки, які використовують ці стилі. Після зміни спільного оформлення переглянь основні сторінки, а не лише поточний фрагмент.",{"type":267,"attrs":365,"content":367},{"level":269,"id":366},"heading_2_2",[368],{"text":369,"type":265,"marks":370},"Налаштування шрифтів",[371],{"type":276,"attrs":372},{"color":278},{"type":280,"content":374},[375,381,387,393],{"type":283,"content":376},[377],{"type":261,"content":378},[379],{"text":380,"type":265},"У «Стилях сайту» відкрий «Шрифти».",{"type":283,"content":382},[383],{"type":261,"content":384},[385],{"text":386,"type":265},"Переглянь зразок заголовка та параграфа у верхній картці.",{"type":283,"content":388},[389],{"type":261,"content":390},[391],{"text":392,"type":265},"Вибери групу, яку потрібно налаштувати: «Розміри текстів», «Заголовки», «Параграфи» або «Кнопка».",{"type":283,"content":394},[395],{"type":261,"content":396},[397],{"text":398,"type":265},"Після внесення потрібних змін скористайся «Зберегти». Переглянь результат на текстах різної довжини та в мобільному вигляді.",{"type":302,"attrs":400},{"id":401,"alt":402,"url":403,"type":302,"float":11,"width":307,"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":261,"content":405},[406],{"text":407,"type":265},"Скриншот 6. Панель «Шрифти»: зразок Manrope та групи текстових налаштувань.",{"type":313,"content":409},[410,420,430,440,450],{"type":283,"content":411},[412],{"type":261,"content":413},[414,418],{"text":415,"type":265,"marks":416},"Зразок у верхній картці. ",[417],{"type":323},{"text":419,"type":265},"Показує поєднання заголовка та звичайного тексту. На прикладі для обох показано Manrope. Це налаштування конкретного сайту, а не обов’язкова вимога.",{"type":283,"content":421},[422],{"type":261,"content":423},[424,428],{"text":425,"type":265,"marks":426},"Розміри текстів. ",[427],{"type":323},{"text":429,"type":265},"Група для керування розмірами текстових стилів. Оціни загальну різницю між великими заголовками, підзаголовками та основним текстом.",{"type":283,"content":431},[432],{"type":261,"content":433},[434,438],{"text":435,"type":265,"marks":436},"Заголовки. ",[437],{"type":323},{"text":439,"type":265},"Група оформлення заголовків. Заголовок має допомагати читачеві зрозуміти тему секції.",{"type":283,"content":441},[442],{"type":261,"content":443},[444,448],{"text":445,"type":265,"marks":446},"Параграфи. ",[447],{"type":323},{"text":449,"type":265},"Група оформлення основного тексту. Перевіряй її на кількох абзацах, а не лише на одному короткому рядку.",{"type":283,"content":451},[452],{"type":261,"content":453},[454,458],{"text":455,"type":265,"marks":456},"Кнопка. ",[457],{"type":323},{"text":459,"type":265},"Текстове оформлення написів на кнопках. Воно має залишатися читабельним для коротких і довших підписів.",{"type":261,"content":461},[462],{"text":463,"type":265},"Для початку обери небагато текстових стилів і використовуй їх послідовно. Наприклад, великий заголовок — для першого екрана, менший — для секцій, параграф — для пояснень. Якщо текст перестає вміщуватися на телефоні, перевір не лише розмір, а й довжину самого формулювання.",{"type":267,"attrs":465,"content":467},{"level":269,"id":466},"heading_2_3",[468],{"text":469,"type":265,"marks":470},"Як пов’язані палітра й кольорова тема",[471],{"type":276,"attrs":472},{"color":278},{"type":261,"content":474},[475],{"text":476,"type":265},"Палітра — набір базових кольорів і відтінків. Кольорова тема визначає, як ці кольори застосовуються до тексту, блоків, кнопок, значків та інших частин сторінки. Наприклад, для світлого фону потрібен темний текст, а для темного — світлий.",{"type":280,"content":478},[479,485,491,497,503],{"type":283,"content":480},[481],{"type":261,"content":482},[483],{"text":484,"type":265},"Повернися до «Стилів сайту» та відкрий «Кольори».",{"type":283,"content":486},[487],{"type":261,"content":488},[489],{"text":490,"type":265},"У верхній частині знайди картку палітри з дією «Редагувати палітру».",{"type":283,"content":492},[493],{"type":261,"content":494},[495],{"text":496,"type":265},"Нижче відкрий список тем.",{"type":283,"content":498},[499],{"type":261,"content":500},[501],{"text":502,"type":265},"Вибери тему, параметри якої хочеш переглянути або змінити.",{"type":283,"content":504},[505],{"type":261,"content":506},[507],{"text":508,"type":265},"Розгорни потрібну групу налаштувань під вибраною темою.",{"type":302,"attrs":510},{"id":511,"alt":512,"url":513,"type":302,"float":11,"width":307,"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":261,"content":515},[516],{"text":517,"type":265},"Скриншот 7. Список кольорових тем: «Світла тема», «Темна тема» та «Варіативна тема».",{"type":313,"content":519},[520,530,540,550,560],{"type":283,"content":521},[522],{"type":261,"content":523},[524,528],{"text":525,"type":265,"marks":526},"Редагувати палітру. ",[527],{"type":323},{"text":529,"type":265},"Перехід до базових кольорів сайту. У поточному прикладі палітра містить світлий, фіолетові, бірюзовий і темний кольори.",{"type":283,"content":531},[532],{"type":261,"content":533},[534,538],{"text":535,"type":265,"marks":536},"Світла тема. ",[537],{"type":323},{"text":539,"type":265},"Набір оформлення, показаний у списку на світлому фоні.",{"type":283,"content":541},[542],{"type":261,"content":543},[544,548],{"text":545,"type":265,"marks":546},"Темна тема. ",[547],{"type":323},{"text":549,"type":265},"Набір оформлення, показаний у списку на темному фоні.",{"type":283,"content":551},[552],{"type":261,"content":553},[554,558],{"text":555,"type":265,"marks":556},"Варіативна тема. ",[557],{"type":323},{"text":559,"type":265},"Додатковий набір оформлення; у прикладі його картка має кольоровий градієнт.",{"type":283,"content":561},[562],{"type":261,"content":563},[564,568],{"text":565,"type":265,"marks":566},"Системна тема. ",[567],{"type":323},{"text":569,"type":265},"Позначка під назвою кожної з трьох тем у показаному інтерфейсі.",{"type":261,"content":571},[572,575],{"text":359,"type":265,"marks":573},[574],{"type":323},{"text":576,"type":265},"Вибір теми у цій панелі визначає, налаштування якої теми ти редагуєш. Не сприймай сам вибір у списку як підтвердження того, що весь сайт уже перемкнувся на цю тему.",{"type":267,"attrs":578,"content":580},{"level":269,"id":579},"heading_2_4",[581],{"text":582,"type":265,"marks":583},"Кольори тексту",[584],{"type":276,"attrs":585},{"color":278},{"type":280,"content":587},[588,594,600,606],{"type":283,"content":589},[590],{"type":261,"content":591},[592],{"text":593,"type":265},"У панелі «Кольори» вибери потрібну тему.",{"type":283,"content":595},[596],{"type":261,"content":597},[598],{"text":599,"type":265},"Розгорни групу «Текст».",{"type":283,"content":601},[602],{"type":261,"content":603},[604],{"text":605,"type":265},"Натисни кольоровий кружок або стрілку праворуч від потрібного текстового стилю.",{"type":283,"content":607},[608],{"type":261,"content":609},[610],{"text":611,"type":265},"Вибери колір і перевір, чи добре він читається на фоні відповідних блоків.",{"type":302,"attrs":613},{"id":614,"alt":615,"url":616,"type":302,"float":11,"width":307,"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":261,"content":618},[619],{"text":620,"type":265},"Скриншот 8. Група «Текст»: окремі кольори заголовків і параграфів.",{"type":313,"content":622},[623,633,643,653,663,673,683],{"type":283,"content":624},[625],{"type":261,"content":626},[627,631],{"text":628,"type":265,"marks":629},"Заголовок 1. ",[630],{"type":323},{"text":632,"type":265},"Колір текстового стилю «Заголовок 1».",{"type":283,"content":634},[635],{"type":261,"content":636},[637,641],{"text":638,"type":265,"marks":639},"Заголовок 2. ",[640],{"type":323},{"text":642,"type":265},"Колір текстового стилю «Заголовок 2».",{"type":283,"content":644},[645],{"type":261,"content":646},[647,651],{"text":648,"type":265,"marks":649},"Заголовок 3. ",[650],{"type":323},{"text":652,"type":265},"Колір текстового стилю «Заголовок 3».",{"type":283,"content":654},[655],{"type":261,"content":656},[657,661],{"text":658,"type":265,"marks":659},"Заголовок 4. ",[660],{"type":323},{"text":662,"type":265},"Колір текстового стилю «Заголовок 4».",{"type":283,"content":664},[665],{"type":261,"content":666},[667,671],{"text":668,"type":265,"marks":669},"Параграф 1. ",[670],{"type":323},{"text":672,"type":265},"Колір першого стилю параграфа.",{"type":283,"content":674},[675],{"type":261,"content":676},[677,681],{"text":678,"type":265,"marks":679},"Параграф 2. ",[680],{"type":323},{"text":682,"type":265},"Колір другого стилю параграфа.",{"type":283,"content":684},[685],{"type":261,"content":686},[687,691],{"text":688,"type":265,"marks":689},"Параграф 3. ",[690],{"type":323},{"text":692,"type":265},"Колір третього стилю параграфа. У прикладі він візуально світліший за інші текстові кольори.",{"type":261,"content":694},[695],{"text":696,"type":265},"Налаштовуй колір відповідно до ролі тексту. Основний текст повинен легко читатися; менш помітний відтінок доречний для додаткових пояснень. Світлий текст на світлому фоні або темний на темному може зробити інформацію практично невидимою.",{"type":267,"attrs":698,"content":700},{"level":269,"id":699},"heading_2_5",[701],{"text":702,"type":265,"marks":703},"Кольори блока",[704],{"type":276,"attrs":705},{"color":278},{"type":280,"content":707},[708,714,720],{"type":283,"content":709},[710],{"type":261,"content":711},[712],{"text":713,"type":265},"У панелі «Кольори» розгорни групу «Блок».",{"type":283,"content":715},[716],{"type":261,"content":717},[718],{"text":719,"type":265},"Переглянь «Фон всього блоку» та «Колір фону».",{"type":283,"content":721},[722],{"type":261,"content":723},[724],{"text":725,"type":265},"Після зміни перевір секцію повністю: краї блока, внутрішню область і розміщені на ній елементи.",{"type":302,"attrs":727},{"id":728,"alt":729,"url":730,"type":302,"float":11,"width":307,"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":261,"content":732},[733],{"text":734,"type":265},"Скриншот 9. Група «Блок» із полями «Фон всього блоку» та «Колір фону».",{"type":313,"content":736},[737,747],{"type":283,"content":738},[739],{"type":261,"content":740},[741,745],{"text":742,"type":265,"marks":743},"Фон всього блоку. ",[744],{"type":323},{"text":746,"type":265},"Параметр фону секції як цілого. Його потрібно оцінювати разом із фоном сусідніх секцій.",{"type":283,"content":748},[749],{"type":261,"content":750},[751,755],{"text":752,"type":265,"marks":753},"Колір фону. ",[754],{"type":323},{"text":756,"type":265},"Окремий параметр фону, показаний нижче. Не вважай його автоматично тотожним першому: перевір, яка саме область змінюється у вибраному блоці.",{"type":261,"content":758},[759],{"text":760,"type":265},"Щоб секції візуально відділялися одна від одної, можна чергувати спокійні фони. Не потрібно робити кожен блок яскравим: сильний фон краще залишати для секцій, які мають привернути увагу.",{"type":267,"attrs":762,"content":764},{"level":269,"id":763},"heading_2_6",[765],{"text":766,"type":265,"marks":767},"Кольори кнопок",[768],{"type":276,"attrs":769},{"color":278},{"type":280,"content":771},[772,778,784,790],{"type":283,"content":773},[774],{"type":261,"content":775},[776],{"text":777,"type":265},"Розгорни групу «Кнопка».",{"type":283,"content":779},[780],{"type":261,"content":781},[782],{"text":783,"type":265},"Визнач, для якого стилю кнопки потрібна зміна: основного, другорядного чи додаткового.",{"type":283,"content":785},[786],{"type":261,"content":787},[788],{"text":789,"type":265},"Відкрий колір потрібного параметра.",{"type":283,"content":791},[792],{"type":261,"content":793},[794],{"text":795,"type":265},"Перевір напис і вигляд кнопки на відповідному фоні; для станів наведення наведи курсор на кнопку в перегляді сторінки.",{"type":302,"attrs":797},{"id":798,"alt":799,"url":800,"type":302,"float":11,"width":307,"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":261,"content":802},[803],{"text":804,"type":265},"Скриншот 10. Кольори основної, другорядної та додаткової кнопок.",{"type":313,"content":806},[807,817,827,837,847,857],{"type":283,"content":808},[809],{"type":261,"content":810},[811,815],{"text":812,"type":265,"marks":813},"Основна: Фон. ",[814],{"type":323},{"text":816,"type":265},"Колір заливки основної кнопки.",{"type":283,"content":818},[819],{"type":261,"content":820},[821,825],{"text":822,"type":265,"marks":823},"Основна: Текст. ",[824],{"type":323},{"text":826,"type":265},"Колір напису на основній кнопці. Він має чітко відрізнятися від заливки.",{"type":283,"content":828},[829],{"type":261,"content":830},[831,835],{"text":832,"type":265,"marks":833},"Другорядна: Колір кнопки. ",[834],{"type":323},{"text":836,"type":265},"Базовий колір другорядної кнопки. У контурному варіанті цей колір використовується для контуру й тексту, а при наведенні — для фону.",{"type":283,"content":838},[839],{"type":261,"content":840},[841,845],{"text":842,"type":265,"marks":843},"Другорядна: Колір тексту при наведенні. ",[844],{"type":323},{"text":846,"type":265},"Колір напису під час наведення курсора на другорядну кнопку.",{"type":283,"content":848},[849],{"type":261,"content":850},[851,855],{"text":852,"type":265,"marks":853},"Додаткова: Колір кнопки. ",[854],{"type":323},{"text":856,"type":265},"Колір додаткової кнопки. Для текстового варіанта це колір напису.",{"type":283,"content":858},[859],{"type":261,"content":860},[861,865],{"text":862,"type":265,"marks":863},"Додаткова: Колір тексту при наведенні. ",[864],{"type":323},{"text":866,"type":265},"Окреме поле, показане в панелі. Перевір фактичний вигляд вибраного стилю у стані наведення, перш ніж покладатися на цей ефект.",{"type":261,"content":868},[869],{"text":870,"type":265},"Основну кнопку використовуй для головної дії секції, наприклад «Обрати навчання». Другорядна кнопка може вести до додаткової інформації, наприклад «Про програму». Коли всі кнопки однаково яскраві, відвідувачу складніше зрозуміти пріоритет дій.",{"type":261,"content":872},[873,876],{"text":359,"type":265,"marks":874},[875],{"type":323},{"text":877,"type":265},"Налаштування кольору не задає адресу переходу. Після оформлення потрібно окремо перевірити дію самої кнопки.",{"type":267,"attrs":879,"content":881},{"level":269,"id":880},"heading_2_7",[882],{"text":883,"type":265,"marks":884},"Колір значка та вибір відтінку",[885],{"type":276,"attrs":886},{"color":278},{"type":280,"content":888},[889,895,901,907,913],{"type":283,"content":890},[891],{"type":261,"content":892},[893],{"text":894,"type":265},"Розгорни групу «Значок».",{"type":283,"content":896},[897],{"type":261,"content":898},[899],{"text":900,"type":265},"У рядку «Колір значка» натисни кружок або стрілку праворуч.",{"type":283,"content":902},[903],{"type":261,"content":904},[905],{"text":906,"type":265},"Вибери базову роль палітри.",{"type":283,"content":908},[909],{"type":261,"content":910},[911],{"text":912,"type":265},"Вибери потрібний відтінок. За потреби розгорни «Більше відтінків».",{"type":283,"content":914},[915],{"type":261,"content":916},[917],{"text":918,"type":265},"Оціни контраст значка з фоном секції або картки.",{"type":302,"attrs":920},{"id":921,"alt":922,"url":923,"type":302,"float":11,"width":307,"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":261,"content":925},[926],{"text":927,"type":265},"Скриншот 11. Група «Значок» з одним параметром — «Колір значка».",{"type":302,"attrs":929},{"id":930,"alt":931,"url":932,"type":302,"float":11,"width":307,"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":261,"content":934},[935],{"text":936,"type":265},"Скриншот 12. Відкритий вибір кольору: базові ролі палітри, відтінки та команда «Більше відтінків».",{"type":313,"content":938},[939,949,959,969,979,989,999],{"type":283,"content":940},[941],{"type":261,"content":942},[943,947],{"text":944,"type":265,"marks":945},"Light. ",[946],{"type":323},{"text":948,"type":265},"Світла базова роль палітри.",{"type":283,"content":950},[951],{"type":261,"content":952},[953,957],{"text":954,"type":265,"marks":955},"Primary. ",[956],{"type":323},{"text":958,"type":265},"Основна роль палітри. Її назва не означає, що всі основні кнопки обов’язково використовують саме її.",{"type":283,"content":960},[961],{"type":261,"content":962},[963,967],{"text":964,"type":265,"marks":965},"Secondary. ",[966],{"type":323},{"text":968,"type":265},"Друга базова роль палітри для узгодженого додаткового кольору.",{"type":283,"content":970},[971],{"type":261,"content":972},[973,977],{"text":974,"type":265,"marks":975},"Accent. ",[976],{"type":323},{"text":978,"type":265},"Акцентна роль для елементів, яким потрібно привернути увагу.",{"type":283,"content":980},[981],{"type":261,"content":982},[983,987],{"text":984,"type":265,"marks":985},"Dark. ",[986],{"type":323},{"text":988,"type":265},"Темна роль палітри. На скриншоті вона вибрана.",{"type":283,"content":990},[991],{"type":261,"content":992},[993,997],{"text":994,"type":265,"marks":995},"100, 300, 500, 700, 900. ",[996],{"type":323},{"text":998,"type":265},"Показані варіанти відтінків. Це позначення відтінків, а не відсотки прозорості. На прикладі вибрано 900.",{"type":283,"content":1000},[1001],{"type":261,"content":1002},[1003,1007],{"text":1004,"type":265,"marks":1005},"Більше відтінків. ",[1006],{"type":323},{"text":1008,"type":265},"Розгортає додатковий вибір відтінків у цьому інструменті.",{"type":261,"content":1010},[1011],{"text":1012,"type":265},"Використовуй кольори палітри послідовно: однакова роль значків у різних секціях допомагає зберігати єдиний стиль. Водночас перевіряй фон: один і той самий темний значок може бути добре видимий на світлій картці й губитися на темній.",{"type":267,"attrs":1014,"content":1016},{"level":269,"id":1015},"heading_2_8",[1017],{"text":1018,"type":265,"marks":1019},"Кольори акордеона",[1020],{"type":276,"attrs":1021},{"color":278},{"type":261,"content":1023},[1024],{"text":1025,"type":265},"Акордеон зручний для матеріалу, який подається окремими розгортаними пунктами, наприклад для запитань і відповідей. У стилях налаштовується оформлення його складових.",{"type":280,"content":1027},[1028,1034,1040],{"type":283,"content":1029},[1030],{"type":261,"content":1031},[1032],{"text":1033,"type":265},"У панелі «Кольори» знайди групу «Акордеон». Якщо вона нижче, прокрути праву панель.",{"type":283,"content":1035},[1036],{"type":261,"content":1037},[1038],{"text":1039,"type":265},"Розгорни групу та послідовно перевір кольори заголовка, тексту, значка, рамки та фону.",{"type":283,"content":1041},[1042],{"type":261,"content":1043},[1044],{"text":1045,"type":265},"Після оформлення переглянь закритий і відкритий пункт акордеона.",{"type":302,"attrs":1047},{"id":1048,"alt":1049,"url":1050,"type":302,"float":11,"width":307,"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":261,"content":1052},[1053],{"text":1054,"type":265},"Скриншот 13. Група «Акордеон» із п’ятьма параметрами кольору.",{"type":313,"content":1056},[1057,1067,1077,1087,1097],{"type":283,"content":1058},[1059],{"type":261,"content":1060},[1061,1065],{"text":1062,"type":265,"marks":1063},"Колір заголовка. ",[1064],{"type":323},{"text":1066,"type":265},"Колір назви або запитання у пункті акордеона.",{"type":283,"content":1068},[1069],{"type":261,"content":1070},[1071,1075],{"text":1072,"type":265,"marks":1073},"Колір тексту. ",[1074],{"type":323},{"text":1076,"type":265},"Колір основного тексту, який читає відвідувач у розгорнутому пункті.",{"type":283,"content":1078},[1079],{"type":261,"content":1080},[1081,1085],{"text":1082,"type":265,"marks":1083},"Колір значка. ",[1084],{"type":323},{"text":1086,"type":265},"Колір індикатора, пов’язаного з розгортанням пункту.",{"type":283,"content":1088},[1089],{"type":261,"content":1090},[1091,1095],{"text":1092,"type":265,"marks":1093},"Колір рамки. ",[1094],{"type":323},{"text":1096,"type":265},"Колір межі пункту.",{"type":283,"content":1098},[1099],{"type":261,"content":1100},[1101,1105],{"text":1102,"type":265,"marks":1103},"Фон елементу. ",[1104],{"type":323},{"text":1106,"type":265},"Фон окремого пункту акордеона. Це не те саме, що фон усієї секції сторінки.",{"type":261,"content":1108},[1109,1112],{"text":359,"type":265,"marks":1110},[1111],{"type":323},{"text":1113,"type":265},"У показаному прикладі кілька параметрів акордеона мають світлі зразки кольору. Не копіюй їх механічно: перевір поєднання тексту, значка і фону на реальному пункті.",{"type":267,"attrs":1115,"content":1117},{"level":269,"id":1116},"heading_2_9",[1118],{"text":1119,"type":265,"marks":1120},"Кольори хедера",[1121],{"type":276,"attrs":1122},{"color":278},{"type":261,"content":1124},[1125],{"text":1126,"type":265},"Хедер — верхня частина сайту, тобто його шапка. Вона може містити назву або логотип, навігаційне меню та кнопку входу. У групі «Хедер» налаштовуються кольори цієї області та меню.",{"type":280,"content":1128},[1129,1135,1141,1147],{"type":283,"content":1130},[1131],{"type":261,"content":1132},[1133],{"text":1134,"type":265},"Розгорни групу «Хедер» у нижній частині панелі «Кольори».",{"type":283,"content":1136},[1137],{"type":261,"content":1138},[1139],{"text":1140,"type":265},"Перевір фон шапки та фон випадаючого меню.",{"type":283,"content":1142},[1143],{"type":261,"content":1144},[1145],{"text":1146,"type":265},"Налаштуй кольори пунктів меню і станів, які мають виділяти активний пункт.",{"type":283,"content":1148},[1149],{"type":261,"content":1150},[1151],{"text":1152,"type":265},"Переглянь шапку з відкритим меню, а також у мобільному вигляді.",{"type":302,"attrs":1154},{"id":1155,"alt":1156,"url":1157,"type":302,"float":11,"width":307,"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":261,"content":1159},[1160],{"text":1161,"type":265},"Скриншот 14. Група «Хедер»: фони та кольори навігації.",{"type":313,"content":1163},[1164,1174,1184,1194,1204],{"type":283,"content":1165},[1166],{"type":261,"content":1167},[1168,1172],{"text":1169,"type":265,"marks":1170},"Фон хедера. ",[1171],{"type":323},{"text":1173,"type":265},"Колір фону верхньої частини сайту.",{"type":283,"content":1175},[1176],{"type":261,"content":1177},[1178,1182],{"text":1179,"type":265,"marks":1180},"Колір фону випадаючого меню. ",[1181],{"type":323},{"text":1183,"type":265},"Фон області, яка з’являється при відкритті меню.",{"type":283,"content":1185},[1186],{"type":261,"content":1187},[1188,1192],{"text":1189,"type":265,"marks":1190},"Колір елементів меню. ",[1191],{"type":323},{"text":1193,"type":265},"Базовий колір пунктів навігації.",{"type":283,"content":1195},[1196],{"type":261,"content":1197},[1198,1202],{"text":1199,"type":265,"marks":1200},"Колір активних елементів меню. ",[1201],{"type":323},{"text":1203,"type":265},"Колір, яким виділяються активні пункти.",{"type":283,"content":1205},[1206],{"type":261,"content":1207},[1208,1212],{"text":1209,"type":265,"marks":1210},"Два нижні рядки дочірніх елементів. ",[1211],{"type":323},{"text":1213,"type":265},"На скриншоті обидва мають однаковий підпис «Колір активних дочірніх елементів меню», хоча показують різні кольори. Для точного розмежування цих двох налаштувань перевір їхній вплив на вкладене меню по одному.",{"type":267,"attrs":1215,"content":1217},{"level":269,"id":1216},"heading_2_10",[1218],{"text":1219,"type":265,"marks":1220},"Збережи й перевір результат",[1221],{"type":276,"attrs":1222},{"color":278},{"type":280,"content":1224},[1225,1231,1237,1243,1249],{"type":283,"content":1226},[1227],{"type":261,"content":1228},[1229],{"text":1230,"type":265},"Завершивши налаштування, натисни «Зберегти» внизу панелі стилів.",{"type":283,"content":1232},[1233],{"type":261,"content":1234},[1235],{"text":1236,"type":265},"Якщо не хочеш застосовувати поточні зміни панелі, скористайся «Скасувати».",{"type":283,"content":1238},[1239],{"type":261,"content":1240},[1241],{"text":1242,"type":265},"Перевір головний заголовок, звичайний текст, кнопки, значки та меню на світлому й темному фоні, якщо використовуєш обидва.",{"type":283,"content":1244},[1245],{"type":261,"content":1246},[1247],{"text":1248,"type":265},"Перемкни редактор на телефон і перевір читабельність.",{"type":283,"content":1250},[1251],{"type":261,"content":1252},[1253],{"text":1254,"type":265},"Перевір стан збереження сторінки у верхній панелі. Публікацію виконуй окремо, коли весь матеріал готовий.",{"type":261,"content":1256},[1257],{"text":1258,"type":265},"Стрілка у верхньому лівому куті панелі повертає до попереднього рівня налаштувань, а хрестик праворуч закриває панель. Для явного завершення редагування використовуй її кнопки «Зберегти» або «Скасувати».",{"type":267,"attrs":1260,"content":1262},{"level":269,"id":1261},"heading_2_11",[1263],{"text":1264,"type":265,"marks":1265},"Як уникнути типових помилок оформлення",[1266],{"type":276,"attrs":1267},{"color":278},{"type":313,"content":1269},[1270,1276,1282,1288,1294,1300],{"type":283,"content":1271},[1272],{"type":261,"content":1273},[1274],{"text":1275,"type":265},"Текст зливається з фоном: перевір колір текстового стилю і фон тієї самої секції.",{"type":283,"content":1277},[1278],{"type":261,"content":1279},[1280],{"text":1281,"type":265},"Змінено не ту тему: перед редагуванням перевір назву теми над групами параметрів.",{"type":283,"content":1283},[1284],{"type":261,"content":1285},[1286],{"text":1287,"type":265},"Усі дії виглядають однаково важливими: залиш основний стиль для головної кнопки, а додаткові дії оформи спокійніше.",{"type":283,"content":1289},[1290],{"type":261,"content":1291},[1292],{"text":1293,"type":265},"Значок зник на темному фоні: вибери для нього світліший відтінок або іншу контрастну роль палітри.",{"type":283,"content":1295},[1296],{"type":261,"content":1297},[1298],{"text":1299,"type":265},"Після зміни загальних стилів інша сторінка виглядає інакше: перевір сторінки, які використовують спільне оформлення.",{"type":283,"content":1301},[1302],{"type":261,"content":1303},[1304],{"text":1305,"type":265},"На комп’ютері все читається, а на телефоні заголовок надто довгий: перевір мобільний вигляд і скороти формулювання, якщо потрібно."]