使用 WordPress 区块编辑器(Gutenberg)搭建页面的基础方法

从零开始用区块编辑器打造理想页面

第一次接触WordPress后台时,看到那个叫古腾堡的区块编辑器可能会有点懵。其实它就像搭积木一样简单,把文字、图片、按钮这些元素变成可拖拽的模块,不需要懂代码也能做出专业页面。

认识编辑器的基本界面

左侧的工具栏是核心

打开页面编辑器后,左侧竖排的图标控制着整个页面的构建。最上方是添加区块的加号按钮,中间是内容结构导航,下方是页面设置选项。刚开始只需要关注加号按钮和导航功能就够了。

重要提醒:点击右上角的齿轮图标可以切换设置面板,这里能调整页面属性和区块高级选项,但新手前期可以暂时忽略。

两种添加内容的方式
  • 直接输入内容会自动生成段落区块
  • 点击加号按钮从60多种区块中选择

最常用的四种基础区块

段落区块

用来输入普通文字内容,支持基本的格式调整。按回车键会自动创建新段落,想换行但不分段可以按Shift+回车。这是使用频率最高的区块,适合大部分正文内容。

图片区块
  1. 上传本地图片或从媒体库选择
  2. 设置对齐方式和图片尺寸
  3. 添加替代文字有利于SEO
标题区块

分为H2到H6六级标题,建议页面主标题用H2,小节用H3,以此类推。合理使用标题层级能让内容结构更清晰,对搜索引擎也更友好。

按钮区块

设置按钮文字和链接后,可以调整颜色、形状等样式。注意同一个页面不要使用超过三种不同样式的按钮,保持视觉统一性很重要。

实际搭建页面的技巧

先画草图再动手

在纸上简单画出想要的页面布局,标出各区块的位置关系。这样实际操作时就不会手忙脚乱,能提高效率减少返工。

使用组区块管理复杂内容

当需要移动多个关联区块时,可以先将它们组合起来。比如产品介绍中的图片、标题和描述文字,组合后就能整体拖动或复制。

重要提醒:定期点击右上角的"保存草稿"按钮,WordPress不会自动保存编辑中的内容。

利用版式库快速起步

编辑器内置的版式库提供现成的区块组合,比如服务介绍、团队成员等模板。初学者可以套用这些模板再修改内容,比从零开始省时省力。

避免常见的三个错误

  • 不要过度使用分隔线区块,留白才是更好的视觉分隔
  • 同一页面字体颜色不要超过三种,保持阅读舒适度
  • 移动端务必预览效果,某些电脑上的布局在手机显示会错乱

开始你的第一次实践

现在可以新建一个测试页面来练手。从添加标题开始,逐步插入段落、图片和按钮,用组区块整理相关内容。记住所有操作都能撤销重来,多尝试不同区块的组合效果。当看到自己搭建的第一个页面成型时,会发现区块编辑器比想象中简单得多。

掌握这些基础方法后,后续再学习高级功能如区块样式修改、全局颜色设置等会更容易上手。关键是要跨出第一步开始实际操作,纸上谈兵永远学不会页面搭建。

相关文章

Dian11 跨境导航

独立站人用的纯净导航,专为独立站人打造,并不断为独立站人收集整理必备的工具,资源,教程,案例等,帮助独立站人快速成长。

风险提示:Dian11 不提供或背书本网站展示的任何第三方服务。请务必核实对方资质,谨防诈骗。
Copyright © 2025 Dian11 - 浙ICP备2025166871号-2