如何為任何WordPress主題添加視差效果


最近,一位讀者問我們如何為任何WordPress主題添加視差效果? 視差效果是一種網頁設計趨勢,其中背景圖像滾動速度比前景內容慢。 在本文中,我們將向您展示如何輕鬆地向任何WordPress主題添加視差效果。

為任何WordPress主題添加視差效果

什麼是視差效果?

視差效果是一種現代的Web設計技術,其中背景元素的滾動速度比前景內容慢。 這種效果增加了背景圖像的深度,並使其具有交互性。

視差效果可用於企業網站的登錄頁面,長篇內容,銷售頁面或主頁上。 這是在冗長的頁面上突出顯示不同部分的一種好方法。

許多高級WordPress主題在其首頁上都帶有內置視差效果。 您也可以在大多數WordPress頁面構建器插件中使用視差效果。

但是,並非所有主題都具有內置的視差效果,並且您可能不希望使用頁面構建器來僅為視差效果創建自定義頁面佈局。

讓我們看一下如何輕鬆地向任何WordPress主題添加視差背景效果。

方法1:使用插件將視差效果添加到任何WordPress主題

此方法不需要您向WordPress主題添加任何代碼。 它更容易,建議大多數用戶使用。

您需要做的第一件事是安裝並激活高級WordPress背景插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要編輯頁面或發布要添加視差效果的位置。 您會在視覺編輯器中註意到新的“高級WordPress背景”按鈕。

WordPress高級背景按鈕

單擊它會彈出一個彈出窗口,您可以在其中更改要添加的背景的不同設置。

首先,您需要選擇一張圖片作為背景類型,然後選中“拉伸”選項。

視差背景設置

接下來,您需要單擊“選擇圖像”按鈕以上傳或選擇要使用的圖像。 確保您使用的是大圖像,否則它將顯得像素化。

之後,您需要通過選擇視差類型來啟用視差。 您可以嘗試使用多種樣式。 最常用的視差效果是滾動。

單擊插入按鈕以繼續。

現在,該插件將在您的WordPress帖子編輯器中添加一個簡碼。 它看起來像這樣:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]

您的內容在這裡

[/nk_awb]

更換 “您的內容在這裡” 使用您自己的內容,然後保存您的頁面。

現在,您可以訪問您的網站以查看其運行情況。

視差效果預覽

方法2:使用CSS將視差效果添加到任何WordPress主題

此方法要求您對HTML / CSS以及WordPress主題的工作原理有一定的了解。

首先,您需要訪問以下位置,將要用於視差效果的圖像上傳到WordPress媒體庫 媒體»添加新 頁。

上傳圖像後,您需要通過在WordPress媒體庫中編輯圖像來複製圖像URL。

複製圖片網址

接下來,您需要將以下HTML添加到要顯示視差效果的頁面或頁面中。 您也可以將此HTML添加到WordPress主題或子主題中。

Your content goes here...

接下來,您需要將以下自定義CSS添加到WordPress主題中。

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}

.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

不要忘記用自己的背景圖片替換背景圖片網址。

現在,您可以保存所做的更改並訪問您的網站以查看實際操作。

CSS添加了視差效果

注意:您可能需要調整CSS才能與您的網站佈局配合使用。

我們希望本文能幫助您學習如何輕鬆地將視差效果添加到任何WordPress主題。 您可能還希望查看我們的大型列表,其中包括最想要的WordPress技巧,竅門和技巧。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。