Лендинг на wordpress что это
Как сделать лендинг на WordPress
Нужен ли мне лендинг.
Если перед вами стоит такой вопрос, то, вероятнее всего, лендинг вам все-таки нужен. Хотя для начала нужно определиться – что такое лендинг.
Лендинг (лендинг пейдж, лэндинг, целевая страница, посадочная страница, одностраничник, лендос) – это сайт, который содержит в себе информацию о какой-то услуге, товаре или компании (человеке). Говоря о лендинге, чаще всего имеют в виду автономный сайт, состоящий из одной страницы, на которой перечислена вся основная информация.
Лендинг удобно использовать для продажи определенного товара – монопода, смартфона, вебинаров… Однако сейчас в форме лендинга может быть выполнен сайт веб-студии, ведущего свадеб или парикмахерской. Лендинг – это красиво, стильно, удобно, современно и менее затратно, чем разработка и содержание полноценного сайта.
Плюсы и минусы лендинга
Но если вы все еще сомневаетесь, то более подробно остановлюсь на плюсах и минусах лендинга.
Начну с минусов лендинга.
Теперь перейдем к плюсам лендинга.
На мой взгляд, плюсы лендинга существенно перевешивают минусы, однако вам всегда стоит отталкиваться от тех задач, которые стоят перед вами, чтобы не разочароваться в результате.
Создаем лендинг на WordPress
С чего начать? Начнем с выбора CMS!
WordPress – известная CMS, которую горячо любят многие пользователи. Она широко распространена, легка в освоении, гибка… поэтому и лендинг я решил сделать именно на этой платформе.
Но начинать нужно не с установки WordPress, а с идеи. Если вы собираетесь сделать лендинг самостоятельно, то, скорее всего, дизайнера у вас нет. Тогда нужно продумать то, как будет выглядеть внешний вид сайта. Не хватает фантазии? Подсмотрите у конкурентов или просто найдите те лендинги, которые вам нравятся.
Я не говорю о том, что нужно делать один в один! У вас просто должна быть общая картинка того, чтобы вы хотите получить в итоге.
Выбрали, придумали? Значит, идем дальше. Не буду останавливаться на технической части (покупка домена, устанока WordPress и т.п.), а сразу перейду к разработке!
Переходим к разработке
WordPress – инструмент многогранный, в основном благодаря наличию моря плагинов. Поэтому и лендинг мы будем делать тоже при помощи плагина – а именно Free Landing Pages Builder by Wishpond. Пользоваться этим плагином совсем не сложно, вы разберетесь в нем буквально за пару минут!
Мне он нравится наглядностью и простотой, поэтому в нем удобно работать, все изменения можно производить прямо на макете. Но – плагин англоязычный. И еще один момент – он условно-бесплатный. При использовании его формы отправки на бесплатном тарифе вы сможете получить лишь 200 лидов в месяц – если у вас выходит большее количество заказов, то нужно перейти на один из платных тарифов. Я предполагаю, что самостоятельно лендинги делают на начальном этапе запуска какой-то услуги или товара, поэтому такого количества должно хватить. А возможно, вам вообще лендинг нужен в качестве своего сайта-визитки…
Вам нужно зайти в панель администратора WP, скачать и активировать этот плагин. В вашем списке появится еще одна строчка – Landing pages – и, перейдя в этот пункт, вы можете начать создавать свой лендинг.
Наведите на картинку любого шаблона курсор: «Choose Template» – выбрать шаблон; «Preview» – превью (предварительный просмотр в окне справа). Советую сначала посмотреть превью шаблона и лишь потом брать его в работу. Кстати, в превью можно посмотреть шаблон и на мобильном устройстве. Удобно!
Шаблонов много, и все они разные – по темам, расположению элементов, длине. Выбирайте тот, который наиболее близок к вашей изначальной идее: картинки и текст можно поменять, ориентируйтесь на расположение блоков и их количество.
Определились c шаблоном? Нажимайте «Choose Template» и переходите к следующей части. Высветится окошко «Give Your Landing Page A Name» – дайте название своему лендингу.
Теперь начинается самое главное – редактирование шаблона. Здесь все просто: каждый элемент подсвечивается и каждый элемент можно изменить. Настройте цвет, форму, размер. В общем, экспериментируйте.
Итак, справа у вас шаблон. Слева контейнер с различными элементами, которые можно добавить на лендинг. Их можно просто перетаскивать и вставлять на шаблон в то место, куда вам нужно.
Если вы нажимаете на какой-то элемент, он становится активным, и вы можете менять его свойства на самом шаблоне или в контейнере слева. Как и в превью, во время редактирования вы можете смотреть, как лендинг будет выглядеть на разных устройствах.
После настройки лендинга не забудьте прошерстить настройки (Settings) – там можно, в частности, настроить SEO (задать название страницы и описание). «Share settings» – название, описание и картинка, которые будут показываться, если кто-то поделиться ссылкой на ваш сайт в соцсетях. Тут же вы сможете еще, к примеру, добавить шрифты (Add/Edit Fonts), если представленных по умолчанию вам покажется мало.
Публикация лендинга
Оформили лендинг? Проверили адаптивность отображения на других устройствах? Тогда переходим к публикации вашего проекта в сети.
Нажимайте яркую оранжевую кнопку «Publish» в горизонтальной панели!
В появившемся окошке выбирайте «Custom Domain» и вводите адрес сайта, на котором вы хотите разметить получившуюся страницу. Но я советую разместить сайт на поддомене (например, 1.example.ru), и далее поясню почему.
Внесение изменений на хостинге
Теперь вам нужно внести одно, но крайне важное изменение на хостинге – поменять запись CNAME используемого домена на wishpond.com. Так как на хостинге Timeweb можно поменять CNAME только для поддомена, я рекомендую использовать поддомен.
Для того чтобы внести изменения, войдите в свою панель управления хостингом, выберите пункт «Домены и поддомены», рядом с поддоменом нажмите на зеленую шестеренку («Настройки поддомена»), выберите вкладку CNAME, пропишите там «wishpond.com» и сохраните измнения.
Готово! Проверяйте работоспособность сайта и вносите изменения, если что-то не нравится!
Как создать лендинг на WordPress: пошаговая инструкция
Выбор хостинга, регистрация домена, установка WordPress
Перед тем, как начинать работу над лендингом, необходимо определиться с хостингом. Хостинг — услуга по предоставлению дискового пространства на сервере. Из популярных стоит обратить внимание на Beget, Timeweb, REG.RU и «Джино». Они предлагают отличную техподдержку, понятный интерфейс и выгодные тарифные планы.
Помимо хостинга, требуется домен. Вам необходимо зарегистрировать доменное имя у сертифицированного российского регистратора. Мы рекомендуем выбирать REG.RU или RU-CENTER.
Далее вам нужно связать домен и хостинг, прописав хостинговые DNS-серверы у регистратора домена. Подробнее об этом почитайте в справке в процессе регистрации домена.
Переходим к установке WordPress. Сделать это можно одним из двух путей: автоматически (воспользовавшись бесплатной услугой развертывания CMS у хостера) или вручную. Наиболее предпочтителен, особенно для новичков, первый вариант. В этом случае вам достаточно указать основные параметры и запустить процесс установки. Рассмотрим, как это делается на хостинге Beget:
Выбираем пункт CMS
Нажимаем на нужную CMS
Заполняем все поля
Поиск и установка шаблона лендинга на WordPress
Огромное количество шаблонов посадочных страниц можно найти на специализированных сайтах. Шаблоны бывают платными и бесплатными. Бесплатные шаблоны — это, как правило, урезанные версии платных. Несмотря на это, зачастую их функционала достаточно для создания качественного лендинга.
Поиск шаблона можно начать непосредственно в админке WordPress в меню слева: «Внешний вид» => «Темы» => «Добавить новую».
Добавляем тему
Настройка фильтра
Далее настраиваем фильтр и выбираем среди популярных или свежих. Также можете оттолкнуться от своей тематики и указать ее или синонимы на английском языке в поле поиска, например, medicine или medical (медицина). Выбрав шаблон, зайдите в него, ознакомьтесь с описанием и перейдите на демоверсию сайта.
Демоверсия сайта
Если тема вам подходит, устанавливайте и активируйте ее.
Далее вам нужно выбрать: хотите ли вы создать лендинг на чистом шаблоне или же с помощью конструктора (плагина). Первый вариант больше подходит для профессионалов, поскольку требует определенных знаний, таких как понимание работы CMS, навыки верстки и т.д. Конечно, вы можете загрузить демоданные, которые обычно предусматриваются разработчиком шаблона для упрощения его установки, однако, чтобы править их, тоже нужно довольно глубоко разбираться в WordPress.
Плагины для создания лендинга на WordPress
Использование плагинов — идеальный вариант для новичка. Они позволяют собрать страницу практически любого вида путем перемещения элементов в визуальном редакторе. Далее рассмотрим наиболее популярные конструкторы страниц для WordPress.
Elementor
Функционал данного конструктора позволяет создавать страницы, адаптированные под mobile, а также настраивать те или иные элементы в зависимости от устройства.
Beaver Builder
Thrive Architect
Вместе с плагином поставляется набор из 334 шаблонов, которые с легкостью можно кастомизировать. Данный конструктор довольно прост в использовании, но на фоне конкурентов выделяется только тем, что у него нет бесплатной версии.
OptimizePress
В платную версию входят более 60 шаблонов, кроме того, доступен магазин тем. Конструктор имеет простой функционал и подходит для решения легких задач. На фоне других выделяется возможностью интеграции с CRM, а также возможностью создания страниц с платным доступом (подходит для обучающих ресурсов) и страницей регистрации.
Выбираем плагин
Из всего многообразия конструкторов сегодня явно выделяется Elementor. О его функциональности, простоте и надежности говорят количество скачиваний (более 4 млн.) и средняя оценка (4,8 балла из 5). В числе преимуществ также доступность и большое количество разнообразных инструментов даже в бесплатной версии. Кроме того, у разработчика Elementor есть множество полезных видеороликов на собственном YouTube-канале (на английском языке).
Создаем лендинг на WordPress с помощью конструктора Elementor
Далее подробно разберем, как установить плагин и создать несколько наиболее сложных блоков. Все остальные блоки вы сможете делать по аналогии. Главное на данном этапе — понять основной принцип работы с инструментами Elementor.
Установка Elementor
Для установки плагина кликните «Плагины» => «Добавить новый» в левом меню админки. В поиске вбейте «Elementor», нажмите кнопку «Установить», а после активируйте конструктор.
Установка Elementor
Выбор темы
Не все шаблоны хорошо сочетаются с данным конструктором, поэтому мы рекомендуем выбирать из тех, которые предназначены специально для него:
В число универсальных тем входят:
Допустим, наша цель — создать лендинг для агентства наружной рекламы. В качестве примера будем использовать тему Sydney. Скачиваем ее через админку и активируем.
После установки и активации шаблона в настройках темы задаем статичную страницу в роли главной. Ее мы и будем редактировать.
Нажимаем «Настройка главной страницы»
Задаем статичную страницу в роли главной
Редактирование холста в Elementor
Заходим в «Страницы», кликаем «Главная». Справа в настройках страницы в разделе «Атрибуты» указываем, что это шаблон главной. После нажатия на кнопку «Редактировать в Elementor» откроется холст главной страницы и панель управления Elementor.
Заходим в список страниц
Выбираем шаблон
Нажимаем «Редактировать в Elementor»
Список инструментов Elementor
По умолчанию верхняя часть лендинга (первый экран) будет представлять собой фоновое изображение, в левой части разместятся логотип, название и краткий слоган, справа — форма обратной связи.
Так будет выглядеть лендинг
Теперь рассмотрим основные возможности и инструменты Elementor.
Принцип создания страницы достаточно прост: формируем на рабочей области структуру блока (от 1 до 6 колонок), перетаскиваем в нее необходимые элементы из левой панели инструментов и редактируем.
Нажимаем на значок «Добавить»
Выбираем структуру
Задаем нужные параметры
Далее устанавливаем фон страницы на вкладке «Стиль» => режим «Классический»
Установка фона
Перетаскиваем элемент «Внутренняя секция» на рабочую область блока. Автоматически создаются 2 колонки.
Перемещаем элемент на рабочую область
Добавляем секции
Результат
Размещаем здесь 2 заголовка: первый — название компании (h1), второй — слоган или призыв к действию (h2).
Прописываем заголовки
Колонка справа отведена под форму заказа обратного звонка. Здесь нам понадобится сторонний бесплатный плагин Contact Form 7. Оформлением формы следует заняться внутри плагина, а затем просто вставить шорткод в блок в Elementor.
Размещение шорткода
Название компании оформляется непосредственно в редакторе Elementor кодом CSS. Новичкам этот вариант может не подойти, поэтому заголовок можно сделать и в виде обычной надписи, нужно лишь подобрать шрифт и его цвет.
Elementor — в первую очередь визуальный редактор, хотя при наличии знаний CSS вы можете кастомизировать элементы как вам угодно. Каждый элемент имеет свои настройки, например, у заголовков можно менять типографику, отступы, применять многочисленные эффекты появления (исчезновения) и т.д. Но самое главное — любой текст, изображение, иконки можно позиционировать простым перетаскиванием.
Вот что получилось у нас буквально за несколько минут (если не брать в расчет время на настройку формы):
Пример лендинга
Точно таким же образом создаются блоки с преимуществами компании, описанием услуг, отзывами и т.д.
Теперь обратите внимание на сектор «Потребность клиента». Он состоит из 6 блоков. При наведении на каждый появляется тень и создается так называемый 3D-эффект.
Оформляем блок «Потребность клиента»
Настраиваем стиль
Внутри каждого блока по центру размещена иконка из стандартного набора Elementor (их там тысячи на любую тематику), она кастомизирована под общую стилистику и цветовую гамму шаблона.
Выбираем иконки
Настраиваем стиль иконок
Конструктор позволяет создавать счетчики, которые удерживают внимание пользователя и, как правило, положительно влияют на конверсию лендинга. Так, вы можете сделать счетчик обратного отсчета, к примеру, до конца какой-либо акции.
Настройка счетчика в Elementor
По окончании редактирования следует сохранить созданную страницу, нажав на кнопку «Опубликовать».
Резюмируем возможности Elementor
О всех возможностях Elementor никак нельзя рассказать в одной статье. Как видно из описанных выше примеров, на этом конструкторе можно собрать практически любой лендинг.
Вот некоторые элементы и возможности, о которых мы пока вам не рассказали:
Встроенные шаблоны Elementor
В базе конструктора есть бесплатные шаблоны, которые устанавливаются в пару кликов. Их обычно используют, когда не хотят создавать структуру лендинга с нуля.
Шаблоны Elementor
Пример встроенного шаблона для лендинга
Когда шаблон подгрузится, у вас будет полностью готовая основа для лендинга, на которой нужно будет лишь поменять информацию и изображения.
Меняем текст
Если бесплатные шаблоны не подходят, на специальной бирже вы можете купить любой другой, более сложный шаблон.
Создаем Landing Page за один день на WordPress
Здравствуйте, сегодня расскажу вам как создать лендинг за один день. Интернет — отличный канал для привлечения клиента, потому необходимо, например, запустить рекламу в Яндекс Директ или Google ADS. В таком случае лучше всего сделать сайт одностраничник и запустить рекламу на него.
Потому, рекомендую самый простой способ конструирования посадочной страницы: на WordPress. И самый быстрый. Ведь в данном случае нам необходима максимальная скорость введения в эксплуатацию. Начнем позиционировать бизнес во всемирной паутине.
Кстати, если желаете всё сделать максимально просто, то можете использовать подходящие темы для лендинга. Установка, минимальная настройка, знаний кода не нужно от слова совсем. Вот список таких тем для WP.
Этап 1: готовим платформу для Landing Pag e
Итак, давайте начнем с исходных данных. Чтобы успешно выполнить задачу, потребуется несколько вещей:
хостинг, на котором будем размещать сайт;
графический редактор (опционально);
начальные знания HTML и CSS (опционально).
Подготовка домена и хостинга
В первую очередь нужно выбрать доменное имя и хостинг. В плане хостингов я перепробовал многое. Результаты многочисленных проб привели меня на Fozzy: https://fozzy.com/. Вполне возможно, что вам по вкусу другой хостинг, но лично для меня оказался наиболее подходящий вариант.
Ну и промокод на скидку в 10%: 0f42e170-1599-4410-8934-83f003aa61df
Если сомневаетесь, то вот обзор хостингов, которые отлично подходят для работы: https://workinnet.ru/hosting-for-wordpress/
После выбора хостинга нужно выбрать домен. Несмотря на нелюбовь к Reg.ru, как к хостингу, домены всегда приобретаю у них: https://www.reg.ru/
А вот вам промокодик со скидкой в 5% на приобретение домена. Немного, но лучше, чем ничего: 8404-F30B-D292-4306
Конечно, я немного покривил душой, когда заявил, что один день. DNS- адреса домена могут изменяться до 24 часов. Сейчас все объясняю. Мы покупаем домен, вводим интересующее название, смотрим, занято или нет. Например, podso.site.
Он занят, но это я его выкупил. Таким образом можно долго перебирать, потому поступаем иначе. Выбираем меню «Домены» → «Подрать домен».
Следом появляется такое окно. Ищем домен либо по ключевому слову. В меню слева, либо вводим все интересующие варианты в правое меню. Левое использовать проще.
Вводим ключевое слово, например “Zae” и получаем такую выборку. Так можно найти нужный домен.
Отлично, после выбора домена нужно его добавить на хостинг. Заходим в панель управления Reg.ru.
Нажимаем кнопку «Мои домены» и выбираем нужный.
Теперь нужно указать DNS- серверы, для этого ткните в указанное место. Я покажу на примере свободного домена, который купил, но так и не применил нигде.
Тыкаем кнопку «Изменить» и наблюдаем такое сообщение.
Как видите, придется ждать до 24 для изменения DNS- серверов. Чаще всего ждать приходится меньше, но стоит готовиться к худшему так что, чем раньше сделаете это, тем быстрее приступите к следующей части. Лучше делегировать DNS сразу после покупки, если уже точно знаете, где будете размещать свой лендинг.
Готовим сайт
Когда DNS- серверы обновятся, придет время подготовить базу для создания Landing Page. Заходим на хостинг, в моем случае это Макхост и начинаем работу. Сначала добавляем зарегистрированный домен на хостинг.
Теперь настроим хостинг перед размещением сайта.
Выбираем настройки PHP, здесь нужно указать версию 7.4 и заказать сертификат SSL. Он нужен для того, чтобы к вам могли заходить через HTTPS (безопасный протокол соединения), учтите, на лендинге всегда есть формы обратной связи, так что сделайте сертификат, иначе есть вероятность, что данные посетителя перехватят злоумышленники. У меня уже готов, но у вас будет кнопка заказать.
Выполняйте инструкцию поэтапно и проблем у вас не возникнет. Установка WP – дело очень простое.
Этап 2: делаем Landing Page
Итак, после установки WordPress пора перейти ко второму этапу: быстрому созданию лендинга. В первую очередь выбираем тему, подробная инструкция есть здесь: https://workinnet.ru/choice-theme-wordpress/
Но в данном случае рекомендую что-нибудь красивое из коробки. Я, например, выбрал тему Sydney. Чтобы установить тему, достаточно перейти в панель администратора WP, справа в меню найти раздел «Внешний вид», выбрать «Темы» и нажать кнопку «Добавить новую». В инструкции все это указано. После установки темы не забудьте нажать кнопку «Активировать».
В первую очередь настраиваем тему. Достаточно ткнуть кнопку «Настроить» на панели администратора. Либо, если уже перешли на сайт, в панели сверху. На скриншоте указал.
На вкладке «Общие» указываем название сайта и краткое описание.
Далее роемся по настройкам. У каждой темы они будут свои. В данной теме в разделе «Тип заголовка» можно выбрать полноэкранный слайдер или изображение для шапки. Поменять тексты, сделать более эффектное оформление. Можно даже выбрать видеовставку для шапки. Очень удобно.
После того, как покопались в настройках, придется приступить к редактированию.
Конструируем Landing Page
Рас уж у нас задача быстренько слепить лендинг, то придется прибегнуть к помощи интересных плагинов:
Elementor – специализированный визуальный конструктор страниц для WordPress. Позволяет быстро и без заморочек лепить страницы.
Для установки заходим в меню «Плагины», нажимаем «Добавить новый», в поисковую строку вводим названия, устанавливаем и потом активируем. Принцип тот же, что и у тем.
Поехали. В первую очередь создаем форму обратной связи. В админ-панели наводим на Caldera Forms и выбираем «Формы». Сверху нажимаем «Новая форма» и выбираем шаблон «Контактная форма».
Теперь создаем простые поля. Как видите, я все отредактировал. В данном плагине можно с легкостью выбрать нужное. Пока что используйте базовый шаблон. Его легко поправить. Если нужен номер телефона, то выберите что-нибудь из этого.
А так, все функции плагина — отдельная и очень обширная тема, впрочем, интерфейс интуитивно-понятный, разобраться можно очень быстро. Теперь нужно начать строить Landing с помощью Elementor. Выбираем в левом меню админки «Страницы» → «Добавить новую». Создаем заголовок.
И нажимаем сверху кнопку «Редактировать в Elementor ». Пред взором возникает такой конструктор, на котором можно строить элементы простым перетаскиванием.
Пришло время визуализировать. Для начала готовим тексты. Но нам мешает боковая колонка. Находим ее через панель разработчика браузера (кнопка F12). Либо наводим на объект и нажимаем правую кнопку мыши и выбираем «Просмотреть код».
Дописываем прямо в консоли разработчика в правое поле и смотрим на результат, заодно копируем весь блок, отмеченный стрелкой:
И снова заходим в кастомайзер (настройки темы) и в раздел дополнительные стили (указал на скриншоте выше) вносим код нужного элемента. Если хотите такой же макет, как у меня и выбрали ту же тему, то внесите в «дополнительные стили» вот такой код:
Редачим. В Eleme n tor можно выбрать кучу разных элементов:
картинки с текстом;
Большим плюсом является то, что сможете строить макеты структур. Делать блоки с большим количеством колонок, накладывать блоки друг на друга. Итак, сначала добавляем виджет текст, вводим нужные буковки, в разделе стиль можем задать шрифт.
Но мы же хотим навести красоту. Например, выровнять виджет вертикально. Тогда смотрим на скриншот.
Нажимаем сюда. Выбираем вертикальное выравнивание «посередине». Отлично. Теперь не помешает фото. Добавляем фото. Но для красоты делаем наложение на него другого. Для этого нужно использовать во вкладке «Расширенные» абсолютное позиционирование, поэкспериментируйте, здесь точных значений уже не подскажу. Чтобы одно фото лежало поверх другого, указывайте ему больший z-index, чем тому, что должно быть снизу.
Для разных устройств придется подбирать по-разному. Рядом практически со всеми вкладками есть значок «Компьютер». Нажимаем на него и смотрим результат. Теперь пора перейти к настоящему веселью.
Делаем меню довольные клиенты. Выбираем двухколоночный макет, добавляем виджеты:
Слева «Фото». Потом нажимаем на значок «макет» и редактируем колонку, меняя ее ширину. Я установил 25%.
Справа добавляем заголовок, а ниже текстовое поле. Как их редактировать поймете, там реально ничего сложного. Все в разделе «Стили», меняете шрифты, цвета и прочее.
Копируете готовый блок столько раз, сколько будет аналогичных, чтобы вручную не вносить изменения далее.
Кстати, чтобы добавить анимацию, перейдите во вкладку «Расширенные», выберите «Эффекты движения» и экспериментируйте пока что-то не понравится.
Собственно, с помощью плагина Elementor построить лендинг очень легко. Так что дерзайте, немного поэкспериментировать и у вас будет готовый сайт.
Осталось последнее: добавить форму обратной связи. Для этого требуется в области виджетов полистать вниз и найти «Шорткод».
У формы обратной связи будет вот такая штука.
Это и есть шорткод. Его надо скопировать и вставить в виджет «Шорткод», тогда у вас на странице появится форма обратной связи, которая позволит бизнесу эффективно функционировать, то бишь собирать заявки.
О настройке почтового сервиса придется написать отдельную статью.
Завершаем эпопею
Вам по силам создать собственный Landing быстро. Конечно, за один день совершенно без опыта — маловероятно, но если нет лишних денег на разработчика или знакомых, которые помогут в этом деле, то вы сумеете справиться самостоятельно, просто действуйте по инструкции, а если остались вопросы, добро пожаловать в комментарии, постараюсь ответит.
Результаты можете увидеть по адресу: https://podso.site/ (сайт снёс, больше его не держу)
Благодарю за внимание, успехов вам и вашему бизнесу!
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 3.7 / 5. Количество оценок: 6