什么是垂直粘性标题?
垂直粘性标题是一种固定在页面侧边的标题栏,当用户向下滚动页面时,标题栏会保持在页面的可见范围内,方便访问其他页面区域或快速导航。此设计可用于目录、导航菜单、联系信息等内容,使用户浏览更为方便。
准备工作
在开始之前,确保你已经具备以下条件:
- 安装并激活了 Elementor Pro 插件(因为粘性效果需要 Pro 版本)。
- 创建了一个新的页面或准备在现有页面上添加垂直粘性标题。
- 已了解 Elementor 容器的基本用法(建议在 Flexbox 容器模式下操作)。
步骤一:创建单一页面模板
我们此次创建单一页面模板,对这个模板创建带有容器的垂直粘性标题。
进入模板创建页面
- 在 WordPress 后台,导航到 Elementor > 模板 > 新建。
- 在弹出的窗口中选择 单一页面 作为模板类型,并命名模板,例如“企业服务页面模板”。
选择页面类型
- 在模板库顶部选择 “页面(Pages)” 标签。
- 在库中浏览可用的页面模板。可以使用搜索框查找适合的模板样式,如“服务”或“公司”。
- 如果是专门用于某一类页面,也可以在条件设置中添加特定条件。
步骤二:在 Elementor 中创建容器
1、添加容器
在页面中,点击“添加新容器”并拖动到页面设计区域。这个容器将作为垂直粘性标题的父容器。
2、设置容器方向
选中容器,在左侧的设置面板中,将容器的方向设置为 垂直,即纵向排列,以便内容能够纵向堆叠。这一步是实现垂直标题的关键。
3、定义容器宽度
在“样式”选项卡中,将容器的宽度设置为一个合适的尺寸,例如 200px 或更小,以确保它不会占用页面过多空间。可以根据页面设计和需求自定义这个宽度。
步骤三:创建垂直粘性导航栏
插入标题和导航项
- 在容器中,添加一个“标题”小部件,将标题设置为“快速导航”或“目录”。
添加列表
- 在标题下面,在与标题同一个容器内继续添加 图标列表 或 按钮小部件,用作导航项目,我们使用图标列表。
- 添加后:
添加项目
- 关于我们:点击后跳转至公司简介部分。
- 服务项目:跳转至服务项目介绍区域。
- 客户评价:跳转至客户反馈部分。
- 联系我们:跳转至联系信息和表单。
可以修改名称和图标。
设置锚链接
对每个导航项的按钮或图标列表添加锚链接。为页面的各个内容部分设置锚点,例如 #about-us
、#services
、#testimonials
、#contact-Us
等。
- 设置关于我们的锚点
- 在 Elementor 编辑器中,找到 “菜单锚点” 小部件。将该小部件拖动到“About Us”部分的标题上方(或其他合适的位置)。在小部件的设置中,为锚点输入一个名称(例如
about-us
),以便以后链接到该位置。
- 在 Elementor 编辑器中,找到 “菜单锚点” 小部件。将该小部件拖动到“About Us”部分的标题上方(或其他合适的位置)。在小部件的设置中,为锚点输入一个名称(例如
- 设置锚点链接
- 回到图标列表关于我们处,添加
#about-us
锚点链接后就可以点击跳转。
- 回到图标列表关于我们处,添加
- 其余菜单项按此操作设置其锚链接。
自定义导航栏样式
- 在“样式”选项卡中,可自定义字体、颜色和间距,使其与网站风格一致。
- 可设置背景颜色、边距和阴影效果,使导航栏更加清晰和独立。
步骤四:设置粘性效果
要使侧边栏在用户滚动时保持固定,请按照以下步骤操作:
- 为导航栏和内容区域设置 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; /* 垂直居中内容 */
}
步骤五:添加背景样式与阴影效果(可选)
设置背景颜色
在“样式”选项卡中,选择合适的背景颜色,确保容器在页面上有清晰的区分。
添加阴影效果
为了让粘性标题看起来更具层次感,可以在“框阴影”中设置阴影效果,使其在页面上有悬浮的视觉效果。
步骤六:预览与发布
- 预览效果
点击页面的“预览”按钮,查看粘性标题在页面滚动时的表现。确保容器在滚动时始终固定在页面顶部,不会被其他元素覆盖。 - 调整内容
根据预览效果,调整标题内容的大小、对齐方式以及容器的边距,确保内容清晰且不影响页面其他元素的布局。 - 发布页面
在确认一切效果正常后,点击“发布”按钮将页面上线。你的垂直粘性标题已经创建完成。
总结:
垂直粘性标题是一种固定在页面侧边的导航栏,可以在用户滚动时保持可见,方便他们快速访问页面不同部分。在 Elementor 中创建这种标题涉及几个关键步骤:首先,创建单一页面模板,并添加一个垂直方向的容器作为粘性标题栏的主体。接着,在容器中添加标题和导航项目,使用图标列表或按钮小部件,并为每个项目设置锚链接。然后,应用 CSS 代码来固定侧边栏,确保其在滚动时始终可见。
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |