如何使用 Divi 的足球俱乐部布局包创建游戏记分牌
已发表: 2018-10-24每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。 本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的足球俱乐部布局包创建一个很酷的游戏记分牌。 我们将仅使用 Divi 的内置选项创建这个最新的游戏记分牌，让我们开始吧！
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的最终结果。
上传足球俱乐部布局包的布局包
要创建本教程，我们将使用 Soccer Club Layout Pack 的登录页面，因此请继续使用此布局添加一个新页面。
添加新部分
然后，在此处添加一个新部分：
背景颜色
打开部分设置，然后添加背景颜色。
- 背景颜色：#f4f4f4
间距
也可以使用间距值。
- 顶部填充：55px
- 底部填充：140px
克隆行和放置在部分
定位行并创建克隆
为了节省时间，我们将在下一节中克隆标题行。
放置在新部分
更改文本
更改行中文本模块的副本以匹配新部分。
添加第 2 行
列结构
在上一行的正下方，使用以下列结构添加新行：
背景颜色
打开行设置并更改背景颜色。
- 背景颜色：#ffffff
第 1 列背景颜色
还要添加第 1 列的背景颜色。
- 第 1 列背景颜色：#fcfcfc
第 3 列背景颜色
对第 3 列重复相同的步骤。
- 第 3 列背景颜色：#fcfcfc
浆纱
也更改大小设置。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 均衡列高：是
间距
接下来删除所有默认填充。
- 顶部填充：0px
- 底部填充：0px
边界
要匹配布局包，请向行添加顶部和底部边框。
- 底部边框宽度：8px
- 底部边框颜色：#00aaff
盒子阴影
最后，添加一个微妙的框阴影以在页面上创建深度。
- 框阴影垂直位置：20px
- 框阴影模糊强度：80px
- 框阴影传播强度：-20px
- 阴影颜色：rgba(0,0,0,0.56)
将文本模块 #1 添加到第 1 列
添加内容
是时候开始添加模块了！ 从第 1 列中的文本模块开始并添加一些内容。
背景颜色
接下来更改背景颜色。
- 背景颜色：#E8E8E8
文字设置
继续玩弄文本设置。
- 文字字体：Squada One
- 文本字体样式：大写
- 文字颜色：#333333
- 文字大小：20px
- 文字方向：居中
间距
然后，添加一些自定义间距值。
- 顶部填充：10px
- 底部填充：10px
- 左填充：10px
- 右填充：10px
将文本模块 #2 添加到第 1 列
添加内容
在第 1 列中前一个文本模块的正下方添加一个新的文本模块。完成后，将内容添加到内容框中。
文字设置
接下来更改文本设置。
- 文字字体：Open Sans
- 文字字体粗细：粗体
- 文字颜色：#333333
- 文字大小：18px
- 文字方向：居中
间距
也可以使用间距值。
- 顶部填充：20px
- 底部填充：20px
将图像模块添加到第 1 列
上传俱乐部标志
第 1 列中需要的最后一个模块是一个图像模块，其中包含其中一支参赛球队的俱乐部徽标。
浆纱
上传俱乐部徽标图像后，请转到尺寸设置并进行一些更改。
- 宽度：45%（桌面）、16%（平板电脑）、28%（手机）
- 模块对齐：居中
间距
继续在间距设置中添加自定义边距值。
- 上边距：20px
- 下边距：50px
克隆模块并在第 3 列中放置重复项
完成第 1 列中的所有三个模块后，您可以克隆它们并将重复项放在第三列中。
更改内容
当然，您需要更改每个克隆模块的内容。
将文本模块 #1 添加到第 2 列
添加内容
在第二列中，我们将放置日期和结束分数。 首先添加一个带有日期的文本模块。
背景颜色
接下来添加与布局包匹配的背景颜色。
- 背景颜色：#00aaff
文字设置
还要更改文本设置。
- 文字字体：Squada One
- 文本字体样式：大写
- 文字颜色：#FFFFFF
- 文字大小：42px
- 文字方向：居中
间距
然后，转到间距设置并为模块提供更多填充。
- 顶部填充：30px
- 底部填充：30px
能见度
最后，在手机和平板电脑上禁用该模块。
将文本模块 #2 添加到第 2 列
添加内容
第 2 列中的第二个文本模块需要包含游戏分数。
文字设置
添加内容后，更改文本设置。
- 文字字体：Squada One
- 文字颜色：#333333
- 文字大小：150px
- 文本行高：1em
- 文字方向：居中
间距
继续修改间距值。
- 上边距：40px（桌面），20px（平板和手机）
- 下边距：20px（平板电脑和手机）
- 左填充：10px
- 右填充：10px
能见度
在手机和平板电脑上也隐藏此模块。 在下一部分中，我们将为较小的屏幕尺寸创建替代方案。
克隆两个模块并放入第 1 列
克隆您可以在第 2 列中找到的两个模块，并将重复项放在其他模块上方的第一列中。
更改可见性
我们正在使用这两个模块来在平板电脑和手机上获得更好的结果。 要确保这些模块仅显示在较小的屏幕上，请在桌面上禁用它们。
添加第 3 行
列结构
在下一行，我们将在桌面上显示不同的目标。 使用以下列结构：
背景颜色
在不添加任何模块的情况下，打开行设置并更改背景颜色。
- 背景颜色：#FFFFFF
第 2 列背景颜色
还要更改第 2 列的背景颜色。
- 第 2 列背景颜色：#f7f7f7
浆纱
接下来在大小设置中删除列之间的所有空间。
- 使用自定义装订线宽度：是
- 天沟宽度：0
- 均衡列高：是
间距
也添加自定义间距值。
- 顶部填充：0px
- 底部填充：0px
- 第 1 列底部填充：100px
- 第 1 列右填充：10px
- 第 3 列左填充：10px
边界
然后，为该行添加一个微妙的底部边框。
- 底部边框宽度：8px
- 底部边框颜色：#00aaff
盒子阴影
要为页面创建深度，请添加行框阴影。
- 框阴影垂直位置：20px
- 框阴影模糊强度：80px
- 框阴影传播强度：-20px
- 阴影颜色：rgba(0,0,0,0.56)
能见度
如前所述，我们仅使用此行在桌面上显示目标，因此请继续在手机和平板电脑上禁用该行。 稍后，我们将创建平板电脑和手机的替代品。
将文本模块 #1 添加到第 1 列
添加内容
将新的文本模块添加到包含第一个目标详细信息的第一列。
文字设置
接下来更改文本设置。
- 文字字体：Squada One
- 文本字体样式：大写
- 文字颜色：#333333
- 文字大小：27px
- 文字方向：右
间距
也可以使用间距值。
- 上边距：100px
- 底部填充：20px
边界
继续添加一个微妙的底部边框。
- 底部边框宽度：1px
- 底部边框颜色：#333333
克隆文本模块两次
更改重复项的间距
克隆您刚刚创建的文本模块两次并更改两个副本的间距值。
- 上边距：200px
- 底部填充：20px
克隆文本模块 #1 并在第 3 列中放置重复项
更改文本设置
再次克隆第 1 列中的第一个文本模块并将副本放置在第 3 列中。继续更改文本方向。
- 文本方向：左
更改间距
上边距也需要增加。
- 上边距：200px
克隆第 3 列中的文本模块
您现在可以再次克隆此文本模块。
添加第 4 行
列结构
是时候添加最后一行了！ 选择以下列结构：
背景颜色
更改行的背景颜色。
- 背景颜色：#FFFFFF
浆纱
接下来删除列之间的所有空间。
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
添加一些额外的顶部和底部填充。
- 顶部填充：100px
- 底部填充：100px
边界
我们还需要为这一行添加一个微妙的底部边框。
- 底部边框宽度：8px
- 底部边框颜色：#00aaff
盒子阴影
接下来，向该行添加一个框阴影。
- 框阴影垂直位置：20px
- 框阴影模糊强度：80px
- 框阴影传播强度：-20px
- 阴影颜色：rgba(0,0,0,0.56)
能见度
最后，隐藏桌面上的行。
添加文本模块 #1
添加内容
在行的列中添加一个新的文本模块并添加目标详细信息。
文字设置
接下来更改文本设置。
- 文字字体：Squada One
- 文本字体样式：大写
- 文字大小：27px
- 文字方向：右
间距
接下来使用自定义间距值。
- 右边距：150px
- 底部填充：20px
边界
我们还添加了一个微妙的底部边框。
- 底部边框宽度：1px
- 底部边框颜色：#333333
克隆文本模块
更改文本设置
克隆您创建的文本模块并更改副本的文本方向。
- 文本方向：左
间距
还要修改间距值。
- 上边距：200px
- 左边距：150px
根据需要多次克隆两个文本模块
您现在可以根据需要多次克隆这些模块以显示所有不同的目标。
预览
现在我们已经完成了所有步骤，让我们最后看看在不同屏幕尺寸上的结果。
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的 Soccer Club Layout Pack 创建游戏记分牌。 这是为您的网站添加更多激励措施并与您的受众建立联系的好方法。 如果您有任何问题或建议，请务必在下方评论区留言！