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

Например, если вы перейдете в CodeCanyon и выполните быстрый поиск «перетаскивания».

Это более чем 220 плагинов, отвечающих на поисковый запрос перетаскивания! И давайте не будем забывать, что CodeCanyon — это не все готовые плагины WordPress. На сторонних сайтах и ​​в официальном репозитории плагинов есть много других плагинов для перетаскивания.

Итак, что вы делаете, когда хотите создать страницу подписки или лендинг с перетаскиванием?

Ну, если у вас есть деньги, есть несколько плагинов премиум-класса. Кроме того, вы можете выбрать более интегрированное решение и выбрать целую тему WordPress, которая уже имеет встроенные функции перетаскивания.

Но, сегодня давайте будем свободными от вечной навязчивости за все платить!

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

Демонстрация

Вот пример того, что доступно в области перетаскивания без каких-либо оплат.

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

Просто, чтобы перечислить некоторые интересные подробности об этой маленькой демонстрационной странице:

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

Итак, … вам, наверное, интересно:

Как создать целевую страницу в WordPress с помощью drag-and-drop

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

  • Первый из них —  плагин SiteOrigin Page Builder вместе с дополнительным набором виджетов.
    • (SiteOrigin на самом деле был отмечен как лучшее бесплатное решение на рынке в сравнении с платными плагинами для создания страниц для WordPress.)
  • Второй — это плагин Shortcodes Ultimate.
    • (Вероятно, это лучший бесплатный плагин для коротких кодов. Мы собираемся использовать его, чтобы добавить некоторые дополнительные классные блоки контента в ранее созданную структуру целевой страницы.)

Более подробная информация о плагинах:

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

Важные элементы целевой страницы

Большинство качественных целевых страниц обычно имеют следующие элементы:

  • Хорошая презентация заголовка — большая и смелая.
  • Минимальные боковые элементы, такие как боковая панель, нижний колонтитул или что-то еще, что может отвлекать посетителей.
  • Четкое сосредоточение внимания на одной единственной цели. Это может быть продажа, ссылка на партнерскую ссылку или подписка на рассылку (обычно).
  • Презентация, основанная на рассказах, где посетитель следует через каждый раздел страницы, пока не достигнет окончательного вызова к действию.
  • Призыв к действию — спросить. Этот элемент сообщает посетителю, что делать.
  • Хорошее визуальное разделение отдельных разделов на странице.

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

Установка плагинов

Ничего особенного здесь, просто получить их через установщика WordPress (wp-admin> Плагины> Добавить новый) или через WordPress.org (ссылки выше). Установите и активируйте.

(Не забывайте, что вам нужен не только основной плагин SiteOrigin, но и дополнительный набор виджетов.)

Создание шаблона страницы

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

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

Поэтому, в конце концов, вы, вероятно, захотите работать с новой страницей.

На экране «Добавить новую страницу» сразу перейдите к «Page Builder»:

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

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

В SiteOrigin есть два основных типа контейнеров:

  • строки,
  • виджеты.

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

Создание строк для целевой страницы

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

Как вы можете видеть, ничего необычного.

Так что, мне нужно четыре отдельных строки:

  1. основной заголовок,
  2. раздел сведений — тот, который содержит эти три изображения,
  3. о разделе,
  4. раздел выбора.

Начиная сверху:

Заголовок строки

Строка заголовка — очень простая вещь, но она может выглядеть действительно потрясающе!

  1. Нажмите кнопку строки в главном интерфейсе SiteOrigin
  2. Затем измените макет на 1 столбец и нажмите «Вставить»
  3. Теперь добавим новый виджет. Нажмите кнопку «Добавить виджет»
  4. Затем переключитесь на «Widgets Bundle» и выберите виджет «SiteOrigin Hero»
  5. Нажмите значок гаечного ключа в правом верхнем углу новой строки

Оттуда перейдите в раздел «Макет» на правой боковой панели, а в раскрывающемся списке «Макет строки» выберите «Полная ширина, растянутая». Это растянет всю строку, в конечном итоге сделав возможным полную ширину изображение в фоновом режиме.

Однако для достижения эффекта полной ширины нам потребуется еще несколько шагов.

  1. Сначала отредактируйте виджет «Hero»
  2. Там добавьте новый «Рамка героя»
  3. Нажмите на этот новый фрейм, чтобы отредактировать его
  4. Здесь вы можете разместить свой заголовок.

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

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

Строка сведений

В этой строке я помещал эти три небольших изображения в свой дизайн. Это также первое место, где мы собираемся использовать плагин Shortcodes Ultimate.

Вот как я собираюсь создать его.

Начните с добавления новой строки (как и ранее). Но на этот раз я хочу три колонки, и я хочу, чтобы они были ровными:

Затем в каждом я добавлю простой виджет «SiteOrigin Editor»:

Это стандартное окно редактора со всеми возможностями редактирования текста WordPress. То, что я собираюсь использовать для него, — это очень простой блок контента — просто изображение и некоторый текст. Вот так:

Затем я собираюсь добавить здесь Shortcodes Ultimate! Моя цель — сделать изображение на экране после небольшой задержки и с помощью простой анимации.

Чтобы это произошло, я нажимаю кнопку «Вставить короткий код» в верхней части экрана редактора:

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

Шорт-код, который я собираюсь использовать, называется «Анимация»:

Не стесняйтесь экспериментировать с параметрами, доступными в этом окне конфигурации, пока не увидите то, что вам действительно нравится. Внизу есть небольшая кнопка «Live Preview», чтобы помочь вам.

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

Сделайте это так (так что короткий код находится вокруг изображения).

Важно отметить, что параметр задержки установлен на 1 секунду.

Затем я создаю еще два блока редактора так же, как этот, и добавляю туда похожие короткие коды, но я назначаю им разные задержки (2 секунды для второго блока и 3 секунды для третьего). Это даст нам хорошую прогрессию.

Вот как выглядит моя новая строка прямо сейчас.

И это похоже на целевую страницу.

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

Строка «О нас»

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

Итак, создайте новую строку и установите ее в 2 столбца. Затем установите столбцы, которые будут разделены в соответствии с  соотношением «справа налево». Таким образом:

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

Содержание этих столбцов довольно просто. Я просто использую его, чтобы держать один виджет «SiteOrigin Editor» каждый, а часть «О нас» внутри:

Наконец, вот как выглядит на целевой странице:

Строка выбора

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

Я использую строку из трех столбцов и начинаю с отношения, равного «Четному». Однако я отрегулирую средний столбец сразу, чтобы получить только 20% от всей ширины.

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

Теперь мои столбцы:

  • Первый столбец — это место, где я размещаю короткую часть текста, которая приглашает людей оставить свои адреса электронной почты для загрузки. Просто простой виджет «SiteOrigin Editor».
  • Второй блок тоже ничего не представляет. Я просто использую значок стрелки, чтобы указать на форму отказа, которая будет помещена справа. Опять же, сделано с виджетами SiteOrigin Editor.
  • В третьей колонке я использую виджет из моего модуля доставки электронной почты. ( Как добавить контактную форму). Этот виджет позаботится о том, чтобы разместить рабочую форму выбора прямо на странице и подключить ее к моему почтовому программному обеспечению (обратитесь к своему собственному поставщику электронной почты, чтобы узнать, как сделать эту часть работы).

В конце концов, это то, что моя последняя строка выглядит как в построителе целевой страницы перетаскивания.

Целевая страница все вместе

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

Создание чего-то подобного очень просто с SiteOrigin и Shortcodes Ultimate. Если у вас есть идея, вам не нужна помощь дизайнера. Тот факт, что вы можете создать все это самостоятельно, делает эти плагины полезными.

Что вы думаете? Есть ли у вас какие-либо вопросы о том, как этот процесс работает? Или, может быть, у вас есть целевая страница, которую вы хотели бы показать нам …