WordPress divi主题

如何使用 Divi 的足球俱乐部布局包创建游戏记分牌

by | May 18, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。 本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 的足球俱乐部布局包创建一个很酷的游戏记分牌。 我们将仅使用 Divi 的内置选项创建这个最新的游戏记分牌,让我们开始吧!

google广告开户

预览

在我们深入教程之前,让我们快速浏览一下不同屏幕尺寸的最终结果。

记分牌

上传足球俱乐部布局包的布局包

要创建本教程,我们将使用 Soccer Club Layout Pack 的登录页面,因此请继续使用此布局添加新页面。

记分牌

添加新部分

然后,在此处添加一个新部分:

记分牌

背景颜色

打开部分设置,然后添加背景颜色。

  • 背景颜色:#f4f4f4

记分牌

间距

也可以使用间距值。

WordPress divi主题
  • 上边距:55px
  • 底部填充:140px

记分牌

克隆行并在部分中放置

定位行并创建克隆

为了节省时间,我们将在下一节中克隆标题行。

记分牌

放置在新的部分

将重复的行放在新部分中。

记分牌

更改文本

更改行中文本模块的副本以匹配新部分。

记分牌

添加第 2 行

立柱结构

在上一行的正下方,继续使用以下列结构添加新行:

记分牌

背景颜色

打开行设置并更改背景颜色。

fiverr建站WordPress程序员
  • 背景颜色:#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 列中的文本模块开始并添加一些内容。

记分牌

JasperAI 10000字免费额度试用

背景颜色

接下来更改背景颜色。

  • 背景颜色:#E8E8E8

记分牌

文字设置

继续玩弄文本设置。

  • 文字字体:Squada One
  • 文本字体样式:大写
  • 文字颜色:#333333
  • 文字大小:20px
  • 文本方向:中心

记分牌

间距

然后,添加一些自定义间距值。

WordPress备份工具updrafplus
  • 上边距: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 列底部填充:100 像素
  • 第 1 列右内边距:10 像素
  • 第 3 列左填充:10 像素

记分牌

边界

然后,为该行添加一个微妙的底部边框。

  • 底部边框宽度: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 列中。继续更改文本方向。

记分牌

更改间距

上边距也需要增加。

记分牌

克隆第 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 创建游戏记分牌。 这是为您的网站添加更多激励措施并与您的受众建立联系的好方法。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题