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

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

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

让我们开始吧！

预览

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

桌面

移动的

免费下载书评部分布局

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

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

让我们开始重建吧！

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

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

添加新部分

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

添加新行

列结构

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

第 1 列渐变背景

尚未添加任何模块，打开行设置并向第一列添加渐变背景。

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

第 2 列背景颜色

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

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

浆纱

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

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

间距

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

• 上边距：100px
• 下边距：100px
• 顶部填充：0px
• 底部填充：0px

将图像模块添加到第 1 列

上传 1:1 图片

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

图像对齐

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

• 图像对齐：左

浆纱

我们还在不同屏幕尺寸上更改此模块的宽度。

• 宽度：20%（桌面和平板电脑），30%（手机）

间距

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

• 左边距：-30px

边界

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

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

将星形符号添加到内容框

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

背景颜色

接下来更改模块的背景。

• 背景颜色：#9400ff

文字设置

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

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

浆纱

继续更改模块的宽度。

• 宽度：35%

间距

并添加一些自定义间距。

• 左边距：50px
• 右边距：50px
• 顶部填充：20px
• 底部填充：20px

盒子阴影

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

• 框阴影模糊强度：50px
• 阴影颜色：rgba(0,0,0,0.3)

转换 翻译

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

• 右：360px（桌面）、-84px（平板）、-70px（手机）
• 底部，：-113px（桌面），190px（平板），141px（手机）

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

添加内容

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

文字设置

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

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

链接文字设置

也更改链接文本颜色。

• 链接文字颜色：#9400ff

间距

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

• 上边距：-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

克隆 Row 的次数不限

完成第一篇书评的创建后，您可以根据需要克隆整行，次数不限，具体取决于您希望在着陆页上显示的评论数量。

上传不同的图片

更改审阅者的形象。

更换书籍封面

如有必要，还可以附上书皮。

更改副本

并修改所有副本。

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

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

更改行内正在使用的紫色，您就完成了！ 确保为添加到页面的每一个重复书评重复这些步骤。

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

预览

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

桌面

移动的

最后的想法

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

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