CodeWatchers

Создайте сокращающийся липкий заголовок с Elementor

Rifat Элементор Apr 4, 2022

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

Создайте сокращающийся липкий заголовок с Elementor

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

Что такое сжимающийся заголовок ?

Уменьшающийся заголовок — это точно такой же заголовок, который вы видите при появлении веб-сайта, но он становится немного меньше, когда вы начинаете прокручивать страницу. Для начала есть стандартный верхний заголовок. Заголовок будет «сжиматься», когда пользователь прокручивает страницу вниз, и вы можете настроить, насколько он сжимается и становится полупрозрачным.

Хотя он становится меньше, заголовок все еще там, когда вы прокручиваете страницу вниз. Существуют различные варианты, например, полностью скрыть заголовок и показать его только тогда, когда пользователь прокручивает страницу вверх.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Преимущества сокращающегося заголовка

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

Если вы полностью скроете заголовок, когда пользователь прокручивает страницу вниз, вы не сможете предоставить пользователям постоянный доступ ко всему меню навигации.

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

Как создать сокращающийся заголовок

Когда у вас будет готов готовый заголовок, можно приступать к работе. Остальная часть поста поможет вам уменьшить его. Вам понадобится много пользовательского CSS. Однако мы предоставим вам необходимый код и покажем, как изменить его, чтобы он соответствовал вашему сайту.

Редактировать с помощью Elementor

Для начала отредактируйте шаблон заголовка с помощью Elementor Theme Builder.

Чтобы отредактировать шаблон заголовка с помощью Elementor, перейдите в конструктор тем шаблонов на панели инструментов WordPress и выберите «Редактировать с помощью Elementor».

Базовая уборка CSS

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

Первым шагом является доступ к настройкам раздела заголовка. Установите раскрывающийся список тегов HTML в заголовок на вкладке «Макет».

Не должно быть минимальной высоты, а вертикальное выравнивание должно быть установлено по середине на вкладке макета.

Перейдите на вкладку «Дополнительно» и измените класс CSS раздела заголовка на stick-header.

Наконец, откройте виджет изображения, содержащий ваш логотип, и выберите параметр «Дополнительно» в раскрывающемся меню. Затем в области CSS-классов изображения логотипа введите logo:

Эффекты движения, чтобы закрепить заголовок

Функциональность Elementor Motion Effects может использоваться для удержания вашего заголовка в верхней части страницы, пока зрители прокручивают страницу вниз.

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

  • Предположим, что Top выбран в разделе Sticky в раскрывающемся меню.
  • Пожалуйста, удалите любые другие устройства, которые не перечислены в поле «Прикреплено».
  • Смещение эффектов должно быть установлено на 90 (высота вашего заголовка).

Пользовательские CSS

Последний шаг перед тем, как мы закончим, — это добавление пользовательского кода CSS. Вот основной код, который вы будете использовать. Мы рассмотрим, как настроить его в следующих разделах:

Следующий код CSS будет:

  • Чтобы получить доступ к гамбургер-меню, перейдите в левый верхний угол интерфейса Elementor и щелкните его.
  • Стиль темы можно выбрать в раскрывающемся меню «Глобальный стиль».
  • Выберите «Пользовательский CSS» (он будет синим вместо «обычного» красного цвета Element или после открытия интерфейса стиля темы)
/***
* class: .sticky-header
*/
header.sticky-header {
	--header-height: 100px;
	--shrink-header-to: 0.6;
	--transition: .45s cubic-bezier(.4, 0, .2, 1);
	background-color: rgba(244, 245, 248, 1);
	transition: background-color var(--transition),
				backdrop-filter var(--transition),
				box-shadow var(--transition);
}

/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8);
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
	header.sticky-header {
		--header-height: 70px;
	}
}

/***
* class: .logo
*/
header.sticky-header .logo img {
	transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
	transform: scale(.8);
}

Настроить CSS

Этот CSS можно настроить в соответствии с вашими конкретными потребностями, поэтому давайте сейчас рассмотрим, как это сделать. Рекомендуется использовать редактор кода, такой как Visual Studio Code или Atom, вместо редактирования CSS непосредственно в интерфейсе Elementor. Пользователи Windows, Mac и Linux могут извлечь выгоду из этих редакторов с открытым исходным кодом.

Нашим предпочтительным инструментом будут пользовательские свойства CSS (или переменные CSS). Эти элементы управления позволяют точно настроить эффект уменьшения заголовка. Если вы внесете одно изменение в пользовательское свойство, весь код CSS будет обновлен, чтобы отразить это изменение.

Всего можно настроить пять факторов. Вам даже не нужно менять их, если вы не хотите использовать –, просто оставьте их как есть, если вам нравится, как они работают!

Чтобы помочь вам, мы включили пять переменных CSS и их значения по умолчанию ниже:

  • –высота заголовка: 90px;
  • –непрозрачность: 0,90;
  • –shrink-header-to: 0,80;
  • –sticky-background-color: #0e41e5;
  • –transition: 300 мс облегчение входа-выхода;

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

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

  • До : –header-height: 90px;
  • После : –header-height: 100px;

Давайте познакомимся с этими переменными.

Липкий фоновый цвет (--sticky-background-color)

Цвет фона "сжатого" заголовка, который отображается, когда посетители прокручивают страницу вниз, управляется свойством Sticky Background Color. Изменение цвета не обязательно должно совпадать с цветом вашего заголовка, если это не то, что вы предпочитаете.

Например, в шаблоне Digital Agency фон заголовка изначально имеет градиент. Цвет заголовка становится сплошным синим по мере того, как посетители прокручивают страницу вниз, а заголовок становится меньше (вы можете видеть это в видео-примере с самого начала).

Высота заголовка (--header-height)

В Elementor атрибут «Высота заголовка» определяет высоту вашего заголовка — он должен соответствовать высоте раздела вашего заголовка. Установка этого значения на 90 пикселей была хорошей отправной точкой в ​​инструкции.

Однако, если вы решите изменить высоту, обязательно сделайте это в свойстве CSS, а также в настройках раздела заголовка.

Чтобы избежать проблем с эффектом сжатия, мы не рекомендуем высоту заголовка более 100пикселей.

Непрозрачность (--opacity)

Степень прозрачности вашего уменьшающегося заголовка контролируется свойством Opacity:

  • 0 означает, что заголовок будет невидим.
  • 1 означает, что вообще не будет видимого заголовка (нет прозрачности)

Непрозрачность в нашем примере кода установлена ​​на 0,9, что делает его почти полностью непрозрачным. Этот номер можно изменить в соответствии с вашими требованиями. Уменьшите значение до нуля, чтобы сделать его более очевидным.

Сжать заголовок в (--shrink-header-to)

Когда посетитель начинает прокручивать страницу вниз, атрибут «Сжать меня» определяет, насколько уменьшится ваш заголовок и логотип. Это означает, что ваш заголовок и логотип уменьшатся, например, до 80% от их исходного размера.

Переход (--переход)

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

Лучше оставить что-то как есть, но у вас есть возможность изменить это при необходимости.

Таким образом, обновленный CSS для уменьшающегося заголовка будет выглядеть следующим образом:

header.sticky-header {
	--header-height: 100px; /* Set your own header height */
	--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	background-color: rgba(244, 245, 248, 1); /* Set your own background color */

	transition: background-color var(--transition-timing),
				backdrop-filter var(--transition-timing),
				box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
	-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
	backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
	transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
	transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
	width: auto;
}

Окончание мыслей

С Elementor очень легко работать, так как он стал одним из самых популярных конструкторов страниц для множества веб-разработчиков по всему миру. Наличие такого интерактивного дизайна привлечет больше посетителей на ваш сайт. Если у вас есть вопросы, не стесняйтесь спросить. У нас есть огромное количество руководств по Elementor на нашем сайте, посмотрите их и дайте нам знать, что мы должны рассмотреть дальше.

Divi WordPress Theme