滑塊革命：終極指南

Slider Revolution 是當今最流行的 WordPress 插件之一。 憑藉超過 400,000 的銷量和 4.75 的平均評分，該插件已證明其有效性和卓越性。

革命滑塊：是什麼讓插件如此出色

Slider Revolution 由 Themepunch 開發。 該插件是為網頁創建豐富的動態內容的構建器。 重點是“動態”，因為它允許您構建令人興奮的幻燈片，為頁面添加動感。

該插件提供了一個易於使用的構建器和大量選項。 精心設計的設置包讓用戶可以調整滑塊的每一個細節，並允許使用完全不同類型的內容。 可以為單獨的帖子、整個頁面及其小部分創建滑塊。 為了更準確地使用插件，您可以創建：

• 圖像滑塊和輪播
• 精選帖子滑塊
• 社交媒體供稿
• 媒體畫廊
• 英雄塊和首頁

您應該在您的網站上使用 Slider Revolution 的原因

Slider Revolution 絕對不會出錯。 具有用戶友好工具的綜合插件是創建漂亮滑塊的完美解決方案，原因如下。

捆綁插件

今天幾乎每個 WordPress 主題都帶有一個 Slider Revolution 插件。 通常，主題包包含插件的免費版本。 捆綁的插件僅限於非常基本的功能，但仍然非常方便地將主題與滑塊構建器一起獲取。

但是，如果您想訪問插件的許多功能，您可以選擇購買獨立插件。 常規許可證將花費您 29 美元，您可以在 Codecanyon 市場上獲得它。

對於擴展許可證，您將需要支付大約 150 美元，並且只需 9 美元即可獲得一年的技術支持。

是的，該插件可能會花費您一些錢，但即使使用該插件的常規許可證，您仍然可以創建出色的滑塊。

模板

這個驚人的插件不僅會給你留下深刻印象的工具和功能，而且它還有一系列漂亮的預製佈局。 精彩的預製模板集合和可在幻燈片上使用的免費媒體對像庫將簡化並加快幻燈片的創建速度。 您可以為您的任何項目選擇模板，而不是從頭開始構建滑塊，您可以節省時間並繼續使用預先構建的佈局。

只需導入您選擇的模板並立即開始創建。

除此之外，您還可以訪問包含不同對象的大型免費庫，例如字體圖標、背景圖像、透明 PNG 對象、SVG 等。 您可以使用它們並輕鬆地將它們插入幻燈片中。

可視化編輯器

Slider Revolution 提供了一個令人驚嘆的所見即所得編輯器，這使得創建和修改滑塊模板變得非常簡單。 許多網站所有者發現很難編寫複雜的代碼或聘請單獨的團隊來完成這項任務。 借助滑塊編輯器，您可以節省時間並享受拖放功能來構建出色的幻燈片。

滑塊插件可讓您使用您構建的滑塊更有創意，並在您的網站上輕鬆展示它們。 您將擁有大量自定義選項，例如構建自定義滑塊位置、選擇滑塊延遲、添加過渡、添加媒體層等等。 這可以使用下拉列表立即完成。 此外，該插件具有許多導航功能，可讓您更改導航樣式並添加箭頭、項目符號、選項卡和縮略圖。

高速性能

Slider Revolution 編碼良好，可以快速加載。 滑塊的所有方面都經過優化，它使用高級調試選項來解決任何問題，自動加載核心文件，並根據使用的功能進行擴展。 它還採用智能延遲加載並經過 SEO 優化。

響應式佈局

許多 Web 開發人員遇到的最大問題之一是滑塊缺乏響應能力。 結果，這些滑塊在小型設備上效果不佳或根本不顯示。 響應性是用戶體驗的重要組成部分。 由於來自移動設備的大量流量，您的滑塊在其他設備上表現不佳將是一種恥辱。

Slider Revolution 不僅僅是一個簡單的滑塊。 該插件已準備好響應，因此無論您創建什麼幻燈片，您都可以確定它們將針對將要使用的任何設備進行優化。

Slider Revolution 確保為每個滑塊設置響應斷點，使任何設計在不同的設備和小屏幕上看起來都很棒。 無論您選擇什麼選項 - 單個、輪播或標準滑塊，您都可以確保它在任何設備上看起來都是完美的。

自定義選項

Slider Revolution 插件的另一個優點是其多樣化的自定義選項。 您可以設置幻燈片延遲、選擇導航箭頭、視差背景、添加媒體層、插入按鈕、設置自定義字體、添加邊距等等。

Slider Revolution 插件允許您自定義任何內容。 為了節省時間，您可以保存預設以便稍後在幻燈片過渡、字體樣式和圖層動畫中使用它們。

滑塊革命插件

想要通過過渡效果、動畫讓您的滑塊更加複雜多樣嗎？

你已準備好出發！ Slider 支持不同的內容類型，如博客帖子和當前帖子，它允許您使用來自 Twitter、Facebook、Vimeo、YouTube 和 Instagram 等社交平台的提要。 您可以立即添加鏈接、視頻、圖像和文本。 借助變體功能，您可以構建功能豐富且信息豐富的幻燈片，供訪問者使用。

安全

當涉及到網站時，安全性是最重要的方面之一。 您可能聽說幾年前受 Slider Revolution 影響的戰爭漏洞。 從那時起，Themepunch 增加了對軟件的保護，現在正在使用第三方組織定期審核插件問題。 因此，您可以確定該插件是高度安全的。

技術支援

該插件附帶詳細的文檔和大型常見問題解答部分，其中包含有關該插件的最熱門問題。 這就是為什麼即使您沒有使用它的經驗，也很容易開始使用滑塊革命。 詳細教程的可用性使為每個人創建網站幻燈片變得簡單。

內容來源

插件成功地為各種內容源創建滑塊。 無論是 WooCommerce 產品還是普通帖子，Slider Revolution 都有工具。

強大的功能使這個插件成為每個人的第一選擇。 它的主要優點是它提供了多合一解決方案的類別。 您不需要任何額外的插件，一切都在插件中。

我們還應該提到它是負擔得起的。 常規許可證將花費您 26 美元。 考慮到您以價格獲得的功能數量，Slider Revolution 是業內最實惠的滑塊插件。

在本終極指南中，我們將涵蓋從安裝插件到添加新幻燈片並將其放置在網站上的所有內容。

安裝插件和主要設置

許多主題開發人員將 Slider Revolution 包含在主題包中。

如果您從 StylemixThemes 購買了高級 WordPress 主題之一，則無需手動安裝插件。 Slider Revolution 將與演示導入一起自動安裝。

如果您使用的主題包不包含插件，則需要手動下載並安裝。 要獲得 Slider Revolution 的副本，請點擊此鏈接。

您將需要購買該插件。 登錄您的 Envato 帳戶並進行購買。 之後下載文件——選擇“僅可安裝的 WordPress 文件”的下載選項。

現在您需要向您的站點添加一個新插件。 轉到您的儀表板 -插件 > 添加新的。 安裝完成後，激活插件。

恭喜，你已經準備好了，你可以開始創建你的第一個滑塊了！

如何更新滑塊革命

Themepunch 發布滑塊插件的定期更新。 要對其進行更新，請從您的儀表板打開 Slider Revolution 並按照更新選項卡進行操作。 在此頁面上，您可以找到標題為“插件更新”的小部分。 此處指定了您網站上當前安裝的插件版本以及可供更新的版本。

此外，您可以使用標準方式並轉到儀表板 > 更新並從那里安裝新版本的插件。

滑塊革命：入門

如果您是第一次使用滑塊，則其中使用的所有術語可能不夠清楚。 您可能會混淆三個主要元素。 它們是模塊、幻燈片和圖層。 他們每個人都可以是另一個人的一部分，也可以單獨工作。

例如，您可以創建一個設計為滑塊的模塊，它將包含幻燈片。 除此之外，您可以製作導航菜單或標題等模塊，它們根本不是滑塊，但它們仍將包含幻燈片。 原因是 Slider Revolution 最初是作為滑塊構建器創建的，但是，現在它也被用作完整的網站編輯器。 因此，在它的幫助下，您可以構建的不僅僅是簡單的幻燈片。

模塊、幻燈片和圖層之間的關係

模塊是幻燈片的容器，幻燈片是圖層的容器。

存在包含幻燈片的模塊。 每個模塊必須至少有一張幻燈片。 當您創建一個空白模塊時，會自動添加一張空白幻燈片。 您可以創建其他幻燈片，或將所有內容添加到一張幻燈片中。 這完全取決於您正在創建的內容類型。

幻燈片是圖層的容器。 每張幻燈片必須至少有一層。 創建新幻燈片時，會自動添加背景層。 該層始終存在，可以重命名並使其不可見，但不能刪除。 這個背景區域可以用圖層填充。

圖層包含視覺、音頻或佈局項目，並添加到幻燈片中。 文本、按鈕、圖像、音頻、視頻、組和行都是圖層類型。 每一層代表一個單一的媒體。 圖層可以以最能實現您的想法的方式進行動畫處理。

如何使用滑塊革命：全局設置

正如我們已經提到的，Slider Revolution 有很多選擇，這並不誇張。 這就是為什麼在開始構建滑塊之前，我們建議您先查看全局設置並了解使用插件的主要原則。

如果您從儀表板單擊 Slider Revolution，您將能夠打開插件的設置屏幕。

設置屏幕

在屏幕頂部，您可以找到包含以下選項的選項卡：

模塊、更新、激活、新聞、全局、常見問題、支持。

在這個階段，我們將只使用其中兩個：模塊——創建一個新模塊，以及全局——查看全局插件設置。

全局設置

我們將從Globals開始。 全局設置主要分為以下幾個部分：

• 一般的
• 默認佈局網格斷點
• 字體
• 各種各樣的

這些設置負責在構建新滑塊、自定義字體加載、數據庫創建等時應用的默認響應式網格選項。

您只需要關注幾個選項。 首先，是響應能力，以確保您未來的滑塊在任何設備上看起來都不錯。 這是有關設備及其尺寸的快速指南。

在默認佈局網格斷點部分，您可以為不同類型的設備設置寬度（以像素為單位）：台式機、筆記本電腦、平板電腦和移動設備。

只要每個設備都有自己的尺寸，請輸入每種類型的確切寬度，以確保正確顯示滑塊。

• 標準桌面顯示器的寬度為 1920 像素。
• 筆記本設備（包括所有筆記本電腦、MacBook 和水平方向的平板電腦）的寬度約為 1600 像素。
• 垂直方向的平板電腦的寬度不超過 778 像素（基於 iPad）。
• 和移動設備。 這是一個重要的部分，因為如今超過一半的互聯網流量是通過移動設備產生的，如果用戶無法正確看到您網站上的滑塊，這將不會令人滿意。 但是，這可能會令人困惑，原因是現代智能手機的尺寸完全不同。 我們建議您使用數字，不要超過 500 像素。

您可能想要控制的第二件事是訪問滑塊。 權限選項允許您拒絕除管理員和編輯者之外的其他用戶訪問插件。

現在您可以開始構建滑塊了！ 您可以使用三個選項。 您可以從頭開始構建新滑塊，可以從 Slider Revolution 模板導出文件或導入主題中包含的示例滑塊。

在我們的文章中，我們將回顧第一個選項並從頭開始構建一個新的滑塊。 這將讓我們探索更多插件的可能性。

創建一個新滑塊

現在，當我們完成一些主要設置後，我們可以繼續創建新幻燈片。 打開 Slider Revolution 設置並單擊New Blank Module。

您將被要求瀏覽快速指南。 如果您想參加簡短的課程，請單擊入門指南。 或退出指南以跳過此步驟。

您的屏幕將分為幾個區域：從您的左側有一個顯示所有內容的框架，從右側 - 這是一個包含部分和設置的工作空間。

常規選項

讓我們從常規選項開始。 單擊齒輪圖標以打開設置。 首先，我們需要命名我們的模塊。 在“標題”部分中，輸入名稱並將其複制為小寫的別名，並在單詞之間使用破折號而不是空格。

需要別名才能將滑塊添加到頁面。 您還可以通過複製提供的短代碼並將其放置在要顯示滑塊的頁面或帖子上來使用它。

之後，我們可以自定義類型和桌面層區域的高度和寬度。 這些設置位於佈局選項卡下。

對於該類型，您有三個選項可供選擇：

• 滑塊 — 幾張動畫幻燈片，可旋轉以一張一張地顯示。
• 場景——可用作內容模塊的單張幻燈片。
• 輪播——多張幻燈片同時可見。

我們需要指定的下一個設置是尺寸。 還有三個選項可用：

自動- 這是默認參數，可將滑塊拉伸到 WordPress 主題定義的主容器寬度。

全角——全角滑塊選項從左到右延伸（您仍然需要定義高度）

全屏 -用於填充整個屏幕的大型滑塊，無論您的瀏覽器或設備的大小如何。

使用 Slider Revolution 插件，您可以為網站頁面的每個部分設置動畫。 請注意，這樣做會增加您頁面的權重，因此加載頁面需要更多時間。 因此，它可能會對 SEO 排名產生負面影響。

調整大小設置

經典或線性調整大小可確保在配置主屏幕尺寸設置後您的滑塊將相應地壓縮（例如，1000x400 像素的滑塊將壓縮為帶有字體、圖像和其他滑塊元素的 500x200 像素的滑塊）。

智能繼承可根據您選擇的桌面設置自動創建設備尺寸，並提供調整選項。

自定義或手動設置可讓您使用精確的像素設置滑塊大小，並能夠在不同的屏幕寬度（台式機、筆記本電腦、平板電腦和手機）下設置滑塊大小。

幻燈片的響應性

繼續。 我們還沒有完成響應能力。 有一個圖層區域大小，您可以在其中指定瀏覽器寬度。

通常，這些選項默認設置為 Auto Sizes，並且僅指定桌面參數。 您可以通過打開其他選項對它們執行相同的操作。

此外，如果您打開特定設備，您的工作區域（幻燈片容器）將根據所選設備的參數進行調整，這意味著您可以控制具體設備的滑塊顯示。

對於每個設備，將從全局設置中指定網格大小。 網格是滑塊層所在的區域。 沒有您應該輸入的嚴格數字。 在您嘗試探索幾個選項後，您將找出最適合您的方法。  

這只是一個開始，一些通用選項將簡化您使用滑塊的進一步工作。 完成此部分後，您可以切換到下一步。

仔細查看選項

除了“常規”選項之外，還有其他三個選項卡您將與之交互很多。 我們希望指導您完成將要使用的主要設置。 基本上，幻燈片的創建考慮了該過程中涉及的幾個組件。 這些是常規選項、導航設置、幻燈片選項和圖層。

當我們說 Slider Revolution 有很多選擇時，我們並不是在開玩笑。 要涵蓋的元素太多，讓我們稍微描述一下，然後更詳細地回顧最重要的元素。

1. 一般選項

我們已經觸及了常規選項中的一些元素，例如標題和佈局。 但是，除了這些之外，您還需要調整其他一些事情。

總而言之，常規選項允許您設置以下內容：

標題— 提供滑塊的名稱。
佈局— 選擇滑塊類型（滑塊、場景或輪播）和調整大小（自動、全角或全屏）。 這有助於編輯圖層區域的寬度和高度、模塊的位置、默認背景顏色或圖像等。
內容— 標識將內容添加到滑塊的方式。 您可以從 9 個內容源中進行選擇。

• 默認值——我們建議專注於一個重要參數——幻燈片持續時間（每張幻燈片將持續多長時間）。
• 常規 — 此部分包括自動旋轉、懸停時停止、循環幻燈片和選擇指定的第一張幻燈片的幻燈片設置。 在這裡，您還可以在移動設備上或在指定的像素寬度下隱藏或禁用滑塊。
• On Scroll——這個允許用戶選擇滾動效果，如視差、3D 深度、時間線、淡入淡出、模糊、灰度等。 所有效果都帶有可自定義的設置。
• Spinner — 或預加載器，該插件有 15 個微調器選項可供選擇。
• 高級選項允許您啟用延遲加載、選擇後備圖像或簡化舊瀏覽器上的滑塊。
• CSS/jQuery — 在這裡您可以將您自己的自定義代碼添加到滑塊。 請注意，這個更適合專業人士或熟悉編程和編碼概念的用戶使用。
• 作為模態 - 如果您想創建一個顯示為彈出窗口或燈箱的滑塊，則需要此特定選項，它為您提供滑塊位置、封面顏色和在頁面中插入模態滑塊時使用的簡碼選項。
• 皮膚 - 皮膚呈現您可以創建並分配給文本圖層的預設（指定突出顯示、標題、內容文本的顏色）。

插件——在這裡你會找到插件（注意——插件只有在你購買了自己的滑塊許可證時才可用）。

2.導航選項

如果您計劃包含多張幻燈片，導航選項將幫助您向滑塊添加導航工具，例如項目符號、箭頭和按鈕。

所有選項都包括易於自定義的位置/對齊、尺寸、可見性和全局樣式/預設設置。

導航元素包括：

• 進度 — 可視化當前幻燈片進度的進度條或圓圈。
• 箭頭 — 讓訪問者可以輕鬆點擊您的幻燈片。
• 項目符號 - 14 種樣式的導航點添加到您的幻燈片。
• 選項卡 — 對於需要選項卡導航的內容滑塊非常有用。
• 拇指 - 需要顯示縮略圖作為導航選項。 有 5 個選項可用。
• Prev Size — 指定預覽圖像的大小。
• 觸摸 — 包括塊滾動、速度和方向的選項。
• 鍵盤 - 您可以啟用鍵盤導航（推薦用於輔助功能）。
• 鼠標 — 啟用鼠標控制，例如輪播功能或反向滾動。
• 導航編輯器 - 此部分用於使用您自己的自定義代碼自定義箭頭、項目符號、選項卡或拇指。

3.幻燈片選項

設置的下一部分與幻燈片選項有關。

• 背景：選擇幻燈片的背景。 從透明、彩色（您可以添加漸變）、圖像、外部圖像或視頻（YouTube、視頻或 HTML5）中進行選擇。
• 縮略圖：定義管理員可見的縮略圖和用於導航的縮略圖。
• 動畫：選擇幻燈片的過渡動畫。
• 過濾器 — 22 種不同的過濾器可添加到您的幻燈片中。
• 進度 - 允許自定義幻燈片的長度、暫停和幻燈片的可見性。
• 發布規則 — 控制您的幻燈片是發布還是未發布。
• 標籤和鏈接 — 有助於為幻燈片添加自定義類、ID 和 HTML 數據以及鏈接。
• 參數 — 添加最多 10 個自定義參數以在幻燈片和導航中使用。
• 循環層 - 如果您的滑塊只有一張幻燈片，則管理循環設置。
• On Scroll — 自定義每張幻燈片的視差和滾動效果。

添加新幻燈片

完成設置滑塊並調整所有選項後，是時候向項目添加新幻燈片了。 您可以看到框架，添加時會顯示幻燈片內容。 現在它是透明的。 您可以更改背景選項並添加圖像或設置顏色。

您可以從計算機上傳圖像，或使用外部來源（通過添加鏈接）。 此外，您可以將顏色設置為背景而不是圖像。 它可以很容易地完成。

只需從 Source 面板的 Type 下拉菜單中選擇 Colored 選項，然後單擊 BG Color 按鈕來選擇您的顏色。 如果您想使用視頻，只需添加源。

向幻燈片添加新圖層

在屏幕頂部，您會找到+Add Layer選項。 使用它為幻燈片添加一個新圖層。 有8 種不同的選項。

但是，如果您需要向滑塊添加一些導航工具，最流行的選項是帶有按鈕支持的圖像和文本。

圖層選項：如何使用

Slider Revolution 的靈活性基於多個選項的可用性以及單獨設置每個細節以及調整整個滑塊項目的能力。 圖層也不例外。 每次向幻燈片添加新圖層時，您都可以控制它的每個選項。 在向幻燈片添加新圖像的示例中，我們將查看圖層選項允許您更改的所有參數。

當您想在幻燈片中添加圖像層時，只需單擊“添加層”下拉列表中的“圖像”。 然後上傳所需的圖像。

在框架旁邊，您會發現各種圖層選項（內容、樣式、大小和位置等）。

圖層內容顯示有關圖層的一些基本信息。 您可以設置延遲加載並更改其源類型。

使用圖層樣式選項，您將能夠添加顏色背景。

下一個選項是Spacing 。 間距幫助我們從上到下、從左到右、從下到上、從左到右移動圖層。 它們標有字母“M”。

位置和大小。 設置對齊以及圖像層的位置和大小。 垂直和水平對齊都可以輕鬆更改，只需單擊其中一個對齊圖標。

之後，您可以使用“對齊位置”選項的“垂直偏移”設置位置。 使用 X 和 Y 參數在幻燈片上移動圖層。

圖層高級選項

高級樣式選項允許您水平、垂直和居中旋轉圖層，並讓您為圖層添加陰影。

圖層動畫選項

動畫是滑塊革命中的主要選項。 該插件的主要思想是向您的網站添加動畫元素，而不是靜態的標準視覺效果。

動畫選項為您的幻燈片添加動作，使用此操作您可以為幻燈片設置動畫並設置出現和退出動畫。

出現和退出選項有兩行：IN 和 OUT。

每行都提供了一個下拉菜單，其中包含不同類型的動畫。 默認情況下，為所有圖層設置淡入選項。 嘗試一些動畫，看看它在幻燈片上的樣子，然後選擇最好的。

下面的部分用於動畫持續時間、動畫緩動和定義動畫開始。 持續時間定義動畫完成所需的時間，開始選項定義加載幻燈片後動畫將開始的持續時間。 緩動定義了動畫進行的速度。

動畫時間線

如果您在幻燈片中添加了多個圖層，您可能不希望它們全部同時出現。 滑塊革命動畫時間線可以幫助您處理這個問題。 它位於我們工作框架的正下方。

每個圖層的默認幀開始設置為 0 毫秒，這意味著圖層將在加載 0 毫秒後出現在屏幕上。 出現持續時間通常設置為 3 秒，這意味著圖層在 3 秒內變得完全可見。 要更改選項，請選擇圖層並通過指定不同的值對其進行編輯。  

確保為不同的圖層設置不同的值，這樣它們就不會立即出現並且看起來很亂。

現在，讓我們仔細看看 Timeline 的選項

1.列表視圖

這些圖標可用於隱藏或顯示圖層以及基於垂直對齊方式隱藏或顯示行。 只有網站管理員可以訪問這些選項。

2. 時間線時長
時間線總持續時間在模塊常規選項 > 默認值中定義。 此外，它可以在幻燈片選項 > 進度中單獨設置。

通過左右拖動時間軸中的塊，您可以輕鬆調整幻燈片長度。 您可以做的另一個選擇是單擊時鐘圖標並以百分比對其進行編輯。

3. 預覽時間線

為了預覽時間線，您需要單擊播放圖標或簡單地拖動空閒塊。

4.重命名圖層

要重命名圖層，請雙擊時間軸中圖層的文本並重命名。 此外，您可以在編輯器的頂部中心編輯圖層的標題。

5. 圖層 z-index / 堆疊順序

要設置 z-index/堆疊順序，您只需在時間軸中拖動圖層。

6. 動畫

對於每一層，都有一個進出動畫和附加的關鍵幀動畫。 所有動畫都呈現在時間軸中。

拖動動畫塊以調整時間軸中動畫的起點。 並通過拖動塊的端點來編輯動畫的持續時間

層循環選項

循環選項卡可讓您創建循環動畫。 您可以選擇動畫類型，定義循環速度和緩動，並設置循環的開始和結束時間。

您可以選擇 8 種類型：自定義、鐘擺循環、效果循環、波浪、擺動、旋轉、滑動和懸停以及脈衝。 每個循環動畫都有自己的一組選項。

Pendulum使您的圖層左右擺動。 您可以設置的選項包括結束和開始度數 - 這標識動畫將發生的度數，以及 X 和 Y 原點 - 此參數確定圖層將從其旋轉的軸點，您可以在百分比。

效果循環允許您從多個選項中進行選擇——灰度、閃爍、扁平化和 Lithing。 所有效果看起來都不同，因此我們建議您查看每個選項以選擇最適合您的選項。

Wave動畫使您的圖層以類似於波浪的運動旋轉。 它圍繞層外的軸旋轉。 您可以設置 Rotation X 和 Y Point 來確定圖層將圍繞其旋轉的軸的位置，設置 Start Angle 來標識動畫的起始位置，以及設置 Radius 來確定旋轉的軌道。

擺動循環將使您的圖層左右擺動——從上到下，從左到右，反之亦然。 使用下拉菜單選擇您喜歡的選項。

旋轉循環使您的圖層圍繞設置的軸點旋轉。 如果您從 Rotating 下拉列表中選擇第一個項目 - Rotate 項目，該圖層將旋轉並形成一個完整的圓圈。

要使您的圖層從左到右、從右到左、從上到下、對角線移動，您可以使用滑動和懸停動畫。 您可以設置動畫的開始和結束位置。

脈衝動畫使您的圖層不斷放大和縮小。 指定縮放開始和縮放結束。 這裡開始和結束的默認值都是 1。 這意味著該層將保持其大小的 100%。 換句話說，它不會動畫。 如果您為 Zoom Start 輸入 0.5，您的圖層將從其大小的 50% 開始並放大到其大小的 100%，然後再回到 50%，依此類推。

圖層懸停選項

懸停效果是良好 UX 的主要內容。 懸停效果通常表明需要或執行該操作，特別是因為此方法與滑塊一起使用時更是如此。 使用 Slider Revolution，您可以在懸停時更改圖層、文本和圖像。

在滑塊革命中添加懸停效果

首先，您需要打開圖層懸停。 選擇要添加效果的圖層，然後單擊“圖層選項”下的“懸停”。 單擊已啟用以將其打開。

在neath，您將找到設置懸停時圖層行為所需的所有選項。 如果您保持原樣，圖層將不會顯示任何更改。

懸停設置

您可以在此處設置的第一件事是光標。 在下拉菜單中，您可以找到光標的不同選項。 Auto 和 Default 執行相同的功能，不會反映出任何差異。 十字準線和指針定義了屏幕上鼠標光標的形狀。

這裡還有更多的光標樣式。 其中一些非常不尋常，但是，它們中的大多數表示層在觸發時的操作。 例如，如果您將圖層鏈接到支持中心，您可以選擇幫助光標。

指針事件默認設置為自動。 沒有鏈接內容時使用無選項。 此部分允許您選擇圖層懸停時的光標外觀、啟用動畫並進行設置。

懸停動畫

接下來，有一個懸停動畫，您可以根據自己的喜好進行設置。 您應該注意幾件事。 首先，當圖層在懸停時發生變化並且過渡發生在某個時刻時，它看起來並不好。 當過渡發生延遲時總是更好。 . 默認情況下，延遲設置為 300 毫秒，如果適合您，請保持不變，或更改值。

此外，您可以設置過渡的緩動。 您有多種選擇。

篩選

您可以向您的圖層添加過濾器。 換句話說，你可以在一定程度上模糊七弦琴。 該選項以像素表示。 值越高，模糊越“厚”。

風格

還有一個 Style 部分，您可以設置背景顏色和調整邊框，即更改它們的顏色並選擇邊框樣式。

滾動圖層選項

On Scroll 選項使幻燈片可以在鼠標滾動時移動。 There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

如何使用滑塊旋轉創建視差效果

視差是最流行的效果之一，它使網站更加令人印象深刻和充滿活力。 您可能已經看到許多網站和主題與該特定效果相結合。 現在我們將展示如何使用 Slider Revolution 插件自己構建一個。

什麼是視差？

視差效果可以定義為背景中的元素和前景中的元素以不同的速度移動並產生深度錯覺的效果。 通常，背景元素移動較慢

有不同的方法可以在您的網站上實現這種效果。 幸運的是，Slider Revolution 具有幫助您實現視差效果的所有功能。

在滑塊革命中創建視差

首先打開視差。 轉到Module General Options > On Scroll > Scroll Based Features > Parallax ，然後將 Parallax Enabled 開關轉到On 。

該插件提供了許多不同的深度值。 選擇最適合您的那個。 您也可以輸入自己的值。

將視差添加到背景圖像

要將視差效果添加到背景圖像，請轉到“幻燈片選項”>“滾動時”>“視差和 3D 設置” ，然後從下拉列表中選擇首選深度。

選擇深度時有嚴格的規定。 如果您嘗試不同的值並查看哪個更適合您的滑塊，那就更好了。 不同的深度直接影響並產生不同的效果。 這就是為什麼我們建議您嘗試它們以查看結果。

向圖層添加視差

在 Slider Revolution 中，視差效果不僅可以添加到背景圖像中，還可以添加到各個圖層中。 這種效果的好處在於，如果他們僅通過移動鼠標來控制頁面上滑塊的各個部分，它會給用戶一種錯覺。 這在網站上看起來非常不錯，而且設置起來非常容易。

選擇您的圖層，轉到圖層選項 > 滾動 > 視差和 3D 選項卡，然後選擇所需的深度級別。

結果，您將獲得在鼠標移動時激活的具有視差的圖層。

無論是背景圖片還是單個圖層，添加 Slider Revolution 視差效果都非常容易。 雖然，並非每個滑塊都需要視差。 主要將它用於簡單的滑塊，因為如果沒有這種效果，具有大量動畫的動態滑塊可能會做得更好。

添加按鈕層

使用 Slider Revolution，您可以創建和設計按鈕以添加到滑塊以進行導航。 為此，首先，我們需要在滑塊工作框架中添加一個按鈕層。

添加按鈕時，它將以文本形式顯示，您只需對其進行自定義。 在屏幕右側，您可以找到許多預設計按鈕的選項。 您可以為按鈕選擇其中之一。

此外，您可以使用原創的東西，因為播放按鈕、切換器等有多種變化。 此外，可以添加陰影效果並使按鈕看起來更有趣。

選擇樣式後，您可以更改高級設置並自定義其外觀。 所有設置都可以在“圖層選項”選項卡下找到。

您可以更改按鈕的初始外觀、更改文本、更改懸停時的顯示以及設置動畫。

如何使滑塊響應

一開始，我們已經設置了一些參數來使我們的幻燈片響應。 這還不夠。 為此，您還需要確保每張幻燈片中的每一層都能無縫適應所有設備和屏幕尺寸。

因此，將所有幻燈片和圖層添加到滑塊後，就可以針對所有其他可用設備進行微調了。

在工作框架中編輯幻燈片時，您主要是將它們設置為在桌面設備上看起來不錯。 當您確定桌面上的一切看起來都很完美時，您可以開始嘗試其他設備的佈局。

現在您可以從下拉列表中選擇要模擬的設備。 打開要檢查滑塊顯示的設備。 可用設備包括：台式機、筆記本電腦、平板電腦、移動設備。

您可以修改每台設備的所有內容。 例如，對於文本圖層，您可以設置不同的字體大小、行高、字體粗細和顏色，這一切都取決於查看滑塊的設備。 對於圖像層，為了改變它的大小，你需要添加一個不同的寬度，圖像的高度會根據寬度自動調整。

注意藍色網格邊框。 這些定義了您當前正在使用的設備的邊緣。 因此，如果您的任何圖層超出邊界，請確保更改這些圖層的設置。

最後，保存您的滑塊，並查看它的實時外觀。

將滑塊添加到頁面

你做得很好，現在是時候看看你的滑塊在頁面上的樣子了。 為此，請使用您之前創建的 Slider Revolution 短代碼。 此簡碼可在“常規選項”部分的“標題”選項卡下找到。

或者，如果您從儀表板打開 Slider Revolution。 找到當前模塊並選擇選項嵌入。

在彈出窗口中選擇頁面和帖子選項並複制簡碼。

短代碼應類似於[rev_slider alias=”title”][/rev_slider] ，其中“title”基於您為滑塊提供的別名。

使用 Elementor 顯示滑塊

使用簡碼方法在頁面上顯示滑塊非常簡單。 但是，有一種方法可能更容易。 您使用 Slider Revolution 插件構建的所有滑塊都可以使用 Elementor 小部件插入到頁面上。 選擇要在其上顯示滑塊的頁面並通過 Elementor 編輯器打開它。 然後只需將元素拖放到工作框架上。 在小部件面板上，搜索 Slider Revolution 6 小部件並添加到頁面。 拖動小部件時，您需要選擇要使用的滑塊。

使用這種方式作為短代碼的替代方法，因為一些網站所有者發現使用頁面構建器小部件更容易。

如何導出滑塊

要導出滑塊，請單擊儀表板菜單中的相關選項卡，轉到 Slider Revolution。 您導入或創建的所有滑塊都將顯示在那裡。

將鼠標懸停在要導出的模塊的縮略圖上。 單擊右下角的小箭頭。 在所有出現的選項中選擇導出並單擊它。

您將看到確認對話框，通知您導出可能需要一些時間。 單擊“是，導出滑塊”，下載將開始。 下載完成後，您將擁有滑塊的 .ZIP 文件。

總結

StylemixThemes 開發的幾乎所有主題都在包中包含 Slider Revolution 插件。 我們喜歡這款功能強大的軟件，它讓我們有機會使網站更具吸引力、吸引力和互動性。

我們希望我們的指南有助於更好地理解使用這個驚人的插件構建滑塊的過程。 如果您正在尋找更多信息，請關注 Slider Revolution 的主頁。