Здравствуйте, сегодня расскажу вам как создать лендинг за один день. Интернет — отличный канал для привлечения клиента, потому необходимо, например, запустить рекламу в Яндекс Директ или Google ADS. В таком случае лучше всего сделать сайт одностраничник и запустить рекламу на него.

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

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

Этап 1: готовим платформу для Landing Page

Итак, давайте начнем с исходных данных. Чтобы успешно выполнить задачу, потребуется несколько вещей:

  • хостинг, на котором будем размещать сайт;

  • доменное имя;

  • графический редактор (опционально);

  • начальные знания HTML и CSS (опционально).

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

Подготовка домена и хостинга

В первую очередь нужно выбрать доменное имя и хостинг. В плане хостингов я перепробовал многое. Результаты многочисленных проб привели меня на Beget: https://beget.com/. Вполне возможно, что вам по вкусу другой хостинг, но лично для меня оказался наиболее подходящий вариант.

Если сомневаетесь, то вот обзор хостингов, которые отлично подходят для работы: https://workinnet.ru/hosting-for-wordpress/

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

Конечно, я немного покривил душой, когда заявил, что один день. DNS-адреса домена могут изменяться до 24 часов. Сейчас все объясняю. Мы покупаем домен, вводим интересующее название, смотрим, занято или нет. Например, podso.site.

Но смотреть список доменов удобнее всё-таки на Reg.ru, там это делать гораздо удобнее.

Домен для лендинга

Он занят, но это я его выкупил. Таким образом можно долго перебирать, потому поступаем иначе. Выбираем меню «Домены» → «Подрать домен».

Домен для лендинга

Следом появляется такое окно. Ищем домен либо по ключевому слову. В меню слева, либо вводим все интересующие варианты в правое меню. Левое использовать проще.

Домен для Landing Page

Вводим ключевое слово, например “Zae” и получаем такую выборку. Так можно найти нужный домен.

Домен для посадочной

Отлично, после выбора домена нужно его добавить на хостинг. Заходим в панель управления Reg.ru.

Рег.ру

Нажимаем кнопку «Мои домены» и выбираем нужный.

Доменное имя

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

Редактирование DNS

Если у вас хостинг от Reg.ru, то просто ничего не трогайте, в крайнем случае можете DNS поменять на ns1.hosting.reg.ru и ns2.hosting.reg.ru. Если же послушались моего совета и выбрали Beget, то вам придется указать

  • ns1.beget.com
  • ns2.beget.com
  • ns1.beget.pro
  • ns2.beget.pro.

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

DNS-серверы Reg.ru

Тыкаем кнопку «Изменить» и наблюдаем такое сообщение.

DNS-серверы для Landing Page

Как видите, придется ждать до 24 для изменения DNS-серверов. Чаще всего ждать приходится меньше, но стоит готовиться к худшему так что, чем раньше сделаете это, тем быстрее приступите к следующей части. Лучше делегировать DNS сразу после покупки, если уже точно знаете, где будете размещать свой лендинг.

Готовим сайт

Когда DNS-серверы обновятся, придет время подготовить базу для создания Landing Page. Заходим на хостинг, в моем случае это Beget и начинаем работу. Сначала добавляем зарегистрированный домен на хостинг.

Добавить зарегистрированный домен

Это нужно только при условии, если покупали домен у другого регистратора. Предварительно нужно настроить NS-сервера по инструкции, приведённой выше. Если брали на Beget, то домен будет в списке автоматом.

Обязательно в разделе домены добавьте SSL-сертификат. Для этого ткните по кнопку SSL рядом с доменом.

Создание SSL-сертификата на Beget

А потом выберите Бесплатный сертификат Let’s Encrypt и ткните по кнопку «Создать новый». Сертификат установится автоматически. Процесс может занять длительное время, если DNS ещё не обновился, так что лучше заниматься этим, когда DNS обновлён и сайт уже доступен.

Создание SSL-сертификата на Beget

А теперь переходим к процессу настройки сайта. Для этого вам нужно перейти в раздел «Сайты». И около нужного сайта нажмите на шестерёнку.

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

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

Настройка версии PHP и редиректа с HTTP на HTTPS на Beget

Отлично, теперь нужно установить WordPress. Для этого нужно скачать архив с официального сайта: https://ru.wordpress.org/download/, подготовить для размещения на хостинге и распаковать его там. Я подготовил для этого отдельную статью, читайте: https://workinnet.ru/setup-wp-hosting/

Выполняйте инструкцию поэтапно и проблем у вас не возникнет. Установка WP – дело очень простое.

Этап 2: делаем Landing Page

Итак, после установки WordPress пора перейти ко второму этапу: быстрому созданию лендинга. В первую очередь выбираем тему, подробная инструкция есть здесь: https://workinnet.ru/choice-theme-wordpress/

Но в данном случае рекомендую что-нибудь красивое из коробки. Я, например, выбрал тему Sydney. Чтобы установить тему, достаточно перейти в панель администратора WP, справа в меню найти раздел «Внешний вид», выбрать «Темы» и нажать кнопку «Добавить новую». В инструкции все это указано. После установки темы не забудьте нажать кнопку «Активировать».

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

Темы для Landing Page

На вкладке «Общие» указываем название сайта и краткое описание.

Вкладка

Далее роемся по настройкам. У каждой темы они будут свои. В данной теме в разделе «Тип заголовка» можно выбрать полноэкранный слайдер или изображение для шапки. Поменять тексты, сделать более эффектное оформление. Можно даже выбрать видеовставку для шапки. Очень удобно.

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

Конструируем Landing Page

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

  1. Elementor – специализированный визуальный конструктор страниц для WordPress. Позволяет быстро и без заморочек лепить страницы.

  2. Caldera Forms – плагин для создания форм обратной связи.

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

Поехали. В первую очередь создаем форму обратной связи. В админ-панели наводим на Caldera Forms и выбираем «Формы». Сверху нажимаем «Новая форма» и выбираем шаблон «Контактная форма».

Caldera Forms

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

Номер телефона

А так, все функции плагина — отдельная и очень обширная тема, впрочем, интерфейс интуитивно-понятный, разобраться можно очень быстро. Теперь нужно начать строить Landing с помощью Elementor. Выбираем в левом меню админки «Страницы» → «Добавить новую». Создаем заголовок.

Страница Landing Page

И нажимаем сверху кнопку «Редактировать в Elementor». Пред взором возникает такой конструктор, на котором можно строить элементы простым перетаскиванием.

Elementor для лендинга

Пришло время визуализировать. Для начала готовим тексты. Но нам мешает боковая колонка. Находим ее через панель разработчика браузера (кнопка F12). Либо наводим на объект и нажимаем правую кнопку мыши и выбираем «Просмотреть код».

Боковая колонка темы Sydney

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

display:none;
Настройки WordPress

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

#secondary, #secondary a, #secondary .widget-title {
    color: #767676;
    display: none;
}
.content-area {
    width: 100%;
}
.hentry .title-post {
    font-size: 36px;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 10px;
    display: none;
    margin: 0;
}
Elementor

Редачим. В Elementor можно выбрать кучу разных элементов:

  • текст;

  • изображения;

  • картинки с текстом;

  • разделители;

  • заголовки;

  • иконки;

  • счетчики.

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

Создать лендинг на WP

Но мы же хотим навести красоту. Например, выровнять виджет вертикально. Тогда смотрим на скриншот.

Макет Elementor

Нажимаем сюда. Выбираем вертикальное выравнивание «посередине». Отлично. Теперь не помешает фото. Добавляем фото. Но для красоты делаем наложение на него другого. Для этого нужно использовать во вкладке «Расширенные» абсолютное позиционирование, поэкспериментируйте, здесь точных значений уже не подскажу. Чтобы одно фото лежало поверх другого, указывайте ему больший z-index, чем тому, что должно быть снизу.

Абсолютное позиционирование

Для разных устройств придется подбирать по-разному. Рядом практически со всеми вкладками есть значок «Компьютер». Нажимаем на него и смотрим результат. Теперь пора перейти к настоящему веселью.

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

  1. Слева «Фото». Потом нажимаем на значок «макет» и редактируем колонку, меняя ее ширину. Я установил 25%.

  2. Справа добавляем заголовок, а ниже текстовое поле. Как их редактировать поймете, там реально ничего сложного. Все в разделе «Стили», меняете шрифты, цвета и прочее.

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

Кстати, чтобы добавить анимацию, перейдите во вкладку «Расширенные», выберите «Эффекты движения» и экспериментируйте пока что-то не понравится.

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

Осталось последнее: добавить форму обратной связи. Для этого требуется в области виджетов полистать вниз и найти «Шорткод».

Elementor шорткод

У формы обратной связи будет вот такая штука.

Шорткод Caldera Forms

Это и есть шорткод. Его надо скопировать и вставить в виджет «Шорткод», тогда у вас на странице появится форма обратной связи, которая позволит бизнесу эффективно функционировать, то бишь собирать заявки.

О настройке почтового сервиса придется написать отдельную статью.

Завершаем эпопею

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

Результаты можете увидеть по адресу: https://podso.site/ (сайт снёс, больше его не держу)

Благодарю за внимание, успехов вам и вашему бизнесу!

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 3.9 / 5. Количество оценок: 7

Оценок пока нет. Поставьте оценку первым.

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