КАК СДЕЛАТЬ САИТ НА WORD PRESS 2023?

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

WordPress крутой движок, с помощью него можно разработать сайт любого формата:

1. Блог
2. Новостной сайт
3. Лендинг ( мой гайд про лендинг)
4. Сайт визитка
5. Интернет магазин ( мой гайд про разработку магазина)
6. Портфолио
7. Онлайн школа ( мой гайд про школу)

Пошаговое руководство по созданию сайта на CMS WordPress для новичков

Определяемся с тематикой

Выбор тематики это ответственная задача. Могу посоветовать вам два правила, чтобы легче определиться с направлением. Начинайте проект либо про то, в чем вы эксперт, либо в той нише, которая вам интересна и вы хотите ее изучить.

Для вдохновения и поиска идей вы можете посмотреть каталоги сайтов, рейтинги:

Начинаю описание именно с этого пункта, т.к. в дальнейшем тематика будет влиять на дальнейшие настройки (оформление, виджеты и пр.)

Выбор домена и хостинга. Регистрация

Домен (доменное имя) — это имя сайта, то название, по которому посетители будут попадать на ваш блог. У моего сайта домен ichigarev.ru, у вас будет свой.

Как выбрать домен? 3 рекомендации

1. Чем короче слово, тем лучше;
2. Если нужный домен занят, попробуйте добавить цифры или тире, если подходит по логике и продолжает понятно читаться;
3. Если домен на английском, то желательно без использования шипящих букв, иначе это выглядит так (ч — ch, ж — zh и пр.).

Проверка истории

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

Для проверки предлагаю использовать два метода:

1. Проверка через сервис web.archive.org

Впишите домен и посмотрите покажет какую-либо историю домена или нет. Можно даже увидеть как выглядел сайт и какие были публикации.

Давайте выберем например 26 августа 2013 года и увидим как в это время выглядел сайт

2. Впишите интересующий домен в поисковик

Если находятся записи с таким доменом, значит он уже ранее был зарегистрирован. И тут уже выбор за вами регистрировать его повторно или нет.

Как выберите домен, не спешите его регистрировать, сначала давайте купим хостинг.

Хостинг

Хостинг — это место, где хранятся все файлы и база данных сайта. Видов много, я расскажу о двух, которые подходят новичкам.

Но когда посещаемость сайта перевалит за 1000 посетителей в сутки, вам придется или покупать тариф подороже или переезжать на VDS хостинг. Я так и сделал, когда трафик на моем блоге вырос. Вы же можете сразу купить VDS, если в дальнейшем не хотите заморочек с переносом сайта. Средняя цена обычного хостинга 150 руб./мес.

Заметка: На обычном хостинге также важно использовать выделенный ip адрес. Если этого не сделать, то ваш сайт будет находится в одном «месте» с сайтами других разработчиков.

Репутация вашего сайта будет зависеть от «соседей» и если эти соседние проекты некачественные или используют запрещенную информацию, то они будут тянуть ваш сайт вниз. Поэтому если вы хотите успешно продвигать свой ресурс в интернете, то выделенный ip это необходимость.

VDS/VPS

Если в двух словах, то VDS хостинг выдерживает больше нагрузки и трафика, а еще у ваших сайтов будет выделенный ip адрес. На обычном хостинге тоже можно купить отдельный ip, но за это нужно доплатить, в среднем 100 руб./мес. Средняя цена VDS хостинга 500 руб./мес.

1. Выберите вкладку Хостинг;
2. Выберите тариф. Для начала можно выбрать самый простой, если планируете размещать только один сайт;
3. Впишите свой емейл и ФИО, которые требуются при регистрации;
4. После успешной регистрации вам на почту придут данные для входа, логин и пароль;
5. Зайдите с помощью них в панель управления хостингом и пополните баланс. Оплатить можно 1 месяц, можно сразу на год вперед. Лучше платить на год, так получается экономнее;
6. Хостинг готов к работе.

Пример регистрации домена:

1. На главном экране в панеле управления хостингом выберите Домены и поддомены > Зарегистрировать домен;
2. Впишите нужный домен, после проверки на занятость появится зеленая галочка, домен свободен, нажимаем Зарегистрировать:
3. Далее нужно нажать Создать нового администратора и вписать свои правдивые данные, чтобы домен был закреплен за вами, за настоящим человеком. Если вы делаете сайт для кого-то, то вписывайте данные владельца;
4. После всех настроек оплачиваем домен и ждем его активации.

Установка SSL-сертификата

SSL сертификат обеспечивает безопасное соединение между сайтом и посетителем. В последнее время это обязательная настройка, чтобы и поисковые системы и посетители считали ваш сайт безопасным.

В итоге ваш проект будет доступен по ссылке https://, а не просто http://.

Сертификат я устанавливаю перед установкой WordPress, чтобы в последствии не появилась проблема «смешанный контент», это некоторые файлы сайта открываются по http:// и если есть хотя бы один такой файл, то браузер будет ругаться, пока мы это не исправим.

Установка движка WordPress

Есть два метода установить WordPress.

1 — вручную
2 — с помощью инструментов хостинга (если такая функция есть у хостера)

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

Базовые настройки

Переходим в раздел Настройки и по очереди настраиваем:

Общие

• Название сайта
  — пишем как будет называться ваш проект.
• Краткое описание
  — пишем 1-2 предложения с использованием ключевых слов по вашей тематике, о чем ваш сайт.

Остальные настройки как правило автоматически сделаны правильно. Сохраняемся и идем дальше.

Написание

• Форматирование
  — здесь я убираю галочки
• Сервисы обновления
  — тут вставляю такие значения (можете также скопировать и вставить на своем сайте):

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

Обсуждение

Медиафайлы

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

Выбор шаблона оформления для сайта

Я всем рекомендую использовать платные шаблоны и сам на своих сайтах использую только покупные шаблоны. Как правило, в платных шаблонах больше функций, больше настроек, чтобы сделать сайт максимально удобным. Средняя цена за шаблон ≈4000 руб.

Но если вы новичок и/или не хотите тратить деньги, то выбирайте для начала бесплатный вариант. Большая галерея шаблонов находится на официальном сайте https://ru.wordpress.org/themes/

Для удобства я собрал список из 30+ неплохих бесплатных шаблонов на WordPress, можете там поискать вариант для себя.

Когда меня спрашивают порекомендовать хороший платный шаблон для блога, я всегда даю ссылку либо на

Эти шаблоны разработали русскоязычные ребята из компании WPShop и на сегодня это лучшее решение для быстрого старта сайта на WordPress.

Шаблоны идеальные, подробнее о них я говорил в этой статье, если интересно почитайте.

Помимо многих преимуществ, одно из главных это админ панель на русском языке. То, что многих тормозит в начале пути создания сайта.

Второй сайт, где я рекомендую покупать шаблоны это ThemeForest. Это уже англоязычный магазин, где продаются тысячи шаблонов. Чтобы не блуждать среди них, посмотрите подборку про 45+ лучших шаблонов для блога на WP.

Советы по выбору шаблона

1. Смотрите как отображается лента статей;
2. Смотрите как выглядит отдельная статья, есть сайдбар (боковая колонка или нет), если вы решите использовать его на блоге;
3. Если есть документация или описание к шаблону, прочитайте какие настройки вы сможете делать после его установки;
4. Если решите использовать бесплатный шаблон, то устанавливайте его через админ панель Внешний вид — Темы. Если скачать со стороннего ресурса, велик шанс словить вирус;
5. Если устанавливаете платный шаблон, то читайте отзывы которые пишут те кто купил тему;
6. Посмотрите когда было последнее обновление шаблона, если больше года назад, то я бы подумал насчет такого варианта. WordPress постоянно обновляется и шаблонам периодически требуются обновления.

Я подготовил отдельную статью с частыми ответами на вопросы по премиум шаблонам, также там есть видео, в котором я рассказываю как правильно выбрать и купить шаблон на ThemeForest — FAQ по премиум шаблонам.

Установка и настройка шаблона

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

1. Настройки темы находятся во вкладке «Внешний вид» — «Настроить», либо «Внешний вид» — [Название темы], либо отдельной вкладкой с названием темы;
2. Настройте заголовок и описание сайта в левом верхнем углу, либо загрузите логотип;
3. Выберите размер и семейство для шрифтов (заголовков и наборного текста);
4. Выберите основные цвета сайта для элементов и шрифта;
5. Сделайте настройки нижней части сайта (подвала).

Примеры панели настроек у шаблонов:

Как установить плагин

В админке сайта выберите Плагины » Добавить новый » Выберите из каталога WordPress или загрузите свой.

Плагины, которые я рекомендую для каждого сайта:

1. Clearfy Pro
2. Yoast SEO
3. WP Super Cache
4. Antispam Bee
5. All In One WP Security

На мой взгляд, это «стандартный набор джентльмена», который должен быть на каждом ресурсе. Ниже в каждом разделе я распишу для чего нужен каждый плагин.

Настройки для улучшения СЕО

Подготовить сайт для СЕО продвижения важно, посетители из поисковых систем это основной источник трафика.

Плагин Clearfy Pro — мега плагин для сайта

Сразу скажу что он платный, но это мега вложение в ваш сайт. В нем сочетается два качества, он легкий, не нагружает систему и сочетает в себе много важных настроек для правильной работы сайта, СЕО, очистки лишнего мусора и защиты от злоумышленников. Подробнее о плагине вы можете прочитать в моем обзоре
или на сайте разработчиков.

Это все те же WPShop, чьи шаблоны я рекомендовал выше.

Если не ставить Clearfy Pro, взамен тогда нужно установить:

• Cyr to Lat enhanced— делает транслитерацию символов с русских на латиницу, ссылка на плагин.
• С другими плагинами для чистки кода от мусора я не работал, поэтому информацию можете поискать самостоятельно.

Плагин Yoast SEO — улучшаем СЕО

Основной плагин для СЕО. С помощью него мы будем прописывать Заголовок и Описание для каждой статьи, страницы, рубрики. Это мега важно для продвижения.

Также с помощью плагина мы создадим карту сайта XML, которая важна для ПС (поисковых систем).

Плагин кэширования (WP Super Cache)

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

Файл robots.txt

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

Ссылка на архив с файлом robots.txt. Файл нужно сначала извлечь из архива, откройте его через блокнот и отредактируйте в двух местах, там где site.ru замените на свой домен, а затем сохраните файл и закачайте в корень сайта.

Дополнения для сайта

Итак, сайт мы создали, настроили шаблон, СЕО и защиту. Теперь давайте посмотрим какие дополнительные элементы мы можем поставить на наш проект, чтобы он был еще более эффективным.

Приём оплаты

Если у вас интернет-магазин или вы что-то продаёте с блога, например курсы, то можете подключить сервис приёма оплаты. Это делается для удобства посетителей и для соблюдения закона об оплате товаров и услуг через интернет.

Контактная форма

Чтобы получать сообщения или заявки с сайта, нужно поставить плагин для формы.

Форма подписки на рассылку

• MailChimp
• SendPulse
• Getresponse
• MailerLite
• Unisender

После регистрации на любом из сервисе и создании списка для подписчиков, вы создадите форму и код данной формы сможете добавить на сайт. Например можно поставить после статьи или в сайдбар.

Модальное окно (попап)

В данном окне вы можете что-то предложить или перенаправить посетителя на нужную вам страницу, например страницу с акцией или интересной свежей статьей. Также можно добавить форму заявки /подписки в модальное окно. Наиболее популярный плагин из бесплатных это  Popup Maker.

Картинки в модальном окне

Частая ошибка на блогах когда при клике на картинку она открывается в новой вкладке, тем самым посетитель уходит со статьи. Чтобы этого не допустить нужно поставить плагин, который будет открывать картинки в попап окне, на случай если этой функции нет в выбранном шаблоне. Ссылка на плагин Easy FancyBox.

Похожие записи

После каждой статьи мы можем выводить блок с похожими статьями. Это улучшит поведенческие факторы, т.к. посетитель может переходить по другим страницам блога и больше времени проведет на сайте. Также это важно для СЕО, потому что получается внутренняя перелинковка.

Кнопки соцсетей

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

Вы можете добавить два вида кнопок:

1. Кнопки соцсетей, которые будут вести на ваши профили/группы, канал на Ютубе. Можно также использовать виджеты.
2. Кнопки, с помощью которых можно поделиться в соцсетях статьей с вашего сайта.

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

Рекламные баннеры можно добавлять в сайдбар или в тело статьи: до, в середине или после статьи.

Онлайн чат однозначно повысит конверсию вашего сайта, чем бы вы не занимались.

Могу посоветовать сервис JivoSite. У него есть как бесплатная версия, так и платная версия, которую вы можете в течении двух недель протестировать. Подробный гайд по Живосайту я сделал в отдельной статье — Обзор сервиса Jivosite.

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

Делаем начальное наполнение сайта

Сайт готов и еще рано идти отдыхать, сейчас начинается самая работа, то ради чего и создавался сайт, теперь его нужно наполнить, давайте сделаем первоначальное и самое основное наполнение.

Меню (структура сайта)

Как правило у сайта горизонтальное меню, которое ведет на различные страницы. Что именно добавить в меню каждый решает сам, вот пункты которые встречаются почти на каждом сайте:

• Главная
  — ведет на главную страницу сайта. Можно такой пункт меню не делать, т.к. пользователи привыкли что при клике на логотип попадаем на главную;
• Обо мне / О сайте
  — страница на которой рассказываете о себе или проекте;
• Блог / Новости
  — отдельный пункт в меню стоит делать если у вас на главной не лента статей. а например лендинг;
• Контакты
  — страница с информацией как с вами связаться.

Это база, дополнительно можно придумать миллион других вариантов, например:

• Кейсы / Примеры работ / Портфолио
  — страница с вашими работами, например у меня так;
• Услуги
  — описываете свои услуги, у меня так;
• Реклама
  — тут расскажите какие варианты рекламы у вас есть, у меня так;
• Бесплатно
  — материалы, которые посетители могут получить/скачать бесплатно, возможно подписавшись на рассылку;
• Курсы / Обучение / Магазин
  — страница где показываете свой товар, у меня так;
• Полезные ссылки
  — любые полезные ссылки по теме, я сделал так;
• Видео
  — страница с видео;
• Инфографика
  — страница или рубрика с какой-то инфографикой;

Добавляйте пункты в меню в зависимости от ваших целей.

Меню настраивается во вкладке Внешний вид » Меню.

Задайте название для меню и выберите страницы, которые будут в меню. Помимо страниц можно также добавлять Записи, Произвольные ссылки или Рубрики.

Страницы

Давайте создадим первую страницу и добавим ее в меню. Страницы создаются в панели Страницы » Добавить новую. Задайте название и заполните необходимой информацией, нажмите Опубликовать. Теперь чтобы на сайте ее стало видно, добавьте ее в меню.

Как написать популярную статью

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

Еще один вариант чтобы объединять статьи по ключевым словам, это метки. Метки можете указывать при редактировании статьи или в панели Записи » Метки. Метки, как правило, отображаются после статьи и при клике на метку открывается список статей в которых также была указана эта метка.

Шаг 1. Создайте свой бренд

Перейдите на сайт WordPress.com и щёлкните Начать работу, чтобы легко создать новую учётную запись. Вам будет предложено выбрать имя сайта, чтобы посетители сразу понимали, о чём он. Когда придумаете идеальное имя, перейдите в раздел  Название сайта в меню Настройки.

Можно также добавить запоминающуюся  ключевую фразу!

Шаг 2. Создайте главную страницу

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

Здесь вы найдёте так называемые блоки — основные элементы вашего сайта. Блоки можно использовать для добавления практически любого содержимого на страницы: изображений, галерей, столбцов, видеороликов, кнопок оплатыи многого другого.

Ознакомьтесь с нашим пошаговым руководством, чтобы узнать, как настроить главную страницу:

Шаг 3. Добавьте страницы

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

Запустите сайт!

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

Если вам нужна информация только по сервисам с помощью которых можно сделать landing page, то переходите сразу к этапу 5 — выбор инструмента верстки. Если же вы хотите понять алгоритм создания лендинга от А до Я, то читайте статью полность.

Как сделать landing page (лендинг) — пошаговая инструкция из 9-ти этапов

Этап 1. Подготовка

Цель лендинга

Первым делом определяемся с целью лендинга, что мы хотим получить от посетителей страницы.

Как правило это что-то одно из трех вариантов:

1. Продажа товара / услуги (например: продажа меда, продажа услуг по разработке логотипа, продажа онлайн курса, продажа наушников и пр.);
2. Получение контакта (например: подписка на рассылку, заявка на замер, заявка на телефонный звонок);
3. Информирование (например: приглашение на бесплатное оффлайн мероприятие, промо страница магазина с акциями).

Определяем целевую аудиторию и что для нее важно

На этом шаге нам важно понимать кто целевая аудитория для нашего предложения, какие у нее боли, какие желания и страхи, и что эти люди хотят получить в итоге. Все это важно понимать, чтобы создавать элементы сайта ориентируясь на ЦА (целевую аудиторию).

Как определить лецевую аудиторию?

• Проанализируйте тех клиентов, с которыми уже работали или работаете сейчас;
• Спросите у клиентов, что для них важно. Да, прям так, просто позвоните или напишите, заранее подготовьте список вопросов;
• Вспомните, а лучше записывайте вопросы, которые вам чаще всего задают по поводу вашего продукта;
• Почитайте тематические сайты/форумы, посмотрите что волнует ваших клиентов.

Смотрим конкурентов (бенчмаркинг)

Когда вы выписали все свои мысли и идеи касательно будущего лендинга, самое время заняться анализом конкурентов (бенчмаркингом). Если вы уже знаете своих конкурентов — отлично, если еще нет, ищите в поисковиках по ключевым словам вашей ниши.

Хотите научиться делать сайты?

Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor», где рассказал пошаговый план как создавать крутые сайты.

Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты.

Цель анализа — это найти и посмотреть, что конкуренты делают плохо и не повторять их ошибок, и что делают хорошо, посмотреть идеи, недостающие блоки, интересные решения в плане дизайна. Это не значит что их нужно просто скопировать, конечно так делать не нужно.

Сохраняйте идеи, затем на этапе написания текста и разработки дизайна адаптируете под свой проект.

Я создаю отдельную папку с названием «Идеи для проекта» и делаю скриншоты интересных блоков сайта.

Этап 2. Пишем текст для лендинга

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

Хаос в голове перенесим на бумагу

Просто, не думая о последовательности, перенесите все мысли и идеи по будущему ленду на бумагу. Выпишите всё, о чем хотите рассказать. Когда вы напишите такой список мыслей, плюс мы посмотрели идеи у конкурентов, следующим шагом мы все это объединяем и составляем блоки и структуру лендинга.

Составляем блоки лендинга

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

Вот основной список блоков, который можно встретить на 90% лендингов:

1. Первый экран с УТП (уникальным торговым предложением);
2. Раскрытие продукта (Описание услуги или товара);
3. Информация об авторе / компании;
4. Отзывы;
5. Кейсы (Истории успеха);
6. Форма / призыв к действию;
7. FAQ (Ответы на частые вопросы);
8. Контакты / подвал сайта.

Какие еще могут быть блоки на сайте:

• Факты в цифрах;
• Выгоды (преимущества);
• Видео;
• Портфолио;
• Для кого;
• Этапы сотрудничества (или Как сделать заказ, Как оставить заявку);
• Тарифы и цены;
• Платёжная кнопка;
• Партнеры;
• Галерея;
• Расписание;
• Команда;
• Сертификаты, дипломы, благодарственные письма;
• Документы.

Когда готов каркас лендинга, начинаем писать текст. Вы можете это сделать сами или отдать на аутсорс копирайтеру.

Советы по составлению текста

1. Главное ставим в начале.
   Не нужно в начале сайта писать о себе, покажите сначала свой продукт.
2. Замените общие слова на факты.
   Не нужно убеждать посетителей в чем-либо, оставьте это право за ними. (Пример: не пишите, что вы лидеры на рынке которым можно доверять, покажите отзывы компаний, которым вы предоставляли услуги и они остались довольны, в дополнение приложите оригинал отзыва, чтобы не быть голословным).
3. Проработайте особенно хорошо первый экран и УТП.
   После захода посетителя на лендинг у вас есть три секунды чтобы захватить его внимание. Если не успели, то человек закроет страницу и будет искать дальше. Первый экран должен быть максимально релевантным запросу, через который посетитель попал на сайт. (Пример: если человек ищет «Бухгалтерия для ИП», не нужно показывать лендинг с заголовком «Ведение бухгалтерии для ООО»).
4. УТП (Уникальное торговое предложение).
   Проще говоря главный заголовок и описание, которое должно емко рассказать о чем данный лендинг. У ТП вы можете составить по технологии 4U.
5. Чем короче тем лучше.
   Старайтесь писать блоки с текстом как можно короче. Длинные портянки текста никто не читает, сегодня у людей всегда нехватка времени и это нужно учитывать. Если все же нужно предоставить много информации, то разбивайте ее на абзацы, блоки.
6. Больше заголовков.
   Абзацы текста не должны быть написаны просто так, без заголовка. Большинство посетителей заходя на сайт, сначала проматывают сайт пытаясь оценить туда они попали или нет. И здесь как раз заголовки играют важную роль, потому что пробегать глазами и оценивать сайт они будут именно по заголовкам.

Где искать копирайтера

1. Биржа копирайтинга ContentMonster.ru
2. Биржа копирайтинга Etxt.biz
3. Частные компании или специалисты. Их вы можете поискать через поиск или в соцсетях

Обратиться к копирайтеру вы можете не только для разработки текста с нуля. Лучше обращаться с готовым списком блоков, с первичными набросками, или даже уже с составленным текстом, который копирайтер «оживит», сделает более интересным, исправит ошибки.

Этап 3. Составляем прототип

Перед этапом дизайна важно составить прототип, давайте расскажу почему.

Причин несколько:

1. Без прототипа потратите больше времени, как ни странно 🙂
   На заре своей карьеры я после написания текста, сразу делал дизайн. Я думал что так я сэкономлю время, но на деле оказалось что все тянулось еще дольше, потому что это не удобно сразу придумывать элементы дизайна без каркаса.
2. Возможные проблемы с заказчиком, если вы делаете лендинг на заказ.
   Уверен, что такая ситуация была у всех разработчиков. Вы утвердили текст и сразу начали делать дизайн, потратили кучу времени, отправляете его клиенту, а он говори что все не так и нужно переделывать. Это куда сложнее сделать, когда уже дизайн готов, нежели когда у вас только прототип из текста и кружочков.

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

Пример из моего кейса прототипа и дизайна, сделанного по данному прототипу.

Изначально планировали такой вариант

На прототипе мы указываем:

• Расположение текста, выделяем заголовки;
• Где будет находится графика (картинки, иконки);
• Где будут кнопки;
• На каком блоке фон будет светлым, а на каком темным.

Сервисы для прототипирования:

• Photoshop.
  Я делаю в Фотошопе. После того как прототип утвердим с заказчиком, удобно здесь же по прототипу делать дизайн.
• Сервис для дизайнеров Figma.com. Онлайн-редактор, в котором также можно сделать прототип и дизайн сайта.
• Сервис Moqups.com. Специальный сервис с готовыми элементами, просто перетаскивайте и добавляйте свой текст.
• Просто на бумаге. Можете от руки набросать прототип, если лендинг не сложный и не хотите сильно заморачиваться.

Используйте сетку Bootstrap

Также советую делать дизайн по сетке, чтобы в последующем он легко адаптировался под разные устройства. Если вы выберите инструментом для верстки конструктор, где дизайн сам адаптируется под различные экраны (об инструментах верстки дальше), а не используется отдельная мобильная версия сайта, тогда дизайн обязательно должен быть разработан по сетке.

Этап 4. Делаем дизайн

Все элементы дизайна лендинга можно разбить на три части, это подбор:

1. Шрифта
2. Цвета
3. Графики (фото, иконки, картинки, фона)

Каждый элемент задает определенное настроение, нам важно подобрать такое сочетание всех элементов чтобы у посетителя сложилось правильное доверительно отношение к нашей компании и продукту.

Как пример: На сайте по оказанию ритуальных услуг навряд ли будут уместны яркие цвета и девушка с лучезарной улыбкой с надписью крупными буквами «АКЦИЯ!».

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

Примеры конечно утрированные, навряд ли вы их встретите в жизни (хотя не исключено), но суть я думаю вы уловили.

Давайте обсудим каждый элемент подробнее.

Шрифт

Текст это основа любого сайта, поэтому шрифт не менее важен чем цвет или графика. Шрифт тоже может задавать настроение, он может быть легким или брутальным, вызывать чувство дороговизны или простоты и тд.

Отталкивайтесь от своей тематики и от того какую эмоцию вы хотите вызвать у посетителей.

Если не хотите заморачиваться и придумывать сочетания, возьмите готовые нейтральные варианты, которые я для вас подготовил. Они подойдут к любой тематике. Это:

• Roboto
• Open sans
• Pt sans

Выберите один или два из них и смиксуйте.

Заголовок — Roboto (Bold)
Текст — Roboto (Light)

Заголовок — Open sans (Bold)
Текст — Roboto (Light)

Заголовок — Pt sans (Regular)
Текст — Open sans (Light)

Где брать шрифты?

Есть бесплатные и платные шрифты. На первых этапах я вам советую использовать бесплатные шрифты от Google Fonts. Там есть хорошие варианты и те, что я описал выше, тоже есть.

Почему я советую именно Гугл шрифты?

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

Если вы делаете сайт для себя, подставите себя, если делаете для заказчика, подставите заказчика.

Цвет

Как правильно подобрать цветовую гамму для сайта?

Белый, серый и черные цвета уже включены в набор, они используются всегда, например шрифт используется белый, серый или черный, фон сайта белый, серый или черный. Как не крути, эти цвета уже будут использоваться на лендинге. Они называются ахроматические (не содержат цветовых оттенков). Остается подобрать хроматические цвета (цветовые оттенки).

Пример цвета

Как правило на сайте используется один, два или три хроматических цвета. Я вам советую выбрать один или максимум два, иначе есть вероятность что не получится гармонично их сочетать и сайт будет смотреться некрасиво, негармонично.

Примеры, какое настроение вызывает каждый цвет:

Как придумывать идеи дизайна для блоков?

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

Этап 5. Выбираем инструмент для верстки

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

Магазин шаблонов WordPress — ThemeForest

1. C MS WordPress + конструктор Elementor (или WPBakery)

Устанавливаете CMS WordPress, устанавливаете платный шаблон, конструктор WPBackery платный, но он идет бесплатно в наборе с 99% шаблонов, которые я рекомендую в подборках. Есть и второй удобный конструктор, это Elementor, он бесплатный, но чтобы расширить его функционал, покупается Pro версия Elementor’а.

Для меня наиболее удобный вариант — это Elementor. Про создание сайта и верстку лендинга на Elementor’е я записал отдельный курсы, подробности тут ichigarev.ru/ideal-course.

Статьи по теме:

• шаблон все же советую использовать платный, он покупается один раз (стоит в среднем 50$). Я покупаю шаблоны на ThemeForest. Регулярно платите только за хостинг и домен.
• гибкий вариант, настраивается всё, можно адаптировать готовое демо, можно сверстать landing с нуля.

Сайт Tilda.cc

2. Конструктор Tilda

Tilda— популярный конструктор, сайт верстаете прямо в браузере. На нем можно тоже сделать абсолютно любой сайт. И лендинг, и магазин и статьи можете верстать.

• абонентская плата 500-1250 р/месяц в зависимости от тарифа и оплаты за месяц/год;
• функций очень много;
• есть встроенная CRM;
• есть бесплатный тариф с ограниченным функционалом;
• ваш сайт находится на сервисе, отдельно платить за хостинг не нужно.

3. Онлайн конструктор uKit

uKit– простой для понимания новичками конструктор с визуальным редактором, который позволяет собирать из готовых секций яркие лендинги.

Его основным преимуществом на фоне других является беспроблемный запуск контекстной рекламы, основного средства продвижения лендингов, прямо из панели управления. Здесь есть магазинный и блоговый модули, а также возможность синхронизации со внешними веб-сервисами (CRM, онлайн-консультанты и т. д.).

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

Везде есть тематический демо-контент, на который вы сможете ориентироваться при наполнении сайта своими материалами. Поддерживается отображение динамического текста, есть конструктор всплывающих окон, что полезно для лендингов. Есть виджет обратного отсчёта времени и прочие важные для этого типа сайтов.

• Цена от $2.5 до $15 в месяц;
• Простой визуальный редактор, очень много готовых шаблонов;
• Простой подход к продвижению сайтов, рассчитанный на новичков;
• Автоматическое создание резервных копий сайта;
• Неограниченный и быстрый хостинг.

4. Ручная верстка

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

Но все равно вот несколько сервисов по поиску исполнителей, где можете найти верстальщика:

• Нужно дополнительно платить за вёрстку верстальщику;
• Трудно вносить правки самостоятельно;
• Чистый код верстки (если верстальщик толковый);
• Сайт находится на вашем хостинге.

Этап 6. Домен

Какой бы метод верстки вы не выбрали, в любом варианте нужен будет свой домен. Домен это имя сайта, например мой домен это ichigarev.ru, у вас будет свой.

Подобрать домен вы можете на сервисе:

Регистрация домена у всех сервисов одинаковая:

1. Зарегистрируйте аккаунт на сервисе;
2. Подберите вариант домена, имя должно быть свободно;
3. Выберите зону (ru, com, рф и пр.);
4. Введите свои паспортные данные, если регистрируетесь как юр.лицо то данные компании;
5. Оплатите домен на год (или сразу на несколько лет);
6. Готово!

Чтобы связать домен с выбранным конструктором или хостингом, нужно прописать ns-сервера в настройках домена. С этой задачей вам поможет справиться поддержка хостинга, если вы сами не разберетесь.

Этап 7. Верстаем лендинг

Когда дизайн готов и вы определились с методом верстки. Следующий шаг, все это дело заверстать.

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

1. Курсы « Идеальный сайт на WordPress» и « Лендинг в Elementor» — это мои курсы, которые я записывал на шаблоне Reboot
   конструкторе Elementor;
2. Tilda. Education— уроки и вебинары по конструктору Tilda;

Этап 8. Прикручиваем дополнительные инструменты

Онлайн чат

Онлайн чат повышает конверсию, проверено! Если что-то человеку не понятно и нужна консультация. не каждый будет звонить или писать в поддержку на почту, удобнее спросить и сразу получить ответ в онлайн-чате. Подключить можете например Jivosite.

Обратный звонок

Тоже важный инструмент повышения количества заявок. Человек оставляет свой номер, система связывает вас и клиента за 30+- секунд и вы уже общаетесь. Посетитель приятно удивлен такой скоростью, а у вас новый клиент. Этот инструмент тоже есть у Jivosite.

Метрика

Важно отслеживать показатели сайта, без цифр вы будете как слепой котёнок. Важно понимать сколько человек посетило сайт, сколько оставили заявку, какие вообще показатели у сайта, можете даже посмотреть поведение посетителей, как они просматривают сайт. Установить можете Яндекс метрику и/или Google Analytics.

Ретаргетинг

Если планируете запускать рекламу в соцсетях, тогда установите код он нужной соцсети на своем сайте. Этот код будет собирать список посетителей, которые зашли на ваш лендинг (то есть заинтересовались предложением) и у которых есть профиль в соцсетях. Потом сможете показывать для них свою рекламу в выбранной соцсети.

CRM

ЦРМ отвечает за то, чтобы ни одна заявка с сайта не пропала, чтобы по каждой заявки вы понимали какое действие нужно сделать (перезвонить, отправить КП, встретиться, напомнить о себе через 14 дней и пр.). Это актуально если у вас поток клиентов, если же 3-10 в месяц, то думаю что CRM вам не нужна.

Наиболее популярные CRM это:

• AmoCRM
• Битрикс24
• Просто таблицы Google, Exel или ручка с листочком (если нужно совсем бюджетно)

Калькулятор

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

Калькулятор можно либо заказывать у разработчиков, что дорого, либо использовать готовый сервис. Есть сервис uCalc, который можно адаптировать для популярных CMS, конструкторов или самописного сайта. Соберите свой калькулятор с помощью удобного конструктора и добавьте его на сайт.

Сбор базы подписчиков

Ели вы решили собирать контакты клиентов в базу подписчиков, чтобы потом делать емейл или смс рассылку, то нужно использовать специальный сервис. Можете рассмотреть Unisender.

Этап 9. Проверка

Итак! Все настроили, подключили, сайт уже в интернете, ура, молодцы. Теперь самое время его проверить. Что именно проверять?

Проверка текста

Обязательно сделайте вычитку текста или обратитесь к корректору/копирайтеру, чтобы это сделал он. Проверяем текст на наличие ошибок, нечаянно скопированных блоков при верстке и пр. Ничто так не портит впечатление от серьезной компании, как ошибки в тексте.

Проверка адаптивности

Обязательно проверьте верстку лендинга с планшета и телефона. Всё ли хорошо адаптируется? Да, иногда бывает что не получается все подстроить идеально, но должно быть хотя бы читабельно и более менее аккуратно. Если какой-то блок не получается нормально адаптировать, тогда нужно сделать два одинаковых блока, один скрыть на компьютерной версии, а второй скрыть на мобильных устройствах. И каждый блок удобно настроить для выбранного разрешения.

Проверка кнопок

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

Проверка форм заявки

Отправьте тестовую заявку, проверьте доставляемость письма. Если делали интеграцию с CRM, то проверьте чтобы заявка попадала в CRM.

Примеры лендингов

Посмотреть примеры лендингов, которые я разработал вы можете в разделе «КЕЙСЫ»

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

43% всех сайтов создано на WordPress. WordPress используют больше блогеров, небольших предприятий и компаний из списка Fortune 500, чем всех остальных решений конкурентов вместе взятых. Присоединяйтесь к миллионам людей, которые считают WordPress.com своим домом.

Творите не отвлекаясь

Пользуйтесь огромной коллекцией паттернов и функций с помощью удобного редактора блоков.

Создайте запоминающееся имя

Создайте персонализированный URL-адрес, чтобы людям было проще вас найти. Домен, который легко запомнить и записать.

Выберите лучший хостинг

Создав сайт на WordPress.com, вы получите невероятно быстрый и безопасный управляемый хостинг WordPress.

Пространство для развития

Получите неограниченную пропускную способность на всех тарифных планах, чтобы ничто не сдерживало рост вашей аудитории. Без простоев. Без ограничений.

По-настоящему безопасная платформа

Брандмауэры, шифрование и защита от атак методом перебора и DDoS-атак. Не волнуйтесь о безопасности.

Можно со своим

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

Гибкое хранилище

С тарифными планами WordPress.com место в хранилище никогда не заканчивается. Фотографии. Аудио. Видео 4K. И всё это в одном месте.

Настоящая поддержка

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

Создано командой WordPress. com

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

Считаете, что WordPress не подходит для крупных компаний? Мы докажем, что это не так.

Они полагаются на WordPress VIP — корпоративную платформу, созданную на WordPress. Она обеспечивает масштабируемую производительность при соблюдении высочайших стандартов безопасности. От 25 000 долларов США/год.

Возьмите свой сайт с собой

В приложении Jetpack
вы найдёте всё необходимое, чтобы создавать, оформлять, развивать свой сайт и управлять им, где бы вы ни находились.

WordPress — это самая популярная платформа для создания сайтов в мире, по данным на 2023 года, почти 43%
всех веб-сайтов в Интернете используют WordPress!

Это стандартный сайт и его будет достаточно для презентации компании. Но, благодаря нашей теме
можно сделать практически любой сайт или интернет-магазин!

Именно это нас сегодня и ждёт. Будем создавать сайта на WordPress с нуля и пройдем все шаги.

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

Однако волноваться не стоит, ведь, как говорится, не святые горшки лепят, так что надежда есть. Мы решили помочь новичкам с этим вопросом, рассказав все тонкости создания сайта на базе ВордПресс. Самое главное – это почти не потребует финансовых вложений!

Так о чем же мы поговорим в нашей статье:

• Поиск и регистрация хостинга и домена.
• Установка WP.
• Настройка дизайна.
• Создание страниц в WP.
• Настройка WP посредством расширений и дополнений.
• Получение поддержки при изучении WP.

До того, как мы займемся созданием сайта, ответим на вопросы, которые часто задают новички.

Что потребуется для создания сайта?

Для того чтобы создать свой веб-сайт на WP, потребуется не так уж много:

1. Домен, проще говоря, имя вашего сайта, например wordpresslab.ru.
2. Хостинг– хранилище файлов вашего веб-сайта.
3. Около 50 минут (приблизительно) вашего свободного времени.

В какую сумму обойдется создание веб-сайта на WordPress?

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

Среднестатистический бизнес-сайт может обойтись примерно от 5 тысяч рублей и до 30 тысяч долларов США в год.

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

А точно стоит выбрать WordPress? Какая база лучше всего подойдет для создания сайта?

Существует множество бесплатных и интуитивно простых и доходчивых редакторов контента, с помощью которых вы сможете произвести настройку сайта. Мы советуем воспользоваться WordPress в качестве базы
для веб-сайта. В случае, если вы хотите создать блог, рекомендуем обратить внимание на другую нашу статью о создании блога на WordPress.Главное преимущество WordPress заключается в том, что он бесплатен, а также для движка существует огромное множество различных дизайнов (тем) и расширений (плагинов). Он удивительно гибок и совместим почти со всеми сторонними сервисами и ресурсами.

---