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

什么是垂直粘性标题？

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

准备工作

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

1. 安装并激活了 Elementor Pro 插件（因为粘性效果需要 Pro 版本）。
2. 创建了一个新的页面或准备在现有页面上添加垂直粘性标题。
3. 已了解 Elementor 容器的基本用法（建议在 Flexbox 容器模式下操作）。

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

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

进入模板创建页面

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

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

选择页面类型

1. 在模板库顶部选择 “页面（Pages）” 标签。
2. 在库中浏览可用的页面模板。可以使用搜索框查找适合的模板样式，如“服务”或“公司”。

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

步骤二：在 Elementor 中创建容器

1、添加容器

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

2、设置容器方向

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

3、定义容器宽度

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

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

插入标题和导航项

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

添加列表

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

• 添加后：

添加项目

• 关于我们：点击后跳转至公司简介部分。
• 服务项目：跳转至服务项目介绍区域。
• 客户评价：跳转至客户反馈部分。
• 联系我们：跳转至联系信息和表单。

可以修改名称和图标。

设置锚链接

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

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

• 设置锚点链接
  • 回到图标列表关于我们处，添加#about-us锚点链接后就可以点击跳转。

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

自定义导航栏样式

• 在“样式”选项卡中，可自定义字体、颜色和间距，使其与网站风格一致。

• 可设置背景颜色、边距和阴影效果，使导航栏更加清晰和独立。

步骤四：设置粘性效果

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

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

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

• 添加自定义 CSS 代码

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

#sidebar{
    position: fixed; /* 固定侧边栏位置，滚动时不移动 */
    left: 0; /* 侧边栏对齐页面左侧 */
    top: 0; /* 侧边栏从页面顶部开始 */
    height: 100vh; /* 设置侧边栏高度为视窗高度 */
    width: 200px; /* 调整侧边栏宽度，根据需求更改 */
    z-index: 10; /* 保证侧边栏位于其他元素之上 */
    padding-top: 250px; /* 可根据需要调整顶部内边距 */
    overflow-y: auto; /* 当侧边栏内容较长时允许滚动 */

    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 垂直排列内容 */
    justify-content: center; /* 垂直居中内容 */
}

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

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

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

步骤六：预览与发布

1. 预览效果
   点击页面的“预览”按钮，查看粘性标题在页面滚动时的表现。确保容器在滚动时始终固定在页面顶部，不会被其他元素覆盖。
2. 调整内容
   根据预览效果，调整标题内容的大小、对齐方式以及容器的边距，确保内容清晰且不影响页面其他元素的布局。
3. 发布页面
   在确认一切效果正常后，点击“发布”按钮将页面上线。你的垂直粘性标题已经创建完成。

总结：

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