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

Как создать целевую страницу с помощью бесплатного конструктора контента с перетаскиванием

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

Например, если вы перейдете в CodeCanyon и выполните быстрый поиск «перетаскивания», вы получите следующее:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот пример:

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

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

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

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

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

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

Нажмите кнопку строки в главном интерфейсе SiteOrigin:

Затем измените макет на 1 столбец и нажмите «Вставить»:

Теперь добавим новый виджет. Нажмите кнопку «Добавить виджет»:

Затем переключитесь на «Widgets Bundle» и выберите виджет «SiteOrigin Hero»:

Нажмите значок гаечного ключа в правом верхнем углу новой строки:

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

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

Там добавьте новый «Рамка героя»:

Нажмите на этот новый фрейм, чтобы отредактировать его:

Здесь вы можете разместить свой заголовок.

Вот мой:

Прямо под этим блоком кадра есть раздел под названием «Фон». В нем вы можете установить фоновое изображение полной ширины. Он работает так же, как и любой другой материал в 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.
• В третьей колонке я использую виджет из моего модуля доставки электронной почты. ( Как добавить контактную форму). Этот виджет позаботится о том, чтобы разместить рабочую форму выбора прямо на странице и подключить ее к моему почтовому программному обеспечению (обратитесь к своему собственному поставщику электронной почты, чтобы узнать, как сделать эту часть работы).

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

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

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

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

Проверьте это:

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

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