[ad_1]
視差效果是一種非常流行的設計功能，通常在WordPress網站上使用。 這種特殊效果已經在遊戲世界中流行了很多年，但最近已經涉及到網頁設計中。 到目前為止，這種主要趨勢似乎並沒有發生，即使有什麼用途，也比以往任何時候都得到了更廣泛的使用。 那麼，什麼是視差效果？為什麼要考慮在WordPress網站上使用它呢？
在本文中，我們將考慮什麼是視差效果以及它可以為您的站點和企業帶來的好處。 然後，我們將討論如何使用主題或插件快速輕鬆地向任何WordPress網站，頁面或帖子添加視差效果。
什麼是視差效果？
視差效果涉及網頁背景的移動速度低於前景的移動速度。 這樣會產生頁面深度的錯覺，當觀眾向下滾動時，可以使內容具有3D效果。
現在，大多數高級WordPress主題在其主頁上均內置了視差效果。 甚至免費的WordPress默認主題二十一十七也具有視差功能。 大多數頁面構建器還集成了視差效果工具，使您可以將效果添加到任何頁面或發布到您的網站上。 當然，您可以安裝許多WordPress插件來向您的網站添加視差效果元素。
使用視差效果有什麼好處？
在WordPress網站上使用視差效果有很多好處。 第一個也是最明顯的是視差效果的視覺效果。 視差效果在美學上令人愉悅，使您的網站具有清新，時尚和現代的外觀。 這種哇的效果可以使您的內容真正流行，並創建令人興奮和有趣的瀏覽器體驗。
在您的網站上使用視差效果的另一個關鍵原因是有助於將頁面（尤其是首頁）分解為可讀的塊。 使用此效果可以強調要展示的內容的不同部分和類型。 這可以幫助宣傳您網站的各個方面，闡明重要信息，並鼓勵用戶以您選擇的方式瀏覽您的網站並訪問內容。
視差效果可以在網站的任何頁面或帖子上使用，但最常見於主頁，登錄頁面或一頁網站。 令人驚嘆的視覺視差產生的效果及其對用戶體驗的積極影響，可以使訪問者在您的網站上停留的時間更長，並有助於提高網站的轉化率目標。
使用視差時的注意事項
雖然有好處，但在向網站添加視差部分時，應牢記一些關鍵點。
選擇背景圖片
請仔細考慮您用於每個背景部分的圖像。 確保它們與您的網站相關，並與您的品牌同步。 如果要在此背景圖像的頂部顯示標題或其他內容，請考慮使用塊狀顏色或精細圖案，而不是照片或引人注目的圖形。 這可以幫助確保您的圖片可以與您的內容一起使用並對其進行宣傳，而不會分散您的注意力。
如果您選擇使用照片，則圖像必須是高質量的。 精美醒目的圖像可以幫助您的網站呈現專業而獨特的外觀。 這些視覺效果將給您的聽眾留下深刻的印象，從而促使人們記住並返回您的網站。 您可以從各種各樣的股票網站下載高質量的圖像。 看看我們的 免費的溢價圖片網站集合 您可以在其中快速找到適合您的視差背景的照片。
手機視差
雖然視差可以很好地增加視覺趣味，但它並不總是能在移動設備上正常工作。 由於手機和平板電腦通常使用滑動導航（而不是像台式機一樣滾動），因此視差效果可能無法正確呈現。 當然，這將取決於您自己的視差部分所使用的方法和動畫。 但是，出於可用性考慮，您可能需要考慮在設備上禁用視差。
視差和輔助功能
除了降低了移動設備的可用性外，視差還可能帶來一些可訪問性挑戰。 因為視差是基於運動的，所以它可能會增加閱讀難度，並且可能會出現瀏覽器或設備兼容性問題（如上所述，尤其是在移動設備上）。 此外，隨著圖層的移動，它可能會產生對比度問題，從而進一步增加可讀性。 由於這些原因，您應該格外小心在網站上創建視差區域。
選擇具有視差效果的主題
對於那些開始新項目的人，應該選擇包含視差效果功能的高級主題。 而且，如果您想在網站的各個頁面上而不只是首頁上使用視差效果，那麼您可能需要考慮高級頁面構建器隨附的多用途主題。
像這樣的主題 來自優雅主題的Divi， Themify的視差，還有我們自己的 總計多用途WordPress主題，都包括提供視差效果工具的頁面構建器。
添加總計的視差背景
為了讓您了解視差如何與主題配合使用，下面提供了有關如何向具有Total主題的行中添加視差背景的指南。 道達爾使用WPBakery建立前端頁面，但還有許多其他用途 WordPress頁面構建器 包括類似的選項。
首先，您需要插入一行並向其中添加內容。 然後單擊鉛筆圖標以編輯行。 由於我們上面創建的設計未裝箱並且不包含側邊欄，因此我們選擇了「拉伸行」選項，以確保視差背景完全填充了行（注意– Total還包括一個全屏選項，如果您需要希望您的行和視差背景完全填滿瀏覽器窗口）。
接下來，在「視差」部分下，您可以輕鬆地添加背景圖像並設置視差效果的滾動速度（數字越大，圖像移動得越多，這可能也需要大圖像）。
道達爾還提供了高級視差選項，具有更多設置，可用於在移動設備上啟用/禁用效果，選擇圖像樣式（覆蓋，固定或重複），定義效果的方向以及速度。
您還可以使用「覆蓋設置」選項卡，以確保行背景和內容之間有足夠的對比度（我們在圖像中添加了白色覆蓋）。 完成後，請確保保存行更改以及頁面。
使用Slider Revolution添加視差滑塊
如果您想要帶有視差效果的特色滑塊，我們的首選是 Slider Revolution插件。 這個高級插件包括數百種內置選項和功能，用於字體，圖層，滑塊效果，布局以及視差。
啟用滑塊旋轉視差
首先安裝插件，然後導入滑塊模板或從頭開始構建自己的滑塊（您可以閱讀我們的完整內容 滑塊革命指南 更多細節）。
接下來，編輯幻燈片「主要背景」以添加源背景圖像，然後選擇「視差/ 3D」選項卡以指定視差級別。 然後，在添加圖層時，為視差深度選擇「視差/ 3D圖層」選項，以向文本，圖像，按鈕和其他圖層添加移動。 就這麼簡單！
完成後，保存滑塊並使用簡碼將其插入到任何帖子或頁面中。 或者，如果您使用的是諸如 WPBakery（以前是Visual Composer） 您可以使用頁面構建器的Slider Revolution元素快速選擇並插入您的滑塊。
使用免費的高級WordPress背景插件添加視差部分
如果您已經有一個主題，並且它不包含內置的視差效果選項，那麼您應該考慮使用WordPress插件來完成這項工作。 高級WordPress背景 （簡稱AWB）是一種流行的免費選項，它使您可以將視差滾動背景圖像添加到網站頁面或帖子中的不同元素。 通過使用簡單的簡碼將滾動背景添加到單個元素，標題文本或包含任何內容的完整部分中。
現在讓我們看看如何安裝和開始使用具有視差功能的高級WordPress背景。
安裝AWB
要安裝插件，請以管理員身份登錄WordPress儀錶板，然後從菜單中選擇「插件」>「添加新項」。
搜索高級WordPress背景，然後選擇立即安裝>激活。
使用AWB，如何添加視差背景將取決於您使用的是WordPress編輯器– Gutenberg，Classic或WPBakery等第三方頁面構建器。 無論您使用哪種方式，AWB都能為您提供許多簡單的選擇：
- 彩色，圖像或視頻媒體背景
- 媒體顯示尺寸（封面，包含或圖案）
- 背景媒體位置，用百分比使背景對齊（例如：50％50％居中）
- 疊加顏色選擇器，使用Alpha選擇器使顏色或多或少透明
- 視差滾動，縮放和不透明度以及在移動設備上啟用的速度和選項
- 滑鼠視差（根據滑鼠的移動，背景會稍微移動）
此外，您還會發現AWB選項卡已添加到WordPress設置菜單。 您可以在此處選擇全局可見性設置，以禁用移動設備以及特定瀏覽器的視差效果（和視頻）。
古登堡航空
高級WordPress背景與Gutenberg完全兼容，甚至包括自己的自定義塊供您使用。
首先，您需要插入AWB塊。 然後單擊以在AWB中為您的內容添加其他塊。
完成後，單擊AWB塊，然後單擊右側菜單上的「塊」選項卡。 您可以在此處添加和編輯塊的背景選項。
AWB經典編輯器
在經典編輯器中，AWB使用簡碼添加視差背景。 因此，您需要首先創建內容，然後突出顯示要具有背景的部分，然後在編輯器中單擊AWB圖標。
選擇背景圖片，然後開始向下滾動以添加其餘選項。 例如，添加覆蓋顏色和視差類型。 完成後，單擊「插入」。
短代碼如下所示：
[nk_awb awb_type=”image” awb_image=”1234″ awb_image_size=”full” awb_image_background_size=”cover” awb_image_background_position=”50% 50%” awb_parallax=”scroll” awb_parallax_speed=”0.5″]這就是視差背景中內容的去向。[/nk_awb]
在這種情況下，經典編輯器的用戶友好性可能會降低一些。 由於AWB是簡碼，因此您無法從編輯器中查看背景設置。
帶有WPBakery的AWB
最後–高級WordPress背景還可以與WPBakery頁面構建器一起使用。 在這裡使用它很簡單，因為他們已經在行設置中添加了一個標籤。
只需單擊「背景（AWB）」選項卡，即可在任何行上創建和自定義自己的視差背景。
關於視差效果的最終思考
如果您的主題沒有內置的視差效果功能，或者您想將效果添加到不僅僅是首頁上，請嘗試使用插件。 Slider Revolution或免費的高級WordPress背景都很棒。 通過這兩種方法，您都可以快速創建視差部分以添加到頁面或帖子中。
如您所見，向您的網站添加視差效果可能非常值得。 它不僅可以極大地改善網站的視覺效果，還可以吸引觀眾，使他們輕鬆瀏覽您的網站並訪問內容，並增加他們在網站上花費的時間。 改善的用戶體驗最終將幫助您的網站實現其目標。 您是否打算增加回頭客，收集銷售線索或出售產品或服務。
您會在首頁，目標網頁，信息或其他地方添加視差效果嗎？ 請在下面的評論中分享您的想法。