区块参考
Qi 可视化构建器内置 53 个区块，按用途分为页首、内容、转化、基础、媒体、企业、布局、自定义八类。每个区块均可拖拽添加，选中后在右侧面板编辑内容与样式，画布内双击文字也能直接修改。
约定：下方每个区块均标注其类型键（type）——它同时用于后台 Schema、前端渲染与 PHP 渲染函数名（
hualin_block_{type}()）。字段表中的「类型」指编辑面板控件：text 单行文本、textarea 多行、select 下拉、number 数字、repeater 可增删列表（子字段见缩进项）、color 颜色/风格。
页首
用于页面顶部的主视觉区块，通常一个页面只用其一。
首屏 Hero hero
页面主视觉，含眉标、主副标题与双按钮，背景支持深蓝 / 浅色。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 主标题 | text | 大号主标题 |
subtitle | 副标题 | textarea | 主标题下方说明文字 |
btn1 | 主按钮文字 | text | 留空则不显示 |
btn2 | 次按钮文字 | text | 留空则不显示 |
bg | 背景风格 | select | navy 深蓝 / light 浅色 |
首屏幻灯片 hero-slider
多张轮播主视觉，自动播放并带指示点，适合首页多卖点轮播。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
style | 样式 | select | fade 经典居中 / split 左文右图 / boxed 卡片框 / minimal 极简左对齐 |
height | 高度 | select | sm 矮 / md 中 / lg 高 |
slides | 幻灯片 | repeater | 可增删，每张含子字段： |
eyebrow | 眉标 | text | 小标签 |
title | 主标题 | text | — |
subtitle | 副标题 | text | — |
btn | 按钮文字 | text | 留空则不显示 |
内容
构成页面主体的图文与列表类区块，覆盖企业官网最常见的内容形态。
关于图文 about
企业介绍，左图右文，并支持以标签形式展示资质亮点。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
eyebrow | 眉标 | text | 如 ABOUT US |
title | 标题 | text | — |
body | 正文 | textarea | 介绍文字 |
badges | 资质标签 | textarea | 逗号分隔，如「ISO9001 认证,AAA 级信用企业」 |
style | 样式 | select | classic 图文左右 / split 图文分栏 / stats 图文+资质墙 |
服务网格 services
服务/能力清单，支持卡片、列表、图标强调三种排布。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
lead | 副描述 | text | 标题下一行说明 |
cols | 列数 | select | 2 / 3 / 4 |
style | 样式 | select | grid 卡片网格 / list 列表行 / alt 图标强调 |
items | 服务项 | repeater | 每条含 title(标题) + desc(描述) |
案例网格 projects
项目案例展示，首条可放大为推荐案例。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
lead | 副描述 | text | — |
cols | 列数 | select | 2 / 3 / 4 |
style | 样式 | select | grid 卡片网格 / list 列表行 / featured 首条大图 |
items | 案例 | repeater | 每条含 title(标题) + meta(建设单位) |
数据优势 advantages
以「数值 + 标题 + 描述」突出企业实力，最多四列。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 指标项 | repeater | 每条含 num(数值) + title(标题) + desc(描述) |
资讯列表 news
新闻/动态卡片，支持卡片、列表、首条大图。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
cols | 列数 | select | 2 / 3 / 4 |
style | 样式 | select | grid 卡片网格 / list 列表行 / featured 首条大图 |
items | 资讯 | repeater | 每条含 date(日期) + title(标题) |
发展历程 timeline
按年份纵向排列的关键节点时间线。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
lead | 副描述 | text | — |
items | 节点 | repeater | 每条含 year(年份) + title(标题) + desc(描述) |
服务流程 process
以编号步骤展示合作/交付流程。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
lead | 副描述 | text | — |
items | 步骤 | repeater | 每条含 step(序号) + title(标题) + desc(描述) |
专家团队 team
成员头像卡，支持头像卡 / 描边卡 / 紧凑横排。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
lead | 副描述 | text | — |
style | 样式 | select | grid 头像卡 / cards 描边卡 / compact 紧凑横排 |
items | 成员 | repeater | 每条含 name(姓名) + role(职务) + bio(简介) |
客户评价 testimonials
客户/业主评语卡片。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 评价 | repeater | 每条含 quote(评语) + author(姓名/单位) + role(身份) |
合作单位 clients
客户/合作单位名称墙。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
lead | 副描述 | text | — |
items | 单位 | repeater | 每条含 name(名称) |
常见问题 faq
可折叠的问答列表（基于原生 <details>，首条默认展开）。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 问答 | repeater | 每条含 q(问题) + a(答案) |
选项卡 tabs
纯 CSS 切换的内容标签页，无需 JS。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 选项卡 | repeater | 每条含 label(标签) + content(内容，纯文本) |
图片画廊 gallery
多图网格，当前为占位图，可后续替换为真实图片。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
cols | 列数 | select | 2 / 3 / 4 |
items | 图片 | repeater | 每条含 caption(说明) |
图标特性 features
带 Emoji/字符图标的特性卡片，最多四列。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
lead | 副描述 | text | — |
items | 特性 | repeater | 每条含 icon(Emoji) + title(标题) + desc(描述) |
转化
引导用户行动（留资、联系、咨询）的区块。
联系号召 cta
页面收尾的行动召唤，含标题、说明与按钮。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
subtitle | 副标题 | textarea | — |
btn | 按钮文字 | text | — |
style | 样式 | select | band 渐变横幅 / card 居中卡片 / minimal 左对齐极简 |
联系我们 contact
地址、电话、邮箱、时间四宫格联系信息。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
address | 地址 | text | — |
phone | 电话 | text | 自动生成 tel: 链接 |
email | 邮箱 | text | 自动生成 mailto: 链接 |
hours | 工作时间 | text | — |
基础
通用排版与装饰类原子区块。
富文本 richtext
自由 HTML 内容区，支持简单 HTML 与短代码，常用于长文、政策条款。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
html | 内容 | textarea | 支持受限 HTML（wp_kses_post），可放列表/标题等 |
图片横幅 image
整宽图片占位横幅。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
caption | 占位说明 | text | 占位图上的文字 |
间距 spacer
单纯留白，用于区块之间的呼吸感。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
h | 高度 | number | 单位 px（默认 48） |
提示框 callout
单行强调提示（与「自定义 → 提示框」样式一致，这里为基础版）。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
text | 内容 | textarea | — |
tone | 色调 | select | info 信息 / success 成功 / warn 警告 |
分隔线 divider
带上下间距的装饰分隔线。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
style | 样式 | select | line 直线 / dots 圆点 |
space | 上下间距 | number | 单位 px（默认 32） |
大引言 quote
突出展示的引言/金句，带署名。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
text | 引言 | textarea | — |
author | 署名 | text | 如「星澜建设」 |
面包屑 breadcrumb
层级导航（首页 / 列表 / 当前），最后一项为当前页不高亮。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
items | 层级 | repeater | 每条含 label(名称) + link(链接，留空则纯文本) |
媒体
视频模块 video
居中视频播放区，可填入外链在新窗口打开。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
caption | 占位说明 | text | — |
url | 视频链接 | text | 留空仅显示占位播放键；填入则点击外链播放 |
企业
偏 B 端/工程类展示的进阶区块。
数据指标 counter
大号数字指标，支持数值+后缀。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
lead | 副描述 | text | — |
items | 指标 | repeater | 每条含 num(数值) + suffix(后缀如 + / 年) + label(说明) |
服务套餐 pricing
价格/合作方式卡片，可标记「主推」。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 套餐 | repeater | 每条含 name(名称) + price(价格) + unit(单位) + hot(主推：no/yes) + features(特性，每行一项) |
资质荣誉 awards
荣誉/资质卡片墙，带奖牌图标。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 荣誉 | repeater | 每条含 title(名称) + org(颁发机构) + year(年份) |
数据表格 table
通用参数表，表头与单元格均用逗号分隔。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
head | 表头 | text | 逗号分隔，如「指标,参数,标准」 |
rows | 行 | repeater | 每行含 cells(单元格，逗号分隔) |
图标清单 list
带勾选图标的清单（注意：标记样式为内置固定，不在编辑面板暴露）。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 条目 | repeater | 每条含 icon(图标) + text(内容) |
图文英雄 hero-split
左图右文（或反转）的二级主视觉。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 主标题 | text | — |
subtitle | 副标题 | textarea | — |
btn | 按钮文字 | text | 留空则不显示 |
img | 配图说明 | text | 占位图上的文字 |
reverse | 图文反转 | select | no / yes |
图文特性 feature-split
多条图文交替的特性说明，每条可单独反转。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 特性行 | repeater | 每条含 title(标题) + desc(描述) + img(配图说明) + reverse(左右反转：no/yes) |
公告通知 notice
顶部/段落间公告条，可带详情链接。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
text | 内容 | textarea | — |
tone | 色调 | select | info / success / warn |
link | 链接 | text | 留空无「查看详情」 |
地图位置 map
地址+电话信息配合地图嵌入（粘贴 iframe 嵌入链接即生效）。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
address | 地址 | text | — |
phone | 电话 | text | 自动生成 tel: 链接 |
embed | 地图嵌入 | text | 以 http(s) 开头的嵌入链接；否则显示占位图 |
合作伙伴 partners
合作伙伴 Logo 墙，支持静态墙、网格、滚动跑马灯、横向滚动。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
style | 样式 | select | wall Logo 墙 / grid 卡片网格 / marquee 跑马灯 / carousel 横滚 |
items | 伙伴 | repeater | 每条含 name(名称) + cat(类别) |
通用卡片 card
带图标、描述与可选链接的卡片组。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
title | 标题 | text | — |
items | 卡片 | repeater | 每条含 icon(图标) + title(标题) + desc(描述) + link(链接，留空无「了解更多」) |
布局
容器类区块，可嵌套其他区块（在右侧面板「管理嵌套内容」中增删子区块）。
区块包裹(嵌套) section
带背景与内边距的容器，内部可放任意子区块，用于分组与配色分区。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
eyebrow | 眉标 | text | — |
title | 标题 | text | — |
subtitle | 副标题 | text | — |
bg | 背景 | select | light 浅色 / gray 灰底 / navy 深蓝 / accent 品牌橙 |
pad | 内边距 | select | sm 小 / md 中 / lg 大 |
inner | 嵌套内容 | 嵌套 | 由右侧面板编辑的子区块列表 |
分栏容器(嵌套) columns
多列布局容器，每列内可独立放置子区块。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
cols | 列数 | select | 2 / 3 / 4 |
gap | 列间距 | select | sm 小 / md 中 / lg 大 |
cells | 各列内容 | 嵌套 | 每列含 head(列标题) + blocks(子区块列表) |
自定义
原子级可复用组件，既可单独使用，也能放入「区块包裹 / 分栏容器」内做精细排版。
标题块 heading
独立的板块标题（眉标 + 标题 + 副标题），可设级别与对齐。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
eyebrow | 眉标 | text | — |
title | 标题 | text | — |
sub | 副标题 | textarea | — |
level | 标题级别 | select | h2 大 / h3 中 / h4 小 |
align | 对齐 | select | left / center / right |
按钮块 button
单个行动按钮，含样式、尺寸、对齐、新窗口开关。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
text | 按钮文字 | text | — |
url | 链接地址 | text | — |
variant | 样式 | select | primary 主按钮 / line 描边 / ghost 幽灵 / light 浅色 |
size | 尺寸 | select | sm / md / lg |
align | 对齐 | select | left / center / right |
icon | 箭头图标 | select | arrow 显示 / none 不显示 |
newtab | 新窗口 | select | no / yes |
按钮组 buttons
一组并排按钮（如「查看案例 / 联系我们」）。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
align | 对齐 | select | left / center / right |
items | 按钮 | repeater | 每条含 text(文字) + url(链接) + variant(样式：primary/line/ghost/light) |
图片块 imagebox
带比例、圆角、宽度的单图，可加图注与点击链接。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
url | 图片地址 | text | 留空显示占位图 |
alt | 替代文本 | text | — |
caption | 图注 | text | — |
ratio | 比例 | select | auto/16:9/4:3/1:1/21:9 |
radius | 圆角 | select | none/sm/lg/pill |
width | 宽度 | select | sm/md/lg/full |
align | 对齐 | select | left/center/right |
link | 跳转链接 | text | 留空不跳转 |
图标信息块 iconbox
图标 + 标题 + 描述的小组件，图标可为 Emoji / 字符 / 图标库图片地址。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
icon | 图标 | text | Emoji / 字符 / http(s)://*.ico|svg 图片地址 |
title | 标题 | text | — |
text | 描述 | textarea | — |
layout | 布局 | select | stack 图标在上 / inline 图标在左 |
align | 对齐 | select | center / left |
tone | 图标底色 | select | accent 品牌橙 / navy 深蓝 / soft 浅灰 |
图文布局块 mediatext
左右图文，可切换图位置、配按钮，移动端自动堆叠。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
media | 图片位置 | select | left 图左文右 / right 图右文左 |
imgurl | 图片地址 | text | 留空显示占位图 |
eyebrow | 眉标 | text | — |
title | 标题 | text | — |
body | 正文 | textarea | — |
btn | 按钮文字 | text | 留空不显示按钮 |
btnurl | 按钮链接 | text | — |
提示框 alertbox
带图标与四种语义色的强调框（比基础版 callout 多 danger 选项）。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
tone | 类型 | select | info 信息(蓝) / success 成功(绿) / warn 警告(橙) / danger 危险(红) |
icon | 图标 | text | emoji / 字符 |
title | 标题 | text | — |
text | 内容 | textarea | — |
图标清单 iconlist
可设标记样式（勾选/箭头/圆点/数字）与列数的清单。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
marker | 标记样式 | select | check 勾选 / arrow 箭头 / dot 圆点 / num 数字 |
cols | 列数 | select | 1 单列 / 2 两列 |
items | 条目 | repeater | 每条含 text(文字) |
进度条组 progress
一组百分比进度条（如交付率、满意度）。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
tone | 颜色 | select | accent 品牌橙 / navy 深蓝 / green 绿色 |
items | 进度项 | repeater | 每条含 label(名称) + pct(百分比 0-100) |
数据强调块 stat
单个大字数据强调（数值 + 后缀 + 标签 + 补充），适合重点指标。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
value | 数值 | text | — |
suffix | 后缀 | text | 如 年+ / % / 项 |
label | 标签 | text | — |
desc | 补充说明 | textarea | 可留空 |
align | 对齐 | select | center / left |
tone | 数字颜色 | select | accent 品牌橙 / navy 深蓝 |
标签组 taglist
业务标签/关键词云。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
style | 样式 | select | soft 浅底 / solid 实心 / line 描边 |
align | 对齐 | select | left / center |
items | 标签 | repeater | 每条含 text(文字) |
社交图标组 socials
微信/微博/邮箱/电话等社交入口图标行。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
size | 尺寸 | select | sm / md / lg |
shape | 形状 | select | circle 圆形 / round 圆角 / square 方形 |
align | 对齐 | select | left / center / right |
items | 图标 | repeater | 每条含 icon(图标字符) + label(名称) + url(链接) |
折叠面板 accordion
可折叠的内容面板，支持默认展开第一项。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
openFirst | 默认展开 | select | yes / no |
items | 面板 | repeater | 每条含 q(标题) + a(内容) |
评分星级 rating
星级评分展示（1-5 星）。
| 字段 | 名称 | 类型 | 可选值 / 说明 |
|---|---|---|---|
score | 星级 | select | 5/4/3/2/1 |
text | 标题 | text | 如「客户综合评价」 |
sub | 说明 | text | — |
align | 对齐 | select | center / left |