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

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

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

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

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

Потім натисніть «Новий сайт» (New site) або виберіть шаблон.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка

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

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

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

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

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

Тип посилання Опис
Посилання Використовується для вставки повного посилання у вигляді https://example.com. Рекомендуємо додавати захищені посилання. Якщо ви активуєте опцію «Відкривати в новому вікні», то для відвідувача сайту посилання відкриється в новій вкладці браузера.
Телефон Використовується для вставки телефону як +380501234567. Під час натискання на таке посилання користувач зможе зателефонувати на вказаний номер, використовуючи вбудовані програми браузера або пристрою. Рекомендуємо додавати номер у міжнародному форматі, щоб програми для дзвінків вірно визначали, куди телефонувати.
Email Використовується для вставки адреси електронної пошти у вигляді user@example.com. Рекомендуємо перевіряти коректність адреси, щоб відвідувач сайту міг зв’язатися з вами.
Якір Використовується для вставки якоря на інший блок. Після натискання на посилання відвідувач відразу перейде на вказаний блок. Ви можете взяти ID якоря в налаштуваннях блоку

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

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

Текст

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

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

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

Картинка

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

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

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

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

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

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

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

Відео

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

Соцмережі

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

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

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

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

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

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

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

Читайте докладніше: «knowledge-base/landing-page/website-builder/create-landing-page#spacer-and-divider">Відступи».

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

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

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

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

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

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

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

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

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

Оплата

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

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

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

Чат-боти

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

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

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

Таймер

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

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

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

FAQ

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

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

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

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

Карта

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

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

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

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

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

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

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

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

Передпрогляд

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

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

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

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

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

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

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

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

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

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

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

Оцініть, наскільки стаття була корисною "Як створити сайт"

Оцінка: 5 / 5

    Почніть користуватися сервісом SendPulse прямо сьогодні