什麼是視差效果?
視差效果是現代網頁設計技術,其中背景滾動速度比前景內容慢。這種效果可以增加背景圖像的深度,使其更具互動性。視差效果可以用於登陸頁面、長篇內容、銷售頁面或者商業網站的首頁。
方法一:使用插件為 WordPress 主題添加視差效果
這種方法不需要向您的 WordPress 主題添加任何代碼,適合大多數用戶。首先,您需要安裝並激活Advanced WordPress Backgrounds 插件。
激活後,從 WordPress 儀表板訪問設置 » AWB
頁面。在這裡,您可以檢查不希望顯示視差效果的瀏覽器或設備的選項框。之後,打開編輯任何您喜歡的頁面或文章,在古騰堡塊編輯器中添加一個Background (AWB)
塊,並根據需要設置背景圖像、顏色或視頻。
方法二:使用 CSS 為 WordPress 主題添加視差效果
如果您希望在整個網站中使用同一圖像作為視差背景,這種方法適合您。首先,您需要將圖像上傳到您的 WordPress 媒體庫,然後複製其 URL。接著,使用 WPCode 插件添加自定義 CSS 代碼:
.parallax { background-image: url("http://example.com/your-image.jpg"); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .parallax-content { width: 50%; margin: 0 auto; color: #FFF; padding-top: 50px; }
然後在您需要添加視差效果的頁面或文章中,插入以下 HTML 代碼:
您的內容在這裡...
附加:在 WordPress 中添加 YouTube 視頻作為全屏背景
除了視差效果,您還可以在 WordPress 中添加 YouTube 視頻作為全屏背景,提供更身臨其境的體驗並提高視覺吸引力。這適用於各種情況,例如舉辦活動、展示非營利組織的影響力和故事等。
希望這篇文章能幫助您輕鬆地在任意 WordPress 主題中添加視差效果。如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程,您還可以在 Twitter 和 Facebook 上找到我們。