Wordpress - WPBakery Page Builder - can I setup several builders for a single page?

Question

I need to setup 2 content boxes for the page. The first one will be shown inside the page header, the second one - in the page content. The design is quite complex, so I can't use one content box and just add some styles. The main issue is I need the 2nd content box to be manageable via WPBakery Page Builder as well, and it's seems like there's no such feature. Perhaps I could create the custom element, add it to the 1st row, then hook to the the_content filter, and just remove the row with that element. Then in the header make almost the same thing: check if there's custom element in the post content, then just cut out everything and just echo my element. But I'm afraid the JS and the styling will be broken. Maybe there're some addons for this?

Answer 1

I have not found the way I can use 2 editors, so I decided to make the row with class "header" appear in the header and the other content - in the content section.

<?php //functions.php
/* define which class should we use to separate the content */
define("CLASS_FOR_HEADER", "header"); 
define("HEADER_SECTION_REGEX", "/\[vc_row([^\w\]])el_class=(?:\"|'|)(.*?)".CLASS_FOR_HEADER."(.*?)(?:\"|'|)(.*?)\]+(.*?|\n)+\[\/vc_row]/");

/* Used in the header to leave only header section. 
 * header-part-content is a custom action called in the header by
 * apply_filters('header-part-content', $post->post_content);
 */
 add_filter('header-part-content', function ($content) {
    $matches = [];
    preg_match_all(HEADER_SECTION_REGEX, $content, $matches);
    if (empty($matches) || empty($matches[0])) {
        return "";
    }
    return do_shortcode(implode($matches[0]));
}, 10, 1);


/* Used to cut the header elements out of the content */
add_filter('the_content', function ($content) {
    return preg_replace(HEADER_SECTION_REGEX, "", $content);
}, 1);