在阅读下面步骤之前，您可以参考此视频，以更好地了解如何添加带有图排尿和文本的部件。
在本文中，您将了解到如何制作包含图片和文本的部件以及如何控制其布局。
创建1列部件
步骤 1: 构建布局
首先，从左侧边栏菜单里选择 添加元素 > 元素 > 布局。 选择Full Layout并将其拖到页面上。
选择部件元素后，转到右侧的元素检视板。 选择 样式选项卡 > 背景 > 图片 > 在此处插入该部件的背景图片。
要使该部分成为横幅，可以在间距参数中调整内边距和外边距，并在更多设置中调整背景位置或背景大小或与背景图片相关的任何内容。
在此示例中，该部件设置内边距为顶部：40px; 右：500像素； 底部：500像素，左侧：0像素。 背景位置为居中； 背景尺寸为封面，如下图所示。
重要提示：在“全部”视图中设置固定值后，它将应用于所有视图（平板电脑和移动设备），默认情况下这个不是响应式设计。 下面提供解决方案。
转到添加元素 > 元素 > 标题 ，然后将一些变体拖动到该部件。 根据需要对其样式进行修改，然后选择按钮元素重复刚才的操作。
请看！ 这是带标题和按钮的1个列部件在实时视图上的结果。
步骤 2: 优化移动设备上的设计
您可以通过在顶部栏中选择 设备切换器中的移动设备来检查移动设备上的设计。
因为该部件起初内边距 顶部：40px; 右侧：50px； 底部：500像素，左侧：0像素，在移动设备上，标题和按钮被拉伸了，看起来不太好。
在PageFly您可以自定义单个设备的样式，请 部件 > 样式选项卡 > 间距 > 将右内边距设置为0px。
点击 保存 & 发布
创建 2-列 部件
步骤 1: 构建布局
从编辑器的左侧边栏菜单里选择 添加元素 > 元素 > 布局 > 选择1/2 – 1/2 layout。
您可以尝试一下layout元素，以了解它的功能。 在 常规选项卡 > 内容 > 添加列中，从2列更改为3列，4列甚至10列。
回到我们正在构建的2列部分。 选择添加元素 > 元素 > 将图片元素拖到右侧的列。
然后，将标题和按钮元素拖到左列，然后在样式选项卡中为其添加样式。
要使它们位于列的中部，我们需要在列中添加一些空间。 选择列 > 选择样式选项卡 > 间距 >将顶部内间距设置为30％。
步骤 2: 优化移动设备上的设计
通过在顶部栏中选择 设备切换器中的移动设备来检查移动设备上的设计。
如果要删除内容上方的空白，请选择部分中的第一列 > 样式选项卡 > 盒子样式 >将顶部内边距设置为0。
点击 保存 & 发布，搞定！
我们有一个视频教程，请在这里查看
