如何在WordPress中使用SlideDeck 2創建令人驚豔的產品導覽
現代的WordPress網站中,內容滑動器是常見的元素,通常用于展示首頁的最新帖子或圖片庫。但新趨勢是使用內容滑動器來講述引人入勝的故事,激勵訪客採取行動——這就是產品導覽。
使用內容滑動器進行產品導覽,可以幫助你更好地銷售產品,因為用戶可以按照自己的節奏瀏覽關鍵點。這比視頻更好,因為用戶可以跳過或返回特定點,而不必猜測時間碼。此外,這種方式利用了各種網絡媒體,允許你在滑動器中嵌入互動內容,而不是強迫用戶被動觀看視頻。
直到最近,創建複雜的內容滑動器產品導覽需要編碼知識,但有了SlideDeck 2這款強大的插件,這一切變得簡單。這款插件使創建令人驚豔的滑動器變得非常簡單,無需編寫一行代碼。
購買及安裝插件
首先,請注意:自訂內容滑動器是SlideDeck 2的高級功能,因此你需要購買才能在網站上使用它。我們建議你前往SlideDeck官網購買插件。它的性價比很高,你可以輕鬆升級以獲得更好的功能並在更多網站上使用。
要解鎖自訂內容功能,你需要購買專業版或開發者版,然後安裝插件及解鎖附加功能的插件。你可以參考我們的《WordPress插件安裝指南》進行安裝。
專業術語
在開始之前,有幾個術語需要解釋:
自訂內容SlideDecks – 自訂內容SlideDecks允許你逐個創建滑動器的每個幻燈片,更適合於視覺故事講述,或者你有特定的行動想讓用戶採取(如產品導覽)。如果你想使用外部內容來源(如Flickr或YouTube)創建滑動器,我們有專門為動態來源SlideDecks創建的指南。
幻燈片類型 – SlideDeck有四種類型的幻燈片,分別是:圖片、視頻、文本和HTML,每種類型適合不同的內容。
Lens – Lenses類似於滑動器的主題。它們控制滑動器的外觀和行為,以及內容在頁面上的呈現方式。與WordPress主題一樣,應用不同的Lens可以在幾秒鐘內產生顯著不同的外觀效果。
創建自訂內容SlideDeck
我們將展示如何使用SlideDeck的自訂內容功能,混合四種類型的內容,創建一個產品導覽滑動器。首先,點擊“管理”進入主面板。此屏幕讓你創建新的SlideDecks並排序現有的SlideDecks。
在自訂內容部分,點擊藍色的“創建SlideDeck”按鈕。你將進入自訂內容編輯器屏幕,開始建立你的第一個幻燈片。首先,為你的SlideDeck命名。你會注意到已創建了第一個幻燈片,你可以選擇三或四種類型的幻燈片,這取決於你使用的SlideDeck 2的套裝版本——專業版用戶可以選擇圖片、視頻和文本幻燈片;開發者版用戶還可以選擇HTML幻燈片。
從圖片幻燈片開始
讓我們從一個圖片幻燈片開始,給訪客一個快速且引人入勝的概覽。點擊“圖片幻燈片”類型。選單將刷新,顯示所有相關的選項:
- 上傳圖片 | 指定URL – 選擇將圖片上傳到WordPress媒體庫,或粘貼圖片的URL。
- 標題 | 正文 | 無 – 決定是否要在圖片上覆蓋文本標題,還是有一些簡短的正文文本。或者僅顯示整個圖片,無關聯文本。
- 幻燈片鏈接 – 如果用戶點擊幻燈片的任意位置,指定訪問的URL。
- 標題 – 為幻燈片取一個標題,顯示在標題或正文文本區域。
- 描述 – 輸入幻燈片的描述副本。你可以在此輸入富文本!
- 標題位置 – 決定文本覆蓋在幻燈片上的位置。標題可以在上/下,正文文本可以在左/右。
設置好幻燈片後,點擊“應用”按鈕,實時預覽區將刷新,顯示你的第一個幻燈片。在我們的例子中,我們通過指定URL建立了幻燈片,在底部有標題,沒有幻燈片鏈接。
創建視頻幻燈片
SlideDeck 2 支持來自三個來源的視頻內容——YouTube、Vimeo和Dailymotion。我們只需將產品介紹視頻上傳到這些服務之一,然後粘貼視頻頁面的URL並點擊“更新”。
與圖片幻燈片類型一樣,你可以選擇添加標題和簡短標題或段落文本,向訪客介紹他們在視頻中會看到的內容。默認情況下, SlideDeck 2 將拉取你在YouTube/Vimeo/Dailymotion頁面上的標題內容,但你可以根據產品導覽的需要進行調整。
如前所述,點擊“應用”,然後快速點擊滑動器,你現在可以在圖片和視頻幻燈片之間來回切換。
創建文本幻燈片
有時,你需要一些文本空間——例如顯示功能列表,或分享來自產品的熱情評論。在這種情況下,我們可以使用文本幻燈片類型。
這是一種類型的幻燈片,只需考慮幾個選項:
- 佈局 – 基本佈局將標題放在幻燈片頂部,文本在標題下面流動。多列佈局提供更多的報紙樣式,通過自動將文本排列成兩列。區塊引號允許你用大膽的字體突出顯示一段短文本。如前所述,點擊“應用”將幻燈片添加到你的SlideDeck中。
重新排序幻燈片
此時,你可能會想將視頻幻燈片放在前面,以便立即吸引和引導用戶互動。 SlideDeck讓你能這樣做——在幻燈片頭部區域,點擊並拖動視頻幻燈片,將其放到圖片幻燈片的左側閃亮區域。非常簡單!
進一步:使用HTML幻燈片類型
HTML 幻燈片類型是 SlideDeck 2 開發者版的強大附加功能,允許你在幻燈片中輸入自己的 HTML 代碼。它非常適合更複雜的內容佈局,或為內容滑動器增加更強大的交互。例如,你可以嵌入註冊表單,以便客戶在產品導覽結束時選擇接收電子郵件通訊。
選擇HTML幻燈片類型,顯示選單中的HTML編輯器。
在“插入HTML”字段中,粘貼你的自訂代碼。它會自動為不同標籤使用顏色標記,幫助你確保結構正確。需要注意的幾點:
- 你可以在標籤之間包括CSS樣式規則,並且這些規則將應用於SlideDeck中的所有幻燈片。
- 由於SlideDeck的實時預覽無法預測你主題的樣式會如何影響內容滑動器,因此對於複雜樣式,最好在發佈SlideDeck的頁面中查看更準確的預覽。
輸入代碼後,點擊“應用”,幻燈片將添加到旋轉模板中。
配置Lens
現在你已經創建了第一個自訂內容SlideDeck!花點時間在實時預覽中點擊滑動器並欣賞一下。
現在,是時候通過配置Lens,使其與你網站的樣式無縫契合。SlideDeck包含大量選項,可以通過定製Lens來控制新產品導覽的外觀。
保存和發佈你的SlideDeck
內容非常棒?檢查。選擇並定製了甜美的主題?檢查。看來你已經準備好發佈新的產品導覽,以將訪客轉化為客戶!
SlideDeck提供三種方式將滑動器嵌入到你的WordPress網站中——將其插入現有頁面或帖子的內容中,創建嵌入滑動器的新頁面或帖子,最後將其插入頁面模板中,這是將產品導覽添加到首頁的最佳選擇。
總結
雖然內容滑動器通常僅用於圖片庫或特色帖子,但SlideDeck 2讓你有了更多的靈活性,可以探索內容滑動器的潛力,創建引人入勝的體驗,保持訪客的參與和回訪。我們在WPressize Me強烈推薦你檢查它!我們在“免費WordPress博客設置”頁面上展示了自訂 SlideDeck 的實時示例。
你有使用SlideDeck的例子嗎?在評論中與我們分享一下吧!另請查看本系列的第一部分,我們在其中展示了如何創建動態來源SlideDecks。觸摸界面滑動器是網頁設計的未來。立即獲取SlideDeck。使用優惠碼:WPB-SD2享受20%的折扣。