Як додавати блоки та користуватися шаблонами

Сторінка складається з блоків — окремих секцій із текстами, зображеннями, кнопками та іншими елементами. У бібліотеці можна вибрати готове оформлення й замінити його вміст або почати з базового блока в розділі «З нуля».

Відкрий бібліотеку блоків

1. У редакторі сторінки знайди кнопку «Додати блок». На порожній сторінці вона розташована в центральній робочій області.

2. Натисни кнопку. Відкриється вікно «Додати блок».

3. Вибери добірку або категорію ліворуч.

4. Переглянь попередній вигляд потрібного шаблону.

5. Натисни «Обрати» біля потрібного блока, щоб додати його до сторінки.

Скриншот 15. Вікно «Додати блок»: добірки, категорії, пошук, фільтри та попередній вигляд шаблонів.

Бібліотека може відкриватися у великому діалоговому вікні. Усередині є окремі області прокручування: список категорій ліворуч і перелік блоків праворуч. Якщо потрібної категорії або шаблону не видно, прокрути відповідну область.

Добірки у верхній частині меню

• З нуля. Базові блоки для власного вмісту. Спочатку обери структуру, потім наповни її.

• Форми. Добірка форм, анкет та опитувань.

• Усі блоки. Загальна бібліотека готових і базових варіантів.

• Збережені блоки. Окремий розділ для повторного використання збережених блоків. На прикладі він порожній.

Біля добірок показано лічильники. На наданих скриншотах «З нуля» містить 4 блоки, «Форми» — 9, «Усі блоки» — 125, «Збережені блоки» — 0. Це стан бібліотеки на момент знімання, а не постійні обмеження кількості.

Пошук і фільтри

1. Якщо знаєш призначення блока, почни з категорії ліворуч.

2. Для пошуку всередині поточної добірки введи запит у поле «Назва або тема блока».

3. За потреби звузь результати через «Тип блока». Початкове значення — «Усі типи».

4. Використай «Оформлення», щоб шукати потрібний варіант дизайну. Початкове значення — «Усі варіанти».

5. Якщо шукаєш саме категорію, використовуй окреме поле «Знайти категорію» ліворуч.

• Пошук у добірці. Пошук блоків у поточному розділі бібліотеки.

• Тип блока. Фільтр за типом структури. Наприклад, у добірці форм на скриншоті вибрано «Форми».

• Оформлення. Фільтр варіантів дизайну. На картках прикладів видно позначку «Світлі».

• Пошук категорії. Допомагає знайти тематичний розділ у лівому меню. Це окремий пошук від пошуку самих блоків.

Зверни увагу. Якщо потрібного блока не видно, перевір вибрану добірку, текст пошуку й активні фільтри. Пошук у вузькій категорії може не показати блок з іншого розділу.

Створення з базового блока

1. Вибери «З нуля» у верхній частині лівого меню.

2. Знайди базову структуру, яка підходить під твій зміст.

3. Натисни «Обрати» біля потрібного варіанта.

4. Після додавання наповни блок власним текстом і матеріалами.

Скриншот 16. Добірка «З нуля» з прикладами Empty Column Block та Empty Text Block.

• Empty Column Block. Базовий блок типу «Колонки». Його можна використати як основу композиції з елементами.

• Empty Text Block. Базовий блок типу «Текст». Попередній вигляд містить демонстраційні заголовки й текст, які потрібно замінити.

Обирай базовий блок, якщо маєш власну структуру секції. Якщо потрібно швидше отримати готову композицію, почни з тематичного шаблону. Назва «З нуля» не означає, що у кожному прев’ю буде зовсім порожній екран: у показаних прикладах є демонстраційний вміст.

Добірка форм

1. У лівому меню бібліотеки вибери «Форми».

2. Переглянь форму в попередньому вигляді: її запитання, поля та кнопку.

3. Натисни «Обрати» біля потрібного шаблону.

4. Після додавання заміни демонстраційні запитання, пояснення та текст кнопки відповідно до мети своєї форми.

Скриншот 17. Добірка «Форми» та попередній вигляд шаблону Basic Form.

У шаблоні Basic Form видно багаторядкове поле «Опишіть ваші навички», однорядкове поле «Як ви знайшли наш курс», прапорець з текстом погодження та кнопку «Подати». Біля полів є позначки обов’язковості. Це демонстраційний приклад — він допомагає оцінити структуру форми перед додаванням.

Зверни увагу. У бібліотеці форми описані як знайомство, анкети й опитування, відповіді на які збираються без перевірки викладачем. Не сприймай таку форму як автоматично налаштований тест з оцінюванням. Перед використанням перевір власні запитання та правила обов’язковості.

Як читати картку шаблону

Скриншот 18. Збільшений вигляд «Усі блоки»: назва, тип, оформлення, категорія, прев’ю та кнопка «Обрати».

• Назва. Пояснює композицію або призначення шаблону: наприклад, «Школа · фото праворуч».

• Тип. Позначає структуру, наприклад «Колонки» або «Текст».

• Оформлення. Характеризує варіант вигляду, наприклад «Світлі».

• Категорія. Вказує на тематичну групу, наприклад «Перший екран».

• Попередній вигляд. Допомагає оцінити співвідношення тексту та фото, кількість карток, кнопки й загальну композицію.

• Обрати. Додає вибраний блок до сторінки.

Не обирай шаблон лише за демонстраційним текстом. Насамперед оціни структуру: чи вистачить місця для твоєї назви, скільки зображень потрібно, чи є відповідні кнопки та скільки пунктів містить секція.

Категорії та їхнє призначення

Категорії допомагають знайти секцію за її завданням на сторінці. На скриншотах видно такі розділи:

• Перший екран. Вступна секція: головна пропозиція, коротке пояснення, фото та ключові дії.

• Про школу та продукт. Розповідь про школу, її підхід або конкретну пропозицію.

• Переваги та можливості. Пояснення користі та особливостей навчання.

• Курси та продукти. Представлення програм, курсів або інших пропозицій.

• Програма та етапи. Послідовність навчання, зміст програми чи етапи роботи.

• Цифри та досягнення. Ключові показники та результати.

• Команда та експерти. Представлення викладачів і спеціалістів.

• Відгуки та історії. Досвід учнів або клієнтів.

• Тарифи та пакети. Порівняння варіантів участі та їхнього наповнення.

• Галереї. Добірки фотографій та інших зображень.

• Слайдери. Послідовність слайдів або карток.

• Запитання й відповіді. Відповіді на часті запитання відвідувачів.

• Форми та заявки. Секції для збору звернень або відповідей.

• Статті та матеріали. Представлення корисного контенту.

• Події та розклад. Анонси подій і інформація про час їх проведення.

• Партнери та сертифікати. Представлення партнерів і підтверджень кваліфікації.

• Заклики до дії. Окрема секція, що пропонує відвідувачу зробити наступний крок.

• Контакти та футери. Контактна інформація та завершальні секції сторінки.

Це орієнтири для вибору. Наприклад, шаблон карток із перевагами можна наповнити іншими короткими пунктами, якщо така композиція відповідає твоєму змісту.

Приклад першого екрана

1. Вибери категорію «Перший екран».

2. Знайди шаблон «Школа · фото праворуч».

3. Переглянь його структуру: короткий вступ, великий заголовок, опис, дві кнопки, додатковий підпис і фото праворуч.

4. Натисни «Обрати». Після додавання заміни демонстраційні тексти й фото та налаштуй дії кнопок.

Скриншот 19. Шаблон «Школа · фото праворуч» у категорії «Перший екран».

Для власного першого екрана сформулюй одну основну пропозицію. Наприклад: заголовок «Навчіться створювати дизайн для власних проєктів», опис формату та дві дії — «Обрати курс» і «Переглянути програму». Це приклад змісту, який потрібно адаптувати до реальної пропозиції школи.

Приклад секції переваг

1. Вибери «Переваги та можливості».

2. Знайди шаблон «Три переваги · картки».

3. Переконайся, що маєш три окремі переваги, які можеш пояснити коротко.

4. Додай шаблон і заміни заголовок секції, значки, назви та описи карток.

Скриншот 20. Шаблон «Три переваги · картки»: заголовок секції та три картки зі значками.

У кожній картці розкрий одну думку. Замість загального «Висока якість» краще пояснити конкретну користь: практичні завдання, зворотний зв’язок ментора або доступ до матеріалів з телефона. Перевір, щоб тексти карток були приблизно співмірні за довжиною.

Приклад каталогу курсів

1. Вибери «Курси та продукти».

2. Переглянь шаблон «Каталог · три курси».

3. Оціни наповнення карток: фото, тривалість, кількість уроків, назва, опис, ціна та перехід до курсу.

4. Додай відповідний шаблон і заміни всі демонстраційні значення власними.

Скриншот 21. Шаблон каталогу з трьома картками курсів, цінами й діями «Про курс».

Зверни увагу. Цей шаблон у бібліотеці позначений типом «Колонки». Наявність намальованих карток курсів не означає, що вони автоматично під’єднані до реальних курсів школи. Перевір зміст карток, ціни й адреси переходів; не залишай демонстраційні значення.

Приклад контактної секції

1. Прокрути перелік категорій і вибери «Контакти та футери».

2. Знайди «Контакти · три способи зв’язку».

3. Додай шаблон та заміни адресу електронної пошти, телефон і графік роботи.

4. Якщо на сторінці потрібен інший формат контактів, переглянь сусідні шаблони цієї категорії.

Скриншот 22. Категорія «Контакти та футери» та шаблон з електронною поштою, телефоном і графіком роботи.

У демонстраційному шаблоні використано hello@example.com та умовний номер +380 XX XXX XX XX. Обов’язково заміни їх перед публікацією. Додавання контактного блока до сторінки саме по собі не підтверджує зміну спільного підвалу всього сайту.

Приклад послідовності блоків для сторінки школи

• Перший екран: кому й у чому допомагає школа, короткий опис і головна кнопка.

• Переваги: три конкретні причини обрати цей формат навчання.

• Курси та продукти: доступні програми й переходи до детальної інформації.

• Запитання й відповіді: умови, які важливо зрозуміти перед рішенням.

• Контакти або форма заявки: зрозумілий наступний крок для відвідувача.

Це приклад структури, а не обов’язкова послідовність. Додавай лише ті секції, які допомагають людині зрозуміти пропозицію та зробити потрібну дію.

Перевірка після додавання шаблону

• Усі заголовки й пояснення стосуються твоєї школи, а демонстраційний текст прибрано.

• Зображення відповідають змісту; немає порожніх або зламаних зображень.

• Ціни, тривалість, кількість уроків, контакти й графік роботи актуальні.

• Кнопки мають зрозумілі підписи та ведуть туди, куди очікує відвідувач.

• Колір тексту, фони та значки добре поєднуються.

• Секція читабельна у вигляді для комп’ютера та телефона.

• Зміни збережено; сторінку опубліковано лише тоді, коли вона готова.