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

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

К сожалению, этот метод работает не со всеми темами WordPress. Если вы не используете блочную тему, мы рекомендуем вместо этого использовать плагин компоновщика страниц.

Для начала просто создайте новую страницу WordPress, которую мы превратим в нашу целевую страницу.

В правом меню нажмите на вкладку «Страница». Затем просто найдите раздел «Шаблон» и нажмите «Создать».

В появившемся всплывающем окне дайте имя шаблону целевой страницы и нажмите «Создать».

Название просто для справки, поэтому вы можете использовать все, что захотите.

Запускает редактор шаблонов. Теперь вы можете создать свою целевую страницу точно так же, как вы создаете страницу в стандартном редакторе блоков.

Чтобы добавить блоки на лендинг, просто нажмите синюю кнопку «+». Теперь вы можете перетаскивать различные блоки в свой дизайн.

Вы можете добавить контент в блок или изменить его форматирование с помощью привычных инструментов WordPress.

Например, вы можете ввести текст в блок «Абзац», добавить ссылки, изменить выравнивание текста и применить эффекты жирного или курсивного шрифта.

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

Чтобы просмотреть шаблоны, включенные в вашу тему WordPress, нажмите синюю кнопку «+», а затем выберите вкладку «Шаблоны».

Вы можете либо перетащить шаблон блока на макет, либо щелкнуть шаблон, чтобы добавить его в нижнюю часть шаблона.

После добавления шаблона вы можете щелкнуть, чтобы выбрать любой блок в этом шаблоне, а затем внести изменения. Например, вы можете заменить любой текст-заполнитель или добавить ссылки, чтобы призыв к действию указывал на разные области вашего блога WordPress.

Когда вы довольны тем, как выглядит пользовательская целевая страница, нажмите кнопку «Опубликовать» и выберите «Сохранить».

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

Способ 2. Создание целевой страницы WordPress с помощью SeedProd (рекомендуется)

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

Во-первых, вам необходимо установить и активировать плагин SeedProd. Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress.

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

После активации перейдите к SeedProd » Настройки и введите лицензионный ключ.

Вы можете найти эту информацию в своей учетной записи на веб-сайте SeedProd. После ввода лицензионного ключа нажмите кнопку «Подтвердить ключ».

Затем просто перейдите к SeedProd » Целевые страницы и нажмите «Добавить новую целевую страницу».

Теперь вы можете выбрать шаблон для своей целевой страницы.

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

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

Для предварительного просмотра дизайна просто наведите на него указатель мыши и щелкните значок увеличительного стекла.

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

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

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

Далее введите имя целевой страницы. SeedProd автоматически создаст URL-адрес на основе заголовка страницы, но вы можете изменить этот URL-адрес на любой другой.

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

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

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

Блоки являются основной частью SeedProd, и вы можете использовать их для создания любой целевой страницы.

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

Например, если вы хотите заменить изображение-заполнитель, начните с выбора блока изображения. Затем нажмите значок «Выбрать изображение» в меню слева.

Теперь вы можете выбрать изображение из медиатеки WordPress или загрузить новый файл со своего компьютера.

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

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

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

Вы также можете перетаскивать блоки, чтобы перемещать их вверх или вниз по макету.

Чтобы добавить больше блоков на целевую страницу, просто перетащите их на свой дизайн.

Более того, в SeedProd есть множество блоков, которые идеально подходят для создания целевой страницы с высокой конверсией.

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

Просто найдите блок «Обратный отсчет» и перетащите его на целевую страницу.

Затем вы можете установить время и дату, когда таймер истечет.

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

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

Чтобы просмотреть различные разделы, просто нажмите на вкладку «Разделы». Чтобы просмотреть любой раздел, наведите на него указатель мыши и нажмите на увеличительное стекло.

Если вы хотите использовать этот раздел, просто нажмите «Выбрать этот раздел».

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

SeedProd также полностью совместим с WooCommerce, поэтому вы можете легко создавать новые целевые страницы для продвижения своих продуктов, услуг, распродаж и других мероприятий.

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

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

Чтобы создать этот раздел, просто перетащите блок «Лучшие продажи» на свою страницу.

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

Просто откройте раскрывающийся список «Тип» и выберите любой вариант из списка.

Подробнее см. в нашем руководстве о том, как отображать популярные товары в WooCommerce.

Подключение ваших целевых страниц к сторонним инструментам

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

SeedProd упрощает подключение ваших целевых страниц к популярным службам электронного маркетинга, таким как Constant Contact или ActiveCampaign.

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

SeedProd покажет вам, как именно интегрировать эту целевую страницу с вашими службами электронного маркетинга.

Если вы не видите своего поставщика услуг электронной почты в списке, не беспокойтесь. SeedProd работает с Zapier, который действует как мост между SeedProd и более чем 3000 других приложений.

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

Использование пользовательского домена для вашей целевой страницы

По умолчанию SeedProd публикует целевую страницу под доменом вашего веб-сайта. Однако иногда вы можете вместо этого использовать собственный домен.

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

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

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

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

В редакторе SeedProd просто нажмите «Настройки страницы», а затем выберите «Пользовательский домен».

В поле «Имя домена» введите свой личный домен.

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

Не забудьте нажать «Сохранить», чтобы сохранить изменения.

Сохранение и публикация вашей целевой страницы

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

Затем выберите «Опубликовать».

Целевая страница теперь доступна на вашем веб-сайте.

Метод 3.

Beaver Builder — еще один популярный конструктор страниц WordPress с функцией перетаскивания. Позволяет легко создать лендинг по готовым шаблонам.

Во-первых, вам необходимо установить и активировать плагин. Подробнее см. в нашем пошаговом руководстве по установке плагина WordPress.

После активации перейдите в Настройки » Beaver Builder . Затем нажмите на вкладку «Лицензия».

Здесь просто введите лицензионный ключ, который вы найдете в своей учетной записи на веб-сайте Beaver Builder. Затем вы можете нажать «Сохранить лицензионный ключ».

Чтобы создать пользовательскую целевую страницу, перейдите к Pages » Add New  на панели администратора WordPress. Теперь вы готовы создать свою целевую страницу, нажав кнопку «Запустить Beaver Builder».

Откроется редактор Beaver Builder.

В правом меню вы увидите все модули и строки, которые вы можете добавить на свою целевую страницу. Если это меню не открывается автоматически, нажмите «+» в правом верхнем углу, чтобы открыть его.

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

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

Когда вы найдете понравившийся шаблон, просто нажмите на него.

Теперь Beaver Builder применит этот дизайн к вашей целевой странице.

Чтобы отредактировать любую часть шаблона, щелкните по ней.

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

Вы можете добавить дополнительные модули на свою целевую страницу, нажав на вкладку «Модули».

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

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

Для этого просто выберите вкладку «Строки», а затем перетащите любой макет на свою страницу.

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

Если вас устраивает внешний вид целевой страницы, просто нажмите кнопку «Готово» в верхней части страницы.

Если вы готовы опубликовать страницу, выберите «Опубликовать».

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

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

Если вам понравилась эта статья, подпишитесь на наш YouTube канал для видеоуроков по WordPress. Вы также можете найти нас в Твиттере и Facebook.

Как создать целевую страницу в 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 раза.

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

Шаг 7: Область галереи

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

Что здесь особенного: Сетка галереи с различными виджетами

Как мы это сделали:

• Чтобы создать эту сетку, похожую на галерею, мы будем использовать виджет столбцов для создания внутреннего раздела.
• Мы объединим несколько виджетов и фоновое видео, чтобы создать галерею с уникальным стилем.
• Мы используем виджет разделителя, поэтому мы можем установить цвет фона для левого столбца. То же самое проделываем с центральной колонной.
• Мы также добавим еще один раздел Columns Widget, и на этот раз под стилем мы установим тип фона Video. В новом Elementor 2.1 вы можете установить время начала и окончания видео. Это отлично подходит для создания фонового цикла.

Шаг 8: Область контактов и контактная форма

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

Что здесь особенного : Эффект режима наложения фона

Как мы это сделали : Мы добавляем наложение изображения и устанавливаем его с помощью настройки режима наложения Multiply.

Дополнительные приемы: липкое меню и привязка

Мы хотим, чтобы наше меню было липким и оставалось наверху при прокрутке вниз.

Что здесь особенного : Прикрепленное меню с навигационными ссылками

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

Последний трюк: скрытие навигации

Теперь небольшая хитрость относительно навигации; Как видите, область навигации видна по всему сайту, но что, если мы хотим ее немного скрыть?

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

Как мы это сделали: Мы выберем раздел навигации, расширенный, и под z-index присвоим ему 1. Под настройками раздела галереи, стиль, зададим белый фон. А на вкладке «Дополнительно» для z-index установите значение 2. Это означает, что он должен охватывать раздел меню. Посмотрим, сработает ли это. Мы прокрутим вниз и проверим — навигация исчезла.

Посмотрим на результат…

Посмотрим, что мы создали. Выглядит круто, правда?

Используйте шаблоны целевой страницы вместо создания с нуля

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

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

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

Бесплатные/Премиум темы WordPress для целевых страниц

Нам часто задают вопрос, какая тема лучше всего работает с Elementor. Ответ, однако, практически любая тема.

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

Вот несколько отличных бесплатных тем, которые вы можете использовать:

• GeneratePress
• Astra
• OceanWP
• Hestia

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

Динамический контент — управление несколькими целевыми страницами из одного места

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