Landing на WordPress
WordPress

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

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

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

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

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

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

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

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

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

Как видите, ничего особенного не требуется. Строить лендинг будем на WordPress. Просто потому, что это быстрее, но, если честно, я предпочитаю делать одностраничники без 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-серверы обновятся, придется время подготовить базу для создания Landing Page. Заходим на хостинг, в моем случае это Макхост и начинаем работу. Сначала добавляем зарегистрированный домен на хостинг.

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

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

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

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

Отлично, теперь нужно установить WordPress. Для этого нужно скачать архив с официального сайта, подготовить для размещения на хостинге и распаковать его там. Я подготовил для этого отдельную статью, читайте: 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

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

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

А так, все функции плагина — отдельная и очень обширная тема. Теперь нужно начать строить наi 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/

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

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

  • Куд-кудах

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

    • ren334

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

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

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