Медиа

Поле "Медиа" добавляет средство выбора изображений в собственный виджет, созданный с помощью главных аддонов Виджет Строитель. Редакторы выбирают изображение из Медиатеки или загружают новое в Elementor, и ваш шаблон печатает его URL, ID или альтернативный текст. Используйте его для фотографий профиля, логотипов, изображений героев, снимков продукта и любого другого слота для отдельных изображений.

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

Что делает медиа-поле #

• Добавляет на панель виджета поле изображения Elementor, с кнопкой Выбрать изображение.
• Выберите "Изображение" открывает медиа-окно WordPress, в которое редакторы загружают файл, выбирают его из медиатеки или вставляют из URL-адреса.
• В поле хранятся изображения url, id и alt текст, и ваш шаблон печатает все, что ему нужно.
• Он работает на вкладке HTML и вкладке CSS, например, как фоновое изображение.

Если вы еще не создали виджет, прочтите Обзор виджета-строителя первый.

Прежде чем начать #

• WordPress с установленным и активным элементом Elementor.
• Установлены и активны главные дополнения для Elementor.The руководство установки настройка обложек.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Profile Card” с полем Media named profile_photo и текстовое поле для имени.

Как добавить поле "Медиа" #

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. На Содержание вкладка, добавить раздел, например “Profile”.
3. Тип media в поле поиска слева.
4. Драг Медиа в раздел Его настройки открываются в левой боковой панели.

Объяснены варианты поля СМИ #

• Этикетка текст над полем изображения в Elementor, например “Profile Photo”.
• Имя является ли уникальный идентификатор поля и начало его жетонов, так что profile_photo дает {{ profile_photo.url }}. Только буквы, цифры и подчеркивания.
• Описание появляется под полем изображения в Elementor.
• Типы СМИ перечисляет изображение (по умолчанию), видео, аудио, PDF, SVG, электронную таблицу, документ, презентацию и архив. в наших тестах эта настройка не дошла до Elementor. поле, установленное на видео, все еще отображалось как обычный сборщик изображений, поэтому рассматривайте поле Media как поле изображения.

Настройка изображения по умолчанию отсутствует, поэтому новая копия виджета начинается без изображения, пока редактор не выберет одно. Общие настройки далее работают вниз, как и в других полях.

Распечатайте изображение в своем шаблоне #

Поле содержит несколько значений, и вы печатаете каждое из них точкой:

• {{ profile_photo.url }} является URL-адресом файла изображения. {{ profile_photo }} на своих отпечатках тот же URL.
• {{ profile_photo.id }} является ли идентификатором медиатеки изображения.
• {{ profile_photo.alt }} альтернативный текст, который изображение имело в Медиатеке, когда редактор выбрал его.

Завернуть <img> отметьте чек, чтобы ничто не печатало, пока поле пусто:

{% if profile_photo.url %}
  <img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}

Токен работает и на вкладке CSS, например для фонового изображения:

.profile-card {
  background-image: url('{{ profile_photo }}');
}

Если ваши стили изображения не применяются, сделайте селектор более конкретным.Elementor имеет свои правила для изображений внутри виджетов, и в наших тестах .profile-photo один у них не выиграл, в то время как .profile-card .profile-photo сделал.

Нажмите Сохранить настройки когда закончишь.

Используйте управление мультимедиа в Elementor #

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

Открывается окно "Вставить медиа" Загрузить файл под Загрузить файлывыберите один ниже Медиа Библиотекаили использовать Вставить из URL. На панели сведений справа показан Alt-текст изображения, что и есть {{ profile_photo.alt }} отпечатки. Заполните его там, прежде чем нажать Выбрать.

Обычные случаи использования #

• Фотографии профиля и карты членов команды.
• Логотипы в заголовках, нижних колонтитулах и списках клиентов.
• Изображения героев и знамен, как <img> тег или фон CSS.
• Изображения продуктов или функций внутри карт.

Советы по работе с Медиа полем #

• Всегда охраняйте <img> тег с {% if profile_photo.url %} так что пустое поле не оставляет разбитого изображения.
• Печать {{ profile_photo.alt }} в атрибуте alt и добавьте альтернативный текст в медиатеку перед выбором изображения.
• Использовать object-fit: cover с фиксированной шириной и высотой, когда изображения разных форм должны совпадать.
• Дайте правилам изображения два класса, например .profile-card .profile-photo, так что собственные стили образа Элементора их не перевешивают.
• Для нескольких изображений используйте Галерея поле. Для значков или символов SVG используйте Поле значков.

Часто задаваемые вопросы #

Завершая #

Добавить поле "Медиа", распечатать {{ field_name.url }} и {{ field_name.alt }} внутри ан {% if %} проверьте и дайте стилям изображения определенный селектор. Затем редакторы берут или загружают изображения прямо из Elementor. Чтобы ссылка соответствовала изображению, добавьте a Поле URLи проверьте ценообразование за то, что включает каждый план.