32. Integrating with Page Builders

Lang Forge integrates with Elementor and common builder metadata so that when translations are created, the page layout is preserved and text can be translated separately. Elementor Free/core widget data copy and cache refresh have been verified. Elementor Pro Theme Builder, Forms, Popup Builder, third-party widget packs, and Divi-specific modules should be treated as compatibility/beta scope until verified on the target site.

Elementor Integration

When a translation is created for an Elementor-built page, all Elementor data is automatically copied. Copied meta keys include _elementor_data, _elementor_edit_mode, _elementor_template_type, _elementor_version, _elementor_page_settings, _elementor_css, and _elementor_custom_css.

add_action('lf_translation_created', function ($original_id, $new_id, $lang) {
    $elementor_data = get_post_meta($new_id, '_elementor_data', true);
    if (!$elementor_data) return;

    $data = json_decode($elementor_data, true);
    if (!is_array($data)) return;

    // Replace hardcoded URLs in all button widgets
    array_walk_recursive($data, function (&$value, $key) use ($lang) {
        if ($key === 'url' && strpos($value, '/contact/') !== false) {
            $value = str_replace('/contact/', '/' . $lang . '/contact/', $value);
        }
    });

    update_post_meta($new_id, '_elementor_data', wp_json_encode($data));

    // Clear Elementor cache for the new post
    if (class_exists('ElementorPlugin')) {
        ElementorPlugin::$instance->files_manager->clear_cache();
    }
}, 20, 3);

Divi Integration

For Divi Builder pages, _et_pb_use_builder, _et_pb_old_content, _et_pb_page_layout, and other Divi meta keys are copied automatically. Divi stores its layout as shortcodes in post_content, which is copied when the translation post is created.

add_action('lf_translation_created', function ($original_id, $new_id, $lang) {
    $et_builder_enabled = get_post_meta($new_id, '_et_pb_use_builder', true);
    if ($et_builder_enabled === 'on') {
        $upload_dir = wp_upload_dir();
        $css_file = $upload_dir['basedir'] . '/et-cache/' . $new_id;
        if (is_dir($css_file)) {
            array_map('unlink', glob("$css_file/*.*"));
        }
    }
}, 20, 3);

Tips for Page Builder Translations

1. Edit text in the builder. After creating a translation, open it in Elementor or Divi and edit the text directly.
2. Images are shared. Image widgets reference the same attachment IDs.
3. CSS is per-post. Custom CSS is copied and can be modified independently per translation.
4. Regenerate CSS. After editing, Elementor auto-regenerates CSS. For Divi, clear the static CSS cache.

—