装修这一行的网站有两种完全相反的做法，选错了，再好的设计也白搭。
一种是作品即销售：设计事务所、室内设计工作室、软装公司，客户是先被某一张图打动，才想起来问你是谁。这类网站要慢——大图、留白、克制的排版、一个项目一页深度呈现，让方案自己说话。
另一种是急活：屋顶漏水、车库门坏了、下周要交房急着开工。客户正拿着手机站在现场，他要知道的只有三件事——你多久能来、干不干净、出了问题谁负责。这类网站要快，电话和预约按钮必须在第一屏，翻三屏还没看到联系方式的站，等于没有。
把这两种做法搞混是这一行最常见的错误：拿作品集的版式去做维修业务，或者给设计事务所堆一屏花花绿绿的促销标签。下面 14 款按这条线分了四组：设计事务所与作品集、家装翻新与施工获客、专项工程与维修、家政保洁与园林绿化。每一款都写清了它的页面结构和落地要改的地方。文章后半段有一节讲这一行特有的两条合规红线，做家装的建议看完再写文案。
第一组 · 设计事务所与作品集（01 - 04）—— 让作品说话
01. 四套首页的建筑与室内设计事务所模板 —— 带设计流程页和套餐报价页
Bootstrap v5.2.0 4 套首页 设计流程页 套餐报价页
作品集放在主位，用大图与横向拖拽的方式展示方案，作品集列表页与作品详情页分离，每个项目都能做深度呈现。四套首页在动效与版式上各有侧重，事务所可以按自己的调性选偏克制还是偏张扬的一版。
它比同类多出来的是两个页面，而且都打在这一行的痛点上：
独立的设计流程页——把从初次沟通、方案深化到落地交付的每一步讲清楚。装修客户最大的焦虑不是「好不好看」，是「要多久、中间会不会失控」，这一页专门缓解这个不确定感。
套餐报价页——把不同规模的服务打包成可比较的方案。不是报死价，是让客户对自己该落在哪一档心里有数。
另有两种排版的服务页、服务详情页、团队页、评价页和常见问题页，一家事务所需要对外交代的基本齐了。
要提醒的是报价页在国内需要谨慎处理。装修的最终造价受面积、房况、材料、拆改量影响极大，页面上一旦出现具体数字，客户就会拿它当承诺。稳妥的写法是给区间、写明包含与不包含的项、并注明以实际量房为准——把这一页当成「预算分档说明」而不是「价目表」。
02. 可筛选作品集 + 瀑布流，视觉完成度最高
Bootstrap v5.3.8 可筛选画廊 瀑布流网格 视差滚动
现代简约路线，大量留白，版面节奏是围着作品的呈现质感来排的——极简住宅和大体量商业空间都能装得下。作品集这块是核心：瀑布流网格加可筛选视图，能按住宅、商业、景观等维度组织项目，配平滑的视差滚动和轮播组件。Bootstrap 5.3.8 是本文最新的一档，代码通过 W3C 校验。
「可筛选」这一项对设计公司的实际意义比看起来大。事务所的客户往往带着明确的类型来看——找你做别墅的人不关心你做过多少商场，一个筛选按钮能让他两秒内只看到相关案例。没有筛选的作品集，客户翻到第三屏还是别的类型，通常就走了。
它的短板是对内容的要求高得吓人。这种留白极大、图片极大的版式，是建立在「你有一批质量过硬的空间摄影」的前提上的。如果你手上只有施工现场的手机照片，或者只有渲染效果图，这套版式会把素材的缺陷放大到极致——大图上的噪点、透视歪斜、色偏都无处遁形。拿这套模板之前，先掂量一下自己的图；图不够，先去拍图，比先建站重要。
03. 14 页，顶栏常驻地址电话
Bootstrap v5.0.1 2 套首页 14 页 顶栏联系信息
留白克制的路线，大幅空间摄影铺开时质感很好。首屏文案位强调设计理念与空间价值，配一个「启动您的项目」的动作按钮，把浏览者往咨询上带。栏目精炼：两套首页、作品集与作品详情、服务与服务详情、团队与成员详情、博客三种排版——14 页，刚好覆盖一家设计公司对外要说的话，不做冗余堆砌。
它有一个设计值得单独说：顶部导航区常驻门店地址、电话与邮箱。 这是开头讲的两种做法之间的一个折中——建筑与室内设计虽然是「作品说话」的生意，但成交必须线下接洽（量房、看现场、面谈方案），把联系方式一直挂在顶栏，比藏进「联系我们」页有效得多。这是本组四款里唯一考虑到这一点的。
代价是体量小。14 页意味着没有多业务线的拆分空间、没有资讯栏目的深度、没有报价或流程说明。它适合已经靠口碑和熟人转介绍拿单、网站只作「门面和资料」的工作室；如果你指望网站本身带来线索，第 01 款那种带流程页和报价页的结构更够用。另外 Bootstrap 版本是 5.0.1，相对老一些，要做深色模式的话起点会低一档。
04. 建筑与室内设计作品集模板 —— 最轻，也最好改
Bootstrap 注释完整 Font Awesome + Linea 个人作品集可用
现代简洁，视觉干净利落，同时兼顾了个人作品集和设计类博客的用法。代码文件结构清晰、注释完整，非专业开发者也能顺畅完成内容替换。图标带了 Font Awesome 和 Linea 两套，Linea 是很细的线性图标，和这一行的极简调性挺搭。
放在本组里，它是「个人」那一端：前三款是给公司用的（团队页、服务线、报价、流程），它更适合独立设计师、刚起步的小工作室，或者一个纯粹的设计博客。页面少不是缺点，是匹配度——一个人接单的设计师做一个 30 页的官网，绝大部分页面会长期空着，反而显得冷清。
要注意的是它集成了 jQuery。这不影响使用，但如果你打算把它接进现代前端工作流，或者在意首屏体积，jQuery 那部分做的交互不多，改成原生 JS 之后能直接去掉一个依赖。另外它同样走 Google Fonts，面向国内的站记得把字体换成本地文件或系统字体栈。
第二组 · 家装翻新与施工获客（05 - 07）—— 线索从哪来
05. 首屏内置在线估价，本组最完整的获客结构
Bootstrap v5.0.2 4 套首页 在线估价页 施工流程页
面向家装公司、旧房翻新与整装改造服务商，内容组织完全按这一行的成交逻辑排：先用改造前后的空间照片建立信任，再用施工流程页把「从量房到交付要经历什么」讲清楚，最后由在线估价页收口线索。
估价页独立成页，而且入口在导航常驻——这个位置摆得很对，家装客户最先关心的就是预算，把它藏在「联系我们」里就是白白丢线索。服务模块给了五种排版，整装、局部改造、厨卫翻新、水电、软装这些业务线分开做页面完全够用；首屏还编排了从业年限、完工套数、客户满意度与响应时效四项数据，团队页、招聘页与客户评价也都有。
在线估价表单要做好，有一条经验：别一上来就要手机号。 分步来——先问户型和面积（几乎没有心理成本），再问改造范围，最后才要联系方式，并且在最后一步之前就把预算区间算给他看。先给结果再要联系方式，留资率和后续接通率都会明显不同；反过来，一进来就是一个手机号输入框的表单，绝大多数人直接关掉。模板给的是页面，这个顺序要自己设计。
06. 油漆涂料与房屋翻新模板 —— 四种首屏头部样式
Bootstrap v5.0.2 25+ 页面 4 种首屏头部 价格方案页
专做油漆工程、刷墙、刮腻子、房屋翻新这类相对标准化的施工业务。25 个以上内页覆盖首页、关于、服务项目、案例展示、客户评价、价格方案、FAQ。
它的特点是首屏头部给了四种样式：图片、视频、滑块、纯色背景。 这个选择比看起来重要——不同规模的公司手上的素材完全不同：有实拍视频的用视频头，只有几张好图的用图片头，什么都没有的用纯色背景加一句硬气的文案，反而比堆一堆低质量图片体面。「素材决定版式」这件事，模板作者想到了。
这一行的业务标准化程度高（按平米算、工序固定），所以价格方案页在这里比在设计事务所那边好用得多——刷墙这类活确实可以给出比较接近的单价区间。但同样要写清楚包含什么：是否含腻子层、几遍底漆几遍面漆、材料品牌、是否含家具遮蔽和清理，这些不写清楚，报价页只会变成后续扯皮的起点。
它和第 05 款的分工很清楚：那一款是整装公司的结构（多业务线、估价、流程），这一款是单项工程队的结构（业务集中、报价直接、案例说话）。 按自己的业务复杂度选。
07. 屋面工程模板 —— 首屏三条信任标签，还带建材商城
Bootstrap 4.6.2 3 套首页 预约验房入口 建材商城
屋顶漏水是急活，客户找人时只看三件事：来得快不快、干不干净、出了问题谁负责。这套模板把这三点直接摆在首屏做成并列的信任标签——同周上门、施工现场清洁承诺、全额投保，再配一个「预约验房」按钮。
「预约验房」这个动作设计得比「立即咨询」高明。 它把转化的第一步从「谈生意」降级成「让人来看一眼」，心理门槛低得多；而上门检测一旦谈成，后面的报价就顺理成章。凡是需要现场勘查的业务（防水、改造、安装、绿化），都该把首屏按钮从「联系我们」改成一个具体的、低门槛的动作。
三套首页可对应住宅翻新、商业屋面、维护保养三条业务线。它比同类多的是一块商城：屋面材料与配件可以直接在线卖，商品详情、购物车、结算流程是全的，适合既接工程又走零售的施工队。案例画廊和客户评价补上了「干得怎么样」这一环。
唯一要提醒的是它基于 Bootstrap 4.6.2——这是 Bootstrap 4 的最后一个版本，而 Bootstrap 4 已于 2023 年 1 月 1 日正式停止支持，此后不再有新功能、更新或安全修复。用来快速上线一个内容不多的施工队官网没问题，但如果你打算在这套代码上长期加功能，从 Bootstrap 5 的模板改起长期更划算。
第三组 · 专项工程与维修（08 - 11）—— 越窄越好卖
08. 如特福 —— 45+ 页面、25+ 套首页，体量最大的一款
Bootstrap 5 45+ 内页 25+ 套首页 预约服务页
45 个以上内页，其中光首页布局就有 25 种以上，另有服务、博客、项目、团队等功能页和一个专门的预约服务页。适合屋顶承包商、建筑公司和装修公司。
25 套首页在这个细分行业里显得有点奢侈，但它有个别的用法值得说：承包商往往同时做好几条业务线（屋面、外墙、防水、保温），每条线的客户和关键词都不一样。 与其做一个首页硬塞四种业务，不如用其中四套首页做四个独立的落地页，各自对应各自的搜索词和投放。多首页在这种时候不是浪费，是资产。
代价还是那个老问题：用不到的 20 套首页会一直躺在包里，拖慢构建、干扰维护。上线前把没用的删干净，这一步在体量大的模板上尤其值得花半小时。
另外要注意，这类国外承包商模板的默认业务设定和国内不完全对得上——北美的屋面业务大量围绕沥青瓦、保险理赔展开，模板里的一些区块（比如「保险索赔协助」）在国内没有对应场景，直接翻译过来会让人看不懂，应该替换成本地真实的服务项。
09. 达瑞克 —— 车库门安装与维修，最不追求好看的一款
Bootstrap v4.6.2 3 套首页 26 个页面 获客导向
面向车库门（在国内更常见的对应业务是卷帘门、自动门、电动门）的安装、维修与维护公司。26 个符合 HTML5 标准的页面，3 种首页布局，结构是关于我们、服务介绍、项目案例、联系页这一套。
它明确地不追求视觉效果，这一点是优点不是缺点。 门坏了的客户不会因为你的网站有视差滚动就选你，他要的是「你能修我这种门吗、多久到、多少钱」。这套模板把重点全放在服务内容、案例和联系方式上，页面结构清晰直白，属于那种「不好看但很好用」的类型。本地服务型生意的官网，务实比漂亮值钱。
要处理的有两点。一是业务本地化：国外的车库门是独栋住宅的标配，国内对应的更多是商铺卷帘门、小区道闸、别墅庭院门，服务项和案例图都要换成本地场景，直接沿用会显得很怪。二是框架版本：Bootstrap 4.6.2，和第 07 款一样属于已停止支持的版本，短期能用，长期迭代要有心理准备。
10. 泳池清洁与维护，配色可切换
Bootstrap 5 4 套首页 配色可切换 多套图标库
面向泳池清洁公司和游泳池维护服务商，风格简洁现代但有高端质感——泳池服务在国内主要面向酒店、会所、别墅和公共场馆，客户对「专业、可信」的要求高于对「便宜」的要求，这个调性是对的。4 种首页方案配多样化的内页，配色方案支持便捷切换。
技术上它带了 Wow JS 滚动动画和平滑滚动，图标库集成了四套（FontAwesome、ElegantFont、ET-LineFont、IcoFont）。四套图标库是典型的「给多了」——实际用到的图标不会超过三十个，却要加载四份字体文件。二次开发时挑一套留下、其余删掉，或者把用到的图标转成 SVG 内联，首屏能省下可观的体积。这类清理在国外模板里几乎每次都值得做一遍。
另外 Wow JS 和第 04 款的 jQuery 是同一类问题：老库、功能能被更现代的方案替代（滚动入场用 IntersectionObserver 或 CSS 滚动驱动动画都行）。不动它也能跑，但如果你在做性能优化，这是最容易摘的果子。
11. 木工与家具定制模板 —— 12 种首页 Demo，最适合手艺人
Bootstrap v5.2.1 12 种首页 Demo 36+ 内页 预约页面
面向木匠、家具制作、家居维修与工匠团队，36 个以上内页，光首页 Demo 就有 12 种风格。内置图库、博客、客户评价、团队展示和预约页面，带可用的留言表单。
它在本组里的位置很特别：前三款卖的是「快速解决问题」，它卖的是「手艺」。 定制家具、老家具修复、实木工艺这类生意，客户愿意等、愿意多付钱，看的是工艺细节和过程——所以图库页在这里比案例页更重要，一张刨花飞起的照片、一张榫卯拼接的特写，说服力远超一段文字。这类网站的内容策略应该是「过程 > 成品」，而模板里的博客模块正好可以用来做工艺记录，长期还能带来搜索流量。
12 种首页 Demo 对一个手艺人工作室来说明显是多的，实际会用到一套。但它的价值和第 08 款一样——如果你同时做定制、修复、翻新三条线，可以各配一个入口页。不做拆分的话，选一套之后把其余删掉。
第四组 · 家政保洁与园林绿化（12 - 14）—— 上门服务的共同结构
12. 家政清洁服务模板 —— 4 套首页 36 页，覆盖面最广
Bootstrap 5 4 套首页 36 个内页 定价页 W3C 校验
适用面相当广：家庭保洁、公寓清洁、办公室清洁、工业清洁、家政中介、油漆施工、水电维修、洗涤服务——只要是上门类的居家或商业维护业务，套上这套模板都不违和。4 套首页配 36 个内页，服务介绍、团队展示、定价、联系这些都有，代码通过 W3C 验证，注释完整。
上门服务这一类生意在网站结构上有个共同点值得说清楚：客户真正在意的是「进我家的是谁」。 所以团队页在这里不是装饰，是核心转化页——阿姨或师傅的照片、从业年限、培训与背调情况、服务过多少户，这些内容比首页大图重要得多。模板给了团队页，内容要自己填得实。
定价页同理：保洁是少数几个真的可以在网页上明码标价的家居服务（按面积、按小时、按套餐），把价格写清楚能筛掉大量无效咨询，比「电话咨询」高效。但要注明包含项——是否含玻璃、油烟机、是否自带工具耗材、超时怎么算。
要改的仍是那两样：Google 地图换成国内地图服务；如果做的是多城市或多网点的家政公司，每个网点该有独立页面而不是一个总的联系页。
13. 园林绿化与庭院养护模板 —— 12 页，最精简的一款
Bootstrap v5.3.8 12 个页面 前后对比案例 养护套餐报价
服务于园林绿化、庭院设计和草坪养护，自然绿配色，大图能把绿植质感衬出来。服务模块适合陈列景观设计、绿化施工、草坪修剪、苗木养护、季节性打理，每项都有详情页展开工艺与周期。项目页用改造前后的实景对比来呈现——这类生意最有说服力的内容就是这个。价格页公示常规养护套餐，团队页展示园艺师阵容，另有 FAQ（回应周期与养护频次）和博客（做植物养护科普）。
整站只有 12 页，是本文最精简的一款，但询盘路径铺得很顺：首页看质感 → 服务页看能做什么 → 项目页看做过什么 → 价格页看大概多少 → 联系页留资。这个链路完整比页面数量重要得多——很多五十页的模板反而在某一环上断掉，客户看完案例找不到下一步该点哪里。
值得一提的是它对「养护」这条线的重视。绿化行业的一次性施工是低频生意，真正稳定的收入来自周期性养护合同，而养护套餐正是可以标准化报价、可以在网上直接成交的部分。模板把这一块单独做了页面，方向是对的。
短板是内容深度：12 页没有多业务线的拆分空间，苗木、工程、设计、养护如果要分别投放，得自己扩页面。
14. 海伦娜 —— 6 套首页 + 6 套单页，园艺类里最全的
Bootstrap 5 6 套首页 50+ 内页 RTL MegaMenu
面向园艺、景观设计、草坪护理、花店等绿色服务行业，6 套首页加 6 套一页式风格，50 个以上功能内页，服务展示、团队介绍、客户评价、预约页面都齐，另有 MegaMenu 多级导航和 RTL 语言支持。
它和第 13 款是同一行业的两个体量档：那一款 12 页，适合一个园艺师团队或社区绿化服务商；这一款 50 多页，适合业务线多、有花店零售、有工程也有养护的综合型公司，MegaMenu 正是为多层级栏目准备的。选哪个不看喜好，看你实际有多少内容能填——空着的页面比没有页面更伤信任。
要留意它的插件构成：轮播同时集成了 Slick 和 OwlCarousel 两个库，而这两个都依赖 jQuery，做的又是同一件事。和本文其他几处的建议一样：留一个，或者统一换成 Swiper，能连带把 jQuery 一起去掉。 RTL 支持面向中东和东南亚市场，纯国内站用不上，上线前删掉能让样式表瘦一大圈。
上线之前：这一行的两条红线
以下只是把公开的规定整理出来，不构成法律意见；具体到你的资质与业务范围，请咨询专业人士或主管部门。
一、案例图不能「虚构效果」。 《广告法》第二十八条列举了构成虚假广告的情形，其中第（四）项是「虚构使用商品或者接受服务的效果的」，第（二）项则涵盖服务的内容、质量、价格等信息与实际情况不符且对购买行为有实质性影响的情况。落到这一行最常见的两个动作上：
用渲染效果图冒充完工实景——效果图当然可以用，但要标明它是效果图；把它放在「完工案例」栏目里不加说明，就有被认定为虚构服务效果的风险。
改造前后对比图——本文第 05、13 款都以此为核心卖点。前后图本身没问题，问题在于「前」和「后」必须是同一个项目、同一个角度、同一个真实结果，不能拿别人的成品配自己的毛坯，也不能靠打光和后期把差距做出来。
二、施工内容本身有法定禁区。 《住宅室内装饰装修管理办法》（建设部令第 110 号）第五条明确禁止：未经原设计单位或具有相应资质等级的设计单位提出设计方案，变动建筑主体和承重结构；将没有防水要求的房间或阳台改为卫生间、厨房间；扩大承重墙上原有的门窗尺寸、拆除连接阳台的砖混墙体；损坏房屋原有节能设施等。第六条则规定，未经批准不得搭建建筑物构筑物、改变住宅外立面或在非承重外墙上开门开窗、拆改供暖管道设施、拆改燃气管道设施——其中前两项需经城市规划部门批准，后两项分别需经供暖、燃气管理单位批准。
这条对网站文案的直接影响是：服务列表里不要出现「打通阳台」「拆墙扩窗」「一体化改造」这类可能触及承重结构的表述，案例图里也不要展示这类做法。 本文第 05 款那种「旧房改造 / 整装」类模板的示例文案尤其要逐条看一遍——国外模板的服务项是按当地规则写的，照搬过来可能直接写了国内不允许的内容。
怎么选：先回答一个问题
你的客户是「慢慢挑」还是「急着找」？ 这个问题决定了你该看哪一组。
慢慢挑的（设计、定制、软装、高端翻新）看第一组和第 11 款：作品和过程是主角，联系方式可以往后放，但一定要有——第 03 款的顶栏常驻联系信息是这一组里最实用的设计。
急着找的（漏水、门窗、疏通、保洁、除虫）看第二、三、四组：首屏必须能立刻回答「多久能来、干不干净、谁负责」，第 07 款的三条信任标签加「预约验房」按钮是本文最好的样板，值得抄到任何一个急修类业务上。
还有一条跨组的经验：本文有 6 款带了报价或估价页（第 01、05、06、12、13 款以及第 07 款的商城）。这一行客户的第一个问题永远是钱，把它挡在联系表单后面只会赶走人。能标价的标价（保洁、养护），不能标价的给区间和分档说明（装修、设计），最差也要给一个「怎么算」的解释页。 什么都不说是最糟的选择。
几个常被问到的问题
Q：只有效果图没有实景照片，网站还能做吗？
能，但必须标明。做法是把「设计方案」和「完工案例」分成两个栏目——方案栏目放效果图并注明是设计示意，案例栏目放实拍。这样既不违规，实际观感也更专业：客户看得出你既有设计能力也有落地能力。最忌讳的是混在一起让人猜，被识破一次，之前建立的信任全部作废。另外实拍照片不需要很贵的摄影，一部手机、挑好时间的自然光、把镜头放平（别仰拍导致墙线歪斜），就已经比大部分同行强了。
Q：本地服务的网站怎么做 SEO？
三件事。一是把城市和区域写进页面——标题、正文、联系信息里出现真实的城市与服务范围，「XX 市屋面防水」这类词的竞争远小于泛词。二是加 LocalBusiness 类的结构化数据，把地址、电话、营业时间、服务区域标记出来。三是别用模板堆砌多城市页面——把同一篇文章换个城市名复制五十份，是搜索引擎明确打击的做法；真要做多城市，每个页面要有真实不同的内容（本地案例、本地团队、本地服务范围）。另外这一行的博客很值钱：「墙面开裂怎么处理」「泳池水浑是什么原因」这类问题型搜索量大、竞争小，而且搜的人正好就是有需求的人。
Q：设计公司能把甲方项目的照片放到自己网站上吗？
这件事取决于合同。商业空间项目通常在设计合同里就约定了作品展示权，住宅项目则涉及业主隐私，最好单独确认。 稳妥的做法是在合同里预先写一条作品展示条款；已经做完的项目，发照片前给业主发个消息确认一句，成本极低。涉及私宅时，避免出现门牌、小区名、可识别的家庭物品。这一步很多设计公司会忽略，直到出问题。
Q：在线估价表单要不要直接给出价格？
给区间，不给死数。装修造价受房况影响太大，网页上算出来的任何一个精确数字，客户都会当成承诺，最后量房一涨价就是纠纷的开始。比较好的做法是：算出一个区间，同时明确列出这个区间包含哪些项、不包含哪些项，并说明最终以现场量房为准。 这样既满足了客户「大概多少钱」的需求，也没有给自己挖坑。第 05 款那种独立估价页正适合承载这些说明文字。
Q：上门服务收集客户地址，有什么要注意的？
地址、手机号、姓名都是个人信息，需要有隐私政策、说明收集范围与用途、提供更正和删除的途径。本文这些国外模板自带的隐私政策页是通用文本，不能照搬，要按你实际收集的字段重写。另外一个实际问题：预约表单里别一次性问太多——先问区域和服务类型，最后再要详细地址，转化率和信息安全都更好。
本文的 14 款都在童哲网网站模板板块。相关的几篇：企业官网模板（建材、工程类企业的通用结构）、个人简历与作品集网站模板（独立设计师的另一条路）、落地页与单页 HTML 模板（做单条业务线的投放页）。
