Kadence 教学:Modal 弹窗区块使用指南

Kadence Blocks Pro 插件提供了 Modal 弹窗区块,可用于在页面中添加点击触发的弹出内容区域。无论是展示通知、快速填写表单,还是引导用户查看特定内容,这个模块都具备很强的实用性。

本文将介绍 Modal 区块的基本设置方法,包括弹窗链接、内容编辑、样式自定义及自定义触发方式等操作流程。

20250331164128518-image

添加 Modal 区块

打开编辑器,点击添加区块,在区块列表中选择 Modal,并将其插入到页面中。插入后会自动出现一个链接文本和弹出内容区域。

20250331164155241-image

设置链接文本

选中区块,在右侧设置栏中输入触发弹窗的链接文本,例如“查看更多”或“打开弹窗”。这段文字将显示在页面中,作为用户点击的入口。

20250331164223571-image

编辑弹窗内容

在弹窗内部可以插入任意区块,如文本、图片、按钮、表单等,完全支持灵活布局。与编辑普通内容区块相同,可调整样式、排版和结构。

20250331164420130-image

自定义链接样式

可以调整触发链接的字体、颜色、边框、背景等外观参数,使其与页面整体风格保持一致。

20250331164613223-image

设置背景遮罩

当弹窗打开时,页面会出现半透明背景遮罩。你可以选择遮罩颜色和透明度,突出弹窗内容的同时让页面保持清晰背景。

20250331164650985-image

设置动画与位置

在设置栏中可以选择弹窗的打开与关闭动画,例如淡入、滑动、放大等,也可指定弹窗出现在页面的位置,如顶部、中部、底部、左侧或右侧。

20250331164721206-image

设置弹窗尺寸

弹窗的宽度与高度可以按需调整,适配不同类型的内容展示。可以使用百分比或具体像素数值进行设置。

20250331164746412-image

调整关闭按钮样式

右上角的关闭按钮支持样式设置,包括图标大小、颜色、位置等。设计合理的关闭按钮有助于保持页面的简洁与易用性。

20250331164807178-image

设置弹窗外观

你可以为弹窗添加背景颜色、边框、圆角与阴影,增强内容的层次感。合理的设计能让弹窗内容更加突出并保持页面协调。

20250331164816494-image
20250331164858665-image

调整好样式后保存进去前端查看

20250331165023777-image

使用自定义触发链接

Modal 区块除了内置链接外,还支持手动创建按钮来触发弹窗,适合在特定位置自定义布局结构。

操作步骤如下:

  • 在 Modal 设置中关闭默认链接开关
20250331165410976-image
  • 为该弹窗设置一个打开 ID,例如 customid
  • 在页面中任意位置插入一个高级按钮
  • 将按钮链接设为 #customid
  • 为按钮添加类名 modal-trigger
20250331165425474-image

设置完成后,点击该按钮即可触发弹窗打开,便于内容的自由组合与页面结构优化

总结

Modal 弹窗区块是 Kadence Blocks Pro 中非常实用的内容展示工具。弹窗结构清晰,支持多种排版方式和样式调整,具备灵活的触发机制,适合各种网站页面场景使用。


了解 宝藏号 的更多信息

订阅后即可通过电子邮件收到最新文章。

© 版权声明

相关文章

暂无评论

none
暂无评论...

了解 宝藏号 的更多信息

立即订阅以继续阅读并访问完整档案。

继续阅读