使用 Divi 的拖放文件上传功能提高生产力的 6 种方法

已发表: 2018-08-22

Divi 的拖放文件上传功能可以成为提高网页设计师生产力的绝佳工具。在本教程中，我将向您介绍 6 种使用拖放功能改进 Divi 设计工作流程的方法。在此过程中，我还会为您提供一些有用的提示、示例和奖励代码片段。如果有的话，拖放文件只是为了看看会发生什么总是很有趣的。

让我们开始吧！

Divi 拖放文件上传功能的简要概述

使用 Divi Builder 时，拖放文件上传功能是一种向页面添加内容的简单方法。顾名思义，您可以将文件拖放到页面上以添加内容，而无需事先设置部分、行和模块的正常过程。 Divi 会根据文件类型放置不同的内容。例如，txt 文件将被添加到文本模块，html 文件将被添加到代码模块，而 css 文件将作为自定义 CSS 添加到您的页面。

支持的文件类型及其拖放行为

这是拖放功能当前支持的所有文件类型的列表。在考虑如何在设计过程中利用该功能时，这可能会派上用场。我还添加了一个简短的说明，以帮助您了解拖入这些文件类型时会发生什么。

图像文件

gif
JPEG格式
jpg
PNG

当放入单个图像文件时，Divi 将创建一个新部分和一列行，然后添加一个图像模块，其中您的图像已上传到该模块。

当一次放入多个图像文件时，Divi 将创建相同的结构（新的部分和行），但会将您的图像添加到图库模块。

文本文件

文本

放入 txt 文件会将文本添加到新部分和新行内的新文本模块中。

字体文件

奥特夫
ttf

放入字体文件将启动“字体上传”弹出窗口，其中包含您的字体名称和已加载的字体。您需要做的就是在单击上传按钮之前确认要包含所有支持的字体粗细。

视频文件

m4v
移动
网络管理器
微电影
mp4

放入一个或多个视频文件会将每个视频添加到新部分和行内的新视频模块中。

音频文件

mp3
声波

放入一个或多个音频文件会将每个音频文件添加到新部分和行内的新音频模块中。

网络文件

json
html
css

json 文件适用于您已导出的任何页面布局。在 json 文件中拖动会自动将页面布局加载到页面中。

拖入 html 文件会将 html 添加到新部分和行内的新代码模块中。

拖入 CSS 文件会自动将 css 代码添加到页面的自定义 CSS 中，该代码可在页面设置的高级选项卡下找到。

总体而言，该过程是直观的，并且在改进工作流程方面具有很大的可能性。让我们来看看您可以使用该功能的一些方式。

#1 根据需要将自定义 CSS 片段拖入您的页面

大多数 Divi 用户特别喜欢 Divi，因为您不必使用自定义 CSS。这就是让 Divi 如此伟大的原因。但是，在 WordPress 主题定制方面，自定义 CSS（即使在 Divi 中）仍然是一项宝贵的资产。

像任何优秀的 Web 开发人员一样，您应该在此过程中保存您的 CSS 片段，以便您可以轻松地访问它们以用于未来的项目。这不仅可以让您更熟练地构建网站，还可以让您利用 Divi 的拖放功能。

例如，假设您有一个 CSS 片段用于隐藏 Divi 页面上的底部页脚栏。如果您将该代码段保存为标题为“隐藏底部页脚”的 css 文件，则您可以抓取该文件并将其拖到您的页面上以获得即时结果。

Divi 自动组织您的每一个片段

对于您拖到页面的每个 css 文件，Divi 将提取 CSS 并将其添加到您的页面。您可以随时在页面设置的高级选项卡下查看此自定义 css。

您还会注意到，Divi 将通过用注释包装它来巧妙地组织您的 css 代码段。如果您不知道，代码中会使用注释来轻松识别和/或描述某些代码块。在你的 CSS 片段之前，Divi 插入一个注释，其中包含文本“开始”，后跟你的 CSS 文件的标题“隐藏底部页脚”。在代码片段之后，Divi 插入了另一个注释，并在文件标题之后添加了文本“End”。

以下是在“隐藏底部页脚”CSS 文件中拖动后，片段在页面设置中的外观示例。

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

对于那些不知道如何创建自己的 css 的人，您可以依赖网络上为您提供的有用教程。这很酷。我们都这样做。但是如果您想利用拖放功能，您可能需要开始将这些片段保存为单独的文件并相应地命名它们。这样每个片段只需拖放即可。

可用于悬停动画的两个 CSS 片段示例

使用 CSS，可能性几乎是无限的。但我想我会给你几个 css 片段的例子，你可以保存到你的库中，这些片段将为你的网站添加动画。

将以下 css 片段保存为“.css”文件（将其命名为“Scale Icons on Hover”）。

.et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

然后将以下代码段另存为另一个名为“Blurb Shadow on Hover”的“.css”文件。

.et_pb_blurb:hover {
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    box-shadow: 0px 0px 20px #ccc;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

将两个文件都保存到计算机后。选择这两个文件并将它们拖到页面上。如果需要，您当然可以只拖动一个，但我想我会向您展示它也适用于多个文件。这将通过在悬停时添加框阴影来立即使所有模糊模块具有弹出效果。当您将鼠标悬停在它们上方时，它还会导致所有模糊图标缩放（变大）。

很酷的东西。

并且您可以想象，一旦您拥有这些 css 文件的武器库，它将有多么大的帮助。

#2 将自定义字体拖放到您的页面并快速替换当前字体

如果您构建网站，您就会熟悉拥有多种可用字体的需求。 Divi 在 Divi Builder 中内置了数百种字体，这使事情变得容易多了。您始终可以使用该选项从 Divi Builder 中上传新字体。但是借助 Divi 的新拖放功能，向您的网站添加新字体非常简单。

假设您正在使用一种预制布局，但想尝试一种 Divi 尚不可用的新字体。这是更改字体的容易程度：

确保可视化构建器已激活并且您已上传预制布局。然后您所要做的就是将您的字体文件从您的计算机拖到浏览器窗口内的页面/视觉构建器上。然后点击上传按钮。

拖放与查找和替换是一个强大的组合

为了更进一步，您可以使用 Divi 的查找和替换功能将预制布局标题中使用的字体替换为您刚刚放入的新字体。

使用 Creative Agency Landing Page 布局，打开顶部部分包含标题文本的文本模块。然后右键单击标题字体选项。在右键菜单中，选择查找和替换。

在“查找和替换”弹出窗口中，在“替换为”选项下选择您的新字体，然后单击蓝色的替换按钮。

现在你所有的标题都有新的字体了！

#3 拖放多个图像以创建带有标题的即时照片库

Divi 的拖放功能允许您轻松地将图像拖放到您的站点。在构建包含大量图像的网站时，这确实派上用场。而且由于大多数人将保存的图像保存在计算机上的文件夹中，因此能够选择这些图像并将它们拖到您的页面中非常方便。

这是在单个图像中拖放时的工作原理。

当您将单个图像拖到可视化构建器上时，它会自动执行以下操作：
1.创建一个新的常规部分，一列行
2.在行中添加图像模块
3. 将图像插入该图像模块
4. 打开图像设置以方便开始编辑过程。

这是在多个图像中拖动时的工作原理。

当您将多个图像拖入视觉构建器页面时，Divi 将自动执行以下操作：

1.创建一个新的常规部分，一列行
2. 在行中添加图库模块
3. 将新图片插入图库模块
4. 打开图库模块设置以帮助快速启动编辑过程。

在将图像拖到页面之前准备图像

为了确保您的图片库看起来很棒，事先进行一些优化会有所帮助。

图片尺寸
首先，确保您的图像大小相同。我建议使用大约 1500 像素 x 800 像素的图像。当图像部署在灯箱中时，这为图像提供了很好的尺寸。此外，Divi 将使用较小版本的图像作为图库中的缩略图。在我们讨论这个主题时，查看 Divi 模块的一些推荐图像大小可能会有所帮助。之后，您可以通过将文件拖到 TinyPNG 中来进一步缩小文件大小，或者使用您的照片编辑器将其保存为 Web 规范。

图片标题
默认情况下，Divi 将在图库中的每个缩略图下显示图像的标题。所以，它使（如果你想显示这个标题），在拖动它们之前给你的图像一个正确的标题。

#4 使用 CSS 文件将 MP3 文件拖入您的页面以快速启动设计

对于您那里的播客来说，这绝对可以提高生产力。由于 Divi 的拖放功能支持 mp3 和 wav 文件格式，您可以轻松地将它们拖放到构建器中以快速启动构建过程。

当您将单个 mp3 或 wav 文件拖入页面时，Divi 将自动执行以下操作：

1.创建一个新的常规部分，一列行
2. 添加一个新的音频模块，并附上您的音频文件
3. 打开自动设置模式开始编辑过程。

当您将多个 mp3 或 wav 文件拖动到页面时，Divi 将执行与拖动单个音频文件时相同的操作，只是它会多次执行此操作。因此，如果您拖入 4 个音频文件，Divi 将创建 4 个不同的部分，其中一行包含音频模块和音频文件。音频设置模式也会弹出来开始编辑最后添加到页面的音频模块。

拖入 CSS 文件以立即设置所有音频模块的样式

如果您习惯于使用自定义 CSS 为您的 Divi 页面添加额外的样式，我建议您将这些片段保存在一个 css 文件中以用于将来的构建（尽管我确定您已经知道这一点）。因此，如果您有一个 css 片段以某种方式设置音频模块的样式，请将该 css 保存在单独的 css 文件中。然后，您可以简单地将该 css 文件拖到页面中，以立即设置所有音频模块的样式。

我在上图中使用的 CSS 是一个快速示例，但如果您想尝试一下，请复制以下自定义 CSS：

.et_pb_audio_module_content h2 {position: absolute;
    top: -40px;
    background: #c5310d;
    padding: 0.6em;
    left: 50px;}
.et_audio_module_meta {
    position: absolute;
    bottom: -45px;
    right: 30px;
    background: #c5310d;
    padding: 1em !important;
}
.et_pb_audio_module {
background: #888 !important;
}

.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before {
    color: #c5310d;
}

.mejs-time-handle-content {
    border: 4px solid #c5310d;
    height: 14px;
    left: -7px;
    top: -6px;
    width: 14px;
    background: #c5310d;
}
.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total
{
background: #222;
}

然后将其粘贴到文本编辑器中并以 css 文件格式保存（它必须具有扩展名“.css”）。一旦你把它保存到你的电脑上。将它拖到包含您的音频简介的可视化构建器中。

#5 创建可重用的代码块，可以将其拖入页面以进行即时实施

Divi 的拖放功能确实支持 CSS 和 HTML 文件（抱歉，不允许使用 javascript 文件）。尽管对于那些知道自己在做什么的人来说，您可以将脚本添加到 HTML 文件中，以便为您添加该 javascript 功能。但这确实为组合这些文件以创建有用的代码块提供了机会，您可以将这些代码块拖到页面中以获得即时结果。

示例 1：将导出的 Code Pen 文件拖放到您的页面

如果您是 codepen 的粉丝，您可能已经准备好使用一些有用的拖放魔法。在您太兴奋之前，我必须警告您，为了创建在将它们拖入时会立即影响您的站点的文件，您将仅限于使用仅使用 html 和 css 组合的 codepen。

以下是此过程可能对您有用的方式。

转到包含要导出的 Codepen 的页面，然后单击页面右下角的导出按钮。

提取计算机上的文件并找到 html 文件和 css 文件。使用文本编辑器查看您的 html 文件并取出所有您不需要的标签（doctype、html、header、body），这样剩下的就是您在 codepen 的 html 框中看到的 html . 然后保存文件。

事实上，对于 HTML 文件，您最好直接从笔中复制 HTML 并创建您自己的 html 文件。

现在找到 CSS 文件（应该位于 CSS 文件夹内）。确保使用 CSS 文件而不是 SCSS 文件（拖放功能不支持此文件类型）。

现在将两个文件拖到页面中，您的可视化构建器处于活动状态。

这是自动发生的：

1. Divi 创建一个具有一列行的新部分。
2. Divi 将代码模块添加到以您的 html 作为内容的行中。
3. Divi 将自定义 css 添加到您的页面设置自定义 CSS 块中。

如果出现错误，则意味着您没有正确的文件类型或文件内容包含不受支持的代码。例如，如果 html 文件具有 doctype 和 html 标签，则该文件将不起作用。此外，如果您的 css 文件有 SCSS 代码，也可能会触发错误。

当然，这最初并不是最顺利的过程。您将不得不稍微组织一下您的代码和文件。因此，如果您不熟悉 html 和 CSS，这可能会很困难。但最终结果可能证明非常有价值，因为您将能够储存一些可重用的代码块，这些代码块只需拖放即可。

我还应该指出，在复制不是您自己的代码之前，您应该熟悉 Codepen 的许可。

示例 2：将 Font Awesome 的独立实例拖放到您的页面

如果您习惯于在您的 Divi 站点上使用 Font Awesome，您可能会受益于手头的一些“可拖动”文件，这些文件将允许您将 Font Awesome 实例插入到您的页面中。这实际上可以通过一个 HTML 文件来完成。

以下是此过程可能对您有用的方式。

从他们的网站上获取 Font Awesome 脚本。确保它是 SVG + JS 版本。然后将脚本复制到剪贴板。

然后创建一个新的文本文件并粘贴代码。在脚本下，添加要部署到页面的 html 和字体代码。

这是一个“可拖动”的 html 代码示例，其中包含一个使用字体真棒图标的列表：

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<h2>Header</h2>
<ul class="fa-ul" style="list-style:none; font-size: 18px">
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
</ul>

确保将文件另存为 html 文件。然后使用可视化构建器将其拖到您的页面中。

Divi 会自动为您将 html 添加到代码模块中，现在您可以为您的页面编辑一个很棒的字体列表。

您可能希望将列表放在文本模块中，以便您可以使用文本设置内容。但由于这不会自动发生，您可能希望限制 html 文件以包含脚本。然后将您的 html 粘贴到文本模块中。但是对于那些手头有 css 文件来处理设计的人来说，能够将其与 html 文件一起拖动是很好的。

#6 在您的硬盘驱动器上创建一个 Divi 页面布局库（json 文件）以拖入您的页面以加快开发速度

使用 Divi，您可以轻松保存和导出您设计的整个页面布局。这个功能有两个非常大的好处。第一个好处是能够在 Divi 库中保存页面布局，以帮助加快构建网站时的设计过程。第二个好处是能够将页面布局导出到您自己的计算机。这使您可以积累宝贵的页面布局（json 文件）集合以启动您的下一个项目。

新的拖放功能允许您将这些保存的布局快速拖入可视化构建器，以加快开发速度。

以下是此过程可能对您有用的方式。

假设您只想保存 Design Agency Landing Page 布局的页眉部分（这可以是您喜欢的任何设计，但在本示例中，我使用的是预制布局）。将布局加载到页面后，删除布局中除顶部标题部分之外的所有部分。然后您将布局导出到您的硬盘驱动器。

要使用可视化构建器导出页面布局，请打开设置菜单并单击可移植性图标。然后在可移植性弹出窗口中，输入名称（“Design Agency Header Layout”），然后单击“Export Divi Builder Layout”按钮。

这会将布局作为 json 文件保存到您的计算机。

现在，如果我删除页面上的标题部分，以便我的页面现在没有任何部分，我可以通过将 json 文件拖到页面中轻松地将该标题添加回我的页面。

当我拖动 json 文件时，可移植性模式会自动弹出，让我可以选择替换现有内容的选项，或预先创建备份。由于我不需要替换任何内容，我所要做的就是单击导入按钮，它会立即加载到页面中。

这可能看起来并不那么令人印象深刻，但它有可能真正加快设计过程。如果我有大量具有不同页面布局的 json 文件（每个文件都有我喜欢的特定元素）。然后我可以像构建块一样使用这些文件并将它们一个一个地拖到页面上。只要确保在导出它们时给它们的标题是描述性的。

最后的想法

Divi 的拖放功能绝对可以成为提升网页设计工作流程的有用工具。一开始有一些限制可能会引起一些挫折，但希望本文能帮助您了解如何利用此功能来创建可拖动文件的个人库，从而提高您在网页设计中的工作效率。

我很想在下面的评论中听到你自己的想法。

干杯!