朔州企业网站开发：用Divi将图片和视频添加到您的屏幕模型中，这是非常棒的方法

 你会在各种各样的朔州企业网站开发网站上看到屏幕模型，从大到小。它们有助于展示以前的工作、服务等。他们也有助于您的网站的整体外观和感觉，并强调您的公司(或您的客户的公司)是专注于技术。在这篇文章中，我们将向您展示5种非常棒的方法，将图像和视频添加到您的屏幕模型中，并使用Divi的内置选项。这篇文章包含两个部分，第一部分是关于用Photoshop定制你的屏幕模型。您可以免费下载我们将在这篇文章中使用的模型。在第二部分中，我们将向您展示如何将您的模型提升到Divi的下一个级别。

结果

在我们开始本教程之前，让我们看一下不同的例子，我们将向您展示如何一步地重新创建。

示例1

例2

例3

例4

例5

用Divi将图片和视频添加到您的屏幕模型中，这是非常棒的方法

下载本教程的免费屏幕模型

为了帮助您完成本教程，我们将免费为您提供本教程中使用的模型。实际上，我们为您提供了两个设备模型和几个高质量的图像，因为我们共享的资源实际上来自于设计机构布局包。下载下面的图像资源时，可以解压缩文件夹并找到名为MB-pureFront.psd跟着走。

在Photoshop中修改模型文件

我们将要修改的模型文件只需要编辑一次。之后，您可以使用相同的文件来获取本文中的所有示例，只需使用divi和divi的内置选项。

右键单击+合并设备文件夹

一旦打开了MB-pureon.psd文件，您首先需要做的就是右键单击设备文件夹并选择“Merge Group”来合并设备文件夹。

控制/命令+点击屏幕层

一旦您这样做，您可以按下控制或命令，并点击屏幕层。通过这样做，您将选择模型的屏幕部分。

单击设备层+添加层掩码

在选择屏幕时，单击设备层并向其添加一个图层掩码。

控制/命令+I反转

在添加掩码后，立即按下控制或命令，并将“i”反转。

隐藏屏蔽层

接下来，隐藏屏幕层。此时，屏幕层将从您的模型中删除。下面我们需要做的是使屏幕部分透明。

控制/命令+点击屏幕层

要实现这一点，请按“控制”或“命令”，然后再次单击屏幕层。屏幕区域，将再次，被选中。

单击背景图层+添加图层蒙版

然后，在选择屏幕层时，单击背景层并向其添加一个掩码。

控制/命令+I反转

我们将需要倒置背景层，所以继续按控制或命令和‘我’。这将使我们有一个透明的屏幕，而周围的背景保持白色。我们之所以不让整个图像透明，是为了确保我们在Divi构建器中添加的图像或视频不会出现在其他地方，而是出现在屏幕上。

作物图像

我们最不需要做的就是裁剪图像。在不切断模型本身的任何东西的情况下，尽量减少白色背景。这将帮助我们确保我们将在Divi构建器中添加的图像或视频不会在白色背景中丢失。

为Web保存

现在图像已经完成，您可以将其保存到web中，方法是导出>为Web保存。确保您正在导出一个PNG图像，以便透明的背景将保持。

前四个示例的一般行设置

为了使本教程尽可能简单，我们将提前向您展示前四个示例中的每一个示例的行设置。然而，第五个设置需要其他设置。一旦在本文中看到第五个示例，我们将处理这些不同的设置。

柱结构

对于前四个例子中的每一个，我们使用的是一行，只有一列。

背景色

我们对每一行都使用白色背景。这是因为我们在Photoshop中对其进行修改时，它与我们为模型选择的背景色相匹配。如果你想使用另一种背景颜色，你也必须在Photoshop中使用另一种背景色。

上浆

我们还将在行中应用一些自定义填充。我们将自定义填充添加到行而不是图像模块的原因是为了确保我们添加到模型的背景不会受到影响。我们将使用的自定义填充如下：

· 顶部填充：0 px

· 右垫：200 px(桌面)，20 px(平板电脑)，10 px(电话)

· 底部填充物：0 px

· 左垫：200 px(桌面)，20 px(平板电脑)，10 px(电话)

重新创建示例1

我们将向您展示如何重新创建的第一个示例允许您将任何类型的图像添加到模型中并修改其颜色。你只需要修改模型一次。从那时起，您可以重复使用模型的次数，因为您需要添加不同的图像或截图到它。

添加图像模块&上传模型

首先，添加一个图像模块到您的一列行，并上传您的模型图像。

添加背景图像

然后，在Content选项卡中打开背景子类别，并添加具有以下设置的背景图像：

· 背景图像大小：封面

· 背景图像位置：中心

· 背景图像重复：不重复

· 背景图像混合：正常

如果需要，添加渐变背景覆盖

例如，您可以通过添加渐变背景来修改图像的颜色。朔州企业网站开发图中的渐变背景具有以下设置：

· 第一颜色：#0C71C3

· 第二颜色：#E 09900

· 梯度方向：180度

· 起始位置：19%

· 期末职位：61%

若要向背景图像添加渐变背景，请选择“乘”作为背景图像混合。

需要时使用过滤器

另一个选项是将过滤器应用到图像中，方法是转到Design选项卡的Filters子类别。对于下面的示例，我们做了以下修改：

· 饱和：123%

· 对比：121%

重新创建示例2

第二个示例我们将向您展示如何重新创建一个列梯度背景和一个视差背景图像。与新的混合模式，Divi提供，我们能够结合图像和梯度背景，以创造惊人的结果。

向第1列添加渐变背景

首先，将以下渐变背景添加到行的列中：

· 第一颜色：#EDF 000

· 第二颜色：#4D0184

· 柱梯度类型：线性

· 柱梯度方向：180度

· 列起始位置：0%

· 柱端位置：50%

添加图像模块&上传模型

然后，添加一个图像模块并再次选择模型。

添加背景图像&使用CSS视差法

接下来，打开背景子类别，上传背景图像，启用“使用视差效果”选项，并选择“CSS”作为视差方法。

向图像模块添加混合模式

你必须做的最后一件事是将过滤器子类别的混合模式转换为“硬光”。

重新创建示例3

在下一个例子中，我们将简单地向模型中添加一个视频，而不是一个图像。你可以添加所有类型的视频到模型，屏幕截图就是其中之一。

添加图像模块&上传模型

同样，从添加一个图像模块开始，并选择我们用Photoshop创建的模型。

添加背景视频

然后，添加一个视频到背景子类别的图像模块，你就完成了！

重新创建示例4

下一个例子，我们将重新创建一个视频背景，并结合一个图像背景，以改变您的模型的外观和感觉。

将背景图像添加到第1列

从打开行设置开始，将背景图像添加到背景子类别中，并为此使用以下设置：

· 列背景图像大小：封面

· 列背景图像位置：中心

· 列背景图像重复：重复

· 列背景图像混合：正常

添加图像模块&上传模型

然后，在本文的Photoshop部分添加一个带有模拟模型的图像模块。

添加背景视频

接下来，向图像模块添加一个视频背景。

向图像模块添加混合模式

最后，在图像模块的过滤器子类别中启用“轻松”混合模式。

重新创建示例5

我们将重新创建的最后一个示例允许您添加一个占用整个屏幕宽度的背景图像。显示的模型也有一个视频背景，这与正在使用的图像背景很好地融合在一起。

行设置

柱结构

最后一个示例的行设置略有不同。从选择一列行开始。

第1栏背景图像

然后，将背景图像添加到具有以下设置的列中：

· 列背景图像大小：封面

· 列背景图像位置：中心

· 列背景图像重复：重复

· 列背景图像混合：正常

上浆

接下来，打开行的大小子类别并应用以下更改：

· 全宽行：是的

· 使用自定义水槽宽度：是

· 排水沟宽度：0

间距

还需要一些自定义填充和列自定义填充：

· 上、右、下、左填充物：0 px

· 柱顶填充：70 px

· 右栏填充：300 px(桌面)，200 px(平板电脑)，100 px(电话)

· 柱底填充物：70 px

· 左栏填充：300 px(桌面)，200 px(平板电脑)，100 px(电话)

添加图像模块&上传模型

一旦您完成了行设置，您可以添加一个图像模块，并选择我们在Photoshop部分文章中创建的模型。

添加背景视频

然后，将视频添加到图像模块的背景子类别中。

向图像模块添加混合模式

最后但并非最不重要的，选择‘乘’作为混合模式内的过滤器子类别的设计选项卡，你就完成了！

最后思想

在这篇文章中，我们向您展示了5种将图像和视频添加到屏幕模型中的很棒的方法。我们首先向您展示了如何在Photoshop中对一个模型文件进行一些修改，您可以免费下载该文件，并继续演示如何在Divi Builder中修改该模拟文件，以显示您希望与访问者共享的所有图像或视频内容。如果您有任何问题或建议，请确保在朔州企业网站开发下面的评论部分留下评论！