Всплывающее Окно WordPress: В Gutenberg(100)% Инструкция

всплывающее окно wordpress

Как создать видео всплывающее окно WordPress в редакторе Gutenberg? Полное руководство!

Здравствуйте, уважаемые друзья и гости блога Pribylwm.ru! Вы знаете как создать всплывающее окно WordPress в формате видео? Об этом сегодня пойдет речь! Видео всплывающие окна оказывают сильное влияние на посетителей. Оно способно объяснить все с первого взгляда. Также это поможет Вам привлекать аудиторию и продавать. В общем, это поможет Вам оставаться сосредоточенным на своей аудитории. Поехали …

По словам AWeber, хорошо сгенерированное видео-всплывающее окно может привлечь на Ваш веб-сайт на 1375% больше подписчиков. Кроме того, в отчете Солодева было установлено, что 83% предприятий сообщили, что получают выгоду от всплывающих видео.

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

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

Полезно для владельцев телефонов Huawei: Что такое Huawei? Это Китайский известный во всем мире бренд. Он является одним из крупнейших в мире производителей мобильных телефонов. Huawei также находится в центре ряда по кибербезопасности и строящимся телефонным сетям 5G следующего поколения. Вы имеете в своем арсенале данный телефон? Тогда Вы просто обязаны знать, где производят ремонт Huawei — это сервисный центр ИТСА. Вот еще немного новостей!

Huawei потратит 200 миллионов евро на новый завод 5G во Франции

В четверг (27.02.2020) Huawei объявила, что собирается потратить более 200 миллионов евро на покупку земли и создание нового завода во Франции.

Китайский гигант телекоммуникационного оборудования заявил, что завод обеспечит 500 рабочих мест и создаст продукцию на 1 млрд. Евро в год, в основном для европейских рынков. По его словам, завод будет специализироваться на оборудовании 4G и 5G.

«Как один из самых передовых производственных центров в мире, Франция обладает развитой промышленной инфраструктурой и высокообразованным трудовым резервом, и ее географическое положение идеально подходит для Huawei», — говорится в сообщении компании.

«Это производственное предприятие добавится к интегрированной цепочке создания стоимости Huawei в Европе, улучшая своевременность и надежность поставок Huawei европейским клиентам». Это во Франции! А как у нас обстоят дела? Думаю, что Вы сами об этом знаете?! Теперь продолжим по ранее поднятой теме, а именно … Будем создавать всплывающее окно WordPress в видео формате!

Как создать всплывающее окно WordPress в формате видео

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

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

Шаг 1. Добавьте всплывающий блок с видео на целевую страницу

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

После установки и активации Вы получите блоки Qubely в интерфейсе редактирования Gutenberg.


Затем пришло время начать настройку всплывающего окна WordPress в формате видео. Чтобы начать процесс, создайте или откройте страницу, на которой Вы хотите разместить всплывающее видео в режиме редактирования Гутенберга. Затем нажмите кнопку «Добавить блок», найдите блок всплывающего окна «Видео» и вставьте его на страницу. Теперь все готово для редактирования, как Вам нравится!

Шаг 2. Всплывающее окно WordPress — Выберите один стиль для Вашего всплывающего него

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

vsplyvayuschee okno wordpress

Из заданных опций Fill и Classic предустановленных стилей выберите один по Вашему вкусу.

Шаг 3. Загрузите или вставьте видео и настройте его

Теперь выберите вариант из внешнего или собственного видео. Мы собираемся использовать YouTube в качестве внешнего источника в этом уроке. Поэтому я вставил ссылку в поле URL.


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

Шаг 4. Установите значок для Вашего видео

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


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

Шаг 5. Настройте фон так, как Вам нравится

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


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

Apply Box Shadow

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


Вы можете включить Inset для обратного эффекта тени.

Выход

Вот всплывающее видео, которое мы создали в этом уроке. Посмотрите и получите вдохновение!

Добавить параметры настройки

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

  • Применить блок анимации и взаимодействия
  • Использовать дополнительный CSS
  • Включить пользовательскую позицию (относительная, абсолютная, фиксированная)
  • Отрегулировать Z-индекс
  • Мобильный телефон/опция скрытия вкладок
  • Блочный ряд CSS

Всплывающее окно WordPress — Сделай это проще!

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

Завершение!

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

Понравилась статья? Поделиться с друзьями:
Блог Валерия Бородина
Комментарии: 1
  1. Наталья

    Спасибо за доступный и наглядный материал

Добавить комментарий