Несколько лет назад, мой знакомый, Алексей, открыл автомастерскую. Работал он хорошо, да и прибыли хватает на вполне комфортную жизнь. Но вот узнать о нём вы можете разве что от благодарных клиентов — компьютер Алексей считал чем-то таинственным и использует только для ВК и онлайн-игр.
На моё предложение продвигать бизнес через интернет, Алексей нахмурился и сказал, что это слишком сложно. Ведь нужно будет сделать сайт, где-то его размещать и как-то его продвигать — а это очень дорого и вообще не стоит выделки.
Так родилась идея написать пошаговую инструкцию по созданию сайта для малого бизнеса недорого, быстро и без СМС.
Шаг 1. Определяемся с целью сайта
Теория
Нельзя начинать делать сайт, если вы не знаете, зачем именно он вам нужен. Сайты для бизнеса можно условно поделить на три типа.
Визитки. Визитки — статические, то есть информация на сайт заносится при его создании и редко обновляетсяя. Этот тип подойдёт для сайтов компаний, которые оказывают только локальные услуги, например — автомастерские, магазины мебели, парикмахерские. Визитки нужны больше для представительности, но если правильно продвигать сайт — могут стать и источником клиентов.
Блоги. Развитие предыдущей идеи. Если визитка полностью статична, то на блоге уже есть динамический раздел, в котором рассказывается о последних новостях бизнеса. Хорошо подойдёт бизнесам, у которых есть время на общение с клиентами.
Интернет-магазины. Интернет-магазин — это сайт, где можно купить товар напрямую. Обычно в интернет-магазин уже встроен блог, а у каждого товара есть страница отзывов и обсуждения.
Для всех трёх видов отлично подходит платформа WordPress.
Практика
Для примера я буду делать сайт-визитку с небольшим блогом.
Шаг 2. Выбираем хостинг
Теория
Хостинг — это компьютер, на котором хранятся файлы вашего сайта. Их можно хранить и на вашем личном ПК, но как показывает практика — это невыгодно. Хостинг, купленный у хостинг-провайдера, будет быстрее, надежнее и дешевле.
На этом этапе нам подойдёт любой тарифный план хостинга — посетителей у нового сайта будет немного, а WordPress очень хорошо оптимизирован и не требует много ресурсов. Но я советую вам купить хостинг «на вырост» — тогда ваш сайт будет нормально справляться с пиковыми нагрузками.
Еще один важный момент — наличие автоматических установщиков CMS. Например, Softaculous устанавливает WordPress за 3 минуты.
Практика
Для сайта я выбрал хостинг Unihost с тарифом U-Drive. Наверное, мне подошел бы и U-Ride, но на U-Drive у меня гарантированно не будет проблем с ресурсами. Покупаю я сразу на год, поэтому цена хостинга составит $8.40 в месяц.
Покупать хостинг мы будем вместе с доменом.
Шаг 3: Выбираем доменное имя
Теория
Доменное имя — это адрес, который пишут в браузере, чтобы открыть сайт. Например, unihost.com. Здесь .com — это доменная зона, как почтовый индекс, а unihost — уже уникальная часть адреса, как улица и дом.
Доменное имя должно быть коротким, актуальным и запоминающимся. Желательно, чтобы оно было на латинице, хотя можно написать кириллицей в некоторых доменных зонах: .ру, .укр и даже .com.
Цена на домен зависит от трёх факторов:
- Доменная зона. У каждой доменной зоны свои расценки — есть бесплатные, например, .tk. А домен в зоне .na стоит $5000 в год.
- Премиальность. Некоторые домены настолько лучше других, что владелец доменной зоны чувствует себя вправе поднимать на них цены. Так, простой домен в зоне .nyc стоит $30, но за autoshop.nyc придется заплатить уже $35000.
- Длина домена. Даже на непремиальные домены длиной менее четырёх символов цены выше.
Для местного бизнеса я советую домены в локальных зонах — .spb.ru, .zp.ua и так далее. Они обычно дешевле, да и сразу дают понять местоположение бизнеса.
А вот интернет-магазинам с клиентами из разных городов и стран нужны более глобальные домены. Лучше всего — .com, но можно ограничиться и национальными .ua, .ru.
Практика
Так как у нас небольшой бюджет, то премиальные домены нас не интересуют. Сайт будем регистрировать в доменной зоне .com — это недорого, солидно и не требует дополнительных затрат.
- Заходим на https://unihost.com/cpanel-web-hosting/.
- Кликаем Разместить сайт в выбранном тарифе.
- Открывается страница выбора домена. Вводим выбранный домен — в нашем случае myabsolutelytestdomain.com.
- Выбираем Я хочу зарегистрировать этот домен и видим, что домен свободен и доступен к регистрации.
- Кликаем Продолжить оформление заказа.
- Проверяем заказ. Если всё правильно — кликаем Оформить заказ.
- Кликаем Еще нет аккаунта Unihost? Создайте его сейчас!.
- Заполняем форму.
- Кликаем Создать новый аккаунт и продолжить.
- Заполняем контактные данные для регистрации домена.
- Кликаем Далее.
- Выбираем систему оплаты и кликаем Продолжить.
- Оплачиваем счет.
С этого момента, у нас уже есть сайт. Осталось только его настроить и добавить информацию.
Шаг 4. Установка CMS
Теория
После того, как мы оплатим счет, нам придет e-mail с реквизитами для входа в cPanel. Оттуда мы сможем управлять хостингом, а также устанавливать и удалять CMS.
Практика
Устанавливать WordPress мы будем через Softaculous — так проще, быстрее и нам не придется работать напрямую с базами данных. К тому же, техподдержка Unihost записала видео, которое подробно показывает весь процесс.
Шаг 5. Установка темы
Теория
Сразу после установки, на нашем сайте не будет никакой информации — только шаблон. И этот шаблон нужно будет адаптировать под ваш бизнес. Для начала стоит установить тему.
Практика
Сразу после установки WordPress, мы попадаем в админ-панель. Отсюда мы можем менять тему сайта, устанавливать плагины и управлять другими настройками сайта.
По умолчанию стоит стандартная тема Twenty Seventeen. С ней наш сайт выглядит так:
Но я хочу другую тему. Поэтому:
- Кликаем Внешний вид в левом меню.
- Кликаем Темы.
- Кликаем Добавить новую.
- Ищем тему или выбираем одну из предложенных. Мне нравится Sydney — в ней есть встроенный конструктор страниц и удобное верхнее меню.
- Наводим на неё курсор и кликаем Установить.
- Ждём, пока закончится установка и кликаем Активировать.
Шаг 6. Установка плагинов для темы
Теория
Некоторым темам для нормальной работы нужны плагины. Плагины — это дополнения для CMS, которые добавляют новые функции или облегчают работу со старыми.
Практика
Нашей теме нужны два плагина — PageBuilder от SiteOrigin и Sydney Toolbox. Давайте их установим.
- Кликните Begin installing plugins вверху панели управления.
- Откроется страница с ссылками на плагины. Кликните Install под одним из них.
- Откроется страница установки плагина. Дождитесь её окончания и кликните Return to Required Plugins Installer.
- Повторите процедуру со вторым плагином.
- Кликните Activate под одним из плагинов.
- Кликните Activate под вторым плагином.
- Кликните Return to Dashboard.
Шаг 7. Настройка темы
Теперь тема установлена. Давайте её настроим.
- Кликаем Внешний вид в левом меню Админ-панели.
- Кликаем Настроить.
- Откроется главная страница сайта с дополнительным меню слева.
Настроим заголовок главной страницы.
- Кликаем Область заголовка в левом меню.
- Кликаем Слайдер заголовка и настраиваем слайдер на главной странице.
- В поле Скорость слайдера выбираем как часто будут меняться картинки в миллисекундах (1000 мс = 1 с). Тут же можно остановить текстовый слайдер и сделать текст общим для всех картинок.
- Кликаем Изменить изображение под первой картинкой.
- Выбираем новое изображение из библиотеки сайта или загружаем новое.
- Кликаем Выбрать изображение в нижнем правом углу.
- Прописываем заголовок и подзаголовок к слайду.
- Повторяем это для остальных слайдов. Если у вас не хватает своих картинок — просто удалите лишние стандартные, это уберет их из ротации.
- Прописываем текст кнопки. Кнопка прокручивает заголовок и переносит пользователя напрямую к тексту на главной.
Кликаем на стрелку слева вверху.
- Кликаем Сохранить и опубликовать.
Теперь давайте настроим заголовки для других страниц.
- Кликаем Тип заголовка.
- В поле Тип заголовка сайта ставим галочку напротив Изображение или Video. Полноэкранный слайдер занимает слишком много места, чтобы показывать его где-то еще кроме главной страницы.
- Кликаем на стрелку слева вверху.
- Кликаем Медиафайл заголовка и настраиваем заголовок для других страниц сайта.
- Чтобы поставить в заголовок своё видео:
- Чтобы поставить в заголовок своё одиночное изображение, кликаем на Скрыть.
- Кликаем на Добавить.
- Выбираем новое изображение из библиотеки сайта или загружаем новое с соотношением сторон 16:9.
- Кликаем Выбрать и обрезать.
- Кликаем Обрезать.
- Редактируем высоту заголовка, если вдруг показывается не всё изображение.
- Если хотите — внизу страницы ставим галочку напротив Отключить наслоение. Это снимет затенение с картинки заголовка.
- Кликаем на стрелку слева вверху.
- Кликаем Сохранить и опубликовать.
Получилось неплохо. Но я хочу меню по центру страницы.
- Кликаем Стиль меню.
- Ставим галочку напротив По центру (меню и логотип сайта).
- Кликаем на стрелку слева вверху.
- Кликаем на ту же стрелку еще раз.
- Кликаем Сохранить и опубликовать.
Уже хорошо. Но не хватает логотипа и иконки во вкладке браузера.
- Кликаем Название сайта, ключевая фраза, логотип.
- Если у вас нет логотипа — тут можно поменять название и краткое описание сайта, которые отображаются в заголовке.
- Но у нас есть логотип, поэтому:
- Кликаем Выбрать изображение в поле Загрузить свой логотип.
- Выбираем новое изображение из библиотеки сайта или загружаем новое.
- Кликаем Выбрать.
- Теперь кликаем Выбрать изображение в поле Иконка сайта.
- Если у вас прямоугольный логотип — загружаем новое изображение размером 16х16
- Если у вас квадратный или круглый логотип — можно использовать его. Для этого:
- Выбираем загруженное в пункте 2 изображение.
- Кликаем Выбрать и обрезать.
- Кликаем Обрезать.
- Кликаем на стрелку слева вверху.
- Кликаем Сохранить и опубликовать.
Еще не очень нравится бело-черно-красная расцветка сайта. Я хочу, чтобы основным цветом был синий.
- Кликаем Цвета.
- Кликаем Общие.
- Кликаем Выбрать в поле Основной цвет.
- Выбираем цвет.
- Кликаем на стрелку слева вверху.
- Кликаем Сохранить и опубликовать.
Ну и давайте добавим на наш сайт контактную информацию для клиентов:
- Кликаем Виджеты.
- Кликаем Подвал 1.
- Кликаем Добавить виджет.
- Кликаем Sydney: Contact Info.
- Заполняем поля, дважды нажимаем на стрелку и кликаем Сохранить и опубликовать.
Но если у вас слишком длинный адрес — его некрасиво переносит на вторую строчку. Это потому, что по умолчанию подвал сайта разделен на три части, для трёх виджетов. Давайте это исправим.
- Кликаем Подвал.
- Кликаем Один. Видим, как исправляется отображение адреса.
- Кликаем на стрелку слева вверху.
- Кликаем Сохранить и опубликовать.
Напоследок, я хочу отключить сайдбар (боковую колонку) Вордпресса в блоге. По моему мнению, этот сайдбар давно и безнадежно устарел.
- Кликаем Параметры блога.
- Ставим галочку напротив На всю ширину (без боковой колонки).
- Кликаем на стрелку слева вверху.
- Кликаем Сохранить и опубликовать.
Когда закончите настройку темы — кликните на крестик слева вверху.
Шаг 7. Создание и наполнение страниц.
Теория
Теперь у нашего сайта строгая, профессиональная тема с поддержкой верхнего меню. Давайте создадим на сайте страницы Главная, Новости, Наши услуги, Услуга 1, Услуга 2 и О компании.
Практика
- В левом меню админ-панели, кликаем на Страницы.
- Вверху кликаем Добавить новую.
- Вводим заголовок страницы, например Главная.
- Заполняем страницу текстом и картинками. Всё делается в простом визуальном редакторе. Хотя, если вы разбираетесь в HTML, можно кликнуть на вкладку Текст и писать код вручную.
- Справа, в поле Шаблон, ставим во всю ширину. Это уберет со страницы сайдбар.
- Кликаем Опубликовать.
- Кликаем Изменить в поле Постоянная ссылка под заголовком и приводим URL к человекопонятному виду.
- Кликаем Обновить.
Создаём остальные страницы таким же способом. Страницу Новости можно ничем не заполнять, на неё мы перенесём блог. Для этого:
- В левом меню админ-панели кликаем Настройки.
- Кликаем Чтение.
- В пункте На главной странице отображать выбираем Статическую страницу.
- В списке Главная страница выбираем Главная.
- В списке Страница записей выбираем Новости.
- Кликаем Сохранить изменения.
Теперь добавляем страницы в главное меню сайта:
- В левом меню админ-панели, кликаем Внешний вид.
- Кликаем Меню.
- Удаляем из нынешнего меню все страницы. Для этого кликаем на стрелочке справа от названия страницы и кликаем Удалить.
- Ставим галочку напротив наших новых страницы в списке слева и кликаем Добавить в меню.
- Меняем порядок страниц в меню. Для этого, просто перетаскиваем их. Страницы Услуга 1 и Услуга 2 перетаскиваем на Наши услуги, что сделает их дочерними и превратит кнопку Наши услуги в подменю.
- Кликаем Создать меню.
- Ставим галочку напротив Основное меню в списке Показать местонахождение и кликаем Сохранить меню.
Поздравляю — теперь вы знаете, как сделать настоящий сайт, с красивыми заголовками, блогом и виджетами! Более того, ваш сайт еще и хорошо выглядит на мобильных устройствах.
Осталось только заманить на него клиентов. Я советую добавить адрес сайта на ваши визитные карточки, а также другие виды рекламы. Если планируете сделать сайт основным видом продвижения бизнеса — позаботьтесь об рекламе в Adwords, Яндексе и социальных сетях. Но это уже совсем другая тема и чтобы её объяснить, потребуется уже далеко не одна статья.
Пишите ссылки на сайты, которые вы сделали самостоятельно, в комментарии к статье. А если что-то вдруг непонятно — смело задавайте вопросы, я сделаю всё, чтобы вам помочь!