Как сделать самому сайт-визитку на WordPress: пошаговая инструкция

Как вы представляете себя/свой бизнес клиентам? Есть ли у вас сайт или вам достаточно соцсетей? Елена Бочарникова, специалист по созданию сайтов на WordPress, подготовила статью-инструкцию по созданию сайта-визитки. Сайт-визитка – это удобный, профессиональный инструмент, который решает сразу несколько основных задач для бизнеса. И создать его можно самому. Подробнее читайте в статье Елены!

Что такое сайт-визитка WordPress и для чего он нужен?

Сайт-визитка – это одна или несколько страниц в интернете, расположенных на одном доменном имени, предоставляющая общую информацию о владельце, основной перечень услуг, товаров, контактные данные и раздел с ответами на основные вопросы. Главная задача такого сайта – предоставить пользователю основной перечень информации о компании или частном лице.

Кому и зачем нужен сайт-визитка?

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

Шаг 1. Собираем необходимую информацию для создания сайта-визитки на WordPress.

Прежде, чем придумывать имя сайту или искать хостинг, нужно собрать все материалы, которые должны быть на сайте. А именно:

  1. Общие сведения об организации или специалисте. Обычно к ним относят: 
    • Время создания организации/начала работы в заявленной сфере.
    • Миссию и цель 
    • Основные направления деятельности.

          Если сайт-визитка создаётся для специалиста, фрилансера или консультанта, то: 

  • Где учился, дипломы и сертификаты
  • Почему выбрал эту профессию/Профессиональное кредо
  • Какие есть направления в деятельности
  • Какие есть достижения
  1. Перечень услуг или товаров с кратким описанием. Для товаров обязательно – фото. Если это физический товар, то лучше сделать фото в разных ракурсах. Для электронных товаров (книги, курсы) необходимо сделать “обложку, чтобы товар воспринимался таким же реальным, как и физический.
  2. Сведения для покупателя: прайс-листы, образцы договоров, условия оказания услуг, формы или шаблоны заказа, фотографии, портфолио.
  3. Контактные сведения: телефон, адрес, e-mail, группы или профессиональные профили в соцсетях, Ф.И.О. ответственных лиц. 
  4. Всё, что связано со спецификой деятельности вашей организации. Например, если вы активно проводите мероприятия, то уместно выложить на сайте расписание когда, что и где проходит, как можно поучаствовать. Или/и отзывы о своей работе и прошедших мероприятиях.

Шаг 2. Создаём прототип будущей “визитки” на WordPress.

Прототип – это схема вашего сайта. Не стоит тратить время на освоение профессиональных программ и ресурсов для создания прототипов, всё можно сделать либо в обычном Word, либо на бумаге. Участники моего курса делают прототипы в PowerPoint.

Чтобы понять, каким вы хотите видеть свой сайт-визитку, посмотрите ресурсы ваших конкурентов или специалистов, работающих в смежных направлениях с теми же целевыми аудиториями. Сделайте скриншоты понравившихся блоков или вариантов оформления. После этого можно создавать прототип.

В нашем случае прототип считается готовым, когда:

  1. понятно, сколько всего страниц будет на сайте, и какие это страницы (например, главная, страница с новостями, страница портфолио);
  2. понятно, из каких блоков состоит первая страница, в какой последовательности эти блоки расположены;
  3. для каждого блока написан текст и подобрано фото, изображение, если это необходимо;
  4. для других страниц составлены такие же схемы, как для главной;
  5. понятны переходы между страницами (например, если на главной странице у вас есть блок с несколькими отзывами и страница, где вы разместили все отзывы, тогда должен быть переход с блока на соответствующую страницу, обычно пишут “Читать все отзывы” или “Больше отзывов” и ставят ссылку).

Шаг 3. Выбираем имя для сайта и проверяем его на занятость.

У каждого сайта есть свой адрес в сети. Для создания такого адреса необходимо доменное имя, например, site.com.

Вам тоже необходимо подобрать такое доменное имя для вашего сайта:

  • если вы продвигаете себя, как бренд, то доменное имя может быть основано на вашем имени (vasyapupkin.com) или имени и направлении деятельности (pupkin-coach.ru), важно, чтобы доменное не было длинным, его легко было написать на латинице;
  • если сайт создаётся для компании, то логично использовать название компании (или его часть) и, возможно, направление деятельности, например, arsenal-consalt.com;
  • вы можете выбрать любую доменную зону – ru, com, org, info и прочие, есть много разных, по направлениям деятельности, географическому признаку и т.д., здесь нужно ориентироваться на свой бюджет (регистрация доменного имени в зависимости от зоны может стоить и 10 000 р., а ведь регистрацию ещё и продлевать нужно каждый год); 
  • ВАЖНО! Будьте внимательными и осторожными с доменными именами в зоне .рф – они шифруются при формировании ссылок, в результате чего вместо красивой https://зоопарк.рф вы получите https://xn--80ankoagi.xn--p1ai/; такая ссылка выглядит подозрительно для потенциальных посетителей. 

После того, как вы сформулировали 2-3 варианта доменного имени, проверьте, свободны ли они. Для этого нужно открыть страницу https://www.reg.ru/domain/new/ , ввести поочерёдно все варианты в форму и нажать кнопку ПОДОБРАТЬ. 

Рис. 1

Reg.ru – обладает самыми полными сведениями о занятости доменных имён практически во всех зонах. 

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

Шаг 4. Выбираем и приобретаем хостинг, регистрируем доменное имя.

Все сайты располагаются в сети на больших компьютерах – серверах. Для этого владелец сайта покупает место на сервере – хостинг

Чем руководствоваться при выборе хостинга?

  1. Отзывами и рекомендациями (особенно относительно работы техподдержки)
  2. Подходящие тарифы.
  3. Можно зарегистрировать доменное имя.
  4. Есть автоматическая установка WordPress.
  5. Есть автоматическая установка бесплатного SSL-сертификата. 
  6. Понятное неспециалисту устройство аккаунта хостинга. Обычно это C-Panel.

Шаг 5. Устанавливаем и настраиваем WordPress. 

Почему именно WordPress можно почитать в статье “Потому что WordPress — Bat-man! Преимущества, особенности и “страшилки” создания сайта на платформе WordPress” 

Установка: 

  1. Зайти в раздел хостинга КАТАЛОГ СМS.
  2. Выбрать  WordpRess и следовать инструкциям системы.

Рис. 7

  1. После установки на e-mail, указанный при регистрации на хостинге, придёт письмо с данными вашего сайта – ссылка для входа в административную панель (или панель управления) вида https://moysait.ru/wp-admin/ или https://moysait.ru/wp-login.php, логин и пароль.

Рис. 8

Настройка на WordPress

  1. Войдите в панель управления сайтом, для этого используйте ссылку, логин и пароль из письма. 

Рис. 9

  1. Открываете раздел НАСТРОЙКИ-ОБЩИЕ, вводите название и подзаголовок 

сайта:

Рис. 10

Нажать внизу кнопку СОХРАНИТЬ ИЗМЕНЕНИЯ:

Рис. 11

  1. В Разделе НАСТРОЙКИ-ПОСТОЯННЫЕ ССЫЛКИ выбираете НАЗВАНИЕ ЗАПИСИ.

Рис. 12

Чтобы сохранить изменения, нажмите внизу кнопку СОХРАНИТЬ ИЗМЕНЕНИЯ.

  1. Открываете раздел ПЛАГИНЫ-ДОБАВИТЬ НОВЫЙ. 

Рис. 13

Устанавливаете следующие плагины: 

  1. Rus filename and link translit – автоматически транслитерирует кириллицу 
  2. Yoast Seo – настройка seo, формирование сниппетов для соцсетей.
  3. Insert Headers and Footers – обеспечивает вставку кодов Яндекс.Метрики, пикселя FB и других  в “шапку” и “подвал”, 
  4. WP Smush – автоматическое сжатие изображений без потери качества
  5. iThemes Security – защита
  6. WordPress Database Backup – создание архива с базой данных для восстановления сайта 
  7. WP Fastest Cache – чистка кэша 
  8. Optimize Database after Deleting Revisions – чистка и оптимизация базы данных сайта. 
  9. Elementor – конструктор страниц
  10. Astra Starter Sites – редактируемые с помощью Elementor шаблоны сайтов
  11. Envato – редактируемые с помощью Elementor наборы шаблонов страниц. 

Для всех этих плагинов есть инструкции по настройке и использованию, написанные доступно даже для новичков. 

  1. Открываем раздел ВНЕШНИЙ ВИД-ТЕМЫ. Добавляем тему Astra. Активируем её.

Рис. 14

Рис. 15

  1. Открываем раздел ВНЕШНИЙ ВИД – Опции Astra. Находим раздел ИМПОРТИРОВАТЬ СТАРТОВЫЙ САЙТ и переходим по ссылке АКТИВИРОВАТЬ ПЛАГИН ИМПОРТА.

Рис. 16

  1. Сразу открывается страница со стартовыми сайтами. Стартовые сайты – это уже готовые сайты, где вы можете заменить изображения, тексты, поменять местами блоки содержания, а при желании – изменить цвет и шрифты. 

Рис. 17

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

Рис. 18

Рис. 19

9. После того, как сайт импортирован, в разделе СТРАНИЦЫ вы увидите список импортированный страниц 

Рис. 20

Эти страницы можно переименовывать и редактировать с помощью конструктора Elementor. 

Если вы создаёте сайт-визитку, то вероятнее всего, вы оставите 1 страницу, сделаете её главной и отредактируете в соответствии со своим прототипом.

Конечно, эта статья рассказывает о создании сайта-визитки очень общими словами. Те, кто уже знаком с WordPress, смогут быстрее понять и сориентироваться. Новички, если поставят себе цель, тоже смогут создать свою страницу. 

И, конечно, всех приглашаю на курс “WebDIY.Одностраничный сайт на WordPress со своим дизайном”, где мы пошагово учимся делать именно такие сайты. 

___________________________________________________

Полезные ресурсы для работы

  1. Создание обложек для электронных товаров https://www.canva.com/ru_ru/shablony/ ,
  2. Как работать в Elementor https://clck.ru/HVnkA

_____________________________________________________________

При подготовке статьи использовались следующие материалы

  1. Сайт-визитка. https://semantica.in/blog/sajt-vizitka.html
  2. Сайты-визитки: кому они нужны. https://weblinepromo.ru/blog/sajty-vizitki-komu-oni-nuzhny
  3. О том, как правильно создать сайт-визитку.  https://www.kp.ru/guide/sait-vizitka.html

Елена Бочарникова, создание и апгрейд сайтов на WordPress, обучение работе с сайтом.

https://www.facebook.com/elbocharnikova

https://vk.com/el.bocharnikova

Posted in Блог.

Залишити відповідь

Войти с помощью: 

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *