Зміст
Ви погодитеся з нами, що жоден сайт не обходиться без хедера. Чи знаєте ви, що у вас є два різних варіанти створення хедера в WordPress? У цьому уроці ми пояснимо індивідуальні відмінності.
Справжнє зображення заголовка
Класичний хедер WordPress, як ви знаєте, використовується на всіх сторінках. Зазвичай це широке прямокутне поле від краю до краю. Всередині розміщується логотип або назва сайту, слоган і пункти меню. Ви також можете вставити туди фонове зображення, яке називається зображенням хедера. Зображення заголовка чудово привертає увагу відвідувачів і створює загальний вигляд веб-сайту. Ви самі вирішуєте, чи використовувати непомітне зображення заголовка, чи домінуюче, яке зосередить увагу відвідувачів на навігації по сайту.
Як редагувати хедер у налаштуваннях WordPress
За замовчуванням зображення хедера можна змінити через WordPress Customizer. Ви можете отримати доступ до нього як з адмінки WordPress, так і з вашого сайту:
- Безпосередньо з адмінки WP, просто перейдіть до Зовнішній вигляд -> Налаштувати
- У фронтенді, якщо ви увійшли в систему, натисніть "Налаштувати" у верхній панелі
Кастомізатор містить усі основні налаштування зовнішнього вигляду поточної активної теми. Тому, де знайти налаштування зображення заголовка, залежить від вашої активної теми. У темі Citadela ви можете додавати і редагувати зображення заголовка у пунктах Налаштування -> Зовнішній вигляд -> Заголовок Передумови.
Налаштування зображення заголовка
Незалежно від того, яке зображення заголовка ви вибрали, ви можете налаштувати його відповідно до своїх потреб. Цікавого ефекту можна досягти за допомогою функції "Повтор зображення заголовка". Ви можете налаштувати наступні параметри:
- Плитка
- Горизонтальне укладання плитки
- Плитка вертикально
- Без повтору (якщо ви не хочете повторювати зображення)
Інші налаштування в WordPress - Розмір зображення заголовка
Інший варіант редагування заголовка та налаштування зображення - це встановлення відповідного розміру. Розмір зображення заголовка має наступні три варіанти:
- Оригінал - збереже оригінальний розмір зображення
- Обкладинка - завантажене зображення буде змінено відповідно до розміру з боку в бік, зображення також може бути обрізане відповідно до розміру
- Містити - розмір зображення заголовка буде відрегульовано таким чином, щоб було видно все зображення
Ви також можете налаштувати положення зображення в заголовку і встановити фіксацію фону.
Блок обкладинки, який працює як хедер
Як ми вже згадували на початку цієї статті, є кілька способів редагування хедера в редакторі WordPress. Окрім використання Кастомізатора, ви також можете використовувати один з основних блоків WordPress, який називається Блок обкладинки. У чому ж полягає різниця?
Класичний заголовок, створений за допомогою Кастомізатора, відноситься до всього сайту, тоді як блок "Обкладинка" дозволяє вам додати зображення обкладинки, яке по суті працює як зображення заголовка, до будь-якої сторінки або публікації. Ви навіть можете використовувати його кілька разів на одній сторінці або дописі з різними налаштуваннями.
Де використовується блок обкладинки
Блок обкладинки має ширше застосування на сайті, ніж класичний заголовок сайту. Блок обкладинки додає до контенту широке зображення заголовка на всю ширину. Ви можете використовувати його для візуального розділення контенту в публікаціях блогу. Кожен розділ посту отримає власне зображення заголовка, яке може бути пов'язане з наступним контентом. Чудовою особливістю є те, що ви можете писати текст прямо всередині блоку обкладинки. Цей текст буде відображатися поверх зображення.
Заголовок домашньої сторінки
Блок обкладинки також можна використовувати замість шапки сайту, якщо ви хочете досягти оригінального вигляду. Оскільки блок обкладинки має різні варіанти вирівнювання, ви можете встановити його по ширині контенту або зробити його на всю ширину. Заголовок на всю ширину можна також використовувати як велике фонове зображення. Але не забудьте вимкнути заголовок сторінки у темі Citadela. Цей крок необхідний, якщо ви хочете використовувати блок обкладинки як шапку сайту.
Як створити заголовок за допомогою блоку обкладинки
Насамперед вам потрібно додати блок "Обкладинка". Ви можете додати його на будь-яку сторінку або пост наступним чином:
Натисніть на знак "+" у верхній панелі або на знак "+" в будь-якому місці контенту. Після цього просто знайдіть блок "Обкладинка".
Інший швидкий спосіб - додати блок за допомогою символу "/" після назви блоку.
Після додавання блоку "Обкладинка" ви отримаєте місце для завантаження зображення або відео. Ви також можете вибрати зображення з медіатеки. Вибране зображення або відео буде використано в якості заголовка.
Заголовок заголовка
Цікавою особливістю заголовка, доданого за допомогою блоку Обкладинка, є те, що ви можете написати текстовий заголовок поверх зображення. Цей заголовок можна також використовувати як заголовок розділу, наприклад, у блозі. Також можна додати туди будь-яку URL-адресу.
Вирівнювання блоку кришки
Блок обкладинки можна вирівняти за допомогою панелі інструментів блоку. Його можна вирівняти в межах області вмісту ліворуч, праворуч або по центру. Він також може бути встановлений на всю ширину або по ширині. Ці параметри повинні підтримуватися активною темою, яку ви використовуєте для створення вашого сайту.
Налаштування зображення обкладинки
Вигляд зображення обкладинки можна змінити в Інспекторі. Якщо ви встановите його як фіксований фон, зображення не прокручуватиметься разом з рештою контенту на сторінці, а залишатиметься на своєму місці весь час.
За допомогою Focal Point Picker ви можете вибрати, яка частина зображення буде відображатися в заголовку. Ви можете працювати із зображенням і далі. Наприклад, ви можете встановити колір накладання та непрозорість фону. Обидва параметри допоможуть вам додати останні штрихи до вашого заголовка. Якщо ви використовуєте блок "Обкладинка" в блозі, використовуючи правильну колірну схему і прозорість, ви можете додати бажаної атмосфери вашому посту. Будьте обережні з цими налаштуваннями, оскільки текст заголовка має бути чітко видимим.
Створення заголовка відео
Блок обкладинки також можна використовувати для відтворення відео в шапці вашого сайту. Ви можете привернути увагу відвідувачів або прорекламувати товар чи послугу. Існують такі види обкладинок кілька підтримуваних форматів відеоНайпоширеніший формат, який ви можете використовувати - .mp4.
Чудово, що ви також можете написати заголовок над відео, вирівняти його, зробити на всю ширину або встановити кольорове накладання. Налаштування блоку "Обкладинка" однакові для всіх типів медіа.
Який ваш досвід роботи з заголовками? Чи пробували ви вже використовувати блок Cover для створення хедера? Чи віддаєте перевагу класичному заголовку сайту за допомогою кастомізатора WordPress? Повідомте нас у коментарях нижче.