Разное

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

02.12.2021

Содержание

Лендинг через конструктор за полчаса | Урок 2. Курс WordPress – с нуля до Профи!

Задания и материалы к уроку


  • 1. К созданному ранее сайту добавьте плагин конструктора Elementor
  • 2. При помощи стандартных инструментов конструктора создайте собственный вариант лендинга (на хосте)

Хостинг для обучения и размещения ваших сайтов

Мы отобрали надежные хостинги, проверенные beONmax и нашими преподавателями-экспертами на практике, а также используемые в наших курсах. Все предложенные хостинги вы можете использовать Бесплатно для обучения и размещения ваших сайтов в течении 30 дней! + получить домен в подарок при оплате хостинга на 1 год!

  • 1. Хостинг BeGet
    https://beget.com

    Надежный популярный хостинг
    — более 200.000 клиентов, более 12 лет работы
    — удобная панель управления
    — «живая» техническая поддержка 24/7
    — бесплатные SSL-сертификаты
    — бесплатный антивирус
    — бесплатный перенос ваших сайтов с других хостингов
    — автоматическое резервное копирование ежедневно
    — неограниченный траффик без лимита
    — автоматическая установка WordPress и других CMS в 1 клик (при необходимости)
    — домены в подарок (от 1 до 5 доменов на годовых тарифах + бонусное продление доменов)

    Тарифы от 165 руб/мес + домен .

    RU в подарок (при заказе хостинга на год)!
    30 дней на тестирование — бесплатно!
    Узнать подробнее >> Хостинг BeGet >>

  • 2. Хостинг Link-Host
    https://link-host.net

    Хостинг по доступной цене
    — более 13 лет работы, более 90% положительных отзывов
    — удобная панель управления
    — бесплатный перенос ваших сайтов с других хостингов
    — автоматическое резервное копирование ежедневно
    — неограниченный траффик без лимита
    — автоматическая установка WordPress и других CMS в 1 клик (при необходимости)
    — доступные цены, недорогие тарифы подойдут для старта
    — домен в подарок (на годовых тарифах)

    Тарифы от 63 руб/мес

    + домен .RU в подарок (при заказе хостинга на год)!
    30 дней на тестирование — бесплатно!
    Узнать подробнее >> Хостинг Link-Host >>

  • 3. Хостинг TimeWeb
    https://timeweb.com

    Надежный проверенный популярный хостинг
    — более 450. 000 клиентов, более 14 лет работы
    — удобная инновационная панель управления
    — дружелюбная служба поддержки 24/7
    — база знаний — учебные материалы для новичков
    — бесплатные SSL-сертификаты
    — бесплатная почта для домена и почтовый веб-интерфейс
    — бесплатный перенос ваших сайтов с других хостингов + бонусы при переносе

    — автоматическое резервное копирование ежедневно
    — неограниченный траффик без лимита
    — автоматическая установка WordPress и других CMS в 1 клик (при необходимости)
    — новый конструктор сайтов Craftum
    — домен в подарок (на годовых тарифах)

    Тарифы от 169 руб/мес + домен .RU/.РФ в подарок (при заказе хостинга на год)!
    10 дней на тестирование — бесплатно!
    Узнать подробнее >> Хостинг TimeWeb >>

    Бонус beONmax – 30 дней хостинга TimeWeb в подарок по промокоду!

Информационные ресурсы beONmax

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

предложения!

  • ВКонтакте beONmax https://vk.com/beonmax
  • Facebook beONmax https://facebook.com/beonmax
  • Instagram beONmax https://instagram.com/beonmax
  • Youtube beONmax https://youtube.com/beonmax
  • Статья-навигатор по курсам beONmax
    Последовательность прохождения курсов beONmax и какие IT-профессии вы можете получить

Остались вопросы? Задайте ваш вопрос в сообщество студентов beONmax! Задать вопрос

меньшая цена – большая эффективность

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

Если речь идет о компаниях предоставляющих услуги по созданию лендингов – то с полной уверенностью можно заявить, что да. Лендинг пейдж на joomla и лэндинг на wordpress поможет Вам существенно сэкономить свои деньги. Но остановимся поподробнее:

Joomla – это система управления содержимым. С её помощью осуществляется создание контента, его редактирование, и при необходимости, удаление. Другим языком, она является конструктором сайтов. Лендинг пейдж на joomla совершается невероятно удобно и качественно.

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

При создании лэндинга joomla и на wordpress можно отметить ряд существенных преимуществ:

— высокая безопасность посадочной страницы;
— проверенный эффективный шаблон сайта;

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

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

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


— тестирование сайта на эффективность.

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

Как создать целевую страницу в WordPress

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

Существует множество способов создания успешных целевых страниц.

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

Это пошаговое руководство имеет несколько ключевых преимуществ:

  1. Бесплатный конструктор целевых страниц . Вы создадите целевую страницу с помощью нашего ведущего бесплатного конструктора целевых страниц WordPress без дополнительных плагинов WordPress.
  2. Без кода — Вам не придется иметь дело с одной строкой кода CSS или PHP, а также с дочерними темами — или какими-либо техническими ноу-хау в этом отношении.
  3. Высокая конверсия . В этом руководстве мы уделяем особое внимание созданию целевой страницы, которая не только выглядит красиво, но и создана для повышения конверсии.

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

Содержание

  • Что такое целевая страница?
  • В чем разница между домашней страницей и целевой страницей?
  • Как создать целевую страницу в WordPress: пошаговое руководство
  • Дополнительные приемы: липкое меню и якорь
  • Последний трюк: скрытие навигации

Что такое целевая страница?

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

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

В чем разница между домашней страницей и целевой страницей?

Хотя посетитель, безусловно, может «попасть» на вашу домашнюю страницу, это не означает, что ваша домашняя страница является целевой.

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

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

Вот тут-то и появляются целевые страницы:

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

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

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

Как создать целевую страницу в WordPress: пошаговое руководство

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

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

Зачем использовать Elementor вместо редактора блоков WordPress по умолчанию? Ну, есть несколько причин:

  • Визуальный дизайн с перетаскиванием — Elementor предоставляет вам доступ к гораздо более мощному визуальному редактору дизайна с перетаскиванием. Поскольку у вас больше контроля над дизайном, вы можете убедиться, что каждая часть вашей целевой страницы идеальна.
  • Шаблон пустого холста — Elementor позволяет создавать целевые страницы, используя пустой холст, который скрывает верхний и нижний колонтитулы, чего редактор блоков не предлагает по умолчанию. Как мы обсуждали выше, скрытие навигации является хорошей практикой для целевых страниц, поскольку позволяет устранить отвлекающие факторы и сфокусировать целевую страницу на подталкивании пользователей к определенному действию.
  • Управление целевой страницей — Elementor предоставляет вам специальную область управления целевой страницей. Это позволяет отделить целевые страницы от обычных страниц контента.
  • Маркетинговые элементы — Elementor включает в себя множество встроенных маркетинговых элементов, которые помогут вам оптимизировать ваши целевые страницы и избавят вас от необходимости использовать сторонние плагины. Например, вы можете добавлять формы с помощью виджета «Формы» и легко интегрировать их с вашей CRM или службой маркетинга по электронной почте.
  • Шаблоны целевых страниц — в то время как Elementor позволяет легко создавать великолепные целевые страницы с чистого листа, у вас также есть возможность импортировать один из профессионально разработанных шаблонов целевых страниц Elementor, а затем настроить его в соответствии со своими потребностями.

Вы готовы создать свою первую целевую страницу? Вот как это работает:

Первоначальная настройка

Чтобы следовать этому руководству и создать собственную целевую страницу, вам понадобятся три инструмента:

  1. Сайт WordPress (обязательно)
  2. Бесплатный плагин Elementor (обязательно)
  3. Elementor Pro (необязательный, но очень полезный для целевых страниц)

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

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

Elementor Pro расширяет бесплатный плагин Elementor рядом функций и вариантов дизайна, которые могут улучшить ваши целевые страницы. Например, Elementor Pro предоставляет вам виджет «Форма», который вы можете использовать для создания всевозможных форм подписки или захвата лидов. Чтобы использовать его, вам необходимо приобрести Elementor Pro, а затем установить его на свой сайт вместе с бесплатным плагином Elementor.

Целевая страница, которую вы создадите

Вы будете создавать страницу, которая включает:

  1. Верхний раздел — Это занимает большую часть нашего экранного пространства. Он состоит из заголовка, некоторого текста и кнопки призыва к действию — это приведет пользователя к нашей форме.
  2. Раздел меню навигации — Эта область помогает посетителю сайта быстро перейти к любой части нашей целевой страницы.
  3. О разделе — Важный раздел, который расскажет нашим посетителям больше о нашем бизнесе или услугах.
  4. Раздел функций — Список функций с большим изображением слева.
  5. Раздел галереи — Для этого раздела мы создали уникальный макет галереи, используя комбинацию виджетов с некоторыми изображениями, текстом, значками социальных сетей и фоновым видео.
  6. Раздел формы — Здесь мы включили контактную форму, которая позволит нашим посетителям легко связаться с нами.

Итак, приступим!

Шаг 1. Создайте новую целевую страницу

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

Чтобы создать свою первую целевую страницу, перейдите в Шаблоны → Целевые страницы и нажмите кнопку Добавить новую целевую страницу .

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

Шаг 2. Настройка цветов, шрифтов и палитры цветов

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

Когда вы создаете новую целевую страницу, Elementor автоматически применяет макет страницы Elementor Canvas. Это дает нам «чистую» страницу без верхнего, нижнего колонтитула или боковой панели. Это хороший вариант для создания целевой страницы.

Затем мы устанавливаем глобальные цвета по умолчанию следующим образом: первичный — белый, вторичный и текст — черный. Цвета по умолчанию будут установлены автоматически, когда мы добавим новый виджет, что значительно упростит нашу работу.

Проделаем то же самое со шрифтами. Я установил свой основной и дополнительный шрифт заголовков на шрифт Adobe Typekit (восстановление), но вы можете установить свой собственный шрифт по своему усмотрению.

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

Шаг 3: Верхняя часть целевой страницы

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

Что здесь особенного: Режим наложения фонового изображения и перекрывающиеся заголовки.

Как мы это сделали: Устанавливаем синий цвет фона. Наложение фона дает нам возможность установить еще один слой поверх, на этот раз установить наложение изображения. Режим наложения — это новая опция в Elementor 2.1. Что он делает, так это смешивает наложение со светло-голубым фоном. Мы выбираем Multiply или Darken и проверяем, как это влияет на изображение.

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

Шаг 4: Заголовок и область навигации

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

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

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

Шаг 5. Область сведений

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

Что здесь особенного : Значок перекрывается заголовком

Как мы это сделали : Мы уменьшили размер значка и установили нижнее минус поле.

Шаг 6: Дизайн области функций

Этот раздел включает большое изображение Vespa слева и список из 3 услуг справа.

Что здесь особенного : Для этого раздела функций мы повторяем эффект фонового значка, который мы использовали в предыдущем разделе.

Как мы это сделали : Чтобы получить этот эффект, мы установили параметр поля для виджета значка на 40 пикселей по нижнему полю и -20 по левому краю. Мы можем дублировать эту первую услугу 3 раза.