Как добавить фоновое изображение в WordPress (6 простых способов)

Хотите добавить фоновое изображение на свой сайт WordPress??

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

В этой статье мы покажем вам, как легко добавить фоновое изображение на ваш сайт WordPress.

Зачем добавлять фоновое изображение WordPress?

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

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

Кроме того, вы можете добавить видео с YouTube в качестве фонового изображения или слайд-шоу из изображений, которое оживит ваш контент.

Однако мы рекомендуем выбирать фоновые изображения, которые не отвлекают и не затрудняют чтение содержимого вашего блога WordPress. Фон должен улучшить пользовательский опыт и помочь донести ваше сообщение до посетителей.

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

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

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

• Добавьте фоновое изображение с помощью настройки темы WordPress
• Добавление пользовательского фонового изображения с помощью редактора всего сайта
• Добавление фонового изображения с помощью конструктора тем WordPress
• Добавление пользовательского фонового изображения в WordPress с помощью плагина
• Добавление фоновых изображений с помощью CSS Hero
• Добавление пользовательских фоновых изображений в любое место WordPress с помощью кода CSS

Метод 1. Добавление фонового изображения с помощью настройки темы WordPress

Большинство популярных тем WordPress поставляются с поддержкой пользовательского фона. Эта функция позволяет легко установить фоновое изображение, и мы рекомендуем этот способ, если ваша тема его поддерживает.

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

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

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

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

В настройках темы Astra нужно нажать на «Global» в панели слева.

После этого вы увидите различные опции Global для настройки вашей темы Astra.

Перейдите в раздел «Цвета».

Здесь вы можете изменить цвета темы, включая цвет фона. Вы также можете настроить ссылки, основной текст, заголовки, границы и многое другое.

Чтобы добавить фоновое изображение, прокрутите вниз до раздела «Цвет поверхности». Затем вы можете нажать на опцию «Фон сайта» и перейти на вкладку «Изображение».

После этого просто нажмите кнопку «Выбрать фоновое изображение».

Откроется медиатека WordPress, куда вы можете загрузить изображение с вашего компьютера или выбрать ранее загруженное.

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

Это приведет к закрытию всплывающего окна мультимедиа, и вы увидите предварительный просмотр выбранного фонового изображения в настройщике темы.

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

Вот и все. Вы успешно добавили фоновое изображение на свой сайт WordPress. Зайдите на свой сайт, чтобы увидеть его в действии.

Метод 2. Добавление пользовательского фонового изображения с помощью полного редактора сайта

Если вы используете блочную тему WordPress, то вы можете добавить пользовательское фоновое изображение, используя полный редактор сайта (FSE).

Полный редактор сайта позволяет редактировать дизайн сайта с помощью блоков. Это точно так же, как редактирование записи или страницы блога с помощью редактора блоков WordPress.

В этом руководстве мы будем использовать стандартную тему Twenty Twenty-Two. Чтобы запустить полный редактор сайта, просто перейдите по ссылке Внешний вид » Редактор из вашей приборной панели WordPress.

Как только вы окажетесь в полном редакторе сайта, вам нужно будет добавить блок Cover в ваш шаблон, чтобы загрузить фоновое изображение.

Просто нажмите на знак «+» вверху и добавьте блок «Обложка».

Нажмите кнопку ‘Upload’ или ‘Media Library’ в блоке Cover, чтобы добавить фоновое изображение в блок.

Откроется всплывающее окно загрузчика медиафайлов WordPress.

Вы можете выбрать изображение, которое хотите использовать в качестве фона сайта.

Когда вы выбрали изображение, просто нажмите на кнопку «Выбрать».

Как только изображение будет добавлено в блок «Обложка», следующим шагом будет установка его в качестве фона страницы.

Для этого нажмите на значок List View вверху (значок с 3 черточками), чтобы открыть контурный вид элементов темы, таких как верхний и нижний колонтитулы сайта.

После этого просто перетащите все элементы шаблона под блок Cover в представлении списка.

Когда все будет готово, изображение блока «Обложка» будет отображаться в качестве фона сайта.

После этого вы можете настроить фоновое изображение, щелкнув в блоке «Обложка» и выбрав значок шестеренки в правом верхнем углу экрана. Откроется панель настроек блока.

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

Когда вы закончите, не забудьте нажать кнопку «Сохранить».

Вот и все! Вы успешно добавили фоновое изображение с помощью полного редактора сайта.

Способ 3. Добавление фонового изображения с помощью конструктора тем WordPress

Еще один способ добавить пользовательские фоновые изображения на ваш сайт — это использование конструктора тем WordPress, такого как SeedProd.

Это лучший WordPress плагин целевых страниц и конструктор сайтов. Вы получаете функциональность перетаскивания, чтобы легко настроить дизайн вашего сайта, не касаясь ни одной строчки кода.

В этом учебнике мы будем использовать версию SeedProd Pro, поскольку она включает в себя конструктор тем. Существует также версия SeedProd Lite, которую вы можете попробовать бесплатно.

Сначала вам нужно будет установить и активировать плагин SeedProd. Если вам нужна помощь, ознакомьтесь с нашим руководством по установке плагина WordPress.

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

Далее вам нужно перейти на сайт SeedProd » Конструктор тем в вашей админ-панели WordPress.

Далее нажмите кнопку «Темы» в верхней части сайта.

SeedProd теперь будет предлагать несколько шаблонов тем на выбор.

Вы можете навести курсор на любой шаблон, который хотели бы использовать, и нажать на него. Для этого урока мы используем шаблон темы ‘Starter’.

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

Чтобы добавить фоновое изображение, которое будет отображаться на всем сайте и на всех шаблонах темы, перейдите вперед и нажмите опцию «Редактировать дизайн» в разделе «Глобальный CSS».

На следующем экране вы увидите глобальные настройки CSS, которые вы можете изменить.

Просто нажмите на опцию «Фон».

После этого вы увидите опции фонового изображения.

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

Как только вы добавите фоновое изображение, конструктор SeedProd отобразит предварительный просмотр в реальном времени.

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

Кроме того, вы можете редактировать, насколько темным должно быть фоновое изображение, перемещая ползунок ‘Dim Background’. Чем выше оценка, тем темнее будет изображение.

Когда вы закончите редактировать фоновое изображение, просто нажмите кнопку «Сохранить» вверху и закройте Глобальные настройки CSS.

Если вы хотите добавить пользовательское фоновое изображение для различных частей вашего сайта, то вы можете отредактировать эти отдельные шаблоны тем в SeedProd.

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

Метод 4. Добавление пользовательского фонового изображения в WordPress с помощью плагина

Использование плагина WordPress для добавления фонового изображения гораздо более гибкое, чем встроенные опции WordPress.

Для начала вам нужно установить и активировать плагин Full Screen Background Pro. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.

Этот плагин позволит вам установить другой фон для любого поста, страницы, категории и т.д. Кроме того, они автоматически становятся полноэкранными и подстраиваются под мобильные устройства.

После активации вам необходимо зайти на сайт Внешний вид » Fullscreen BG Image для настройки параметров плагина.

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

Далее вам нужно нажать на кнопку ‘Save Options’, чтобы активировать ваш ключ. Теперь вы готовы начать добавлять фоновые изображения на свой сайт WordPress.

Нажмите кнопку «Добавить новое изображение» на странице настроек плагина.

Теперь вы должны увидеть экран загрузки фонового изображения.

Нажмите на кнопку ‘Choose Image’, чтобы загрузить или выбрать изображение. Как только вы выберете изображение, вы сможете увидеть его предварительный просмотр в реальном времени на вашем экране.

Далее, вам нужно указать имя для этого изображения. Это название предназначено только для вас, поэтому вы можете вписать сюда все, что угодно. Наконец, вам нужно выбрать, где вы хотите использовать это изображение в качестве фона страницы.

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

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

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

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

Время, которое вы вводите здесь, указывается в миллисекундах. 1 секунда — это 1000 миллисекунд. Если вы хотите, чтобы фоновое изображение исчезало через 20 секунд, введите 20000.

Не забудьте нажать на кнопку «Сохранить параметры», чтобы сохранить изменения.

Фоновые изображения для постов, страниц и категорий

Full Screen Background Pro также позволяет устанавливать фоновые изображения для отдельных постов, страниц, категорий, тегов и т.д.

Просто отредактируйте пост/страницу, где вы хотите отобразить другое фоновое изображение. На экране редактирования поста вы заметите новое поле «Фоновое изображение на весь экран» под редактором поста.

Чтобы использовать фоновое изображение для категорий, постов и страниц, вам нужно посетить страницу Внешний вид » Полноэкранное фоновое изображение страницу, а затем нажмите на кнопку «Добавить новое изображение».

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

Допустим, вы хотите показывать фоновое изображение для страниц категорий. Для этого просто выберите ‘Category’ из выпадающего меню.

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

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

Не забудьте сохранить изображение, чтобы сохранить настройки.

Теперь вы успешно добавили фоновое изображение для определенных постов, страниц и категорий.

Метод 5. Добавление фоновых изображений с помощью CSS Hero

CSS Hero — это плагин WordPress, который позволяет вносить любые изменения в вашу тему, не касаясь ни одной строчки кода.

Вы можете быстро добавить фоновые изображения в несколько простых шагов. Сначала вам нужно установить и активировать CSS Hero. Для получения более подробной информации, пожалуйста, ознакомьтесь с нашим руководством по установке плагина WordPress.

Как только вы это сделаете, можно приступать к настройке вашего сайта. Теперь откройте свою домашнюю страницу в браузере. Вы увидите ссылку «Настроить с помощью CSS Hero» в панели администратора.

После того, как вы нажмете на ссылку, откроются опции CSS Hero. Наведите курсор мыши на область, в которую вы хотите добавить изображение.

Когда вы щелкните по выделенной области, вы увидите опцию ‘Background’ в левой боковой панели.

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

Затем нажмите на «Изображение.’ Теперь вы можете выбрать изображение из Unsplash или загрузить свое собственное для создания фона.

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

Нажмите «Сохранить и опубликовать» внизу, чтобы сохранить фоновое изображение для вашего сайта.

Метод 6. Добавление пользовательских фоновых изображений в любое место WordPress с помощью кода CSS

По умолчанию WordPress добавляет несколько классов CSS к различным элементам HTML на вашем сайте WordPress. Вы можете легко добавить пользовательские фоновые изображения к отдельным постам, категориям, авторам и другим страницам, используя эти сгенерированные WordPress классы CSS.

Например, если на вашем сайте есть категория под названием TV, то WordPress автоматически добавит эти CSS-классы в тег body, когда кто-то просматривает страницу категории TV.

Вы можете использовать инструмент inspect, чтобы увидеть, какие именно классы CSS добавляются WordPress в тег body.

Вы можете использовать CSS-класс category-tv или category-4, чтобы по-разному стилизовать только эту страницу категории.

Давайте добавим пользовательское фоновое изображение на страницу архива категории. Вам нужно будет добавить этот пользовательский CSS в вашу тему.

тело.категория-тв < background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; >

Не забудьте заменить URL-адрес фонового изображения и класс категории на URL-адреса с вашего собственного сайта.

Вы также можете добавить пользовательские фоны к отдельным постам и страницам. WordPress добавляет CSS класс с идентификатором поста или страницы в теге body. Вы можете использовать тот же код CSS, просто замените .category-tv с пост-специфическим классом CSS.

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

Источник: www.wpbeginner.com