Як працювати з блоками на сторінці

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

Розрізняй блок і елементи всередині нього

Блок — це ціла секція сторінки. Елементи — її складові: заголовок, абзац, зображення, кнопки, значки або інший вміст. Наприклад, перший екран на скриншоті містить кілька текстових елементів, дві кнопки й фото; секція переваг містить заголовок і три картки.

Зверни увагу. Перед дією перевір, що саме вибрано: увесь блок чи окремий елемент. Дія над блоком може стосуватися всієї секції разом з її вмістом.

Редагуй і доповнюй інформацію в кожному блоці

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

У блоках із колонками можна не лише замінювати готовий вміст, а й додавати нові елементи. Наприклад, під описом першого екрана можна розмістити ще один абзац, кнопку, список переваг, файл або відео. На скриншоті вибрана ліва колонка, її межу позначено помаранчевою рамкою, а всередині відкрито меню додавання.

Скриншот 24. Додавання елемента всередині вибраної колонки: помаранчева рамка, кнопка «+» та меню типів вмісту.

Як змінити наявну інформацію

1. Знайди блок, який потрібно доповнити або відредагувати.

2. Вибери потрібний елемент усередині блока: наприклад, заголовок, опис, зображення або кнопку.

3. Відкрий його редагування та заміни демонстраційний вміст власним. Для тексту це може бути нове формулювання, для зображення — інше фото, для кнопки — відповідний напис і дія.

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

5. Збережи зміни та перевір мобільний вигляд.

Як додати новий елемент у блок

1. Наведи курсор на потрібну колонку або вибери її. Орієнтуйся на рамку навколо області редагування.

2. Натисни помаранчеву круглу кнопку «+» всередині цієї області.

3. У меню вибери потрібний тип елемента. Якщо він не поміщається у видимій частині меню, прокрути меню вниз.

4. Заповни вміст нового елемента: текст, зображення, файл, відео або іншу потрібну інформацію.

5. Перевір, у якій колонці та в якому місці з’явився елемент.

6. Збережи зміни після завершення редагування.

Зверни увагу. Кнопка «+» усередині колонки додає елемент до наявного блока. Кнопка «Додати блок» між секціями додає окрему секцію сторінки. Спочатку визнач, чи тобі потрібне доповнення поточної секції, чи нова секція.

Які елементи можна додати

У показаному меню є вісім типів елементів. Їх можна поєднувати відповідно до змісту секції; не потрібно створювати окремий блок для кожного нового абзацу чи кнопки.

Скриншот 25. Верхня частина меню елементів: «Кнопка», «Список», «Файл», «Текст» і «Значок».

• Кнопка. Додає дію для відвідувача: наприклад, «Переглянути програму», «Обрати курс» або «Зв’язатися з нами». Після додавання перевір і підпис, і налаштований перехід або дію.

• Список. Допомагає подати кілька пов’язаних пунктів: переваги навчання, результати або склад програми. Напиши для кожного пункту зрозумілий зміст; не змішуй в одному списку непов’язані теми.

• Файл. Додає матеріал для завантаження зі сховища. Приклади: програма курсу у PDF, чекліст або додатковий документ. Перевір, що вибрано правильний файл і відвідувачу зрозуміло, що саме він завантажує.

• Текст. Додає заголовок, абзац або інший текстовий вміст. Використовуй для пояснення деталей, яких не було в шаблоні: формату, тривалості, умов чи наступного кроку.

• Значок. Додає окремий графічний значок для візуального акценту. Обирай зрозумілий символ і перевір його контраст із фоном.

Скриншот 26. Нижня частина меню елементів: «Зображення», «Лінія» та «Відео».

• Зображення. Додає фотографію або ілюстрацію всередині блока. Наприклад, фото викладача, приклад роботи або схему. Після додавання перевір пропорції, чіткість і вигляд на телефоні.

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

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

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

1. Додай шаблон першого екрана з текстом ліворуч і фото праворуч.

2. У лівій колонці заміни заголовок і короткий опис власною пропозицією.

3. Натисни «+» у цій колонці та вибери «Текст», щоб додати пояснення формату навчання.

4. Ще раз відкрий меню й вибери «Кнопка», якщо потрібна додаткова дія.

5. Якщо хочеш дати відвідувачу програму для завантаження, додай «Файл» і вибери відповідний документ.

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

Той самий принцип застосовуй до інших секцій із колонками: редагуй готові елементи та додавай нові там, де це потрібно. Спеціалізовані блоки, наприклад форма або галерея, мають власні засоби наповнення; точний набір інструментів залежить від їхнього типу.

Знайди панель дій блока

1. Прокрути сторінку до секції, яку хочеш змінити.

2. Наведи курсор на потрібний блок або вибери його у редакторі.

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

4. Перед натисканням звір дію за підказкою інтерфейсу, якщо кнопка має лише значок.

Скриншот 23. Межа між секціями, кнопка «Додати блок» та панель піктограм вибраного блока.

Що видно на панелі

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

• Олівець. Редагування вибраного блока: перехід до його параметрів або вмісту.

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

• Закладка. Дія збереження блока для подальшого використання. У бібліотеці є окрема добірка «Збережені блоки».

• Два аркуші. Створення копії блока.

• Червоний кошик. Видалення вибраного блока. Перед натисканням переконайся, що видаляєш саме потрібну секцію.

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

Додай секцію між наявними блоками

1. Знайди межу між двома секціями.

2. Натисни «Додати блок» у цьому місці. На скриншоті кнопка розташована між першим екраном і секцією переваг.

3. У бібліотеці вибери добірку або тематичну категорію.

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

5. Перевір положення нового блока у сторінці й заміни його демонстраційний вміст.

Наприклад, між вступною пропозицією та перевагами можна додати коротке пояснення формату навчання. Перед додаванням переконайся, що нова секція не повторює зміст сусідніх блоків.

Як спланувати редагування наявного блока

1. Визнач мету секції: представити пропозицію, пояснити переваги, показати курси чи зібрати звернення.

2. Підготуй короткий заголовок, основний текст і потрібні зображення.

3. Вибери відповідний блок і відкрий його редагування.

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

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

6. Перевір мобільний вигляд і збереження сторінки.

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

Перевірка перед копіюванням або переміщенням

• Вибрано правильний блок, а не сусідню секцію.

• Після переміщення порядок читання залишається зрозумілим: спочатку пропозиція, потім пояснення й наступний крок.

• У копії замінено повторюваний текст і перевірено кнопки та посилання.

• Нова секція не створює зайвих повторів змісту.

• Після операції збережено зміни та перевірено вигляд сторінки.

Підсумкова перевірка сторінки

1. Прочитай сторінку згори донизу як відвідувач: чи зрозуміло, що пропонується, для кого і що робити далі.

2. Перевір усі демонстраційні значення, включно з контактами й цінами.

3. Переконайся, що фото та значки відображаються, а текст контрастує з фоном.

4. Перевір підписи й переходи кнопок.

5. Перемкнися на вигляд телефона та переглянь кожну секцію.

6. Збережи зміни та перевір індикатор збереження.

7. Коли вміст і оформлення готові, опублікуй сторінку та перевір публічний результат.