Church Community 教育与社区落地页设计｜版式拆解与提示词

关于这个模板

Church Community 用一份收录下来的需求简报，解决了面向教育或社区品牌做落地页时的问题。“Take a step toward the light” 就是整套版式要承载的那一行。整套配色是灰调橙色 #5A4C41 打底、白色 #FFFFFF 给文字、灰调橙色 #F1E5C6 承担强调色，页面字体是 Manrope。这一条会把生成页面的技术栈（React、Framer Motion）写出来，而不是藏起来。这个页面的动效控制在一段循环视频打底。从收录的需求简报起步，然后改这个落地页，而不是从零重建。收录的提示词记录于 1448x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1448x1080 的画幅一直到最小的间距档。

适合谁

给按轮次结算、想在第一次修改前就谈定 36px 间距的代理公司用。
产品市场的人需要落地页在背后有5.5s 的循环视频时依然好读。
给需要把落地页的范围收进一个迭代、并且不新增任何素材的产品经理用。

包含哪些内容

链接只在一个断点收起. 导航条是整套构图里最安静的部分：字标、一短行链接和一个 #F1E5C6 操作，全部压在需求简报最小的字阶上。链接比字标小一档，#F1E5C6 操作是导航条上唯一有分量的元素。
间距档位是写明的. 需求简报里的每个尺寸都是能反测量回去的数值：36px 间距。清单里最小和最大的两个值，划定了这套构图的取值范围。
通栏视频垫在文字后面. 素材是一段 5.5s 的片段，按 cover 裁进 1448x1080 的画幅，任何宽度下都不会出现黑边。自动播放不可用时，1448x1080 的封面帧撑住构图，版式不会塌。
越大收得越紧. 由 Manrope 一个字体挑大梁：从标题到支撑句字号断得很干脆，字号越大字距收得越紧，层级因此由字体承担，而不是靠颜色。只要字号和字重留在需求简报放的位置，换字体就是安全的。字阶是写明的，照着用。

动效与交互

标题自己拼装完成

入场动效只集中在一个元素上：打字机式地逐字打出引言行。页面加载时，其他东西都已经就位。在“减少动态效果”下，元素直接出现，布局不变。这份参考在 1448x1080 下收录。

环境动效交给循环

整个环境层就是一段 5.5s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。因为是静音的，循环可以在文案下面跑，不抢声音，也不抢注意力。拍摄或导出按 1448x1080 或更宽的尺寸。

把 Church Community 当规格书读

把它和一个把间距称作“偏好”的模板比：这里同样的值是写明的（36px 间距），所以一次修改要么保住它们，要么明显破坏构图。这个落地页里没有任何一处依赖默认值。

在 Church Community 里先改什么

先改承诺，别先改装饰。把“Take a step toward the light”重写成一句能说清你做什么的话，再用 Manrope 按需求简报里的主标题字号排。把灰调橙色 #F1E5C6换成你自己的强调色，并在动别的东西之前先对着灰调橙色 #5A4C41检查一遍。画幅和字阶都保留，该换的是题材。