创建全宽部件

在执行特定步骤之前，您可以检查该视频以全面演示如何为幻灯片，视频，图像和其他元素设置全角

在本文中，您将了解到如何创建一个全宽部件。

你可以在下面的视频查看更多信息。

创建全宽部件3部曲

步骤 1：添加Full Section布局

在PageFly编辑器中，选择 添加元素 > 布局 ，然后拖动 Full Section。

步骤 2: 禁用设置固定宽度

选择新创建的刚刚拖动到画布中部件（面包屑导航栏中会显示当前选择的元素）。 在部件的常规选项卡中，禁用设置固定宽度选项。

步骤 3：上传图片横幅

在样式标签中，转到背景部分。

在样式选项卡中，往下找背景参数，然后在此处上载背景图像，如下图所示：

您可以上传图像管理器中可用的图像，也可以从互联网上传。 阅读此处了解更多信息。

• 图片上传后，点击更多设置按钮。
  • 更改背景位置以设置图像的焦点（此设置将用于在响应模式下显示图像的哪一部分）
  • 把图片大小改为“覆盖”

在样式选项卡中，转到间距部分。

• 编辑顶部和底部内边距使部件的高度以适合图片的高度。
• 中间的小方块将为内边距和外边距的所有四个面设置相同的值。

不要忘记保存和发布。 这就是，为您的台式机/笔记本电脑页面添加了漂亮的全宽部件。 这很简单。

重要提示:

一些Shopify主题会将网站内容设置为固定宽度。

在某些主题下，即使您按照前面的步骤进行操作，它仍然不是全宽。

这时，请按照以下步骤操作：

• 首先，打开添加自定义代码窗口

• 复制以下代码
  • .main-content { max-width: 100%; padding: 0;}

或者：

• • .main-content .wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0!important;
    }

• 粘贴到自定义代码编辑器中
• 保存变化，再次发布页面
• 最后，在实时页面中查看效果

在示例商店的Brooklyn主题中，我们使用第二个代码：

请您不要忘记，保存和发布页面，在实时页面中查看。

如果您添加了其中一个代码，但仍然不起作用，不要担心，请通过实时聊天与我们联系，我们为您解决问题。 对于这种情况的解释是，并非所有Shopify主题都可以使用这些代码，并且我们需要检查您正在使用的主题，然后我们才能为您解决问题。

移动设备优化

您可以通过选择顶部菜单上的移动设备选项来检查在移动设备上的结果。

我们可以看到之前设置的350px底部内边距，使图片背景拉长了，在移动设备上看起来也不好。

PageFly允许在样式选项卡中进行设备定制（即，样式选项卡中的更改在每种设备上都是独立的），因此请选择 部件 > 样式选项卡 > 间距 > 将底部内边距设置为适合的值（在本例中为0 px）。

点击保存并发布，然后在移动设备上查看页面结果。

您可以观看此视频，以了解有关如何为页面上的部分设置全角以及有关主题冲突的其他相关问题的详细信息