КАК СОЗДАТЬ САИТ НА WORD PRESS В 2023 ГОДУ ПОШАГОВОЕ РУКОВОДСТВО С СОВЕТАМИ И ССЫЛКАМИ

Частый вопрос, что выбрать для разработки своего сайта или для проекта клиента — CMS WordPress или конструктор Tilda?

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

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

Для любых типов сайта WordPress отличный вариант:

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

Простота настройки и использования

Изначально нужно понимать, что оба инструмента можно изучить как на базовом уровне, так и на более профессиональном.

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

В плане публикации статей удобнее WordPress, потому что движок изначально заточен под такой функционал.

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

Если у вас будут вопросы, вы всегда сможете обратиться в службу поддержки, которая подскажет по любым вопросам.

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

Независимость

Для многих именно этот пункт является камнем преткновения.

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

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

Как я выбираю между WordPress и Tilda

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

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

Если человек планирует вести блог или тем более мультисайт, то как не крути, движок WordPress изучать придётся. А если нужен просто сайт типа лендинг или визитка, то нет смысла тратить много времени на изучение Вордпресса, лучше быстро освоить Тильду.

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

Шаг 1. Начинаем с подготовки

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

Для большинства успешных блогов выбирают именно решение WordPress.org, в качестве CMS. Это касается не только персональных страничек, но и крупнейших новостных порталов. Бесплатным сервис остаётся, чтобы владельцы проектов могли сами разобраться со всем остальным, в том числе и настройками, вплоть до мельчайших деталей.

Но, тут важно понимать разницу между и , в связи с этим советуем ознакомиться со статьей – Что выбрать WordPress.com или WordPress.org.

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

Шаг 2. Регистрация домена и покупка хостинг для WordPress блога

Доменное имя – по-другому, адрес, на котором располагается сайт. В качестве примера – yandex.ru или wordpresslab.ru.

Регистрация предполагает не покупку имени насовсем. Наоборот, оформляется аренда на определённый срок. Минимальное время для такого действия – 1 год. После приобретения пользователь становится администратором, получает адрес во временное владение. На домене создают сайты или почтовые платформы, выставляют на продажу, при необходимости – продлевают регистрацию. Но всеми доменами, в конечном счёте, владеет организация под названием ICANN. Это международная компания, которая отвечает за управление подобными ресурсами.

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

Наш совет при выборе хостинг провайдера и регистратора доменных имен однозначен – REG. RU

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

1 Доменное имя и хостинг

Первое, что нужно сделать это подобрать домен.

Регистрация хостинга для блога на WordPress

2 Установка WordPress

Тут ничего сложного – устанавливаем WordPress (можно выбрать как автоматическую установку, так и произвести ее вручную).

Шаг 3. Выбор и установка WordPress темы

То, как будет выглядеть ваш блог WordPress, зависит от выбранной темы. Сразу, после установки ваш блог будет выглядеть так:

Стартовая тема – Как создать блог на WordPress

Маловероятно, что вам понравится стартовая тема, так как она не сможет заинтересовать посетителей.

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

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

У нас есть отдельная подборка лучших шаблонов для блога WordPress.

Сменить тему просто, достаточно перейти на панель инструментов ВордПресс и нажать «Внешний вид», а затем – «Темы».

Добавление шаблона – Как создать блог на WordPress

Жмем кнопку «Добавить».

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

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

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

Определившись с темой, наведите на нее курсор мыши, после чего вы увидите кнопку «Установить». Жмем на нее и ждем завершение установки. Кнопка установки сменится надписью: «Активировать», жмем на нее для активации.

Активация шаблона – Как создать блог на WordPress

После установки темы, у вас появляется возможность ее настройки. Для этого переходим в графу меню «Внешний вид», а затем жмем «Настроить».

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

После того, как тема была выбрана, переходим к созданию своего первого поста в блоге.

Шаг 4. Публикуем первый пост в блоге

На панели инструментов ВордПресс находим в меню графу «Записи», а затем «Добавить новую».

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

Моя первая запись в блоге – Как создать блог на WordPress

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

Чтобы ознакомиться с редактором, см. Наш учебник по редактору блоков WordPress.

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

В редакторе вы также найдете несколько других разделов, среди которых «Метки» и «Рубрики». Их использование поможет вам упорядочить посты в блоге по разделам. У нас есть отличное описание различий между рубриками и метками, с которыми мы настоятельно рекомендуем вам ознакомиться.

Шаг 5. Плагины и общие настройки

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

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

В каталоге плагинов WordPress, предоставляемых бесплатно, вы сможете найти более 57 тысяч плагинов. А значит для любого вашего каприза имеется плагин!

А вдогонку, вот руководство по установке плагинов на WordPress, если вы уж совсем новичок.

Установка плагинов – Как создать блог на WordPress

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

1 Как работают плагины на примере Google Analytics или как отслеживать посещения вашего WordPress-блога

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

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

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

Пример работы плагинов на основе Google Analytics или отслеживать посещения вашего WordPress блога – Как создать блог на WordPress

От вас потребуются ваши данные и адрес веб-сайта. Затем вы получите код отслеживания Google Analytics.

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

Переключаемся в панель администратора WordPress, где устанавливаем и активируем плагин MonsterInsights. Это наиболее простой способ добавления на ваш сайт Google Analytics, причем версия плагина бесплатна.

Плагин MonsterInsights – Как создать блог на WordPress

После того, как плагин будет активирован, переходим на страничку Insights, а затем – «Настройки», где производим настройку плагина.

Для подключения Google Analytics к сайту WordPress жмем кнопку «ConnectMonsterInsights».

Активация MonsterInsights – Как создать блог на WordPress

Чтобы завершить настройку, воспользуйтесь подсказками, которые будут появляться на экране. После того, как настройка будет завершена, вы сможете следить за аналитикой сайта на вкладке MonsterInsights прямо на панели инструментов WP.

2 Оптимизация блога для SEO целей

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

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

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

Yoast SEO – Как создать блог на WordPress

У плагина есть мастер быстрой настройки, который поможет вам пройти через настройку. Вы также можете настроить плагин самостоятельно следуя нашему руководству по Yoast SEO для ручной настройки.

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

3 Важные плагины и специфика работы с WordPress

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

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

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

Безопасность – Немалое внимание стоит уделить безопасности WordPress.

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

Шаг 6. Как сделать так, чтобы блог приносил доход?

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

Google AdSense

Google AdSense – Как создать блог на WordPress

Большинство блогеров зарабатывает на показе рекламы. Если цель ведения вашего блога – монетизация, то лучшим помощником станет Google AdSense.

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

2 Партнерские программы (Affiliate Marketing)

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

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

3 Интернет-магазин

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

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

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

Приятный и простой процесс редактирования страниц и записей. 60+ дополнительных блоков для Elementor!

В наши дни все, что вам действительно нужно – это плагин под названием Elementor, один из самых универсальных и доступных конструкторов страниц для WordPress. Более того, не нужно платить ни копейки, чтобы начать им пользоваться!

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

Изучение возможностей плагина

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

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

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

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

Большинство параметров настройки, которые вы найдете, основаны на виджетах (элементах) и даже в бесплатной версии их много.

Настройки Elementor

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

Также есть удобный менеджер ролей, который позволяет определить, какие типы пользователей могут иметь доступ к Elementor, а какие останутся сидеть на стандартном редакторе блоков (контроль над ролями доступен только в PRO версии).

Какие виджеты (элементы) доступны в бесплатной версии?

В целом, плагин построен на методе Drag-and-drop, и содержит много различных элементов структурированных по разделам.

Структура элементов в плагине

В общей сложности вы получаете около 30 базовых элементов (все вкладки, кроме PRO), которые дают вам все необходимое для создания страниц.

Если базовых элементов недостаточно, можно получить дополнительные виджеты путем обновления до Elementor Pro.

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

Сравнение версий. А нужно ли покупать Elementor PRO?

Если вам нужен удобный, мощный бесплатный конструктор, то бесплатная версия – отличный выбор!

Но весь потенциал плагина раскрывается только с переходам на PRO версию.

Давайте посмотрим на сравнительную таблицу и продолжим:

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

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

Использование бесплатной версии конструктора

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

Шаг 0. Выбор правильной темы (шаблона) для сайта на базе Elementor

Создание первой страницы в Elementor

Шаг 2. Начало работы в редакторе

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

Создание строк и столбцов

В качестве примера мы создали две строки, первая строка содержит один, полно-размерный столбец, а вторая – 2 столбца.

В первую строку добавим заголовок:

Заголовок – первый добавленный элемент

Вы неверное уже заметили, что не смотря на то, что страницы была создана с названием «Моя страница в Elementor» – заголовок не отображается. Добиться этого можно используя родительскую тему «Hello» и её дочернюю тему.

В дочерней темы следует добавить следующий фильтр:

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

Используем вкладку стиль для редактирования цвета заголовка

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

Шаг 3. Глобальные настройки

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

Глобальная настройка стилей

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

Шаг 4. Строки, колонки, элементы и их настройки

Даже, используя бесплатную версию плагина у вас есть тонна инструментов для воплощения вашего видения. Каждая строка, колонка и отельный элемент может быть настроен. Вот где раскрывается настоящая сила Elementor как WordPress плагина.

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

Отделяем шапку сайта от тела контента с использованием Elementor для WordPress

Не дурно, да? Но давайте двигаться дальше и разбираться с шаблонами которые доступны в бесплатной версии плагина Elementor.

Шаг 5. Шаблоны страниц в Elementor

Нажав на иконку с изображение папки

Библиотека шаблонов Elementor

Тут все просто – выберем понравившийся шаблон и вставляем его в тело контента. Большинство самых “вкусных” шаблонов доступно только в PRO версии.

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

Создание форм, также доступно только в Elementor PRO, а ведь благодаря им можно полностью избавиться от сторонних, жрущих тонны ресурсов, плагинов типа «Contact Form 7».

Но всё же начать стоит возможности создания шапки и подвала сайта.

Редактор тем в PRO версии

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

Конструктор тем меняет правила игры для всех, кто знаком с созданием собственных тем, поскольку он позволяет создавать собственные верхние и нижние колонтитулы (Header и Footer), а также другой динамический контент для вашего веб-сайта. Он позволяет вам переопределять важнейшие аспекты используемой WordPress темы!

Создание шапки сайта (Header) используя Elementor PRO

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

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

Добавляем условия отображения для шапки сайта

Будет предположено добавить условия отображения. Нажимаем «Add Condition», а так как там по умолчанию выбрана опция «Entire Site», что означает – показывать на всех страницах сайта, то нажимаем «Save & Close». Как вы уже поняли можно создавать и совмещать различные условия отображения динамических элементов, но в рамках этого руководства это рассматриваться не будет.

Возвращаемся к редактированию страницы, которую мы создали ранее. И что мы видим? Правильно, нашу созданную шапку. Давайте дополнительно стилизуем её, а для этого нужно нажать «Редактировать Header»

Пример редактирования шапки сайта в Elementor PRO

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

Часто задаваемые вопросы

Elementor – это лучший и бесплатный конструктор для WordPress, который позволяет создавать красивые веб-сайты самым простым и быстрым способом.

Elementor работает со всеми темами?

Плагин работает со всеми темами, которые соответствуют стандартам WordPress.

Совместим ли он с другими плагинами WordPress?

Плагин совместим практически со всеми плагинами.

Что такое Elementor PRO

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

Могу ли я редактировать страницы своего блога с помощью Elementor?

Да, но Вам понадобится “конструктор тем”, который входит в Elementor PRO

Могу ли я редактировать страницы WooCommerce?

Вы можете редактировать страницу товара и страницы архивов с помощью конструктора WooCommerce Elementor. Скоро появится возможность редактировать страницу оформления заказа и страницу корзины с этой функцией.

Подведем итог

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

Надеемся, это мини-руководство дало вам отличную отправную точку для успешного использования плагина Elementor и его PRO версии.

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

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

Хотите научиться зарабатывать в интернете? Написал большой гайд, где показал 41 метод заработка через интернет — статья по ссылке.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Не хотите составлять текст самостоятельно? Найдите копирайтера, который сделает это за вас.

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

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

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

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

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

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

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

Но потом переиграли и итоговый вариант выглядит вот так

Полный кейс можете посмотреть по ссылке.

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

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

Я всегда начинаю прототип на бумаге, мне так удобнее. Потом уже переношу в Фотошоп.

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

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

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

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

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

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

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

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

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

Шрифт

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

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

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

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

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

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

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

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

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

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

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

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

Цвет

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

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

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

Материал про цвета взят отсюда.

Графика (фото, иконки, картинки)

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

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

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

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

Кто-то скажет «Илья, фото на стоках стоят как самолет!» — есть такое 🙂 Для вас есть способ как скачивать картинки по доллару, про сервис написал тут. Ну а если вы делаете проект для крупной коммерческой компании, то лучше заложите эту сумму в бюджет и купите картинки на официальном фотостоке, опять же, обезопасите себя.

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

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

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

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

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

CMS WordPress + конструктор Elementor (или WPBakery)

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

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

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

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

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

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

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

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

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

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

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

Этап 6. Домен

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

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

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

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

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

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

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

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

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

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

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

Метрика

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

Ретаргетинг

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

CRM

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

Калькулятор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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