无Elementor Pro的WordPress Elementor模板首页白条纹CSS求助

无需Elementor Pro权限，直接通过WordPress自带自定义CSS功能即可修复，操作路径：WordPress后台 → 外观 → 自定义 → 额外CSS，粘贴对应代码后发布即可生效。

通用修复代码（优先尝试） #

该代码覆盖90%以上的默认边距、容器空隙导致的白条纹问题：

/* 清除Elementor区块、列、组件默认内外边距 */
.elementor-section, .elementor-column-wrap, .elementor-widget-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

/* 清除主题自带内容容器的默认上下空隙 */
.site-content, .content-area, .main-content {
    margin: 0 !important;
    padding: 0 !important;
}

/* 消除相邻区块衔接处的1px透明缝隙 */
.elementor-section + .elementor-section {
    border-top: none !important;
    margin-top: -1px !important;
}

特殊场景补充修复 #

如果通用代码生效后仍残留白边，根据场景追加对应代码：

• 背景透传漏出底层白色：追加如下代码强制页面背景跟随上层区块

body {
    background: transparent !important;
}
.elementor-section {
    background-clip: padding-box;
}

• 仅移动端出现白边：追加移动端适配代码

@media (max-width: 767px) {
    .elementor-row {
        margin: 0 !important;
        padding: 0 !important;
    }
    body {
        overflow-x: hidden;
    }
}

生效注意事项 #

• 代码粘贴发布后，需要清空站点缓存插件缓存、浏览器缓存，按Ctrl+F5硬刷新页面查看效果
• 如果白边仅存在于某两个特定区块之间，可以编辑对应区块，在区块高级设置里把上下边距手动设为0，不需要额外写代码

内容的提问来源于stack exchange，提问作者Sergio Montaño