Kadence Blocks Pro 插件提供了 Modal 彈窗區(qū)塊，可用于在頁(yè)面中添加點(diǎn)擊觸發(fā)的彈出內(nèi)容區(qū)域。無(wú)論是展示通知、快速填寫(xiě)表單，還是引導(dǎo)用戶(hù)查看特定內(nèi)容，這個(gè)模塊都具備很強(qiáng)的實(shí)用性。

本文將介紹 Modal 區(qū)塊的基本設(shè)置方法，包括彈窗鏈接、內(nèi)容編輯、樣式自定義及自定義觸發(fā)方式等操作流程。

添加 Modal 區(qū)塊

打開(kāi)編輯器，點(diǎn)擊添加區(qū)塊，在區(qū)塊列表中選擇 Modal，并將其插入到頁(yè)面中。插入后會(huì)自動(dòng)出現(xiàn)一個(gè)鏈接文本和彈出內(nèi)容區(qū)域。

設(shè)置鏈接文本

選中區(qū)塊，在右側(cè)設(shè)置欄中輸入觸發(fā)彈窗的鏈接文本，例如“查看更多”或“打開(kāi)彈窗”。這段文字將顯示在頁(yè)面中，作為用戶(hù)點(diǎn)擊的入口。

編輯彈窗內(nèi)容

在彈窗內(nèi)部可以插入任意區(qū)塊，如文本、圖片、按鈕、表單等，完全支持靈活布局。與編輯普通內(nèi)容區(qū)塊相同，可調(diào)整樣式、排版和結(jié)構(gòu)。

自定義鏈接樣式

可以調(diào)整觸發(fā)鏈接的字體、顏色、邊框、背景等外觀參數(shù)，使其與頁(yè)面整體風(fēng)格保持一致。

設(shè)置背景遮罩

當(dāng)彈窗打開(kāi)時(shí)，頁(yè)面會(huì)出現(xiàn)半透明背景遮罩。你可以選擇遮罩顏色和透明度，突出彈窗內(nèi)容的同時(shí)讓頁(yè)面保持清晰背景。

設(shè)置動(dòng)畫(huà)與位置

在設(shè)置欄中可以選擇彈窗的打開(kāi)與關(guān)閉動(dòng)畫(huà)，例如淡入、滑動(dòng)、放大等，也可指定彈窗出現(xiàn)在頁(yè)面的位置，如頂部、中部、底部、左側(cè)或右側(cè)。

設(shè)置彈窗尺寸

彈窗的寬度與高度可以按需調(diào)整，適配不同類(lèi)型的內(nèi)容展示?？梢允褂冒俜直然蚓唧w像素?cái)?shù)值進(jìn)行設(shè)置。

調(diào)整關(guān)閉按鈕樣式

右上角的關(guān)閉按鈕支持樣式設(shè)置，包括圖標(biāo)大小、顏色、位置等。設(shè)計(jì)合理的關(guān)閉按鈕有助于保持頁(yè)面的簡(jiǎn)潔與易用性。

設(shè)置彈窗外觀

你可以為彈窗添加背景顏色、邊框、圓角與陰影，增強(qiáng)內(nèi)容的層次感。合理的設(shè)計(jì)能讓彈窗內(nèi)容更加突出并保持頁(yè)面協(xié)調(diào)。

調(diào)整好樣式后保存進(jìn)去前端查看

使用自定義觸發(fā)鏈接

Modal 區(qū)塊除了內(nèi)置鏈接外，還支持手動(dòng)創(chuàng)建按鈕來(lái)觸發(fā)彈窗，適合在特定位置自定義布局結(jié)構(gòu)。

操作步驟如下：

• 在 Modal 設(shè)置中關(guān)閉默認(rèn)鏈接開(kāi)關(guān)

• 為該彈窗設(shè)置一個(gè)打開(kāi) ID，例如 customid
• 在頁(yè)面中任意位置插入一個(gè)高級(jí)按鈕
• 將按鈕鏈接設(shè)為 #customid
• 為按鈕添加類(lèi)名 modal-trigger

設(shè)置完成后，點(diǎn)擊該按鈕即可觸發(fā)彈窗打開(kāi)，便于內(nèi)容的自由組合與頁(yè)面結(jié)構(gòu)優(yōu)化

總結(jié)

Modal 彈窗區(qū)塊是 Kadence Blocks Pro 中非常實(shí)用的內(nèi)容展示工具。彈窗結(jié)構(gòu)清晰，支持多種排版方式和樣式調(diào)整，具備靈活的觸發(fā)機(jī)制，適合各種網(wǎng)站頁(yè)面場(chǎng)景使用。

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