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

什么是垂直粘性标题?

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

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

准备工作

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

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

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

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

进入模板创建页面

  1. 在 WordPress 后台,导航到 Elementor > 模板 > 新建
如何在 Elementor 中创建带有容器的垂直粘性标题
  1. 在弹出的窗口中选择 单一页面 作为模板类型,并命名模板,例如“企业服务页面模板”。
如何在 Elementor 中创建带有容器的垂直粘性标题

选择页面类型

  1. 在模板库顶部选择 “页面(Pages)” 标签。
  2. 在库中浏览可用的页面模板。可以使用搜索框查找适合的模板样式,如“服务”或“公司”。
如何在 Elementor 中创建带有容器的垂直粘性标题
  1. 如果是专门用于某一类页面,也可以在条件设置中添加特定条件。

步骤二:在 Elementor 中创建容器

1、添加容器

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

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

2、设置容器方向

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

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

3、定义容器宽度

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

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

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

插入标题和导航项

  • 在容器中,添加一个“标题”小部件,将标题设置为“快速导航”或“目录”。
如何在 Elementor 中创建带有容器的垂直粘性标题

添加列表

  • 在标题下面,在与标题同一个容器内继续添加 图标列表按钮小部件,用作导航项目,我们使用图标列表
如何在 Elementor 中创建带有容器的垂直粘性标题
  • 添加后:
如何在 Elementor 中创建带有容器的垂直粘性标题

添加项目

  • 关于我们:点击后跳转至公司简介部分。
  • 服务项目:跳转至服务项目介绍区域。
  • 客户评价:跳转至客户反馈部分。
  • 联系我们:跳转至联系信息和表单。
如何在 Elementor 中创建带有容器的垂直粘性标题

可以修改名称和图标。

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

设置锚链接

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

如何在 Elementor 中创建带有容器的垂直粘性标题
  • 设置关于我们的锚点
    • 在 Elementor 编辑器中,找到 “菜单锚点” 小部件。将该小部件拖动到“About Us”部分的标题上方(或其他合适的位置)。在小部件的设置中,为锚点输入一个名称(例如 about-us),以便以后链接到该位置。
如何在 Elementor 中创建带有容器的垂直粘性标题
如何在 Elementor 中创建带有容器的垂直粘性标题
  • 设置锚点链接
    • 回到图标列表关于我们处,添加#about-us锚点链接后就可以点击跳转。
如何在 Elementor 中创建带有容器的垂直粘性标题
  • 其余菜单项按此操作设置其锚链接。
如何在 Elementor 中创建带有容器的垂直粘性标题

自定义导航栏样式

  • 在“样式”选项卡中,可自定义字体、颜色和间距,使其与网站风格一致。
如何在 Elementor 中创建带有容器的垂直粘性标题
如何在 Elementor 中创建带有容器的垂直粘性标题
  • 可设置背景颜色、边距和阴影效果,使导航栏更加清晰和独立。
如何在 Elementor 中创建带有容器的垂直粘性标题

步骤四:设置粘性效果

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

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

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

如何在 Elementor 中创建带有容器的垂直粘性标题
  • 添加自定义 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; /* 垂直居中内容 */
}
如何在 Elementor 中创建带有容器的垂直粘性标题

步骤五:添加背景样式与阴影效果(可选)

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

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

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

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

步骤六:预览与发布

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

总结:

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


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/22538

(0)
上一篇 5天前
下一篇 5天前

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
如果您的WordPress网站遇到问题,请提交工单,我们的技术团队将为您提供专业修复服务。