Как в WordPress добавить фоновое изображение в блок, за заголовок и в категорию

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

Фоновые изображения WordPress

Как добавить фоновое изображение в отдельный блок содержимого

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

Они разбивают ваш контент на отдельные разделы. Вы можете добавить цвет фона или изображение только для этого блока.

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

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

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

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

Установка цветового фона для одного блока

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

Примечание: некоторые блоки вообще не имеют настроек фона. В этом случае лучше всего использовать блок Cover (Обложка) и наложить на него другие блоки, как описано далее в этой статье.

Например, блок «Абзац» имеет настройку для активации цветного фона. Чтобы его активировать, выберите блок, затем найдите Настройки цвета на вкладке Блок с правой стороны.

Настройки цвета

Перейдите в область «Цвет фона» и выберите цвет из списка доступных параметров. Можно выбрать ссылку «Пользовательский цвет», чтобы вставить свой собственный цветовой код или выбрать уникальный цвет.

Фон блока Абзац становится другого цвета – в данном случае синим.

Фон блока Абзац

Добавление цветного фона в любой блок WordPress

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

Самое быстрое решение – использовать функцию группировки блоков WordPress.

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

Щелкните значок сложенного квадрата в появившемся меню.

Значок сложенного квадрата

Выберите опцию Group в раскрывающемся меню.

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

Выбранные блоки

Эта функция устанавливает группу как отдельный блок. Теперь перейдите на вкладку «Параметры блока» в правой части страницы, где находятся настройки.

Найдите вкладку «Параметры цвета» и нажмите на нее.

Параметры цвета

Подобно стандартному блоку абзаца, блок Group также имеет функцию цвета фона.

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

Что хорошо в блоке Group, так это то, что он берет другой блок, у которого нет функции фона (например, блок Gallery), и позволяет активировать фон для него.

Блок Group

Добавление фона изображения в один блок WordPress

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

Для начала нажмите кнопку «Добавить блок» или значок «+» и найдите блок «Обложка».

Выберите этот блок, чтобы вставить его в свой пост или страницу.

Добавление фона изображения в один блок WordPress

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

Выбрать медиа

Выберите желаемое изображение и нажмите кнопку «Выбрать».

Кнопка Выбрать

Теперь вы можете видеть это изображение как фон для блока Обложка (Cover).

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

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

Блок Cover

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

Кнопка плюс

Подобно добавлению блока контента в обычную статью, блок Cover позволяет прокручивать все потенциальные блоки контента в WordPress.

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

Изображение фона

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

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

Блок обложки

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

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

  • Фиксированный фон.
  • Повторяющийся фон.
  • Средство выбора точки фокусировки.
  • Размеры.
  • Оверлей.
  • Непрозрачность.
  • Передовой.

Фиксированный фон

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

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

Непрозрачность

В качестве альтернативы рассмотрите плагин Stackable Page Builder Gutenberg Blocks. Он предлагает продвинутые инструменты для фонов в отдельных блоках.

Смотрите также:

Создание интерактивных изображений в WordPress с помощью WP Draw Attention

Как разместить фоновое изображение за заголовком WordPress

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

Иногда фон за заголовком – это все, что вам нужно.

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

Для начала перейдите во Внешний вид > Заголовок на панели инструментов WordPress.

Примечание. Вы также можете найти настройки заголовка, перейдя в раздел Внешний вид > Настройка > Заголовок.

Установка фонового изображения для заголовка

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

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

Под заголовком «Текущий заголовок» нажмите кнопку «Добавить новое изображение».

Текущий заголовок

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

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

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

Выбрать и кадрировать

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

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

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

Обрезать изображение

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

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

Фоновое изображение заголовка

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

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

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

Произвести случайный выбор загруженных заголовков

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

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

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

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

Как в WordPress добавить фоновое изображение в блок, за заголовок и в категорию

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

Новый цвет как для цвета текста

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

Для этого найдите поле «Цвет фона» в той же области «Настройки заголовка».

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

Цвет фона

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

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

Кеш WordPress

Как добавить фоновое изображение в категорию WordPress

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

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

Пользовательский метод CSS (описанный ниже) – самый дешевый вариант. Однако вы можете изучить различные конструкторы страниц и плагины, позволяющие использовать фон на страницах категорий.

Чтобы выполнить эту задачу с помощью CSS, откройте панель управления WordPress и выберите Внешний вид > Настроить.

Выберите вкладку Additional CSS. Откроется модуль, позволяющий вводить собственный CSS.

Собственный CSS

Откройте одну из страниц архива категории на своем сайте WordPress. Как правило, эти страницы имеют URL – адрес, как этот: http://yourwebsitedomain.com/category/travel. Вам нужно изменить часть travel на любую категорию, которая есть на вашем сайте, и переключить часть yourwebsitedoman на ваше фактическое доменное имя.

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

Просмотреть код

Выполните поиск по запросу «body» или «class», чтобы найти класс CSS для страниц категорий.

В примере класс CSS – «категория-путешествия». Сохраните тег CSS на будущее.

Сохраните тег CSS на будущее

После этого вернитесь в раздел Additional CSS в настройщике WordPress.

Вставьте следующий код в это поле, заменив category-travelкласс своим собственным и поместив URL-адрес реального изображения в место с надписью http://YOURIMAGEURL.jpeg.

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

URL-адрес реального изображения

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

Кнопка Опубликовать

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

Положение фона

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

Алексей Шевченко
Алексей Шевченко
редактор wpcafe
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Источник: hostenko.com/wpcafe

%d такие блоггеры, как: