简介
本课程将探讨如何高效使用媒体与文本块。该区块专为并排组合图片/视频与文字设计——非常适合创建吸引人的内容版块,例如特色亮点、个人介绍、团队展示,甚至联系页面。
添加媒体与文本
输入/media and text添加区块。首先从媒体库选择图片或本地上传,切记添加替代文本。接着在右侧输入文字内容,将首段文字通过区块工具栏转换为标题并设为超大号。然后在文本下方添加按钮区块或行动号召,并将样式改为线框。
自定义设置
通过列表视图选择父级区块,将对齐方式改为宽幅。工具栏可切换图片左右位置。在右侧”样式”中可修改区块背景色(我将使用自定义颜色),并添加内边距。返回”设置”后还会发现:通过滑块调整媒体宽度;默认勾选的”移动端堆叠”选项(小屏设备内容会垂直排列);以及”裁剪图像填满”功能(当图片尺寸不足时,可启用自动裁剪并通过焦点选择器指定裁剪后居中区域)。
使用预设模板
点击左上角插入器,搜索”Media and text”直接选用主题自带的预设模板。选中区块后还能调整文本垂直对齐(顶部/中部/底部),在样式设置底部还能添加边框或圆角。最后通过替换图片和修改背景色快速完成模板定制。
结语
媒体与文本块能创建平衡布局,并确保跨设备浏览体验的一致性。
实践练习
使用WordPress Playground重现以下设计:

媒体与文本块的截图,左侧是内容,右侧是图片
步骤:
1. 添加一个组
添加一个媒体与文本块,并选择宽宽度
2. 在左侧列添加内容
标题:Man’s best friend
三个段落:
段落1:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
段落2:Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
段落3:Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
按钮块:Learn more
3. 在右侧列添加以下图片
图片链接:https://unsplash.com/photos/shallow-focus-photo-of-short-coated-brown-dog-eIJuI0TW0sQ
4. 修改样式
将背景颜色改为 #FBFAF3
添加水平和垂直内边距:小
启用“裁剪图片以填充”
使用焦点选择器在裁剪后将狗置于中心