Липкий заголовок остается прикрепленным к верхней части экрана, пока посетитель прокручивает. Ваш логотип, меню и кнопка вызова к действию остаются доступными, независимо от того, как далеко кто-то зайдет, поэтому почти каждый сайт SaaS и агентства поставляет один.
В этом руководстве показано, как создать липкий заголовок в Elementor с помощью бесплатного Мастер-создатель тем аддонов, так что вам не понадобится Elementor Pro. И пока я использую здесь Master Addons, метод универсален: построить заголовок как шаблон, затем установить его положение контейнера в Исправлено Любой конструктор заголовков, который позволяет редактировать заголовок в Elementor, следует за теми же тремя щелчками мыши.
Версия этого поста 2020 года говорила вам опустить идентификатор CSS на раздел и вставить его в виджет Меню навигации Это была эпоха Разделов Elementor использовал Flexbox Containers в качестве своего макета по умолчанию начиная с 3.6, и теперь контроль положения находится прямо в панели, так что весь танец CSS ID исчез.
Что на самом деле представляет собой липкий заголовок
Два разных поведения называются одним и тем же именем, и их смешивание - вот почему люди в конечном итоге охотятся за обстановкой, которой не существует.
А фиксированный заголовок находится на экране с момента загрузки страницы и никогда не уходит, Вот что position: fixed делает, и мы тут так строим.
А заголовок липкий-на-прокрутке сидит наверху нормально, прокручивает, затем сползает обратно, когда посетитель прокручивает вверх. Вы увидите, что это называется умный прокрутка или прятать на прокрутке. Он нуждается в эффекте прокрутки, и Elementor сохраняет те, что в Pro.
Для большинства сайтов фиксированный заголовок - тот, который вам действительно нужен, и именно его вы можете построить бесплатно.
Проблема: ваш заголовок прокручивается
Вот отправная точка. нормальный заголовок Elementor сидит в верхней части страницы, как и любой другой контейнер.
Прокрутите немного вниз, и оно исчезло. Логотип, меню, кнопку "Запросить бесплатную демонстрацию", все это выключите из верхней части экрана. Таким образом, посетитель, который доберется до вашего раздела цен и хочет нажать "Контакт", должен прокрутить обратно, чтобы снова найти меню.
Вот и вся проблема, которую решает липкий заголовок.
Прежде чем начать
Вам нужен бесплатный Elementor версии 3.6 или новее, чтобы контейнеры были включены.
Также вам нужен шаблон заголовка, чтобы применить настройку к. Собственный Theme Builder от Elementor - только Pro-only, поэтому возьмите бесплатный: Мастер Аддоны включает бесплатную конструктор заголовков, и его Theme Builder обрабатывает нижние колонтитулы, 404, архивы, и одиночные шаблоны тоже.
Уже есть шаблон заголовка из другого плагина? Перейти к шагу 2. Настройка позиции - собственный Elementor, поэтому он ведет себя одинаково, откуда взялся ваш заголовок.
Шаг 1: Откройте шаблон заголовка в Elementor
Перейти к Мастер-аддоны > Создатель тем. Ваши шаблоны перечислены по типу. У Mine есть заголовок и нижний колонтитул, оба Active, оба настроены на отображение по всему сайту.
Заголовка еще нет? Нажмите Добавить новый шаблон, установить тип в Заголовок, включить активацию и установить условие для Весь сайт. The документы конструктора заголовков прикройте его, и поток тот же, через который я прошел руководство по редактированию нижнего колонтитула в Elementor.
Наведите шаблон заголовка и нажмите Редактировать с помощью Elementor. Заголовок открывается на собственном холсте.
Шаг 2: Выберите контейнер заголовка
Люди постоянно ошибаются, поэтому будьте точны: вы хотите внешний контейнер из заголовка. не логотип, не виджет меню навигации и не вложенный контейнер, спрятанный внутри него.
Надежный способ убедиться в этом Структура панель, значок слоев в верхней панели. щелкните контейнер верхнего уровня в этом дереве, и весь заголовок должен выделяться. Если загорается только логотип или меню, вы схватили дочерний элемент, и установка положения на нем прикрепит к экрану этот один виджет вместо заголовка. Это выглядит странно, и первое, что нужно проверить, странный ли ваш результат.
Шаг 3: Установите положение контейнера в фиксированное
Выбрав контейнер заголовка, откройте Продвинутый вкладка и разверните Макет раздел. Должность у dropdown есть три варианта.
По умолчанию это то, что у вас есть сейчас: заголовок прокручивается со страницей Абсолют привязывает заголовок к странице, а не к экрану, поэтому он все равно прокручивается, что для наложения заголовков, а не липких. исправлено привязывает его к окну просмотра, и это тот, который вы хотите.
Выбирать Фиксированный, и панель расширяется вместе с органами управления ориентацией.
Установите горизонтальную ориентацию влево со смещением 0, и вертикальная ориентация вверх со смещением 0. Ноль на обоих приклеивает заголовок к самому верхнему левому углу смотрового окна. Поднимите вертикальное смещение, если вы предпочитаете, чтобы заголовок плавал немного ниже верхнего края.
Элементор также бросит в вас предупреждение: “Custom позиционирование не считается лучшей практикой для адаптивного веб-дизайна и не должно использоваться слишком часто.” Игнорируйте это. это общее предостережение против разброса фиксированных и абсолютных элементов через макет, а фиксированный заголовок - это хрестоматийный случай, когда это правильный вызов. Просто проверьте мобильный вид, когда закончите, к чему я вернусь.
Шаг 4: Повысьте z-индекс
Все еще в разделе "Макет" найдите Z-индекс поле и установите его на что-то удобно высокое. Я использую 99.
Z-индекс решает, какой элемент сидит сверху, когда два перекрываются. Фиксированный заголовок гарантированно перекрывает содержимое вашей страницы, когда посетитель прокручивает, и если его z-индекс слишком низок, контент прокручивается прямо над ним. Это классическая ошибка, из-за которой заголовок технически липкий, но ползунки, всплывающие окна и изображения проскальзывают прямо через него.
Если что-то все еще покрывает заголовок, увеличивайте число. Ему нужно только превзойти все, чему он проигрывает, и множество плагинов слайдеров и всплывающих окон устанавливают свой собственный z-индекс тысячами.
Шаг 5: Опубликовать
Хит Публиковать.
Откройте живой сайт и прокрутите. Заголовок остается заблокированным в верхней части экрана на всем протяжении вниз.
Если он все еще прокручивается на передней части, но выглядит прямо в редакторе, очистите свой кэш, прежде чем начать отладку. плагин кэширования с радостью будет какое-то время обслуживать старый CSS заголовка.
Три вещи, которые нарушают фиксированный заголовок, и исправления
На шагах выше заголовок закрепляется. Далее следует, что отличает липкий заголовок, который выдерживает контакт с реальным сайтом, от того, который вы вырываете обратно неделю спустя.
1. Заголовок становится прозрачным, и содержимое отображается
Фиксированный элемент выводится из обычного потока страниц, поэтому он перестает наследовать фон от чего-либо. Если вы никогда не устанавливаете цвет фона в заголовке, содержимое вашей страницы прокручивается под он и отображается прямо, и текст вашего меню превращается в нечитаемый суп в тот момент, когда за ним проходит изображение.
Выберите контейнер заголовка, перейдите по адресу Стиль > Фон, и дать ему сплошной цвет. если вы действительно хотите прозрачный заголовок, это действительный вид, но затем спроектировать первый раздел, чтобы работать за ним.
2. Первый раздел скрывается за заголовком
Та же первопричина. фиксированный заголовок больше не занимает места в макете, поэтому первый раздел скользит вверх, чтобы заполнить оставленный зазор, и часть его оказывается в ловушке за заголовком.
Добавьте верхнюю подкладку в свой первый раздел, примерно соответствующую высоте заголовка Если заголовок 80px высотой, дайте герою 80px верхней подкладки Если вы не уверены, какой он рост, щелкните правой кнопкой мыши заголовок на переднем конце и осмотрите его; высота прямо там, в инструментах браузера.
3. Он ест экран на мобильном телефоне
Экраны телефонов короткие Заголовок, который хорошо себя чувствует на мониторе рабочего стола, может проглотить серьезный кусок видопорта телефона, а затем следовать за посетителем вниз по каждой странице.
Переключитесь на мобильный вид в адаптивном режиме Elementor и отрежьте вертикальную подкладку заголовка. элементы управления положением также доступны для каждого устройства, поэтому вы можете установить положение обратно на Дефолт только на мобильном и пусть заголовок прокручивается там. на длинной странице статьи, которая обычно лучше звонить. если вы запускаете пользовательские точки останова, Пользовательское расширение точек останова позволяет настроить это на реальную ширину устройства.
Работает ли это с другими плагинами заголовков?
Да, и это та часть, которую стоит понять. Позиция: Фиксированный является собственным элементом управления, не функция Master Addons.Master Addons делает здесь ровно одну работу: давая вам бесплатный шаблон заголовка, который открывается в Elementor.Once you're in the editor, липкая часть - это простой Elementor.
Так что если вы строите заголовки с другим конструктором тем, или ваша тема поставляет собственный заголовок, редактируемый Elementor, применяется тот же расширенный > макет > позиция > фиксированный путь. единственное, что меняется, это то, куда вы переходите, чтобы открыть заголовок для редактирования.
Альтернатива без прыжков: позиция липкая с бесплатным пользовательским CSS
Фиксированное позиционирование выводит заголовок из потока страниц, поэтому вам нужно заполнить первый раздел, чтобы за ним ничего не скрывалось. Если вы хотите пропустить этот шаг, CSS position: sticky является альтернативой. он сохраняет заголовок в потоке и закрепляет его только после того, как он достигнет вершины, поэтому нет скачка контента, который нужно исправить.
Загвоздка в том, где вы добавляете CSS. Custom CSS-бокс Elementor для каждого элемента - это функция Pro, но бесплатные Master Addons Пользовательское расширение CSS дает вам тот же ящик бесплатно. выберите контейнер заголовка, откройте его поле Custom CSS и вставьте это:
selector {
position: sticky;
top: 0;
z-index: 99;
}selector является Elementor сокращение для элемента, который вы редактируете, поэтому вам не нужен ID или класс. Один gotcha: если любой родительский контейнер имеет overflow: hidden, липкий молча перестает работать, настолько ясно, что от предка, если заголовок отказывается фиксировать. Полное поведение задокументировано в Ссылка MDN на позицию CSS.
Сравниваются бесплатные методы липкого заголовка
Три из этих маршрутов бесплатны, и каждый соответствует различным потребностям. если вы предпочитаете управляемую панель необработанной вкладке "Дополнительно", "Мастер-аддоны" Расширение позиционирования выставляет одинаковое Фиксированное управление в одном месте.
| Метод | Нужен код | Стоимость | Контент-прыжок | Лучший для |
|---|---|---|---|---|
| Фиксированная позиция (родная или позиционирующая) | Нет | Бесплатно | Нужна фиксация набивки | Всегда видимый заголовок |
| положение: липкий (Custom CSS) | Один фрагмент | Бесплатно | Нет | Чистая планировка, никакого прыжка |
| Эффекты прокрутки Elementor Pro | Нет | Оплачено | Обрабатывается | Скрыть на прокрутке и сжать |
| Выделенный плагин с липким заголовком | Нет | Бесплатно | Обрабатывается | Предварительно построенные эффекты прокрутки |
Добавление усадки или изменения цвета на прокрутке
Хотите, чтобы заголовок уменьшался или менял цвет после прокрутки посетителя? Это считывает расстояние прокрутки, что CSS не может сделать самостоятельно. Несколько строк JavaScript через бесплатные главные дополнения Пользовательское расширение JS может переключать класс в заголовке за порог прокрутки, затем вы стилизуете этот класс в пользовательском CSS. Это больше работа, чем плагин, который передает эффект, поэтому взвешивайте усилия, прежде чем создавать его вручную.
Делаем заголовок достойным того, чтобы его придерживались
Как только он приклеен к экрану, заголовок виден в 100% случаев, так что стоит второго прохода.
Сначала обрежьте высоту. высокий заголовок, который никогда не исчезает, быстро раздражает, и каждый пиксель, который вы сохраняете, является пикселем контента, который может видеть посетитель. Затем посмотрите, что в нем: постоянный слот на экране - хороший дом для вашей лучшей ссылки, будь то демо-версия, цена или кнопка контакта.
Большой сайт? Мастер Аддоны Виджет меню навигации строит мега меню, так что вы можете держать всю структуру в один клик, чтобы заголовок не рос. И следить за весом, так как заголовок теперь загружается на каждую страницу и никогда не разгружается.The Элементорный направляющий стоит прочитать, если время загрузки уже ограничено.
Если вы предпочитаете не строить заголовок с нуля, то Библиотека шаблонов главных аддонов имеет готовые заголовки, которые вы можете импортировать, а затем сделать липкими, выполнив те же шаги Шаблонные наборы отправьте соответствующие заголовки и нижние колонтитулы для всего сайта.
Часто задаваемые вопросы
Могу ли я создать липкий заголовок в Elementor бесплатно?
Да. позиция: Фиксированное управление является частью свободного Elementor. вам нужен только шаблон заголовка, чтобы применить его к, и Master Addons Theme Builder дает вам один бесплатно. собственный Theme Builder от Elementor и его липкие эффекты прокрутки являются только Pro-частями.
В чем разница между фиксированным и липким заголовком?
Фиксированный заголовок всегда виден из загрузки страницы и никогда не прокручивается. липкий заголовок на прокрутке прокручивается, затем сползает обратно, когда посетитель прокручивает вверх. Позиция: Фиксированный дает вам первый. второй нуждается в эффектах прокрутки Elementor Pro.
Почему мой контент прячется за липким заголовком?
Фиксированный заголовок удаляется из обычного потока страниц, поэтому раздел ниже скользит вверх под ним. добавьте верхнюю подкладку в свой первый раздел, примерно соответствующую высоте заголовка, и установите сплошной цвет фона на контейнере заголовка.
Почему содержимое моей страницы прокручивается поверх моего заголовка?
Индекс z слишком низкий. на вкладке "Дополнительно" в разделе "Макет" установите Z-индекс на 99 (или выше) в контейнере заголовка, чтобы он располагался выше всего остального на странице.
Должен ли я использовать липкий заголовок на мобильном телефоне?
Часто нет. фиксированный заголовок съедает скудное вертикальное пространство на телефоне. элементы управления положением Elementor выполняются для каждого устройства, поэтому переключитесь на мобильный вид и установите положение обратно в значение по умолчанию или, по крайней мере, сократите заполнение заголовка.
Завершая
Создание липкого заголовка в Elementor - это три настройки на одном элементе. выберите контейнер заголовка, установите положение в Фиксированное с нулевыми смещениями, поднимите z-индекс. все после этого очистка: дать заголовку твердый фон, заполнить первый раздел так что ничего не скрывается за ним, и проверить, как он чувствует себя на телефоне, прежде чем вы называете это сделано.
Все это работает на бесплатном Elementor. единственное, что вам нужно, это шаблон заголовка для редактирования, который является бесплатным Создатель тем в главных дополнениях предоставляет, наряду с нижним колонтитулом, 404, архив, и одиночные шаблоны. если вы позже хотите остальную часть инструментария, то это то, что Планы Pro обложка, но в этом уроке она ничему не нужна.
Связанное чтение: как редактировать нижний колонтитул в WordPress с помощью Elementor, как создать искаженный фон в Elementorи как создать одностраничный сайт с помощью Elementor.
