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

Хотите узнать , как добавить липкое плавающее видео при прокрутке страницы на своем сайте WordPress?

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

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

Так что продолжайте читать…

Что такое липкое видео?

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

Зачем добавлять Sticky Video на веб-сайт Elementor WordPress?

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

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

Убеждены, что вы должны добавить липкое видео на свой сайт WordPress? Что ж, если да, перейдите к следующему разделу, чтобы выяснить, как вы можете это сделать.

Как добавить липкое видео на сайт Elementor за 6 шагов

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

Шаг 1: Установите Elementor и ElementsKit

Первый шаг — установить все необходимые плагины. Чтобы следовать этому руководству о том, как добавить липкое видео в Elementor, вам понадобится

• Элементор и
• ElementsKit (как бесплатная, так и профессиональная версии).

Elementor — это конструктор страниц с перетаскиванием, а ElementsKit — надстройка для Elementor. Итак, вам сначала нужно установить Elementor, затем скачать ElementsKit и после этого обновить плагин до версии Pro.

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

Шаг 2. Включите модуль Sticky Content в ElementsKit.

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

Теперь перейдите в ElementsKit ⇒ Modules ⇒ Sticky Content , включите параметр и нажмите «Сохранить изменения» , чтобы обновить только что внесенные изменения.

Шаг 3: перетащите виджет Elementor Video

Перейдите на страницу, на которую вы хотите добавить видео, нажмите «Редактировать с помощью Elementor».

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

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

Шаг 4: Выберите источник видео и добавьте URL

С помощью виджета видео Elementor вы можете отображать видео из таких источников, как Youtube, Vimeo, DailyMotion и Self Hosted.

Сначала выберите предпочитаемый тип источника, а затем укажите URL-адрес видео. Я собираюсь использовать YouTube для этой статьи.

Примечание . В случае самостоятельного размещения вы можете загрузить видео на свой сервер или указать внешний URL-адрес.

Вы также можете настроить стиль видео. Для этого перейдите на вкладку «Стиль». Здесь вы можете выбрать соотношение сторон и фильтр CSS . Вы можете выбрать один из шести типов соотношения, таких как 1:1, 3:2, 4:3, 16:9 и т. д. Щелкните значок редактирования фильтра CSS, чтобы настроить размытие, яркость, контрастность, насыщенность и оттенок.

Шаг 5: Настройки, чтобы сделать видео Elementor липким

Перейдите на вкладку «Дополнительно». Затем разверните липкую опцию ElementsKit . Здесь вы можете выбрать липкий тип: верхний, нижний, столбец и показывать при прокрутке вверх.

После того, как вы выберете Sticky type как что-либо, кроме None, вы получите следующие варианты:

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

• Sticky Offset: в этом параметре установите значение смещения. Значение смещения указывает расстояние между видео и верхней позицией вашей страницы.

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

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

Шаг 6: Обновите, чтобы добавить липкое видео в Elementor и посмотреть предварительный просмотр

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

Примечание. Если вы хотите, чтобы липкая кнопка видео, которая появлялась во всплывающем окне, показывала видео при нажатии , вы можете использовать виджет ElementsKit Video вместо виджета Elementor Video. Вы можете выполнить тот же процесс, описанный выше, чтобы добавить липкое видео в Elementor с помощью виджета видео ElementsKit.

Вот предварительный просмотр Sticky Video с использованием виджета видео ElementsKit .

Заключительные слова

Поздравляем! Теперь вы знаете, как добавить липкое видео на сайт Elementor. Это намного проще сделать, чем кажется на первый взгляд, верно?

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

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