Kadence Blocks Pro 插件提供了 Modal 弹窗区块,可用于在页面中添加点击触发的弹出内容区域。无论是展示通知、快速填写表单,还是引导用户查看特定内容,这个模块都具备很强的实用性。
本文将介绍 Modal 区块的基本设置方法,包括弹窗链接、内容编辑、样式自定义及自定义触发方式等操作流程。
添加 Modal 区块
打开编辑器,点击添加区块,在区块列表中选择 Modal,并将其插入到页面中。插入后会自动出现一个链接文本和弹出内容区域。
设置链接文本
选中区块,在右侧设置栏中输入触发弹窗的链接文本,例如“查看更多”或“打开弹窗”。这段文字将显示在页面中,作为用户点击的入口。
编辑弹窗内容
在弹窗内部可以插入任意区块,如文本、图片、按钮、表单等,完全支持灵活布局。与编辑普通内容区块相同,可调整样式、排版和结构。
自定义链接样式
可以调整触发链接的字体、颜色、边框、背景等外观参数,使其与页面整体风格保持一致。
设置背景遮罩
当弹窗打开时,页面会出现半透明背景遮罩。你可以选择遮罩颜色和透明度,突出弹窗内容的同时让页面保持清晰背景。
设置动画与位置
在设置栏中可以选择弹窗的打开与关闭动画,例如淡入、滑动、放大等,也可指定弹窗出现在页面的位置,如顶部、中部、底部、左侧或右侧。
设置弹窗尺寸
弹窗的宽度与高度可以按需调整,适配不同类型的内容展示。可以使用百分比或具体像素数值进行设置。
调整关闭按钮样式
右上角的关闭按钮支持样式设置,包括图标大小、颜色、位置等。设计合理的关闭按钮有助于保持页面的简洁与易用性。
设置弹窗外观
你可以为弹窗添加背景颜色、边框、圆角与阴影,增强内容的层次感。合理的设计能让弹窗内容更加突出并保持页面协调。
调整好样式后保存进去前端查看
使用自定义触发链接
Modal 区块除了内置链接外,还支持手动创建按钮来触发弹窗,适合在特定位置自定义布局结构。
操作步骤如下:
在 Modal 设置中关闭默认链接开关
为该弹窗设置一个打开 ID,例如 customid
在页面中任意位置插入一个高级按钮
将按钮链接设为 #customid
为按钮添加类名 modal-trigger
设置完成后,点击该按钮即可触发弹窗打开,便于内容的自由组合与页面结构优化
总结
Modal 弹窗区块是 Kadence Blocks Pro 中非常实用的内容展示工具。弹窗结构清晰,支持多种排版方式和样式调整,具备灵活的触发机制,适合各种网站页面场景使用。