如何在 Divi 中為視頻腳本創建自定義切換

為您的視頻腳本添加自定義切換可以為您的網站帶來很多好處。 事實上，只需為您網站上的每個視頻添加一個視頻腳本就可以改善用戶體驗、可訪問性和 SEO。 用戶可以選擇閱讀內容，這對於耳聾、聽力障礙或在嘈雜的咖啡店裡的人來說是一個很好的輔助功能。 而且您可以比觀看視頻（或視頻字幕）更快地閱讀成績單。 此外，添加的內容可能會包含大量可改善 SEO 的關鍵字。 為視頻抄本創建自定義切換也很好，因為它可以隱藏長格式的內容，直到需要它為止。

在本教程中，我們將為 Divi 中的視頻轉錄創建自定義（和緊湊）切換。 為此，我們將通過簡潔的改造來自定義 Divi 的切換模塊，以便它可以很好地適應任何視頻。 然後我們將向您展示如何使用 Youtube 自動生成的成績單作為切換內容。 所有這一切都無需使用插件。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，分區佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中為視頻轉錄創建自定義切換

第 1 部分：使用 Divi 視頻模塊將 Youtube 視頻添加到頁面

對於我們教程的第一部分，我們將使用 Divi 構建器中的視頻模塊將 youtube 視頻添加/嵌入到頁面中。 這個過程真的很簡單。

但在添加視頻之前，讓我們向該部分添加一列行。

接下來，將視頻模塊添加到該行。

單擊“視頻 MP4 文件或 Youtube URL”選項下的添加視頻加號圖標。

然後在彈出窗口的左側邊欄上選擇從 URL 插入操作。

在輸入框中粘貼 YouTube 視頻的 URL。

然後單擊插入帖子按鈕。

添加視頻後，您可以向視頻添加自定義疊加圖像。

第 1 部分：為成績單創建自定義切換

現在我們的視頻已經就位，我們可以創建自定義切換來保存我們的轉錄內容。 為此，我們將自定義一個切換模塊。

首先，直接在視頻下添加一個切換模塊。

在切換設置中，為標題文本添加單詞“Transcript”。 （稍後我們將回到正文內容，以便稍後粘貼我們的 youtube 視頻轉錄內容）

在設計選項卡下，更新以下內容：

• 圖標顏色：#42b3a9
• 打開切換背景顏色：透明
• 關閉切換背景顏色：透明
• 文本對齊：居中
• 標題字體：Roboto
• 標題字體樣式：TT

• 最大寬度：800px
• 模塊對齊：居中
• 填充：頂部 0px，底部 20px，左側 0px，右側 0px
• 邊框寬度：0px

在高級選項卡下，我們需要添加一些 CSS 片段來完成切換的設計。

將以下 CSS 添加到切換標題：

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

將以下 CSS 添加到切換圖標：

right: 0.75em !important;

將以下 CSS 添加到切換內容：

max-height: 30vh;
overflow-y: scroll;
padding: 20px 3%;
background: #ffffff;
border: 2px solid #eeeeee;
border-radius: 5px;
text-align:left;

第 3 部分：從 Youtube 獲取成績單並將其添加到切換內容

手動為視頻創建腳本可能有點麻煩。 並且有一些服務和插件可以以更專業的方式來完成（有些需要高價）。 但是對於本教程，我們將使用一種快速、簡單且免費的方法。 我們將提取 Youtube 自動生成的視頻腳本，並在我們的網站上使用。

為此，請轉到您在 Youtube 上的視頻並按照以下步驟操作：

1. 打開視頻下方保存按鈕旁邊的更多操作下拉菜單（3 個水平點）。
2. 從列表中單擊打開成績單。
3. 在“成績單”框的頂部，打開“更多操作”下拉菜單（3 個垂直點）。
4. 單擊切換時間戳。 這將隱藏顯示在每個文本塊左側的時間戳。

將框中的整個轉錄內容複製到剪貼板。

現在文本充滿了換行符。 要刪除這些內容，您可以訪問 textfixer.com 並使用他們的免費換行符刪除工具從文本中刪除換行符。

在“刪除換行符”部分下，選擇“僅刪除換行符”。

然後將轉錄文本粘貼到框中。

然後單擊刪除換行符按鈕。

在標題為 New Text without Line Breaks 的部分下生成文本後，將文本複製到剪貼板。

返回您的站點，打開切換設置，然後將轉錄內容粘貼到模塊中。

當然，成績單文本缺少一堆大寫字母、標點符號、段落等。但是，內容在那裡並且可讀。 但是，您可能需要花幾分鐘時間為讀者清理文本。

就是這樣！

最後結果

這是我們在 Divi 中自定義切換視頻腳本的最終結果。

在桌面上...

在平板電腦上…

而在電話...

最後的想法

在本教程中，我們向您展示瞭如何將 Divi 切換模塊轉換為 Divi 中視頻腳本的自定義切換。 單獨切換的獨特簡潔設計具有超出視頻腳本的應用範圍。 我的意思是你可以在裡面放任何你想要的文字。 但我認為它非常適合視頻。 此外，如果您需要一個簡單的解決方案，那麼使用這些自動生成的 youtube 視頻腳本肯定會派上用場。 但是，請隨意探索其他選項來轉錄您的視頻內容和/或與我們分享一些。

我期待在評論中收到您的來信。

乾杯!