如何在 Elementor 中创建带有容器的垂直粘性标题

什么是垂直粘性标题？

垂直粘性标题是一种固定在页面侧边的标题栏，当用户向下滚动页面时，标题栏会保持在页面的可见范围内，方便访问其他页面区域或快速导航。此设计可用于目录、导航菜单、联系信息等内容，使用户浏览更为方便。

准备工作

在开始之前，确保你已经具备以下条件：

安装并激活了 Elementor Pro 插件（因为粘性效果需要 Pro 版本）。

创建了一个新的页面或准备在现有页面上添加垂直粘性标题。

已了解 Elementor 容器的基本用法（建议在 Flexbox 容器模式下操作）。

步骤一：创建单一页面模板

我们此次创建单一页面模板，对这个模板创建带有容器的垂直粘性标题。

进入模板创建页面

在 WordPress 后台，导航到 Elementor > 模板 > 新建。

在弹出的窗口中选择 单一页面 作为模板类型，并命名模板，例如“企业服务页面模板”。

选择页面类型

在模板库顶部选择 “页面（Pages）” 标签。

在库中浏览可用的页面模板。可以使用搜索框查找适合的模板样式，如“服务”或“公司”。

如果是专门用于某一类页面，也可以在条件设置中添加特定条件。

步骤二：在 Elementor 中创建容器

1、添加容器

在页面中，点击“添加新容器”并拖动到页面设计区域。这个容器将作为垂直粘性标题的父容器。

2、设置容器方向

选中容器，在左侧的设置面板中，将容器的方向设置为 垂直，即纵向排列，以便内容能够纵向堆叠。这一步是实现垂直标题的关键。

3、定义容器宽度

在“样式”选项卡中，将容器的宽度设置为一个合适的尺寸，例如 200px 或更小，以确保它不会占用页面过多空间。可以根据页面设计和需求自定义这个宽度。

步骤三：创建垂直粘性导航栏

插入标题和导航项

在容器中，添加一个“标题”小部件，将标题设置为“快速导航”或“目录”。

添加列表

在标题下面，在与标题同一个容器内继续添加 图标列表 或 按钮小部件，用作导航项目，我们使用图标列表。添加后：

添加项目

关于我们：点击后跳转至公司简介部分。

服务项目：跳转至服务项目介绍区域。

客户评价：跳转至客户反馈部分。

联系我们：跳转至联系信息和表单。

可以修改名称和图标。

设置锚链接

对每个导航项的按钮或图标列表添加锚链接。为页面的各个内容部分设置锚点，例如 #about-us、#services、#testimonials、#contact-Us 等。

设置关于我们的锚点在 Elementor 编辑器中，找到 “菜单锚点” 小部件。将该小部件拖动到“About Us”部分的标题上方（或其他合适的位置）。在小部件的设置中，为锚点输入一个名称（例如 about-us），以便以后链接到该位置。设置锚点链接回到图标列表关于我们处，添加#about-us锚点链接后就可以点击跳转。

其余菜单项按此操作设置其锚链接。

自定义导航栏样式

在“样式”选项卡中，可自定义字体、颜色和间距，使其与网站风格一致。可设置背景颜色、边距和阴影效果，使导航栏更加清晰和独立。

步骤四：设置粘性效果

要使侧边栏在用户滚动时保持固定，请按照以下步骤操作：

为导航栏和内容区域设置 CSS ID

选择导航栏容器，并在 “高级 ”选项卡中添加 CSS ID；例如，将 ID 设为sidebar 。

添加自定义 CSS 代码

在 Elementor 中打开自定义 CSS（导航栏容器的全局设置或自定义 CSS）。添加以下代码：

步骤五：添加背景样式与阴影效果（可选）

设置背景颜色
在“样式”选项卡中，选择合适的背景颜色，确保容器在页面上有清晰的区分。

添加阴影效果
为了让粘性标题看起来更具层次感，可以在“框阴影”中设置阴影效果，使其在页面上有悬浮的视觉效果。

步骤六：预览与发布

预览效果
点击页面的“预览”按钮，查看粘性标题在页面滚动时的表现。确保容器在滚动时始终固定在页面顶部，不会被其他元素覆盖。

调整内容
根据预览效果，调整标题内容的大小、对齐方式以及容器的边距，确保内容清晰且不影响页面其他元素的布局。

发布页面
在确认一切效果正常后，点击“发布”按钮将页面上线。你的垂直粘性标题已经创建完成。

总结：

垂直粘性标题是一种固定在页面侧边的导航栏，可以在用户滚动时保持可见，方便他们快速访问页面不同部分。在 Elementor 中创建这种标题涉及几个关键步骤：首先，创建单一页面模板，并添加一个垂直方向的容器作为粘性标题栏的主体。接着，在容器中添加标题和导航项目，使用图标列表或按钮小部件，并为每个项目设置锚链接。然后，应用 CSS 代码来固定侧边栏，确保其在滚动时始终可见。