区块

适用于 WordPress 区块编辑器的 314 个区块

真正的区块,配有真正的设置面板,可从 WordPress 提供的区块插入器中插入。没有短代码,没有专有画布,也无需再学一套编辑器。访客看到的每一处内容,都可在侧边栏中找到对应控件。

更新于

314
区块总数
228
免费版
209
在插入器中
105
仅限演示站点
10
类别
区块库

209 个可直接插入的区块

按系列筛选,或按名称、关键词、区块功能搜索。高级区块已做标注,每个套餐都包含全部区块。

WordPress 区块插入器打开,显示 Canvas 区块分类,Canvas 区块与核心区块并列显示

WordPress 提供的插入器,Canvas 区块系列位于核心区块之下。这里没有任何短代码,也不会打开第二个编辑器。

显示全部 209

Posts

共 31 个区块,在区块插入器的“文章”分类下列出。

Academic Works 免费

作品集记录以学术设计的方式呈现:图书条目、期刊论文卡片,以及记录在其页面上的详细信息。

Agency 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。

设置,见文档中的 Blog Single Post 区块说明

Construction Projects 免费

以作品集网格形式显示 Projects 文章类型中的项目(2 到 5 列),或呈现单个项目页面(属性、联系行动按钮、相关项目)。

在线查看:Construction Projects,位于 项目 | 5 列 页面(在新标签页中打开)

Illustrator Works 免费

作品集项目以带彩色边框的方形卡片可筛选网格形式呈现,或以单个项目页面的各个部分呈现。

在线查看:Illustrator Works,位于 首页 页面(在新标签页中打开)

Interior Projects 免费

以可筛选的作品集网格显示 Projects 文章类型中的工作室项目,或渲染单个项目页面(包括详情侧边栏、咨询按钮和相关项目)。

在线查看:Interior Projects,位于 Stonecroft 页面(在新标签页中打开)

Law Firm Cases 免费

以卡片形式展示 Portfolio 文章类型中的案例,或呈现单个案例页面(属性、行动号召、相关案例)。

在线查看:Law Firm Cases,位于 近期案例 页面(在新标签页中打开)

Photo Shots 免费

以可展开的预览网格展示 Shots 文章类型中的照片,或渲染单个作品页面(包括画框、拍摄细节、咨询按钮和相关作品)。

在线查看:Photo Shots,位于 探索 页面(在新标签页中打开)

Post Archive Index 免费

每条记录以日期和标题列出,可选择按年份和月份分组,即“已发布全部内容”索引。

设置,见文档中的 Post Archive Index 区块说明

Post Content 免费

显示当前文章的完整内容,并运行所有内容过滤器,包括短代码和嵌入内容。

在线查看:Post Content,位于 这是一篇带有预览图像的标准文章 页面(在新标签页中打开) 设置,见文档中的 Post Content 区块说明

Post Image 免费

显示当前文章的特色图片,可设置尺寸,并可选择添加固定链接。

在线查看:Post Image,位于 博客 | 混合信息流 页面(在新标签页中打开) 设置,见文档中的 Post Image 区块说明

Post Media 免费

当前文章的入口媒体框:根据文章格式,显示其特色图片、视频或音频嵌入、图库滑块、缩略图网格、引用、链接或状态卡片。

在线查看:Post Media,位于 博客 | 时间线左侧边栏 页面(在新标签页中打开) 设置,见文档中的 Post Media 区块说明

Post Meta 免费

显示可配置的文章元信息,包括日期、作者、分类和评论数。

在线查看:Post Meta,位于 博客 | 混合信息流 页面(在新标签页中打开) 设置,见文档中的 Post Meta 区块说明

Post Read More 免费

输出一个指向当前文章固定链接的“阅读更多”链接或按钮。

在线查看:Post Read More,位于 首页 页面(在新标签页中打开) 设置,见文档中的 Post Read More 区块说明

Post Share 免费

显示当前文章的社交分享链接,可配置分享平台、样式和尺寸。

在线查看:Post Share,位于 Event Single 页面(在新标签页中打开) 设置,见文档中的 Post Share 区块说明

Post Terms 免费

以文本、徽章、胶囊、标签云或行内分类等样式,显示当前文章的分类项(分类或标签)。

在线查看:Post Terms,位于 博客 | 混合信息流 页面(在新标签页中打开) 设置,见文档中的 Post Terms 区块说明

Post Title 免费

以可配置的标题标签显示当前文章标题,并可选择添加固定链接。

在线查看:Post Title,位于 博客 | 混合信息流 页面(在新标签页中打开) 设置,见文档中的 Post Title 区块说明

Posts 免费

以网格、列表、瀑布流和时间线等多种布局查询并显示文章。支持按分类、标签、自定义文章类型筛选,并支持排序。

在线查看:Posts,位于 博客 | 网格 页面(在新标签页中打开) 设置,见文档中的 Posts 区块说明

Recent Comments 免费

展示全站最新已批准的评论,每条均附带评论者的头像、姓名和开头文字,并链接至对应的评论串。

在线查看:Recent Comments,位于 小工具 页面(在新标签页中打开) 设置,见文档中的 Recent Comments 区块说明

Resume Works 免费

以紧凑列表或磁贴网格的形式显示 Works 文章类型中的项目,或渲染单个项目页面(属性、CTA、相关项目)。

在线查看:Resume Works,位于 作品 页面(在新标签页中打开)

内容

30 个区块,位于区块插入器中的“内容”类别下。

Background Video / Audio 免费

一种自托管的循环播放视频或音频层,用于主视觉区、区块背景或定制播放器。它仅输出媒体元素,因此定位该元素的包装容器仍由你自行控制。

在线查看:Background Video / Audio,位于 媒体操作 页面(在新标签页中打开) 设置,见文档中的 Background Video / Audio 区块说明

Cascading Images 任一套餐均包含

分层图片组合,每张图片可单独设置平移、旋转、缩放、z-index、动画延迟,并可选添加装饰性背景形状。

在线查看:Cascading Images,位于 Cascading Images 页面(在新标签页中打开) 设置,见文档中的 Cascading Images 区块说明

图表 任一套餐均包含

通过您提供的数据集绘制图表,让报告或价格对比中的数据一目了然。图表类型、数据和标签均来自您输入的配置。

在线查看:图表,位于 服务 - 布局 1 页面(在新标签页中打开) 设置,见文档中的 图表 区块说明

Circle Stack 任一套餐均包含

横向排列的圆形头像、图标或文字徽章,适合用于团队展示、社交证明和关注人数统计。

在线查看:Circle Stack,位于 Circle Stacks 页面(在新标签页中打开) 设置,见文档中的 Circle Stack 区块说明

Clients 免费

以响应式网格或 owl-carousel 形式展示客户、合作伙伴或品牌徽标,可选择添加链接并支持灯箱效果。

在线查看:Clients,位于 Clients 页面(在新标签页中打开) 设置,见文档中的 Clients 区块说明

Data Table 任一套餐均包含

以行和列的形式排列结构化信息,例如规格列表或套餐对比,表头可供访客排序,底部可选添加汇总行。

在线查看:Data Table,位于 用户资料 页面(在新标签页中打开) 设置,见文档中的 Data Table 区块说明

Map 免费

Google 地图或 OpenStreetMap 地图,支持自定义标记、缩放级别,以及在 Google 地图上覆盖地图类型和样式设置。

在线查看:Map,位于 地图 页面(在新标签页中打开) 设置,见文档中的 Map 区块说明

Hover Card 免费

图片卡片,鼠标悬停时会以 3D 效果倾斜,其标题和分类说明会向观看者方向浮起。

在线查看:Hover Card,位于 悬停视差 页面(在新标签页中打开) 设置,见文档中的 Hover Card 区块说明

Icon Browser 免费

可搜索的参考网格,展示已启用图标包中的所有图标。

在线查看:Icon Browser,位于 图标 页面(在新标签页中打开) 设置,见文档中的 Icon Browser 区块说明

Inline SVG 免费

通过 SVG 路径数据绘制的矢量图标,侧边栏控件可设置尺寸、颜色、viewBox 和各图层不透明度。

在线查看:Inline SVG,位于 定价 页面(在新标签页中打开) 设置,见文档中的 Inline SVG 区块说明

Link Tiles 免费

由图标和标签组成的网格磁贴,每个磁贴链接到一个页面。指向不存在页面的磁贴会被省略。

在线查看:Link Tiles,位于 列表组与卡片 页面(在新标签页中打开) 设置,见文档中的 Link Tiles 区块说明

Lists & Cards 免费

基于 Bootstrap 的列表组和卡片,提供多种样式、颜色和布局。

在线查看:Lists & Cards,位于 列表组与卡片 页面(在新标签页中打开) 设置,见文档中的 Lists & Cards 区块说明

Media Embed 免费

在页面中放置视频或音频播放器,内容可来自托管服务、您上传的文件,或服务商提供的嵌入地址,并可按所选宽高比调整尺寸。

在线查看:Media Embed,位于 媒体嵌入 页面(在新标签页中打开) 设置,见文档中的 Media Embed 区块说明

Nav Tree 免费

缩进的多级链接树:侧边面板或文档侧边栏所使用的导航列表。

设置,见文档中的 Nav Tree 区块说明

Navbar 免费

可折叠导航栏,包含品牌标识、汉堡菜单切换按钮、下拉链接,以及可选的末尾搜索表单、按钮或文本。

在线查看:Navbar,位于 导航 页面(在新标签页中打开) 设置,见文档中的 Navbar 区块说明

浮层内容 免费

覆盖层中的一个内容层:可对齐,可选择添加遮罩,并带有触发图标和嵌套区块。

在线查看:浮层内容,位于 项目覆盖层 页面(在新标签页中打开) 设置,见文档中的 浮层内容 区块说明

Overlay Item 免费

图片卡片,上层叠加覆盖层:包括徽章、色调层,以及一个或多个覆盖内容层。

在线查看:Overlay Item,位于 项目覆盖层 页面(在新标签页中打开) 设置,见文档中的 Overlay Item 区块说明

页面标题 免费

页面标题 / 首屏横幅栏。在其中放入标题、副标题和面包屑导航,并可设置对齐方式、背景图片、视差效果以及深色配色方案。

在线查看:页面标题,位于 页面标题左对齐布局 页面(在新标签页中打开) 设置,见文档中的 页面标题 区块说明

Page Title Buttons 免费

页面标题区域中的操作按钮。动态模式下读取每个页面各自的按钮,或渲染你在此处编写的按钮。没有链接的按钮将成为滚动触发器。

在线查看:Page Title Buttons,位于 按钮 页面(在新标签页中打开) 设置,见文档中的 Page Title Buttons 区块说明

Particles 免费

用于某个区域的动态粒子背景层:线状网络、星空、气泡、雪花或低多边形。

在线查看:Particles,位于 Particles 页面(在新标签页中打开) 设置,见文档中的 Particles 区块说明

Preloader 免费

一种 CSS 动画加载指示器,可使用设计系统中的任一加载器样式。

在线查看:Preloader,位于 预加载器 页面(在新标签页中打开) 设置,见文档中的 Preloader 区块说明

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 页面(在新标签页中打开) 设置,见文档中的 客户评价 区块说明

缩略图 免费

图片缩略图网格,带有悬停效果和可选标题。支持灯箱和链接叠加层。

设置,见文档中的 缩略图 区块说明

Twitter Feed 免费

展示某个账号最新推文的滚动动态,页面加载时获取。可选择账号、显示条数以及小组件的排版方式。

在线查看:Twitter Feed,位于 小工具 页面(在新标签页中打开) 设置,见文档中的 Twitter Feed 区块说明

Canvas

29 个区块,列在区块插入器的 Canvas 分类下。

Alert 免费

提示与通知框,采用 Bootstrap alert 或 Canvas style-msg 系统。支持填充、边框和扩展等样式,可选添加图标和关闭按钮。

在线查看:Alert,位于 样式盒子 页面(在新标签页中打开) 设置,见文档中的 Alert 区块说明

按钮 免费

功能完备的按钮,提供多种样式变体、尺寸、形状、颜色、图标、悬停效果和阴影选项。

在线查看:按钮,位于 按钮 页面(在新标签页中打开) 设置,见文档中的 按钮 区块说明

Code Highlight 任一套餐均包含

基于 Prism.js 的语法高亮代码区块。支持 15+ 种语言,并可选配剪贴板复制按钮。

在线查看:Code Highlight,位于 代码高亮器 页面(在新标签页中打开) 设置,见文档中的 Code Highlight 区块说明

Counter 免费

带图标、前缀/后缀和说明标签的动态数字计数器。

在线查看:Counter,位于 计数器 页面(在新标签页中打开) 设置,见文档中的 Counter 区块说明

Divider 免费

水平分隔线,支持可选图标、样式变体、对齐方式、宽度预设,以及滚动到链接功能。

在线查看:Divider,位于 分隔线 页面(在新标签页中打开) 设置,见文档中的 Divider 区块说明

Dropcap 免费

带样式的首字下沉字母,并附带段落文字。支持方框、边框、圆形和带边框圆形等样式,可设置在左侧或右侧。

在线查看:Dropcap,位于 标题与首字下沉 页面(在新标签页中打开) 设置,见文档中的 Dropcap 区块说明

标题 免费

Styled heading with optional subtitle. Supports Heading Block, Title Block, Emphasis Title, and Fancy Title types.

在线查看:标题,位于 标题与首字下沉 页面(在新标签页中打开) 设置,见文档中的 标题 区块说明

Highlight 免费

高亮文本,支持多种可配置的样式变体,包括标记、下划线、渐变、描边和纯文本。支持可选的前后环绕文案,以及任意块级 HTML 标签。

设置,见文档中的 Highlight 区块说明

Icon Box 免费

带图标、标题和描述的特色框。支持多种图标样式、尺寸、布局和悬停效果。

在线查看:Icon Box,位于 精选卡片 页面(在新标签页中打开) 设置,见文档中的 Icon Box 区块说明

Icon List 免费

带有重复项的图标列表。每个项目包含一个图标(CSS 类)、文字标签和可选链接。支持默认、大号和超大号尺寸变体。

在线查看:Icon List,位于 图标列表 页面(在新标签页中打开) 设置,见文档中的 Icon List 区块说明

Login Form 任一套餐均包含

显示带有 Canvas 样式的 WordPress 登录表单,并向已登录用户显示欢迎信息。

在线查看:Login Form,位于 登录与注册 页面(在新标签页中打开) 设置,见文档中的 Login Form 区块说明

通知 免费

显示轻提示通知,可通过点击按钮触发,也可在页面加载时自动显示。

在线查看:通知,位于 通知 页面(在新标签页中打开) 设置,见文档中的 通知 区块说明

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 区块说明

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 按钮的推广号召框。支持默认、边框、浅色和深色样式。

在线查看:Promo Box,位于 宣传框 页面(在新标签页中打开) 设置,见文档中的 Promo Box 区块说明

引言 免费

引用区块,提供默认边框、图标引号和对话气泡三种样式。支持反向对齐、引用来源页脚,以及可选的边框和图标颜色覆盖。

在线查看:引言,位于 引语与引用块 页面(在新标签页中打开) 设置,见文档中的 引言 区块说明

Read More 免费

可折叠的内容区域,通过“阅读更多”链接触发带动画效果的展开与收起。

在线查看:Read More,位于 Read More 页面(在新标签页中打开) 设置,见文档中的 Read More 区块说明

Register Form 任一套餐均包含

采用 Canvas 样式的用户注册表单。需要先在 WordPress 设置中启用用户注册功能。

在线查看:Register Form,位于 登录与注册 页面(在新标签页中打开) 设置,见文档中的 Register Form 区块说明

Social Icons 免费

社交图标链接组,带有悬停动画,提供多种样式、尺寸,并可选择固定定位。

在线查看:Social Icons,位于 Social Icons 页面(在新标签页中打开) 设置,见文档中的 Social Icons 区块说明

Stat List 免费

数据列表,每项由加粗的数值和简短标签组成,例如从业年限、产品发布数或获奖数。

在线查看:Stat List,位于 团队 页面(在新标签页中打开) 设置,见文档中的 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 滑块,支持按断点设置显示数量、自动播放、导航箭头、圆点、灯箱以及图片懒加载。

在线查看:轮播,位于 轮播 页面(在新标签页中打开) 设置,见文档中的 轮播 区块说明

倒计时 任一套餐均包含

由 jQuery countdown 插件驱动的倒计时或正计时器。

在线查看:倒计时,位于 计数器 页面(在新标签页中打开) 设置,见文档中的 倒计时 区块说明

Flip Card 任一套餐均包含

一个 3D 翻转卡片,包含正面和背面,两面各有独立背景,鼠标悬停时翻转。

在线查看:Flip Card,位于 Flip Cards 页面(在新标签页中打开) 设置,见文档中的 Flip Card 区块说明

Gallery 免费

带有瀑布流支持、可配置列数、间距控制和可选灯箱功能的图片库。

在线查看:Gallery,位于 Gallery 页面(在新标签页中打开) 设置,见文档中的 Gallery 区块说明

Cookie Consent 免费

Cookie 同意横幅,包含隐私偏好设置弹窗和按服务单独设置的同意开关。

在线查看:Cookie Consent,位于 GDPR 布局 2 页面(在新标签页中打开) 设置,见文档中的 Cookie Consent 区块说明

Hover 3D 免费

卡片,鼠标移动时产生 CSS 透视倾斜效果,由主题 JS 模块驱动。

设置,见文档中的 Hover 3D 区块说明

Image Compare 任一套餐均包含

前后对比图片滑块,可配置方向、偏移量、手柄样式和两侧标签。

在线查看:Image Compare,位于 Image Compare 页面(在新标签页中打开) 设置,见文档中的 Image Compare 区块说明

Image Hotspot 任一套餐均包含

带有定位热点标记的交互式图片,悬停或点击即可显示工具提示。

在线查看:Image Hotspot,位于 图片热点 页面(在新标签页中打开) 设置,见文档中的 Image Hotspot 区块说明

Image Slider 任一套餐均包含

基于 FlexSlider 的图片滑块,支持滑动或淡入淡出动画、自动播放、箭头、圆点、缩略图导航和触摸滑动。

在线查看:Image Slider,位于 图片滑块 页面(在新标签页中打开) 设置,见文档中的 Image Slider 区块说明

Modal 任一套餐均包含

通过按钮、链接触发模态/弹出对话框,或在页面加载时自动打开。

在线查看:Modal,位于 模态框与弹出框 页面(在新标签页中打开) 设置,见文档中的 Modal 区块说明

导航 免费

标签页、胶囊式与下划线导航条,带有激活和禁用状态,并支持一级下拉菜单。

在线查看:导航,位于 导航 页面(在新标签页中打开) 设置,见文档中的 导航 区块说明

Off-Canvas 免费

一种由按钮或链接打开的 Bootstrap 5 离屏滑动面板(起始 / 末尾 / 顶部 / 底部)。

在线查看:Off-Canvas,位于 Bootstrap Off-Canvas 页面(在新标签页中打开) 设置,见文档中的 Off-Canvas 区块说明

Pagination 免费

分页行:支持圆形、圆角、胶囊形、3D、透明或按钮样式,提供三种尺寸和任意对齐方式。

在线查看:Pagination,位于 分页与进度条 页面(在新标签页中打开) 设置,见文档中的 Pagination 区块说明

Scroll Reveal 任一套餐均包含

随着用户向下滚动页面,内容以动画形式逐渐显示。

设置,见文档中的 Scroll Reveal 区块说明

Slider 任一套餐均包含

选择即可在站点任意位置嵌入 Canvas 滑块。幻灯片、切换效果、导航和高度均在滑块本身中设置。

在线查看:Slider,位于 家居生活与室内装饰 页面(在新标签页中打开) 设置,见文档中的 Slider 区块说明

Tabs 免费

将相关内容拆分到带标签的选项卡中,让访客每次只阅读一个部分,使较长的对比页或规格页保持简短,便于快速浏览。

在线查看:Tabs,位于 Tabs 页面(在新标签页中打开) 设置,见文档中的 Tabs 区块说明

Text Fill Scroll 任一套餐均包含

元素滚动进入视图时,文字颜色逐渐填充。

设置,见文档中的 Text Fill Scroll 区块说明

切换 免费

将一段内容隐藏在标题之后,访客点击标题即可展开。适用于较长的答案,或一组默认不应占用页面空间的条款。

在线查看:切换,位于 切换与手风琴 页面(在新标签页中打开) 设置,见文档中的 切换 区块说明

Video Facade 免费

延迟加载的视频嵌入,先显示缩略图;iframe 仅在点击后加载,以提升页面速度。

设置,见文档中的 Video Facade 区块说明

WooCommerce

24 个区块,在区块插入器中归类于 WooCommerce 下。

Conference Tickets 任一套餐均包含

用于门票类商品分类的价格框,每个都带有数量选择框和实时加入购物车链接。

在线查看:Conference Tickets,位于 门票 页面(在新标签页中打开) 设置,见文档中的 Conference Tickets 区块说明

Store Price Filter 任一套餐均包含

双滑块价格范围控件,可直接对商品网格进行筛选。

在线查看:Store Price Filter,位于 带筛选器的商店 页面(在新标签页中打开) 设置,见文档中的 Store Price Filter 区块说明

Wishlist 免费

购物者收藏的商品,并显示价格、库存及加入购物车按钮。将其放在主题选项中为心愿单选定的页面上。

设置,见文档中的 Wishlist 区块说明

Wishlist Button 免费

将当前产品保存到顾客的愿望清单。可在产品模板和产品卡片中使用。

设置,见文档中的 Wishlist Button 区块说明

Add to Cart 任一套餐均包含

显示当前商品的 WooCommerce 加入购物车表单,可选包含数量输入框。

在线查看:Add to Cart,位于 格纹短裙 页面(在新标签页中打开) 设置,见文档中的 Add to Cart 区块说明

购物车表格 任一套餐均包含

显示 WooCommerce 购物车表格,包括商品行、数量和总计。

在线查看:购物车表格,位于 购物车 页面(在新标签页中打开) 设置,见文档中的 购物车表格 区块说明

Cart Totals 任一套餐均包含

显示 WooCommerce 购物车合计面板,包括小计、运费和结账按钮。

在线查看:Cart Totals,位于 购物车 页面(在新标签页中打开) 设置,见文档中的 Cart Totals 区块说明

Checkout Billing 任一套餐均包含

显示 WooCommerce 结账账单地址表单。

设置,见文档中的 Checkout Billing 区块说明

Checkout Order Review 任一套餐均包含

显示 WooCommerce 结账页订单核对摘要,包含商品明细与总计。

设置,见文档中的 Checkout Order Review 区块说明

交叉销售 任一套餐均包含

显示当前 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 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 免费

访客使用的深色模式切换开关。当“主题选项 > 配色方案 > 深色模式”中的深色模式切换已开启,且放置位置包含页眉时,该开关会显示在站点上。

设置,见文档中的 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 Root 免费

构建页眉的最外层元素:携带变体类名和 data-sticky-* 属性,供主题的吸顶页眉脚本读取。请将 #header-wrap 组(及页眉的其他内容)放入其中。

在线查看:Header Root,位于 首页 页面(在新标签页中打开) 设置,见文档中的 Header Root 区块说明

页眉搜索 免费

页眉搜索切换按钮。输出 #top-search 触发器,主题搜索下拉菜单与其绑定。

在线查看:页眉搜索,位于 首页 页面(在新标签页中打开) 设置,见文档中的 页眉搜索 区块说明

Header Shop Search 免费

页眉行中始终可见的商品搜索框,是店铺与目录场景下对页眉搜索切换按钮的替代方案。可选择带静态图标的简洁搜索框,或带提交按钮的输入组。

在线查看:Header Shop Search,位于 页眉目录 页面(在新标签页中打开) 设置,见文档中的 Header Shop Search 区块说明

Header Side Panel Trigger 免费

用于打开侧边面板的页眉图标。仅在主题选项中开启侧边面板时显示。

设置,见文档中的 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 Topbar 区块说明

Header Wishlist 免费

页眉中的一个心形图标,可链接到心愿单,并显示已收藏的商品数量。

设置,见文档中的 Header Wishlist 区块说明

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 标记。

设置,见文档中的 Language Switcher 区块说明

Mega Menu Column 任一套餐均包含

单个超级菜单列(.mega-menu-column):标题加链接列表、扁平链接或任意小工具内容。可在 Row 区块内放置一个或多个列,作为您的超级菜单内容(外观 > 菜单 > 超级菜单仍控制外层面板的类型和样式)。

在线查看:Mega Menu Column,位于 超级菜单 页面(在新标签页中打开) 设置,见文档中的 Mega Menu Column 区块说明

页面菜单 免费

子页眉页面导航栏,提供吸顶和侧边圆点两种变体:可实现单页锚点滚动或普通链接。每个页面仅使用一个。

在线查看:页面菜单,位于 带子菜单的页面 页面(在新标签页中打开) 设置,见文档中的 页面菜单 区块说明

Top Links 免费

顶部栏链接菜单,可选单级下拉菜单,使用 .top-links 的标记与样式。

在线查看:Top Links,位于 在线时尚店铺 - 商店侧边栏 页面(在新标签页中打开) 设置,见文档中的 Top Links 区块说明

布局

19 个区块,在区块插入器的“布局”下列出。

Column 免费

响应式网格列(.col-*)。可按断点设置宽度,并可在其中放置任何内容。

在线查看:Column,位于 列与网格 页面(在新标签页中打开) 设置,见文档中的 Column 区块说明

Container 免费

响应式 .container 容器。在其中放置行和列,即可构建版块布局。

设置,见文档中的 Container 区块说明

Copyrights 免费

页脚版权栏的一部分:包含链接的版权信息行,或行内链接菜单。将 Wrapper 区块的 Copyrights Bar 变体并排插入,即可同时放置两者。

在线查看:Copyrights,位于 页脚 - 布局 2 页面(在新标签页中打开) 设置,见文档中的 Copyrights 区块说明

页脚关于 免费

一个页脚“About”列,包含徽标、描述和可选地址,使用 .footer-logo 标记。

在线查看:页脚关于,位于 页脚 - 布局 2 页面(在新标签页中打开) 设置,见文档中的 页脚关于 区块说明

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。

在线查看:Hero,位于 板块 页面(在新标签页中打开) 设置,见文档中的 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 区块说明

Row 免费

网格行。在其中放置 Canvas Column 区块,以响应式网格排列内容。

在线查看:Row,位于 列与网格 页面(在新标签页中打开) 设置,见文档中的 Row 区块说明

Page Slider 免费

渲染每个页面在其“滑块”面板中指定的滑块,或您选择的某个滑块。幻灯片、效果和高度需在滑块本身中配置。

在线查看:Page Slider,位于 Canvas Slider 页面(在新标签页中打开) 设置,见文档中的 Page Slider 区块说明

Wrapper 免费

一个裸 HTML 元素,仅包含您指定的类名,并可容纳其他区块。在设计需要精确包裹元素且不需要额外编辑器类名时使用。

在线查看:Wrapper,位于 板块 页面(在新标签页中打开) 设置,见文档中的 Wrapper 区块说明

活动

16 个区块,在区块插入器的 Events 分类下列出。

会议日程 任一套餐均包含

按天分标签的议程表,或一排即将开始的活动卡片,均由活动记录生成。

在线查看:会议日程,位于 Canvas 开发者大会 页面(在新标签页中打开) 设置,见文档中的 会议日程 区块说明

Event Archive Grid 任一套餐均包含

主查询(归档 + 分类)的活动网格。使用 event-entry-grid 局部模板和共享分页。

在线查看:Event Archive Grid,位于 活动 页面(在新标签页中打开) 设置,见文档中的 Event Archive Grid 区块说明

Event Categories 任一套餐均包含

显示分配给当前活动的分类。支持文本、徽章和胶囊样式。仅在 canvas_event 文章类型上渲染。

设置,见文档中的 Event Categories 区块说明

Event Content 任一套餐均包含

输出当前活动的完整文章内容,经由 the_content 过滤器处理。仅适用于 canvas_event 文章类型。

在线查看:Event Content,位于 Event Single 页面(在新标签页中打开) 设置,见文档中的 Event Content 区块说明

Event Date 任一套餐均包含

显示活动的开始和结束日期,可选择显示时间和日历图标。仅在 canvas_event 文章类型上渲染。

设置,见文档中的 Event Date 区块说明

Event Excerpt 任一套餐均包含

显示当前活动的截取摘要。

设置,见文档中的 Event Excerpt 区块说明

Event Image 任一套餐均包含

显示当前活动的特色图片。仅在 canvas_event 文章类型上渲染。

在线查看:Event Image,位于 Event Single 页面(在新标签页中打开) 设置,见文档中的 Event Image 区块说明

Event Location 任一套餐均包含

显示活动场地的名称和地址,可选添加 Google 地图链接和位置图标。仅在 canvas_event 文章类型中显示。

设置,见文档中的 Event Location 区块说明

Event Meta 任一套餐均包含

显示活动元数据:日期、地点、主办方和价格。每个字段可独立切换显示。仅在 canvas_event 文章类型中渲染。

在线查看:Event Meta,位于 活动单页 | 双侧边栏 页面(在新标签页中打开) 设置,见文档中的 Event Meta 区块说明

Event Navigation 任一套餐均包含

显示上一个和下一个活动的导航链接,可配置标签并可选显示缩略图。仅在 canvas_event 文章类型中显示。

在线查看:Event Navigation,位于 活动单页 | 双侧边栏 页面(在新标签页中打开) 设置,见文档中的 Event Navigation 区块说明

Event Organizer 任一套餐均包含

显示活动组织者,可选附带其网站链接和人物图标。仅在 canvas_event 文章类型中渲染。

设置,见文档中的 Event Organizer 区块说明

Event Posts 任一套餐均包含

以响应式卡片网格的形式查询并显示 canvas_event 文章。支持按即将举行、已结束或全部活动进行筛选。可放置在任意页面。

在线查看:Event Posts,位于 活动列表 页面(在新标签页中打开) 设置,见文档中的 Event Posts 区块说明

Event Price 任一套餐均包含

显示活动价格;未设置价格时,显示可配置的免费标签。支持文字和徽章两种样式。仅在 canvas_event 文章类型中渲染。

设置,见文档中的 Event Price 区块说明

Related Events 任一套餐均包含

根据共享分类显示相关活动的网格。仅在 canvas_event 文章类型上渲染。

在线查看:Related Events,位于 Spring Music Fest 页面(在新标签页中打开) 设置,见文档中的 Related Events 区块说明

Event Title 任一套餐均包含

以可配置的标题标签显示当前活动标题,可选择是否添加固定链接。仅在 canvas_event 文章类型中显示。

设置,见文档中的 Event Title 区块说明

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,位于 表单样式 页面(在新标签页中打开) 设置,见文档中的 Form 区块说明

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 区块
学术文章,专辑磁贴,建筑项目,建筑团队,编曲画廊,艺术家气泡,烘焙菜单,理发服务项目,美妆套装,自行车租赁,记账服务,机器人模板,品牌代理作品,品牌工作室作品,咖啡馆菜单,营销活动,能力网格,护理服务,公益事业,频道影片,清洁团队,清洁服务,会议演讲嘉宾,会议赞助商,联合办公空间,创作者展示,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 注册的每个区块(包括仅限演示站点使用的区块),每个区块都配有一个开关,可将其从插入器中移除,并停止加载其前端资源。

导入演示站点后,其区块会出现在它所构建的页面中,可完全编辑,并拥有与其他 Canvas 区块相同的设置面板。回滚演示站点时,这些区块也会一并移除。

共享控件

每个区块都具备这些功能

Canvas 为每个注册的区块提供七项设置,其中前四项也适用于核心区块和第三方区块,因为这些设置是添加到编辑器中的,而非添加到我们的区块中。

在 WordPress 编辑器中选中的 Canvas 区块,侧边栏中展开其设置面板

所选区块的侧边栏。访客所见的每一项都可在此设置,因此无需打开代码视图。

动画

区块进入视口时逐渐显现,可设置速度、延迟和可选的退出动画。动效会遵循访客的“减少动态效果”偏好设置。

自定义 CSS

当核心控件无法实现您的需求时,可为单个区块实例编写 CSS。该 CSS 仅作用于该区块,并会在输出到页面前进行过滤。

自定义属性

在侧边栏为区块的根元素添加数据属性或 ARIA 属性,以便第三方脚本或测试工具能够找到该元素。

显示条件

按登录状态、用户角色、设备尺寸或某个主题选项的值显示或隐藏区块,使同一页面能够服务于多类受众。

区块默认值

按您喜欢的方式设置一次区块,然后将这些设置保存为默认值,之后在本站点插入的每个区块都将采用该默认设置。

全局样式预设

保存一个命名样式,并将其应用到站点中任意位置的区块。之后修改该预设,所有使用它的区块都会随之更新。

按区块加载资源

页面只会加载其实际渲染的区块所需的 CSS 和 JavaScript,因此没有滑块的页面永远不会下载滑块脚本。

从一个版块开始

183 个区块图案

模式会将一个现成的版块作为普通区块放入页面,之后您可以再编辑。区块内部不包含原始 HTML,因此每个标题、图片、图标和链接都会在侧边栏中作为可控制项保留。

插入器中的图案分为 17 个类别:

  • 页眉
  • 内容
  • 表单
  • 页脚
  • 博客
  • Hero
  • Gallery
  • 行动号召
  • 定价
  • 页面
  • 功能
  • 活动
  • 弹窗
  • 社交
  • 客户评价
  • 作品集
  • 常见问题

图案带有标签而非被锁定:高级图案会在插入器中保留可见的标签,当其中的区块为免费区块时,它会完整渲染。随主题提供的 173 个区块模板和 4 个样式变体同样适用此规则,可在站点编辑器中使用。

两种套餐均包含全部区块

没有需要逐级攀升的区块等级。年付和终身方案均包含相同的 314 个区块、183 个模式和 88 个演示站点。