Как добавить фоновое изображение WordPress на любую веб-страницу
Это введение будет очень коротким.
Вот что мы собираемся обсудить в этой статье:
- Что такое фоновые изображения
- Что не так с фоном параллакса?
- Как добавить фоновые изображения на ваш сайт WordPress
- Как приблизиться к размеру изображения в WordPress
Готов, готов? Пойдем!
Что такое фоновые изображения?
Фоновые изображения — это изображения, которые применяются к фону элемента на веб-сайте, в электронном письме и т. д. Хотя главное изображение является основным фокусом веб-сайта или электронного письма, фоновые изображения менее заметны. В качестве второго слоя они поддерживают другие элементы сайта: призывы к действию, другие изображения, различные разделы сайта и т. д.
Рассмотрим несколько примеров таких фоновых изображений:
IKEA
На главной странице на веб-сайте ИКЕА фоновые изображения используются для представления своих вдохновляющих историй.
Название и категория истории размещаются поверх изображения. Используется наложение градиента, чтобы уменьшить непрозрачность фактического изображения. Такой подход помогает сделать текст более заметным, а также создает единообразие в дизайне, поэтому ни один цвет не выделяется больше, чем другой.
Любящий Винсент
Один из моих любимых фильмов, этот.
Фоновые изображения лежат за каруселью, в которой представлены истории Винсента Ван Гога и фильма. Фоновые изображения, кажется, усиливают историю и вызывают сильные эмоции.
Lush
Мне так нравится, как выглядит сайт Lush: красочный и яркий, как и сами продукты.
Теперь фоновые изображения могут использовать узоры или формы, как в этом примере страницы подписки на новостную рассылку. Этим шаблонам удается превратить что-то потенциально скучное во что-то веселое.
Фоновые изображения параллакса
Если вы посмотрите на веб-сайт Британского музея, вы заметите, что на его страницах есть изображения, которые лежат на заднем плане, поэтому содержимое переднего плана прокручивается вниз.
Это параллаксные фоновые изображения.
Параллаксная прокрутка — одна из тех тенденций веб-дизайна, которая при правильной интеграции может добавить блестящий эффект на веб-сайт.
Вы также можете получить такой эффект в WordPress, я покажу вам, как это сделать чуть позже.
Как добавить фоновые изображения на ваш веб-сайт WordPress
Существует три основных способа добавления фоновых изображений на ваш веб-сайт WordPress. Давайте проверим их, хорошо?
Этот параметр доступен для большинства популярных тем WordPress. В этом примере я буду использовать тему Colibri. Другие темы ведут себя аналогично теме Colibri.
Если выбранная вами тема не поддерживает эту функцию, перейдите к методам 2 и 3.
Теперь давайте начнем с перехода в «Внешний вид» -> «Настроить» на панели инструментов WordPress. Слева вы увидите параметры редактирования настройщика темы, а справа — предварительный просмотр вашего веб-сайта в реальном времени.
Тема позволяет размещать фоновые изображения для:
- строк
- Столбцы
- Блоки (целые разделы сайта, такие как: обо мне, портфолио, команда, контакты и т.д.)
- Компоненты (заголовки, карусели, прайс-листы, карусели и т. д.)
Это можно сделать одним и тем же способом, независимо от того, где вам нужно фоновое изображение.
Допустим, вы хотите добавить фоновое изображение в блок вашего веб-сайта услуг. Начните с выбора раздела. Слева вы увидите параметры редактирования в меню, структурированном, как показано ниже:
- Макет
- Стиль
- Расширенный
Выберите Стиль -> Тип фона.
Выберите «Изображение». Теперь вы увидите изображение, которое вы можете заменить своим.
Когда вы нажмете на изображение, вам будет предложено перейти на экран, где вы можете выбрать изображение из медиагалереи WordPress или загрузить другое изображение.
Как вы уже могли заметить, вы даже можете добавить видео в качестве фона.
А еще есть возможность переключения эффекта параллакса!
Теперь есть еще один ярлык для изменения фонового изображения. Когда вы выберете блок справа, вы увидите значок настроек. Нажмите на нее, и вы увидите некоторые параметры редактирования.
Если вы выберете «Изменить фон», вы будете перенаправлены в «Стиль», чтобы продолжить, как описано выше.
Это все ребята. Довольно легко, правда?
Теперь, если в вашей теме нет параметра фонового изображения, есть способ сделать это в редакторе WordPress по умолчанию.
На панели инструментов WordPress перейдите в «Страницы». Теперь выберите «редактировать» под нужной страницей. Вы увидите интерфейс, как показано ниже.
Редактор WordPress по умолчанию основан на блоках, что означает, что каждый раздел веб-сайта состоит из блоков. Доступ к этим блокам можно получить с помощью любого знака «+», который вы увидите в интерфейсе.
Давайте нажмем на тот, что в верхнем левом углу.
Теперь выберите блок «Обложка». Вы сразу же увидите его на своей странице.
Вы можете загрузить изображение, хранящееся локально на вашем компьютере, или выбрать одно из существующих в Медиатеке.
Я выбрал изображение из Медиатеки. Теперь я могу добавить к нему текст. Возможности редактирования здесь весьма ограничены.
Если вы выберете обложку, вы увидите всплывающее меню, где вы можете выровнять свое изображение или продублировать весь блок. Вы даже можете сохранить свой блок как многоразовый, чтобы снова использовать его в других проектах.
Теперь в правой части экрана есть дополнительные параметры редактирования.
В настройках мультимедиа, если вы включите опцию фиксированного фона, вы активируете эффект параллакса.
Когда переключатель выключен, вы можете настроить точку фокусировки.
Эту регулировку фокусной точки можно также выполнить в процентах, принимая во внимание ширину и высоту.
Далее можно добавить наложение. Вы можете выбрать его цвет и прозрачность.
И вроде готово.
Вот некоторые плагины WordPress, помеченные как плагины фонового изображения. Я собираюсь немного поиграть с плагином Simple Full-Screen Background Image, потому что на данный момент у него больше всего установок и самые лучшие отзывы.
Вот руководство по установке плагина WordPress.
С помощью этого плагина изображения будут автоматически масштабироваться вместе с браузером, поэтому независимо от размера браузера изображение всегда будет заполнять экран.
Все, что вам нужно сделать, это перейти в Внешний вид -> Полноэкранное фоновое изображение.
Отсюда выберите свое изображение.
Когда вы нажмете «Сохранить параметры», вы увидите, что все разделы вашего сайта без фона получат это изображение в качестве фона.
Вот что происходит в бесплатной версии. Это довольно просто и совсем не гибко. Платный план поставляется с дополнительными опциями, такими как:
- Неограниченное количество фоновых изображений
- Фоновые изображения для постов/страниц
- Несколько изображений с плавными переходами на страницах
И мы закончили, вы только что узнали 3 метода, которые вы можете использовать для добавления фоновых изображений на свой сайт WordPress.
Есть еще одна вещь, которую я хочу, чтобы вы знали, прежде чем мы на этом закончим.
Размеры изображений
Прежде чем загрузить какое-либо изображение на свой сайт, обратите внимание на его размер. Я знаю, что все мы смотрим на мегапиксели, но в Интернете есть одна загвоздка.
С другой стороны, использование слишком маленьких изображений также может повредить вашему пользовательскому опыту. Значит, нам нужно сводить концы с концами.
Один из способов сделать это — использовать внешние приложения, которые помогут вам изменить размер изображений, обеспечив при этом надлежащую четкость.
Но в WordPress это можно легко сделать с помощью… плагина, как вы уже догадались.
Здесь, в Colibri, мы фанаты Smush. Smush может и будет сжимать изображения без видимого снижения качества.
В профессиональной версии он также будет конвертировать изображения в WebP, формат изображения нового поколения, который может сжимать размер файла изображения до 35% без очевидной потери качества.
