Elementor Lightbox 是一種彈出式展示功能，允許網(wǎng)站在點(diǎn)擊圖像、視頻或鏈接時，以彈窗的形式在當(dāng)前頁面中展示相關(guān)的內(nèi)容。在本教程中，詳細(xì)向你展示如何在 Elementor Lightbox 打開時禁用頁面滾動。這將為用戶提供更好的體驗，因為它避免了在 Lightbox 打開時背景頁面仍然可以滾動的情況。

通過以下步驟，可以輕松實現(xiàn)此效果，增強(qiáng)你的網(wǎng)站的交互性和可用性。

為什么要禁用頁面滾動？

默認(rèn)情況下，當(dāng) Elementor 的 Lightbox 功能被觸發(fā)時，頁面的背景內(nèi)容仍然可以通過滾動查看。這種情況有時會影響用戶對 Lightbox 中內(nèi)容的關(guān)注，尤其是當(dāng)頁面較長且包含復(fù)雜布局時，背景滾動可能會使用戶分心。

禁用頁面滾動可以讓用戶更專注于正在查看的圖像或視頻內(nèi)容，并提高用戶交互的質(zhì)量。通過移除滾動條，頁面在視覺上也會變得更加簡潔，讓網(wǎng)站的整體感覺更加精致和專業(yè)。

如何在 Elementor Lightbox 打開時禁用頁面滾動

為了實現(xiàn)這個效果，我們將使用簡單的 CSS 代碼。只需將該代碼添加到你的 WordPress 站點(diǎn)的全局 CSS 區(qū)域，即可在 Elementor 的 Lightbox 打開時自動禁用頁面滾動。

步驟 1：定位需要添加 CSS 的位置

在 WordPress 中，有多個地方可以添加自定義 CSS：

• 子主題的 style.css 文件：如果正在使用子主題，可以將自定義 CSS 添加到子主題的樣式文件中。
• Elementor 全局 CSS：通過 Elementor 編輯器，可以直接在“全局設(shè)置”中添加 CSS，使其應(yīng)用于整個站點(diǎn)。
• 主題定制器 > 附加 CSS：在 WordPress 儀表盤的“外觀”>“定制”>“附加 CSS”區(qū)域，也可以全局添加自定義 CSS。

步驟 2：添加 CSS 代碼禁用滾動

以下是禁用頁面滾動的自定義 CSS 代碼。此代碼會在 Lightbox 打開時阻止頁面背景滾動：

.elementor-lightbox__container {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

body.elementor-lightbox-open {
    overflow: hidden !important;
}

解釋代碼：

• 第一段代碼 .elementor-lightbox__container 確保 Lightbox 容器在打開時固定在屏幕上，不會因滾動而移動。
• 第二段代碼 body.elementor-lightbox-open 則完全禁用了頁面的滾動行為，強(qiáng)制使頁面在 Lightbox 打開時無法滾動。

代碼實現(xiàn)：在 Elementor 中禁用頁面滾動

1. 打開 Elementor 編輯器：進(jìn)入想要禁用頁面滾動的頁面。
2. 進(jìn)入全局設(shè)置：在 Elementor 編輯器左下角，點(diǎn)擊“站點(diǎn)設(shè)置”，然后選擇“自定義 CSS”。

2. 粘貼代碼：將上述代碼粘貼到自定義 CSS 區(qū)域中。
3. 保存更改：點(diǎn)擊“保存”以應(yīng)用這些更改。

通過這些步驟，當(dāng) Lightbox 打開時，用戶將無法滾動背景頁面，提升了瀏覽體驗。

進(jìn)一步優(yōu)化：啟用自定義 CSS 的位置

根據(jù)您的網(wǎng)站需求，可以選擇不同的地方添加這段 CSS：

• 如果只需要在某個特定頁面禁用滾動，可以在該頁面的 Elementor 編輯器中添加自定義 CSS。

• 如果需要在整個網(wǎng)站禁用 Lightbox 滾動，可以通過主題的全局樣式文件（如 style.css）或 WordPress 定制器中的“附加 CSS”區(qū)域添加代碼。

總結(jié)

禁用 Elementor Lightbox 打開時的頁面滾動是一個簡單卻有效的技巧，能夠提升用戶體驗，避免在觀看圖像時背景內(nèi)容的干擾。通過添加自定義 CSS 代碼，可以輕松地在整個網(wǎng)站或特定頁面中實現(xiàn)這一效果。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息