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

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

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

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

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

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

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

Крок 1: Створення меню

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

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

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

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

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

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

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

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

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

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

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

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

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

КРОК 4: Як зробити заголовок елемента елементарним

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

header.sticky-header {--header-height: 90px; --прозорість: 0,90; -зменшити: 0,80; --sticky-background-color: #0e41e5; -перехід: .3s легкість виведення; перехід: фон-колір var (-перехід), фон-зображення var (-перехід), фон-фільтр var (-перехід), непрозорість var (-перехід); } header.sticky-header.elementor-sticky-ефекти {background-color: var (-sticky-background-color)! important; background-image: none! important; непрозорість: var (-непрозорість)! важливо; -webkit-backdrop-filter: blur (10px); задній фільтр: розмиття (10 пікселів); } header.sticky-header> .elementor-container {перехід: min-height var (-перехід); } header.sticky-header.elementor-sticky-ефекти> .elementor-container {min-height: calc (var (-header-height) * var (-shrink-me))! важливо; висота: calc (var (-висота заголовка) * var (-стиснути-мене)); } header.sticky-header .elementor-nav-menu .elementor-item {перехід: padding var (-перехід); } header.sticky-header.elementor-sticky-ефекти .elementor-nav-menu .elementor-item {padding-bottom: 10px! важливо; padding-top: 10px! важливо; } header.sticky-header> .elementor-container .logo img {перехід: max-width var (-перехід); } header.sticky-header.elementor-sticky-ефекти .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, термоусадочну 0,80, непрозорість 0,90 та легкий перехід/легкий вихід 300 мс.

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

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

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

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

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

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

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

Висновок

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

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