WordPress Elementor Page Builder 布局:将全宽部分数据与盒装部分大小对齐

WordPress Elementor Page Builder Layout: Align full-width section data with boxed section size

我有一个与 WordPress 元素或页面构建器布局相关的问题。我有一个包含 2 列的部分。一栏有背景色,我需要这个背景色来填充全屏(全宽布局),但栏内的内容只能与网站框的宽度一样宽。

将部分设置为使用全角布局,它也会拉伸内容全角。将部分设置为使用盒装布局也会将背景颜色框起来。我尝试将部分设置为使用盒装布局,但启用了“拉伸部分”,但它没有做任何事情,该部分看起来仍然只是盒装。

请在此处查看插图图片:https://ibb.co/sWBSBG1

任何关于如何实现这一目标的想法或帮助将不胜感激。

您可以采用两种方式:

  1. 制作一个四列的全宽部分,调整中间两列的宽度,因为它是正常的两列布局。将背景应用到第三列(带文本的列)和第四列。

  2. 制作一个全宽部分,然后使用填充来调整内容的宽度。您还可以为桌面和移动设备使用不同的填充。您还可以通过提供 secion 和 class 或 id 来使用 css,然后使用如下内容:

    #mysectionid { 填充:0 5%; }

    @media screen and (max-width: 600px) { #mysectionid { 填充:0 10px; } }

  1. 添加一个包含 2 列的部分。将部分更改为全宽布局。将背景颜色或背景图像添加到所需的列。

  2. 在每个全宽部分列中添加一个包含 2 列的内部部分。在内部部分的每个内部列中添加一个自定义 class,您的站点宽度除以 2。例如,我的站点宽度是 1300px,所以我向每个内部列添加一个 css class 650px 作为宽度。

    .my-full-half-section{ width:650px!重要; 最大宽度:650px!重要; 最小宽度:650px!重要; }

内部列的外部列将充当边距,并在任何屏幕尺寸上保持列数据内联宽度为网站框内宽度。