Сайт-візитка підійде, якщо у вас невеликий бізнес і свого сайту ще немає. Або ви працюєте на себе і хочете зробити портфоліо. Або вам потрібен простий сайт для одноразового заходу: вебінару, конференції, курсів.

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

Що всередині

  1. Оберіть шаблон
  2. Сформулюйте заголовок
  3. Додайте кнопку
  4. Додайте титульну ілюстрацію
  5. Опишіть переваги вашого бізнесу
  6. Створіть меню у верхній частині сайту
  7. Розкажіть докладніше про ваші послуги
  8. Додайте форму для збору відгуків
  9. Як отримувати файли від відвідувачів
  10. Додайте контактні дані
  11. Додайте посилання на соцмережі
  12. Додайте мапу
  13. Увімкніть режим лендингу
  14. Встановіть SSL-сертифікат
  15. Опублікуйте сайт
  16. Що робити після створення сайту

Оберіть шаблон

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

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

Сторінка з шаблонами майбутнього сайту

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

Список дій, які можна зробити з елементом

У верхній частині екрану буде меню навігації по сайту. Його не видаляйте — воно ще знадобиться:

Елемент з меню

Коли видалите все, крім меню з навігацією, можна починати збирати сайт.

Коли відходите від комп’ютера, зберігайте зміни у розділі з дискетою у лівому верхньому куті верхнього меню:

Меню, в якому можна зберегти сайт

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

Сформулюйте заголовок

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

Елемент «Текст» в панелі управління конструктором

Шрифт, колір та розмір тексту можете змінити за допомогою інструкції по дизайну.

Додайте кнопку

Якщо хочете, щоб відвідувач міг виконати якусь дію одразу після того, як відкриє сайт, — купив, подзвонив, підписався, — використовуйте елемент «Кнопка»:

Елемент «Кнопка» в панелі керування конструктором

Щоб відредагувати зовнішній вигляд кнопки і текст на ній, клацніть по ній правою кнопкою миші та оберіть «Властивості»:

Властивості елемента «Кнопка»

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

Тема з кнопкою на сайті

Додайте титульну ілюстрацію

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

Елемент «Фігура» в панелі управління конструктором

Клацніть по елементу правою кнопкою мишки й оберіть «Властивості». Щоб завантажити ілюстрацію, натисніть на значок з олівцем у розділі «Зображення/Відео»:

Властивості елемента «Фігура». Розділ з додаванням своєї ілюстрації

Потім зніміть галочки у розділі «Повторити», щоб картинка не дублювалася. А у розділі «Розмір» оберіть «Обкладинка»:

Властивості елемента «Фігура». Налаштування відображення ілюстрації

Щоб зробити однотонний кольоровий фон, оберіть колір у розділі «Колір», а потім приберіть рамку навколо зображення в меню «Межа»:

Властивості елемента «Фігура». Рамка і фон ілюстрації

Перейдіть на вкладку «Властивості» і поставте галочку в пункті «Ширина екрана», щоб фон розтягнувся по всій ширині сайту:

Властивості елемента «Фігура». Розташування ілюстрації

Щоб ілюстрація не закривала текст, клацніть по ілюстрації правою кнопкою миші й оберіть «Порядок» – «На задній план»:

Список, що випадає з швидкими діями для елемента «Фігура»

Опишіть переваги вашого бізнесу

За допомогою нових елементів «Текст» тезисно розкажіть про ваш бізнес: що пропонуєте клієнтам і що вмієте робити:

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

Створіть меню у верхній частині сайту

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

Клацніть по порожньому елементу у верхньому правому куті сторінки правою кнопкою миші й оберіть «Редагувати меню»:

Список, що випадає з опцій редагування меню

Поки що в меню є тільки один пункт — «Головна». Оскільки ми робимо сайт-візитку, назвіть цей пункт якось по-іншому, наприклад, «Про нас». Потім додайте ще кілька пунктів для основних змістовних блоків на сторінці:

Додавання нового елемента в меню

Для прикладу ми додали пункти «Послуги», «Відгуки», «Контакти» і «Форма замовлення». Їх можна буде видалити або переробити в будь-який момент.

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

Параметри відображення елементів в меню

Тепер перетягніть меню сайту з кута на середину сторінки:

Переміщення меню з кута в центр сторінки

Розкажіть докладніше про ваші послуги

Додайте опис послуг, портфоліо або будь-які інші досягнення — все, про що хочете розповісти. Використовуйте елементи «Текст», «Фото» та «Галерея»:

Елементи «Текст», «Фото» та «Галерея» в панелі управління конструктором

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

Ви можете також виставити товар прямо на сайті. Для цього додайте елемент «Магазин» у розділі «Комерція»:

Додавання магазина за допомогою елемента «Комерція»

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

Стиль відображення товарів в магазині

Додайте форму для збору відгуків

Перейдіть до розділу «Відгуки» у правому верхньому куті:

Розділ «Відгуки» на сайті

Перетягніть на сторінку елемент «Форма»:

Елемент «Форма»

Щоб змінити параметри форми, клацніть по елементу правою кнопкою миші й оберіть пункт «Властивості».

На вкладинці «Поля» оберіть поля, які будуть на формі. Щоб зробити заповнення полів обов’язковим, відзначте їх зірочкою.

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

Розділ «Звичайні поля» на вкладці «Поля» у властивостях форми

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

Розділ «Опитування» на вкладці «Поля» у властивостях форми

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

Розділ «Прапорці» на вкладці «Поля» у властивостях форми

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

Вкладка «Налаштування пошти» у властивостях форми

Перше поле для пошти — адреса, на яку прийде відгук клієнта. Якщо потрібно вказати кілька адрес, розділіть їх крапкою з комою. Пропуск після крапки з комою ставити не потрібно. Має вийти так: mail1@domain.com;mail2@domain.com;mail03@domain.com.

Друге поле — адреса, з якого конструктор відправить відгук. Якщо залишити це поле порожнім, листи будуть відправлятися від імені вашого хостингового аккаунта — з ящика no-reply@vashdomen.com.

На вкладинці «SMTP» вкажіть дані вашого поштового аккаунта. Якщо хочете відправляти листи з доменної пошти на кшталт contact@vashdomen.com, спочатку створіть її за допомогою інструкції по роботі з поштою.

Вкладка «SMTP» у властивостях форми

Щоб подивитися адресу поштового сервера і SMTP порт, зайдіть у cPanel, знайдіть розділ «Електронна пошта» і зайдіть в підрозділ «Облікові записи електронної пошти». Потім натисніть натисніть кнопку «Connect devices» праворуч від створеного ящика:

Кнопка «Connect devices» в cPanel

Прокрутіть сторінку вниз до розділу «Mail Client Manual Settings»:

Розділ «Mail Client Manual Settings» в cPanel

Адреса поштового сервера і SMTP порт вказані у таблиці зліва в рядку «Сервер вхідних повідомлень».

Увімкніть можливість додавати до відкликання файл

Щоб відвідувач міг докласти до листа файл, у вкладці «Поля» поставте галочку біля поля «Додатки»:

Налаштування вкладень на вкладці «Поля» у властивостях форми

Потім вкажіть максимальний розмір файлу на вкладинці «Налаштування пошти». Максимальний допустимий розмір вкладення — 50 Мб.

Вибір максимально допустимого розміру вкладення на вкладці «Властивості пошти» у властивостях форми

На вкладці «Налаштування» можна увімкнути для форми сервіс Google reCaptcha. Для цього зареєструйтеся на сторінці сервісу і вкажіть отримані ключі у полях «Ключ сайту» і «Секретний ключ»:

Додавання Google reCAPTCHA на вкладці «Налаштування» у властивостях форми

Публікуйте надіслані відгуки за допомогою елементів «Текст», «Фото» або «Медіа», якщо це Відеовідгук.

Додайте контактні дані

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

Електронна пошта. Перетягніть на сайт елемент «Текст» і натисніть іконку «Вставити/Редагувати посилання» у панелі редагування:

Функція «Вставити/Редагувати посилання» в панелі редагування тексту

Впишіть пошту в розділі «Електронна адреса»:

Поле «Електронна пошта» у властивостях посилання

Номер телефону. Додайте ще один елемент «Текст» і знову оберіть опцію «Вставити/Редагувати посилання». Впишіть номер у поле «Тел. номер»:

Поле «Номер телефону» у властивостях посилання

Месенджери. У властивостях посилання оберіть рядок «Веб-адреса» і вкажіть свій аккаунт в такому форматі:

  • WhatsApp: whatsapp://send?Phone=+120345678910
  • Viber: viber://add?Number=120345678910
  • Telegram: tg://resolve?Domain=nickname
Поле «Веб-адреса »у властивостях посилання

Skype. Замість елемента «Текст» натисніть в шапці сайту на елемент «Додатково» і виберіть Skype у вікні:

Елемент «Skype» в розділі «Ще»

Додайте посилання на соцмережі

Додайте на сайт новий елемент «Фото», виберіть будь-який формат зображення із запропонованих та перейдіть на вкладинку «Іконки Font Awesome». Потім впишіть назву сервісу в пошуку і виберіть ярлик, який подобається вам більше:

Іконки Font Awesome з логотипом YouTube

Щоб змінити параметри зображення, клацніть по ньому правою кнопкою миші й оберіть «Властивості». У вікні вкажіть колір і посилання для значка:

Властивості іконки

Для зручності відвідувачів продублюйте контакти у верхній частині сайту, щоб вони завжди були на виду:

Іконки з логотипами соцмереж у верхній частині сайту

Додайте мапу з локацією

Щоб додати мапу з місцем розташування вашого магазину, оберіть «Додатково» зі списку елементів в шапці конструктора і перетягніть на сайт елемент «Спеціальний HTML»:

Елемент з довільним кодом в розділі «Додатково»

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

Кнопка «Поділитися» в Гугл Мапах

У вікні, перейдіть на вкладку «Вбудовування карт» і натисніть «Копіювати HTML»:

Кнопка «Копіювати HTML» в Гугл Картах

Поверніться на вкладку з конструктором і вставте код у поле «HTML-код»:

Вікно з HTML-кодом в конструкторі

Увімкніть режим лендингу

Щоб показувати всі розділи на одній сторінці, активуйте галочкою режим «Landing»:

Режим «Лендинг» у налаштуваннях конструктора

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

«Пункт меню за замовчуванням» у властивостях меню

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

Сині кнопки, які ви бачите в конструкторі, не будуть відображатися на сайті:

Сині кнопки в режимі редагування сайту

Кнопку на початку сторінки можна зробити посиланням на конкретний розділ на сайті. Поверніться до кнопки і відкрийте «Властивості». На вкладинці «Загальний» натисніть на олівець у розділі «URL-адреса»:

Додавання посилання у властивостях кнопки

У рядку «Сторінка на вашому сайті» оберіть розділ, на який повинна вести кнопка:

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

Тепер при натисканні кнопки «Хочу» відвідувач буде відразу потрапляти до розділу «Контакти».

Встановіть SSL-сертифікат

Можливо, ви помітили, що у більшості сайтів є зелений замочок поруч з доменом в адресному рядку браузера:

Зовнішній вигляд SSL-сертифікатів в популярних браузерах

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

Спочатку отримайте та встановіть сертифікат за допомогою інструкції для cPanel. Потім увімкніть використання сертифіката в конструкторі. Для цього зайдіть до налаштувань у верхньому куті редактора:

Розділ з налаштуваннями конструктора

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

Публікація сайту по HTTPS в настройках конструктора

Опублікуйте сайт

Збережіть чернетку на майбутнє та опублікуйте сайт в інтернеті:

Кнопка публікації сайту

Що робити після створення сайту

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

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

Якщо не впевнені, що впораєтеся, зверніться до професіоналів. Ось список компаній, про які ми чули хороше.

Наші інші статті про конструктора допоможуть: