Як створити сайт

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

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

Перейдіть на вкладку «Сайти» (Sites) та натисніть «Створити сайт» (Create website).

Виберіть «Сайт» (Website).

Потім натисніть «Новий сайт» (New site), щоб створити сайт з нуля.

Також ви можете відібрати показ готових шаблонів за категоріями чи мовою шаблонів, вибрати шаблон та адаптувати його під свої цілі. Натисніть шаблон, перегляньте дизайн і внизу натисніть кнопку «Редагувати» (Edit).

Загальний стиль сторінки

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

Налаштування загального стилю сайту застосовується до всіх сторінок. Докладніше: «Як налаштувати стиль сторінки» та «Налаштування зовнішнього вигляду елементів».

Налаштування елементів

Створіть структуру

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

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

Виберіть відповідний блок із бібліотеки. Щоб перейти до неї, натисніть «Додати блок».

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

Якщо ви вже додали елемент на майбутній сайт і хочете перейти до наступного, наведіть на блок і натисніть «+ Додати блок».

Докладніше про механіку створення сайту та налаштування зовнішнього вигляду елементів у статті «Як додавати елементи сайту».

Додайте віджети

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

Меню

Ви можете додати меню, за допомогою якого користувач зможе перейти на сторінку сайту. Додайте віджет «Меню» (Menu) у верхню частину сторінки. У режимі редагування віджета можна побачити приклади меню та налаштувати його.

Щоб додати новий пункт до меню, натисніть «Додати» (Add). Потім натисніть значок олівця. Введіть нову назву пункту. Виберіть сторінку вашого сайту або вкажіть посилання (Link), адресу електронної пошти (Email), номер телефону (Phone) чи якір на інший блок Anchor). Також ви можете вибрати, чи відкривати посилання в новому вікні або в тому ж.

Читайте також: «Як додати меню сайту»

Кнопка

Використовується для додавання кнопок із посиланнями на інші сайти, сторінки, блоки або для зв’язку через телефон або емейл.

У панелі редагування віджета «Кнопка» (Button) можна додати додаткові кнопки або вирівняти елемент кнопки щодо простору в колонці.

Щоб додати додаткову кнопку до рядка колонки, натисніть «Додати» (Add). Щоб налаштувати кнопку, натисніть значок редагування.

Введіть назву кнопки та підказку в описі. Виберіть тип: посилання, телефон, email або якір, а потім вставте дані.

Розглянемо призначення кожного типу посилання:

Виберіть стиль кнопки. За замовчуванням стилі підтягуються із загального стилю сторінки: основний та вторинний. Але можна створити для кожної кнопки свій стиль — для цього виберіть опцію «Настроюваний» (Custom). Ще можна налаштувати анімацію відображення кнопки під час прокручування сторінки.

Текст

Використовується для додавання текстового елемента до сторінки.

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

Ви можете налаштувати розмір шрифтів та висоту рядка на кожен заголовок у загальних стилях сайту.

Картинка

За допомогою віджету «Картинка» (Image) можна додати мультимедійний елемент на сторінку. Підбирайте ілюстрації так, щоб вони посилювали ефект тексту.

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

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

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

Щоб переглянути, як виглядатиме сайт на різних пристроях, використовуйте опцію «Перегляд» (Preview).

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

Також можна налаштувати анімацію появи картинки під час прокручування сторінки.

Відео

Якщо ви хочете додати відео, потрібно попередньо завантажити його на YouTube або Vimeo, а потім вставити в редактор посилання на нього.

Галерея

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

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

Читайте докладніше: «Як додати галерею на сайт».

Соцмережі

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

Щоб додати нову соціальну мережу, натисніть «Додати» (Add). Потім натисніть на іконку редагування, виберіть соцмережу та введіть посилання на неї.

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

Читайте докладніше: «Як додати соцмережі на сайт».

Розділювачі: відступ та лінія

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

Якщо ви додаєте віджет «Відступ» (Spaser), ви можете встановити розмір за висотою в пікселях.

Для елемента «Лінія» (Divider) можна вибрати колір, тип, товщину й розмір. Наприклад, якщо вам потрібна лінія на всю колонку, виставте ширину 100 %. Якщо потрібна менша частина — відрегулюйте ширину повзунком і виберіть опцію вирівнювання контенту по лівому/правому краю або по центру.

Форма підписки

Збирайте дані відвідувачів сайту та підписуйте їх на розсилки за допомогою форми підписки.

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

За замовчуванням також створюються угоди в CRM із кожним новим лідом. Введіть назву угоди та виберіть лійку, до якої потрібно додавати контакти.

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

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

Читайте докладніше: «Як додати форму підписки на сайт».

Оплата

Скористайтесь віджетом «Оплата» (Payment), щоб відвідувачі вашого сайту могли оплатити товар в один клік.

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

Детальніше у статті: «Як приймати платежі на сайті».

Чат-боти

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

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

Читайте докладніше: «Як додати підписку на чат-боти».

Таймер

Ви можете додати елемент «Таймер» (Timer), щоб встановити зворотний відлік до старту події або закінчення акції на товар або послугу.

Виберіть дату та час завершення та повідомлення, виставте параметри дати та налаштуйте зовнішній вигляд таймера.

Читайте докладніше: «Як додати таймер на сайт».

FAQ

Використовуйте елемент «FAQ», щоб додати розгорнуті відповіді на запитання, що часто ставляться користувачами.

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

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

Читайте докладніше: «Як додати FAQ на сайт».

Карта

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

Отримайте і додайте унікальний ключ Google Maps API. Вкажіть потрібні адреси та описи до них. Налаштуйте масштаб та стиль відображення карти.

Докладніше про додавання віджета читайте у статті «Як додати на сайт віджет Google Maps».

Авторизація EDU

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

Ви можете додати віджет тільки на сайт із прив'язаним курсом. Щоб зробити сайт запису на курс зі своїм унікальним дизайном, необхідно  перейти до сайту з курсом, створити нову сторінку та додати до нього віджет.

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

Докладніше: «Як додати віджет для авторизації та реєстрації на курс».

Управління змінами

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

Для цього натисніть стрілку вліво. Скасування стосується останньої дії у конструкторі. Щоб скасувати попередні записи даних, продовжуйте натискати кнопку. Крок назад можна виконати не лише натисканням на кнопку, а й за допомогою комбінації клавіш Ctrl + Z.

Також ви можете відновити дію, яку було скасовано. Для цього натисніть стрілку праворуч або скористайтеся комбінацією клавіш Ctrl + Y.

Читайте також: «Як працювати з конструктором сайту».

Попередній перегляд

Після створення сайту перегляньте, як виглядатиме сторінка з усіма доданими елементами на різних пристроях. Для цього натисніть «Перегляд» (Review) у верхній частині екрана.

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

Збереження та публікація

Коли ви закінчили створення сторінки, натисніть «Зберегти та вийти» (Save and Exit). Введіть назву та посилання на сайт. Під час додавання нової сторінки введіть посилання на сторінку.

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

Читайте також: «Як керувати сторінками сайту».

Щоб змінити назву та посилання сторінки, перейдіть до «Налаштування» (Settings), введіть нову назву та URL-адресу та натисніть «Зберегти» (Save).

Перша додана сторінка під час створення сайту автоматично вважається головною. Щоб змінити головну сторінку, перейдіть до «Налаштування сайту» (Site settings) і виберіть нову сторінку в меню, що випадає.

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

Щоб змінити назву сайту, підключити свій домен, додати сторонній код та підключити аналітику, перейдіть до «Налаштування сайту» (Site settings).

Також ви можете стежити за статистикою відвідувань вашого сайту. Для цього перейдіть у вкладку «Статистика» (Statistics) і виберіть тип статистики, що відстежується.

Оновлено: 02.06.2023