Это небольшая статья туториал по тому как можно создать текст, который будет выглядеть как на видео ниже:

 

Давайте оговорим сразу, если вы никогда не пользовались WordPress (что вряд ли, если вы здесь, но все же), или довольно пока плохо умеете пользоваться Elementor, то вам скорее всего стоит ознакомится с другими моими статьями на эту тему. 

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

Ну что, пожалуй начнем.

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

Видео на тексте на Elementor/ WordPress. Текст с наложенным видео.

Теперь, в расширенных настройках блока (Custom CSS) прописываем следующее:

selector{

  overflow: hidden;

}

Видео на тексте на Elementor/ WordPress. Текст с наложенным видео.

Далее во вкладке «Стиль», опционально указываем:

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

Видео на тексте на Elementor/ WordPress. Текст с наложенным видео.

Добавляем заголовок и в Custom CSS колонки с заголовком прописываем следующее:

selector{

  height: 100vh;

}

Видео на тексте на Elementor/ WordPress. Текст с наложенным видео.

Теперь выровняем заголовок посередине (это можно сделать на вкладке контент — фото ниже) и прописываем заголовок следующим образом:

Hello <span>Best Elementor Hacks</span>

Видео на тексте на Elementor/ WordPress. Текст с наложенным видео.

Сейчас можно задать опциональные настройки для вашего заголовка и выбрать белый цвет текста:

Видео на тексте на Elementor/ WordPress. Текст с наложенным видео.

И самый таинственно-волнущий момент, в Custom CSS заголовка нужно прописать следующее:

selector{

  position: absolute;

  width: 100%;

  height: 100%;

  background: #000;

  display: flex;

  justify-content: center;

  alighn-items: center;

  mix-blend-mode: multiply;

  

}

selector span{

  Font-size: 15%;

  display: block;

  text-transform: uppercase;

  Letter-spacing: 20px;




}

Видео на тексте на Elementor/ WordPress. Текст с наложенным видео.

На этом все 🙂

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