Как использовать липкий заголовок и эффекты прокрутки с 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 для создания персонализированного заголовка Sticky просто и безболезненно!

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

Здесь вы можете настроить высоту прикрепленного заголовка, цвет фона, переход и эффекты прилипания.

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

установите « Смещение эффектов » на 100. Когда посетитель использует ваш веб-сайт, это расстояние прокрутки, на котором происходит эффект прокрутки.

Установите смещение движения на 100.

Имейте в виду, что параметры «Эффекты смещения» будут работать только при использовании настраиваемого CSS. Следовательно, если вы не добавляете свой собственный CSS, вы можете пропустить последний вариант.

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

Теперь вы захотите добавить на свой сайт немного Custom CSS. Пользовательский CSS довольно гибкий, и вы можете включать все, что захотите, если вы знакомы с его работой.

Мы закончили уборку; Теперь перейдем к тонкостям веб-сайта, включая добавление собственного кода CSS. Мы продемонстрируем как основы, так и передовые методы получения бесплатных эффектов липкого заголовка для Elementor. Если вы используете Elementor 2.9 или выше, вы можете использовать Глобальные правила стилей для включения этого CSS в свой сайт.

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

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

После этого вставьте приведенный ниже код CSS.

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

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

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

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

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

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

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

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

Вывод

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

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