使用 Elementor 创建一个缩小的置顶标题

你想创建一个随着页面加载而变小的标题? 当访问者向下滚动页面时，缩小的标题将是一个很好的效果来给访问者留下深刻印象。 即使您不打算使用此效果，也值得考虑它是否会成为您网站的一个很好的补充。

在这里，我们将准确地教您如何利用Elementor Pro来缩小您的 WordPress 网站的标题。 在一些自定义 CSS 的帮助下，我们将准确地向您展示完成工作所需要做的事情。

什么是收缩标头?

缩小的标题与您在网站出现时看到的标题完全相同，但当您开始滚动时它会变小一些。 首先，有一个标准的顶部标题。 当用户向下滚动页面时，标题将“缩小”，您可以调整它的缩小程度和半透明程度。

虽然它变小了，但当您向下滚动页面时，标题仍然存在。 有多种选择，例如完全隐藏标题并仅在用户向上滚动时显示它。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

如何创建收缩页眉

当你准备好你的 premadeheader 时，你就可以开始了。 帖子的其余部分将指导您缩小它。 您将需要大量自定义 CSS。 但是，我们会为您提供所需的代码，并向您展示如何更改它以匹配您的网站。

使用 Elementor 编辑

要开始使用，请使用 Elementor Theme Builder 编辑标题模板。

要使用 Elementor 编辑标题模板，请转到 WordPress 仪表板中的模板主题生成器，然后选择使用 Elementor 编辑。

基本 CSS 内务管理

在应用您将在下一节中看到的 CSS 代码之前，您需要稍微清理一下标题。

第一步是访问标题部分的设置。 将 HTML 标记下拉菜单设置为布局选项卡上的标题。

不应该有最小高度，并且垂直对齐应该设置在布局选项卡的中间。

转到高级选项卡并将标题部分的 CSS 类更改为stick-header。

最后，打开包含您的徽标的图像小部件，然后从下拉菜单中选择“高级”选项。 然后，在 logo 图片的 CSS Classes 区域中，输入 logo：

使您的标题保持不变的运动效果

Elementor 的动态效果功能可用于在查看者向下滚动时将标题保持在页面顶部。

您可以通过单击访问该部分的标题设置。 之后，单击“高级”页面并查看“运动效果”选项

• 假设在下拉菜单中的 Sticky 下选择了 Top。

• 请消除任何其他未在“Sticky On”框中列出的设备。

• 效果偏移应设置为 90（标题的高度）。

自定义 CSS

我们完成之前的最后一步是添加自定义 CSS 代码。 这是您将使用的基本代码。 我们将在接下来的部分中讨论如何自定义它：

以下 CSS 代码将：

• 要访问汉堡菜单，请转到 Elementor 界面的左上角并单击它。

• 可以从全局样式下拉菜单中选择主题样式。

• 选择自定义 CSS（主题样式界面打开后，它将是蓝色而不是“常规”Elementor 红色）

/***
* 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 等代码编辑器，而不是直接在 Elementor 界面中编辑 CSS。 Windows、Mac 和 Linux 用户都可以从这些开源编辑器中受益。

CSS 自定义属性将是我们选择的工具（或 CSS 变量）。 这些控件可让您微调递减的标题效果。 如果您对自定义属性进行了一次更改，则整个 CSS 代码将更新以反映该更改。

您总共可以调整五个因素。 如果您不想 –，您甚至不必更改它们，只要您喜欢它们的工作方式就可以保持原样！

为了帮助您，我们在下面包含了五个 CSS 变量及其默认值：

• –页眉高度：90px；
• –不透明度：0.90；
• –shrink-header-to: 0.80;
• –粘性背景颜色：#0e41e5；
• –transition：300ms 缓入缓出；

如果您查看我们的示例代码，您会注意到我们包含了一些自定义属性来代替双破折号“–”。 在冒号之后和分号之前，剩下要做的就是做一个小的编辑。

例如，将标题高度更改为 100 像素，前后将如下所示：

• 之前：–header-height：90px；
• 之后：–header-height: 100px;

让我们来介绍一下这些变量。

粘性背景颜色（--sticky-background-color）

当访问者向下滚动时显示的“缩小”标题的背景颜色由粘性背景颜色属性控制。 如果这不是您喜欢的颜色，则更改颜色不必与标题的颜色相匹配。

例如，在 Digital Agency 模板中，标题背景首先具有渐变。 随着访问者向下滚动并且标题变小，标题的颜色变为纯蓝色（您可以从开头的示例视频中看到这一点）。

标题高度（--header-height）

在 Elementor 中，Header Height 属性决定了标题的高度——它必须与标题部分的高度相匹配。 将其设置为 90px 是该指令的一个很好的起点。

但是，如果您决定更改高度，请务必在 CSS 属性以及标题部分设置中进行。

为避免缩小效果出现问题，我们不提倡标题高度大于 100 像素。

不透明度（--不透明度）

递减标题的半透明程度由 Opacity 属性控制：

• 0 表示标题将不可见。

• 1 表示根本没有可见的标题（没有透明度）

在我们的示例代码中，不透明度设置为 0.9，使其几乎完全不透明。 可以更改此编号以满足您的要求。 将值减小到零以使其更明显。

将标题缩小到 (--shrink-header-to)

当访问者开始向下滚动时，Shrink Me 属性决定了您的标题和徽标将缩小多少。 例如，这意味着您的标题和徽标将减小到其初始大小的 80%。

过渡（--过渡）

如果 Transition 属性设置为“shrunk”，则标头将从其原始大小缩小到该值。

最好保留原样，但如有必要，您可以选择更改它。

因此，缩小标题的更新 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非常容易，因为它已成为全球大量 Web 开发人员最想要的页面构建器之一。 拥有这样的交互式设计将为您的网站带来更多访问者。 如果您有任何问题随时问。 我们的网站上有大量Elementor 教程，请查看它们并让我们知道接下来应该介绍什么。