За последние годы тема по созданию контента с перетаскиванием стала очень популярной.
Например, если вы перейдете в CodeCanyon и выполните быстрый поиск «перетаскивания», вы получите следующее:
Это более чем 220 плагинов, отвечающих на поисковый запрос перетаскивания! И давайте не будем забывать, что CodeCanyon - это не все готовые плагины WordPress. На сторонних сайтах и в официальном репозитории плагинов есть много других плагинов для перетаскивания.
Итак, что вы делаете, когда хотите создать страницу подписки или лендинг с перетаскиванием?
Ну, если у вас есть деньги, есть несколько плагинов премиум-класса. Кроме того, вы можете выбрать более интегрированное решение и выбрать целую тему WordPress, которая уже имеет встроенные функции перетаскивания.
Но, сегодня давайте будем свободными от вечной навязчивости за все платить!
Вот наше руководство о том, как создать потрясающую целевую страницу в WordPress с помощью бесплатного компоновщика содержимого с перетаскиванием.
Вот пример того, что доступно в области перетаскивания без каких-либо оплат:
Ничего слишком сложного, предоставленного, но это также не похоже на настройку по умолчанию, которую WordPress позволяет вам делать.
Просто, чтобы перечислить некоторые интересные подробности об этой маленькой демонстрационной странице:
Итак, ... вам, наверное, интересно:
Во-первых, мы собираемся использовать два плагина, чтобы все это получилось.
Более подробная информация о плагинах:
Большинство качественных целевых страниц обычно имеют следующие элементы:
Вероятно, мы могли бы перечислить еще больше требований, но я думаю, этого будет достаточно для нашей быстрой демонстрации.
Ничего особенного здесь, просто получить их через установщика WordPress (wp-admin> Плагины> Добавить новый) или через WordPress.org (ссылки выше). Установите и активируйте.
(Не забывайте, что вам нужен не только основной плагин SiteOrigin, но и дополнительный набор виджетов.)
Первое решение, чтобы сделать ли вы собираетесь создать целевую страницу в WordPress поста или страницы.
С технической точки зрения, нет никакой разницы. Но имейте в виду, что большинство тем позволяют использовать шаблон с полной шириной (без боковой панели) для страниц, в то время как очень немногие предоставляют такую функциональность для сообщений.
Поэтому, в конце концов, вы, вероятно, захотите работать с новой страницей.
На экране «Добавить новую страницу» сразу перейдите к «Page Builder»:
Оттуда у вас есть возможность либо начать строить что-то с нуля, либо использовать один из предварительно построенных макетов.
В целях этого урока мы собираемся создать целевую страницу в WordPress с нуля, но я настоятельно рекомендую вам также проверить эти предварительно построенные макеты и посмотреть, какие механизмы находятся там. Каждый из этих макетов прекрасно редактируется, ничто не скрыто.
В SiteOrigin есть два основных типа контейнеров:
В принципе, чтобы разместить какой-либо контент на целевой странице, вам сначала нужно создать строку, а затем добавить свой контент в виде виджета.
Итак, чтобы начать, вам нужно общее представление о том, как вы хотите, чтобы ваша целевая страница выглядела.
Вот пример:
Как вы можете видеть, ничего необычного.
Так что, мне нужно четыре отдельных строки:
Начиная сверху:
Строка заголовка - очень простая вещь, но она может выглядеть действительно потрясающе!
Нажмите кнопку строки в главном интерфейсе 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 упрощает настройку ширины столбца. Вам просто нужно щелкнуть текущую ширину и ввести любое значение, которое вы хотите.
Теперь мои столбцы:
В конце концов, это то, что моя последняя строка выглядит как в построителе целевой страницы перетаскивания:
И это похоже на целевую страницу в WordPress:
На этом этапе работа выполняется, и вы можете наслаждаться своей новой целевой страницей, созданной с помощью перетаскивания. Думаю, страница получилась неплохой.
Проверьте это:
Создание чего-то подобного очень просто с SiteOrigin и Shortcodes Ultimate. Если у вас есть идея, вам не нужна помощь дизайнера. Тот факт, что вы можете создать все это самостоятельно, делает эти плагины полезными.
Что вы думаете? Есть ли у вас какие-либо вопросы о том, как этот процесс работает? Или, может быть, у вас есть целевая страница, которую вы хотели бы показать нам ...