古腾堡编辑器以「区块(Block)」为核心,插入文字、图片等内容时,本质是添加对应类型的区块并编辑。这种方式灵活度高,能精准控制每个元素的样式和位置。以下是详细操作步骤:
一、插入文字:用「段落」和「标题」区块构建内容
文字是文章的主体,古腾堡通过「段落」和「标题」区块实现文字排版,操作如下:
1. 插入段落文字(正文内容)
- 方法 1:进入文章编辑页后,默认显示「开始写作或键入 / 以添加块」提示,直接输入文字,系统会自动创建「段落」区块。
- 方法 2:点击编辑区的「+」图标(区块插入器),搜索「段落」并点击,生成空白段落区块后输入内容。
格式调整:
选中段落区块,右侧会显示「区块」(区块设置)面板,可设置:
- 对齐方式(左对齐、居中、右对齐、两端对齐);
- 文字大小(小、正常、大、特大);
- 文字颜色(点击颜色方块选择,注意与背景色对比,确保可读性);
- 背景色(为段落添加底色,突出重要内容)。
2. 插入标题(划分内容层级)
标题用于区分文章结构(如章、节),建议按「H1-H6」层级使用(H1 通常为文章主标题,已默认在编辑页顶部,无需重复添加)。
操作步骤:
- 点击编辑区「+」图标,搜索「标题」并选择,生成标题区块。
- 输入标题文字(如「一、安装前的准备工作」)。
- 选中区块,在右侧面板的「标题级别」中选择 H2-H6(H2 用于一级小标题,H3 用于二级小标题,以此类推)。
技巧:输入文字后,选中文字并按 Ctrl+B(粗体)或 Ctrl+I(斜体),可快速设置文本样式。
二、插入图片:用「图片」区块添加图片并优化
图片能让文章更生动,古腾堡的「图片」区块支持上传、调整样式和优化,步骤如下:
1. 插入图片的 3 种方式
- 方式 1:上传新图片点击「+」图标 → 搜索「图片」→ 点击「上传」→ 选择电脑中的图片文件 → 等待上传完成。
- 方式 2:使用媒体库中的图片若图片已上传过(如之前插入过的图片),点击「图片」区块后选择「媒体库」→ 勾选目标图片 → 点击「选择」。
- 方式 3:直接粘贴图片在电脑中复制图片(右键「复制」),回到编辑区右键「粘贴」,系统会自动创建图片区块并上传。
2. 调整图片样式(必做优化)
选中图片区块,右侧面板可设置以下关键参数:
- 对齐方式:
- 左对齐 / 右对齐:图片靠侧边,文字环绕显示;
- 居中对齐:图片居中显示,上下为文字;
- 宽幅对齐:图片占满编辑区宽度(适合大图)。
- 大小:拖动「宽度」滑块调整比例(建议保持「约束比例」勾选,避免图片变形)。
- 链接:点击「链接」输入框,可将图片链接到其他页面(如点击图片跳转到高清图页面),无需链接可留空。
- 替代文本(Alt 文本):输入图片描述(如「WordPress 安装步骤截图」),帮助搜索引擎识别图片内容,提升 SEO 且便于无障碍访问。
3. 常见问题解决
- 图片上传失败:检查图片大小(建议单张不超过 5MB)、格式(支持 JPG、PNG、WebP),或刷新页面重试。
- 图片模糊:确保上传原图(分辨率至少 1000px 宽),避免放大超过原图尺寸。
三、插入视频:用「视频」区块添加本地或在线视频
无论是自己拍摄的视频,还是 YouTube、B 站等平台的视频,都能通过「视频」区块插入:
1. 插入本地视频(自己上传的视频)
- 点击「+」图标 → 搜索「视频」→ 选择「上传」→ 选择电脑中的视频文件(支持 MP4、WebM 格式)。
- 上传完成后,视频会自动显示在区块中,可点击播放测试。
注意:本地视频文件较大,可能占用服务器空间并拖慢加载速度,建议小视频(100MB 以内)才用此方式,大视频优先用在线平台。
2. 插入在线视频(推荐!)
通过视频平台链接插入,无需占用服务器空间,加载更快:
- 打开视频平台(如 YouTube、B 站、腾讯视频),找到目标视频,复制分享链接(如
https://www.bilibili.com/video/BV123456)。 - 在古腾堡编辑区,直接粘贴链接 → 系统会自动识别并创建视频区块,显示视频播放器。
支持的平台:YouTube、B 站、腾讯视频、优酷、爱奇艺等主流平台,粘贴链接后等待 2-3 秒即可加载。
3. 视频样式调整
选中视频区块,右侧面板可设置:
- 对齐方式(同图片,左 / 右对齐可让文字环绕);
- 宽度(调整视频播放器大小,建议不超过 1000px 宽,避免在手机上显示不全);
- 自动播放:不建议开启(多数浏览器会阻止自动播放,影响体验)。
四、插入链接:让文字、图片关联其他内容
链接是网站的「血管」,可将内容与其他页面、外部网站关联,古腾堡支持为文字、图片添加链接:
1. 为文字添加链接(超链接)
- 选中需要添加链接的文字(如「点击查看详细教程」)。
- 点击上方弹出的工具栏中的「链接」图标(链条形状),或按快捷键
Ctrl+K。 - 在输入框中粘贴链接地址(如站内页面链接
https://你的域名/教程或外部链接https://example.com)。 - 可选设置:
- 勾选「在新标签页中打开」(外部链接建议勾选,避免访客离开你的网站);
- 点击「链接设置」图标(小齿轮),可添加链接标题(鼠标悬停时显示的提示文字)。
- 点击「回车」或「应用」完成设置,文字会变成蓝色并带下划线,表示链接添加成功。
2. 为图片添加链接
- 选中图片区块,右侧面板找到「链接」输入框。
- 输入链接地址(如点击图片跳转到产品详情页)。
- 勾选「在新标签页中打开」(按需选择),点击空白处保存。
3. 移除链接
- 文字链接:选中带链接的文字,点击工具栏的「移除链接」图标(链条带叉),或按
Ctrl+K后删除链接地址。 - 图片链接:选中图片,在右侧「链接」输入框中删除地址即可。
五、新手操作小贴士
- 区块操作快捷键:
- 快速添加区块:输入
/+ 区块名称(如/图片直接调出图片区块); - 移动区块:选中区块后按
↑/↓箭头键,或拖动区块左侧的「⋮⋮」图标; - 删除区块:选中区块后按
Delete键,或点击区块工具栏的「删除」图标。
- 快速添加区块:输入
- 实时预览:点击编辑页右上角的「预览」按钮,查看链接是否生效、图片 / 视频是否正常显示。
- 避免过度排版:文字颜色、背景色不宜过多(建议不超过 3 种),保持页面整洁;图片和视频尺寸统一(如宽度均设为 800px),提升美观度。
通过以上步骤,你可以轻松在古腾堡编辑器中插入和编辑文字、图片、视频与链接。记住:每个元素都是独立的「区块」,选中后在右侧面板调整设置,就能实现精准排版。多练习几次,很快就能熟练掌握!