WordPress divi主题

如何在 Divi 中的抽象位置设置图像样式和位置

| 5月 13, 2022 | Divi主题使用教程 | 0 条评论

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

图像是网页设计的一个关键方面。 现代网页设计似乎需要新的和抽象的方式来在您的网站上显示图像。 Divi 的转换选项使您可以轻松地在页面上几乎任何您想要的位置设置样式和位置。 这为创建独特的布局打开了大门,使您的网站更上一层楼。

google广告开户

在本教程中,我将向您展示几种在网站的抽象位置设置和定位图像的方法。 这将允许您为您可能认为只能在 Photoshop 或 Sketch 等照片编辑器中实现的图像创建无数的设计变化。

让我们开始吧!

抢先看

这是我们将在本教程中构建的设计的预览。

在 Divi 中定位图像

在 Divi 中定位图像

免费下载本教程中的设计示例

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

要将布局导入您的页面,只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

现在让我们进入教程吧?

入门指南

要开始使用,请确保您已安装并激活 Divi 主题。 然后新建一个页面,在前端部署Divi Builder。 选择“从头开始构建”选项。

WordPress divi主题

现在您可以开始设计了!

将图像部分定位在视口之外(向右或向左)

在 Divi 中定位图像

在第一个示例中,我将向您展示如何将图像部分定位在视口之外。 这是为您的图像添加更多抽象显示的好方法,它的工作原理与您的内容的自定义背景图像非常相似。 然后,您可以为图像设置样式以获得更独特的设计。

这是如何做到的。

创建文本模块并为其设置样式

首先,我们将创建一个文本模块,它将作为我们部分的主要内容。

如果您还没有,请创建一个包含一列行的常规部分。 然后将文本模块添加到该行。

更新内容以包括以下内容:

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

然后更新设计设置如下:

文字字体:Raleway
标题 2 字体:Raleway
标题 2 字体粗细:粗体
标题 2 文字大小:44px(桌面),24px(手机)
宽度:680px(桌面)、60%(平板电脑)、80%(手机)
自定义填充:顶部 10%,底部 10%,左侧 10%,右侧 5%

fiverr建站WordPress程序员

添加图片 #1

现在我们准备添加第一张图片。 继续在文本模块的正上方添加一个图像模块。

然后将您的图像上传到图像模块。 确保图像足够大,这样当我们使用 transform 属性放大图像时它不会丢失质量。 我使用的是 400 x 580 像素的图像。

接下来将图像模块的宽度向下并左对齐,如下所示:

宽度:5%
模块对齐:左

独立站选品工具

像这样缩小图像模块最初可以让我们减少布局的负空间。 这样我们就不必使用负边距来调整间距。

现在我们可以使用变换选项放大图像,如下所示:

变换比例 X 轴:416%
变换比例 Y 轴:416%

高质量外链购买

然后我们可以使用 transform translate 来定位图像,如下所示:

变换平移 X 轴:-36%
变换平移 Y 轴:41%

最后,您可以使用变换旋转来旋转图像:

变换旋转Z轴:11度

JasperAI 10000字免费额度试用

现在我们准备添加第二张图片。 继续在文本模块下直接添加一个图像模块。

然后将新图像上传到图像模块。

接下来将图像模块的宽度向下并左对齐,如下所示:

宽度:10%
模块对齐:左

WordPress备份工具updrafplus

宽度不必正好是 10%。 您要做的就是充分缩小模块,使其不会在布局上占用太多垂直空间。

然后按如下方式更新转换选项:

变换比例 X 轴:464%
变换比例 Y 轴:464%

变换平移 X 轴:7%
变换平移 Y 轴:-80%

变换旋转Z轴:-10度

然后为其他设计元素添加框阴影。

盒子阴影:见截图
盒子阴影水平位置:-20px
盒子阴影垂直位置:-7px

在 Divi 中定位图像

确保文本模块保持在顶部

我们希望确保文本模块在移动设备上开始重叠时始终位于图像之上。 这可确保图像继续用作设计中的背景图像。

为此,请打开文本模块并将以下自定义 CSS 添加到主元素:

主要元素 CSS:

position: relative;

然后将 Z-index 设置为 1。

在 Divi 中定位图像

隐藏部分溢出

由于我们将拥有超出页面部分的图像,因此浏览器视口宽度将增加以容纳额外的空间。 这将使用浏览器底部的水平滚动条。 要禁用此功能,您需要向该部分添加一段 CSS。

打开部分设置并将以下自定义 CSS 添加到主元素:

overflow: hidden;

在 Divi 中定位图像

现在查看最终结果。

在 Divi 中定位图像

在 Divi 中定位图像

在 Divi 中定位图像

为您的标题创建抽象图像拼贴背景

在 Divi 中定位图像

对于下一个设计,我将向您展示如何构建一个抽象的图像拼贴,作为标题的背景。 为此,我们将使用 display flex 属性创建一行图像,我们可以以创造性的方式缩放和移动。

这是如何做到的。

设计标题文本模块

首先,创建一个具有单列行的新常规部分。 然后在该行中添加一个文本模块并更新以下内容:

<h1>Interior Design</h1>
<p>This is some content</p>

然后更新设计如下:

背景颜色:rgba(0,0,0,0.07)
文字文字颜色:#ffffff
文本方向:中心
标题字体:Raleway
标题字体粗细:粗体
标题文本对齐:右
标题文字颜色:#ffffff
标题文字大小:44px(桌面)、34px(平板电脑)、24px(手机)
宽度:500px(桌面)、60%(平板电脑)、80%(手机)
模块对齐:中心
自定义填充:5vw 顶部,5vw 底部,1vw 右侧

部分设置

在添加我们的图像和构建拼贴背景之前,让我们自定义我们的部分。 这将为我们完成其余的设计提供画布。

打开部分设置并更新以下内容:

背景颜色:#4c606d
自定义填充(桌面):0px 顶部,0px 底部
自定义填充(平板电脑):底部 20 像素
自定义填充(电话):底部 40 像素

在 Divi 中定位图像

接下来,在该部分的底部添加一个内框阴影,其颜色与页面上下一部分的背景相匹配(在本例中为白色)。 这将允许我们在下一部分中创建与标题底部重叠的图像效果(稍后您将看到我的意思)。

盒子阴影:见截图
盒子阴影水平位置:0px
盒子阴影垂直位置:-80px
阴影颜色:#ffffff

在 Divi 中定位图像

由于我们将在拼贴的剖面视口之外移动图像,因此我们需要将以下 CSS 添加到主元素。

overflow: hidden;

在 Divi 中定位图像

第 1 行设置

现在我们需要在包含我们的文本模块的行中添加一些填充。 我们还需要添加一个 z-index 以将该部分保留在我们将添加到我们的部分的图像之上。 默认情况下,每个部分的 z-index 值为 9。所以我们需要做的就是将 z-index 值 10 添加到我们想要保持在顶部的行。

打开行设置并更新以下内容:

自定义填充:10vw 顶部
Z指数:10

在 Divi 中定位图像

创建抽象图像拼贴

此时,该部分已准备好开始添加我们的图像。

为了创建抽象图像拼贴,我们将在一行中添加 5 个图像,然后使用“display: flex”将所有这些图像水平对齐在页面上。 这对于在所有浏览器尺寸上保持图像(水平)到位是必要的。 如果我们使用传统的 5 列布局,图像会在不同的设备上分解为不同的列布局并破坏设计。

之后,我们将能够使用变换选项一一设置图像的样式和位置。

添加图像行

继续并在包含文本模块的行的正下方创建一个新的单列行。

然后打开行设置并更新以下内容:

自定义宽度:50%
天沟宽度:1

要水平对齐该行中的所有模块,请将以下 CSS 添加到列主元素:

display: flex;

在 Divi 中定位图像

现在,当您将图像模块添加到行时,它们将水平对齐。

看看当我在行中复制一个图像模块时会发生什么, display:flex add to the column。

在 Divi 中定位图像

继续在行中添加 5 个图像,确保它们的尺寸足够大,以适应缩放拼贴图像时的尺寸增加。 我正在使用我们的家居装修布局包中的图片,这些图片的宽度约为 800 像素,高度各不相同。 不同尺寸的图像往往会制作出更好看的抽象拼贴画。

在 Divi 中定位图像

使用 Transform Translate 定位图像

是时候开始定位我们的图像以创建我们的拼贴画了。

图片#1

打开第一个图像模块(最左侧)的设置并更新变换选项,如下所示:

变换比例 X 轴:266%
变换比例 Y 轴:266%

变换平移:X 轴:-68%
变换平移:Y 轴:-54%

图片 #2

打开第二个图像模块的设置并更新变换选项,如下所示:

变换比例 X 轴:184%
变换比例 Y 轴:184%

变换平移:X 轴:-36%
变换平移:Y 轴:-66%

在 Divi 中定位图像

图片#3

打开第三个图像模块的设置并更新变换选项,如下所示:

变换比例 X 轴:206%
变换比例 Y 轴:206%

变换平移:X 轴:-51%
变换平移:Y 轴:-27%

在 Divi 中定位图像

图片#4

打开第四个图像模块的设置并更新变换选项,如下所示:

变换比例 X 轴:180%
变换比例 Y 轴:180%

变换平移:X 轴:20%
变换平移:Y 轴:42%

在 Divi 中定位图像

图片#5

打开第五个图像模块的设置并更新变换选项,如下所示:

变换比例 X 轴:290%
变换比例 Y 轴:290%

变换平移:X 轴:-50%
变换平移:Y轴:72%

在 Divi 中定位图像

为图像添加盒子阴影

要创建一个额外的设计元素,我们可以为我们的图像添加一个盒子阴影。 为此,请激活网格模式并使用多选功能选择所有图像模块。 然后打开其中一个图像模块的设置以部署元素设置模式。

在 Divi 中定位图像

然后更新以下内容:

盒子阴影:见截图
盒子阴影水平位置:-40px
盒子阴影垂直位置:40px
阴影颜色:rgba(255,255,255,0.13)

在 Divi 中定位图像

最后结果

这是设计的最终结果。

桌面

在 Divi 中定位图像

药片

在 Divi 中定位图像

电话

在 Divi 中定位图像

最后的想法

这些示例设计应该为您提供一些灵感,让您了解如何在您的网站上以您在照片编辑软件之外可能从未想过的方式来设计和定位图像。 一旦你学会了如何正确地自定义你的布局,Divi 的变换选项可以将图像放置在独特而抽象的位置。 希望这将在您的下一个项目中派上用场。

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

干杯!

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