如何修改Divi响应式设置？自定义断点需求求助

一、Divi Builder原生无法直接修改内置断点 #

Divi的可视化编辑器没有提供自定义断点的UI选项，必须通过代码方案修改核心断点规则，同时覆盖对应的样式与JS逻辑。

二、解决方案：JS + CSS 组合实现自定义断点 #

1. 修改Divi的JS断点（解决特效错乱问题） #

Divi的响应式特效（如模块动画）依赖内置的JS断点变量，需要通过自定义脚本覆盖默认值。在主题的functions.php中添加以下代码：

function custom_divi_breakpoints() {
    if ( wp_script_is( 'divi-custom-script', 'enqueued' ) ) {
        wp_dequeue_script( 'divi-custom-script' );
    }
    wp_enqueue_script( 'divi-custom-script', get_stylesheet_directory_uri() . '/custom-divi-breakpoints.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_divi_breakpoints', 20 );

然后在子主题目录下创建custom-divi-breakpoints.js文件，写入：

jQuery(document).ready(function($) {
    // 覆盖Divi内置响应式变量
    if (typeof et_pb_responsive_vars !== 'undefined') {
        et_pb_responsive_vars.break_point = 1099; // 小型平板上限，对应501-1099区间
        et_pb_responsive_vars.tablet_break_point = 500; // 移动端上限
        et_pb_responsive_vars.large_screen_break_point = 1650; // 常规PC上限，大屏从此值开始
    }
});

这段代码会替换Divi用于判断设备尺寸的核心变量，确保特效在自定义断点下触发逻辑正确。

2. 自定义CSS媒体查询（适配各区间样式） #

在Divi的主题选项 > 自定义CSS或子主题的style.css中添加以下媒体查询，覆盖默认样式：

/* 移动端（≤500px） */
@media only screen and (max-width: 500px) {
    /* 自定义移动端样式，比如列宽度、模块间距 */
    .et_pb_column {
        width: 100% !important;
        margin-bottom: 20px;
    }
    /* 调整移动端特效参数 */
    .et_pb_module[data-animation="move_up"] {
        animation-duration: 0.6s;
    }
}

/* 小型平板（501px-1099px） */
@media only screen and (min-width: 501px) and (max-width: 1099px) {
    /* 自定义平板列布局，比如两列布局 */
    .et_pb_column_1_2 {
        width: 48% !important;
        margin-right: 4%;
    }
    .et_pb_column_1_2:last-child {
        margin-right: 0;
    }
    /* 调整平板端特效参数 */
    .et_pb_module[data-animation="move_up"] {
        animation-duration: 0.8s;
        transform: translateY(30px);
    }
}

/* 常规PC（1100px-1650px） */
@media only screen and (min-width: 1100px) and (max-width: 1650px) {
    /* 保持Divi默认PC样式，或微调 */
    .et_pb_row {
        max-width: 1100px;
        margin: 0 auto;
    }
}

/* 大屏（≥1651px） */
@media only screen and (min-width: 1651px) {
    /* 大屏适配：加宽容器、调整模块间距 */
    .et_pb_row {
        max-width: 1600px;
        margin: 0 auto;
    }
    .et_pb_module {
        padding: 40px;
    }
    /* 大屏特效优化 */
    .et_pb_module[data-animation="move_up"] {
        transform: translateY(50px);
    }
}

3. 注意事项 #

• 必须使用子主题修改functions.php和添加JS文件，避免Divi主题更新时丢失修改。
• 若特效仍有异常，需检查对应模块的动画设置，确保在自定义断点下没有冲突的内联样式。
• 清除浏览器缓存后测试各尺寸屏幕，确保JS和CSS生效。

内容的提问来源于stack exchange，提问作者Thomsooo