Divi 主题 进阶用法【4】 实例 用 Divi 创建单页网站

时间:2022-01-14 来源:未知网络 作者:996建站网

Divi 可以轻松创建漂亮的单页网站。单页网站一般是用于广告推广,力求一个页面讲清楚所有事情,通过菜单实现单页内容定位来优化阅读体验等。

Divi 的单页侧边栏导航帮助单页内容定位

创建新页面时,您可以轻松启用 Divi 的单页导航选项,实现该页面内容阅读进度的可视化和可点击的展示。您还可以使用自定义锚链接和部分 ID 为完整的单页包创建单页内容定位菜单

Divi 主题 进阶用法【4】 实例 用 Divi 创建单页网站插图

启用单页导航

启用单页导航很容易,并且可以在每个页面的基础上完成。

每当您创建或编辑页面时,请查找文本编辑器右侧的「Divi xxx Settings」框。在此框中,您将看到「Dot Navigation」选项。从下拉菜单中选择「ON」,然后保存页面,默认是关闭的。

Divi 主题 进阶用法【4】 实例 用 Divi 创建单页网站插图

您现在会注意到页面右侧添加了一个浮动导航栏。点导航栏会自动向页面上的每个部分添加一个可点击的链接。添加「分区容器」时,新的圆形链接(或点)将自动添加到浮动侧导航中。用户可以单击这些点以跳到页面上的不同分区。它还可以更轻松地识别访问者在页面上的位置,从而使长格式页面更易于理解和导航。

Divi 主题 进阶用法【4】 实例 用 Divi 创建单页网站插图

如果找不到该设置框,请在编辑页面的顶部位置,找到「Screen Options」下拉选项,点击,进入勾选设置你需要的各个编辑页面选项。

Divi 主题 进阶用法【4】 实例 用 Divi 创建单页网站插图

为一个单页网站创建自定义菜单链接

除了侧面导航之外,还可以将主标题导航转换为单页导航。如果您正在创建一个单页网站,那么您不希望菜单链接指向不同的页面。

相反,这些链接可以指向同一页面上的相关部分,可以定位到这个页面某个文本的特定位置。单击时,它们可以使用平滑滚动效果将您带到页面上的相关部分。这可以使用自定义 ID 来完成。页面上使用构建器构建的任何元素都可以分配一个 ID。您可以通过单击分区容器(或行块容器和模块等)的设置图标并查找高级选项卡的「CSS ID」设置来分配 ID。

一旦分配了 ID,您就可以从导航菜单链接到它。例如,假设您有一个名为「关于我们」的分区,并且您希望它链接到描述您公司的页面的那个部分。编辑那分区的设置,然后在「CSS ID」字段中输入「aboutus」,然后单击保存。现在已经分配了一个 ID,我们可以指向它的链接。

Divi 主题 进阶用法【4】 实例 用 Divi 创建单页网站插图1

将菜单链接指向 ID

要创建自定义菜单链接,您需要使用 WordPress 仪表板中的「Appearances > Menus」选项卡向菜单添加新链接。

如果您不熟悉菜单系统,请查看:

https://wordpress.org/support/article/appearance-menus-screen/

Divi 主题 进阶用法【4】 实例 用 Divi 创建单页网站插图2

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序