簡介

在網頁設計中，清楚且有條理地呈現內容是提升使用者體驗的必要條件。的 手風琴 Elementor 中的 widget 是將資訊組織為可折疊區段的絕佳工具。這樣可以保持頁面整潔，並讓使用者根據需要專注於特定的內容區域。透過嵌入以下元素 影像, 按鈕, 影片以及 圖表 在每個手風琴項目中，您可以創造互動且視覺上吸引人的體驗。

以下是在 Elementor 中設定手風琴和嵌入各種類型內容的指南，並附有實用範例。

步驟 1：新增 Accordion Widget

1. 開啟 Elementor 編輯器:前往 WordPress 面板，開啟您要編輯的頁面或文章，並載入它 使用 Elementor.

2. 新增 Accordion Widget:在 Elementor 的 widget 面板中，搜尋 "手風琴" 小工具。將它拖放到頁面所需的區段。預設情況下，Accordion widget 會顯示一系列可摺疊的區段，非常適合組織分層內容。

步驟 2：設定 Accordion 項目

1. 建立風琴式項目:Accordion widget 通常有三個預設項目。您可以按一下" "，加入更多項目。新增項目「按鈕，或按一下」 "移除不必要的項目。X每個項目旁邊的 " "。

2. 編輯標題和內容:每個手拉手項目都有一個「標題」和一個「內容」區域。更新每個標題以反映內容，例如 「產品特色」、「視訊教學 」或 「常見問題部分」。在內容區域中，您可以新增文字或嵌入圖表和圖庫等元素。

步驟 3：在 Accordion 項目中嵌入互動內容

一旦您設定好風琴式結構，就可以透過嵌入各種類型的 內容.以下是如何 添加圖表, 圖庫, 影片, 按鈕以及 聯絡表格 到個別手冊項目。

嵌入圖表

圖表可直觀顯示資料，非常適合分享統計資料或進度指標。

步驟:

1. 開啟您想要圖表的手拉手項目內容區域。
2. 將「HTML」或「Shortcode」小工具拖曳到內容區域。

3. 貼上您的圖表代碼（例如，從 Google 圖表 或 Chart.js)，並調整款式和尺寸，以確保非常合身。

範例： 可以將顯示披薩配料分佈的餅形圖嵌入標示為「披薩配料偏好」的手風琴項目中，讓使用者按需檢視每種配料的受歡迎程度。

嵌入圖庫

圖庫是展示產品、作品集或使用前後圖片的理想選擇。

步驟:

1. 拖曳"圖庫" widget 到手拉手項目的內容區域。

2. 選擇您要包含的圖片，並選擇版面樣式，如 網格, 正義或 圬工.

3. 對於一個 旋轉木馬 或幻燈片效果，使用 "圖片卡羅素"小工具來取代。此 widget 可讓圖片自動捲動。
4. 展示您的食材，如果您想加入按鈕讓客戶選擇，您可以將它設定為多欄圖片。

對於攝影作品集，請將版面設定為 圬工 以獲得更動態的顯示效果。您可以為每個類別建立手風琴項目，例如「自然」、「人像」和「都市」，並在每個類別中顯示相對應的圖片。

嵌入視訊

影片是解釋資訊的有效方式，尤其是產品演示或教學。

步驟:

1. 在手拉手項目的內容區域中，拖曳" "。視訊" 小工具。

2. 貼上 影片連結自 YouTube, Vimeo或 另一個視訊主機.

3. 調整自動播放、靜音或循環播放等設定，並設定視訊大小，使其能整齊地放在手風琴內。

範例:對於線上課程平台，每個模組使用手風琴項目，例如「模組 1：介紹」，並嵌入預覽影片，讓使用者先了解內容。

新增行動呼叫按鈕

位置適當的按鈕可以鼓勵使用者採取行動，例如檢視更多資訊、預約服務或購買。

步驟:

1. 將「Button」元件拖曳到內容區域。

2. 自訂按鈕文字，例如 「瞭解更多資訊」、「取得報價」 或 「聯絡我們」。

3. 設定按鈕連結，並使用顏色、大小、對齊方式和懸停效果調整樣式，使其脫穎而出。

範例:在服務頁面中，建立一個包含「諮詢」、「支援」和「客製化解決方案」等項目的手風琴。在每個項目中加入「聯絡我們」按鈕，以連結至預約頁面。

嵌入聯絡表單

手拉手項目內的聯絡表單可讓使用者在不離開網頁的情況下聯繫，簡化流程。

步驟:

1. 使用 WPForms, 聯絡表單 7, 或類似的外掛程式。
2. 複製表單的簡碼。

3. 在手拉手項目的內容區域中，拖曳" "。簡碼" 小工具，並貼上表單的簡碼。

範例:在客戶支援頁面上，您可能會有「一般詢問」、「技術支援」和「帳單問題」等手捲選項。在每個項目中嵌入聯絡表單，讓使用者可以輕鬆提交特定問題。

自訂手動式樣式

嵌入內容後，您可以自訂手拉風琴的樣式，以配合您網站的主題。

1. 自訂標題和顏色:在樣式設定中，調整標題字型、顏色、背景和排版，以符合您的品牌。
2. 變更展開/折疊圖示:自訂展開和收納項目的圖示。若要外觀更整潔，請以箭頭或正負符號取代預設圖示。
3. 最佳化間距與動畫:在進階設定中，調整間距、邊界和動畫效果。設定平順的過場動畫，創造精巧的體驗。

範例:對於現代化的網站，您可能會選擇淺色、簡單的字型和細膩的圖示。如果您的品牌較為活潑，則可選擇大膽的顏色、較大的圖示和動態轉換。

總結

使用 Elementor 的 Accordion widget 與內嵌內容，例如圖表、藝廊、視訊、按鈕和表單，可讓您簡潔且吸引人地呈現資訊。每個手拉手項目都可成為互動內容的空間，讓訪客深入他們關心的部分，而不會因資訊過量而不知所措。

無論您要建立常見問題頁面、作品集、產品展示或資訊資源，Accordion widget 都能協助您有效率地呈現內容，同時保持設計的時尚與有條理。

創造出色手風琴部分的技巧:

• 保持簡單:避免手風琴項目過於擁擠。專注於關鍵點，保持整潔。
• 明智地使用視覺效果:圖表、圖片和視訊可增加參與度，但請確保它們能快速載入，以提供順暢的使用者體驗。
• 在行動裝置上進行測試:請確保手風琴在行動裝置上反應靈敏且易於使用，因為許多使用者可能會在較小的螢幕上檢視。

透過這些步驟，您就可以在 Elementor 中建立一個有組織、有視覺吸引力且互動的手拉手區段，提升使用者體驗，讓您的內容更容易瀏覽。