适用于 WordPress 区块编辑器的 314 个区块
真正的区块,配有真正的设置面板,可从 WordPress 提供的区块插入器中插入。没有短代码,没有专有画布,也无需再学一套编辑器。访客看到的每一处内容,都可在侧边栏中找到对应控件。
更新于
209 个可直接插入的区块
按系列筛选,或按名称、关键词、区块功能搜索。高级区块已做标注,每个套餐都包含全部区块。

WordPress 提供的插入器,Canvas 区块系列位于核心区块之下。这里没有任何短代码,也不会打开第二个编辑器。
显示全部 209
Posts
共 31 个区块,在区块插入器的“文章”分类下列出。
Academic Works 免费
作品集记录以学术设计的方式呈现:图书条目、期刊论文卡片,以及记录在其页面上的详细信息。
Agency Works 免费
以代理机构风格的轮播或网格展示作品集项目,或呈现单个项目页面(包括属性、联系按钮和相关项目)。
Blog Archive Loop 免费
主查询的博客循环(索引、分类、标签、作者、日期)。使用主题的 blog-entry 局部模板和分页。
在线查看:Blog Archive Loop,位于 首页 页面(在新标签页中打开) 设置,见文档中的 Blog Archive Loop 区块说明
Blog Loop 免费
可组合的博客文章循环。请用 Post Image、Post Title、Post Meta 和 Post Excerpt 区块组合每篇文章的卡片;容器、分页和时间线等外观元素由布局决定。
在线查看:Blog Loop,位于 博客 | 网格 页面(在新标签页中打开) 设置,见文档中的 Blog Loop 区块说明
Blog Single Post 免费
单篇博客文章布局(标题、元信息、图片、内容、标签、分享、导航、作者、评论、相关内容及侧边栏)。适用于 single.html。
Construction Projects 免费
以作品集网格形式显示 Projects 文章类型中的项目(2 到 5 列),或呈现单个项目页面(属性、联系行动按钮、相关项目)。
Illustrator Works 免费
作品集项目以带彩色边框的方形卡片可筛选网格形式呈现,或以单个项目页面的各个部分呈现。
Interior Projects 免费
以可筛选的作品集网格显示 Projects 文章类型中的工作室项目,或渲染单个项目页面(包括详情侧边栏、咨询按钮和相关项目)。
Law Firm Cases 免费
以卡片形式展示 Portfolio 文章类型中的案例,或呈现单个案例页面(属性、行动号召、相关案例)。
Photo Shots 免费
以可展开的预览网格展示 Shots 文章类型中的照片,或渲染单个作品页面(包括画框、拍摄细节、咨询按钮和相关作品)。
Post Author 免费
显示当前文章作者简介卡片,包括头像、显示名称和个人简介。
在线查看:Post Author,位于 慢速网络:为何最佳阅读体验正变得更加安静 页面(在新标签页中打开) 设置,见文档中的 Post Author 区块说明
Post Comments 免费
渲染 WordPress 评论模板,包括评论列表和提交表单。
在线查看:Post Comments,位于 慢速网络:为何最佳阅读体验正变得更加安静 页面(在新标签页中打开) 设置,见文档中的 Post Comments 区块说明
Post Content 免费
显示当前文章的完整内容,并运行所有内容过滤器,包括短代码和嵌入内容。
在线查看:Post Content,位于 这是一篇带有预览图像的标准文章 页面(在新标签页中打开) 设置,见文档中的 Post Content 区块说明
Post Date 免费
仅显示文章的发布日期,用于元信息列表无法呈现的署名行。
在线查看:Post Date,位于 慢速网络:为何最佳阅读体验正变得更加安静 页面(在新标签页中打开) 设置,见文档中的 Post Date 区块说明
Post Excerpt 免费
以词为单位截取当前文章的摘要,长度可自行设置。
在线查看:Post Excerpt,位于 博客 | 网格 页面(在新标签页中打开) 设置,见文档中的 Post Excerpt 区块说明
Post Image 免费
显示当前文章的特色图片,可设置尺寸,并可选择添加固定链接。
在线查看:Post Image,位于 博客 | 混合信息流 页面(在新标签页中打开) 设置,见文档中的 Post Image 区块说明
Post Media 免费
当前文章的入口媒体框:根据文章格式,显示其特色图片、视频或音频嵌入、图库滑块、缩略图网格、引用、链接或状态卡片。
在线查看:Post Media,位于 博客 | 时间线左侧边栏 页面(在新标签页中打开) 设置,见文档中的 Post Media 区块说明
Post Meta 免费
显示可配置的文章元信息,包括日期、作者、分类和评论数。
在线查看:Post Meta,位于 博客 | 混合信息流 页面(在新标签页中打开) 设置,见文档中的 Post Meta 区块说明
Post Navigation 免费
显示当前文章的上一篇和下一篇文章导航链接。
在线查看:Post Navigation,位于 慢速网络:为何最佳阅读体验正变得更加安静 页面(在新标签页中打开) 设置,见文档中的 Post Navigation 区块说明
Post Read More 免费
输出一个指向当前文章固定链接的“阅读更多”链接或按钮。
在线查看:Post Read More,位于 首页 页面(在新标签页中打开) 设置,见文档中的 Post Read More 区块说明
Post Reading Bar 免费
显示当前文章的阅读时间、字号、打印以及滚动分享控件。
在线查看:Post Reading Bar,位于 这是一篇带有预览图像的标准文章 页面(在新标签页中打开) 设置,见文档中的 Post Reading Bar 区块说明
Post Reading Time 免费
根据正文计算的阅读时长。
在线查看:Post Reading Time,位于 慢速网络:为何最佳阅读体验正变得更加安静 页面(在新标签页中打开) 设置,见文档中的 Post Reading Time 区块说明
Post Related 免费
以网格形式显示与当前文章属于同一分类的相关文章。
在线查看:Post Related,位于 慢速网络:为何最佳阅读体验正变得更加安静 页面(在新标签页中打开) 设置,见文档中的 Post Related 区块说明
Post Share 免费
显示当前文章的社交分享链接,可配置分享平台、样式和尺寸。
在线查看:Post Share,位于 Event Single 页面(在新标签页中打开) 设置,见文档中的 Post Share 区块说明
Post Terms 免费
以文本、徽章、胶囊、标签云或行内分类等样式,显示当前文章的分类项(分类或标签)。
在线查看:Post Terms,位于 博客 | 混合信息流 页面(在新标签页中打开) 设置,见文档中的 Post Terms 区块说明
Post Title 免费
以可配置的标题标签显示当前文章标题,并可选择添加固定链接。
在线查看:Post Title,位于 博客 | 混合信息流 页面(在新标签页中打开) 设置,见文档中的 Post Title 区块说明
Post Table of Contents 免费
文章自身标题的索引,带有可用的锚点,以及会随读者位置移动的标记。
在线查看:Post Table of Contents,位于 经得起品牌重塑的设计令牌实用指南 页面(在新标签页中打开) 设置,见文档中的 Post Table of Contents 区块说明
Posts 免费
以网格、列表、瀑布流和时间线等多种布局查询并显示文章。支持按分类、标签、自定义文章类型筛选,并支持排序。
Recent Comments 免费
展示全站最新已批准的评论,每条均附带评论者的头像、姓名和开头文字,并链接至对应的评论串。
在线查看:Recent Comments,位于 小工具 页面(在新标签页中打开) 设置,见文档中的 Recent Comments 区块说明
Resume Works 免费
以紧凑列表或磁贴网格的形式显示 Works 文章类型中的项目,或渲染单个项目页面(属性、CTA、相关项目)。
内容
30 个区块,位于区块插入器中的“内容”类别下。
Background Video / Audio 免费
一种自托管的循环播放视频或音频层,用于主视觉区、区块背景或定制播放器。它仅输出媒体元素,因此定位该元素的包装容器仍由你自行控制。
在线查看:Background Video / Audio,位于 媒体操作 页面(在新标签页中打开) 设置,见文档中的 Background Video / Audio 区块说明
Cascading Images 任一套餐均包含
分层图片组合,每张图片可单独设置平移、旋转、缩放、z-index、动画延迟,并可选添加装饰性背景形状。
在线查看:Cascading Images,位于 Cascading Images 页面(在新标签页中打开) 设置,见文档中的 Cascading Images 区块说明
图表 任一套餐均包含
通过您提供的数据集绘制图表,让报告或价格对比中的数据一目了然。图表类型、数据和标签均来自您输入的配置。
Circle Stack 任一套餐均包含
横向排列的圆形头像、图标或文字徽章,适合用于团队展示、社交证明和关注人数统计。
在线查看:Circle Stack,位于 Circle Stacks 页面(在新标签页中打开) 设置,见文档中的 Circle Stack 区块说明
Clients 免费
以响应式网格或 owl-carousel 形式展示客户、合作伙伴或品牌徽标,可选择添加链接并支持灯箱效果。
Data Table 任一套餐均包含
以行和列的形式排列结构化信息,例如规格列表或套餐对比,表头可供访客排序,底部可选添加汇总行。
在线查看:Data Table,位于 用户资料 页面(在新标签页中打开) 设置,见文档中的 Data Table 区块说明
Map 免费
Google 地图或 OpenStreetMap 地图,支持自定义标记、缩放级别,以及在 Google 地图上覆盖地图类型和样式设置。
Hover Card 免费
图片卡片,鼠标悬停时会以 3D 效果倾斜,其标题和分类说明会向观看者方向浮起。
在线查看:Hover Card,位于 悬停视差 页面(在新标签页中打开) 设置,见文档中的 Hover Card 区块说明
Icon Browser 免费
可搜索的参考网格,展示已启用图标包中的所有图标。
在线查看:Icon Browser,位于 图标 页面(在新标签页中打开) 设置,见文档中的 Icon Browser 区块说明
Inline SVG 免费
通过 SVG 路径数据绘制的矢量图标,侧边栏控件可设置尺寸、颜色、viewBox 和各图层不透明度。
Link Tiles 免费
由图标和标签组成的网格磁贴,每个磁贴链接到一个页面。指向不存在页面的磁贴会被省略。
在线查看:Link Tiles,位于 列表组与卡片 页面(在新标签页中打开) 设置,见文档中的 Link Tiles 区块说明
Lists & Cards 免费
基于 Bootstrap 的列表组和卡片,提供多种样式、颜色和布局。
在线查看:Lists & Cards,位于 列表组与卡片 页面(在新标签页中打开) 设置,见文档中的 Lists & Cards 区块说明
Media Embed 免费
在页面中放置视频或音频播放器,内容可来自托管服务、您上传的文件,或服务商提供的嵌入地址,并可按所选宽高比调整尺寸。
在线查看:Media Embed,位于 媒体嵌入 页面(在新标签页中打开) 设置,见文档中的 Media Embed 区块说明
Navbar 免费
可折叠导航栏,包含品牌标识、汉堡菜单切换按钮、下拉链接,以及可选的末尾搜索表单、按钮或文本。
Overlay Item 免费
图片卡片,上层叠加覆盖层:包括徽章、色调层,以及一个或多个覆盖内容层。
在线查看:Overlay Item,位于 项目覆盖层 页面(在新标签页中打开) 设置,见文档中的 Overlay Item 区块说明
页面标题 免费
页面标题 / 首屏横幅栏。在其中放入标题、副标题和面包屑导航,并可设置对齐方式、背景图片、视差效果以及深色配色方案。
Page Title Buttons 免费
页面标题区域中的操作按钮。动态模式下读取每个页面各自的按钮,或渲染你在此处编写的按钮。没有链接的按钮将成为滚动触发器。
在线查看:Page Title Buttons,位于 按钮 页面(在新标签页中打开) 设置,见文档中的 Page Title Buttons 区块说明
Particles 免费
用于某个区域的动态粒子背景层:线状网络、星空、气泡、雪花或低多边形。
在线查看:Particles,位于 Particles 页面(在新标签页中打开) 设置,见文档中的 Particles 区块说明
Preloader 免费
一种 CSS 动画加载指示器,可使用设计系统中的任一加载器样式。
Pricing Switcher 任一套餐均包含
切换开关,用于在成对的价格表区块之间控制月付/年付(或任意双状态)价格的显示。
在线查看:Pricing Switcher,位于 定价 页面(在新标签页中打开) 设置,见文档中的 Pricing Switcher 区块说明
Q&A Item 免费
一个问题及其答案,各自带有独立标记:这是访谈的基本构建单元。
在线查看:Q&A Item,位于 Jane Doe 谈二十年的字体设计 页面(在新标签页中打开) 设置,见文档中的 Q&A Item 区块说明
Rounded Skill 免费
一个圆形技能环,会按其百分比填充,中间可显示数值、自定义文字、图标或计数器。
在线查看:Rounded Skill,位于 饼图与技能 页面(在新标签页中打开) 设置,见文档中的 Rounded Skill 区块说明
Scroll Arrow 任一套餐均包含
用于首屏区域的动态向下滚动箭头:平滑滚动到目标区域锚点。
在线查看:Scroll Arrow,位于 圣诞促销商店 页面(在新标签页中打开) 设置,见文档中的 Scroll Arrow 区块说明
Star Rating 免费
用于设置单一评分的星级评分。支持半星、自定义图标和可选的包裹元素。
在线查看:Star Rating,位于 结果 页面(在新标签页中打开) 设置,见文档中的 Star Rating 区块说明
客户评价 免费
以网格、轮播或对话气泡的形式展示客户的评价,每条评价都附有作者、照片和星级评分。
Twitter Feed 免费
展示某个账号最新推文的滚动动态,页面加载时获取。可选择账号、显示条数以及小组件的排版方式。
在线查看:Twitter Feed,位于 小工具 页面(在新标签页中打开) 设置,见文档中的 Twitter Feed 区块说明
Canvas
29 个区块,列在区块插入器的 Canvas 分类下。
Alert 免费
提示与通知框,采用 Bootstrap alert 或 Canvas style-msg 系统。支持填充、边框和扩展等样式,可选添加图标和关闭按钮。
Code Highlight 任一套餐均包含
基于 Prism.js 的语法高亮代码区块。支持 15+ 种语言,并可选配剪贴板复制按钮。
在线查看:Code Highlight,位于 代码高亮器 页面(在新标签页中打开) 设置,见文档中的 Code Highlight 区块说明
Divider 免费
水平分隔线,支持可选图标、样式变体、对齐方式、宽度预设,以及滚动到链接功能。
Dropcap 免费
带样式的首字下沉字母,并附带段落文字。支持方框、边框、圆形和带边框圆形等样式,可设置在左侧或右侧。
标题 免费
Styled heading with optional subtitle. Supports Heading Block, Title Block, Emphasis Title, and Fancy Title types.
Highlight 免费
高亮文本,支持多种可配置的样式变体,包括标记、下划线、渐变、描边和纯文本。支持可选的前后环绕文案,以及任意块级 HTML 标签。
Icon Box 免费
带图标、标题和描述的特色框。支持多种图标样式、尺寸、布局和悬停效果。
Icon List 免费
带有重复项的图标列表。每个项目包含一个图标(CSS 类)、文字标签和可选链接。支持默认、大号和超大号尺寸变体。
Login Form 任一套餐均包含
显示带有 Canvas 样式的 WordPress 登录表单,并向已登录用户显示欢迎信息。
在线查看:Login Form,位于 登录与注册 页面(在新标签页中打开) 设置,见文档中的 Login Form 区块说明
Page Title Breadcrumbs 免费
为当前页面或文章显示面包屑导航(首页 > 上级 > 当前页)。
在线查看:Page Title Breadcrumbs,位于 页面标题左对齐布局 页面(在新标签页中打开) 设置,见文档中的 Page Title Breadcrumbs 区块说明
Page Title Heading 免费
以标题形式呈现页面或文章标题。支持动态(上下文)和静态(字面值)两种来源模式。
在线查看:Page Title Heading,位于 页面标题左对齐布局 页面(在新标签页中打开) 设置,见文档中的 Page Title Heading 区块说明
Page Title Subtitle 免费
渲染页面副标题。在动态模式下读取 _canvas_page_subtitle 元数据,在静态模式下显示自定义文本。
在线查看:Page Title Subtitle,位于 页面标题左对齐布局 页面(在新标签页中打开) 设置,见文档中的 Page Title Subtitle 区块说明
Plain Image 免费
无 figure 包裹的裸 img 元素,可精确控制类名,可选链接,并可选配视网膜(2x)srcset 图像对。
在线查看:Plain Image,位于 Shape Dividers 页面(在新标签页中打开) 设置,见文档中的 Plain Image 区块说明
Portfolio Excerpt 任一套餐均包含
显示当前作品集项目的精简摘要。
在线查看:Portfolio Excerpt,位于 打开想象力 页面(在新标签页中打开) 设置,见文档中的 Portfolio Excerpt 区块说明
Pricing Table 任一套餐均包含
灵活的定价框卡片。支持默认、简单、极简和扩展四种布局,可选配定价切换器、功能列表和 CTA 按钮。
在线查看:Pricing Table,位于 定价 页面(在新标签页中打开) 设置,见文档中的 Pricing Table 区块说明
Process Steps 免费
带虚线连接线的编号或图标步骤指示器。可选启用 Bootstrap 5 标签页内容及上一步/下一步导航。
在线查看:Process Steps,位于 Process Steps 页面(在新标签页中打开) 设置,见文档中的 Process Steps 区块说明
Progress Bar 免费
带动画效果的技能/进度条,附带百分比计数器,支持水平或垂直方向,并提供 Bootstrap 条纹图案。
在线查看:Progress Bar,位于 进度条与技能 页面(在新标签页中打开) 设置,见文档中的 Progress Bar 区块说明
Promo Box 免费
带标题、副标题和 CTA 按钮的推广号召框。支持默认、边框、浅色和深色样式。
引言 免费
引用区块,提供默认边框、图标引号和对话气泡三种样式。支持反向对齐、引用来源页脚,以及可选的边框和图标颜色覆盖。
Read More 免费
可折叠的内容区域,通过“阅读更多”链接触发带动画效果的展开与收起。
在线查看:Read More,位于 Read More 页面(在新标签页中打开) 设置,见文档中的 Read More 区块说明
Register Form 任一套餐均包含
采用 Canvas 样式的用户注册表单。需要先在 WordPress 设置中启用用户注册功能。
在线查看:Register Form,位于 登录与注册 页面(在新标签页中打开) 设置,见文档中的 Register Form 区块说明
Shape Divider 免费
用于板块过渡的 SVG 装饰形状分隔符。
在线查看:Shape Divider,位于 Shape Dividers 页面(在新标签页中打开) 设置,见文档中的 Shape Divider 区块说明
Social Icons 免费
社交图标链接组,带有悬停动画,提供多种样式、尺寸,并可选择固定定位。
在线查看:Social Icons,位于 Social Icons 页面(在新标签页中打开) 设置,见文档中的 Social Icons 区块说明
Stat List 免费
数据列表,每项由加粗的数值和简短标签组成,例如从业年限、产品发布数或获奖数。
Styled Icon 免费
独立图标,提供填充、带边框或简约三种样式,多种形状变体、颜色选项及可选链接。
在线查看:Styled Icon,位于 样式图标 页面(在新标签页中打开) 设置,见文档中的 Styled Icon 区块说明
Team Member 免费
一个团队成员,包含照片、姓名、职位、简介、社交链接和数据,可呈现为卡片、名单行、数据卡片、堆叠卡片或负责人肖像。
在线查看:Team Member,位于 团队 页面(在新标签页中打开) 设置,见文档中的 Team Member 区块说明
交互
25 个区块,在区块插入器的“交互”类别下列出。
Accordion 免费
堆叠带标题的面板,可展开和收起,让大量问答或参考资料集中在一页内,访客只需展开所需的部分。
在线查看:Accordion,位于 切换与手风琴 页面(在新标签页中打开) 设置,见文档中的 Accordion 区块说明
AJAX Button 免费
通过 AJAX 将外部内容加载到容器中的按钮。支持追加、前置和替换三种插入模式。
在线查看:AJAX Button,位于 AJAX Button 页面(在新标签页中打开) 设置,见文档中的 AJAX Button 区块说明
轮播 免费
响应式 owl-carousel 滑块,支持按断点设置显示数量、自动播放、导航箭头、圆点、灯箱以及图片懒加载。
Flip Card 任一套餐均包含
一个 3D 翻转卡片,包含正面和背面,两面各有独立背景,鼠标悬停时翻转。
在线查看:Flip Card,位于 Flip Cards 页面(在新标签页中打开) 设置,见文档中的 Flip Card 区块说明
Gallery 免费
带有瀑布流支持、可配置列数、间距控制和可选灯箱功能的图片库。
Cookie Consent 免费
Cookie 同意横幅,包含隐私偏好设置弹窗和按服务单独设置的同意开关。
在线查看:Cookie Consent,位于 GDPR 布局 2 页面(在新标签页中打开) 设置,见文档中的 Cookie Consent 区块说明
Image Compare 任一套餐均包含
前后对比图片滑块,可配置方向、偏移量、手柄样式和两侧标签。
在线查看:Image Compare,位于 Image Compare 页面(在新标签页中打开) 设置,见文档中的 Image Compare 区块说明
Image Hotspot 任一套餐均包含
带有定位热点标记的交互式图片,悬停或点击即可显示工具提示。
在线查看:Image Hotspot,位于 图片热点 页面(在新标签页中打开) 设置,见文档中的 Image Hotspot 区块说明
Image Slider 任一套餐均包含
基于 FlexSlider 的图片滑块,支持滑动或淡入淡出动画、自动播放、箭头、圆点、缩略图导航和触摸滑动。
在线查看:Image Slider,位于 图片滑块 页面(在新标签页中打开) 设置,见文档中的 Image Slider 区块说明
Off-Canvas 免费
一种由按钮或链接打开的 Bootstrap 5 离屏滑动面板(起始 / 末尾 / 顶部 / 底部)。
在线查看:Off-Canvas,位于 Bootstrap Off-Canvas 页面(在新标签页中打开) 设置,见文档中的 Off-Canvas 区块说明
Pagination 免费
分页行:支持圆形、圆角、胶囊形、3D、透明或按钮样式,提供三种尺寸和任意对齐方式。
在线查看:Pagination,位于 分页与进度条 页面(在新标签页中打开) 设置,见文档中的 Pagination 区块说明
Parallax Image 任一套餐均包含
全宽视差图片区域,可选叠加层与内容。
在线查看:Parallax Image,位于 视差元素 页面(在新标签页中打开) 设置,见文档中的 Parallax Image 区块说明
Slider 任一套餐均包含
选择即可在站点任意位置嵌入 Canvas 滑块。幻灯片、切换效果、导航和高度均在滑块本身中设置。
Tabs 免费
将相关内容拆分到带标签的选项卡中,让访客每次只阅读一个部分,使较长的对比页或规格页保持简短,便于快速浏览。
Text Rotator 免费
在标题元素中呈现动态轮换或打字机效果的文字。
在线查看:Text Rotator,位于 标题与首字下沉 页面(在新标签页中打开) 设置,见文档中的 Text Rotator 区块说明
切换 免费
将一段内容隐藏在标题之后,访客点击标题即可展开。适用于较长的答案,或一组默认不应占用页面空间的条款。
YouTube Background 免费
YouTube 视频以静音的氛围背景形式播放,位于叠加内容之后。
在线查看:YouTube Background,位于 活动单页 | 全宽视频 页面(在新标签页中打开) 设置,见文档中的 YouTube Background 区块说明
WooCommerce
24 个区块,在区块插入器中归类于 WooCommerce 下。
Conference Tickets 任一套餐均包含
用于门票类商品分类的价格框,每个都带有数量选择框和实时加入购物车链接。
在线查看:Conference Tickets,位于 门票 页面(在新标签页中打开) 设置,见文档中的 Conference Tickets 区块说明
Store Price Filter 任一套餐均包含
双滑块价格范围控件,可直接对商品网格进行筛选。
在线查看:Store Price Filter,位于 带筛选器的商店 页面(在新标签页中打开) 设置,见文档中的 Store Price Filter 区块说明
Add to Cart 任一套餐均包含
显示当前商品的 WooCommerce 加入购物车表单,可选包含数量输入框。
在线查看:Add to Cart,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Add to Cart 区块说明
Cart Totals 任一套餐均包含
显示 WooCommerce 购物车合计面板,包括小计、运费和结账按钮。
在线查看:Cart Totals,位于 购物车 页面(在新标签页中打开) 设置,见文档中的 Cart Totals 区块说明
Checkout Order Review 任一套餐均包含
显示 WooCommerce 结账页订单核对摘要,包含商品明细与总计。
交叉销售 任一套餐均包含
显示当前 WooCommerce 购物车中的交叉销售商品。仅当购物车处于活动状态且包含交叉销售商品时才会渲染。
WooCommerce Notices 任一套餐均包含
显示 WooCommerce 通知:错误提示、成功消息或信息提示。
在线查看:WooCommerce Notices,位于 购物车 页面(在新标签页中打开) 设置,见文档中的 WooCommerce Notices 区块说明
Product Carousel 任一套餐均包含
以可滚动的 owl-carousel 轮播形式显示 WooCommerce 商品。支持自动播放、导航箭头、圆点指示器和响应式断点。
在线查看:Product Carousel,位于 轮播 页面(在新标签页中打开) 设置,见文档中的 Product Carousel 区块说明
Product Categories 任一套餐均包含
以响应式卡片网格展示 WooCommerce 商品分类,包含缩略图、名称和商品数量。
在线查看:Product Categories,位于 蓝色圆领 T 恤 页面(在新标签页中打开) 设置,见文档中的 Product Categories 区块说明
Product Gallery Linker 任一套餐均包含
缩略图列表可让商品图库轮播滑动至您点击的图片。
在线查看:Product Gallery Linker,位于 男士飞行员太阳镜 页面(在新标签页中打开) 设置,见文档中的 Product Gallery Linker 区块说明
Product Images 任一套餐均包含
显示 WooCommerce 商品的特色图片和可选的图库缩略图。
在线查看:Product Images,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Product Images 区块说明
Product Meta 任一套餐均包含
显示商品元信息卡片:SKU、分类和标签。
在线查看:Product Meta,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Product Meta 区块说明
Product Price 任一套餐均包含
显示 WooCommerce 商品价格,包括促销价和货币格式。
在线查看:Product Price,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Product Price 区块说明
Product Rating 任一套餐均包含
显示当前 WooCommerce 商品的星级评分,以及可选的评价数量。
在线查看:Product Rating,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Product Rating 区块说明
Product Share 任一套餐均包含
显示“分享:”卡片,其中包含当前 WooCommerce 商品的社交分享链接。
在线查看:Product Share,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Product Share 区块说明
Product Tabs 任一套餐均包含
渲染 WooCommerce 产品数据选项卡:描述、附加信息和评价。
在线查看:Product Tabs,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Product Tabs 区块说明
产品 任一套餐均包含
以网格或列表布局显示 WooCommerce 商品。可按来源、分类、标签和排序方式进行筛选。
Related Products 任一套餐均包含
显示与当前商品相关的 WooCommerce 商品网格。仅在单个商品模板中显示。
在线查看:Related Products,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Related Products 区块说明
Variation Swatches 任一套餐均包含
用于选择可变商品变体的颜色圆点或按钮式标签。
在线查看:Variation Swatches,位于 粉色印花连衣裙 页面(在新标签页中打开) 设置,见文档中的 Variation Swatches 区块说明
页眉
22 个区块,在区块插入器中归入“页眉”类别下。
Color Scheme Toggle 免费
访客使用的深色模式切换开关。当“主题选项 > 配色方案 > 深色模式”中的深色模式切换已开启,且放置位置包含页眉时,该开关会显示在站点上。
Header Button 免费
用于已构建页眉的行动号召按钮或链接,样式沿用主题的按钮样式类。
在线查看:Header Button,位于 首页 页面(在新标签页中打开) 设置,见文档中的 Header Button 区块说明
Header Cart 免费
为已搭建的页眉提供的 WooCommerce 迷你购物车图标与下拉菜单。WooCommerce 未启用时不显示任何内容。
在线查看:Header Cart,位于 首页 页面(在新标签页中打开) 设置,见文档中的 Header Cart 区块说明
Header Container 免费
页眉的根容器:将徽标、导航及其他页眉组件拖入其中。
在线查看:Header Container,位于 意式餐厅 页面(在新标签页中打开) 设置,见文档中的 Header Container 区块说明
Header Icon Link 免费
用于已构建页眉的单个纯图标链接(愿望清单、账户、用户、购物车触发器、登录弹窗),使用 .header-misc-icon 标记。
在线查看:Header Icon Link,位于 页眉 SaaS 页面(在新标签页中打开) 设置,见文档中的 Header Icon Link 区块说明
Header Info 免费
一个小型行内信息或联系方式元素(电话、邮箱、营业时间或文字),可选择添加图标和链接,用于已构建的页眉。
在线查看:Header Info,位于 Menu - Style 7 页面(在新标签页中打开) 设置,见文档中的 Header Info 区块说明
Header Logo 免费
页眉的站点徽标。默认使用主题选项中的站点徽标,也可以选择自定义图片进行替换。
在线查看:Header Logo,位于 意式餐厅 页面(在新标签页中打开) 设置,见文档中的 Header Logo 区块说明
Header Navigation 免费
已构建页眉的主导航菜单。选择菜单和对齐方式。
在线查看:Header Navigation,位于 意式餐厅 页面(在新标签页中打开) 设置,见文档中的 Header Navigation 区块说明
Header Root 免费
构建页眉的最外层元素:携带变体类名和 data-sticky-* 属性,供主题的吸顶页眉脚本读取。请将 #header-wrap 组(及页眉的其他内容)放入其中。
在线查看:Header Root,位于 首页 页面(在新标签页中打开) 设置,见文档中的 Header Root 区块说明
Header Shop Search 免费
页眉行中始终可见的商品搜索框,是店铺与目录场景下对页眉搜索切换按钮的替代方案。可选择带静态图标的简洁搜索框,或带提交按钮的输入组。
在线查看:Header Shop Search,位于 页眉目录 页面(在新标签页中打开) 设置,见文档中的 Header Shop Search 区块说明
Header Side Panel Trigger 免费
用于打开侧边面板的页眉图标。仅在主题选项中开启侧边面板时显示。
Header Social 免费
一行社交与联系图标链接,适用于已搭建的页眉,沿用 top-social 的标记与样式。
在线查看:Header Social,位于 在线时尚店铺 - 商店侧边栏 页面(在新标签页中打开) 设置,见文档中的 Header Social 区块说明
Header Topbar 免费
The slim utility row above a built header (#top-bar): drop Top Links, Header Social, Header Info, or a Language Switcher inside.
Header Zone 免费
位于 Header Container 行内的定位插槽:在其中放入 Logo、导航或一小组页眉组件,然后使用对齐方式、排序和可见性字段进行定位。
在线查看:Header Zone,位于 意式餐厅 页面(在新标签页中打开) 设置,见文档中的 Header Zone 区块说明
Icon Nav List 免费
垂直排列的 Bootstrap .nav 图标链接列表(nav-item > nav-link > 图标 + 文本),用于离屏菜单面板。
在线查看:Icon Nav List,位于 用户资料 页面(在新标签页中打开) 设置,见文档中的 Icon Nav List 区块说明
Language Switcher 免费
一个紧凑的语言下拉菜单,适用于已完成搭建的页眉:显示当前语言并列出其他语言,使用 primary-menu with-arrows 标记。
Mega Menu Column 任一套餐均包含
单个超级菜单列(.mega-menu-column):标题加链接列表、扁平链接或任意小工具内容。可在 Row 区块内放置一个或多个列,作为您的超级菜单内容(外观 > 菜单 > 超级菜单仍控制外层面板的类型和样式)。
在线查看:Mega Menu Column,位于 超级菜单 页面(在新标签页中打开) 设置,见文档中的 Mega Menu Column 区块说明
页面菜单 免费
子页眉页面导航栏,提供吸顶和侧边圆点两种变体:可实现单页锚点滚动或普通链接。每个页面仅使用一个。
Top Links 免费
顶部栏链接菜单,可选单级下拉菜单,使用 .top-links 的标记与样式。
在线查看:Top Links,位于 在线时尚店铺 - 商店侧边栏 页面(在新标签页中打开) 设置,见文档中的 Top Links 区块说明
布局
19 个区块,在区块插入器的“布局”下列出。
Column 免费
响应式网格列(.col-*)。可按断点设置宽度,并可在其中放置任何内容。
Copyrights 免费
页脚版权栏的一部分:包含链接的版权信息行,或行内链接菜单。将 Wrapper 区块的 Copyrights Bar 变体并排插入,即可同时放置两者。
在线查看:Copyrights,位于 页脚 - 布局 2 页面(在新标签页中打开) 设置,见文档中的 Copyrights 区块说明
页脚关于 免费
一个页脚“About”列,包含徽标、描述和可选地址,使用 .footer-logo 标记。
Footer Contacts 免费
大号标签/值形式的联系信息行,使用 .footer-big-contacts 的标记和样式。
在线查看:Footer Contacts,位于 页脚 - 布局 3 页面(在新标签页中打开) 设置,见文档中的 Footer Contacts 区块说明
Footer Instagram 免费
页脚 Instagram / 图片流小工具:以瀑布流网格展示图片,可选添加链接,使用 .masonry-thumbs 标记。
在线查看:Footer Instagram,位于 页脚 - 布局 4 页面(在新标签页中打开) 设置,见文档中的 Footer Instagram 区块说明
Footer Widget Area 免费
The root of a built footer widget row: drop Footer About, Widget Links, Footer Contacts, Subscribe, or Footer Instagram blocks inside.
在线查看:Footer Widget Area,位于 页脚 - 布局 2 页面(在新标签页中打开) 设置,见文档中的 Footer Widget Area 区块说明
Grid Filter 任一套餐均包含
Isotope 分类筛选栏(.grid-filter),用于驱动支持 Isotope 筛选的网格。数据项可来自分类法或手动列表。
在线查看:Grid Filter,位于 作品集筛选样式 页面(在新标签页中打开) 设置,见文档中的 Grid Filter 区块说明
Hero 免费
渲染每个页面在其 Hero 面板中指定的 Hero,或您选择的某一个 Hero。在 Canvas → Heroes 中编排 Hero。
Image Element 免费
没有 figure 或图注包裹的纯图片,用于与其他内容并排内联显示的徽标和徽章。
在线查看:Image Element,位于 首页 页面(在新标签页中打开) 设置,见文档中的 Image Element 区块说明
Inline Contact 免费
以中点分隔符连接的平铺行内列表,由图标加文本的联系信息项组成(邮箱、电话、Skype 等):即 #copyrights 版权栏中的联系信息行。
在线查看:Inline Contact,位于 联系我们 页面(在新标签页中打开) 设置,见文档中的 Inline Contact 区块说明
Inline Text 免费
直接位于容器内、没有自身段落或 span 的一段文本。仅限行内内容。
在线查看:Inline Text,位于 全宽布局 页面(在新标签页中打开) 设置,见文档中的 Inline Text 区块说明
Line Break 免费
用作间距调节的单个换行符。在高级面板中添加响应式类,可使行仅在部分屏幕尺寸下换行。
在线查看:Line Break,位于 悬停视差 页面(在新标签页中打开) 设置,见文档中的 Line Break 区块说明
页面标题 免费
渲染每个页面在页眉下方显示的页面标题横条,其设置可在页面的“页面标题”面板和“主题选项”中进行。横条本身即为页面标题模板部件。
Quantity Input 免费
`.quantity` 步进器:两侧带有减号和加号按钮的数字输入框。它不依赖具体产品,可与按钮搭配,用于“加入购物车”行。
在线查看:Quantity Input,位于 购物车数量 页面(在新标签页中打开) 设置,见文档中的 Quantity Input 区块说明
Page Slider 免费
渲染每个页面在其“滑块”面板中指定的滑块,或您选择的某个滑块。幻灯片、效果和高度需在滑块本身中配置。
在线查看:Page Slider,位于 Canvas Slider 页面(在新标签页中打开) 设置,见文档中的 Page Slider 区块说明
Widget Links 免费
使用 .widget_links 标记与样式的页脚链接列。
在线查看:Widget Links,位于 小工具 页面(在新标签页中打开) 设置,见文档中的 Widget Links 区块说明
Wrapper 免费
一个裸 HTML 元素,仅包含您指定的类名,并可容纳其他区块。在设计需要精确包裹元素且不需要额外编辑器类名时使用。
活动
16 个区块,在区块插入器的 Events 分类下列出。
会议日程 任一套餐均包含
按天分标签的议程表,或一排即将开始的活动卡片,均由活动记录生成。
Event Archive Grid 任一套餐均包含
主查询(归档 + 分类)的活动网格。使用 event-entry-grid 局部模板和共享分页。
在线查看:Event Archive Grid,位于 活动 页面(在新标签页中打开) 设置,见文档中的 Event Archive Grid 区块说明
Event Categories 任一套餐均包含
显示分配给当前活动的分类。支持文本、徽章和胶囊样式。仅在 canvas_event 文章类型上渲染。
Event Content 任一套餐均包含
输出当前活动的完整文章内容,经由 the_content 过滤器处理。仅适用于 canvas_event 文章类型。
在线查看:Event Content,位于 Event Single 页面(在新标签页中打开) 设置,见文档中的 Event Content 区块说明
Event Image 任一套餐均包含
显示当前活动的特色图片。仅在 canvas_event 文章类型上渲染。
在线查看:Event Image,位于 Event Single 页面(在新标签页中打开) 设置,见文档中的 Event Image 区块说明
Event Location 任一套餐均包含
显示活动场地的名称和地址,可选添加 Google 地图链接和位置图标。仅在 canvas_event 文章类型中显示。
Event Meta 任一套餐均包含
显示活动元数据:日期、地点、主办方和价格。每个字段可独立切换显示。仅在 canvas_event 文章类型中渲染。
在线查看:Event Meta,位于 活动单页 | 双侧边栏 页面(在新标签页中打开) 设置,见文档中的 Event Meta 区块说明
Event Navigation 任一套餐均包含
显示上一个和下一个活动的导航链接,可配置标签并可选显示缩略图。仅在 canvas_event 文章类型中显示。
在线查看:Event Navigation,位于 活动单页 | 双侧边栏 页面(在新标签页中打开) 设置,见文档中的 Event Navigation 区块说明
Event Organizer 任一套餐均包含
显示活动组织者,可选附带其网站链接和人物图标。仅在 canvas_event 文章类型中渲染。
Event Posts 任一套餐均包含
以响应式卡片网格的形式查询并显示 canvas_event 文章。支持按即将举行、已结束或全部活动进行筛选。可放置在任意页面。
在线查看:Event Posts,位于 活动列表 页面(在新标签页中打开) 设置,见文档中的 Event Posts 区块说明
Event Price 任一套餐均包含
显示活动价格;未设置价格时,显示可配置的免费标签。支持文字和徽章两种样式。仅在 canvas_event 文章类型中渲染。
Related Events 任一套餐均包含
根据共享分类显示相关活动的网格。仅在 canvas_event 文章类型上渲染。
在线查看:Related Events,位于 Spring Music Fest 页面(在新标签页中打开) 设置,见文档中的 Related Events 区块说明
Event Title 任一套餐均包含
以可配置的标题标签显示当前活动标题,可选择是否添加固定链接。仅在 canvas_event 文章类型中显示。
Events Calendar 任一套餐均包含
活动的月视图日历,带有上一月、下一月和今天的控制按钮。每一天都会链接到当天发生的活动。
在线查看:Events Calendar,位于 Events Calendar 页面(在新标签页中打开) 设置,见文档中的 Events Calendar 区块说明
作品集
8 个区块,在区块插入器的“作品集”下列出。
Portfolio Archive Grid 任一套餐均包含
用于主查询(归档 + 分类)的作品集网格。使用 portfolio-entry-grid 局部模板 + #portfolio 叠加网格。
在线查看:Portfolio Archive Grid,位于 作品集 页面(在新标签页中打开) 设置,见文档中的 Portfolio Archive Grid 区块说明
Portfolio Categories 任一套餐均包含
显示分配给当前作品集项目的分类。请在作品集单篇模板内使用。
在线查看:Portfolio Categories,位于 Meridian 品牌形象 页面(在新标签页中打开) 设置,见文档中的 Portfolio Categories 区块说明
Portfolio Content 任一套餐均包含
显示当前作品集项目的完整内容。请在作品集单页模板中使用。
在线查看:Portfolio Content,位于 打开想象力 页面(在新标签页中打开) 设置,见文档中的 Portfolio Content 区块说明
Portfolio Image 任一套餐均包含
显示当前作品集项目的媒体区域:特色图片、图库滑块、项目视频或缩略图网格。请在作品集单篇模板中使用。
在线查看:Portfolio Image,位于 打开想象力 页面(在新标签页中打开) 设置,见文档中的 Portfolio Image 区块说明
Portfolio Meta 任一套餐均包含
展示作品集项目的详细信息:客户、日期、技能和网址。请在作品集单篇模板中使用。
在线查看:Portfolio Meta,位于 打开想象力 页面(在新标签页中打开) 设置,见文档中的 Portfolio Meta 区块说明
Portfolio Navigation 任一套餐均包含
显示上一个和下一个作品集项目的导航链接。请在作品集单页模板中使用。
在线查看:Portfolio Navigation,位于 打开想象力 页面(在新标签页中打开) 设置,见文档中的 Portfolio Navigation 区块说明
Portfolio Related 任一套餐均包含
显示基于共同分类的相关作品集项目。请在作品集单篇模板中使用。
在线查看:Portfolio Related,位于 打开想象力 页面(在新标签页中打开) 设置,见文档中的 Portfolio Related 区块说明
Portfolio Title 任一套餐均包含
显示当前作品集项目标题。请在作品集单页模板中使用。
在线查看:Portfolio Title,位于 Meridian 品牌形象 页面(在新标签页中打开) 设置,见文档中的 Portfolio Title 区块说明
表单
5 个区块,在区块插入器的“表单”分类下列出。
Form 任一套餐均包含
一个可正常工作的表单。在其中放置 Form Field 和 Form Submit 区块:提交内容会经过验证、保存,并通过电子邮件发送。
Form Embed 任一套餐均包含
通过选择表单 ID,即可在网站任意位置嵌入 Canvas 表单。
在线查看:Form Embed,位于 商店首页 页面(在新标签页中打开) 设置,见文档中的 Form Embed 区块说明
Form Field 任一套餐均包含
单个表单输入字段。在 Canvas Form 内使用,用于收集用户输入。
在线查看:Form Field,位于 表单元素 页面(在新标签页中打开) 设置,见文档中的 Form Field 区块说明
Form Submit Button 任一套餐均包含
Canvas 表单的提交按钮。支持样式变体、尺寸、全宽模式和图标。
在线查看:Form Submit Button,位于 表单样式 页面(在新标签页中打开) 设置,见文档中的 Form Submit Button 区块说明
Quick Contact 任一套餐均包含
一个紧凑的“快速报价”联系表单小工具(姓名、邮箱、留言),使用 Canvas 表单 CSS 样式。
在线查看:Quick Contact,位于 小工具 页面(在新标签页中打开) 设置,见文档中的 Quick Contact 区块说明
105 个随演示站点一同提供的区块
部分设计需要只在该设计中才有意义的区块。这些区块始终处于注册状态,因此您导入的演示站点将永久正常显示,但对于未请求这些区块的网站,它们不会出现在插入器中。
文章 72
Academic Posts, Album Tiles, Architecture Projects, Architecture Team, Arrangement Gallery, Artist Bubbles, Bakery Menu, Barber Items, and 64 more.
查看全部 72 个 Posts 区块
WooCommerce 10
Channel Merch, Event Passes, Fashion Cart Part, Fashion Product Part, Fashion Products, Gear Products, Illustrator Prints, Lifestyle Picks, Store Products, eCommerce Products.
内容 7
文章卡片、财务计算器、论坛讨论、论坛成员、论坛主题、食谱分类、租金计算器。
交互 6
音频播放器栏、配置器选项、域名搜索、主机价格、主机滑块、播放曲目按钮。
Canvas 4
牙科常见问题、圆点网格背景、实时交易动态、虚拟卡。
页眉 3
论坛页眉下拉菜单、论坛搜索遮罩层、摄影师菜单。
作品集 3
动态设计作品、作品集网格、视频创作者作品。

主题选项列出 Canvas 注册的每个区块(包括仅限演示站点使用的区块),每个区块都配有一个开关,可将其从插入器中移除,并停止加载其前端资源。
导入演示站点后,其区块会出现在它所构建的页面中,可完全编辑,并拥有与其他 Canvas 区块相同的设置面板。回滚演示站点时,这些区块也会一并移除。
每个区块都具备这些功能
Canvas 为每个注册的区块提供七项设置,其中前四项也适用于核心区块和第三方区块,因为这些设置是添加到编辑器中的,而非添加到我们的区块中。

所选区块的侧边栏。访客所见的每一项都可在此设置,因此无需打开代码视图。
动画
区块进入视口时逐渐显现,可设置速度、延迟和可选的退出动画。动效会遵循访客的“减少动态效果”偏好设置。
自定义 CSS
当核心控件无法实现您的需求时,可为单个区块实例编写 CSS。该 CSS 仅作用于该区块,并会在输出到页面前进行过滤。
自定义属性
在侧边栏为区块的根元素添加数据属性或 ARIA 属性,以便第三方脚本或测试工具能够找到该元素。
显示条件
按登录状态、用户角色、设备尺寸或某个主题选项的值显示或隐藏区块,使同一页面能够服务于多类受众。
全局样式预设
保存一个命名样式,并将其应用到站点中任意位置的区块。之后修改该预设,所有使用它的区块都会随之更新。
183 个区块图案
模式会将一个现成的版块作为普通区块放入页面,之后您可以再编辑。区块内部不包含原始 HTML,因此每个标题、图片、图标和链接都会在侧边栏中作为可控制项保留。
插入器中的图案分为 17 个类别:
图案带有标签而非被锁定:高级图案会在插入器中保留可见的标签,当其中的区块为免费区块时,它会完整渲染。随主题提供的 173 个区块模板和 4 个样式变体同样适用此规则,可在站点编辑器中使用。
