WordPress divi主题

使用 Divi 的变换选项创建宝丽来英雄部分

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

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

创意英雄版块使网站令人难忘和特别。 这款宝丽来英雄款设计唤起了一种复古的旅行癖。 通过使用列变换选项,宝丽来可以按照您想要的任何方式排列,就好像它们铺在桌子上一样。

google广告开户

您可以使用自己的方形图像重新创建此宝丽来英雄部分设计。 您还可以免费下载 JSON 文件!

让我们开始吧。

预览

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

桌面

桌面预览宝丽来英雄

移动的

手机预览宝丽来英雄

免费下载宝丽来英雄部分设计

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

订阅我们的 Youtube 频道

让我们开始重新创建

添加新部分

首先向您正在处理的页面添加一个新部分。

WordPress divi主题

底部分隔线

添加薄荷绿色底部分隔线。

  • 分隔线放置:底部
  • 分隔线样式:#12
  • 分隔线颜色:薄荷绿#d2f2d0
  • 分隔器高度:23vw

该部分的底部分隔线

间距

调整部分的间距。

  • 最高边距:7vw
  • 下边距:0px
  • 顶部和底部填充:0px

截面间距设置

添加新行

立柱结构

继续向您的部分添加新行。 选择以下列结构:

添加一个 3 列结构

浆纱

现在,调整行的大小。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:90vw
  • 最大宽度:100%

行尺寸设置宝丽来

间距

接下来,调整间距设置中的顶部和底部填充。

  • 顶部和底部填充:0px

该部分的顶部和底部填充

fiverr建站WordPress程序员

展示

在行的主要元素中添加一行 CSS 代码,以使列在较小的屏幕尺寸上彼此相邻。

  • 自定义 CSS – 主元素: display: flex;
display: flex;

3列行的自定义css

将图像模块添加到第 1 列

上传方形图片

将图像模块添加到第 1 列并上传方形图像。

为宝丽来添加图像模块

添加方形图像

独立站选品工具

结盟

现在,调整模块对齐方式。

模块对齐图像

浆纱

然后,使模块全宽。

在图像模块中强制全宽

将文本模块添加到第 1 列

添加内容

添加一个文本模块并插入一些内容。 我们将使用“宝丽来”这个词。

高质量外链购买

添加文本模块宝丽来

添加宝丽来内容

文本

设置文本字体样式。

  • 文字字体:Advent Pro
  • 文本对齐:居中
  • 文字颜色:深灰色 #474747
  • 字体大小:
    • 台式机:1vw
    • 平板电脑+手机:2vw
  • 文字字母间距:0.1vw
  • 文字行高:1.8em

宝丽来文字

浆纱

在尺寸设置中使用“100%”作为宽度。

JasperAI 10000字免费额度试用

文字宽度

间距

现在调整间距。

边距文字宝丽来

克隆模块两次并在剩余列中放置重复项

复制并拖动模块

更改图像和副本的副本

更改每个重复图像模块中的图像。 如果您的设计需要它,也可以更改文本内容。

WordPress备份工具updrafplus

第 1 列设置

背景

继续打开该行的第 1 列设置。 将背景设置为白色以创建宝丽来效果。

  • 背景颜色:白色#ffffff

白色宝丽来背景

间距

添加一些底部填充以创建更宽的宝丽来底部边框。

列背景的边距

边界

添加边框以完成宝丽来视觉效果。

  • 4 边边框宽度:1vw
  • 顶部边框宽度:2vw
  • 右边框宽度:2vw
  • 底部边框宽度:1vw
  • 左边框宽度:2vw
  • 边框颜色:白色#ffffff

宝丽来白色背景

盒子阴影

通过添加一个微妙的框阴影来完成第 1 列的设置。

宝丽来的盒子阴影

扩展第 1 列设置

使用扩展样式选项扩展列设置。

  • 返回主行设置窗口,然后单击第一列选项卡右侧的三个点。
  • 选择“扩展项目样式”并选择“在这一行中”。

从第 1 列扩展项目样式

贯穿这一行

第 1 列变换样式

现在,调整第一列中的变换设置。

  • 变换平移:x轴-11vw,y轴-6vw
  • 变换旋转:341 度,第一个选项

列变换

第 2 列变换样式

接下来,调整第二列的转换设置。

  • 变换平移:x轴-22w,y轴0vw
  • 变换旋转:10 度,第一个选项

第 2 列变换

第 3 列变换样式

最后,调整第三列的变换设置。

  • 变换比例:两个轴均为 68%
  • Transform Translate:x轴-46w,y轴12vw
  • 变换旋转:31 度,第一个选项

第 3 列变换

添加新部分

背景

添加一个新部分并将薄荷绿色背景应用于该部分。

  • 背景颜色:薄荷绿#d2f2d0

插入部分

添加薄荷绿色背景

底部分隔线

给该部分一个底部分隔线。

  • 分隔线放置:底部
  • 分隔线样式:#12
  • 分隔线颜色:白色#ffffff
  • 分隔器高度:23vw

第二部分的底部分隔线

间距

删除默认的顶部填充。

部分填充 0px

添加新行

立柱结构

继续添加一个 3 列的新行。

添加新的 3 列行

复制和粘贴行样式

使用线框视图,复制并粘贴第一部分的行样式

  • 首先,单击第一部分内行菜单右侧的三个点。 选择“复制行样式”。
  • 然后,单击第二部分中行菜单右侧的三个点。 选择“粘贴行样式”。

从第一节复制行样式

粘贴行样式

复制和粘贴列设置

现在,复制第一行中的列设置并将它们粘贴到新行的第 1 列和第 2 列中。

  • 首先,打开第一行的行设置。
  • 其次,单击第一列选项卡右侧的三个点,然后选择“复制项目样式”。
  • 然后,向下滚动到新行并打开设置选项卡。
  • 最后,单击第一列右侧的三个点,然后选择“粘贴项目样式”。

再次复制项目样式

粘贴项目样式

第 1 列变换样式

现在,调整第 1 列中的变换样式。

  • 变换比例:两个轴 75%
  • 变换平移:x轴-8w,y轴-14vw
  • 变换旋转:35 度第一个选项

第 1 列中的转换设置

第 2 列变换样式

然后,修改第 2 列中的变换样式。

  • 变换平移:x轴-17w,y轴2vw
  • 变换旋转:346 度第一个选项

第 2 列设置

添加图像模块

复制和拖动图像模块

现在,返回线框视图以复制和拖动两个图像模块。

  • 首先,将第一部分中的第一个图像模块复制两次。
  • 然后,将它们拖到第二部分的第一列和第二列。
  • 将每个模块中的图像更改为新的方形图像。

复制和拖动图像模块

添加文本模块

复制和拖动文本模块

在图像之后,对文本模块执行相同的操作。 从第一部分复制并拖到第二部分。

  • 在线框视图中,从第一部分的第一列复制文本模块两次。
  • 现在,将新的文本模块拖到第二部分的第 1 列和第 2 列。
  • 如果您想更改内容,请立即执行。

复制和拖动文本模块

将文本模块添加到第 3 列

添加内容

单击第三列中的加号并添加一个文本模块。 插入一些H2和段落内容。

在第 3 列添加一个文本模块

制作回忆文本模块

文本

如下设置文本样式。

  • 文字字体:Advent Pro
  • 文本对齐:居中
  • 文字颜色:深灰色 #848484
  • 字体大小:
    • 台式机:1vw
    • 平板电脑+手机:1.9vw
  • 文字字母间距:0.1vw
  • 文本行高:
    • 桌面:1.2em
    • 平板电脑 + 手机:1.3em

文本设置第 3 列

标题文字

现在,为 H2 文本设置样式。

  • 标题:H2
  • H2字体:Adamina
  • H2 字体粗细:粗体
  • H2 字体颜色:深灰色 #444444
  • H2 字体大小:
    • 台式机:2vw
    • 平板电脑+手机:3vw
  • H2 字母间距:4px
  • H2 线高:
    • 台式机:1.7vw
    • 平板电脑+手机:1.5vw

h2设置第三栏

浆纱

然后,调整大小。

  • 宽度:
    • 桌面:60%
    • 平板电脑:91%
    • 电话:100%
  • 模块对齐:中心

文字设置

间距

最后,调整间距。

上边距制造回忆

将按钮模块添加到第 3 列

添加副本

单击文本下方的加号并添加按钮模块。 向按钮添加一些副本。

添加一个按钮

在按钮中了解更多信息

结盟

更改按钮对齐方式。

按钮对齐

自定义按钮样式

相应地设置按钮样式。

  • 按钮文字大小:
    • 台式机:1vw
    • 平板电脑:2.4vw
    • 电话:2.3vw
  • 按钮边框宽度:0px
  • 按钮文字颜色:黑色#000000
  • 按钮字母间距:4px
  • 按钮字体:Advent Pro
  • 按钮字体粗细:粗体

按钮样式

间距

应用上边距值。

按钮的上边距

将分隔模块添加到第 3 列

能见度

在按钮下方,添加分隔线并设置如下样式。

分隔线可见性

线

给分隔线一个明亮的绿色。

分隔线颜色设置

浆纱

更改分隔线的大小设置,您就完成了!

  • 分压器重量
    • 桌面:7px
    • 平板电脑+手机:4px
  • 宽度:
    • 桌面:10%
    • 平板电脑 + 手机:30%
  • 模块对齐:中心

分隔线设置 col3

预览

我们再来看看宝丽来英雄版块跨不同屏幕尺寸的成品设计图。

桌面

桌面预览宝丽来英雄

移动的

手机预览宝丽来英雄

这是一个包装!

在这篇文章中,我们向您展示了如何使用 Divi 的变换选项重新创建宝丽来英雄部分。 这是在页面的英雄部分展示多张图片的好方法。 我们希望这个设计能激发您自己的创意英雄部分设计! 如果您有任何疑问,请确保在下面的评论部分发表评论。

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