Frost新手指南Header与Footer区块模式全解4种页头4种页脚任选【免费下载链接】frostThe ultimate WordPress block theme for website designers and developers.项目地址: https://gitcode.com/gh_mirrors/frost1/frostFrost 是一款面向设计师与开发者的WordPress 区块主题Block Theme主打干净极简的视觉风格。它对新手最大的价值在于内置4 种 Header 区块模式与4 种 Footer 区块模式无需写代码就能在区块编辑器里一键切换快速搭建出专业感十足的网站页头与页脚。为什么Frost的页头页脚切换如此简单Frost 基于 WordPress 的区块主题架构Header 与 Footer 被定义为「模板部件Template Parts」而具体的样式则以「区块模式Block Pattern」的形式提供核心机制如下主题配置theme.json中声明了header与footer两个模板部件默认引用parts/header.html加载默认页头模式parts/footer.html加载默认页脚模式模式库patterns/目录下存放全部页头、页脚及页面区块模式可随时在编辑器中替换也就是说模板骨架是固定的样式是即插即用的。你只需要在编辑器里「替换」模式页头页脚就能整套换装而页面内容完全不受影响。Frost的4种Header页头模式逐一解析模式文件路径视觉特点经典默认页头patterns/header-default.php站点标题在左、导航菜单在右留白充足深色默认页头patterns/header-default-dark.php黑底白字对比强烈适合深色品牌通知栏页头patterns/header-notification-bar.php顶部通栏文案 按钮可上下加细边框深色通知栏页头patterns/header-notification-bar-dark.php黑底白字的公告条促销感更强1️⃣ 经典默认页头header-default最通用的选择左侧「站点标题 导航菜单」两端对齐的 Flex 布局30px 的呼吸感内边距让整体显得清爽利落。适合企业官网、博客等大多数场景。2️⃣ 深色默认页头header-default-dark结构与经典版完全一致只是套上了「对比色背景 基础色文字」的深色配色。如果你的品牌主色较深或者想要更强的视觉张力直接选它。3️⃣ 4️⃣ 通知栏页头header-notification-bar 系列顶部增加一条通栏公告区居中显示一段宣传文案并配一个「Get Started」小按钮上下还有 1px 细边框分隔。非常适合限时活动、新品发布、会员招募等需要制造紧迫感的场景。浅色 / 深色两个版本对应不同风格的正文页头可自由搭配。Frost的4种Footer页脚模式逐一解析模式文件路径视觉特点简约页脚patterns/footer-default.php左版权信息、右社交链接一行搞定超级页脚patterns/footer-mega.php品牌介绍 按钮 三列导航链接信息量大居中CTA页脚patterns/footer-stacked.php大标题「Lets Connect」 联系按钮转化导向三栏页脚patterns/footer-three-columns.php版权、政策链接、社交图标按钮三栏并排1️⃣ 简约页脚footer-default版权年份自动取当前年© 2026 你的公司右侧一排社交链接。轻量、干净小网站或个人博客首选。2️⃣ 超级页脚footer-megaFrost 页脚中信息密度最高的一款55% 宽度的品牌介绍区含「Learn More」按钮「About Us / Services / Connect」三列链接。适合机构、公司官网这类导航层级较多的站点能把杂乱的链接收纳得整整齐齐。3️⃣ 居中CTA页脚footer-stacked把页脚变成「转化区」居中大标题 一段简介 醒目的「Get in Touch →」按钮。如果你希望在用户滑到页面底部时抓住转化机会选它。4️⃣ 三栏页脚footer-three-columns左版权、中政策链接Privacy Policy / Terms of Service、右社交图标按钮X / LinkedIn / Instagram三栏 Flex 均匀分布。适合重视合规与品牌露出的正式站点。 以上 4 种页脚均提供-dark深色变体如patterns/footer-mega-dark.php页头页脚可以深浅混搭一共能组合出 16 种外观。三步切换Header与Footer模式不用写代码进入 WordPress 后台 →外观 → 编辑器点击模板中的Header 或 Footer 区域在顶部工具栏点击「替换Replace」在搜索框输入模式名如frost/header-default-dark或frost/footer-mega点击插入完成小技巧替换后记得点「保存」同一套模式会同步到所有使用该模板部件的页面改一次全站生效。一键换色7套内置配色方案 切换完模式还想换整体色调打开styles/目录可以看到 7 套配色文件配色文件石墨灰styles/graphite.json绿色styles/green.json品红styles/magenta.json橙色styles/orange.json紫色styles/purple.json红色styles/red.json青色styles/teal.json在后台「外观 → 样式」中即可一键应用深色 Header / Footer 会自动匹配对应配色无需手动调整。新手常见问题解答 ❓Q1模式列表里找不到 Frost 的模式Frost 要求 WordPress6.9 及以上版本见readme.txt请先升级 WordPress 再查看。Q2深色模式和浅色模式如何搭配推荐同色系搭配浅色正文配-dark页头做视觉锚点或全深色页头 深色页脚营造沉浸感。Q3能只改文案不改结构吗可以。所有模式中的文案如「Get Started」「Lets Connect」都是普通文本区块直接在编辑器中点击修改即可。小结Frost 把「页头 4 选 4、页脚 4 选 4」的区块模式全部开放给新手经典与深色两种页头气质、四种信息密度的页脚布局再加上 7 套一键配色足以覆盖从个人博客到企业官网的绝大多数场景。装好主题后花 5 分钟在区块编辑器里替换一次 Header 和 Footer你的网站就能立刻拥有专业级的门面 ✨【免费下载链接】frostThe ultimate WordPress block theme for website designers and developers.项目地址: https://gitcode.com/gh_mirrors/frost1/frost创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考