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

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

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

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

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

Как добавить фоновое изображение в WordPress с помощью блока Gutenberg

Фоновое изображение WordPress через блок Cluster

Представляем вам удобный блок, который мы сделали для блока WordPress Gutenberg для фонового изображения — блок Cluster. Это часть нашей собственной группы блоков. Плагин Citadela Pro имеет множество функций, которые помогут вам создать красивый веб-сайт. Все пользовательские блоки AitThemes доступны в Плагин Citadela Pro.

Пожалуйста прочти Документация по кластерному блоку для детальных настроек.

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

Кластер не растянется на полную ширину, если:

• У вас есть активная боковая панель
• Если вы используете столбцы, которые будут ограничивать пространство для кластера

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

В этой статье мы покажем вам:

• Как добавить блок Cluster в редактор WordPress
• Группировка внутри кластера
• Основные настройки на панели инструментов
• Цвет заголовка и разделителя
• Как добавить фоновое изображение под сгруппированные блоки
• Что такое наложение фона
• В чем разница между блоком Group и блоком Ait Cluster

Как добавить блок кластера

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

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

Второй вариант добавления блока кластера — ввести «/» и имя блока после этого. После этого блок кластера готов к использованию.

Группировка блоков с помощью Cluster

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

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

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

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

Несколько блоков в одном

Если вы хотите добавить несколько вложенных блоков в кластер, вы можете использовать блок столбцов. Используя блок столбцов, вы можете добавить несколько блоков рядом. Каждый столбец может иметь разный тип содержимого, например изображение, абзац, списки или кнопку.

Типичным примером нескольких столбцов в сочетании с блоком Cluster является одностраничный веб-сайт.

Основные настройки на панели инструментов: параметры выравнивания содержимого

По умолчанию ширина блока кластера равна размеру содержимого. Вы можете изменить это поведение на панели инструментов. Доступны следующие варианты:

• Размер содержимого — параметр по умолчанию, блок Cluster имеет ту же ширину, что и содержимое.
• Широкий размер — содержимое внутри кластера шире, чем ширина содержимого.
• Полная ширина — в этом случае ширина кластера — от края до края окна браузера.

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

Настройки цвета заголовка и разделителя

Изменение цвета заголовка

Начиная с WP 5.3 вы можете переключать цвет заголовка через блок «Заголовок». Это очень полезная функция — особенно если у вас темный макет и цветовая схема, лучше изменить цвет текста по умолчанию (черный) на более светлый.

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

Новый цвет разделителя на вашем сайте

Когда вы добавляете в свой WP фоновое изображение или любой другой тип контента, вам иногда может понадобиться отделить его от остальной части веб-сайта. Для этого можно использовать специальный блок Separator. Вставив Разделитель, вы можете:

• Отдельные конкретные блоки
• Разбить весь текст на более мелкие части
• Выделите важные части
• Обеспечьте лучшую читаемость контента
• Упростите навигацию по вашему сайту

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

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

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

1. Нажмите на Фоновое изображение и активируйте функцию «Показать фоновое изображение».
2. Нажмите «Выбрать изображение». Медиатека откроется. Вы можете выбрать существующее изображение или загрузить новое изображение в свою библиотеку.
3. Фоновое изображение также может быть фиксированным. Это означает, что если вы прокручиваете страницу, фон не будет двигаться вместе с содержимым, а его положение будет фиксированным.
4. Вы также можете выбрать, какая часть фонового изображения должна отображаться, используя «Выбор точки фокусировки». Также можно выбрать часть изображения в процентах.

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

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

Новый групповой блок доступен в ядре

В чем разница между блоком Group и блоком AitThemes Cluster?

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

Редактирование фонового изображения — это простая задача в нашем блоке Cluster.

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