Конструктор сторінок: секції, блоки, мобільна версія — покроковий гайд

Як влаштований конструктор: сторінки, секції і блоки

Сайт магазину в Bazify складається зі сторінок. Кожна сторінка — це набір секцій, які йдуть одна за одною зверху вниз: головний банер, сітка товарів, текстовий блок, питання й відповіді, заклик до дії, форма заявки, фото-колаж. Секція, у свою чергу, може містити блоки: наприклад, у шапці це «Логотип», «Меню» і «Кошик», а в підвалі — «Колонка підвалу».

• Сторінка: «Головна», «Про нас» чи будь-яка інша, яку ви створите.
• Секція: великий смуговий елемент сторінки. Її додають, переставляють, ховають і дублюють.
• Блок: дрібніший елемент усередині секції, наприклад пункт меню чи кнопка шапки.
• Тема: спільні кольори, шрифти й вигляд кнопок та карток, які діють на всьому сайті.

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

Як відкрити редактор і що в ньому де

У кабінеті відкрийте «Інтернет-магазин» → «Основний сайт». На вкладці «Огляд» поруч із прев’ю магазину є кнопка «Редагувати»: вона веде в редактор. Там же видно статус сайту, наприклад «Є неопубліковані зміни», і таблицю «Сторінки і шаблони» з кнопками редагування біля кожного рядка.

Редактор складається з трьох зон. Ліворуч — вузька смуга режимів і список секцій сторінки. У центрі — сама сторінка, така, якою її побачить покупець. Праворуч з’являється панель налаштувань, коли ви обираєте секцію чи блок. Угорі розташовані кнопки «← Кабінет», назва поточної сторінки, перемикач пристроїв, «Скасувати» і «Повторити», «Історія змін», «Поділитись чернеткою», статус збереження, «Переглянути» та «Опублікувати».

Порада: налаштування магазину (домен, оплата, доставка) не в редакторі, а в кабінеті. У конструкторі ви працюєте лише з виглядом сайту — це менше заплутує.

Як додати, переставити і сховати секцію

Унизу групи «Шаблон» є кнопка «Додати секцію». Вона відкриває бібліотеку: угорі — пошук секції і рядок «✨ Згенерувати», де ви описуєте секцію словами, а Bazi створює її в чернетці. Нижче йдуть «Готові секції», розбиті на категорії: банери, колекції, товари, бренд і довіра, текст і медіа, форми й контакти, структура. Обрана секція одразу з’являється на сторінці.

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

Плаваюча панель над вибраною секцією має ще й кнопку «Змінити словами»: напишіть, наприклад, «зроби заголовок коротшим», і Bazi перепише текст. Якщо AI-модуль вимкнений для магазину, генерація секцій недоступна, і бібліотека повідомить про це.

Як налаштувати секцію і блоки

Клікніть секцію у списку або прямо на сторінці — праворуч відкриються її налаштування. Вони розкладені на вкладки: «Контент» (тексти, фото, кнопки, а також вигляд секції, наприклад схема і колір фону), «Стиль», «Розкладка» (ширина, вирівнювання, відступи, видимість на пристроях) і «Анімація». У «Контенті» зверху є поле «Змінити словами» для швидкої правки через Bazi.

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

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

Мобільна версія: перемикач Комп’ютер, Планшет, Телефон

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

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

• На вкладці «Розкладка» є прапорці «Сховати на мобільному» і «Сховати на десктопі». Так секція показується лише там, де потрібно.
• Відступи секції можна задавати окремо для обраного пристрою. Біля поля є маленька іконка пристрою; крапка на ній означає, що значення для цього пристрою відрізняється від основного. Клік по іконці перемикає пристрій угорі.
• Перед публікацією кнопка «Переглянути» відкриває чернетку сторінки в новій вкладці — її можна відкрити з телефона й перевірити по-справжньому.

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

Кольори і шрифти: налаштування теми

Загальний вигляд сайту змінюється в одному місці: клікніть на лівій смузі «Налаштування теми». Налаштування зібрані в групи, які розгортаються: «Бренд» («Логотип і фавікон», «Кольори», «Стиль теми»), «Шрифти», «Макет», «Товари», «Кошик і оформлення», «Кнопки і поля» та «Власний CSS». Угорі є пошук серед налаштувань.

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

Група «Власний CSS» призначена для тих, хто знається на стилях. Якщо ви не пишете код, вона вам не потрібна: основних налаштувань вистачає.

Чернетка, перегляд і публікація: як безпечно змінювати сайт

Усі зміни в редакторі потрапляють у чернетку, а не на живий сайт. Покупці бачать їх тільки після публікації. Редактор зберігає чернетку автоматично, а статус угорі показує, що відбувається: «Зберігаю…», «Збережено», «Є зміни» (чернетку збережено, але на сайті їх ще немає) або «Не збережено — повторюю», якщо зберегти не вдалося.

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

• «Переглянути» — відкриває чернетку сторінки в новій вкладці.
• «Поділитись чернеткою» — створює посилання, за яким партнер чи колега побачить чернетку, а не опубліковану вітрину. Дію посилання можна обмежити: 24 години, 7 днів або без обмежень.
• «Історія змін» — список опублікованих версій сторінки, які можна порівняти з поточною чернеткою і відновити.

Увага: посилання «Поділитись чернеткою» без обмеження часу дає доступ до чернетки кожному, хто його має. Для показу партнеру обирайте 24 години чи 7 днів і не публікуйте посилання відкрито.

Сторінки і шаблони сторінок

Перемикач сторінок — кнопка з назвою сторінки посередині верхньої панелі. У списку є пошук і групи: «Головна», «Сторінки», «Товари», «Колекції», «Кошик», «Оформлення», «Інші шаблони» та «Шапка / Підвал». Нову сторінку додає пункт «Створити сторінку», а непотрібну прибирає «Прибрати сторінку».

Шаблони — це спільний вигляд для багатьох сторінок. «Макет товару» задає, як виглядає картка будь-якого товару, «Макет колекції» — сторінка категорії, а ще є «Макет кошика», «Макет оформлення», «Макет пошуку» і «Макет сторінки 404». Один раз налаштували — і зміни діють для всього каталогу.

Як зібрати першу сторінку: покроково

1. 1

   Відкрийте редактор

   Кабінет → «Інтернет-магазин» → «Основний сайт» → «Редагувати».

2. 2

   Налаштуйте тему

   На лівій смузі натисніть «Налаштування теми», задайте логотип, «Кольори» і «Шрифти», потім поверніться в «Секції».

3. 3

   Додайте секції

   У групі «Шаблон» натисніть «Додати секцію», знайдіть потрібну в «Готових секціях» або опишіть її в рядку «✨ Згенерувати».

4. 4

   Розставте порядок

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

5. 5

   Заповніть вміст

   Клікніть секцію і на вкладці «Контент» змініть тексти, фото й кнопки. Не залишайте порожніх заголовків.

6. 6

   Перевірте телефон

   Натисніть «Телефон» угорі. За потреби на вкладці «Розкладка» сховайте зайве на мобільному.

7. 7

   Перегляньте чернетку

   Кнопка «Переглянути» відкриє сторінку в новій вкладці; за потреби надішліть партнеру посилання через «Поділитись чернеткою».

8. 8

   Опублікуйте

   Натисніть «Опублікувати», перегляньте «Перевірку перед публікацією» і підтвердіть. Після цього зміни побачать покупці.

Типові помилки в конструкторі

• Правити секції до налаштування теми. Тема змінює вигляд усіх сторінок, і ручні правки доведеться повторювати.
• Не дивитися на телефон. Заголовок у два рядки на комп’ютері на смартфоні може зайняти пів екрана.
• Забути опублікувати. Якщо вгорі стоїть «Є зміни», покупці ще бачать стару версію.
• Ставити забагато секцій на головній. Покупцю потрібні банер, товари, довіра (відгуки, питання й відповіді) і заклик до дії; решту винесіть на окремі сторінки.
• Залишити фото без опису. Редактор нагадає про це у «Перевірці перед публікацією», бо опис потрібен і пошуковикам, і незрячим відвідувачам.

Спробуйте конструктор Bazify безкоштовно

Конструктор сторінок, CRM і підключення доставки вже в одному кабінеті. Зареєструйтеся на bazify.top, відкрийте редактор і спробуйте Bazify безкоштовно: чернетка нічого не зламає на сайті, доки ви самі не натиснете «Опублікувати».

Часті питання

Чи можна змінювати сайт, не ризикуючи зламати його для покупців?

Так. Усі зміни в редакторі потрапляють у чернетку й зберігаються автоматично. Покупці бачать їх лише після того, як ви натиснете «Опублікувати».

Як перевірити, як сайт виглядає на телефоні?

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

Чи можна сховати секцію тільки на телефоні?

Так. Оберіть секцію, відкрийте вкладку «Розкладка» і поставте прапорець «Сховати на мобільному». Аналогічно є «Сховати на десктопі».

Що робити, якщо я випадково видалив секцію або зробив зайву зміну?

Скористайтеся кнопками «Скасувати» і «Повторити» на верхній панелі. Якщо сторінку вже опубліковано, у «Історії змін» можна порівняти версії та відновити попередню.

Де налаштувати домен, оплату і доставку?

Не в редакторі, а в кабінеті. З редактора на них веде значок «Налаштування магазину» ↗ на лівій смузі.

Читайте також

• РішенняКонструктор інтернет-магазину
• РішенняАльтернатива Shopify
• БлогЯк створити інтернет-магазин: план
• Блог10 фішок Bazify, про які ви могли не знати
• БлогBazi — AI-помічник: що вміє і як ним користуватись