使用 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 的拖放功能絕對可以成為提升網頁設計工作流程的有用工具。一開始有一些限制可能會引起一些挫折，但希望本文能幫助您了解如何利用此功能來創建可拖動文件的個人庫，從而提高您在網頁設計中的工作效率。

我很想在下面的評論中聽到你自己的想法。

乾杯!