如何使用Elementor在WordPress中創建垂直滾動選項卡

垂直滾動選項卡可以使您可以在高大的並排佈局中顯示選項卡式內容。選項卡保持在左側或右側，而每個標籤的內容出現在另一側。訪客可以向下滾動選項卡以探索其中的內容。

這使頁面保持清潔，人們可以在不離開當前頁面的情況下查看大量信息。您不僅可以顯示文本，還可以在垂直滾動選項卡中顯示圖像，視頻和模板。用戶可以單擊或點擊選項卡以查看與之鍊接的內容，而其他部分則隱藏。

Elementor是一個流行的無代碼網站構建器。使用此插件，您可以使用其拖放功能從頭開始構建整個網站。在此教程帖子中，我們將向您展示如何使用Elementor在WordPress中創建垂直滾動選項卡。

垂直滾動選項卡的用例

垂直滾動選項卡可幫助您在一個小空間中組織大量內容。他們讓訪問者在不加載新頁面的情況下通過主題。該佈局易於在桌面和移動設備上使用。讓我們看一下下面的垂直滾動選項卡的某些用例。

一個。產品或服務詳細信息

您可以並排顯示許多產品或服務描述。每個選項卡都可以包含規格，價格，功能或評論。訪問者可以快速比較不同的選項而無需離開頁面。

b。常見問題（常見問題解答）

垂直選項卡非常適合常見問題解答。您可以在一個選項卡下將類似的問題分組，然後在另一個選項卡下進行答案。讀者可以滾動並僅單擊感興趣的問題。

c。分步指南或教程

如果您想通過多個步驟共享一個過程，則垂直選項卡保持每個步驟清晰。用戶可以單擊每個選項卡以按順序遵循指南。這使學習變得容易，並使頁面保持整潔。

d。團隊成員或員工資料

通過給每個成員一個選項卡，以專業的方式介紹您的團隊。每個選項卡可以顯示照片，角色和簡短的生物。訪客可以滾動列表，並在沒有混亂的情況下了解所有人。探索一些最好的團隊頁面示例。

e。投資組合或項目展示櫃

在垂直選項卡中顯示您的工作或項目以節省空間。每個選項卡可以顯示圖像，描述和鏈接到詳細信息。這有助於訪問者從一個頁面探索許多項目。

如何在Elementor中創建垂直滾動選項卡

理論部分結束了。希望您現在清楚地了解垂直滾動選項卡是什麼以及其用例是什麼。我們現在將介紹教程。我們將在本節中使用WordPress上的Elementor來解釋如何與Elementor創建垂直滾動選項卡。繼續閱讀！

啟動教程的先決條件

要使用Elementor在WordPress上創建垂直滾動選項卡，您需要在網站上安裝和激活以下插件。

• 免費的
• Happyaddons免費
• Happyaddons Pro

注意：您需要HappyAddons Pro，因為Elementor沒有內置選項來創建滾動選項卡。 HappyAddons Pro提供了一個名為Scroll Tabs的小部件，可讓您輕鬆創建垂直滾動選項卡。

這些插件在您的網站上準備就緒後，請按照以下說明的教程。

步驟01：使用Elementor打開頁面

只需使用Elementor打開一個頁面，您需要在其中創建垂直滾動選項卡即可。

步驟02：拖放畫布上的滾動式窗口小部件

在Elementor面板上找到滾動選項卡窗口小部件。將其拖放到Elementor帆布上。

滾動選項卡窗口小部件帶有一些默認內容。將小部件添加到畫布中後，您將看到此默認內容。

步驟03：開始將內容添加到選項卡

您可以將內容添加到“滾動”選項卡窗口小部件，並在許多方面對佈局進行樣式化。在此步驟中探索它們。

＃將標題添加到滾動標籤窗口小部件

每個Web部分都應具有一個標題，該標題清楚地分辨出其包含哪些類型的內容。因此，您必須為“滾動標籤小部件”部分編寫標題。

轉到內容>標籤內容>標題。您將獲得寫標題的空間。您會看到我們寫了一個標題“時尚的手錶見解”。

＃寫一個小部件的描述

在標題下寫入，您可以為小部件編寫描述。如果不需要說明，則可以將其刪除。

＃將內容添加到選項卡

將光標帶到選項卡，然後單擊它。這將擴展選項卡並允許您添加內容。

＃寫一個標籤的標題

您必須為每個選項卡編寫標題。擴展選項卡後，您將在NAV文本下獲得一個框。在這裡，您可以為選項卡編寫標題。

＃更改標籤的圖標

如果不需要，則可以刪除圖標。但是要更改圖標，請單擊您可以在NAV圖標下看到的圖標。

圖標庫將立即打開。選擇一個您喜歡的圖標，然後點擊插入按鈕。

您可以看到圖標已更改。

＃通過編輯器將內容添加到選項卡

每個選項卡允許您添加兩種類型的內容。您可以選擇是使用編輯器還是模板。

讓我們首先選擇編輯器選項。

使用此編輯器，您可以添加任何類型的文本和圖像，這些文本和圖像將立即顯示在相應標籤的畫布上。

＃更改選項卡式內容的背景顏色

為了更好地突出選項卡中的內容，您可以更改其背景顏色，因此它與您添加到選項卡中的所有內容都很好地對齊。

＃通過模板將內容添加到選項卡

如上所述，小部件使您可以通過編輯器和模板向選項卡添加內容。現在讓我們看一下如何使用模板添加內容。

從內容類型中選擇模板選項。如果您已經在網站上保存了預設的模板，則此選項適合使用。

單擊“選擇模板”旁邊的下拉圖標。然後，選擇要在選項卡上顯示的模板。

您可以看到我們所需的模板已經添加到選項卡中。

以同樣的方式，將內容添加到滾動標籤窗口小部件的所有選項卡中。

步驟04：配置滾動選項卡的設置

內容部分完成後，擴展“設置”部分。

您將能夠從本節中更改導航器面板的寬度和內容面板的高度，包括各種對齊調整。

＃調整導航面板的寬度

滾動選項卡窗口小部件有兩個部分 -導航器面板（NAV面板）和內容面板。

您可以通過在此選項下拖動比例來更改導航器面板的寬度。另外，您可以調整其位置和對齊方式。該過程顯示在下面的視頻剪輯中。

＃調整控制面板的高度

以同樣的方式調整控制面板的高度。另外，請確認內容垂直對齊。

步驟05：樣式化滾動選項卡窗口小部件

來到“樣式”選項卡。讓我們首先為導航器面板設置背景顏色。

＃自定義NAV面板內容的版式

為您添加到Navigator面板中的每個內容，更新版式，一一。您可以根據需要更改字體家族，大小，重量，線高等。

＃樣式標籤

通過添加邊框類型，邊框寬度，填充，邊框顏色，邊框半徑，文本顏色和背景顏色，您可以對選項卡進行樣式化並像以下圖像一樣顯示它們。希望你能自己做。

以同樣的方式，擴展並設置與內容面板和滾動部分相關的內容。

步驟06：優化手機的滾動標籤小部件

要優化移動屏幕尺寸的小部件，請轉到頂部欄上的移動肖像模式。

您會發現默認情況下，導航器選項卡出現在頂部。

＃調整內容面板的移動設備高度

現有的高度可能不足以用於內容面板。在這種情況下，您必須增加高度，以便在移動屏幕尺寸上可以完美地看到選項卡中的所有內容。

步驟07：優化平板電腦的滾動標籤小部件

同樣，切換到平板電腦肖像模式，以優化在平板電腦屏幕尺寸上最佳顯示的內容。

您可以在下面的視頻剪輯中看到小部件在平板電腦屏幕上看起來不錯的視頻剪輯。因此，我們不需要對其進行修改。

步驟08：預覽滾動選項卡窗口小部件

來到預覽頁面，檢查小部件是否正常工作。您可以看到小部件在我們的盡頭很好。

因此，您可以使用Elementor在WordPress中創建垂直滾動選項卡。

最後的收穫！

垂直滾動選項卡是保持網頁整潔的同時共享大量信息的明智方法。他們讓訪客找到所需的東西，而無需跳到新頁面。遵循上面的步驟後，您可以輕鬆地使用Elementor和HappyAddons Pro設計這些選項卡。

這使您的網站具有現代外觀，並改善了用戶探索您的內容的方式。但是，在創建本節時，請記住一些最佳實踐。為每個標籤使用清晰的標題，以便用戶知道會發生什麼。確保文本，圖像和視頻很輕，因此頁面加載迅速。

檢查不同屏幕尺寸的設計，並為移動用戶調整間距。保持顏色和字體與網站的樣式一致，因此標籤與其餘的設計自然融合在一起。這些小細節有助於為每個訪客創造平穩，專業的體驗。

了解如何使用Elementor在WordPress中設計翻轉框。