На сучасних односторінкових сайтах з нескінченно довгою головною сторінкою, липкий хедер (sticky header) – це та деталь, яка допомагає користувачам завжди та скрізь швидко перейти до потрібного розділу сайту.
Для створення липкого хедера можна використовувати тему, наприклад Наперед, в якій на це ви витратите всього кілька секунд, або вдатися до допомоги плагіна WordPress.
Сьогодні в цьому пості ми розглянемо плюси та мінуси липкої навігаційної панелі на вашому сайті і зробимо невеликий огляд плагінів, за допомогою яких ви зможете створити sticky header у себе на сайті. Почнемо!
Дивіться також:
- Як самому написати код навігації, що прокручується.
- Робимо сторінку-шаблон для WordPress з меню, що прокручується, і посиланнями
- Навігаційна панель Bootstrap для WordPress-теми
- Як зробити просте адаптивне меню для WordPress сайту
- Адаптивне мега-меню на WordPress для сайтів із великою кількістю контенту
Плюси та мінуси Липких Хедерів
Останнім часом липкі хедери стають все популярнішими, і це не просто результат того, що вони круто впливають на дизайн сайту. Швидкий доступ до навігації сайтом — дуже важливий нюанс, і його неможливо не враховувати в наш час нескінченного прокручування.
Тим не менш, думки щодо липких заголовків поділяються, є гідні аргументи за та проти їх застосування.
Давайте почнемо з плюсів
- Взаємодія з користувачем. Тут все очевидно: миттєвий доступ до основних розділів сайту, швидка навігація сайту, незалежно від того, наскільки далеко користувач проскролив вниз. Шалено зручно при використанні на мобільних пристроях.
- Брендинг. Грамотно розташований логотип у хедері допоможе закріпити основну частину брендингу вашого сайту на найвиднішому місці. Звичайно, тут не треба занадто старатися. При правильному підході ви зможете підвищити впізнаваність бренду.
- Найкраще показники аналітики. Після поліпшення навігації, як правило, скорочується показник "непотрібних переглядів" і збільшується кількість сторінок, що переглядаються за одне відвідування сайту. Звичайно ми не можемо нічого гарантувати, але це правило спрацювало для наших сайтів.
Однак скрізь є і свої мінуси
У нашому випадку, найочевиднішим буде неправильне оформлення заголовка. Ви можете просто заплутатися в реалізації та зробити хедер занадто великим та нав'язливим, особливо для мобільних пристроїв. Тут немає ідеальної формули, так що експериментуйте, тестуйте результати на реальних пристроях та емуляторах, використовуйте різні інструменти та плагіни, які можуть допомогти у цій ситуації.
Липкий хедер повинен містити елементи, які реально будуть потрібні користувачеві. Зверніть увагу на сайт Medium, там є рядок пошуку, реєстрація та навігація, яка зникає, коли користувач прокручує сторінку вниз, і миттєво з'являється на екрані, коли він починає прокручувати вгору. Це маленький штрих, але з точки зору загальної практичності він чудовий.
Також варто згадати про те, що є ризик напортачити в коді. У вас може вийти справжній Франкенхедер, який повністю приховуватиме вміст сайту або просто викликати дратівливі баги. Нижче ми представимо плагіни, які допоможуть вам уникнути таких ситуацій.
Але перш ніж приступити до огляду наших WordPress плагінів, погляньмо на кілька прикладів.
Приклади сайтів із липкою навігацією
оазис
Сайт Oasis – це чудовий приклад фіксованої верхньої панелі навігації. Будь-якої миті, з будь-якого пристрою у вас буде доступ до хедеру сайту.
У десктопній версії сайту вам доступне повне меню. Переключившись на мобільний пристрій, ви побачите найнеобхідніші опції та меню-гамбургер.
Gareth Emery
На сайті Gareth Emery липкий хедер зменшуватиметься при прокручуванні та стає прозорим.
Перейдіть на мобільну версію і побачите чудовий приклад того, як sticky header впливає на брендинг: на сайті буде видно тільки логотип і меню-гамбургер.
Компресія Squid
Сайт Squid Compression – приклад того, як можна вигідно використовувати липкий бічний хедер.
Тепер, коли ми розглянули переваги та недоліки липких хедерів, подивилися на кілька реальних прикладів, давайте перейдемо до огляду інструментів.
Плагіни для створення липких хедерів у WordPress
1. Липкий заголовок
Sticky Header від ThematoSoup – це простий плагін, який надає всі необхідні базові функції.
Більшість налаштувань ви зможете зробити через Customizer, можна змінювати колір тла, тексту та задавати максимальну ширину хедера. Ви можете встановити ширину хедера після скролінгу вниз і вибрати певні параметри для мобільних пристроїв.
2. важливо меню
Назва плагіна, звичайно, дуже незвичайна, але вона точно описує її можливості.
Плагін дозволяє зробити "липким" практично кожен елемент сайту, але пам'ятайте, що не варто надто захоплюватися. Для реалізації знадобляться мінімальні знання HTML/CSS, щоб правильно розмістити селектор на потрібній сторінці. Це досить тривіальна річ, тому не слід цього побоюватися.
Є всі необхідні базові параметри, ви зможете зробити необхідні налаштування для відображення хедера на мобільних пристроях, до того ж є налаштування для вказівки Z-індексу вашого липкого елемента, щоб переконатися, що його завжди видно. Також доступний режим налагодження.
3. myStickymenu
Спочатку плагін myStickymenu був розроблений спеціально для теми Twenty Thirteen, але він повинен добре працювати і з усіма іншими сучасними, чуйними темами.
Плагін повністю готовий до локалізації, чуйний, включає в себе прості опції для додавання коду користувача CSS.
Автори плагіна створили корисну демо сторінку, де ви можете побачити його в дії, перш ніж завантажити. Це плагін із відмінним рейтингом 5 зірок і на даний момент має понад 10,000 активних завантажень.
4. Панель сповіщень WordPress
Варіанти, які ми розглядали досі, насамперед були спрямовані на створення навігації в липкому хедері, але іноді все, що потрібно, це закріпити просте повідомлення або кнопку call to action. Класичний випадок — коли нам потрібно виділити спеціальні пропозиції на сайті або нагадати користувачам, передплатити розсилку новин.
WordPress Notification Bar від SeedProd відмінно підійде для вирішення цього завдання. Його нескладно встановити, йдуть прості налаштування для кольорів, є сумісність із MultiSite-установками.
5. Панель сповіщень WPFront
WPFront Notification Bar також, як можна припустити з назви, більше орієнтований на повідомлення, а не навігацію.
Параметри налаштувань трохи просунутіші, ніж у попередньому варіанті. Можна задавати висоту, вибирати, де конкретно розміщувати повідомлення під час скролінгу, налаштовувати кольори і т.д.
Також можна задавати дату для початку та кінця відображення хедера, обмежувати його появу на конкретних постах чи сторінках.
Розробники проробили хорошу роботу, зібравши прості, але цікаві ідеї із прикладами на одній сторінці. Докладніше керівництво також є.
6. Меню героя
Hero Menu – це єдиний платний плагін у нашому списку (доступний за $19).
Він дозволяє користувачам створювати всі види меню протягом декількох хвилин, починаючи від багатофункціональних мега меню до найпростіших drop-down варіантів.
Плагін Hero Menu повністю сумісний з WooCommerce, був ретельно протестований з різними провідними преміум темами WordPress, такими як Enfold, Avada та Divi, разом з усіма останніми версіями WordPress, вибиралися теми за замовчуванням починаючи від Twenty Eleven і Twenty Fifteen. Повна інформація про налаштування з найпопулярнішими темами входить до керівництво плагіна.
Для створення липкого хедера вам знадобиться лише один клік. Є необхідні налаштування для кольору, прозорості та логотипу. Повна документація та підтримка також доступні на сайті розробника. Якщо ви шукаєте інструмент із серії "все-в-одному", то цей плагін саме те, що вам потрібно.
Додавання липкої навігації на ваш сайт
Неважливо, чи ви хочете просто закріпити певне повідомлення на видному місці або створити зручну навігацію, липкий хедер - це відмінне рішення, яке буде корисним як для відвідувачів сайту, так і для його власника.
У цій статті ми спробували описати найцікавіші плагіни, але якщо ви помітили, що ми щось упустили, обов'язково ділитесь з нами своїми зауваженнями та порадами у коментарях.
Джерело: wpmudev.org
Коментарі до запису: 2
Добрий день. А як прибрати липке меню? У налаштуваннях теми немає такого, щоб ставити галочку. Як виходжу з адмін панелі з'являється липке меню, дивно, а коли в адмінки то нормально…
Добрий день.
Липке меню може додаватися темою сайту, плагінами або розробником сайту за допомогою коду та редагування стилів сайту вручну. Отже, і спосіб відключення даного меню буде різним для різних випадків.
Ви можете визначити стилі даного меню за допомогою інструменти розробника у браузері, і далі пошукати дані компоненти у файлах сайту.
Також ви можете спробувати змінити тему та відключити по черзі плагіни.