Прикрепленные заголовки — отличный способ постоянно держать навигационное меню вашего сайта видимым, обеспечивая легкий доступ к важным ссылкам и информации. Однако статический заголовок со временем может стать монотонным, и вам может потребоваться изменить его цвет при прокрутке, чтобы создать более динамичный и привлекательный пользовательский интерфейс. В этом руководстве мы покажем вам, как изменить цвет прикрепленного заголовка при прокрутке в Elementor , используя простые и понятные шаги. Независимо от того, новичок вы или опытный пользователь Elementor, вы можете легко реализовать этот эффект и придать своему сайту свежий и современный вид.
Метод проектирования
Если вы еще этого не сделали, вам нужно будет использовать конструктор тем, чтобы создать собственный шаблон заголовка. Начните с размещения вашего логотипа в виджете изображения и виджете навигации в разделе заголовка с двумя столбцами.
Вкладка «Дополнительно»
Вкладка «Дополнительно» в разделе «Элементы управления» будет использоваться для следующих шагов.
Настройки маржи
Самый распространенный способ сделать заголовок прозрачным — задать разделу отрицательный запас, равный его высоте. Разблокируйте элементы управления полями на вкладке «Дополнительно» и установите для нижней части отрицательное значение (пример: -125 пикселей). Это переместит раздел под заголовком в верхнюю часть страницы.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасZ-индекс
Вам также потребуется увеличить Z-индекс раздела, чтобы он всегда находился вверху контента. Вы можете ввести любое число, превышающее остальной контент вашего сайта, но многие дизайнеры используют 1000.
Прикрепленные настройки
Выберите параметр «Залипание» на аккордеоне «Эффекты движения» и установите для него значение «Сверху».
Добавление эффекта
Теперь, когда мы создали базовый прозрачный раздел заголовка, мы добавим эффект прокрутки.
Вкладка «Стиль»
Вкладка «Стиль» в разделе «Элементы управления разделом» будет использоваться для следующих шагов.
Окончательный цвет
Установите цвет конечного фона или градиента в палитре цветов.
Эффект прокрутки
Переключите переключатель «Эффекты прокрутки» на панели управления.
Установите значения
Теперь нам нужно отрегулировать значения ползунков области просмотра, чтобы добиться желаемого эффекта. Прокрутите до места на странице, где вам нужна полная непрозрачность, и уменьшите значение «Верх», пока заголовок не станет полностью непрозрачным (пример: 25%). Теперь вы можете увеличить значение Bottom. В предыдущем примере мы хотим, чтобы эффект проявился быстро, поэтому мы устанавливаем значения очень близко друг к другу (пример: 22%). Это приведет к эффекту, возникающему при прокрутке страницы на 3%.
Подведение итогов
В заключение, изменение цвета липкого заголовка на прокрутке в Elementor может улучшить визуальную привлекательность и удобство использования вашего веб-сайта. Это простой и эффективный способ выделить ваш сайт среди других и произвести незабываемое впечатление на посетителей. Однако имейте в виду, что вам придется настроить или сделать допуски для мобильных и планшетных устройств, поскольку поведение заголовка может различаться на разных размерах экрана. Чтобы найти эту золотую середину, потребуется некоторое тестирование и настройка, но конечный результат будет стоить затраченных усилий. Итак, попробуйте эту технику, чтобы придать вашему сайту свежий и современный вид.
