Landing на WordPress
WordPress

Создаем Landing Page за один день на WordPress

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

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

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

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

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

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

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

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

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

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

В первую очередь нужно выбрать доменное имя и хостинг. В плане хостингов я перепробовал многое. Результаты многочисленных проб привели меня на Макхост: https://mchost.ru/ Вполне возможно, что вам по вкусу другой хостинг, но лично для меня оказался наиболее подходящий вариант. Если сомневаетесь, то вот обзор хостингов, которые отлично подходят для работы: https://workinnet.ru/hosting-for-wordpress/

После выбора хостинга нужно выбрать домен. Несмотря на нелюбовь к Reg.ru, как к хостингу, домены всегда приобретаю у них: https://www.reg.ru/

А вот вам промокодик со скидкой в 5% на приобретение домена. Немного, но лучше, чем ничего: 8404-F30B-D292-4306

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

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

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

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

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

Домен для Landing Page

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

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

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

Рег.ру

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

Доменное имя

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

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

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

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

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

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

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

Готовим сайт

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

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

Теперь настроим хостинг перед размещением сайта.

Добавляем домен Макхост

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

Отлично, теперь нужно установить 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

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

Вкладка "Общие" WordPress

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

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

Конструируем 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/

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

4 комментария

  • Куд-кудах

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

    • ren334

      Если сделать еще подробнее, то получится книга. Впрочем, я взялся уже за цикл статей о разработке сайтов на WP, да и уже есть куча инструкций.

  • Arhelon

    Никогда не встречал мануала так поднимающего настроение.
    Зачёт!
    з.ы. Таперь начну асиливать напечатанные букавы, но вне зависимости от результата в закладки АДНАЗНАЧНА.

    • ren334

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

Добавить комментарий

Ваш e-mail не будет опубликован.