spot_img
HomeDivi主题使用教程如何使用 Divi 的设计会议布局包创建数字资源页面

如何使用 Divi 的设计会议布局包创建数字资源页面

当您利用布局的设计元素为您工作时,使用 Divi 设计数字资源页面很容易。 可视化构建器有许多有用的功能,使这个过程变得相当愉快。 但设计并不是一切。 您的资源页面的功能也很重要。 这就是为什么使用 Google Cloud 等第三方存储提供商始终是个好主意,以帮助您快速高效地管理和交付数字下载。 而且,使用 Divi 的模块添加这些下载的链接真的很容易。

在本用例教程中,我将向您介绍如何使用 Divi 的 Design Conference Layout Pack 设计功能性数字资源页面。

以下是我们将共同完成的一些事情:

  1. 使用计划页面布局构建包含三部分内容的资源页面
  2. 创建一个自定义资源菜单,跳转到页面上的不同部分
  3. 在三个资源部分的每一个下添加自定义返回顶部按钮
  4. 将下载文件存储在 Google Cloud 中,并创建指向这些文件的公共链接以在资源页面上使用

让我们开始吧!

抢先看

这是我们将一起创建的资源页面的先睹为快。

WordPress divi主题

抢先看

创建您的数字资源页面

要创建资源页面,请添加一个新页面,将其命名为“Resources”,然后部署 Visual Builder。 从设置菜单中,将 Design Conference Schedule Page 布局添加到您的页面。

时间表布局

有关如何向页面添加布局的详细信息,请查看以设计会议布局包为特色的博客文章。

将标题部分中的标题从“计划”更改为“资源”。 然后复制标题部分正下方的部分。

重复部分

在同一部分中,将顶行文本模块中的标题更新为“会话下载”。 (您只需单击文本并为此使用内联编辑器)

在正下方的行中,将列结构更改为四列并删除除标题为“Opening Statements”的文本模块之外的所有模块。 然后将该文本模块拖到最左侧的列中。

四列行

现在我们准备添加我们的下载链接。 为此,我将使用设计会议主页布局的“特色演讲和演讲者”部分下使用的按钮。 转到具有主页布局的页面(如果您还没有主页布局,则创建一个)。 使用 Visual Builder,将其中一个按钮保存到您的库中,名称为“下载按钮”。

谷歌SEO优化服务

保存按钮

现在返回您的资源页面并将该按钮添加到四列行的第二列。

添加下载按钮

转到内容选项卡下的按钮模块设置,并将按钮文本更新为“幻灯片 (PDF)”。

在设计选项卡下,将按钮对齐方式更改为左对齐。

H10的年终大促

保存设置。

复制并粘贴(或复制)您刚刚创建的按钮并将其直接添加到右侧的第 3 列。 然后将按钮文本更新为“Notes (PDF)”。

接下来,将整行复制两次。 使用每个特色会话更新每一行中的文本模块标题文本。

然后删除该部分中未使用的最后两行。 该部分的最终设计将如下所示。

最后第一节

创建资源链接部分

要创建此部分,请复制您刚刚创建的“会话下载”部分。 然后
将重复部分的第一个文本模块中的标题文本更改为“资源链接”。

资源链接文本

在正下方的行中,将列结构更改为一列,并删除行中的两个按钮模块。 然后将剩余的文本模块内容更新为“Design Inspiration”。

设计灵感

接下来,在刚创建的行下添加一个三列行。 在左栏中添加一个文本模块,并在内容框中添加一个链接。 如果您使用的是 html,请添加以下内容:

高质量外链购买
<a href="enter url here" target="_blank">Link to website</a>

在设计选项卡下,单击链接选项卡并更新以下内容:

链接字体样式:下划线
链接文字大小:16px
链接文字颜色:#4646c4

链接设置

保存设置。

接下来,让我们添加另一类链接,称为“设计博客”。 为此,复制包含“设计灵感”标题文本模块的行以及包含三列链接的行并将它们粘贴到下方。

writesonic

重复链接行

将标题为“Design Inspiration”的文本模块更新为“Design Blogs”。 然后将下面的三列行更改为两列结构。 并且您可以在每个链接旁边添加一些描述文本,以帮助用户更好地理解每个链接必须提供的内容。

博客链接

删除我们在当前部分中未使用的剩余两行。

创建过去的会议部分

我们要为资源页面创建的最后一部分是展示过去会议的视频和下载的部分。

为此,我们将使用我们开始使用的原始计划页面布局的一些剩余设计元素。 在我们刚刚创建的“资源链接”部分下方,您应该仍然有两个原始计划部分。 你会需要这个。

在第一个原始部分中,删除除包含“Day 1 – Wednesday Nov, 23”的行之外的所有行。 现在该部分应该只有一行。 将标题文本更新为“过去的会议”。

在该部分下,添加一个专业部分,其结构为二分之一列结构,行位于右列中。

添加专业部分

然后将一列行添加到右列,并从下面的原始部分中拖入一个 blurb 模块,用于显示会话的时间和位置。

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

拖动广告

使用标题“描述”更新简介设置,并提供一个新的文档图标。

之后,从刚刚添加的 blurb 模块正下方的原始部分中拖入一个切换模块。

拖动切换模块

复制带有新标题“Description”的 blurb 模块,并将其拖到 toggle 模块下。 然后将标题更改为“下载”并给它一个云下载图标。

添加下载简介

在切换模块下,添加一个新的两列行。

添加两列行

然后复制我们在“会话下载”部分创建的按钮之一,并在新行的每一列中粘贴 2 个按钮。

复制和粘贴简介

然后您可以更新按钮文本以反映每个按钮将链接到的下载类型。 这是我添加的四种类型:

视频 (MP4)
音频 (MP3)
幻灯片 (PDF)
注释 (PDF)

您可能需要添加 0px 的自定义底部边距,以去除广告下方的一些空间。

现在将包含会话标题的文本模块之一从下面的原始部分拖到专业部分的左栏中。

拖入标题

现在我们可以添加过去会话的视频记录。 为此,通过输入视频的 url(如果托管在 youtube 或 vimeo 上)在文本模块下添加视频模块,如果您想更好地匹配页面设计,则添加自定义图像覆盖。

添加视频 2

而已。 现在只需复制该部分并根据需要为每个附加会话更新内容。 删除下面剩余的原始部分并保存您的页面。

创建您的资源菜单

对于包含大量内容的资源页面,子导航有助于提高用户快速轻松地找到所需内容的体验。 对于此资源页面,我将向您展示如何添加带有锚链接的自定义菜单,这些锚链接将跳转到页面上的特定部分。 此方法类似于使用 Divi 创建单页网站的方法。

导航到外观 > 菜单并创建一个名为“资源菜单”的新菜单。 对于此菜单,我们将使用三个自定义链接,这些链接将跳转到我们资源页面上的三个部分。 对于第一个自定义链接,在 url 输入框中输入“#downloads”,并在链接文本中输入“Session Downloads”。 然后将其添加到菜单中。

添加自定义链接 1

对于第二个自定义链接,输入 url“#links”和链接文本“Resource Links”。

自定义链接 2

对于第三个自定义链接,输入 url“#past”和链接文本“Past Conference Session”。

自定义链接 3

tiktok siteground

现在我们的菜单已经创建,让我们将它添加到我们的页面。 首先,在布局顶部标题部分的正下方添加一个新的全角部分。 然后向该部分添加一个全角菜单模块。 在菜单设置下的内容选项卡中,选择“资源菜单”作为要显示的菜单,并添加如下背景色:#474bc1。

在设计选项卡设置下更新以下内容:

文字颜色:Lightf
文本方向:居中
菜单字体:Merriweather
菜单字体粗细:粗体
菜单文字大小:16px
菜单字母间距:1px

保存设置。

样式导航

将 CSS ID 添加到您的页面

还记得我们为创建菜单锚链接而添加的自定义链接 url 吗? 现在我们需要为每个链接添加相应的 CSS ID,以便每个链接在用户单击时知道跳转到哪里。

让我们从包含会话下载的第一部分开始。 打开部分设置,导航到高级选项卡,然后在 CSS ID 输入框中输入“下载”。 然后保存您的设置。

CSS 编号 1

对于包含资源链接的下一部分,为 CSS ID 输入“链接”。

CSS 编号 2

对于包含过去会议的最后一部分,为包含该部分标题的部分的 CSS ID 输入“过去”(到两个特殊部分的正上方)。

CSS 编号 3

保存您的设置。

现在,当您单击导航菜单链接时,它们将滚动到相应的部分。

在每个部分下添加自定义返回顶部链接

Divi 有一个内置的返回顶部按钮选项,该选项将浮动在页面的右下角。 您可以在“常规”选项卡下的“Divi”>“主题选项”下轻松启用此选项。

启用 btt 按钮

但是,您也可以在资源页面的每个部分之后创建自己的返回顶部按钮。 这可以为可能没有注意到页面右下角的默认返回顶部按钮的用户创造更好的用户体验。

要创建返回顶部按钮,我们需要在我们的三个资源部分中的每一个的最后一行内容下添加一个新的单列行。

然后我们将复制我们在…中使用的宣传语之一

5分钟生成10篇英文软文article forge软件试用
跨境电商独立站代运营服务综合套餐项目合作请联系客服微信 13564054264
服务项目服务模块服务效果服务周期服务费用 RMB
海外市场调研
与品牌诊断
目标市场调研1份调研报告按次(5-7个工作日)5000
消费受众分析
市场准入条件
竞品发展轨迹
市场销售策略
品牌商业化诊断
TikTok
账号代运营
TikTok账号定位3个账号运营
500条视频内容发布
按季度(50-65个工作日)30000
TikTok内容策划
TikTok视频制作
TikTok账号涨粉
TikTok数据分析
TikTok
直播代运营
TikTok直播策划20-24场直播按月度(20-24个工作日)15000
TikTok网络搭建
TikTok选品分析
TikTok话术提炼
TikTok直播开展
TikTok直播数据分析
TikTok
KOL/KOC营销
TikTok行业达人匹配500-1000个达人邀约/天按月度(20-24个工作日)10000
TikTok行业达人邀约
TikTok行业达人签约
TikTok达人合作跟进
TikTok达人合作完成
海外社媒
代运营
海外社媒运营需求确认insgarm
Facebook
Pinterest
Linkedln
海外社媒运营(4选2)
按季度(50-65个工作日)30000
海外社媒运营方案制订
海外社媒代运营开展
海外社媒活动策划&开展
海外社媒账户涨粉&数据分析
海外线下
代理商拓展
渠道代理目标市场确认主要服务地区为欧美/东南亚
限定1-3个国家
按季度(50-65个工作日)35000
渠道代理商信息抓取
渠道代理商邮件邀约
渠道代理商洽谈准备
渠道代理商签约合作
渠道代理商完成合作
海外广告代投放海外广告账户开户TikTok
Google
Facebook
海外广告代投
(电商/游戏)
按季度(50-65个工作日)开户首充1000美金
10%广告投放佣金
海外广告产品分析
海外广告代投计划制订
海外广告代投内容制作
海外广告代投放开展
海外广告代投效果优化项目合作请联系客服微信 13564054264
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES