Як працювати з елементами сайту

Ви можете створювати багатосторінкові сайти з різними секціями, колонками та віджетами у блоковому конструкторі сайту SendPulse. Розглянемо, з яких елементів складається сайт, як їх додавати, переміщувати та редагувати.

Ознайомлення з елементами сайту

Ви можете використовувати такі елементи для створення сайту: блок (Block), секція (Section), колонка (Column), віджет (Widget) та макет (Layout). Блоки, секції, макети та колонки підходять для розподілу контенту на вашому сайті, а віджети використовуються для додавання функціональних елементів.

Блок

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

Щоб додати новий блок, наведіть на верхню або нижню межу блоку та натисніть + (Додати блок) (Add block).

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

Щоб додати пустий блок, натисніть Пустий блок в кінці списку категорій.

Секція

Елемент Секція надає можливість розміщувати новий ряд стовпчиків в одному блоці. Щоб додати секцію, наведіть на нижню лінію під колонками або верхню над колонками та натисніть + (Додати секцію) (Add section).

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

Колонка

Елементи Колонка дозволяє розміщувати віджети по вертикалі. Ви можете додати до 6 колонок в один ряд у кожній секції.

Щоб додати колонку, наведіть на ліву або праву межу елемента та натисніть + (Додати колонку). (Add column)

Віджет

Віджети – це функціональні елементи сайту, призначені для додавання інформації та взаємодії з відвідувачами.

Наприклад, за допомогою віджетів Текст (Text), Кнопка (Button) та Картинка (Picture) ви можете скласти секцію про можливості сервісу, зібрати підписників завдяки Форма (Form) або Чат-бот (Chatbot), відповісти на часті запитання користувачів з FAQ, а за допомогою віджету Оплати (Payment) створити інтернет-магазин.

Читайте докладніше: Додавання елементів.

Щоб додати віджет, натисніть всередині стовпчика на піктограму + (Додати віджет) і виберіть віджет з панелі.

Ви можете додавати необмежену кількість віджетів до однієї колонки.

Макет

Елемент Макет використовується в блоках, секціях чи колонках для розділення контенту на чітко окреслені області.

Щоб додати макет, натисніть всередині блоку, колонки, секції на піктограму + (Додати віджет) і натисніть Макет (Layout).

Виберіть розміщення областей серед запропонованих варіантів.

Далі ви можете додавати в кожній області віджети вертикально один за одним — для цього натисніть + та виберіть віджет.

Щоб відредагувати відстань між областями, наведіть на макет, натисніть на три крапки, що з'являться внизу, та виберіть Редагувати (Edit). У вікні праворуч введіть значення у пікселях для вертикальних та горизонтальних відступів.

Переміщення елементів сайту

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

Щоб перемістити елемент, наведіть на нього у верхньому правому куті, затисніть відповідну іконку і перемістіть в потрібне місце.

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

Блоки можна переміщати по вертикалі вгору або вниз.

Копіювання елементів сайту

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

Наведіть у правому кутку необхідного елементу і виберіть Копіювати (Duplicate). Поряд із поточним елементом буде додано новий елемент з усім вмістом та налаштуваннями, який ви зможете відредагувати та перемістити на сторінці.

Для блоків можна вибрати розширені опції копіювання:

Видалення елементів сайту

Ви можете видаляти додані елементи сайту. Щоб видалити блок, секцію або колонку, наведіть на елемент у верхньому правому куті та виберіть Видалити (Delete).

Щоб видалити віджет, наведіть на елемент у верхньому лівому куті та виберіть Видалити (Delete).

Приховання блоку

Також ви можете приховувати окремі блоки для мобільної та десктопної версії порізно, щоб оптимізувати відображення контенту, пришвидшити завантаження та поліпшити взаємодію на маленьких екранах.

Наведіть на блок та натисніть Налаштування блоку (Block settings).

У полі Приховати блок на (Hide blok on) оберіть іконку для якої версії приховати блок: десктопної чи мобільної.

ID блоку та віджета

Для кожного блоку та віджету передбачено ідентифікатор (ID), який визначає елемент на сторінці. З його допомогою ви можете:

• налаштовувати якір для елемента на сторінці (працює тільки для блоків)*;
• застосовувати стилі та скрипти для окремих елементів;
• відстежувати події щодо елемента, щоб встановлювати цілі в аналітиці;
• налаштовувати показ попапів після натискання на потрібний елемент.

Щоб скопіювати ID, перейдіть до налаштування елемента та натисніть на його ID – назва автоматично збережеться у буфер обміну.

Щоб відредагувати ID, натисніть значок олівця. Для назви рекомендується використовувати латинські літери та цифри без пробілів. Можна додати до 256 символів. Також ID має бути унікальним для всієї сторінки сайту.

Оновлено: 13.11.2024