T: 400-6065-301
85
东丽开发企业网站的文章提及在设计网站时，有时很难找到正确的创意平衡。你不希望你的设计太“过分”，但你也不想削弱你的观众。一个伟大的方式添加一个微妙的，但创造性的方面，你的设计是与我所谓的图像重叠效应(一个创造性的名字，我知道)。
这种重叠效果使得当页面上的另一个元素重叠时，图像图标看起来会升高，就像贴纸贴在墙上或封上信封一样。诀窍是将背景图像放置在不同的层(如区段、行和模块)上，以允许框影将图像分割成两半，并在中心出现升高。
这种设计非常适合于模糊图像图标，也可以将图像添加到文本模块的一侧。
我们开始吧。
对于本教程，您需要以下内容：
· divi主题(已安装和活动)
· 新页面上加载的软件营销功能页面布局
· 用于裁剪图像的简单照片编辑器(如预览)
下面是我们将在本教程中构建的设计的一个简要介绍。
对于这个设计，我将使用软件营销特性页面布局来使事情滚动。继续创建一个新页面，并使用VisualBuilder将布局上载到页面。
在我们深入定制布局之前，我们需要裁剪图像图标，这样我们就可以使用它们作为背景图像。
通过查看页面的实时版本并将其中一个图像图标拖到桌面上，您可以轻松地从布局中抓取其中一个图标。然后在预览(如果使用Mac)或任何图像编辑软件中打开图像。由于此布局上的图标为128 px乘128 px，因此需要将图像剪切成一半，将图像剪切到右侧的64 px。
这将创建图像图标的右半版本。
保存图像并再次打开原始文件以裁剪图像图标的左半部分。
最后，裁剪图像图标的下半个版本。
如果您要在整个设计过程中使用不同的图像，您也需要对它们进行裁剪。
现在你有了解决设计所需的东西。
在布局的第二部分，更新设置以包括渐变背景。
背景梯度左色：#f8f8f8
背景渐变右颜色：#efeffc
梯度方向：90德克
要创建重叠效果，我们需要有一个完整版本的图像图标作为背景图像，在每一列，为我们的每一个脱口。对于每一列，添加具有下列设置的背景图像：
背景图像大小：实际大小(这很重要)
背景图像位置：顶部中心
背景图像重复：不重复
一种是将一个背景添加到一个列中，您可以复制背景图像并将其粘贴到其他两列中。
现在，您不能真正看到背景图像，因为空白是重叠的，但这将是固定的。
打开第一个blurb的blurb模块设置，并添加图像图标的下半个版本作为blurb图标。
然后添加一个#ffffff背景颜色以及。
现在按以下方式更新blurb设计设置：
图像圆角：0px
图像边框宽度：0 px
对于间距，我们需要将64 px的上边距加到我们的blurb中，以便公开列背景图像。这将确保图标被剪裁成一半。我们还需要一些填充为我们的文本。
自定义页边距：64 px顶部
自定义填充物：底部8%，左8%，右8%。
接下来，向空白区添加一个框影。这是使这种重叠效果看起来独特的关键。
现在，复制并粘贴模块，以替换该行中的其他两个空白，并使用下面的旧空白删除该行。
这是行的最终结果。
对于布局的下一部分，我们将在右侧列的文本模块的一侧添加相同类型的图像重叠效果。
添加背景图像，以创建重叠的影响，在模块的两侧是一个更有挑战性的，因为我们必须考虑移动设备以及。这就是为什么我建议使用128 px宽的图像，这样你也可以在智能手机上显示图像。
这个设计的诀窍是有多个背景图像-一个在剖面的中心，一个在第二列的左边中心。
首先，复制上一节中的部分样式，并将它们直接粘贴到下面的部分中，这样我们就可以拥有匹配的背景梯度。然后将图像添加到具有以下设置的部分：
背景图像大小：实际大小
背景图像位置：中心
背景图像重复：不重复
由于我们的部分背景图像是居中的，它将看不到在我们的文字模块左侧移动。这就是为什么我们需要在第2列的左边添加另一个背景图像。这样，我们就可以调整移动空间，以显示模块左侧的背景图像。
继续复制部分中的背景图像，并将其粘贴到第2列的背景中。然后将第2列的背景图像位置更新到中间左侧。
我们将希望这一行最终跨越到100%的宽度移动，以便我们将有更多的空间为背景图像。更新下列行设置：
东丽开发企业网站的文章使用自定义宽度：是
单位：%
定制宽度：100%
使用自定义水槽宽度：是
排水沟宽度：1
现在，一些填充魔术，以调整为移动。
自定义填充(桌面)：左10%，右10%
定制填充物(片剂)：左5%，右5%
自定义填充(智能手机)：左0%，右0%
第2列自定义填充(Tablet)：左64 px，右64 px
第2列自定义填充(智能手机)：左64 px，右0 px
注意，第2列在移动设备上有一个64 px的左填充。这是为了准确地显示一半的背景图像在左边的模块。
保存设置。
现在删除右边列文本模块下的图像。您的背景图像还没有对齐，但这将是固定的，一旦我们定制我们的图像和文本模块。诀窍是确保右边的文本模块总是比左边列上的图像高。这将保持背景图像完美地对齐。
让我们缩小左列中的图像模块，为背景图像留出空间。更新下列设置：
宽度：75%(桌面和平板电脑)
模块对齐：中心
接下来，我们需要为文本模块添加一个背景色。
背景色：#ffffff
对于我们的背景图像，我们需要使用我们的图像的右半版本，然后确保它是居中左。
背景图像大小：实际大小
背景图像位置：中左
背景图像重复：不重复
按以下方式更新其余设置：
宽度：100%
定制填充：15%顶部，15%底部，15%左边，15%右边
选择框阴影
现在让我们检查最后的结果。
因为我们在第2栏的左边添加了第二个背景图像，所以我们在平板电脑和移动设备上也有了很好的效果。
这是完成的设计。
东丽开发企业网站的文章得出的结论是这种图像重叠设计可以是一个微妙的方式来设置您的布局分开。可以自由地尝试不同的背景颜色和过滤效果，以创造更独特的设计。您也可以使用常规图像。请记住，当背景图像设置为实际大小时，此设计可以工作，因此尝试使用小图像(大约128 px宽)。
我期待着在评论中听到你的意见。
干杯!
最新文章
随机推荐
