# 适用于 WordPress 区块编辑器的 314 个区块 URL: https://canvaswp.com/zh-hans/blocks/ Updated: 2026-11-05 区块 真正的区块，配有真正的设置面板，可从 WordPress 提供的区块插入器中插入。没有短代码，没有专有画布，也无需再学一套编辑器。访客看到的每一处内容，都可在侧边栏中找到对应控件。 更新于 2026年11月5日 314 区块总数 228 免费版 209 在插入器中 105 仅限演示站点 10 类别 区块库 ## 209 个可直接插入的区块 按系列筛选，或按名称、关键词、区块功能搜索。高级区块已做标注，每个套餐都包含全部区块。 WordPress 提供的插入器，Canvas 区块系列位于核心区块之下。这里没有任何短代码，也不会打开第二个编辑器。 按名称、描述或关键词搜索区块 显示全部 209 ### Posts 共 31 个区块，在区块插入器的“文章”分类下列出。 #### Academic Works 免费 作品集记录以学术设计的方式呈现：图书条目、期刊论文卡片，以及记录在其页面上的详细信息。 #### Agency Works 免费 以代理机构风格的轮播或网格展示作品集项目，或呈现单个项目页面（包括属性、联系按钮和相关项目）。 [在线查看：Agency Works，位于 作品集 页面（在新标签页中打开）](https://demos.canvaswp.com/agency/works/) #### Blog Archive Loop 免费 主查询的博客循环（索引、分类、标签、作者、日期）。使用主题的 blog-entry 局部模板和分页。 [在线查看：Blog Archive Loop，位于 首页 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/) [设置，见文档中的 Blog Archive Loop 区块说明](https://docs.canvaswp.com/block-blog-archive) #### Blog Loop 免费 可组合的博客文章循环。请用 Post Image、Post Title、Post Meta 和 Post Excerpt 区块组合每篇文章的卡片；容器、分页和时间线等外观元素由布局决定。 [在线查看：Blog Loop，位于 博客 | 网格 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog-grid/) [设置，见文档中的 Blog Loop 区块说明](https://docs.canvaswp.com/block-blog-loop) #### Blog Single Post 免费 单篇博客文章布局（标题、元信息、图片、内容、标签、分享、导航、作者、评论、相关内容及侧边栏）。适用于 single.html。 [设置，见文档中的 Blog Single Post 区块说明](https://docs.canvaswp.com/block-blog-single) #### Construction Projects 免费 以作品集网格形式显示 Projects 文章类型中的项目（2 到 5 列），或呈现单个项目页面（属性、联系行动按钮、相关项目）。 [在线查看：Construction Projects，位于 项目 | 5 列 页面（在新标签页中打开）](https://demos.canvaswp.com/construction/projects-5/) #### Illustrator Works 免费 作品集项目以带彩色边框的方形卡片可筛选网格形式呈现，或以单个项目页面的各个部分呈现。 [在线查看：Illustrator Works，位于 首页 页面（在新标签页中打开）](https://demos.canvaswp.com/illustrator/) #### Interior Projects 免费 以可筛选的作品集网格显示 Projects 文章类型中的工作室项目，或渲染单个项目页面（包括详情侧边栏、咨询按钮和相关项目）。 [在线查看：Interior Projects，位于 Stonecroft 页面（在新标签页中打开）](https://demos.canvaswp.com/interior-design/portfolio/stonecroft/) #### Law Firm Cases 免费 以卡片形式展示 Portfolio 文章类型中的案例，或呈现单个案例页面（属性、行动号召、相关案例）。 [在线查看：Law Firm Cases，位于 近期案例 页面（在新标签页中打开）](https://demos.canvaswp.com/law-firm/recent-cases/) #### Photo Shots 免费 以可展开的预览网格展示 Shots 文章类型中的照片，或渲染单个作品页面（包括画框、拍摄细节、咨询按钮和相关作品）。 [在线查看：Photo Shots，位于 探索 页面（在新标签页中打开）](https://demos.canvaswp.com/photography/explore/) #### Post Archive Index 免费 每条记录以日期和标题列出，可选择按年份和月份分组，即“已发布全部内容”索引。 [设置，见文档中的 Post Archive Index 区块说明](https://docs.canvaswp.com/block-post-archive-index) #### Post Author 免费 显示当前文章作者简介卡片，包括头像、显示名称和个人简介。 [在线查看：Post Author，位于 慢速网络：为何最佳阅读体验正变得更加安静 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [设置，见文档中的 Post Author 区块说明](https://docs.canvaswp.com/block-post-author) #### Post Comments 免费 渲染 WordPress 评论模板，包括评论列表和提交表单。 [在线查看：Post Comments，位于 慢速网络：为何最佳阅读体验正变得更加安静 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [设置，见文档中的 Post Comments 区块说明](https://docs.canvaswp.com/block-post-comments) #### Post Content 免费 显示当前文章的完整内容，并运行所有内容过滤器，包括短代码和嵌入内容。 [在线查看：Post Content，位于 这是一篇带有预览图像的标准文章 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2021/02/10/blog-single/) [设置，见文档中的 Post Content 区块说明](https://docs.canvaswp.com/block-post-content) #### Post Date 免费 仅显示文章的发布日期，用于元信息列表无法呈现的署名行。 [在线查看：Post Date，位于 慢速网络：为何最佳阅读体验正变得更加安静 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [设置，见文档中的 Post Date 区块说明](https://docs.canvaswp.com/block-post-date) #### Post Excerpt 免费 以词为单位截取当前文章的摘要，长度可自行设置。 [在线查看：Post Excerpt，位于 博客 | 网格 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog-grid/) [设置，见文档中的 Post Excerpt 区块说明](https://docs.canvaswp.com/block-post-excerpt) #### Post Image 免费 显示当前文章的特色图片，可设置尺寸，并可选择添加固定链接。 [在线查看：Post Image，位于 博客 | 混合信息流 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog-mixed-feed/) [设置，见文档中的 Post Image 区块说明](https://docs.canvaswp.com/block-post-image) #### Post Media 免费 当前文章的入口媒体框：根据文章格式，显示其特色图片、视频或音频嵌入、图库滑块、缩略图网格、引用、链接或状态卡片。 [在线查看：Post Media，位于 博客 | 时间线左侧边栏 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog-timeline-left-sidebar/) [设置，见文档中的 Post Media 区块说明](https://docs.canvaswp.com/block-post-media) #### Post Meta 免费 显示可配置的文章元信息，包括日期、作者、分类和评论数。 [在线查看：Post Meta，位于 博客 | 混合信息流 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog-mixed-feed/) [设置，见文档中的 Post Meta 区块说明](https://docs.canvaswp.com/block-post-meta) #### Post Navigation 免费 显示当前文章的上一篇和下一篇文章导航链接。 [在线查看：Post Navigation，位于 慢速网络：为何最佳阅读体验正变得更加安静 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [设置，见文档中的 Post Navigation 区块说明](https://docs.canvaswp.com/block-post-navigation) #### Post Read More 免费 输出一个指向当前文章固定链接的“阅读更多”链接或按钮。 [在线查看：Post Read More，位于 首页 页面（在新标签页中打开）](https://demos.canvaswp.com/speaker/) [设置，见文档中的 Post Read More 区块说明](https://docs.canvaswp.com/block-post-read-more) #### Post Reading Bar 免费 显示当前文章的阅读时间、字号、打印以及滚动分享控件。 [在线查看：Post Reading Bar，位于 这是一篇带有预览图像的标准文章 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2021/02/10/blog-single/) [设置，见文档中的 Post Reading Bar 区块说明](https://docs.canvaswp.com/block-post-reading-bar) #### Post Reading Time 免费 根据正文计算的阅读时长。 [在线查看：Post Reading Time，位于 慢速网络：为何最佳阅读体验正变得更加安静 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [设置，见文档中的 Post Reading Time 区块说明](https://docs.canvaswp.com/block-post-reading-time) #### Post Related 免费 以网格形式显示与当前文章属于同一分类的相关文章。 [在线查看：Post Related，位于 慢速网络：为何最佳阅读体验正变得更加安静 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) [设置，见文档中的 Post Related 区块说明](https://docs.canvaswp.com/block-post-related) #### Post Share 免费 显示当前文章的社交分享链接，可配置分享平台、样式和尺寸。 [在线查看：Post Share，位于 Event Single 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/event-single/) [设置，见文档中的 Post Share 区块说明](https://docs.canvaswp.com/block-post-share) #### Post Terms 免费 以文本、徽章、胶囊、标签云或行内分类等样式，显示当前文章的分类项（分类或标签）。 [在线查看：Post Terms，位于 博客 | 混合信息流 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog-mixed-feed/) [设置，见文档中的 Post Terms 区块说明](https://docs.canvaswp.com/block-post-terms) #### Post Title 免费 以可配置的标题标签显示当前文章标题，并可选择添加固定链接。 [在线查看：Post Title，位于 博客 | 混合信息流 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog-mixed-feed/) [设置，见文档中的 Post Title 区块说明](https://docs.canvaswp.com/block-post-title) #### Post Table of Contents 免费 文章自身标题的索引，带有可用的锚点，以及会随读者位置移动的标记。 [在线查看：Post Table of Contents，位于 经得起品牌重塑的设计令牌实用指南 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/03/05/design-tokens-that-survive-a-rebrand/) [设置，见文档中的 Post Table of Contents 区块说明](https://docs.canvaswp.com/block-post-toc) #### Posts 免费 以网格、列表、瀑布流和时间线等多种布局查询并显示文章。支持按分类、标签、自定义文章类型筛选，并支持排序。 [在线查看：Posts，位于 博客 | 网格 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog-grid/) [设置，见文档中的 Posts 区块说明](https://docs.canvaswp.com/block-posts) #### Recent Comments 免费 展示全站最新已批准的评论，每条均附带评论者的头像、姓名和开头文字，并链接至对应的评论串。 [在线查看：Recent Comments，位于 小工具 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/widgets/) [设置，见文档中的 Recent Comments 区块说明](https://docs.canvaswp.com/block-recent-comments) #### Resume Works 免费 以紧凑列表或磁贴网格的形式显示 Works 文章类型中的项目，或渲染单个项目页面（属性、CTA、相关项目）。 [在线查看：Resume Works，位于 作品 页面（在新标签页中打开）](https://demos.canvaswp.com/resume/works/) ### 内容 30 个区块，位于区块插入器中的“内容”类别下。 #### Background Video / Audio 免费 一种自托管的循环播放视频或音频层，用于主视觉区、区块背景或定制播放器。它仅输出媒体元素，因此定位该元素的包装容器仍由你自行控制。 [在线查看：Background Video / Audio，位于 媒体操作 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/media-actions/) [设置，见文档中的 Background Video / Audio 区块说明](https://docs.canvaswp.com/block-background-video) #### Cascading Images 任一套餐均包含 分层图片组合，每张图片可单独设置平移、旋转、缩放、z-index、动画延迟，并可选添加装饰性背景形状。 [在线查看：Cascading Images，位于 Cascading Images 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/cascading-images/) [设置，见文档中的 Cascading Images 区块说明](https://docs.canvaswp.com/block-cascading-images) #### 图表 任一套餐均包含 通过您提供的数据集绘制图表，让报告或价格对比中的数据一目了然。图表类型、数据和标签均来自您输入的配置。 [在线查看：图表，位于 服务 - 布局 1 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/services/) [设置，见文档中的 图表 区块说明](https://docs.canvaswp.com/block-chart) #### Circle Stack 任一套餐均包含 横向排列的圆形头像、图标或文字徽章，适合用于团队展示、社交证明和关注人数统计。 [在线查看：Circle Stack，位于 Circle Stacks 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/circle-stack/) [设置，见文档中的 Circle Stack 区块说明](https://docs.canvaswp.com/block-circle-stack) #### Clients 免费 以响应式网格或 owl-carousel 形式展示客户、合作伙伴或品牌徽标，可选择添加链接并支持灯箱效果。 [在线查看：Clients，位于 Clients 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/clients/) [设置，见文档中的 Clients 区块说明](https://docs.canvaswp.com/block-clients) #### Data Table 任一套餐均包含 以行和列的形式排列结构化信息，例如规格列表或套餐对比，表头可供访客排序，底部可选添加汇总行。 [在线查看：Data Table，位于 用户资料 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/profile/) [设置，见文档中的 Data Table 区块说明](https://docs.canvaswp.com/block-data-table) #### Map 免费 Google 地图或 OpenStreetMap 地图，支持自定义标记、缩放级别，以及在 Google 地图上覆盖地图类型和样式设置。 [在线查看：Map，位于 地图 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/maps/) [设置，见文档中的 Map 区块说明](https://docs.canvaswp.com/block-google-map) #### Hover Card 免费 图片卡片，鼠标悬停时会以 3D 效果倾斜，其标题和分类说明会向观看者方向浮起。 [在线查看：Hover Card，位于 悬停视差 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/hover-parallax/) [设置，见文档中的 Hover Card 区块说明](https://docs.canvaswp.com/block-hover-card) #### Icon Browser 免费 可搜索的参考网格，展示已启用图标包中的所有图标。 [在线查看：Icon Browser，位于 图标 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/icons/) [设置，见文档中的 Icon Browser 区块说明](https://docs.canvaswp.com/block-icon-browser) #### Inline SVG 免费 通过 SVG 路径数据绘制的矢量图标，侧边栏控件可设置尺寸、颜色、viewBox 和各图层不透明度。 [在线查看：Inline SVG，位于 定价 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/pricing/) [设置，见文档中的 Inline SVG 区块说明](https://docs.canvaswp.com/block-inline-svg) #### Link Tiles 免费 由图标和标签组成的网格磁贴，每个磁贴链接到一个页面。指向不存在页面的磁贴会被省略。 [在线查看：Link Tiles，位于 列表组与卡片 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/lists-cards/) [设置，见文档中的 Link Tiles 区块说明](https://docs.canvaswp.com/block-link-tiles) #### Lists & Cards 免费 基于 Bootstrap 的列表组和卡片，提供多种样式、颜色和布局。 [在线查看：Lists & Cards，位于 列表组与卡片 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/lists-cards/) [设置，见文档中的 Lists & Cards 区块说明](https://docs.canvaswp.com/block-list-cards) #### Media Embed 免费 在页面中放置视频或音频播放器，内容可来自托管服务、您上传的文件，或服务商提供的嵌入地址，并可按所选宽高比调整尺寸。 [在线查看：Media Embed，位于 媒体嵌入 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/media-embeds/) [设置，见文档中的 Media Embed 区块说明](https://docs.canvaswp.com/block-media-embed) #### Nav Tree 免费 缩进的多级链接树：侧边面板或文档侧边栏所使用的导航列表。 [设置，见文档中的 Nav Tree 区块说明](https://docs.canvaswp.com/block-nav-tree) #### Navbar 免费 可折叠导航栏，包含品牌标识、汉堡菜单切换按钮、下拉链接，以及可选的末尾搜索表单、按钮或文本。 [在线查看：Navbar，位于 导航 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/navigation/) [设置，见文档中的 Navbar 区块说明](https://docs.canvaswp.com/block-navbar) #### 浮层内容 免费 覆盖层中的一个内容层：可对齐，可选择添加遮罩，并带有触发图标和嵌套区块。 [在线查看：浮层内容，位于 项目覆盖层 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/item-overlays/) [设置，见文档中的 浮层内容 区块说明](https://docs.canvaswp.com/block-overlay-content) #### Overlay Item 免费 图片卡片，上层叠加覆盖层：包括徽章、色调层，以及一个或多个覆盖内容层。 [在线查看：Overlay Item，位于 项目覆盖层 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/item-overlays/) [设置，见文档中的 Overlay Item 区块说明](https://docs.canvaswp.com/block-overlay-item) #### 页面标题 免费 页面标题 / 首屏横幅栏。在其中放入标题、副标题和面包屑导航，并可设置对齐方式、背景图片、视差效果以及深色配色方案。 [在线查看：页面标题，位于 页面标题左对齐布局 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/page-title/) [设置，见文档中的 页面标题 区块说明](https://docs.canvaswp.com/block-page-title) #### Page Title Buttons 免费 页面标题区域中的操作按钮。动态模式下读取每个页面各自的按钮，或渲染你在此处编写的按钮。没有链接的按钮将成为滚动触发器。 [在线查看：Page Title Buttons，位于 按钮 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/buttons/) [设置，见文档中的 Page Title Buttons 区块说明](https://docs.canvaswp.com/block-page-title-buttons) #### Particles 免费 用于某个区域的动态粒子背景层：线状网络、星空、气泡、雪花或低多边形。 [在线查看：Particles，位于 Particles 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/particles/) [设置，见文档中的 Particles 区块说明](https://docs.canvaswp.com/block-particles) #### Preloader 免费 一种 CSS 动画加载指示器，可使用设计系统中的任一加载器样式。 [在线查看：Preloader，位于 预加载器 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/preloaders/) [设置，见文档中的 Preloader 区块说明](https://docs.canvaswp.com/block-preloader) #### Pricing Switcher 任一套餐均包含 切换开关，用于在成对的价格表区块之间控制月付/年付（或任意双状态）价格的显示。 [在线查看：Pricing Switcher，位于 定价 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/pricing/) [设置，见文档中的 Pricing Switcher 区块说明](https://docs.canvaswp.com/block-pricing-switcher) #### Q&A Item 免费 一个问题及其答案，各自带有独立标记：这是访谈的基本构建单元。 [在线查看：Q&A Item，位于 Jane Doe 谈二十年的字体设计 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/02/11/jane-doe-on-building-type/) [设置，见文档中的 Q&A Item 区块说明](https://docs.canvaswp.com/block-qa-item) #### Rounded Skill 免费 一个圆形技能环，会按其百分比填充，中间可显示数值、自定义文字、图标或计数器。 [在线查看：Rounded Skill，位于 饼图与技能 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/pie-skills/) [设置，见文档中的 Rounded Skill 区块说明](https://docs.canvaswp.com/block-rounded-skill) #### Scroll Arrow 任一套餐均包含 用于首屏区域的动态向下滚动箭头：平滑滚动到目标区域锚点。 [在线查看：Scroll Arrow，位于 圣诞促销商店 页面（在新标签页中打开）](https://demos.canvaswp.com/xmas/) [设置，见文档中的 Scroll Arrow 区块说明](https://docs.canvaswp.com/block-scroll-arrow) #### Star Rating 免费 用于设置单一评分的星级评分。支持半星、自定义图标和可选的包裹元素。 [在线查看：Star Rating，位于 结果 页面（在新标签页中打开）](https://demos.canvaswp.com/beauty-kit/results/) [设置，见文档中的 Star Rating 区块说明](https://docs.canvaswp.com/block-star-rating) #### 客户评价 免费 以网格、轮播或对话气泡的形式展示客户的评价，每条评价都附有作者、照片和星级评分。 [在线查看：客户评价，位于 推荐评价与 Twitter 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/testimonials-twitter/) [设置，见文档中的 客户评价 区块说明](https://docs.canvaswp.com/block-testimonials) #### 缩略图 免费 图片缩略图网格，带有悬停效果和可选标题。支持灯箱和链接叠加层。 [设置，见文档中的 缩略图 区块说明](https://docs.canvaswp.com/block-thumbnails) #### Ticker 免费 滚动公告条，可配置项目、方向、速度和样式。 [在线查看：Ticker，位于 滚动字幕 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/ticker/) [设置，见文档中的 Ticker 区块说明](https://docs.canvaswp.com/block-ticker) #### Twitter Feed 免费 展示某个账号最新推文的滚动动态，页面加载时获取。可选择账号、显示条数以及小组件的排版方式。 [在线查看：Twitter Feed，位于 小工具 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/widgets/) [设置，见文档中的 Twitter Feed 区块说明](https://docs.canvaswp.com/block-twitter-feed) ### Canvas 29 个区块，列在区块插入器的 Canvas 分类下。 #### Alert 免费 提示与通知框，采用 Bootstrap alert 或 Canvas style-msg 系统。支持填充、边框和扩展等样式，可选添加图标和关闭按钮。 [在线查看：Alert，位于 样式盒子 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/style-boxes/) [设置，见文档中的 Alert 区块说明](https://docs.canvaswp.com/block-alert) #### 按钮 免费 功能完备的按钮，提供多种样式变体、尺寸、形状、颜色、图标、悬停效果和阴影选项。 [在线查看：按钮，位于 按钮 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/buttons/) [设置，见文档中的 按钮 区块说明](https://docs.canvaswp.com/block-button) #### Code Highlight 任一套餐均包含 基于 Prism.js 的语法高亮代码区块。支持 15+ 种语言，并可选配剪贴板复制按钮。 [在线查看：Code Highlight，位于 代码高亮器 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/code-highlighter/) [设置，见文档中的 Code Highlight 区块说明](https://docs.canvaswp.com/block-code-highlight) #### Counter 免费 带图标、前缀/后缀和说明标签的动态数字计数器。 [在线查看：Counter，位于 计数器 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/counters/) [设置，见文档中的 Counter 区块说明](https://docs.canvaswp.com/block-counter) #### Divider 免费 水平分隔线，支持可选图标、样式变体、对齐方式、宽度预设，以及滚动到链接功能。 [在线查看：Divider，位于 分隔线 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/dividers/) [设置，见文档中的 Divider 区块说明](https://docs.canvaswp.com/block-divider) #### Dropcap 免费 带样式的首字下沉字母，并附带段落文字。支持方框、边框、圆形和带边框圆形等样式，可设置在左侧或右侧。 [在线查看：Dropcap，位于 标题与首字下沉 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/headings-dropcaps/) [设置，见文档中的 Dropcap 区块说明](https://docs.canvaswp.com/block-dropcap) #### 标题 免费 Styled heading with optional subtitle. Supports Heading Block, Title Block, Emphasis Title, and Fancy Title types. [在线查看：标题，位于 标题与首字下沉 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/headings-dropcaps/) [设置，见文档中的 标题 区块说明](https://docs.canvaswp.com/block-heading) #### Highlight 免费 高亮文本，支持多种可配置的样式变体，包括标记、下划线、渐变、描边和纯文本。支持可选的前后环绕文案，以及任意块级 HTML 标签。 [设置，见文档中的 Highlight 区块说明](https://docs.canvaswp.com/block-highlight) #### Icon Box 免费 带图标、标题和描述的特色框。支持多种图标样式、尺寸、布局和悬停效果。 [在线查看：Icon Box，位于 精选卡片 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/featured-boxes/) [设置，见文档中的 Icon Box 区块说明](https://docs.canvaswp.com/block-icon-box) #### Icon List 免费 带有重复项的图标列表。每个项目包含一个图标（CSS 类）、文字标签和可选链接。支持默认、大号和超大号尺寸变体。 [在线查看：Icon List，位于 图标列表 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/icon-lists/) [设置，见文档中的 Icon List 区块说明](https://docs.canvaswp.com/block-icon-list) #### Login Form 任一套餐均包含 显示带有 Canvas 样式的 WordPress 登录表单，并向已登录用户显示欢迎信息。 [在线查看：Login Form，位于 登录与注册 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/login-register/) [设置，见文档中的 Login Form 区块说明](https://docs.canvaswp.com/block-login-form) #### 通知 免费 显示轻提示通知，可通过点击按钮触发，也可在页面加载时自动显示。 [在线查看：通知，位于 通知 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/notifications/) [设置，见文档中的 通知 区块说明](https://docs.canvaswp.com/block-notification) #### Page Title Breadcrumbs 免费 为当前页面或文章显示面包屑导航（首页 > 上级 > 当前页）。 [在线查看：Page Title Breadcrumbs，位于 页面标题左对齐布局 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/page-title/) [设置，见文档中的 Page Title Breadcrumbs 区块说明](https://docs.canvaswp.com/block-page-title-breadcrumbs) #### Page Title Heading 免费 以标题形式呈现页面或文章标题。支持动态（上下文）和静态（字面值）两种来源模式。 [在线查看：Page Title Heading，位于 页面标题左对齐布局 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/page-title/) [设置，见文档中的 Page Title Heading 区块说明](https://docs.canvaswp.com/block-page-title-heading) #### Page Title Subtitle 免费 渲染页面副标题。在动态模式下读取 _canvas_page_subtitle 元数据，在静态模式下显示自定义文本。 [在线查看：Page Title Subtitle，位于 页面标题左对齐布局 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/page-title/) [设置，见文档中的 Page Title Subtitle 区块说明](https://docs.canvaswp.com/block-page-title-subtitle) #### Plain Image 免费 无 figure 包裹的裸 img 元素，可精确控制类名，可选链接，并可选配视网膜（2x）srcset 图像对。 [在线查看：Plain Image，位于 Shape Dividers 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/shape-dividers/) [设置，见文档中的 Plain Image 区块说明](https://docs.canvaswp.com/block-plain-image) #### Portfolio Excerpt 任一套餐均包含 显示当前作品集项目的精简摘要。 [在线查看：Portfolio Excerpt，位于 打开想象力 页面（在新标签页中打开）](https://demos.canvaswp.com/project/portfolio/open-imagination/) [设置，见文档中的 Portfolio Excerpt 区块说明](https://docs.canvaswp.com/block-portfolio-excerpt) #### Pricing Table 任一套餐均包含 灵活的定价框卡片。支持默认、简单、极简和扩展四种布局，可选配定价切换器、功能列表和 CTA 按钮。 [在线查看：Pricing Table，位于 定价 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/pricing/) [设置，见文档中的 Pricing Table 区块说明](https://docs.canvaswp.com/block-pricing-table) #### Process Steps 免费 带虚线连接线的编号或图标步骤指示器。可选启用 Bootstrap 5 标签页内容及上一步/下一步导航。 [在线查看：Process Steps，位于 Process Steps 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/process-steps/) [设置，见文档中的 Process Steps 区块说明](https://docs.canvaswp.com/block-process-steps) #### Progress Bar 免费 带动画效果的技能/进度条，附带百分比计数器，支持水平或垂直方向，并提供 Bootstrap 条纹图案。 [在线查看：Progress Bar，位于 进度条与技能 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/progress-skills/) [设置，见文档中的 Progress Bar 区块说明](https://docs.canvaswp.com/block-progress-bar) #### Promo Box 免费 带标题、副标题和 CTA 按钮的推广号召框。支持默认、边框、浅色和深色样式。 [在线查看：Promo Box，位于 宣传框 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/promo-boxes/) [设置，见文档中的 Promo Box 区块说明](https://docs.canvaswp.com/block-promo-box) #### 引言 免费 引用区块，提供默认边框、图标引号和对话气泡三种样式。支持反向对齐、引用来源页脚，以及可选的边框和图标颜色覆盖。 [在线查看：引言，位于 引语与引用块 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/quotes-blockquotes/) [设置，见文档中的 引言 区块说明](https://docs.canvaswp.com/block-quote) #### Read More 免费 可折叠的内容区域，通过“阅读更多”链接触发带动画效果的展开与收起。 [在线查看：Read More，位于 Read More 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/read-more/) [设置，见文档中的 Read More 区块说明](https://docs.canvaswp.com/block-read-more) #### Register Form 任一套餐均包含 采用 Canvas 样式的用户注册表单。需要先在 WordPress 设置中启用用户注册功能。 [在线查看：Register Form，位于 登录与注册 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/login-register/) [设置，见文档中的 Register Form 区块说明](https://docs.canvaswp.com/block-register-form) #### Shape Divider 免费 用于板块过渡的 SVG 装饰形状分隔符。 [在线查看：Shape Divider，位于 Shape Dividers 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/shape-dividers/) [设置，见文档中的 Shape Divider 区块说明](https://docs.canvaswp.com/block-shape-divider) #### Social Icons 免费 社交图标链接组，带有悬停动画，提供多种样式、尺寸，并可选择固定定位。 [在线查看：Social Icons，位于 Social Icons 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/social-icons/) [设置，见文档中的 Social Icons 区块说明](https://docs.canvaswp.com/block-social-icons) #### Stat List 免费 数据列表，每项由加粗的数值和简短标签组成，例如从业年限、产品发布数或获奖数。 [在线查看：Stat List，位于 团队 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/team/) [设置，见文档中的 Stat List 区块说明](https://docs.canvaswp.com/block-stat-list) #### Styled Icon 免费 独立图标，提供填充、带边框或简约三种样式，多种形状变体、颜色选项及可选链接。 [在线查看：Styled Icon，位于 样式图标 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/styled-icons/) [设置，见文档中的 Styled Icon 区块说明](https://docs.canvaswp.com/block-styled-icon) #### Team Member 免费 一个团队成员，包含照片、姓名、职位、简介、社交链接和数据，可呈现为卡片、名单行、数据卡片、堆叠卡片或负责人肖像。 [在线查看：Team Member，位于 团队 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/team/) [设置，见文档中的 Team Member 区块说明](https://docs.canvaswp.com/block-team-card) ### 交互 25 个区块，在区块插入器的“交互”类别下列出。 #### Accordion 免费 堆叠带标题的面板，可展开和收起，让大量问答或参考资料集中在一页内，访客只需展开所需的部分。 [在线查看：Accordion，位于 切换与手风琴 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/toggles-accordions/) [设置，见文档中的 Accordion 区块说明](https://docs.canvaswp.com/block-accordion) #### AJAX Button 免费 通过 AJAX 将外部内容加载到容器中的按钮。支持追加、前置和替换三种插入模式。 [在线查看：AJAX Button，位于 AJAX Button 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/ajax-button/) [设置，见文档中的 AJAX Button 区块说明](https://docs.canvaswp.com/block-ajax-button) #### 轮播 免费 响应式 owl-carousel 滑块，支持按断点设置显示数量、自动播放、导航箭头、圆点、灯箱以及图片懒加载。 [在线查看：轮播，位于 轮播 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/carousel/) [设置，见文档中的 轮播 区块说明](https://docs.canvaswp.com/block-carousel) #### 倒计时 任一套餐均包含 由 jQuery countdown 插件驱动的倒计时或正计时器。 [在线查看：倒计时，位于 计数器 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/counters/) [设置，见文档中的 倒计时 区块说明](https://docs.canvaswp.com/block-countdown) #### Flip Card 任一套餐均包含 一个 3D 翻转卡片，包含正面和背面，两面各有独立背景，鼠标悬停时翻转。 [在线查看：Flip Card，位于 Flip Cards 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/flip-cards/) [设置，见文档中的 Flip Card 区块说明](https://docs.canvaswp.com/block-flip-card) #### Gallery 免费 带有瀑布流支持、可配置列数、间距控制和可选灯箱功能的图片库。 [在线查看：Gallery，位于 Gallery 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/gallery/) [设置，见文档中的 Gallery 区块说明](https://docs.canvaswp.com/block-gallery) #### Cookie Consent 免费 Cookie 同意横幅，包含隐私偏好设置弹窗和按服务单独设置的同意开关。 [在线查看：Cookie Consent，位于 GDPR 布局 2 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/gdpr-layout-2/) [设置，见文档中的 Cookie Consent 区块说明](https://docs.canvaswp.com/block-gdpr-consent) #### Hover 3D 免费 卡片，鼠标移动时产生 CSS 透视倾斜效果，由主题 JS 模块驱动。 [设置，见文档中的 Hover 3D 区块说明](https://docs.canvaswp.com/block-hover-3d) #### Image Compare 任一套餐均包含 前后对比图片滑块，可配置方向、偏移量、手柄样式和两侧标签。 [在线查看：Image Compare，位于 Image Compare 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/image-compare/) [设置，见文档中的 Image Compare 区块说明](https://docs.canvaswp.com/block-image-compare) #### Image Hotspot 任一套餐均包含 带有定位热点标记的交互式图片，悬停或点击即可显示工具提示。 [在线查看：Image Hotspot，位于 图片热点 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/image-hotspot/) [设置，见文档中的 Image Hotspot 区块说明](https://docs.canvaswp.com/block-image-hotspot) #### Image Slider 任一套餐均包含 基于 FlexSlider 的图片滑块，支持滑动或淡入淡出动画、自动播放、箭头、圆点、缩略图导航和触摸滑动。 [在线查看：Image Slider，位于 图片滑块 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/image-sliders/) [设置，见文档中的 Image Slider 区块说明](https://docs.canvaswp.com/block-image-slider) #### Modal 任一套餐均包含 通过按钮、链接触发模态/弹出对话框，或在页面加载时自动打开。 [在线查看：Modal，位于 模态框与弹出框 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/modal-popovers/) [设置，见文档中的 Modal 区块说明](https://docs.canvaswp.com/block-modal) #### 导航 免费 标签页、胶囊式与下划线导航条，带有激活和禁用状态，并支持一级下拉菜单。 [在线查看：导航，位于 导航 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/navigation/) [设置，见文档中的 导航 区块说明](https://docs.canvaswp.com/block-nav) #### Off-Canvas 免费 一种由按钮或链接打开的 Bootstrap 5 离屏滑动面板（起始 / 末尾 / 顶部 / 底部）。 [在线查看：Off-Canvas，位于 Bootstrap Off-Canvas 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/offcanvas/) [设置，见文档中的 Off-Canvas 区块说明](https://docs.canvaswp.com/block-off-canvas) #### Pagination 免费 分页行：支持圆形、圆角、胶囊形、3D、透明或按钮样式，提供三种尺寸和任意对齐方式。 [在线查看：Pagination，位于 分页与进度条 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/pagination-progress/) [设置，见文档中的 Pagination 区块说明](https://docs.canvaswp.com/block-pagination) #### Parallax Image 任一套餐均包含 全宽视差图片区域，可选叠加层与内容。 [在线查看：Parallax Image，位于 视差元素 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/parallax-elements/) [设置，见文档中的 Parallax Image 区块说明](https://docs.canvaswp.com/block-parallax-image) #### Scroll Reveal 任一套餐均包含 随着用户向下滚动页面，内容以动画形式逐渐显示。 [设置，见文档中的 Scroll Reveal 区块说明](https://docs.canvaswp.com/block-scroll-reveal) #### Slider 任一套餐均包含 选择即可在站点任意位置嵌入 Canvas 滑块。幻灯片、切换效果、导航和高度均在滑块本身中设置。 [在线查看：Slider，位于 家居生活与室内装饰 页面（在新标签页中打开）](https://demos.canvaswp.com/home-living/) [设置，见文档中的 Slider 区块说明](https://docs.canvaswp.com/block-slider) #### Tab Strip 免费 一个标签条，其面板是页面其他位置的普通区块。 [在线查看：Tab Strip，位于 用户资料 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/profile/) [设置，见文档中的 Tab Strip 区块说明](https://docs.canvaswp.com/block-tab-nav) #### Tabs 免费 将相关内容拆分到带标签的选项卡中，让访客每次只阅读一个部分，使较长的对比页或规格页保持简短，便于快速浏览。 [在线查看：Tabs，位于 Tabs 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/tabs/) [设置，见文档中的 Tabs 区块说明](https://docs.canvaswp.com/block-tabs) #### Text Fill Scroll 任一套餐均包含 元素滚动进入视图时，文字颜色逐渐填充。 [设置，见文档中的 Text Fill Scroll 区块说明](https://docs.canvaswp.com/block-text-fill-scroll) #### Text Rotator 免费 在标题元素中呈现动态轮换或打字机效果的文字。 [在线查看：Text Rotator，位于 标题与首字下沉 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/headings-dropcaps/) [设置，见文档中的 Text Rotator 区块说明](https://docs.canvaswp.com/block-text-rotator) #### 切换 免费 将一段内容隐藏在标题之后，访客点击标题即可展开。适用于较长的答案，或一组默认不应占用页面空间的条款。 [在线查看：切换，位于 切换与手风琴 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/toggles-accordions/) [设置，见文档中的 切换 区块说明](https://docs.canvaswp.com/block-toggle) #### Video Facade 免费 延迟加载的视频嵌入，先显示缩略图；iframe 仅在点击后加载，以提升页面速度。 [设置，见文档中的 Video Facade 区块说明](https://docs.canvaswp.com/block-video-facade) #### YouTube Background 免费 YouTube 视频以静音的氛围背景形式播放，位于叠加内容之后。 [在线查看：YouTube Background，位于 活动单页 | 全宽视频 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/event-single-full-width-video/) [设置，见文档中的 YouTube Background 区块说明](https://docs.canvaswp.com/block-youtube-bg) ### WooCommerce 24 个区块，在区块插入器中归类于 WooCommerce 下。 #### Conference Tickets 任一套餐均包含 用于门票类商品分类的价格框，每个都带有数量选择框和实时加入购物车链接。 [在线查看：Conference Tickets，位于 门票 页面（在新标签页中打开）](https://demos.canvaswp.com/conference/tickets/) [设置，见文档中的 Conference Tickets 区块说明](https://docs.canvaswp.com/block-conference-tickets) #### Store Price Filter 任一套餐均包含 双滑块价格范围控件，可直接对商品网格进行筛选。 [在线查看：Store Price Filter，位于 带筛选器的商店 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/shop-filter/) [设置，见文档中的 Store Price Filter 区块说明](https://docs.canvaswp.com/block-store-price-filter) #### Wishlist 免费 购物者收藏的商品，并显示价格、库存及加入购物车按钮。将其放在主题选项中为心愿单选定的页面上。 [设置，见文档中的 Wishlist 区块说明](https://docs.canvaswp.com/block-wishlist) #### Wishlist Button 免费 将当前产品保存到顾客的愿望清单。可在产品模板和产品卡片中使用。 [设置，见文档中的 Wishlist Button 区块说明](https://docs.canvaswp.com/block-wishlist-button) #### Add to Cart 任一套餐均包含 显示当前商品的 WooCommerce 加入购物车表单，可选包含数量输入框。 [在线查看：Add to Cart，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 Add to Cart 区块说明](https://docs.canvaswp.com/block-woo-add-to-cart) #### 购物车表格 任一套餐均包含 显示 WooCommerce 购物车表格，包括商品行、数量和总计。 [在线查看：购物车表格，位于 购物车 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/cart/) [设置，见文档中的 购物车表格 区块说明](https://docs.canvaswp.com/block-woo-cart-table) #### Cart Totals 任一套餐均包含 显示 WooCommerce 购物车合计面板，包括小计、运费和结账按钮。 [在线查看：Cart Totals，位于 购物车 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/cart/) [设置，见文档中的 Cart Totals 区块说明](https://docs.canvaswp.com/block-woo-cart-totals) #### Checkout Billing 任一套餐均包含 显示 WooCommerce 结账账单地址表单。 [设置，见文档中的 Checkout Billing 区块说明](https://docs.canvaswp.com/block-woo-checkout-billing) #### Checkout Order Review 任一套餐均包含 显示 WooCommerce 结账页订单核对摘要，包含商品明细与总计。 [设置，见文档中的 Checkout Order Review 区块说明](https://docs.canvaswp.com/block-woo-checkout-order) #### 交叉销售 任一套餐均包含 显示当前 WooCommerce 购物车中的交叉销售商品。仅当购物车处于活动状态且包含交叉销售商品时才会渲染。 [在线查看：交叉销售，位于 购物车 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/cart/) [设置，见文档中的 交叉销售 区块说明](https://docs.canvaswp.com/block-woo-cross-sells) #### WooCommerce Notices 任一套餐均包含 显示 WooCommerce 通知：错误提示、成功消息或信息提示。 [在线查看：WooCommerce Notices，位于 购物车 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/cart/) [设置，见文档中的 WooCommerce Notices 区块说明](https://docs.canvaswp.com/block-woo-notices) #### Product Carousel 任一套餐均包含 以可滚动的 owl-carousel 轮播形式显示 WooCommerce 商品。支持自动播放、导航箭头、圆点指示器和响应式断点。 [在线查看：Product Carousel，位于 轮播 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/carousel/) [设置，见文档中的 Product Carousel 区块说明](https://docs.canvaswp.com/block-woo-product-carousel) #### Product Categories 任一套餐均包含 以响应式卡片网格展示 WooCommerce 商品分类，包含缩略图、名称和商品数量。 [在线查看：Product Categories，位于 蓝色圆领 T 恤 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/blue-round-neck-tshirt/) [设置，见文档中的 Product Categories 区块说明](https://docs.canvaswp.com/block-woo-product-categories) #### Product Gallery Linker 任一套餐均包含 缩略图列表可让商品图库轮播滑动至您点击的图片。 [在线查看：Product Gallery Linker，位于 男士飞行员太阳镜 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/men-aviator-sunglasses/) [设置，见文档中的 Product Gallery Linker 区块说明](https://docs.canvaswp.com/block-woo-product-gallery-linker) #### Product Images 任一套餐均包含 显示 WooCommerce 商品的特色图片和可选的图库缩略图。 [在线查看：Product Images，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 Product Images 区块说明](https://docs.canvaswp.com/block-woo-product-images) #### Product Meta 任一套餐均包含 显示商品元信息卡片：SKU、分类和标签。 [在线查看：Product Meta，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 Product Meta 区块说明](https://docs.canvaswp.com/block-woo-product-meta) #### Product Price 任一套餐均包含 显示 WooCommerce 商品价格，包括促销价和货币格式。 [在线查看：Product Price，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 Product Price 区块说明](https://docs.canvaswp.com/block-woo-product-price) #### Product Rating 任一套餐均包含 显示当前 WooCommerce 商品的星级评分，以及可选的评价数量。 [在线查看：Product Rating，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 Product Rating 区块说明](https://docs.canvaswp.com/block-woo-product-rating) #### Product Share 任一套餐均包含 显示“分享：”卡片，其中包含当前 WooCommerce 商品的社交分享链接。 [在线查看：Product Share，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 Product Share 区块说明](https://docs.canvaswp.com/block-woo-product-share) #### 产品简短描述 任一套餐均包含 显示商品简短描述，并完整保留其段落标记。 [在线查看：产品简短描述，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 产品简短描述 区块说明](https://docs.canvaswp.com/block-woo-product-short-description) #### Product Tabs 任一套餐均包含 渲染 WooCommerce 产品数据选项卡：描述、附加信息和评价。 [在线查看：Product Tabs，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 Product Tabs 区块说明](https://docs.canvaswp.com/block-woo-product-tabs) #### 产品 任一套餐均包含 以网格或列表布局显示 WooCommerce 商品。可按来源、分类、标签和排序方式进行筛选。 [在线查看：产品，位于 产品 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/shop/) [设置，见文档中的 产品 区块说明](https://docs.canvaswp.com/block-woo-products) #### Related Products 任一套餐均包含 显示与当前商品相关的 WooCommerce 商品网格。仅在单个商品模板中显示。 [在线查看：Related Products，位于 格纹短裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/checked-short-dress/) [设置，见文档中的 Related Products 区块说明](https://docs.canvaswp.com/block-woo-related-products) #### Variation Swatches 任一套餐均包含 用于选择可变商品变体的颜色圆点或按钮式标签。 [在线查看：Variation Swatches，位于 粉色印花连衣裙 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/product/pink-printed-dress-colors/) [设置，见文档中的 Variation Swatches 区块说明](https://docs.canvaswp.com/block-woo-variation-swatches) ### 页眉 22 个区块，在区块插入器中归入“页眉”类别下。 #### App Menu 免费 在小屏设备上固定于屏幕底部的应用式导航栏。 [在线查看：App Menu，位于 菜单 - 应用风格 1 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/menu-app-1/) [设置，见文档中的 App Menu 区块说明](https://docs.canvaswp.com/block-app-menu) #### Color Scheme Toggle 免费 访客使用的深色模式切换开关。当“主题选项 > 配色方案 > 深色模式”中的深色模式切换已开启，且放置位置包含页眉时，该开关会显示在站点上。 [设置，见文档中的 Color Scheme Toggle 区块说明](https://docs.canvaswp.com/block-color-scheme-toggle) #### Header Button 免费 用于已构建页眉的行动号召按钮或链接，样式沿用主题的按钮样式类。 [在线查看：Header Button，位于 首页 页面（在新标签页中打开）](https://demos.canvaswp.com/hosting/) [设置，见文档中的 Header Button 区块说明](https://docs.canvaswp.com/block-header-button) #### Header Cart 免费 为已搭建的页眉提供的 WooCommerce 迷你购物车图标与下拉菜单。WooCommerce 未启用时不显示任何内容。 [在线查看：Header Cart，位于 首页 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/) [设置，见文档中的 Header Cart 区块说明](https://docs.canvaswp.com/block-header-cart) #### Header Container 免费 页眉的根容器：将徽标、导航及其他页眉组件拖入其中。 [在线查看：Header Container，位于 意式餐厅 页面（在新标签页中打开）](https://demos.canvaswp.com/restaurant/) [设置，见文档中的 Header Container 区块说明](https://docs.canvaswp.com/block-header-container) #### Header Icon Link 免费 用于已构建页眉的单个纯图标链接（愿望清单、账户、用户、购物车触发器、登录弹窗），使用 .header-misc-icon 标记。 [在线查看：Header Icon Link，位于 页眉 SaaS 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/header-saas/) [设置，见文档中的 Header Icon Link 区块说明](https://docs.canvaswp.com/block-header-icon-link) #### Header Info 免费 一个小型行内信息或联系方式元素（电话、邮箱、营业时间或文字），可选择添加图标和链接，用于已构建的页眉。 [在线查看：Header Info，位于 Menu - Style 7 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/menu-7/) [设置，见文档中的 Header Info 区块说明](https://docs.canvaswp.com/block-header-info) #### Header Logo 免费 页眉的站点徽标。默认使用主题选项中的站点徽标，也可以选择自定义图片进行替换。 [在线查看：Header Logo，位于 意式餐厅 页面（在新标签页中打开）](https://demos.canvaswp.com/restaurant/) [设置，见文档中的 Header Logo 区块说明](https://docs.canvaswp.com/block-header-logo) #### Header Navigation 免费 已构建页眉的主导航菜单。选择菜单和对齐方式。 [在线查看：Header Navigation，位于 意式餐厅 页面（在新标签页中打开）](https://demos.canvaswp.com/restaurant/) [设置，见文档中的 Header Navigation 区块说明](https://docs.canvaswp.com/block-header-navigation) #### Header Root 免费 构建页眉的最外层元素：携带变体类名和 data-sticky-* 属性，供主题的吸顶页眉脚本读取。请将 #header-wrap 组（及页眉的其他内容）放入其中。 [在线查看：Header Root，位于 首页 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/) [设置，见文档中的 Header Root 区块说明](https://docs.canvaswp.com/block-header-root) #### 页眉搜索 免费 页眉搜索切换按钮。输出 #top-search 触发器，主题搜索下拉菜单与其绑定。 [在线查看：页眉搜索，位于 首页 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/) [设置，见文档中的 页眉搜索 区块说明](https://docs.canvaswp.com/block-header-search) #### Header Shop Search 免费 页眉行中始终可见的商品搜索框，是店铺与目录场景下对页眉搜索切换按钮的替代方案。可选择带静态图标的简洁搜索框，或带提交按钮的输入组。 [在线查看：Header Shop Search，位于 页眉目录 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/header-directory/) [设置，见文档中的 Header Shop Search 区块说明](https://docs.canvaswp.com/block-header-shop-search) #### Header Side Panel Trigger 免费 用于打开侧边面板的页眉图标。仅在主题选项中开启侧边面板时显示。 [设置，见文档中的 Header Side Panel Trigger 区块说明](https://docs.canvaswp.com/block-header-side-panel-trigger) #### Header Social 免费 一行社交与联系图标链接，适用于已搭建的页眉，沿用 top-social 的标记与样式。 [在线查看：Header Social，位于 在线时尚店铺 - 商店侧边栏 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/shop-1-right-sidebar/) [设置，见文档中的 Header Social 区块说明](https://docs.canvaswp.com/block-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 Topbar 区块说明](https://docs.canvaswp.com/block-header-topbar) #### Header Wishlist 免费 页眉中的一个心形图标，可链接到心愿单，并显示已收藏的商品数量。 [设置，见文档中的 Header Wishlist 区块说明](https://docs.canvaswp.com/block-header-wishlist) #### Header Zone 免费 位于 Header Container 行内的定位插槽：在其中放入 Logo、导航或一小组页眉组件，然后使用对齐方式、排序和可见性字段进行定位。 [在线查看：Header Zone，位于 意式餐厅 页面（在新标签页中打开）](https://demos.canvaswp.com/restaurant/) [设置，见文档中的 Header Zone 区块说明](https://docs.canvaswp.com/block-header-zone) #### Icon Nav List 免费 垂直排列的 Bootstrap .nav 图标链接列表（nav-item > nav-link > 图标 + 文本），用于离屏菜单面板。 [在线查看：Icon Nav List，位于 用户资料 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/profile/) [设置，见文档中的 Icon Nav List 区块说明](https://docs.canvaswp.com/block-icon-nav-list) #### Language Switcher 免费 一个紧凑的语言下拉菜单，适用于已完成搭建的页眉：显示当前语言并列出其他语言，使用 primary-menu with-arrows 标记。 [设置，见文档中的 Language Switcher 区块说明](https://docs.canvaswp.com/block-language-switcher) #### Mega Menu Column 任一套餐均包含 单个超级菜单列（.mega-menu-column）：标题加链接列表、扁平链接或任意小工具内容。可在 Row 区块内放置一个或多个列，作为您的超级菜单内容（外观 > 菜单 > 超级菜单仍控制外层面板的类型和样式）。 [在线查看：Mega Menu Column，位于 超级菜单 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/mega-menu/) [设置，见文档中的 Mega Menu Column 区块说明](https://docs.canvaswp.com/block-mega-menu) #### 页面菜单 免费 子页眉页面导航栏，提供吸顶和侧边圆点两种变体：可实现单页锚点滚动或普通链接。每个页面仅使用一个。 [在线查看：页面菜单，位于 带子菜单的页面 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/page-submenu/) [设置，见文档中的 页面菜单 区块说明](https://docs.canvaswp.com/block-page-menu) #### Top Links 免费 顶部栏链接菜单，可选单级下拉菜单，使用 .top-links 的标记与样式。 [在线查看：Top Links，位于 在线时尚店铺 - 商店侧边栏 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/shop-1-right-sidebar/) [设置，见文档中的 Top Links 区块说明](https://docs.canvaswp.com/block-top-links) ### 布局 19 个区块，在区块插入器的“布局”下列出。 #### Column 免费 响应式网格列（.col-*）。可按断点设置宽度，并可在其中放置任何内容。 [在线查看：Column，位于 列与网格 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/columns-grids/) [设置，见文档中的 Column 区块说明](https://docs.canvaswp.com/block-column) #### Container 免费 响应式 .container 容器。在其中放置行和列，即可构建版块布局。 [设置，见文档中的 Container 区块说明](https://docs.canvaswp.com/block-container) #### Copyrights 免费 页脚版权栏的一部分：包含链接的版权信息行，或行内链接菜单。将 Wrapper 区块的 Copyrights Bar 变体并排插入，即可同时放置两者。 [在线查看：Copyrights，位于 页脚 - 布局 2 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/footer-2/) [设置，见文档中的 Copyrights 区块说明](https://docs.canvaswp.com/block-copyrights) #### 页脚关于 免费 一个页脚“About”列，包含徽标、描述和可选地址，使用 .footer-logo 标记。 [在线查看：页脚关于，位于 页脚 - 布局 2 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/footer-2/) [设置，见文档中的 页脚关于 区块说明](https://docs.canvaswp.com/block-footer-about) #### Footer Contacts 免费 大号标签/值形式的联系信息行，使用 .footer-big-contacts 的标记和样式。 [在线查看：Footer Contacts，位于 页脚 - 布局 3 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/footer-3/) [设置，见文档中的 Footer Contacts 区块说明](https://docs.canvaswp.com/block-footer-contacts) #### Footer Instagram 免费 页脚 Instagram / 图片流小工具：以瀑布流网格展示图片，可选添加链接，使用 .masonry-thumbs 标记。 [在线查看：Footer Instagram，位于 页脚 - 布局 4 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/footer-4/) [设置，见文档中的 Footer Instagram 区块说明](https://docs.canvaswp.com/block-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 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/footer-2/) [设置，见文档中的 Footer Widget Area 区块说明](https://docs.canvaswp.com/block-footer-widget-area) #### Grid Filter 任一套餐均包含 Isotope 分类筛选栏（.grid-filter），用于驱动支持 Isotope 筛选的网格。数据项可来自分类法或手动列表。 [在线查看：Grid Filter，位于 作品集筛选样式 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-filter-styles/) [设置，见文档中的 Grid Filter 区块说明](https://docs.canvaswp.com/block-grid-filter) #### Hero 免费 渲染每个页面在其 Hero 面板中指定的 Hero，或您选择的某一个 Hero。在 Canvas → Heroes 中编排 Hero。 [在线查看：Hero，位于 板块 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/sections/) [设置，见文档中的 Hero 区块说明](https://docs.canvaswp.com/block-hero-slot) #### Image Element 免费 没有 figure 或图注包裹的纯图片，用于与其他内容并排内联显示的徽标和徽章。 [在线查看：Image Element，位于 首页 页面（在新标签页中打开）](https://demos.canvaswp.com/modern-blog/) [设置，见文档中的 Image Element 区块说明](https://docs.canvaswp.com/block-image-element) #### Inline Contact 免费 以中点分隔符连接的平铺行内列表，由图标加文本的联系信息项组成（邮箱、电话、Skype 等）：即 #copyrights 版权栏中的联系信息行。 [在线查看：Inline Contact，位于 联系我们 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/contact/) [设置，见文档中的 Inline Contact 区块说明](https://docs.canvaswp.com/block-inline-contact) #### Inline Text 免费 直接位于容器内、没有自身段落或 span 的一段文本。仅限行内内容。 [在线查看：Inline Text，位于 全宽布局 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/full-width/) [设置，见文档中的 Inline Text 区块说明](https://docs.canvaswp.com/block-inline-text) #### Line Break 免费 用作间距调节的单个换行符。在高级面板中添加响应式类，可使行仅在部分屏幕尺寸下换行。 [在线查看：Line Break，位于 悬停视差 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/hover-parallax/) [设置，见文档中的 Line Break 区块说明](https://docs.canvaswp.com/block-line-break) #### 页面标题 免费 渲染每个页面在页眉下方显示的页面标题横条，其设置可在页面的“页面标题”面板和“主题选项”中进行。横条本身即为页面标题模板部件。 [在线查看：页面标题，位于 页面标题左对齐布局 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/page-title/) [设置，见文档中的 页面标题 区块说明](https://docs.canvaswp.com/block-page-title-slot) #### Quantity Input 免费 `.quantity` 步进器：两侧带有减号和加号按钮的数字输入框。它不依赖具体产品，可与按钮搭配，用于“加入购物车”行。 [在线查看：Quantity Input，位于 购物车数量 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/cart-quantity/) [设置，见文档中的 Quantity Input 区块说明](https://docs.canvaswp.com/block-quantity-input) #### Row 免费 网格行。在其中放置 Canvas Column 区块，以响应式网格排列内容。 [在线查看：Row，位于 列与网格 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/columns-grids/) [设置，见文档中的 Row 区块说明](https://docs.canvaswp.com/block-row) #### Page Slider 免费 渲染每个页面在其“滑块”面板中指定的滑块，或您选择的某个滑块。幻灯片、效果和高度需在滑块本身中配置。 [在线查看：Page Slider，位于 Canvas Slider 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/slider-canvas/) [设置，见文档中的 Page Slider 区块说明](https://docs.canvaswp.com/block-slider-slot) #### Widget Links 免费 使用 .widget_links 标记与样式的页脚链接列。 [在线查看：Widget Links，位于 小工具 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/widgets/) [设置，见文档中的 Widget Links 区块说明](https://docs.canvaswp.com/block-widget-links) #### Wrapper 免费 一个裸 HTML 元素，仅包含您指定的类名，并可容纳其他区块。在设计需要精确包裹元素且不需要额外编辑器类名时使用。 [在线查看：Wrapper，位于 板块 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/sections/) [设置，见文档中的 Wrapper 区块说明](https://docs.canvaswp.com/block-wrapper) ### 活动 16 个区块，在区块插入器的 Events 分类下列出。 #### 会议日程 任一套餐均包含 按天分标签的议程表，或一排即将开始的活动卡片，均由活动记录生成。 [在线查看：会议日程，位于 Canvas 开发者大会 页面（在新标签页中打开）](https://demos.canvaswp.com/conference/) [设置，见文档中的 会议日程 区块说明](https://docs.canvaswp.com/block-conference-events) #### Event Archive Grid 任一套餐均包含 主查询（归档 + 分类）的活动网格。使用 event-entry-grid 局部模板和共享分页。 [在线查看：Event Archive Grid，位于 活动 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/events/) [设置，见文档中的 Event Archive Grid 区块说明](https://docs.canvaswp.com/block-event-archive) #### Event Categories 任一套餐均包含 显示分配给当前活动的分类。支持文本、徽章和胶囊样式。仅在 canvas_event 文章类型上渲染。 [设置，见文档中的 Event Categories 区块说明](https://docs.canvaswp.com/block-event-categories) #### Event Content 任一套餐均包含 输出当前活动的完整文章内容，经由 the_content 过滤器处理。仅适用于 canvas_event 文章类型。 [在线查看：Event Content，位于 Event Single 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/event-single/) [设置，见文档中的 Event Content 区块说明](https://docs.canvaswp.com/block-event-content) #### Event Date 任一套餐均包含 显示活动的开始和结束日期，可选择显示时间和日历图标。仅在 canvas_event 文章类型上渲染。 [设置，见文档中的 Event Date 区块说明](https://docs.canvaswp.com/block-event-date) #### Event Excerpt 任一套餐均包含 显示当前活动的截取摘要。 [设置，见文档中的 Event Excerpt 区块说明](https://docs.canvaswp.com/block-event-excerpt) #### Event Image 任一套餐均包含 显示当前活动的特色图片。仅在 canvas_event 文章类型上渲染。 [在线查看：Event Image，位于 Event Single 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/event-single/) [设置，见文档中的 Event Image 区块说明](https://docs.canvaswp.com/block-event-image) #### Event Location 任一套餐均包含 显示活动场地的名称和地址，可选添加 Google 地图链接和位置图标。仅在 canvas_event 文章类型中显示。 [设置，见文档中的 Event Location 区块说明](https://docs.canvaswp.com/block-event-location) #### Event Meta 任一套餐均包含 显示活动元数据：日期、地点、主办方和价格。每个字段可独立切换显示。仅在 canvas_event 文章类型中渲染。 [在线查看：Event Meta，位于 活动单页 | 双侧边栏 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/event-single-both-sidebar/) [设置，见文档中的 Event Meta 区块说明](https://docs.canvaswp.com/block-event-meta) #### Event Navigation 任一套餐均包含 显示上一个和下一个活动的导航链接，可配置标签并可选显示缩略图。仅在 canvas_event 文章类型中显示。 [在线查看：Event Navigation，位于 活动单页 | 双侧边栏 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/event-single-both-sidebar/) [设置，见文档中的 Event Navigation 区块说明](https://docs.canvaswp.com/block-event-navigation) #### Event Organizer 任一套餐均包含 显示活动组织者，可选附带其网站链接和人物图标。仅在 canvas_event 文章类型中渲染。 [设置，见文档中的 Event Organizer 区块说明](https://docs.canvaswp.com/block-event-organizer) #### Event Posts 任一套餐均包含 以响应式卡片网格的形式查询并显示 canvas_event 文章。支持按即将举行、已结束或全部活动进行筛选。可放置在任意页面。 [在线查看：Event Posts，位于 活动列表 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/events-list/) [设置，见文档中的 Event Posts 区块说明](https://docs.canvaswp.com/block-event-posts) #### Event Price 任一套餐均包含 显示活动价格；未设置价格时，显示可配置的免费标签。支持文字和徽章两种样式。仅在 canvas_event 文章类型中渲染。 [设置，见文档中的 Event Price 区块说明](https://docs.canvaswp.com/block-event-price) #### Related Events 任一套餐均包含 根据共享分类显示相关活动的网格。仅在 canvas_event 文章类型上渲染。 [在线查看：Related Events，位于 Spring Music Fest 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/events/spring-music-fest/) [设置，见文档中的 Related Events 区块说明](https://docs.canvaswp.com/block-event-related) #### Event Title 任一套餐均包含 以可配置的标题标签显示当前活动标题，可选择是否添加固定链接。仅在 canvas_event 文章类型中显示。 [设置，见文档中的 Event Title 区块说明](https://docs.canvaswp.com/block-event-title) #### Events Calendar 任一套餐均包含 活动的月视图日历，带有上一月、下一月和今天的控制按钮。每一天都会链接到当天发生的活动。 [在线查看：Events Calendar，位于 Events Calendar 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/events-calendar/) [设置，见文档中的 Events Calendar 区块说明](https://docs.canvaswp.com/block-events-calendar) ### 作品集 8 个区块，在区块插入器的“作品集”下列出。 #### Portfolio Archive Grid 任一套餐均包含 用于主查询（归档 + 分类）的作品集网格。使用 portfolio-entry-grid 局部模板 + #portfolio 叠加网格。 [在线查看：Portfolio Archive Grid，位于 作品集 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/projects/) [设置，见文档中的 Portfolio Archive Grid 区块说明](https://docs.canvaswp.com/block-portfolio-archive) #### Portfolio Categories 任一套餐均包含 显示分配给当前作品集项目的分类。请在作品集单篇模板内使用。 [在线查看：Portfolio Categories，位于 Meridian 品牌形象 页面（在新标签页中打开）](https://demos.canvaswp.com/media-agency/portfolio/meridian-brand-identity/) [设置，见文档中的 Portfolio Categories 区块说明](https://docs.canvaswp.com/block-portfolio-categories) #### Portfolio Content 任一套餐均包含 显示当前作品集项目的完整内容。请在作品集单页模板中使用。 [在线查看：Portfolio Content，位于 打开想象力 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/projects/open-imagination/) [设置，见文档中的 Portfolio Content 区块说明](https://docs.canvaswp.com/block-portfolio-content) #### Portfolio Image 任一套餐均包含 显示当前作品集项目的媒体区域：特色图片、图库滑块、项目视频或缩略图网格。请在作品集单篇模板中使用。 [在线查看：Portfolio Image，位于 打开想象力 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/projects/open-imagination/) [设置，见文档中的 Portfolio Image 区块说明](https://docs.canvaswp.com/block-portfolio-image) #### Portfolio Meta 任一套餐均包含 展示作品集项目的详细信息：客户、日期、技能和网址。请在作品集单篇模板中使用。 [在线查看：Portfolio Meta，位于 打开想象力 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/projects/open-imagination/) [设置，见文档中的 Portfolio Meta 区块说明](https://docs.canvaswp.com/block-portfolio-meta) #### Portfolio Navigation 任一套餐均包含 显示上一个和下一个作品集项目的导航链接。请在作品集单页模板中使用。 [在线查看：Portfolio Navigation，位于 打开想象力 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/projects/open-imagination/) [设置，见文档中的 Portfolio Navigation 区块说明](https://docs.canvaswp.com/block-portfolio-navigation) #### Portfolio Related 任一套餐均包含 显示基于共同分类的相关作品集项目。请在作品集单篇模板中使用。 [在线查看：Portfolio Related，位于 打开想象力 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/projects/open-imagination/) [设置，见文档中的 Portfolio Related 区块说明](https://docs.canvaswp.com/block-portfolio-related) #### Portfolio Title 任一套餐均包含 显示当前作品集项目标题。请在作品集单页模板中使用。 [在线查看：Portfolio Title，位于 Meridian 品牌形象 页面（在新标签页中打开）](https://demos.canvaswp.com/media-agency/portfolio/meridian-brand-identity/) [设置，见文档中的 Portfolio Title 区块说明](https://docs.canvaswp.com/block-portfolio-title) ### 表单 5 个区块，在区块插入器的“表单”分类下列出。 #### Form 任一套餐均包含 一个可正常工作的表单。在其中放置 Form Field 和 Form Submit 区块：提交内容会经过验证、保存，并通过电子邮件发送。 [在线查看：Form，位于 表单样式 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/forms-styles/) [设置，见文档中的 Form 区块说明](https://docs.canvaswp.com/block-form-container) #### Form Embed 任一套餐均包含 通过选择表单 ID，即可在网站任意位置嵌入 Canvas 表单。 [在线查看：Form Embed，位于 商店首页 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/index-shop/) [设置，见文档中的 Form Embed 区块说明](https://docs.canvaswp.com/block-form-embed) #### Form Field 任一套餐均包含 单个表单输入字段。在 Canvas Form 内使用，用于收集用户输入。 [在线查看：Form Field，位于 表单元素 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/form-elements/) [设置，见文档中的 Form Field 区块说明](https://docs.canvaswp.com/block-form-field) #### Form Submit Button 任一套餐均包含 Canvas 表单的提交按钮。支持样式变体、尺寸、全宽模式和图标。 [在线查看：Form Submit Button，位于 表单样式 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/forms-styles/) [设置，见文档中的 Form Submit Button 区块说明](https://docs.canvaswp.com/block-form-submit) #### Quick Contact 任一套餐均包含 一个紧凑的“快速报价”联系表单小工具（姓名、邮箱、留言），使用 Canvas 表单 CSS 样式。 [在线查看：Quick Contact，位于 小工具 页面（在新标签页中打开）](https://demos.canvaswp.com/classic/widgets/) [设置，见文档中的 Quick Contact 区块说明](https://docs.canvaswp.com/block-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 区块** 学术文章，专辑磁贴，建筑项目，建筑团队，编曲画廊，艺术家气泡，烘焙菜单，理发服务项目，美妆套装，自行车租赁，记账服务，机器人模板，品牌代理作品，品牌工作室作品，咖啡馆菜单，营销活动，能力网格，护理服务，公益事业，频道影片，清洁团队，清洁服务，会议演讲嘉宾，会议赞助商，联合办公空间，创作者展示，CrossFit 课程，CrossFit 训练，牙科团队，牙科治疗，医生，房产，活动日程，活动讲者，活动讲者，音乐节阵容，餐车菜单，足球俱乐部新闻，游戏比赛，耳机产品，耳机店，青年旅舍客房，保险保障，幼儿园新闻，幼儿园课程，生活方式节目，生活方式文章，贷款方案，武术项目，医疗科室，医疗医生，医疗专科，菜单项目，搬家文章，搬家服务，NFT 藏品，宠物服务，摄影作品，平台模块，播客节目，食谱，住宅，独立建筑师作品，水疗项目，网球新闻，网球赛事，理疗项目，曲目合集，旅行酒店，旅行线路，葡萄酒品鉴，瑜伽课程。 ### 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 属性，以便第三方脚本或测试工具能够找到该元素。 ### 显示条件 按登录状态、用户角色、设备尺寸或某个主题选项的值显示或隐藏区块，使同一页面能够服务于多类受众。 ### 区块默认值 按您喜欢的方式设置一次区块，然后将这些设置保存为默认值，之后在本站点插入的每个区块都将采用该默认设置。 - [编辑器的工作方式](https://canvaswp.com/zh-hans/editor/) ### 全局样式预设 保存一个命名样式，并将其应用到站点中任意位置的区块。之后修改该预设，所有使用它的区块都会随之更新。 ### 按区块加载资源 页面只会加载其实际渲染的区块所需的 CSS 和 JavaScript，因此没有滑块的页面永远不会下载滑块脚本。 - [性能](https://canvaswp.com/zh-hans/performance/) 从一个版块开始 ## 183 个区块图案 模式会将一个现成的版块作为普通区块放入页面，之后您可以再编辑。区块内部不包含原始 HTML，因此每个标题、图片、图标和链接都会在侧边栏中作为可控制项保留。 插入器中的图案分为 17 个类别： - 页眉 - 内容 - 表单 - 页脚 - 博客 - Hero - Gallery - 行动号召 - 定价 - 页面 - 功能 - 活动 - 弹窗 - 社交 - 客户评价 - 作品集 - 常见问题 图案带有标签而非被锁定：高级图案会在插入器中保留可见的标签，当其中的区块为免费区块时，它会完整渲染。随主题提供的 173 个区块模板和 4 个样式变体同样适用此规则，可在站点编辑器中使用。