Как добавлять медиа в блоки

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

Как добавить изображение в блок

Чтобы установить изображение в качестве пользовательского фона или добавить изображение в компонент блока:

  1. В проекте в Личном кабинете перейдите в раздел Каналы продаж > Веб-сайты.
  2. В панели нужного сайта нажмите Открыть Site Builder.
  1. В настройках блока активируйте соответствующий переключатель (например, Пользовательский фон, Логотип игры) и нажмите на поле предварительного просмотра под переключателем.
  1. Нажмите Медиа.
  1. В открывшемся модальном окне загрузите изображение одним из следующих способов:
    1. На вкладке Все медиа или Изображения перетащите изображение и нажмите на него после загрузки.
    2. Нажмите Добавить медиа, выберите С устройства в выпадающем списке и загрузите нужное изображение.
Примечание
  • Максимальный размер одного изображения: 10 МБ.
  • Поддерживаемые форматы: ICO, PNG, GIF, JPG, JPEG, WEBP, BMP, TIFF, TIF, SVG.
  • Рекомендуемая ширина изображения для пользовательского фона в блоке — 1920 px. Определите подходящие пропорции изображения после того, как в блок будет добавлен необходимый контент. Рекомендованные размеры для других типов изображений приведены в описаниях блоков.
  1. Настройте стиль изображения:
Примечание
Набор настроек зависит от компонента, в который вы добавляете медиа.
    1. Выберите способ размещения изображения:
      • Заполнить с обрезкой — изображение заполняет весь блок с сохранением пропорций. Если пропорции изображения и блока отличаются, часть изображения может быть обрезана.
      • Вписать (по умолчанию) — изображение сохраняет свое соотношение сторон и вписывается в высоту блока.
      • Растянуть (рекомендуется для пользовательского фона) — изображение заполняет ширину блока и может быть обрезано сверху и снизу, если оно превышает высоту блока.
Примечание
Пользовательский фон не имеет фиксированной ширины или высоты, так как его размеры динамически подстраиваются под размер блока. Размер блока изменяется в зависимости от контента (например, от количества добавленного текста, наличия или отсутствия кнопок) и разрешения экрана устройства.
      • Фиксировать — изображение растягивается до размера блока без сохранения пропорций.
    1. Выберите позицию изображения (опционально):
      • Вверху слева;
      • Вверху по центру;
      • Вверху справа;
      • Слева;
      • По центру (по умолчанию);
      • Справа;
      • Внизу слева;
      • Внизу по центру;
      • Внизу справа.
Примечание
Если видео уже заполняет компонента по одной стороне (например, по высоте в режиме Вписать), смещение работает только по другой оси — остаются три варианта (лево, центр и право).
    1. Настройте оттенок и градиент изображения (опционально).
  1. Опубликуйте сайт.

Как добавить видео в блок

Чтобы установить видео в качестве пользовательского фона или добавить видео в компонент блока:

  1. В проекте в Личном кабинете перейдите в раздел Каналы продаж > Веб-сайты.
  2. В панели нужного сайта нажмите Открыть Site Builder.
  1. В настройках блока активируйте соответствующий переключатель (например Пользовательский фон, Логотип игры) и нажмите на поле с предпросмотром фона ниже переключателя.
  1. Нажмите Медиа.
  1. В открывшемся модальном окне загрузите видео одним из следующих способов:
    1. На вкладке Все медиа или Видео перетащите ваше видео и нажмите на него после загрузки.
    2. Нажмите Добавить медиа и выберите метод загрузки видео из выпадающего списка:
      • С устройства — выберите видеофайл на вашем устройстве.
      • C YouTube — введите URL видео, размещенного на YouTube.
Примечание
  • Максимальный размер одного видео, загружаемого с устройства: 10 МБ.
  • Поддерживаемые форматы: ICO, PNG, GIF, JPG, JPEG, WEBP, BMP, TIFF, TIF, SVG.
  • Добавление видео в качестве пользовательского фона не поддерживается в блоках Call-to-action, Рекламный слайдер и Subscriptions.
  • Рекомендуемая ширина видео для пользовательского фона в блоке — 1920 px. Определите подходящие пропорции изображения после того, как в блок будет добавлен необходимый контент. Рекомендованные размеры для других типов изображений приведены в описаниях блоков.
  1. Настройте стиль видео:
Примечание
Набор настроек зависит от компонента, в который вы добавляете медиа.
    1. Выберите способ размещения видео (только для видео, загруженных с устройства):
      • Заполнить с обрезкой — видео заполняет весь блок с сохранением пропорций. Если пропорции видео и блока отличаются, часть изображения может быть обрезана.
      • Вписать (по умолчанию) — видео сохраняет свое соотношение сторон и вписывается в высоту блока.
      • Растянуть (рекомендуется для пользовательского фона) — видео заполняет ширину блока и может быть обрезано сверху и снизу, если оно превышает высоту блока.
Примечание
Пользовательский фон не имеет фиксированной ширины или высоты, так как его размеры динамически подстраиваются под размер блока. Размер блока изменяется в зависимости от контента (например, от количества добавленного текста, наличия или отсутствия кнопок) и разрешения экрана устройства.
      • Фиксировать — видео растягивается по размерам блока без сохранения пропорций.
    1. Настройте воспроизведение видео (опционально, недоступно для пользовательского фона). Вам доступны следующие настройки:
      • Отключить звук видео.
      • Повторять видео.
      • Запускать видео автоматически.
      • Обложка видео — изображение, которое показывается до начала воспроизведения видео или если оно недоступно для пользователей. Эта настройка доступна только для видео, загруженных с устройства.
Примечание
Вы не можете одновременно оставить звук видео включенным и включить автовоспроизведение. Если вы активируете переключатель Запускать видео автоматически, переключатель Отключить звук видео будет также активирован.
    1. Настройте оттенок и градиент видео (опционально).
  1. Опубликуйте сайт.
Была ли статья полезна?
Спасибо!
Что может сделать страницу еще лучше? Сообщение
Жаль, что так произошло
Расскажите, почему статья не была полезна. Сообщение
Спасибо за обратную связь!
Ваши мысли и идеи помогут нам улучшить ваш пользовательский опыт.
Последнее обновление: 4 июня 2026

Нашли опечатку или ошибку в тексте? Выделите ее и нажмите Ctrl+Enter.

Сообщите о проблеме
Мы постоянно улучшаем качество нашей документации. Ваш отзыв поможет нам в этом.
Укажите email-адрес, чтобы мы могли связаться с вами
Спасибо за обратную связь!
Не получилось отправить ваш комментарий
Попробуйте еще раз позже или напишите нам на doc_feedback@xsolla.com.