Добавьте баннер на свой сайт

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

В этом видео вы узнаете, как использовать блок «Обложка», чтобы добавить на сайт WordPress.com визуальный заголовок или раздел в стиле баннера. В нём показано, как добавить фоновое изображение или видео, разместить поверх текст или другие блоки, настроить макет и фокусную точку, изменить наложение и просмотреть дизайн на мобильном устройстве.

Добавить баннер на сайт можно с помощью блока «Обложка». Чтобы добавить баннер на страницу, в запись или в шаблон, выполните следующие действия:

1. Перейдите в панель управления сайта.
2. В зависимости от того, где вы хотите добавить баннер, перейдите к странице, записи или шаблону и откройте существующий элемент для редактирования либо создайте новый:
   • Страница: перейдите в раздел меню Страницы.
   • Запись: перейдите в раздел меню Записи.
   • Шаблон: перейдите в раздел Внешний вид → Редактор и выберите шаблон.
3. Нажмите значок «+» (вставка блоков) и найдите «обложка».
   • Или введите /обложка там, где видите надпись «Наберите /, чтобы выбрать блок».

4. Нажмите значок обложки, чтобы вставить блок «Обложка»:

После того как вы добавили блок «Обложка», выберите медиафайл, который будет отображаться. Можно выбрать один из следующих вариантов:

• Загрузить: нажмите кнопку «Загрузить», чтобы выбрать файл на компьютере.
• Выбрать медиафайл: найдите медиафайл в одном из следующих мест:
  • Библиотека файлов: изображения и видео, которые вы уже загрузили в Библиотеку файлов сайта.
  • Ваш телефон: используйте мобильное приложение Jetpack, чтобы загружать медиафайлы прямо с телефона.
  • Генерировать с помощью ИИ: введите краткое описание нужного изображения, и ИИ создаст его.
  • Google Photos: выберите медиафайлы из подключённой учётной записи Google Photos.
  • Pexels: ищите бесплатные изображения в библиотеке Pexels.
  • Openverse: ищите бесплатные изображения в библиотеке Openverse.
• Использовать избранное изображение: отображает избранное изображение страницы или записи, если оно задано. Если добавить блок «Обложка» в шаблон и выбрать этот вариант, будет автоматически отображаться избранное изображение любой страницы или записи, использующей этот шаблон.
• Цвет: вместо изображения или видео выберите для баннера сплошной цвет.

После этого можно добавить в баннер содержимое, например текст и кнопки, настроить макет баннера и изменить его оформление.

При выборе изображения для баннера учитывайте следующее:

• Лучше всего подходят декоративные или абстрактные изображения, поскольку на мобильных устройствах полное изображение может отображаться не целиком.
• Размещайте текст поверх изображения, а не встраивайте его в само изображение. Это поможет тексту правильно масштабироваться на экранах любого размера.
• В блоке «Обложка» изображение используется как фоновое изображение и на небольших устройствах не уменьшается так, чтобы была видна вся его ширина. С помощью настройки выбора фокусной точки можно указать, какая часть изображения будет в фокусе на небольших экранах.
  • Если изображение содержит важные элементы, которые должны полностью отображаться на устройствах любого размера, используйте блок «Изображение».

Блок «Обложка» поддерживает изображения, видео и сплошные цвета. Чтобы загрузить видео в блок «Обложка», выполните следующие действия:

1. Добавьте блок «Обложка» на страницу или в запись.
2. На панели инструментов блока нажмите «Добавить медиафайл»:

3. Выберите один из вариантов:
   • Загрузить: загрузите видеофайл с компьютера (требуется тарифный план с поддержкой этой функции).
   • Открыть Библиотеку файлов: выберите видеофайл, который уже загружен.
   • Вставить видео по URL-адресу: вставьте URL-адрес видео с YouTube, Vimeo или другого сервиса.

Блок «Обложка» служит скорее для оформления, чем для воспроизведения контента, поэтому звук из видеофайла в нём не воспроизводится. Если хотите добавить звук из видео, используйте блок VideoPress — в нём видео воспроизводится со звуком.

После того как добавите блок «Обложка», медиафайл можно заменить в любой момент. Чтобы заменить или удалить медиафайл баннера:

1. Перейдите в панель управления сайта.
2. Откройте страницу, запись или шаблон, где находится баннер.
3. Выберите Представление в виде списка в верхнем левом углу редактора.
4. Нажмите блок «Обложка» в представлении в виде списка.

5. На панели инструментов блока нажмите кнопку «Заменить», чтобы выбрать новое изображение или видео.

Выберите новый медиафайл одним из следующих способов:

• Открыть Библиотеку файлов: выберите изображение, которое уже загружено.
• Загрузить: выберите изображение на устройстве, чтобы загрузить его на сайт. См. поддерживаемые типы файлов.
• Использовать избранное изображение: используйте избранное изображение страницы или записи.
• Сброс: удалите изображение, но оставьте блок «Изображение» на месте, чтобы затем выбрать один из вариантов: загрузить, выбрать изображение, сгенерировать с помощью ИИ или вставить по URL-адресу.
• Ваш телефон: добавьте изображение с телефона с помощью мобильного приложения Jetpack.
• Сгенерировать с помощью ИИ: создайте изображение с помощью ИИ, описав, что вам нужно. 
• Google Photos.
• Бесплатная библиотека фотографий Pexels.
• Бесплатные изображения Openverse.
• Вставить видео по URL-адресу: вставьте URL-адрес видео с YouTube, Vimeo или другого сервиса.