Making a business website on a budget

1. Крок 1. Визначаємося з метою сайту
2. Практика
3. Крок 2. Вибираємо хостинг
4. Практика
5. Крок 3: Вибираємо доменне ім'я
6. Практика
7. Крок 4. Установка CMS
8. Практика
9. Крок 5. Встановлення теми
10. Практика
11. Крок 6. Установка плагінів для теми
12. Практика
13. Крок 7. Налаштування теми
14. Крок 7. Створення і наповнення сторінок.
15. Практика

Кілька років тому, мій знайомий, Олексій, відкрив автомайстерню. Працював він добре, та й прибули вистачає на цілком комфортне життя. Але ось дізнатися про нього ви можете хіба що від вдячних клієнтів - комп'ютер Олексій вважав чимось таємничим і використовує тільки для ВК і онлайн-ігор.

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

Так народилася ідея написати покрокову інструкцію по створенню сайту для малого бізнесу недорого, швидко і без СМС.

Крок 1. Визначаємося з метою сайту

теорія

Не можна починати робити сайт, якщо ви не знаєте, навіщо саме він вам потрібен. Сайти для бізнесу можна умовно поділити на три типи.

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

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

Інтернет-магазини. Інтернет-магазин - це сайт, де можна купити товар безпосередньо. Зазвичай в інтернет-магазин вже вбудований блог, а у кожного товару є сторінка відгуків і обговорення.

Для всіх трьох видів відмінно підходить платформа WordPress.

Практика

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

Крок 2. Вибираємо хостинг

теорія

Хостинг - це комп'ютер, на якому зберігаються файли вашого сайту. Їх можна зберігати і на вашому особистому ПК, але як показує практика - це не вигідно . Хостинг, куплений у хостинг-провайдера, буде швидше, надійніше і дешевше.

Хостинг можна отримати безкоштовно - в інтернеті є безкоштовні конструктори сайтів. Наприклад, WIX. Або просто безкоштовні хостинги, такі як WordPress.com. Але в такому разі на вашому сайті буде висіти чужа реклама, за відключення якої доведеться добре заплатити.

На цьому етапі нам підійде будь-який тарифний план хостингу - відвідувачів у нового сайту буде небагато, а WordPress дуже добре оптимізований і не вимагає багато ресурсів. Але я раджу вам купити хостинг «на виріст» - тоді ваш сайт буде нормально справлятися з піковими навантаженнями.

Ще один важливий момент - наявність автоматичних установників CMS. Наприклад, Softaculous встановлює WordPress за 3 хвилини.

Практика

Для сайту я вибрав хостинг Unihost з тарифом U-Drive . Напевно, мені підійшов би і U-Ride, але на U-Drive у мене гарантовано не буде проблем з ресурсами. Купую я відразу на рік, тому ціна хостингу складе $ 8.40 в місяць.

Купувати хостинг ми будемо разом з доменом.

Крок 3: Вибираємо доменне ім'я

теорія

Доменне ім'я - це адреса, який пишуть в браузері, щоб відкрити сайт. Наприклад, unihost.com. Тут .com - це доменна зона, як поштовий індекс, а unihost - вже унікальна частина адреси, як вулиця і будинок.

Доменне ім'я повинне бути коротким, актуальним і таким, що запам'ятовується. Бажано, щоб воно було на латиниці, хоча можна написати кирилицею в деяких доменних зонах: Ру, .укр і навіть .com.

Ціна на домен залежить від трьох чинників:

1. Доменна зона. У кожної доменної зони свої розцінки - є безкоштовні, наприклад, .tk. А домен в зоні .na коштує $ 5000 в рік.
2. Преміальність. Деякі домени настільки краще інших, що власник доменної зони відчуває себе вправі піднімати на них ціни. Так, простий домен в зоні .nyc коштує $ 30, але за autoshop.nyc доведеться заплатити вже $ 35000.
3. Довжина домену. Навіть на непреміального домени довжиною менше чотирьох символів ціни вище.

Для місцевого бізнесу я раджу домени в локальних зонах - .spb.ru, .zp.ua і так далі. Вони зазвичай дешевше, та й відразу дають зрозуміти розташування бізнесу.

А ось інтернет-магазинах з клієнтами з різних міст і країн потрібні більш глобальні домени. Найкраще - .com, але можна обмежитися і національними .ua, .ru.

Практика

Так як у нас невеликий бюджет, то преміальні домени нас не цікавлять. Сайт будемо реєструвати в доменній зоні .com - це недорого, солідно і не вимагає додаткових витрат.

1. заходимо на https://unihost.com/cpanel-web-hosting/ .
   
2. Кількома Розмістити сайт в обраному тариф.
3. Відкривається сторінка вибору домену. Вводимо обраний домен - в нашому випадку myabsolutelytestdomain.com.
4. Вибираємо Я хочу зареєструвати цей домен і бачимо, що домен вільний і доступний до реєстрації.
5. Кількома Продовжити оформлення замовлення.
6. Перевіряємо замовлення. Якщо все правильно - натискаємо Оформити замовлення.
7. Кількома Ще немає аккаунта Unihost? Створіть його зараз! .
8. Заповнюємо форму.
9. Кількома Створити новий акаунт і продовжити.
10. Заповнюємо контактні дані для реєстрації домену.
11. Кількома Далі.
12. Вибираємо систему оплати і натискаємо Продовжити.
13. Оплачуємо рахунок.

З цього моменту, у нас вже є сайт. Залишилося тільки його налаштувати і додати інформацію.

Крок 4. Установка CMS

теорія

Після того, як ми оплатимо рахунок, нам прийде e-mail з реквізитами для входу в cPanel. Звідти ми зможемо управляти хостингом, а також встановлювати і видаляти CMS.

Практика

Встановлювати WordPress ми будемо через Softaculous - так простіше, швидше і нам не доведеться працювати безпосередньо з базами даних. До того ж, техпідтримка Unihost записала відео, яке докладно показує весь процес.

Крок 5. Встановлення теми

теорія

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

Практика

Відразу після установки WordPress, ми потрапляємо в адмін-панель. Звідси ми можемо змінювати тему сайту, встановлювати плагіни і управляти іншими настройками сайту.

За замовчуванням варто стандартна тема Twenty Seventeen. З нею наш сайт виглядає так:

Але я хочу іншу тему. Тому:

1. Кількома Зовнішній вигляд в лівому меню.
   
2. Кількома Теми.
3. Кількома Додати нову.
4. Шукаємо тему або вибираємо одну із запропонованих. Мені подобається Sydney - в ній є вбудований конструктор сторінок і зручне верхнє меню.
5. Наводимо на неї курсор і натискаємо Встановити.
6. Чекаємо, поки закінчиться установка і натискаємо Активувати.

Тепер наш сайт виглядає так:

Крок 6. Установка плагінів для теми

теорія

Деяким темам для нормальної роботи потрібні плагіни. Модулі - це доповнення для CMS, які додають нові функції або полегшують роботу зі старими.

Практика

Нашої теми потрібні два плагіна - PageBuilder від SiteOrigin і Sydney Toolbox. Давайте їх встановимо.

1. Натисніть Begin installing plugins вгорі панелі управління.
2. Відкриється сторінка з посиланнями на плагіни. Натисніть Install під одним з них.
3. Відкриється сторінка установки плагіна. Дочекайтеся її закінчення і натисніть Return to Required Plugins Installer.
4. Повторіть процедуру з другим плагіном.
5. Натисніть Activate під одним з плагінів.
6. Натисніть Activate під другим плагіном.
7. Натисніть Return to Dashboard.

Крок 7. Налаштування теми

Тепер тема встановлена. Давайте її налаштуємо.

1. Кількома Зовнішній вигляд в лівому меню Адмін-панелі.
2. Кількома Налаштувати.
3. Відкриється головна сторінка сайту з додатковим меню зліва.

Налаштуємо заголовок головної сторінки.

1. Кількома Область заголовка в лівому меню.
2. Кількома Слайдер заголовка і налаштовуємо слайдер на головній сторінці.
   
3. В поле Швидкість слайдера вибираємо як часто будуть змінюватися картинки в мілісекундах (1000 мс = 1 с). Тут же можна зупинити текстовий слайдер і зробити текст загальним для всіх картинок.
4. Кількома Змінити зображення під першою картинкою.
   
5. Вибираємо нове зображення з бібліотеки сайту або завантажуємо нове.
6. Кількома Вибрати зображення в нижньому правому куті.
7. Прописуємо заголовок і підзаголовок до слайду.
8. Повторюємо це для інших слайдів. Якщо у вас не вистачає своїх картинок - просто видаліть зайві стандартні, це прибере їх з ротації.
9. Прописуємо текст кнопки. Кнопка прокручує заголовок і переносить користувача безпосередньо до тексту на головній.
10. Кількома на стрілку зліва вгорі.
11. Кількома Зберегти та опублікувати.

Тепер давайте налаштуємо заголовки для інших сторінок.

1. Кількома Тип заголовка.
2. В поле Тип заголовка сайту ставимо галочку навпроти Зображення або Video. Редакція слайдер займає надто багато місця, щоб показувати його десь ще крім головної сторінки.
3. Кількома на стрілку зліва вгорі.
4. Кількома Медіафайл заголовка і налаштовуємо заголовок для інших сторінок сайту.
5. Щоб поставити в заголовок своє відео:
   1. Для відео з Youtube вставляємо посилання на відео в поле Або введіть URL Youtube.
   2. Для локального відео натискаємо Вибрати відео і вибираємо файл з бібліотеки Вордпресс або завантажуємо новий.
   3. Зображення після цього теж потрібно поставити своє - воно буде відображатися під час завантаження відео.
6. Щоб поставити в заголовок своє одиночне зображення, до лику на Приховати.
7. Кількома на Додати.
8. Вибираємо нове зображення з бібліотеки сайту або завантажуємо нове з співвідношенням сторін 16: 9.
9. Кількома Вибрати й обрізати.
10. Кількома Обрізати.
11. Редагуємо висоту заголовка, якщо раптом показується не все зображення.
12. Якщо хочете - внизу сторінки ставимо галочку навпроти Відключити нашарування. Це зніме затінення з картинки заголовка.
13. Кількома на стрілку зліва вгорі.
14. Кількома Зберегти та опублікувати.

Вийшло непогано. Але я хочу меню по центру сторінки.

1. Кількома Стиль меню.
2. Ставимо галочку навпроти По центру (меню і логотип сайту).
3. Кількома на стрілку зліва вгорі.
4. Кількома на ту ж стрілку ще раз.
5. Кількома Зберегти та опублікувати.

Вже добре. Але не вистачає логотипу та іконки у вкладці браузера.

1. Кількома Назва сайту, ключова фраза, логотип.
2. Якщо у вас немає логотипу - тут можна поміняти назву і короткий опис сайту, які відображаються в заголовку.
3. Але у нас є логотип, тому:
   1. Кількома Вибрати зображення в поле Завантажити свій логотип.
   2. Вибираємо нове зображення з бібліотеки сайту або завантажуємо нове.
   3. Кількома Вибрати.
4. Тепер натискаємо Вибрати зображення в поле Іконка сайту.
5. Якщо у вас прямокутний логотип - завантажуємо нове зображення розміром 16х16
6. Якщо у вас квадратний або круглий логотип - можна використовувати його. Для цього:
   1. Вибираємо завантажене в пункті 2 зображення.
   2. Кількома Вибрати й обрізати.
   3. Кількома Обрізати.
7. Кількома на стрілку зліва вгорі.
8. Кількома Зберегти та опублікувати.

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

1. Кількома Кольори.
2. Кількома Загальні.
   
3. Кількома Вибрати в полі Основний колір.
4. Вибираємо колір.
5. Кількома на стрілку зліва вгорі.
6. Кількома Зберегти та опублікувати.

Ну і давайте додамо на наш сайт контактну інформацію для клієнтів:

1. Кількома Віджети.
2. Кількома Підвал 1.
3. Кількома Додати віджет.
4. Кількома Sydney: Contact Info.
5. Заповнюємо поля, двічі натискаємо на стрілку і натискаємо Зберегти та опублікувати.

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

1. Кількома Підвал.
2. Кількома Один. Бачимо, як виправляється відображення адреси.
3. Кількома на стрілку зліва вгорі.
4. Кількома Зберегти та опублікувати.

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

1. Кількома Параметри блогу.
2. Ставимо галочку навпроти На всю ширину (без бічної колонки).
3. Кількома на стрілку зліва вгорі.
4. Кількома Зберегти та опублікувати.

Коли закінчите настроювання теми - до лікніте на хрестик зліва вгорі.

Крок 7. Створення і наповнення сторінок.

теорія

Тепер у нашого сайту сувора, професійна тема з підтримкою верхнього меню. Давайте створимо на сайті сторінки Головна, Новини, Наші послуги, Послуга 1, Послуга 2 і Про компанію.

Практика

1. У лівому меню адмін-панелі, натискаємо на Сторінки.
2. Вгорі натискаємо Додати нову.
3. Вводимо заголовок сторінки, наприклад Головна.
4. Заповнюємо сторінку текстом і картинками. Все робиться в простому візуальному редакторі. Хоча, якщо ви розбираєтеся в HTML, можна клікнути на вкладку Текст і писати код вручну.
5. Справа, в поле Шаблон, ставимо на всю ширину. Це прибере зі сторінки сайдбар.
6. Кількома Опублікувати.
7. Кількома Змінити в поле Постійне посилання під заголовком і наводимо URL до человекопонятний увазі.
8. Кількома Оновити.

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

1. У лівому меню адмін-панелі натискаємо Налаштування.
2. Кількома Читання.
3. У пункті На головній сторінці відображати вибираємо статична сторінку.
4. У списку Головна сторінка вибираємо Головна.
5. У списку Сторінка записів вибираємо Новини.
6. Кількома Зберегти зміни.

Якщо вам не потрібен блог - в пункті 5 виберіть - Вибрати -. Це повністю прибирає блог з вашого сайту. Сторінку Новини тоді можна видалити.

Тепер додаємо сторінки в головне меню сайту:

1. У лівому меню адмін-панелі, натискаємо Зовнішній вигляд.
2. Кількома Меню.
3. Видаляємо з нинішнього меню всі сторінки. Для цього натискаємо на стрілочки праворуч від назви сторінки і натискаємо Видалити.
4. Ставимо галочку навпроти наших нових сторінки в списку ліворуч і натискаємо Додати в меню.
5. Міняємо порядок сторінок в меню. Для цього, просто перетягуємо їх. Сторінки Послуга 1 і Послуга 2 перетягуємо на Наші послуги, що зробить їх дочірніми і перетворить кнопку Наші послуги в підміню.
6. Кількома Створити меню.
7. Ставимо галочку навпроти Основне меню в списку Показати місцезнаходження і натискаємо Зберегти меню.

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

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

Пишіть посилання на сайти, які ви зробили самостійно, в коментарі до статті. А якщо щось раптом незрозуміло - сміливо задавайте питання, я зроблю все, щоб вам допомогти!