创意网页设计怎么做：先定转化目标，再按 5 步落地并用 3 条线验收

创意网页设计最容易走偏的地方，是把它当成画一张图。图再好看，交出去就死了，改一句标题都得回去翻设计文件。WordPress官方语境里，这件事对应的是区块编辑器加区块样板，做出来的页面在后台能一直改。猎者出海做英文站，页面从来不是交付那天就完事，后面每一版都要动。

所以顺序得反过来。先定这一页要读者做什么，再拿样板把页面搭出来，最后用三条线验收：响应式、Core Web Vitals、样板还能不能继续编辑。样板是区块插入器Patterns标签里的预定义布局，插进页面以后区块还能改内容和配置，这一点决定了它跟一张设计图是两回事。

• 是什么：区块编辑器加区块样板，WordPress官方定义的模块化搭建方式。
• 怎么做：先定转化目标拆区块清单，再从样板目录或主题的/patterns找起点，插进去换成自己的内容。
• 验收三条线：响应式、Core Web Vitals、样板可编辑性，三条都过才算交付。
• 避坑：按设备型号定断点、给viewport加缩放限制，官方都明确不推荐。

这篇讲从转化目标到上线验收的完整动作，每一步都给出问题以后回哪里查。这个栏目里其他工具的用法，收在其他工具里。

创意网页设计是什么：官方语境里对应区块编辑器加区块样板

WordPress官方给区块编辑器的定义是「The Block Editor is a modern paradigm for WordPress site building and publishing.」它用区块这套模块化系统来组织和排版内容，目标是做出适合网站和数字产品的丰富布局。放在创意网页设计这件事上，你设计的是区块怎么组合、怎么分组、怎么在不同屏幕上收放。

区块是段落、标题、媒体、嵌入这类独立元素，每个区块有单独的编辑和格式控件。一页内容就是按顺序排下来的一组区块，顺序和分组变了，版面跟着变。

区块样板本质上是一个或多个预先配置好的区块，可以理解成一组可复用的区块。样板在WordPress5.4引入，作用是减少建内容所需的时间，也是学习不同区块怎么组合出效果的好方式。它适合当用户插入文章和页面内容的起点，也适合放在模板内部用。

响应式网页设计是官方给出的设计策略：按用户需求和设备能力改变布局，手机上一栏，平板上两栏，桌面上三到四栏。它在设计阶段就要算进去，页面搭完再补，改动量会大很多。

区块、区块样板、模板部件三者差在哪

区块是单个元素。样板是一组预先配置好的区块。模板部件也是可复用的区块组，功能跟样板接近，区别在样板还能用PHP，可以在样板里做文本国际化、动态拼接图片URL。模板部件类样板只支持Header和Footer两个区域，自定义模板部件区域目前不支持。

拿页头举例。页头本身可以是模板部件，页头里那套左logo、右导航加按钮的排版可以做成样板，插到别的页面里复用。这个区别决定你改东西时该去哪一层找。

为什么说是模块化搭建，不是画一张图

样板插进页面以后是活的区块。段落、图片、按钮都能单独改，要改单个区块的完整编辑能力，在区块检查器里选中样板，或者在区块设置侧栏点Edit pattern。还有一个content-only模式，只允许改文本、换图片这类基础内容改动，防止误改布局。

装主题这件事，装完以后区块一多，改一处牵动一片，找不到谁套着谁。先把区块清单写出来再进编辑器，能省掉不少来回。

设计在这里的产物是一套能重复用的区块组合。版面基本功还是要练，平面设计版面排版可以对照着看。

创意网页设计怎么做：先定转化目标，再按5步落地

转化目标是起点。先定这一页要读者做什么，只选一个为主的：填表、发询盘、加购、下载。定完再往下拆，不先定这一步，后面选样板就没有标准。

第1步 定转化目标，把页面拆成区块清单

动作是把页面拆成五段：首屏、信任背书、服务或功能说明、价格、行动按钮。每一段写清楚放什么内容。首屏放一句给谁解决什么问题的标题，加一个按钮；信任段放案例、评价、资质；价格段放套餐和对比。写完清单，再进样板目录。

理由是样板按布局给，你先有清单，才知道哪一段可以直接套、哪一段要自己拼。没有清单就变成逛样板，逛到哪个顺眼用哪个，页面拼完不知道要人干什么。

出问题回查：上线后没人提交，先看首屏有没有说清给谁解决什么，行动按钮是不是被放到价格前面，表单字段是不是太多。表单那部分对着网页设计表单改。

第2步 在样板目录或主题的/patterns里找起点

找起点有两个口子。一个是样板目录，入口是wordpress.org/patterns，用分类缩小范围，或者在Search patterns搜索框里找特定样板；看中以后把鼠标移上去点Copy，样板存进剪贴板，回页面或文章粘贴。另一个是自己主题的/patterns文件夹，官方推荐这种注册方式，除了个别边缘情况，比手动调用函数省事。

后台管理入口是Appearance -> Editor，点Patterns；在区块编辑器里选Options -> Manage Patterns，打开的是同一个面板。

出问题回查：样板没出现在插入器，先看文件头有没有效；分类注册了不显示，是还没有样板归进这个分类。

第3步 插入样板并改成自己的内容

在区块编辑器顶部工具栏点加号添加新区块，点Patterns标签或Synced Patterns标签。用下拉选样板分类，或者点Explore打开弹窗放大看每个样板。点选会插在光标位置，也可以直接拖进内容。

插入后点样板里任一区块就能改内容，跟改普通区块一样。默认图片建议换成自己的；要用样板里的原图，用Upload external image按钮传到自己的媒体库。标题和正文字体的搭配，创意字体设计里有做法。

出问题回查：改完内容布局乱了，多半是动到了外层容器。把内容改动和布局改动分开，用content-only模式改文字和图片，布局另外处理。

第4步 自建样板：从拼区块到写文件头

最省事的做法是在编辑器里拼。选中要变成样板的一个或多个区块，点三点菜单打开更多设置，点Create pattern/reusable block，输入名称，需要同步就打开Sync，点Create。建好的样板在插入器的Patterns -> My Pattern或Synced Patterns里能找到。

要做成主题自带的样板，拼好以后点工具栏的⋮图标，点Copy拿到代码，把带区块标记的文件放进主题的/patterns文件夹。只要文件头有效，WordPress会自动注册。文件头至少加Title、Slug、Categories三个字段，还可以设Description、Viewport Width、Inserter、Keywords、Block Types、Post Types、Template Types。Viewport Width是预览样板时iframe视口的宽度，单位像素。

官方建议把大多数样板包在Group、Cover或其他容器区块里，方便用户整体移动，外层加一个CSS类做统一样式。同一个样板只能用一种方式注册，两种方式可以混用，单个样板不能重复注册。

出问题回查：文件放进去了没反应，查文件头字段；样板想只在某类文章里出现，看Post Types；不想让它出现在插入器，检查inserter是不是设成了false。

第5步 加viewport、图片max-width和断点，做响应式

第一件事是在文档head里加meta viewport标签，写法是：

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

width=device-width让页面匹配屏幕宽度，内容能随不同屏幕重排；initial-scale=1让CSS像素和设备无关像素建立1:1关系，页面用满横屏宽度。属性之间用逗号分隔，旧浏览器才能正确解析。

第二件事是图片。样式表里给img设max-width 100%和display block：

img { max-width : 100 % ; display : block ;

同时给img标签加width和height属性，让浏览器提前给图片留出空间，减少布局偏移。

第三件事是断点。从小屏做起，再往上做。不要按设备型号、产品、品牌名或操作系统定断点，让内容决定布局在哪个宽度变。媒体查询可以按宽度、高度、方向、是不是触屏来改样式。

出问题回查：手机上整页缩小，查viewport标签写没写对；页面横向滚动，查有没有固定尺寸的图片或容器比视口宽。

数字和限制：验收要用的三个阈值和版本门槛

Core Web Vitals是Web Vitals的子集，适用于所有网页，所有站长都该测，会在所有Google工具里呈现。当前三项分别管加载、交互、视觉稳定性。

这三项是你决定这一版留还是改的依据。它不给设计打分，只回答页面对读者来不来得及、点得动、跳不跳。

实验室工具能测LCP和CLS，测不了INP，因为模拟环境里没有用户输入，可以用TBT作实验室代理指标。官方强烈建议站点自建真实用户监测，原因是CrUX数据不提供逐次浏览的详细遥测，出了问题定位慢。测量用web-vitals库，调onCLS、onINP、onLCP三个函数，发送数据优先用navigator.sendBeacon()，不可用时回退fetch()。

版本门槛也在这节说清楚。6.1把新建内容时的样板弹窗扩展到所有文章类型，7.0给新区块加了content-only模式，7.1支持不写CSS按屏幕尺寸和交互状态做响应式样式。当前版本是7.1.4，官方推荐PHP8.3或更高、MySQL8.0或MariaDB10.11或更高。

创意网页设计避坑：官方写明不推荐的几个做法和排查顺序

下面这几条在官方页面里都写明了不推荐，逐条对一下自己手上的页面。

误区一 用user-scalable限制缩放

在viewport里加maximum-scale、user-scalable，想把手机上的缩放锁住，官方明确不推荐。原因是这些属性会阻止用户缩放视口，可能造成无障碍问题。要管的是布局别溢出，用户的缩放不该拦。

误区二 按设备型号或品牌名定断点

照着某款手机的屏宽定断点，后面每出一款新机就得改一次，代码难维护。官方说不要按设备类别、产品、品牌名、操作系统定断点，让内容决定布局怎么变。

误区三 图片固定尺寸导致横向滚动

一张固定尺寸的图片比视口宽，整个页面就会被撑出横向滚动条。用户习惯上下滚，不喜欢左右滚，被逼着缩小的体验也很差。给图片设max-width 100%，再加width和height属性预留空间。

误区四 以为Lighthouse能测INP

Lighthouse在无用户的模拟环境里加载页面，没有输入，测不了INP。它能测LCP和CLS，INP看TBT这个实验室代理，真实INP要去现场数据里看。

误区五 以为样板会跟着原样板变

样板加进自己站点以后，跟原样板没有链接，原样板后续的改动不影响你的页面。反过来，你在自己页面里改的也不会影响别人。

误区六 以为锁了一个区块就锁住了整个样板

锁只对那一个区块生效。锁了图片区块的移动，同一组里的Columns区块照样能移动，要阻止移动得把相关区块都锁上。另外UI里做的锁定，主题用户可以从界面覆盖；给客户做的站，这种权限要另外控制。

排查顺序：先Lighthouse两项审计，再看PageSpeed Insights和Search Console

1. 跑Lighthouse的viewport meta审计，确认标签写法正确。
2. 跑Content is not sized correctly for the viewport审计，查溢出内容。
3. 现场数据看PageSpeed Insights和Search Console的Core Web Vitals报告，实验室数据看DevTools和Lighthouse。
4. 改完再跑一遍，三项都过了再决定这一版留不留。

找参考页面的时候，用网页设计案例筛选里的标准筛，别拿一张好看的图当目标。

选工具和找外包：只讲选型和验收，不谈报价

选工具能核的是三样：版本、门槛、后台能不能改。报价和工期随便谈，验收只能落在能核的东西上。WordPress官方页列的特点是Simple、Intuitive、Extendable、Free、Open，平台本身不要钱，这是唯一能当基础的结论。

选型动作有三个。后台Appearance -> Editor点Patterns，看样板管理顺不顺手；新建一篇文章插一个Cover区块，点工具栏Cover图标看Patterns菜单里有没有你的样板；跑Lighthouse两项审计看有没有溢出。三项都过，工具就够用；过不了，换工具也补不上。

字体和设计软件另外算。字体商用授权单独看，免费可商用字体里列的是能商用的那一类；预算紧就先翻设计软件免费档。字体和软件解决的是字体和工具本身，版面结构还是要在编辑器里搭。

找外包，交付物写清楚：交的是后台能改的区块和样板，还是只交一张图。验收用前面三条线，不给设计打分。版权上留一个心眼，样板里的默认图片是外部引用，不在你的媒体库，有被更换或移除的可能，正式上线换成自己的。

替代品的方向可以看Canva可画，页面结构还是要在WordPress里搭。

AI能帮创意网页设计哪几步，人要核什么

AI在创意网页设计里能接的是整理和起草，判断和发布还得人来。下面四步可以直接用。

1. 把转化目标拆成区块清单。把这一页要读者做的事告诉AI，让它按首屏、信任、功能、价格、行动五段列出每段放什么区块，再对着样板目录找现成的。
2. 生成样板文件头草稿。让AI按Title、Slug、Categories、Block Types、Post Types、Template Types六个字段填一版，slug的命名空间人再核。
3. 生成响应式自查清单。按viewport、图片max-width、断点、媒体查询四类列逐项自查表。
4. 生成Core Web Vitals排查顺序。按LCP、INP、CLS三项分别列可能原因和对应工具。

把官方几页文档整理成一张对照表，这种事可以交给猎者出海的AI Agent先做一版，人再逐项核。

下面三条提示词是本文给的示例，不是官方模板，可以直接复制改。

一：我在用WordPress区块编辑器做一个创意网页设计落地页，转化目标是收集咨询表单。请按首屏、信任背书、服务说明、价格、行动按钮五段，列出每段该放哪些区块，并说明哪几段适合直接套用区块样板。

二：请按WordPress样板文件头格式，帮我写一个样板头草稿，字段包括Title、Slug、Categories、Description、Viewport Width、Block Types、Post Types、Template Types，Slug用namespace/pattern-name形式，主题命名空间用themeslug。

三：请给我一份响应式网页自查清单，分四组：meta viewport标签、图片尺寸、断点设置、媒体查询。每组列出要检查的具体项和对应的Lighthouse审计名称。

人要亲手做的是三件。第一件，在后台Appearance -> Editor里点Patterns，看新建的样板有没有出现在列表里，没出现就回主题/patterns文件夹查文件头。第二件，新建一篇文章插一个Cover区块，点工具栏Cover图标看Patterns菜单里有没有你的样板，有就说明区块类型绑定生效。第三件，打开PageSpeed Insights或Search Console的Core Web Vitals报告，看三项在第75百分位是否落在阈值内，决定这一版留还是改。

AI出的是草稿，发布这个动作是人点的。

页面搭完只是开始。转化目标会变，样板要跟着改，三项指标每次改完都要再看一遍。上线以后要持续往里填内容，选题、大纲、成稿这些活猎者出海的AI Agent能接一段，留哪些、改哪些还是你自己判断。

常见问题

样板里的默认图片能用在自建站上吗

能，样板里的图片免费，可以用在自己的站点。但这些图片是外部引用，不在你的媒体库，有被更换或移除的可能。正式上线建议换成自己的，或者用Upload external image传到媒体库。

我用的样板以后被改了会影响我的站吗

不会。样板加进你的页面以后跟原样板没有链接，原样板后续怎么改都不影响你的文章和页面。新样板会持续加入，现有样板也可能被改或移除，这跟你已经用掉的那份没关系。

样板和可复用区块是什么关系

同步样板的行为和可复用区块完全一致，编辑会在所有使用处更新。用的时候开Sync就是同步样板，也可以Detach成普通区块单独改。

样板能自定义、能锁吗

能自定义。插入后点样板里任一区块就能改内容，也能继续加区块或再加样板。锁定方面，区块锁定API能控制用户删除、移动、自定义区块，锁的是具体区块，不是整组。

样板目录谁能用，发现坏样板怎么办

面向有编辑文章权限的内容创作者开放。发现不可用、损坏、有商标问题或不合适的样板，登录WordPress.org账号后，在样板底部点Report this pattern，勾选原因、填说明、点Report，举报不会公开。