Перейти к содержимому 
Заголовок может также играть важную роль в укреплении бренда, отображая логотип компании, фирменные шрифты, цвета и визуальный стиль. Помимо эстетики, заголовок часто включает полезные функции: навигационное меню, поиск, корзину покупок для интернет-магазинов, кнопки призыва к действию и другие элементы, которые делают использование сайта удобнее и способствуют увеличению конверсии.
Чтобы использовать Elementor Pro, необходимо установить Elementor в качестве плагина.
- Шаги: панель управления WP —> Плагины —> Добавить новый —> Поиск «Elementor» —> Установить сейчас —> Активировать.
Тема
- В нашем случае мы использую Hello Elementor, и Вы можете установить его на вкладке «Тема».
- Шаги: панель управления WP —> внешний вид —> темы —> добавить новую —> поиск «Hello Elementor» —> установить —> активировать.
Как создать заголовок
Создайте свой первый заголовок с помощью конструктора тем.
1. Перейдите в WP-Admin.
2. Перейдите в Шаблоны> Конструктор тем.
На правой панели щелкните знак плюс в карточке заголовка.
Откроется библиотека шаблонов. Вы можете воспользоваться готовыми решениями или полностью создать свой Заголовок
Создайте свой заголовок в редакторе Elementor.
Когда вы закончите, нажмите Опубликовать (Обновить), чтобы сохранить заголовок.
Вам будет предложено выбрать страницы, на которых будет отображаться заголовок.
Вы также можете отредактировать заголовок с помощью конструктора тем. Зайдя в него таким же способом, как и создавали ранее.
Заголовок, изменяющий прозрачность при прокрутке
Этот тип заголовка остаётся на экране, когда пользователь прокручивает страницу вниз, но при этом плавно изменяет свою прозрачность, создавая эффект лёгкости и современности. Такой подход часто используется на сайтах, чтобы сохранить видимость заголовка, не отвлекая при этом от основного контента.
1 . Войдите в WP Admin.
2 . Чтобы отредактировать заголовок, нажмите на его значок 
Слева появится панель «Редактировать контейнер».
3. Нажмите “Дополнительно“.
- Развернуть макет.
- Установите следующее:
- Отступ (внизу) — отрицательное значение (например, -125 пикселей). Это перемещает раздел, расположенный под заголовком, в верхнюю часть страницы.
- Z-индекс — он всегда должен быть выше остального контента. Вы можете ввести любое число, превышающее остальные элементы вашего сайта. Например, 1000.
4. Разверните Эффекты движения.
Установите липкий заголовок в качестве верхнего элемента. В липкой, выбрать рабочий стол, планшет портрет, и портрет мобильный. Это делает изменение видимым на всех трех устройствах.
5. Переключите эффекты прокрутки. Отобразятся настройки эффекта прокрутки.
С помощью ползунков области просмотра отрегулируйте значения для создания желаемого эффекта. Прокрутите страницу до того места, где вы хотите получить полную непрозрачность.
- Уменьшайте значение Top, пока непрозрачность заголовка не достигнет 100% (пример: 25%).
- Увеличьте значение Bottom. Если вы хотите, чтобы эффект проявился быстро, установите значения, очень близкие к Top (пример: 22%). Это приводит к появлению эффекта при прокрутке страницы на 3%.
- Нажмите Опубликовать.
Теперь, когда пользователь начнёт прокручивать страницу вниз, заголовок плавно станет менее заметным. Эффект может быть улучшен добавлением легкого перехода к фону заголовка — попробуйте изменить цвет или наложить полупрозрачный слой для достижения нужного результата.
Скрыть заголовок при прокрутке вниз, показать при прокрутке вверх с помощью липких заголовков Elementor
Этот эффект скрывает заголовок и меню Elementor, когда пользователь прокручивает страницу вниз. Это помогает не отвлекать пользователя сайта. Это полезно, когда Вы хотите, чтобы пользователь сосредоточился на контенте и воронке продаж сайта, обеспечивая удобство использования.
А затем, когда пользователь прокручивает вверх, заголовок и меню появляются снова. Таким образом, пользователю не нужно прокручивать до верхней части веб-сайта и он может легко перемещаться. Все это направлено на улучшение пользовательского интерфейса веб-сайта.
Мы добиваемся этого, добавляя немного JavaScript, который перемещает заголовок вверх и за пределы экрана. А когда мы прокручиваем страницу вниз, JavaScript перемещает заголовок обратно вниз.
Сделайте заголовок так же, как обычно. Важно, чтобы заголовок находился только в одном разделе или контейнере. И если Вы хотите, чтобы мобильное меню имело такой же эффект, Вам также нужно разместить его в том же разделе.
Если Вы не хотите, чтобы на мобильном устройстве был такой эффект, создайте мобильное меню в отдельном разделе и используйте адаптивные условия, чтобы скрыть раздел для мобильных устройств на компьютере.
Мы должны сделать наши заголовки “липкими”. Перейдите на вкладку “Продвижение” раздела и выберите “Эффекты движения”. В опции “Липкий” установите ее в положение “Вверху’.
Здесь установите «Смещение эффектов» на 100. Это расстояние прокрутки, на котором эффект прокрутки проявляется, когда посетитель использует ваш сайт
Затем присвоите этому разделу заголовка CSS-идентификатор hide-header
Также присвоите ему значение z-индекса, равное 999.
На следующем шаге нам нужно скопировать и вставить фрагмент кода JavaScript. Важно добавить его в нужное место. Мы добавим JavaScript с помощью Elementor Code.
Перейдите в раздел «Код Elementor» на панели управления в меню слева от раздела «Elementor».
Выберите «Добавить новый» и установите расположение «В конце». Это добавит фрагмент Javascript в нижний колонтитул каждой страницы. Это идеальный вариант, так как он не повлияет на время загрузки и скорость вашего сайта.
Javascript:
<!– Hide and Show Desktop Header
–> <script> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById(“hide-header”).style.top = “0”; } else { document.getElementById(“hide-header”).style.top = “-80px”; /* adjust this value to the height of your header */ } prevScrollpos = currentScrollPos; } </script>
Там, где вы видите .style.top = «-80px»; в этой части вам нужно будет только изменить значение 80px в соответствии с высотой вашего заголовка. Если часть заголовка всё ещё видна при прокрутке вниз, увеличьте значение, пока заголовок полностью не исчезнет с экрана.
CSS:
<style>
/* Show Hide Sticky Header Speed Control */
#hide-header { transition: all .4s ease!important; }
</style>
Там, где Вы видите transition: all .4s ease!important; это управляет скоростью, с которой заголовок поднимается и опускается. 0,4 секунды — это 0,4 секунды. Так, например, если вы установите значение 1 с, то для подъёма и опускания заголовка потребуется целая секунда. Вы можете настроить это значение, чтобы получить нужную скорость анимации для вашего заголовка.
Заголовок — это не просто верхняя часть страницы, а важный элемент взаимодействия с пользователем. Варианты, такие как прозрачные заголовки, появляющиеся меню и использование пользовательского CSS, помогут вам создать уникальный стиль, который подчеркнёт индивидуальность Вашего бренда. Надеемся, что эти идеи вдохновят Вас на создание креативного и функционального заголовка для Вашего сайта на Elementor!