WordPress divi主题

如何在 Divi 中设计具有可滚动预告片内容的平板电脑

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

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

将预告内容添加到您的网站可能是一种有效的营销策略。 这对于推广电子书之类的东西特别有效。 你让他们偷看内容,让他们想要更多。 在今天的教程中,我们将向您展示如何在 Divi 的可滚动平板电脑中展示预告内容。 为此,我们将利用 Divi 的内置选项将列转换为可滚动的容器(设计为类似于平板电脑),其中可以包含您想要的任何类型的内容。 您可以使用它来宣传任何电子书的前几章,展示您作品集中的示例设计或任何其他类型的内容。

google广告开户

让我们开始吧!

抢先看

这是我们将在本教程中构建的带有可滚动预告片内容的平板电脑的快速浏览。

免费下载布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

迪维通知框

完成后,部分布局将在 Divi Builder 中可用。

WordPress divi主题

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

如何在 Divi 中设计具有可滚动预告片内容的平板电脑

第 1 部分:使用 Divi 列创建可滚动的 Tablet 容器

添加行

首先,创建一个包含常规部分的两列行。

带有可滚动预告内容的 divi 平板电脑

第 1 列设置

背景颜色

打开第 1 列的设置,并为该列添加白色背景。

  • 背景颜色:#ffffff

带有可滚动预告内容的 divi 平板电脑

填充和边框

然后为列添加边框和填充,如下所示:

  • 内边距:25px(上、下、左、右)
  • 圆角:20px
  • 边框宽度:30px
  • 边框颜色:#000000

带有可滚动预告内容的 divi 平板电脑

fiverr建站WordPress程序员
盒子阴影

为了给平板设计一点深度,添加以下框阴影:

  • 盒子阴影:见截图
  • 盒子阴影水平位置:5px
  • 盒子阴影垂直位置:5px
  • 阴影颜色:#555555

带有可滚动预告内容的 divi 平板电脑

使用 CSS 自定义列高和宽

使列的内容可滚动的关键是给它一个设定的高度。 这会使内容溢出列的高度。 我们还希望保持平板电脑的纵横比一致,因此给列设置最大宽度也是一个好主意。 要为列提供自定义高度和宽度,请转到“高级”选项卡并更新以下内容:

在自定义 CSS 下,为主元素桌面显示添加以下 CSS:

height:650px;
max-width: 488px;

然后激活响应式选项卡并粘贴以下自定义 CSS 用于主元素手机显示:

独立站选品工具
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;

带有可滚动预告内容的 divi 平板电脑

垂直溢出:滚动

如前所述,列现在有一个设定的高度,这将导致内容不可避免地垂直溢出列。 为了确保可以通过滚动列来查看溢出的内容,请将可见性垂直溢出选项设置为“滚动”。

  • 垂直溢出:滚动

带有可滚动预告内容的 divi 平板电脑

第 2 部分:将 Teaser 内容添加到可滚动列

此时,列(或平板电脑)已为某些内容做好了准备。 您可以使用此列中的任何 Divi 模块来构建您的预览内容。 在这个例子中,我们添加了一些模拟电子书内容,其中包括一个简介模块(用于显示最初的号召性用语)、一个图像模块(用于显示书籍封面)和一个文本模块(用于显示几章文本)。

具有书籍封面背景的滚动 CTA

我们要添加的第一条预告内容是一个宣传模块,它将作为“滚动预览”的号召性用语。 我们将使用一个简介图标、标题和背景,并带有书籍封面作为背景图像和渐变颜色叠加层。

高质量外链购买

在 tablet 列中,添加一个简介模块。

带有可滚动预告内容的 divi 平板电脑

更新以下内容:

  • 标题:滚动到预览
  • 使用图标:是
  • 图标:见截图

带有可滚动预告内容的 divi 平板电脑

  • 背景渐变左颜色:透明
  • 背景渐变右颜色:#ffffff
  • 起始位置:20%
  • 结束位置:85%
  • 在背景图像上方放置渐变:是

然后添加书籍封面图片。 为获得最佳效果,请添加大小约为 600 像素 x 850 像素的图像.

JasperAI 10000字免费额度试用

带有可滚动预告内容的 divi 平板电脑

在设计选项卡下,更新图标和标题的以下样式:

  • 图标颜色:#000000
  • 图标字体大小:80px(台式机和平板电脑),70px(手机)
  • 标题字体:蒙特塞拉特
  • 标题文本对齐:居中
  • 标题文字颜色:#000000

带有可滚动预告内容的 divi 平板电脑

我们可以调整简介的高度以匹配列的高度,以便它使用 100% 的高度填充平板电脑。 此高度百分比值仅适用于我们的列具有设定的高度。 然后我们可以通过添加顶部填充将图标和标题移动到列的底部。

要调整简介的大小和间距,请更新以下内容:

WordPress备份工具updrafplus
  • 高度:100%
  • 边距:底部 25px
  • 内边距:400 像素(台式机和平板电脑),270 像素(手机)

带有可滚动预告内容的 divi 平板电脑

书籍封面图片

下一段预告内容将是书籍封面的图像。 要添加图像,只需在 blurb 模块下添加一个图像模块。

带有可滚动预告内容的 divi 平板电脑

然后上传用于宣传背景的相同图像。

带有可滚动预告内容的 divi 平板电脑

文本预览内容

我们的最后一段预告内容将是文本,其中将包括我们电子书的一些模拟章节。 要添加文本,请在上一个图像下添加一个新的文本模块。

带有可滚动预告内容的 divi 平板电脑

然后将以下 HTML 粘贴到正文的文本选项卡中:

<h3>Chapter 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

<h3>Chapter 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

带有可滚动预告内容的 divi 平板电脑

在设计选项卡下,更新标题样式和间距,如下所示:

  • 标题 3 字体:蒙特塞拉特
  • 标题 3 字体粗细:超粗体
  • 标题 3 文本对齐:居中
  • 标题 3 行高:1.3em

带有可滚动预告内容的 divi 平板电脑

  • 填充:10%(顶部和底部)

带有可滚动预告内容的 divi 平板电脑

第 3 部分:一些最后的润色

更新行设置

内容到位后,我们需要对行进行一些调整,以使设计更具响应性。 打开行设置并更新以下内容:

  • 宽度:100%(台式机)、90%(平板电脑和手机)
  • 最大宽度:1080px(桌面),488px(平板电脑和手机)

带有可滚动预告内容的 divi 平板电脑

将其他内容添加到第 2 列

此时,我们可以根据需要向第 2 列添加其他内容。 对于这个例子,我添加了一个文本模块和按钮模块,并将它们的样式设置为类似于我们的电子书布局包中的设计。

带有可滚动预告内容的 divi 平板电脑

最后结果

现在让我们看看最终结果。

查看平板电脑内可用的可滚动内容。

以下是设计在平板电脑和手机显示屏上的叠加方式。

带有可滚动预告内容的 divi 平板电脑

带有可滚动预告内容的 divi 平板电脑

最后的想法

也许这种可滚动平板电脑设计的最佳之处在于它的多功能性。 因为平板电脑本质上是一个 Divi 列,所以您可以使用任意数量的 Divi 模块(文本、图像、按钮)来设计您想要展示的内容。 希望下次您需要在网站上展示预告内容时,这会派上用场。

我期待在评论中收到您的来信。

干杯!

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