...
✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Як створити липкий заголовок у WordPress

3

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

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

Тепер ми розглянемо один із основних типів липких елементів, липкий заголовок, і чудовий інструмент, який допоможе нам легко створювати та налаштовувати ці елементи. Інструмент, про який йде мова, називається WP Sticky.

Окрім WP Sticky, існує багато різних способів створення липких заголовків. Ви навіть можете створити ці липкі елементи за допомогою чистого коду HTML і CSS, але це потребує певних технічних знань і займає багато часу. Цей плагін є набагато простішим вирішенням проблеми та надзвичайно зручним для початківців.

Перш ніж ми зможемо почати використовувати WP Sticky, ми повинні спочатку завантажити його та встановити плагін. Оскільки це дуже простий процес, ми не будемо витрачати на це час. Натомість перейдемо безпосередньо до створення нашого першого липкого заголовка.

Перше, що нам потрібно зробити, це увійти в розділ плагінів на панелі адміністратора WordPress; звідти виберіть WP Sticky Pro, а потім натисніть Налаштування.

Нас зустрінуть ці параметри, де нам потрібно буде вибрати Додати новий липкий елемент.

Як створити липкий заголовок у WordPress

Після того, як це буде зроблено, ми побачимо новий запис на вкладці «Ваші липкі елементи» під назвою «Ліпкий елемент №1». Вітаємо, ви створили свій перший липкий елемент, але ще багато чого потрібно зробити, перш ніж у нас буде функціональний липкий заголовок. Як бачите, існує кілька різних категорій налаштувань для нашого липкого елемента.

Як створити липкий заголовок у WordPress

Розглянемо їх детальніше.

Тут ми дамо назву нашому елементу та виберемо, що саме ми хочемо зробити липким.

Як створити липкий заголовок у WordPress

По-перше, нам потрібно дати назву липкому елементу; у цьому випадку це буде Sticky Header.

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

Візуальний вибір

Це більш зручний і простий варіант. Просто перейдіть у розділ «Основні» та виберіть опцію «Вибрати елемент».

Як створити липкий заголовок у WordPress

Після того як ви це зробите, ваш веб-сайт відкриється разом із липким меню WP у верхній частині, сигналізуючи про те, що ви ввійшли до візуального вибору. Якщо ви наведете вказівник миші на деякі з елементів, ви помітите жовтуватий прямокутник з ламаною лінією, який візуалізує вибрану вами область. Натисніть на нього лівою кнопкою миші, щоб вибрати його.

Як створити липкий заголовок у WordPress

Це поверне вас на сторінку налаштувань WP Sticky, де ви побачите унікальний ідентифікатор вибраного елемента. У нашому випадку це виглядає приблизно так.

Як створити липкий заголовок у WordPress

Після цього натисніть кнопку «Зберегти зміни» у верхньому правому куті, і все готово.

Написання унікального ідентифікатора

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

Візуальні параметри

Після того, як ми закінчили називати та вибирати наш елемент, настав час зробити його заголовком і налаштувати його. WP Sticky дає нам досить багато варіантів для цього.

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

Як створити липкий заголовок у WordPress

Відстань між верхньою частиною сторінки та липким елементом

Іноді наші липкі елементи можуть наближатися до верхньої частини сторінки. Ми можемо виправити це вручну, ввівши кількість пікселів між верхньою частиною сторінки та нашим призначеним липким елементом.

Як створити липкий заголовок у WordPress

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

Перевірте панель інструментів адміністратора

Якщо на вашому веб-сайті є спеціальна панель інструментів адміністратора, вона може заважати вашому липкому заголовку. Якщо це так, все, що вам потрібно зробити, це позначити цей параметр, і проблему буде вирішено. WP Sticky автоматично розпізнає розмір панелі інструментів і реагує відповідно.

Як створити липкий заголовок у WordPress

Іноді вам потрібно мати різну поведінку залежно від пристрою, який відвідувачі використовують для перегляду вашого веб-сайту. Можливо, вам не захочеться мати закріплений заголовок на мобільних пристроях. WP Sticky дає вам можливість вибрати, які категорії пристроїв матимуть закріплену поведінку. У нашому випадку ми відмовимося від малих і середніх пристроїв.

Як створити липкий заголовок у WordPress

Інший випадок, коли може знадобитися деяка настройка вручну, це якщо є елементи, які з’являються над вашим липким заголовком. Щоб цього не сталося, вам потрібно буде збільшити Z-індекс вашого липкого заголовка.

Якщо ви не впевнені щодо значень Z-індексу елементів, які збігаються з вашим заголовком, введіть максимальне значення, 99999, і це вирішить проблему.

Як створити липкий заголовок у WordPress

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

Як створити липкий заголовок у WordPress

Ще одна візуальна настройка липкого елемента. Залежно від решти веб-сайту, за допомогою повзунка ми можемо зробити липкий елемент більш або менш прозорим.

Як створити липкий заголовок у WordPress

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

Як створити липкий заголовок у WordPress

Колір фону

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

Як створити липкий заголовок у WordPress

Якщо ви бажаєте внести ще більше змін у свій липкий елемент, які не охоплюються вищезгаданими параметрами, є поле, де ви можете додати налаштування за допомогою CSS. Одна важлива річ, про яку слід пам’ятати в цьому випадку, полягає в тому, що немає необхідності обертати стилі в селекторах. Вам не потрібно писати .classname{color:#FFF;}, натомість вам потрібно лише написати color:#FFF;

Як створити липкий заголовок у WordPress

Ми залишимо це поле порожнім, оскільки більше не потрібно налаштовувати наш липкий демонстраційний заголовок.

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

На закінчення

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

WP Sticky має версію Pro, яка включає всі вищезазначені опції та коштує 5,99 доларів США на місяць або 39 доларів США за довічну ліцензію. Для команд і агентств також пропонується кілька різних тарифних планів.

Валері Хенінгс

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

Джерело запису: wpklik.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі