Как использовать липкий заголовок и эффекты прокрутки с 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, пришло время превратить его в липкий заголовок.

Для этого перейдите в раздел «Редактировать» (раздел «Весь заголовок»). В раскрывающемся меню выберите «Дополнительно» > «Эффекты движения»

выберите « Прикрепить к верху », затем « Устройства », где вы хотите, чтобы отображался прикрепленный заголовок.

Закрепленный заголовок почти всегда нежелателен на устройствах размером с планшет, а также почти всегда нежелателен на экранах мобильных устройств. В результате нажмите «x» рядом с обеими опциями в разделе «Прилипание включено», оставив выбранным только «Рабочий стол».

Когда вы будете удовлетворены своей работой, нажмите « Опубликовать »; это активирует прикрепленный заголовок, но на данный момент он не заменит текущий заголовок темы.

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

Пользовательские свойства — это элементы, которые появляются после двойного тире «–» в нашем amp кода, и вы можете найти их в верхней части нашего amp кода. Все, что требуется, — это настроить значение, которое появляется после двоеточия и перед точкой с запятой в предложении.

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

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

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

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

С Elementor вы имеете полный контроль над стилем заголовков вашего сайта. amp , вы можете разместить логотип сайта в центре страницы, а главное меню — под ним. Вы можете добавить заголовок над основным заголовком, чтобы отображать номер телефона, ссылки на социальные сети и другую информацию.

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

Заключение

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

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