Ви вже навчилися додавати фонові зображення WordPress на ваш сайт, сторінку та запис? Якщо ні, перейдіть спочатку на цю статтю. А нижче ми розглянемо три ситуації, куди ще можна і потрібно додавати фонові зображення.
Як додати фонове зображення до окремого блоку вмісту
Окремі блоки вмісту в редакторі блоків WordPress Gutenberg дозволяють використовувати широкий спектр параметрів відображення вмісту, включаючи текстові поля, зображення та галереї.
Вони розбивають контент на окремі розділи. Можна додати колір фону або зображення лише для цього блоку.
Припустимо, що ви пишете статтю у блозі про стан роздрібної торгівлі одягом. Ви хочете закінчити або розпочати публікацію із заклику до дії, щоб люди підписалися на ваш наступний веб-семінар. Було б розумно виділити цей розділ за допомогою кольору фону або зображення.
На жаль, редактор блоків WordPress не пропонує всеосяжне налаштування, в якому ви можете додати фон до будь-якого блоку. Однак для деяких блоків можна використовувати кольорове тло.
Також є один блок, званий блоком обкладинки, який найближче до того, щоб додати фонове зображення для одного блоку в публікації або на сторінці. Обкладинка дозволяє накладати текст та деякі мультимедійні елементи, що робить її придатною для нашої кінцевої мети.
Нижче наведено методи, які можна використовувати для встановлення зображення або колірного фону окремого блоку WordPress.
Встановлення колірного фону для одного блоку
Найпростіший спосіб додати жвавості окремому блоку – це додати кольорове тло. Це не так красиво, як фон зображення, але кольоровий фон насправді є єдиним типом фону в редакторі WordPress блоків, доступним для стандартних блоків.
Примітка: деякі блоки взагалі не мають налаштувань фону. У цьому випадку найкраще використовувати блок Cover (Обкладинка) та накласти на нього інші блоки, як описано далі у цій статті.
Наприклад, блок «Абзац» має налаштування для активації кольорового тла. Щоб його активувати, виберіть блок, а потім знайдіть Налаштування кольору на вкладці Блок з правої сторони.
Перейдіть до області "Колір фону" і виберіть колір зі списку доступних параметрів. Можна вибрати посилання «Користувацький колір», щоб вставити власний колірний код або вибрати унікальний колір.
Фон блоку Абзац стає іншого кольору – синій.
Додавання кольорового фону до будь-якого блоку WordPress
Як згадувалося раніше, не всі блоки WordPress мають вбудовану фонову функцію. Що робити, якщо ви хочете створити галерею або інший блоковий елемент, в якому немає фону?
Найшвидше рішення – використовувати функцію групування блоків WordPress.
Для цього оберіть кілька блоків, які вже є у вашому контенті. У цьому прикладі виберемо блок абзацу, і блок галереї.
Клацніть значок складеного квадрата в меню.
Виберіть опцію Group у розкривному меню.
При цьому всі блоки, які ви вибрали в даний момент, об'єднуються в групу, що дозволяє переміщати або редагувати всі разом, а не окремі блоки.
Ця функція встановлює групу як окремий блок. Тепер перейдіть на вкладку "Параметри блоку" у правій частині сторінки, де знаходяться налаштування.
Знайдіть вкладку «Параметри кольору» та натисніть на неї.
Подібно до стандартного блоку абзацу, блок Group також має функцію кольору фону.
Виберіть колір, який вам найбільше подобається у цій ситуації. Ви побачите, що у групі змінилося кольорове тло.
Що добре в блоці Group, так це те, що він бере інший блок, який не має функції фону (наприклад, блок Gallery), і дозволяє активувати фон для нього.
Додавання фону зображення до одного блоку WordPress
Блоки WordPress є як у сторінках, і у записах. Отже, ми можемо реалізувати цю тактику у кожному з них. Ви можете вставити практично будь-який контент над тлом згрупованого блоку або лише один блок WordPress.
Для початку натисніть кнопку «Додати блок» або піктограму «+» та знайдіть блок «Обкладинка».
Виберіть цей блок, щоб вставити його на свій пост або сторінку.
Потім натисніть кнопку «Завантажити» або «Вибрати медіа», що дозволить вам підібрати зображення, які можна використовувати як тло.
Виберіть бажане зображення та натисніть кнопку «Вибрати».
Тепер ви можете бачити це зображення як фон для обкладинки (Cover).
Натисніть цей блок, щоб наповнити його вмістом, оскільки основна функція – накладання тексту.
Що добре в блоці Cover, це те, що він пропонує кілька параметрів форматування, дозволяючи перейти від заголовка до формату абзацу за секунди.
Щоб додати інші блоки поверх цього фону, натисніть кнопку «+» усередині самого блоку Обкладинка. Можливо, вам доведеться натиснути Enter один раз, щоб відкрити кнопку.
Подібно додавання блоку контенту до звичайної статті, блок Cover дозволяє прокручувати всі потенційні блоки контенту в WordPress.
Це означає, що ви можете розмістити зображення, галерею, стовпці чи будь-який тип блоку WordPress у Cover. Це зробить його ідеальним рішенням для зображення фону в окремому блоці.
У цьому прикладі ми вставили зображення та трохи відформатували його, щоб воно добре виглядало у блоці Cover.
Кожен блок, який ви поміщаєте перед фоном, має власні налаштування на правій вкладці блоку. Тому подумайте про їхнє редагування, коли перетягуєте їх у блок обкладинки.
У якийсь момент ви можете захотіти відредагувати або налаштувати фонове зображення. У такому випадку виберіть блок «Обкладинка», а потім перейдіть на вкладку «Параметри блоку» у правій частині сторінки.
Це відкриває безліч налаштувань для фонового зображення, включаючи:
- Фіксовані фону.
- Фон, що повторюється.
- Засіб вибору точки фокусування.
- Розміри.
- Оверлей.
- Непрозорість.
- Передовий.
Одна з найважливіших настройок, яку слід враховувати, знаходиться в нижній частині панелі налаштувань блоку. Прокрутіть вниз, щоб знайти розділ Накладення. Відкрийте розділ, тут з'явиться список накладень кольору та параметрів, що дозволяють зробити ці кольори суцільними або градієнтними.
Це відмінний варіант для невеликої зміни кольору фону відповідно до вашого бренду або виділення вмісту переднього плану. Ви також можете налаштувати Непрозорість, щоб накладання кольору не перекривало тло.
Як альтернативу розгляньте плагін Stackable Page Builder Gutenberg Blocks. Він пропонує передові інструменти для фонів в окремих блоках.
Дивіться також:
Створення інтерактивних зображень у WordPress за допомогою WP Зверніть увагу
Як розмістити фонове зображення за заголовком WordPress
Досі ми говорили про те, як додати фонове зображення на весь сайт WordPress, а також про методи створення фону у певних областях, таких як блоки, записи та сторінки WordPress. Але як щодо області, в якій знаходиться ваше меню та логотип?
Іноді фон за назвою – це все, що вам потрібно.
Встановлення фонового зображення для заголовка додає нову атмосферу вашому сайту, особливо якщо зараз свято або якийсь великий розпродаж, який хочеться виділити.
Для початку перейдіть до Зовнішній вигляд > Заголовок на панелі інструментів WordPress.
Примітка. Ви також можете знайти налаштування заголовка, перейшовши до розділу Зовнішній вигляд > Налаштування > Заголовок.
Тепер ви повинні побачити попередній перегляд вашої домашньої сторінки у правій частині екрана, а також налаштування заголовка зліва від нього.
Модуль заголовка пояснює бажані розміри будь-якого фонового зображення заголовка. Тому ви можете обрізати своє зображення перед завантаженням або зачекати, поки воно не з'явиться на панелі інструментів WordPress.
Під заголовком "Поточний заголовок" натисніть кнопку "Додати нове зображення".
Заголовки складні тим, що хочеться, щоб усі посилання та текстові елементи (не кажучи вже про логотип) виглядали поверх фонового зображення кришталево чітко.
Тому ми рекомендуємо протестувати фонові зображення та розглянути зображення з більш однотонними кольорами та візерунками. Вони не ускладнять перегляд ваших пунктів меню та логотипу.
Виберіть ідеальне зображення, а потім натисніть кнопку «Вибрати та кадрувати».
Вбудований інструмент кадрування автоматично забезпечує правильні розміри фонового зображення заголовка. Це має прискорити процес у порівнянні з попереднім редагуванням фотографії в чомусь на зразок Photoshop.
Перемістіть рамку обрізки замість найкращого для вашого фонового зображення. Перетягніть один із кутів, якщо потрібно ще більше урізати зображення.
Коли ви матимете ідеальний розмір, натисніть кнопку «Обрізати зображення».
Фонове зображення заголовка негайно активується у попередньому перегляді налаштування WordPress.
Ви помітите, що фонове зображення заголовка не перетікає до іншого вмісту сторінки. Натомість він залишається в заголовку, за всім, що знаходиться там в даний момент, наприклад, логотипом, слоганом, меню та панеллю пошуку.
Інший варіант для фону вашого заголовка - завантажити кілька зображень і змусити їх довільно обертатися, додаючи трохи яскравості та несподіванки вашому сайту щоразу, коли користувач потрапляє на головну сторінку.
Щоб це працювало, спочатку завантажте кілька зображень у полі налаштувань заголовка. Натисніть кнопку «Додати нове зображення», щоб завершити цей процес.
Якщо у вас є більше одного зображення, натисніть кнопку «Зробити випадковий вибір завантажених заголовків». Так активується функція, яка щоразу показуватиме різне тло заголовків.
Ви можете помітити, що додавання фонового зображення до заголовка ускладнює перегляд деяких елементів заголовка, наприклад меню або кошика покупок.
У такому випадку ми рекомендуємо утриматися від негайного видалення заголовка. Натомість, перейдіть на колір тексту та посилання кольору полів, щоб побачити, яке коригування виправить це.
Параметр «Колір тексту» керує будь-яким текстом у заголовку, який не має гіперпосилання на іншу внутрішню або зовнішню сторінку. Часто це означає лише слоган, якщо він у вас є, але іноді у вас можуть бути інші елементи, такі як загальна сума кошика покупок або піктограми соціальних мереж, які також змінюють колір разом із текстом.
Інше поле призначене для кольору посилання. Швидше за все, ви побачите більше змін під час налаштування цього кольору, оскільки він включає всі елементи меню, пов'язані з іншими сторінками.
Ось приклад того, що відбувається, коли ви вибираєте новий колір як кольору тексту, так і кольору посилання. Ви можете бачити, що слоган і назва сайту змінилися, меню змінилося на білий, як і більшість інших елементів заголовка, таких як кошик покупок значок.
Для тих, хто не зацікавлений у використанні фонового зображення для заголовка, у вас є можливість використовувати суцільний колір фону.
Для цього знайдіть поле "Колір фону" в тій же області "Налаштування заголовка".
Натисніть кнопку «Вибрати колір» та виберіть колір на панелі кольору, щоб побачити результати попереднього перегляду. Ви також можете змінити колір тексту під час використання кольору фону.
Після тестування того, що найкраще підходить для вашого заголовка та вибору ідеального фонового зображення для цього заголовка, натисніть кнопку «Опублікувати».
І якщо у вас виникли проблеми з відображенням змін у зовнішньому інтерфейсі, подумайте про очищення WordPress.
Як додати фонове зображення до категорії WordPress
Сторінка архіву категорії WordPress збирає всі записи, перелічені у певній категорії. Наприклад, на багатьох веб-сайтах є категорії для типів користувача записів, таких як Товари. За замовчуванням на всіх веб-сайтах WordPress є категорії для записів. Ті, кого ви не відносите до категорії, позначаються без категорії.
Оскільки сторінки архіву категорій поєднують схожий контент, має сенс включити відповідне фонове зображення на ці сторінки, щоб краще продемонструвати категорію. Наприклад, у вас може бути технічне тло для категорії веб-дизайну або фон з морськими черепашками або пляжним малюнком для категорії подорожей.
Користувальницький метод CSS (описаний нижче) – найдешевший варіант. Однак ви можете вивчити різні конструктори сторінок та плагіни, які дозволяють використовувати фон на сторінках категорій.
Щоб виконати це завдання за допомогою CSS, відкрийте панель керування WordPress та виберіть Зовнішній вигляд > Налаштувати.
Виберіть вкладку Додатковий CSS. Відкриється модуль, що дає змогу вводити власний CSS.
Відкрийте одну зі сторінок архіву на своєму сайті WordPress. Як правило, ці сторінки мають URL-адресу, як цю: http://yourwebsitedomain.com/category/travel. Вам потрібно змінити частину travel на будь-яку категорію, яка є на вашому сайті, та переключити частину yourwebsitedoman на фактичне доменне ім'я.
Клацніть правою кнопкою миші у будь-якому місці сторінки категорії та виберіть «Переглянути код». У браузері з'явиться код цієї сторінки.
Виконайте пошук за запитом "body" або "class", щоб знайти клас CSS для сторінок категорій.
У прикладі клас CSS - "категорія-подорожі". Збережіть CSS тег на майбутнє.
Після цього поверніться до розділу Додатковий CSS у налаштуванні WordPress.
Вставте наступний код у поле, замінивши category-travelклас своїм власним та помістивши URL-адресу реального зображення у місце з написом .
body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Натисніть кнопку «Опублікувати», щоб зміни збереглися.
Нарешті поверніться на сторінку архіву категорії у зовнішньому інтерфейсі вашого сайту WordPress. Тепер він повинен відображати ту саму сторінку, що й раніше, але з тлом, вказаним у коді CSS. Якщо у вас виникли проблеми з форматуванням фонового зображення WordPress, поверніться на панель Additional CSS, щоб налаштувати такі елементи, як положення фону, розмір та функція повтору.
Сподіваємося, що рекомендації, представлені в цій статті, допоможуть вам прикрасити ваш сайт фоновими зображеннями в тих місцях, де ваша тема не надає цієї можливості.
Джерело: kinsta.com
Коментарі до запису: 0