How to divide header into two columns in Ohio theme using WPBakery Page Builder

If you are using Ohio theme with WPBakery Page Builder then, dividing header into two columns is not possible as it does not have any option to do that. But with little jQuery code snippet you can easily do it. Let's see how it's done.

In the edit page, first you have to create 2 equal columns like shown below and add your desired text content in it.

 

Suppose like in the image in the left column we have added text content. Now we need to assign custom CSS class name to Heading block by going into Edit Heading button (which is pencil icon in the image below). 

Now you get options/settings to edit that Heading block. In the Heading Settings window go to Styles & Colors tab. In that section you will find Custom CSS class field like below. Add custom CSS class like I did. Click Save Changes and close the window.

Now you need to add it to the side of header like below image.

For that you need Simple Custom CSS and Js plugin to be installed in your WordPress website. After installing Add Custom Js by going into plugin menu. In the code editor add the jQuery code to embed the text next to heading like shown in the image.

jQuery(document).ready(function( $ ){
    jQuery(".about-sub-heading").appendTo(jQuery(".page-id-19264 .clb-page-headline-holder .page-container .vc_row"));
  	jQuery(".page-id-19264 .clb-page-headline-holder .page-container .vc_col-lg-12").addClass("vc_col-lg-6");
  	jQuery(".page-id-19264 .clb-page-headline-holder .page-container .vc_col-lg-12").removeClass("vc_col-lg-12");
  	jQuery(".about-sub-heading").addClass("vc_col-lg-6");
});

What this code does is, remove 12 columns class and add 2 six columns and append the text to it. With this whenever you load the page you have text beside the header.