Как правильно добавить фоновые изображения WordPress на свой сайт?

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

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

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

Эта статья покажет вам, как сделать все вышеперечисленное, чтобы ваш сайт выделялся привлекательным внешним видом.

Что такое фоновые изображения WordPress ?

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

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

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

Но почему вы хотите изменить фон? Что ж, вариант по умолчанию может вам не понравиться или не походить на ваш бренд. Или, может быть, это вообще не изображение, а просто сплошной цвет. Или, возможно, вам сначала нравился существующий, но теперь он вам надоел.

Какой бы ни была причина, давайте поэкспериментируем с ее изменением.

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

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

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

1. На панели управления WordPress выберите « Внешний вид» > «Обои/Фон » или « Внешний вид» > «Настроить» > «Обои» .

2. Нажмите кнопку « Выбрать изображение », чтобы открыть медиатеку.

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

4. Нажмите кнопку « Выбрать изображение », когда будете довольны.
5. Если вам нравится то, что вы видите в предварительном просмотре, нажмите кнопку « Опубликовать ». И это все!

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

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

Используйте конструктор страниц Elementor, чтобы добавить фоновые изображения WordPress к сообщению/странице

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

1. Для начала вам необходимо установить и активировать плагин Elementor.
2. Сначала перейдите к посту или странице по вашему выбору. В редакторе страниц WordPress по умолчанию нажмите кнопку « Редактировать с помощью Elementor ».

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

3. Нажмите на маленький значок настроек в левом нижнем углу конструктора страниц.

4. Затем выберите вкладку Стиль .

5. После этого щелкните значок кисти, чтобы добавить фоновое изображение WordPress .

6. Затем нажмите кнопку « Выбрать изображение », чтобы открыть медиатеку.

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

8. Затем нажмите кнопку «Вставить носитель» в правом нижнем углу.

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

9. Не забудьте нажать кнопку «ОБНОВИТЬ», чтобы сохранить все изменения и обновить запись/страницу.

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

Используйте плагин для добавления фоновых изображений WordPress

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

Добавьте фоновое изображение WordPress для всего сайта

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

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

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

1. Установите и активируйте плагин Simple Screen Background Image.
2. На панели инструментов WordPress выберите « Внешний вид» > «Полноэкранное изображение BG» .

3. Нажмите кнопку « Выбрать изображение », чтобы открыть медиатеку.

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

5. Нажмите на кнопку « Выбрать изображение », когда будете довольны.
6. Наконец, нажмите кнопку «Сохранить параметры» и проверьте свой веб-сайт. Теперь изображение должно отображаться на сайте как полноэкранное фоновое изображение WordPress.

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

Добавление фоновых изображений WordPress на определенную страницу /публикацию

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

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

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

Поскольку это работает с блоками Гутенберга, при необходимости обязательно переключитесь из режима классического редактора.

1. Установите и активируйте плагин.
2. Откройте существующий пост/страницу или создайте новый.
3. Нажмите кнопку плюс в левом верхнем углу. Затем прокрутите вниз до раздела «Дизайн» и выберите блок AWB. Рядом с блоком появится верхняя панель значков и столбец бокового меню.

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

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

6. На верхней панели значков щелкните значок формы гамбургера. Затем выберите параметр « Полная ширина », чтобы покрыть всю ширину. Это совершенно необязательно.

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

Теперь осталось только добавить контент внутрь блока. Если вы редактируете существующий пост/страницу, просто вырежьте и вставьте содержимое в блок.

Не забудьте сохранить пост/страницу, когда будете довольны результатом.

Используйте CSS для добавления фоновых изображений WordPress

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

1. На панели управления WordPress выберите «Внешний вид» > « Настроить », чтобы получить доступ к настройщику WordPress.

2. Прокрутите вниз и щелкните раздел « Дополнительные CSS ».

3. Скопируйте и вставьте соответствующий код ниже в поле CSS:

Добавьте фоновое изображение WordPress для всего сайта

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Обязательно замените текст-заполнитель «imageURL» фактическим URL-адресом файла изображения. Чтобы увидеть это, выберите нужное изображение в библиотеке мультимедиа, чтобы просмотреть информацию об изображении.

И если вы знаете CSS, не стесняйтесь настраивать его по своему усмотрению.

Добавление фоновых изображений WordPress на страницу определенной категории

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Обязательно замените текст-заполнитель «imageURL» фактическим URL-адресом файла изображения, а «categoryid» — правильным названием категории.

Чтобы узнать идентификатор категории, следуйте инструкциям ниже:

1. На панели управления WordPress перейдите в « Записи» > «Категории» .

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

Лучшие практики использования фоновых изображений в WordPress

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

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

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

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

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

Придерживайтесь высококачественных изображений

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

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

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

Оптимизация фоновых изображений

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

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

Здесь у вас есть два варианта:

• Оптимизируйте фоновые изображения (и все фотографии вашего сайта) перед их загрузкой на сервер. Вы можете выполнить этот ручной процесс с помощью таких инструментов, как Photoshop, GIMP и Pixlr.
• Автоматизируйте процесс оптимизации, установив плагин WordPress, который изменяет размер и сжимает изображения при загрузке.

Последние мысли

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

Кроме того, это может помочь сохранить актуальность вашего присутствия в Интернете. Поэтому вашим посетителям не надоест видеть одни и те же фотографии снова и снова.

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

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

Теперь приступайте к созданию фона вашего веб-сайта, чтобы привлечь посетителей визуально.