Як використовувати липкий заголовок і ефекти прокручування з Elementor

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

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

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

У цьому підручнику ми покажемо вам, як створити липкий заголовок за допомогою Elementor.

Закріплені заголовки дозволяють користувачам переглядати заголовок сторінки та розділ меню незалежно від того, наскільки далеко вони прокручуються вниз.

• Крок 1: скласти меню
• Крок 2: Створення заголовка в Elementor
• Крок 3. Використання Elementor для створення шаблону заголовка
• КРОК 4. Як зробити заголовок Elementor липким
• Крок 5: налаштуйте наш CSS
• Висновок

Крок 1: скласти меню

Щоб додати липкий заголовок на свій веб-сайт, перейдіть до wp-admin > Вигляд > Меню та створіть Головне меню. У заголовку введіть розділ, який потрібно відобразити.

Крок 2: Створення заголовка в Elementor

Завершивши створення головного меню, перейдіть до «Шаблони Elementor» > «Конструктор тем» Виберіть область заголовка на сторінці конструктора тем і натисніть « Додати новий заголовок ».

Дайте назву шаблону заголовка та натисніть « Створити шаблон » у спливаючому вікні.

Після цього ви перейдете на сторінку редагування Elementor. Ви можете скористатися одним із готових шаблонів заголовків або створити власний з нуля.

У цьому підручнику ми почнемо з нуля за допомогою липкого заголовка Elementor.

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

Крок 3. Використання Elementor для створення шаблону заголовка

Створіть макет із двох колонок. Переконайтеся, що для ширини вмісту розділу встановлено значення « В рамці ».

У налаштуваннях ширини вмісту в розділі редагування Elementor встановіть ширину першого стовпця на 20% у стовпці « Редагувати ».

Розмістіть логотип сайту свого сайту в першому стовпці та вирівняйте його ліворуч.

Додайте навігаційне меню у другий стовпець і виберіть головне меню, створене на кроці 1. Вирівняйте навігаційне меню праворуч.

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

КРОК 4. Як зробити заголовок Elementor липким

Тепер, коли ми створили наш базовий заголовок Elementor, настав час перетворити його на Sticky заголовок.

Для цього перейдіть до розділу Редагувати (розділ Весь заголовок). У спадному меню виберіть «Додатково» > «Ефекти руху»

Виберіть « прилипнути до верху » під ефектами руху, а потім « пристрої », де має з’явитися прикріплений заголовок.

Закріплений заголовок майже завжди небажаний на пристроях розміром з планшет, а також майже завжди небажаний на екранах мобільних пристроїв. У результаті клацніть «x» поруч із обома параметрами під Sticky On, залишивши вибраним лише «Desktop».

Коли ви будете задоволені своєю роботою, натисніть « Опублікувати »; це активує липкий заголовок, але наразі він не замінить ваш поточний заголовок теми.

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

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

Як бачите, використовувати Elementor для створення персоналізованого заголовка Sticky просто та безболісно!

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

Тут можна налаштувати висоту липкого заголовка, колір фону, перехід і ефекти липкості.

Поверніться до області редагування, щоб зробити свій липкий заголовок більш стильним (розділ «Весь заголовок»). У спадному меню виберіть «Додатково» > «Ефекти руху»

У цьому випадку встановіть « Зміщення ефектів Коли відвідувач використовує ваш веб-сайт, це відстань прокручування, на якій відбувається ефект прокручування.

Встановіть зміщення руху на 100.

Майте на увазі, що параметри ефекту зміщення працюватимуть, лише якщо використовується спеціальний CSS. Отже, якщо ви не додаєте жодного власного CSS, ви можете пропустити останню опцію.

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

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

Ми завершили прибирання; Тепер ми переходимо до тонкощів веб-сайту, включаючи додавання спеціального коду CSS. Ми продемонструємо як основи, так і розширені методи отримання безкоштовних ефектів липкого заголовка для Elementor. Якщо ви використовуєте Elementor 2.9 або новішої версії, ви можете використовувати глобальні правила стилю, щоб включити цей CSS на свій сайт.

Дотримуйтеся наведених нижче процедур, щоб включити спеціальний CSS:

• Щоб отримати доступ до меню гамбургерів, знайдіть його у верхньому лівому куті меню Elementor і виберіть його.
• Виберіть «Вибрати стилі теми» зі спадного меню під розділом «Глобальний стиль».
• Виберіть Custom CSS зі спадного меню в цьому розділі (колір зміниться на синій із попереднього генетично червоного кольору).

Після цього вставте наведений нижче код CSS.

header.sticky-header { --header-height: 90px; --непрозорість: 0,90; --shrink-me: 0,80; --sticky-background-color: #0e41e5; --transition: .3s ease-in-out; перехід: background-color var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacity var(--transition); } header.sticky-header.elementor-sticky--effects { колір фону: var(--sticky-color-background) !важливо; фонове зображення: немає !важливо; непрозорість: var(--opacity) !важливо; -webkit-backdrop-filter: blur(10px); фільтр фону: розмиття (10 пікселів); } header.sticky-header > .elementor-container { перехід: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; висота: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { перехід: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!важливо; } header.sticky-header > .elementor-container .logo img { shift: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

Крок 5: налаштуйте наш CSS

Наведені вище інструкції допоможуть вам створити липкий заголовок із зменшенням розміру в Elementor. Якщо ви хочете дізнатися більше про те, як надалі персоналізувати заголовок, ви можете переглянути наведений нижче код CSS, який дозволить вам бути більш творчими з дизайном заголовка. Залежно від ваших потреб ви можете персоналізувати липкий заголовок Elementor, змінивши численні налаштування та зробивши його більш-менш липким. Ми рекомендуємо вам використовувати редактор коду, щоб включити цю зміну CSS безпосередньо в Elementor. Ви можете використовувати Visual Studio Code або Atom, які допоможуть вам швидко зібрати код і отримати переваги. Ці редактори є безкоштовними для використання та доступні з різних систем, включаючи Windows, Mac OS X і Linux.

У цьому розділі буде продемонстровано, як можна налаштувати ефекти зменшення заголовка Elementor за допомогою таблиці стилів CSS. Якщо ви внесете лише одну зміну в настроювану властивість, її буде негайно змінено відповідно до решти коду CSS.

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

Ось п’ять змінних CSS із значеннями за замовчуванням для кожної змінної, показаними червоним.

Колір липкого фону – #0e41e5, а висота заголовка – 90 пікселів. Інші параметри стилю включають: непрозорість 0,90, shrink-me 0,80, непрозорість 0,90 і тривалість переходу ease-in/ease-out 300 мс.

Настроювані властивості — це елементи, які з’являються після подвійного тире «–» в нашому amp коду, і ви можете знайти їх у списку у верхній частині нашого amp коду. Все, що потрібно, це налаштувати значення, яке з’являється після двокрапки та перед крапкою з комою в реченні.

amp , якщо ви хочете збільшити висоту заголовка до 100 пікселів, ось як це виглядатиме до і після зміни висоти:

Раніше висота заголовка була 90 пікселів; після цього висота заголовка була 100 пікселів.

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

Elementor містить різноманітні шаблони заголовків; кожен із них вирізняється елегантністю та допомагає глядачам орієнтуватися на веб-сайті.

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

Ось лише кілька amp численних варіантів оформлення заголовків, доступних користувачам Elementor.

Висновок

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

Elementor усуває необхідність вручну генерувати закріплені заголовки за допомогою Javascript і CSS, що було необхідно раніше. Створення липкого заголовка для вашого веб-сайту ніколи не було таким простим, як зараз, завдяки липким заголовкам Elementor.