Добро пожаловать на двадцатый урок. Сегодня поговорим про мультимедиа в Elementor, а также про слайдеры и карусели.

Мультимедиа (видео, аудио и изображения) играет ключевую роль в современном веб-дизайне, поскольку оно помогает привлечь внимание пользователей и улучшить их взаимодействие с сайтом.

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

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

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

Вы также можете настроить переходы и анимацию для слайдеров, чтобы сделать их ещё более привлекательными и интерактивными. 

Давайте для начала зайдём в консоль WordPress и посмотрим медиафайлы. Здесь хранятся все файлы, которые мы загрузили ранее: изображения, иконки и даже шрифты. Также можно сюда загрузить видео, музыку и другие медиафайлы. «Добавить новый медиафайл». Только есть ограничение — максимальный размер. Он зависит от вашего хостинга. 

Также можно удалять ненужные. Например, давайте удалим ненужную картинку. «Удалить навсегда».

Также можно сделать множественный выбор. Например, вот так. Удаляем.

Давайте теперь перейдём на какую-нибудь страницу. Вот на эту, например. «Редактировать в Elementor». В настройках сразу же давайте скроем заголовок.

С изображениями мы уже знакомы, можно вставить видео. Далее можно вставить карусель. Loop Carousel — это точно такой же виджет, как Loop. Мы с ним знакомились на прошлых уроках, только этот будет уже с каруселью.

Также можно вставить галереи, слайдеры, медиа-карусель, карусель отзывов. Ещё карусель, ещё галереи. Но давайте по порядку.

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

Сюда вставляется ссылка на YouTube или Vimeo. К сожалению, ссылки с других сервисов (например, Rutube или VK-видео, или ещё каких-нибудь) сюда не вставляются. Они не будут работать.

Давайте перейдём тогда на YouTube. Выберем какое-нибудь видео, например это. Нажмём «Поделиться» и выберем «Копировать ссылку».

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

Вернёмся в стили и время начала поставим несколько секунд, примерно две-три секунды, задержка чтобы была. Время окончания так и оставим. «Проиграть единожды» — оставим «нет», а вот «Проиграть на мобильном» —  поставим «да».

Обязательно нужно вставить какой-нибудь резервный фон. Это для того, чтобы заменить видео, если оно по какой-то причине не подгрузится. Так, давайте выберем какое-нибудь изображение, например вот это. Или можем сделать скриншот какого-нибудь кадра и тоже вставить. Далее давайте перейдём в «Перекрытие фона».

Чтобы немного затемнить наш фон, давайте сделаем «Классика», цвет поставим черный.

Можно настроить прозрачность: сделать вообще непрозрачный или полупрозрачный. Давайте оставим такой вот.

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

Выберем ещё вставку с Vimeo и вставим. Нажмём Share, скопируем ссылку и вставим.

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

Давайте перейдём дальше, посмотрим виджет «Видео». Перетащим виджет. Также выбираем источник видео. Выбираем YouTube, Vimeo или ещё два варианта. Также можно выбрать «С вашего хостинга». Выбрать видеофайл и загрузить. Но у нас максимальный размер файла — два мегабайта, а видео обычно весят гораздо больше, и они сюда не загрузятся. Но если у вас хостинг поддерживает больший размер, то можно сюда видео подгрузить.

Давайте для начала выберем YouTube. Также выберем какое-нибудь видео. Скопируем ссылку. Вставляем. И вот у нас уже видео с YouTube. Так же настраивается: «Проиграть автоматически», «Без звука», «Зациклить», «Управление воспроизведением» вот этой кнопкой. Я думаю, надо оставлять это обязательно.

Также можно наложить изображение. Например, какой-нибудь скриншот сделать и он будет отображаться сверху на первоначальном экране. А у нас тут картинка красивая, я оставлю так. В стилях задаётся соотношение сторон.

И в принципе всё. Как я уже сказал, можно выбирать только YouTube или Vimeo. Но есть ещё один способ. Давайте покажу. Выберем макет (давайте двухколоночный) и в элементах найдём виджет «HTML-код».

Давайте вставим его. И теперь можно перейти, например, в VK-видео, выбрать какое-нибудь видео, которое вам нужно, и нажать ссылку «Поделиться» — «Экспортировать». И уже здесь выбрать iframe. Также можно отключить галочку автостарта, чтобы у нас при загрузке страницы видео не воспроизводились автоматически, а можно было только включать самому. Выбрать размер какой-нибудь. Давайте вот этот, поменьше. Скопируем фрейм.

Вставляем, и у нас появляется видео с VK-проигрывателем. Давайте ещё посмотрим пример. Выберем HTML-код. Давайте теперь с Rutube выберем какое-нибудь видео. Давайте вот это, например.

«Пауза». «Поделиться». Также нажимаем «Код вставки плеера». Копируем вот этот iframe и вставляем.

И вот у нас уже видео с Rutube загружается. Давайте побольше чуть-чуть сделаем. Вот так.

С видео вроде бы разобрались, давайте теперь перейдём к другим виджетам. Давайте выберем галерею. Сначала создадим структуру и выберем «Галерея». Также давайте выберем «Основная галерея».

Эти два виджета очень похожи между собой, только у галереи и основной галереи немного разные настройки. Давайте посмотрим на галерею, выберем несколько изображений. Неважно какие: такое, такое, такое, такое… Не знаю. Давайте ещё что нибудь. И создадим новую галерею.

Вставим галерею, и вот у нас добавились картинки. Давайте теперь для основной галереи выберем какие-нибудь картинки. Давайте такую, такую, такую. Любые, какие нужно. И вставим.

Теперь разберёмся, в чем отличие. Например, в основной галерее давайте поставим полное изображение (full), и у нас выбираются колонки. Две, три, четыре, и, в принципе, всё.

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

Давайте их отредактируем. Их можно поменять местами, как нам нужно. Вставляем обратно в галерею. И вот у нас уже сортировка по умолчанию. Макет можно выбирать вот так, сеткой, «По ширине». Так как они у нас разной ширины, они выбираются по ширине или кирпичной кладкой.

Выбираем также, сколько колонок надо. Давайте сделаем три колонки, пять колонок. Также сделаем сеткой, как больше нравится. Задаются отступы между файлами, также — соотношение сторон. И «Перекрытие» — при наведении можно поменять фон (а у нас его не будет).

Оставим. Также в стилях задаётся скругление углов. Анимация добавляется. Также есть «Перекрытие» и «Содержимое». Только я не понимаю, какое тут содержимое. Ну и неважно. 

Далее давайте перейдём к слайдеру. Набираем «слайдер». Давайте его перетащим. Это блок на странице, который позволяет автоматически или вручную прокручивать контент: текст, изображение и видео с помощью таймера или анимации. В этом блоке часто используются стрелки вправо и влево для управления и навигации. Также можно увидеть индикатор количества слайдов, который показывает текущий слайд в виде точки. Можно поменять фон. Давайте выберем какое-нибудь изображение или какой-нибудь цвет.

Давайте изображение. Например, вот такое. Можно добавить содержимое, заголовок, описание, кнопку.

Также можно поменять на индивидуальный стиль или все стили будут меняться. Это я чуть попозже покажу. Также давайте перейдём к параметрам слайдера. Задаём автовоспроизведение. Давайте пока отключим, чтобы удобнее было настраивать. «Зациклить листание» — тоже давайте пока оставим.

Можно переход поменять. Давайте «Выцветание» пока возьмем, нажмём на стрелочку, вот так у нас будет меняться. Также скорость перехода. «Анимация содержимого» — можно вниз. Вот так. Или вообще отключить анимацию.

Давайте перейдём в стили. Посмотрим позиции: сверху, снизу, посередине. Также текст можно выровнять. Заголовок также меняется. Типографика, как обычно.

«Описание», «Кнопка» и т. д. Обычные стили. Давайте ещё перекрытие фона сделаем немножко потемнее. Также можно задать высоту определенную. И также задать HTML-теги. Давайте для заголовка и для всего остального зададим тег p.

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

Давайте еще посмотрим на макеты. Вот у нас есть здесь карусель отзывов, карусель сотрудников, карусель для клиник и карусель для экскурсий. Для экскурсий ещё несколько каруселей. Вернёмся.

И давайте начнем от простого — карусель изображений. Давайте здесь наберём «карусель». Вот такую возьмём карусель пока. Добавим. В контейнере давайте сразу зададим отступы сверху и снизу. В карусели добавляем изображение точно так же, как и в галерее.

Давайте добавим. Возьмём вот эти несколько штук подряд. Также атрибуты Alt надо будет прописать обязательно всем.

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

«Растягивать изображение», наверное, всё-таки оставим «Нет». Это нужно для того, чтобы если они разного размера, то подгонялись под один. Но у нас, так как они одинакового размера, оставляем «Нет». «Навигация» — давайте сделаем только стрелки. И также можно поменять значок. Можно загрузить svg или из библиотеки иконок.

Давайте вот такую вставим. Здесь тоже — справа вставим. Ссылку сделаем «отсутствует» — при нажимании, чтобы не открывалось. Хотя можно вот так: «Медиафайл».

Но, я думаю, это лишнее. Сделаем «Отсутствует». Давайте в дополнительных опциях «Проиграть автоматически» отключим пока, чтобы не мешалось. Потом можно обратно включить. И давайте немножко стилизуем. Стрелки оставим внутри. Это я покажу, почему. Давайте немножко размер их поменяем: побольше, на глаз так пока сделаем.

Цвет давайте сделаем чёрный, например. Изображению можно задать выравнивание. Но так как у нас они одинакового размера, оставим «По умолчанию». Отступ давайте сделаем «Произвольно», «Отступ от изображения» — давайте добавим, например, 40.

Тип границы оставляем, а вот скругление углов тоже 40 сделаем. И теперь надо стилизовать стрелки, чтобы они выглядели примерно так, как здесь. Для этого нам нужно, опять же, прописывать CSS-код. 

Давайте обновим сначала страницу и посмотрим на код. Здесь у нас загружается видео. Давайте пролистаем и нажмем F12. В панели разработчика найдём наши стрелки. Зайдём, и вот она, правая. Возьмём у неё вот эти классы: elementor-swiper-button, elementor-swiper-button-next. Давайте эти два класса возьмём, скопируем, перейдём в редактор, пропишем selector и вставим эти два класса. 

Теперь нам надо левую кнопку. Вот она. Elementor-swiper-button и с prew. Вот эти два класса скопируем. Также здесь через запятую пишем selector и также вставляем два класса.

И давайте добавим background color. Background color возьмём из макета. Можно отсюда взять заливку или отсюда скопировать. Кому как удобнее. Мне вот удобнее отсюда. Скопирую и вставлю.

И вот у нас уже появился background на обе кнопки. Давайте добавим padding сразу же примерно 12 пикселей. Я так думаю, подойдёт 12 пикселей. И скругление углов сделаем 100%. Это у нас border radius, 100%.

Также можно задать тень. Давайте перейдём в макет. Можно задать вот отсюда: Drop shadow — тень. Или вот отсюда скопировать. Давайте отсюда скопируем. Здесь удобнее. И вставим.

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

Спозиционируем их по-другому, по-правильному. Давайте так: возьмём отсюда, скопируем текст про class, Ctrl+C, ставим его сюда. Это для одной кнопки, для правой. И давайте зададим ему расстояние. Например, right: -6%.

Вот, у нас уже стрелочка одна готова. Давайте отсюда возьмём class, скопируем. И теперь сделаем для левой кнопки. Также добавим позиционирование left. Left также -6% сделаем.

И вот у нас всё отлично. Давайте обновим и посмотрим. Можно здесь. Давайте на рабочем сайте его посмотрим. Всё хорошо.

Так, давайте посмотрим, как это выглядит на планшете. Совсем не очень получилось. Так что надо обязательно всё это настроить под планшет. Давайте перейдём и пропишем медиазапрос. Но для начала сделаем у контейнера отступы справа и слева.

Ещё, наверное, стрелку можно поменять: чуть-чуть поменьше сделать. Например, отступ от изображения можно поменять: сразу пикселей на 20 сделать. Вот. И теперь будем позиционировать стрелки. 

Напишем media (max-width: 1024 px). И давайте скопируем вот этот код и добавим расстояние для стрелок — -8. Тут тоже -8 сделаем.

Обновим и посмотрим. Давайте здесь посмотрим. Так, переключимся. И у нас как-то стрелки немножко близко.

Здесь вроде нормально. А на 1024 они немножко близко. Надо как-то сделать оптимально. Давайте выберем и попробуем -7 сделать. И этой стрелке тоже -7. Так, не выбрал.

Так вроде бы неплохо, но здесь они начинают «залезать» на изображение. Давайте знаете, что сделаем? Давайте padding уменьшим чуть-чуть, примерно до 9 пикселей. И вот у нас уже даже получше выглядит.

Давайте добавим -7, а padding сделаем 9 пикселей. Так и пропишем. Давайте вот этот код возьмём и добавим его сюда.

Так, у нас background color остаётся. Мы его можем отсюда убрать. Padding мы оставим. Border-radius у нас остаётся, можно убрать. Тень тоже можно убрать, потому что она остаётся. И сделаем, сколько у нас там, 9 пикселей. И здесь давайте сделаем 7.

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

Давайте теперь ещё возьмём карусель отзывов. Вот, у нас такая карусель отзывов. Сверху сам отзыв, снизу — картинка и фамилия с именем. Давайте так и добавим. Давайте выберем «Карусель отзывов» и добавим её. 

«Слайдов за раз» мы сделаем сразу три, чтобы виднее было. «Прокручивать слайдов» — давайте сразу по одному сделаем. Так, чтобы у нас не мешалось. Давайте уберём автовоспроизведение. Стрелки показывать, «Точки» — «Нет». Что ты крутишься? Стой. 

И теперь меняем содержимое у слайда. Давайте для начала возьмём этот текст. Поменяем. Зададим изображение. Также добавляем атрибут Alt — фамилию и имя выберем. Также фамилию и имя возьмём и поменяем… «Заголовок». Не знаю, почему он так называется, ну ладно. Уберём совсем.

И также для второго и третьего элемента меняем. Давайте сделаем стиль bubble, чтобы он у нас вот с такой рамочкой был. И теперь можно стилизовать. Слайдерам задаются отступы. Оставим по умолчанию пока. Цвет фона давайте сделаем белый. «Скругление углов», «Отступы внутри».

Для содержимого сразу тоже вот этот разрыв можно сделать. Пока оставим по умолчанию. Там видно будет. Цвет текста давайте чёрный. Типографику поменяем сразу же. Ой, не на ту. На эту поменяем. «Имя» также поменяем. 

Также всё это стилизуется. Мы это уже умеем. «Изображение». Давайте зададим какой-нибудь размер. Примерно надо брать отсюда: 68, 66. Разрыв тоже можно сделать. Скругление углов давайте сделаем ноль, потому что я скачал картинку в png-формате. Потому что здесь скругление углов берётся только у всех четырёх сторон, и вот такой вот хвостик (не знаю, как его назвать) не сделать никак.

Только вот в png-формате. Давайте сделаем навигацию. Размер стрелочкам зададим побольше. Цвет добавим, также зададим цвет фона. Скругление углов — 40. И у нас, по-моему, здесь с левой стороны в ноль. Так вот получается. 

И теперь точно также надо будет задавать стиль для стрелок и т. д. Давайте я вам покажу один хороший способ. Он появился совсем недавно. Давайте выйдем в консоль — Elementor — «Настройки» — «Функционал» — и вот здесь у нас появились «Вложенные элементы». Пока это еще в статусе Бета, но мы его включим. Давайте активируем. Далее сохраним изменения и перейдём обратно на нашу страницу. Давайте, где мы были… «Доставка и оплата», по-моему.

Так, у нас тут всё загружается. Смотрите. После того как мы нажали, у нас появились новые виджеты. Карусель — вот она, точно такая же, как эта карусель. Только у неё появились три точки. И вот ещё появились новые виджеты. Я пока про них не буду ничего говорить. Давайте покажу вот на этом: «Карусель».

Давайте контейнеру сразу зададим отступы, чтобы ничего не прилипало. И давайте посмотрим, что эта карусель из себя представляет. Выбираем, сколько слайдов за раз должно показываться. Давайте сделаем три. Вместо «По умолчанию» — это сколько будет прокручивать — сделаем один. Одинаковую высоту можно поставить. Конечно, мы оставляем.

В настройках давайте мы автовоспроизведение пока уберём. Потом включим, если что. Хотя он не листается вроде бы. И давайте посмотрим на макет ещё. Вот у нас, например, есть карусель «Наши сотрудники». Чтобы такую карусель создать, нужно было прописать очень много CSS-кода, CSS-свойств. А теперь с этой новой каруселью можно создать вот такую удобную. 

Давайте по порядку. Стрелочки посмотрим. Перейдём в «Навигацию». Иконку можно загрузить svg или из библиотеки. Давайте из библиотеки.

Что-то их не видно. Давайте сразу в «Стили» зайдём, посмотрим навигацию. Так, иконке размер чуть-чуть добавим. И давайте цвет сразу добавим, чтобы виднее было. И размер поменьше сделаем. 

Теперь в «Содержимом» опять к «Навигации» перейдём. Поменяем иконку. Можно сразу позицию задать. В процентах зададим. Так, -6, по-моему, у нас было. Давайте здесь позицию зададим в процентах. -6.

Позиционируются тоже посередине, сверху и снизу. Можно в процентах задавать также. В ноль сделаем. Стилизуем. Тип фона давайте сделаем зелёный. Тип границы «По умолчанию» поставим. Тень бокса. Можно тень задать какую-нибудь. Не помню… Здесь 0.16.

Также 0.16 зададим. Также скругление углов можно задать — 100%. Отступы внутри давайте сделаем 12 пикселей. «Позицию» «Внутри» оставим. «Нумерация страниц». Они так бледно выглядят… Давайте добавим ещё слайд какой-нибудь. Вот он. Уже будет нормально.

И теперь можно стилизовать слайды. Давайте возьмём первый слайд. Также у нас вот макет, Flexbox, все дела. Добавляются все обычные виджеты, какие можно. Давайте добавим «Изображение». Зададим полное (full). Выберем эту женщину. Также атрибут Alt прописываем.

Давайте возьмём атрибутом её фамилию. Также стилизуем, как обычно. Давайте сделаем слева в ноль. Теперь можно добавить контейнер под изображение. Неправильно у нас делается. И в контейнер… Подождите, слайду сделаем 0. А в этот контейнер мы добавим заголовок.

HTML-тег сразу <p> сделаем. Фамилию вставим, стилизуем. Это вы уже умеете делать. Также вставим текстовый редактор. Почему-то как-то неправильно он вставляется. Ну, потому что Бета. 

Ещё, видать, настраивают, тестируют, также стилизуют. Вы уже сами тут стилизуйте. Давайте возьмём вот этот текст. Я покажу просто, как это всё делается. Также вставим.

Давайте вот у этого контейнера зададим отступы внутри. Давайте сделаем по 30. Наверное, вот этому контейнеру давайте сделаем отступы внутри. Тоже сверху и снизу по 90. И добавим тип фона — голубой. Вот этому контейнеру тоже зададим тип фона — белый.

Теперь можно, наверное, сдвинуть его на эту высоту. Давайте сделаем отступ снаружи. Мы сделаем margin минусовой. Но вот это скругление…

Так, изображению мы, наверное, зададим Z-index. Сразу давайте 10 сделаем. И этому контейнеру мы сверху добавим ещё 34. Давайте 64 сделаем. 64. Картинку давайте растянем, наверное, на всю — сделаем ширину 100%. И максимальную ширину тоже 100% сделаем. Теперь более-менее. И давайте ещё вот этому контейнеру… Так, скругление снизу. «Граница». Снизу 40 пикселей. 

Ну вот, всё отлично. И теперь можно сделать просто. Удалим эти слайды и просто продублируем. Здесь можно поменять название. Давайте назовём «Слайд 2», «Слайд 3», чтобы не запутаться, и т. д. «Слайд 4».

И теперь в этих слайдах мы просто меняем содержимое. Например, вот у нас «Слайд 1». Почему-то они не переименовались. Ну ладно, не важно. Давайте откроем. И просто давайте поменяем изображение вот на это. И так далее. 

Раньше мы прописывали стрелки CSS-стилем. Теперь вот в этом новом виджете можно делать уже встроенными стилями Elementor. И этот новый виджет, я думаю, в скором времени приобретёт статус не Бета, а уже полной функциональности. И будет полноценным виджетом.

Но на сегодня у меня всё. Сегодня мы рассмотрели мультимедиа: как добавлять видео с YouTube и других источников. Посмотрели разные галереи, посмотрели разные карусели.

На сегодня у меня всё. Увидимся на следующем уроке. Пока.