Як встановити фон зображення в WordPress

Існує багато способів додавання фонових зображень у WordPress. Від базових до найсучасніших зі зміною коду теми. Однак ми раді представити вам зручний інструмент, який ідеально підійде для адміністраторів сайтів без знань з програмування та дизайну. Плагін Citadela Pro постачається з безліччю функцій та налаштувань для кастомізації сайту.

Спробуйте потужні блоки, налаштування та функції плагіна Citadela Pro безкоштовно. Ми пропонуємо 7-денну пробну версію з усіма преміум-функціями. Ви можете дослідити ідеальний інструмент, який дозволяє додавати фонові зображення до сторінок WordPress, дописів і кастомних типів дописів.

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

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

Як додати фонове зображення в WordPress за допомогою блоку Гутенберга

Фонове зображення WordPress через кластерний блок

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

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

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

Кластер не розтягнеться на всю ширину, якщо:

• У вас активна бічна панель
• Якщо ви використовуєте стовпці, які обмежують простір для кластера

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

У цій статті ми покажемо вам:

• Як додати блок "Кластер" до редактора WordPress
• Групування всередині Кластера
• Основні налаштування на панелі інструментів
• Колір заголовка та роздільника
• Як додати фонове зображення під згрупованими блоками
• Що таке накладання фону
• У чому різниця між груповим блоком і блоком Ait Cluster

Як додати кластерний блок

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

Кластерний блок можна додавати як до постів, так і до сторінок. Просто натисніть на знак "+" у верхній панелі або будь-де на робочому столі редактора. Після цього просто знайдіть кластерний блок.

Другий спосіб додати кластерний блок - набрати "/" та ім'я блоку, після чого ввести його назву. Після цього кластерний блок готовий до використання.

Групування блоків за допомогою Cluster

Основна функція блоку Cluster полягає в тому, щоб об'єднати кілька блоків в один. Давайте подивимося, як це працює. Якщо ви вставите блок Cluster на свою сторінку, ви одразу побачите заповнювач "Вставте сюди більше блоків". Якщо ви натиснете на нього, ви отримаєте список усіх доступних блоків. Ви також можете знайти потрібний блок за допомогою пошукового рядка у верхній частині списку.

Усі вкладені блоки матимуть усі опції та налаштування за замовчуванням. Наприклад, якщо ви вставите блок "Зображення", у вас буде можливість завантажити зображення або вибрати його з медіатеки.

За допомогою блоку Cluster ви можете, наприклад, створити привабливий розділ на вашому сайті, щоб представити ваші останні роботи. Додайте зображення з вашого портфоліо, а потім встановіть фонове зображення під ним. Ви щойно створили гарне посилання на своє портфоліо.

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

Кілька блоків в одному

Якщо ви хочете додати кілька вкладених блоків до кластера, ви можете використати блок Стовпці. За допомогою блоку Стовпці ви можете додати кілька блоків поруч. Кожна колонка може мати різний тип вмісту, наприклад, зображення, абзац, список або кнопку.

Типовим прикладом кількох колонок у поєднанні з кластерним блоком є односторінковий веб-сайт.

Основні налаштування на панелі інструментів: Параметри вирівнювання вмісту

За замовчуванням ширина блоку кластера дорівнює розміру контенту. Ви можете змінити цю поведінку на панелі інструментів. Доступні наступні опції:

• Розмір контенту - за замовчуванням, кластерний блок має таку саму ширину, як і контент.
• Широкий розмір - вміст всередині кластера ширший за ширину контенту.
• Розмір на всю ширину - у цьому випадку ширина кластера вимірюється від краю до краю вікна браузера.

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

Налаштування кольору заголовків і роздільників

Зміна кольору заголовка

Починаючи з WP 5.3 ви можете змінювати колір заголовка за допомогою блоку "Заголовок". Це дуже корисна функція - особливо якщо у вас темний макет і колірна схема, краще змінити колір тексту за замовчуванням (чорний) на світліший.

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

Новий колір для роздільника, що використовується на вашому сайті

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

• Окремі специфічні блоки
• Розбийте весь текст на менші частини
• Виділіть важливі частини
• Забезпечте кращу читабельність контенту
• Спростіть навігацію на своєму сайті

Крім того, в оновленому WordPress ви можете змінювати колір лінії роздільника. Кольоровий роздільник ідеально підходить для завершення кольорової гами вашого сайту.

Як додати фонове зображення під згрупованими блоками

Справжня сила блоку Cluster полягає в тому, що ви можете додати фонове зображення і встановити колір фону під згрупованими блоками. Все можна легко налаштувати в інспекторі WordPress. Давайте подивимося, як це зробити.

1. Натисніть на фонове зображення та активуйте функцію "Показати фонове зображення".
2. Натисніть на "Вибрати зображення". Відкриється медіатека. Ви можете вибрати існуюче зображення або завантажити нове зображення до бібліотеки.
3. Фонове зображення також можна зробити фіксованим. Це означає, що якщо ви прокручуєте сторінку, фон не буде рухатися разом з контентом, а його положення буде фіксованим.
4. Ви також можете вибрати, яку частину фонового зображення буде показано за допомогою "Focal Point Picker". Також можна вибрати частину зображення за допомогою відсотків.

Накладання фону

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

В ядрі доступний новий блок "Група

У чому різниця між блоком Group і блоком AitThemes Cluster?

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

Редагування фонових зображень - простіше простого в нашому блоці "Кластер".

Ви можете завантажити в WordPress фонове зображення, встановити для нього колір фону, а також накласти колір фону (і налаштувати непрозорість накладання!). Це займе всього кілька хвилин.