WordPress divi主题

如何为您的 Divi 电子书登陆页面设计引人注目的书评

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

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

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。

google广告开户

本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 的电子书布局包和 Divi 的内置选项为您即将推出的电子书登陆页面设计引人注目的书评。 这是为您的登录页面添加社交证明、提高可信度并以优雅的方式分享人们的简短评论的好方法。

让我们开始吧!

预览

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

桌面

书评

移动的

书评

免费下载书评部分布局

要掌握免费的书评部分布局,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

让我们开始重建吧!

将电子书布局包登陆页面布局上传到新页面

您需要做的第一件事是使用电子书布局包登陆页面布局创建一个新页面,您可以在预制布局中找到该布局。

书评

添加新部分

向下滚动页面布局并在您希望显示书评的任何位置添加一个新部分。

WordPress divi主题

书评

添加新行

立柱结构

继续使用以下列结构添加新行:

书评

第 1 列渐变背景

在不添加任何模块的情况下,打开行设置并将渐变背景添加到第一列。

  • 颜色1:#ffffff
  • 颜色 2:#f4f4f4
  • 第 1 列起始位置:12%
  • 第 1 列结束位置:12%

书评

第 2 列背景颜色

也将自定义背景颜色添加到第二列。

  • 第 2 列背景颜色:#9400ff

书评

浆纱

转到设计选项卡并使用以下设置删除列之间的所有自定义空间:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1

书评

间距

我们还在修改行间距设置。

fiverr建站WordPress程序员
  • 上边距:100px
  • 下边距:100px
  • 顶部填充:0px
  • 底部填充:0px

书评

将图像模块添加到第 1 列

上传 1:1 图片

一旦您的行设置到位,您就可以开始添加各种模块,从第一列中的图像模块开始。 上传您选择的图像,但确保图像比例为 1:1。 这意味着高度和宽度应该具有相同的值。

书评

图像对齐

在设计选项卡中选择左图像对齐。

书评

独立站选品工具

浆纱

我们还改变了这个模块在不同屏幕尺寸上的宽度。

  • 宽度:20%(台式机和平板电脑)、30%(手机)

书评

间距

为了允许在行的左侧重叠,我们在图像模块的间距设置中添加了一个负的左边距值。

书评

边界

为了完成图像设计,我们还在边框设置中的每个角落添加了“50vw”。 这将确保图像在不同的屏幕尺寸上保持其圆形。

高质量外链购买

书评

将文本模块 #1 添加到第 1 列

向内容框添加星号

进入下一个模块,即评级文本模块。 为了展示星级,我们将使用符号。 继续复制以下符号并将它们粘贴到新文本模块的内容框中:★★★★✰。

书评

背景颜色

接下来更改模块的背景。

  • 背景颜色:#9400ff

书评

JasperAI 10000字免费额度试用

文字设置

转到设计选项卡并修改文本设置。

  • 文字字体:蒙特塞拉特
  • 文字字体粗细:重
  • 文字大小:45px(桌面)、30px(平板电脑)、25px(手机)
  • 文本行高:1em
  • 文本对齐:居中

书评

浆纱

继续更改模块的宽度。

书评

间距

并添加一些自定义间距。

WordPress备份工具updrafplus
  • 左边距:50px
  • 右边距:50px
  • 上边距:20px
  • 底部填充:20px

书评

盒子阴影

为了突出显示评级框,我们将添加一个微妙的框阴影。

  • 盒子阴影模糊强度:50px
  • 阴影颜色:rgba(0,0,0,0.3)

书评

转换翻译

最后但同样重要的是,我们将使用一些自定义转换转换值重新定位文本模块。 您可以推迟此步骤,直到您也将所有模块添加到您的列中。

  • 右:360 像素(桌面)、-84 像素(平板电脑)、-70 像素(手机)
  • 底部:-113px(桌面)、190px(平板电脑)、141px(手机)

书评

将文本模块 #2 添加到第 1 列

添加内容

第 1 列中我们需要的下一个模块是另一个文本模块。 添加您选择的内容并链接到审阅者和书籍。

书评

文字设置

转到设计选项卡并相应地更改文本设置:

  • 文字字体:蒙特塞拉特
  • 文字大小:18px

书评

链接文本设置

更改链接文本颜色。

书评

间距

然后,转到间距设置并使用自定义边距值重新定位元素。

  • 上边距:-100px(台式机),0px(平板电脑和手机)
  • 左边距:200px(桌面)、50px(平板电脑)、20px(手机)
  • 右边距:50px(平板电脑),20px(手机)

书评

将文本模块 #3 添加到第 1 列

添加H3内容

进入下一个模块,这是一个包含 H3 评论标题的文本模块。

书评

H3 文字设置

转到设计选项卡并更改 H3 文本设置。

  • 标题 3 字体:蒙特塞拉特
  • 标题 3 字体粗细:粗体
  • 标题 3 文本颜色:#000000

书评

间距

添加一些自定义边距。

  • 上边距:80px(台式机),50px(平板电脑和手机)
  • 左边距:50px(台式机和平板电脑),20px(手机)
  • 右边距:50px(台式机和平板电脑),20px(手机)

书评

将文本模块 #4 添加到第 1 列

添加内容

在第 1 列中我们需要的下一个也是最后一个模块,这是另一个带有实际审查的文本模块。

书评

间距

转到此模块的间距设置并应用以下设置:

  • 上边距:20px
  • 下边距:50px
  • 左边距:50px(台式机和平板电脑),20px(手机)
  • 右边距:50px(台式机和平板电脑),20px(手机)

书评

将图像模块添加到第 2 列

上传书籍封面图片

在第二列中,我们将需要两个模块,从带有书籍封面的图像模块开始。 对于本教程,我们使用 Divi 的电子书布局包附带的书籍封面,但您可以添加自己的书籍封面。

书评

浆纱

转到图像模块的设计选项卡并更改宽度。

  • 宽度:79%(桌面)、40%(平板电脑和手机)

书评

间距

修改间距设置。

  • 上边距:60px
  • 下边距:60px

书评

盒子阴影

并添加一个盒子阴影来强调书的封面。

  • 盒子阴影垂直位置:40px
  • 盒子阴影模糊强度:80px
  • 盒子阴影传播强度:-20px
  • 阴影颜色:rgba(0,0,0,0.8)

书评

将按钮模块添加到第 2 列

添加副本

第 2 列中我们需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本并链接到人们可以购买您的书的页面。

书评

按钮对齐

转到设计选项卡并更改按钮对齐方式。

书评

按钮设置

修改按钮设置以匹配布局包的外观。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:16px
  • 按钮文字颜色:#ffffff
  • 按钮背景颜色:#000000
  • 按钮边框宽度:0px
  • 按钮边框半径:0px
  • 按钮字体:蒙特塞拉特
  • 按钮字体粗细:粗体

书评

书评

间距

并通过向按钮添加一些自定义填充值来完成第一个书评设计。

  • 上边距:16px
  • 底部填充:16px
  • 左填充:38px
  • 右内边距:38px

书评

尽可能多地克隆行

创建完第一个书评后,您可以根据需要复制整行多次,具体取决于您希望在着陆页上显示多少评论。

书评

上传不同的图像

更改审阅者的形象。

书评

更换书籍封面

如有必要,连同书籍封面。

书评

更改副本

并修改所有副本。

书评

在行中查找和替换第 2 列背景颜色

正如您在这篇文章的预览中看到的那样,我们在第二次审查中使用了不同的调色板。 为了方便我们自己,我们将打开行设置并右键单击第 2 列背景,然后单击查找和替换。

书评

更改行内正在使用的紫色,您就完成了! 确保对添加到页面的每条重复书评重复这些步骤。

  • 内:这一行
  • 替换为:#31d190

书评

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

书评

移动的

书评

最后的想法

在这篇文章中,我们向您展示了如何为即将到来的电子书登陆页面设计令人惊叹的简短书评。 这有助于您在页面上添加社交证明,并让访问者相信您的书的可信度。 这个用例教程是我们正在进行的 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些额外的东西。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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