Верхній та нижній колонтитули є одними з найважливіших елементів веб-сайту. Хедер (заголовок, шапка сайту) веб-сайту - це перше, що зауважує відвідувач, заходячи на сайт. Заголовок відноситься до навігаційної панелі, на якій відображається логотип компанії, посилання на всі важливі сторінки, будь-який CTA та спосіб зв'язку з вами за номером телефону або адресою електронної пошти.
Добре структурований заголовок має вирішальне значення і може використовуватися для реклами будь-яких повідомлень чи рекламних акцій. Він створює легкість для потенційних клієнтів щодо веб-сайту. Якісний хедер діє як добрий продавець; наприклад, використання заклику до дії зі знижкою 20% тільки сьогодні спонукає користувачів купити ваш продукт.
Хедер може бути певного типу, наприклад, липкий (фіксований) — інтелектуальний інструмент навігації, який фіксує головне меню у верхній частині сторінки, коли відвідувач прокручує сторінку вниз.
Важливість липкого хедера
Липкий заголовок дозволяє користувачам швидко отримати доступ до пошуку та всім важливим сторінкам, не переходячи нагору сторінки. Дослідження показали, що використання липкого хедера на веб-сайті електронної комерції збільшило конверсію на 3%.
Створити липкий навігаційний заголовок Elementor непросто, особливо якщо сайт верстаєте вперше. Пропонуємо 4 варіанти з покроковим керівництвом, яке допоможе створити фіксований хедер за допомогою Elementor, не написавши жодного рядка коду.
1. Як створювати липкі хедери за допомогою Elementor Pro
Приліплений заголовок – дуже ефективний спосіб створити зручність для користувачів вашого сайту. Давайте подивимося, як можна швидко створити липкий хедер, використовуючи конструктор тем Elementor , який входить як додаткова функція в Elementor Pro.
Крок 1: Створіть головне меню
Перш ніж встановити липкий заголовок, перейдіть по wp-admin > Зовнішній вигляд > Меню та створіть Головне меню. Додайте сюди всі важливі сторінки, які бажаєте показати у шапці.
Крок 2: Відкрийте конструктор тем
Після створення головного меню перейдіть до Elementor Templates > Theme Builder. На сторінці конструктора клацніть розділ «Заголовок» і виберіть «Додати новий заголовок».
Після цього з'явиться вікно, що спливає; напишіть назву шаблону заголовка та натисніть «Створити шаблон».
Вас перенаправлять на сторінку редактора Elementor. На цій сторінці можна вибрати будь-які готові шаблони шапок або створити власні. Створимо липкий хедер із нуля.
Важливо підкреслити, що Elementor пропонує більше ніж 7 віджетів, які можна використовувати для створення заголовка.
Крок 3: Створіть шаблон заголовка Elementor
Тепер виберіть структуру із двох стовпців (один стовпець для логотипу, а інший для горизонтального меню).
Потім перейдіть до макету та виберіть параметр у штучній упаковці за шириною вмісту.
Виберіть ширину стовпця до 20% у розділі «Редагувати стовпець».
Тепер додайте логотип вашого сайту в лівий стовпець і оберіть вирівнювання по лівому краю. Потім у правому стовпці додайте меню навігації та виберіть меню, створене на кроці 1. Вирівняйте головне меню з правого боку.
У цьому уроці ми створимо базовий заголовок. Можете згортати стильніший заголовок, додавши ефекти анімації при наведенні, колір фону і кнопки.
Крок 4. Закріпіть хедер Elementor
Тепер, коли ви розробили базовий хедер, настав час зробити його липким: клацніть розділ "Редагування" і перейдіть в "Додатково"> "Ефекти руху".
У розділі «Додатково» у списку, що розкривається, виберіть «липкий» до «верху», а також виберіть пристрої, на яких відображатиметься фіксований заголовок, і натисніть кнопку «Опублікувати».
Після публікації з'явиться новий спливаючий екран із проханням «Додати умову» для хедера. Налаштування умов визначає, де саме на веб-сайті використовуватиметься хедер. Наприклад, виберіть "Весь сайт".
Ось і все, липкий хедер в Elementor створений лише за кілька кроків.
Додайте стиль за допомогою користувача CSS
Ви можете зробити свій липкий хедер в Елементор стильнішим, використовуючи власний клас CSS, додавши колір фону, висоту, липкий ефект та ефекти переходу. Давайте подивимося, як цього досягти.
Поверніться до розділу «Редагувати» та перейдіть до «Додатково» > «Ефекти руху».
Перейдіть до «Зміщення ефектів» у розділі «Ефекти руху» та введіть значення 100. Це відстань прокручування, на якому ефект прокручування з'являтиметься щоразу, коли користувач потрапить на ваш сайт.
Прокрутіть вниз і відкрийте розкривний список «CSS користувача». Вставте клас CSS, наведений нижче. Ви також можете відредагувати цей CSS, щоб оформити його на свій розсуд.
Користувальницькі CSS:
selector.elementor-sticky–-effects {
background-color: rgb(255, 220, 168) !important;
}
selector {
transition: background-color 3s ease !important;
}
selector.elementor-sticky–-effects > .elementor-container {
min-height: 80px;
}
selector > .elementor-container {
transition: min-height 1s ease !important;
}2. Створіть безкоштовне меню з липким хедером за допомогою Xpro Elementor Theme Builder
Ви також можете використовувати безкоштовний конструктор тем Xpro Elementor створити липкий заголовок з повним творчим підходом до дизайну. Це безкоштовне доповнення Elementor, яке дозволяє створювати липкі заголовки з використанням преміальних шаблонів заголовків і віджетів конструктора тем.
Давайте подивимося, як можна згортати липку шапку в Елементор, використовуючи цей плагін для створення тем.
Крок 1. Встановіть плагін Xpro Theme Builder
Перейдіть до панелі керування WordPress > Плагіни > Додати новий.
Тепер знайдіть конструктор тем Xpro Elementor, натисніть кнопку «Встановити зараз» та «Активуйте» після встановлення.
Після активації плагіна з'явиться опція Xpro Addons на бічній панелі інструментів.
Крок 2: Створіть фіксовану шапку
Щоб створити липкий хедер, перейдіть до Xpro Addons > Theme Builder > Додати новий.
Додати заголовок липкого хедера. Виберіть опцію «Хедер» у списку «Тип шаблону».
Виберіть «Увімкнути» у параметрі «Прилипання заголовка» та натисніть кнопку «Редагувати за допомогою Elementor» після збереження налаштувань. Ви також можете налаштувати інші параметри на свій вибір.
Тепер вас перейде на сторінку редактора Elementor. На цій сторінці можна вибрати будь-який із готових сучасних шаблонів або створити свій власний. Наприклад створимо новий.
Виберіть структуру із двох стовпців, один для логотипу, а інший для меню.
Тепер в опції "Макет" встановіть ширину вмісту на "В штучній упаковці".
Встановіть структуру з коефіцієнтом «33,66» у списку «Структура».
Додайте «Логотип сайту» в лівий стовпець і виберіть варіант вирівнювання по лівому краю в списку «Загальні». Потім додайте навігаційне меню в правому стовпці та виберіть «Головне меню». Тепер вирівняйте головне меню праворуч.
Натисніть «Оновити» і ваш заголовок з'явиться на вашому сайті.
Дивіться також:
Найкращі темлейт кити на Elementor
3. Створіть меню з липким хедером за допомогою myStickymenu
myStickymenu - ще один плагін WordPress, який можна використовувати для створення красивого індивідуального заголовка для веб-сайту Elementor. За допомогою плагіна можна створити панель привітання для оголошень, додати зворотний відлік для рекламних акцій та багато іншого.
Давайте додамо липке меню за допомогою myStickymenu.
Крок 1: Встановіть плагін
Щоб встановити плагін, перейдіть на панель інструментів WP > Плагіни > Додати новий.
Тепер знайдіть myStickymenu, натисніть "Встановити зараз" та "Активувати".
Крок 2. Увімкніть фіксовані налаштування
Перейдіть до Установки > myStickymenu. Перемкніть кнопку меню «Липке меню» і виберіть «Інший клас або ідентифікатор» у списку, що розкривається, в розділі «Липкий клас».
Змініть інші параметри, такі як непрозорість або колір фону відповідно до цілей веб-дизайну. Тепер прокрутіть вниз та натисніть кнопку «Зберегти». Оновіть веб-сайт, щоб побачити липкий хедер у дії.
myStickymenu - хороший плагін для створення липкого заголовка, але має недолік. З ним можна зробити лише базовий липкий хедер. Щоб отримати більше можливостей для налаштування, необхідно оновити тарифний план, починаючи з 25 доларів на рік.
4. Створіть CSS Sticky Navbar у WordPress
Останній варіант у нашому блозі для створення липкого заголовка в Elementor - це використання користувача CSS у вашій темі WordPress. Щоб створити липку панель навігації за допомогою CSS, увійдіть до панелі керування WordPress і виконайте такі дії.
Крок 1: Відкрийте налаштувач WordPress
Перейдіть до «Зовнішній вигляд» > «Налаштувати» > «Додатковий CSS».
Крок 2: Додати код CSS
Додайте наступний код CSS.
nav {
background: #ffff;
height: 70px;
z-index: 999;
margin: 0 auto;
border-bottom: 1px solid #dadada;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
}
Тепер ви можете налаштувати хедер на свій смак, але для цього потрібні хороші знання HTML і CSS. Більшість тем пропонують цю функцію як преміальну функцію. Але як приклад ми використовували безкоштовну тему Xpro. Якщо ваш сайт пропонує довгий контент, додавання липкого навігаційного хедера може допомогти покращити взаємодію з користувачем. Створити липкий заголовок за допомогою конструктора тем Elementor Pro та Xpro Elementor досить просто в порівнянні з іншими методами, описаними у цьому блозі.
Джерело: wpexplorer.com
Коментарі до запису: 0