網站標簽 -，也稱為頁內選項卡,它們在網頁設計中很受歡迎，它們允許您在單個窗口內的同一組內容之間切換，并提高網站的整體可讀性。但是設計不當的可能會導致交互出現問題。熟悉網站標簽或需要加強您的標簽設計，一切都與標簽有關 - 為什么需要它們，以及如何使用強大的 SP Page Builder 為您的 Joomla 網站創建漂亮的標簽！

何時使用標簽？

網站標簽是必不可少的，頁內選項卡是一個不錯的選擇。此元素的主要目標是允許用戶一次一個地查看一組相關數據，以便他們可以順利找到所需的特定信息。

在以下情況下最好使用選項卡：

• 您需要信息高度可掃描且易于導航
• 頁面可以從更有條理的結構中受益
• 你想展示一組相關的信息
• 您可以將您的內容集分類為不同的部分
• 您還可以使用選項卡進行導航

選項卡的指南和最佳實踐

既然您知道網站何時可以使用選項卡，那么了解創建有效選項卡的指南很重要。一個好的網站標簽是直觀的，可以幫助讀者輕松瀏覽信息，并使您的網站前景更上一層樓。

設計標簽來引導用戶：盡量讓標簽簡短而具體。短標簽在標簽中更具可掃描性和可控性。如果您需要長標簽，添加圖標和副標題可以提供更具指導性的體驗，也是增強選項卡控件上下文的好方法。

注意長度：您需要注意每個選項卡中內容的長度。單個選項卡上的太多信息會使讀者感到困惑，并且無法達到選項卡的目的。在每個選項卡模塊中保持您的內容精確和長度相似。

按順序排列選項卡：按重要性或邏輯順序排列選項卡。例如，通常是第一個選項卡的默認選項卡應包含最重要/最有用的信息。這將創建一個邏輯流程并且對讀者有意義。

使其具有交互性：最后但并非最不重要的是，使您的標簽具有交互性。不要只使用純文本，而是使用圖像或視頻來創建更具吸引力的內容。此外，請注意小細節，例如突出顯示當前選項卡、是否創建點擊或懸停觸發器等，以獲得無縫的用戶體驗。

如何使用 SP Page Builder 創建標簽

SP Page Builder 因其驚人的拖放站點構建功能而廣受喜愛。如果您是 SP Page Builder 用戶，您就會知道它使整個開發過程變得相當簡單。此外，借助所有強大的附加組件，您幾乎可以向您的網站添加任何您想要的交互功能。談到插件，今天我們將看到您如何使用標簽插件在您的網站上創建漂亮的標簽，而無需與任何代碼。

第 1 步：添加 Tabs 插件

第一步是獲取 SP Page Builder Pro。訪問SP Page Builder 登陸頁面，向下滾動，選擇適合您的購買計劃并獲得 SP Page Builder Pro。通過導航到您的 Joomla 儀表板 > 擴展 > 擴展管理器來安裝下載的 zip 文件。

現在，您可以開始使用 SP Page Builder 創建頁面布局。一旦您對正在進行的布局感到滿意，請在左側邊欄上搜索“標簽”并將插件拖放到頁面上。

這是默認情況下的外觀，無需任何自定義。

第 2 步：添加選項卡項

在開始添加標簽項之前，請計劃好您的內容。將信息分類到不同部分后，相應地添加選項卡項。為此，請單擊“添加項目”按鈕。

第 3 步：設置選項卡的樣式

選項卡插件讓您可以選擇選項卡樣式，通過簡單直觀的界面創建漂亮的響應式選項卡。您可以從 Modern、Default、Pills、Lines 和 Custom 中進行選擇。它們都有自己的用途，但在本教程中，讓我們使用自定義樣式。

第 4 步：自定義顏色和字體 

此步驟是可選的。更改內容背景顏色、字體大小、導航樣式、填充等，看看哪些適合您。正是所有這些小細節產生了最大的不同。探索不同的自定義選項，您很快就會創造出獨特而令人驚嘆的東西！

第五步：添加內容

一旦你有了基本的結構，就該添加內容了。只需在各自的字段中鍵入標題和副標題，即可為您的選項卡模塊提供標題和副標題。您還可以從圖標列表中設置一個圖標或使用唯一的圖像作為圖標，如下所示。

現在，讓我們添加我們的標簽內容。最好的部分是您可以使用任何您喜歡的插件為每個選項卡項目制作您的內容。我們如何添加 Image 插件來讓我們的標簽更具吸引力？

您可以設置寬度、高度、邊框、圖像位置等，并根據需要自定義圖像的外觀。

何時不使用標簽

那么，你怎么知道什么時候不實現標簽內容呢？要做出決定，您需要問自己幾個問題。

• 您的內容是連續的還是有需要分段的主題？
• 用戶處理帶有或不帶有標簽的信息會更快嗎？
• 您希望人們同時比較內容嗎？

標簽如果實施得當，可以清晰準確地向訪問者展示信息并提高您的轉化率。使用選項卡，用戶很容易知道他們在哪里，他們可以在那里做什么，以及他們究竟可以使用什么。更神奇的是使用 SP Page Builder，您只需幾步即可輕松創建漂亮的標簽。它為您完成所有繁重的工作。