Create Row and Columns Visual Composer

How to Create Row and Columns Visual Composer


Webpage design can be segmented into content with various rows(sections) and columns to make it visually appealing and user friendly. Creating columns in a page of a webpage skill that involves various techniques. In this tutorial we will use Visual Composer: First login to your Website, then go to Pages and Add New.

Give your page a title and click either on Backend Eitor or Frontend Editor, then click Add Element button just above the visual editor and below the title.

Active Buttons available after activating the Visual Composer Plugin

Add Rows with 3 Columns

Select Row from the popup window.

Visaul Composer add Rows with 3 columns


Hover over your choices, select 1/3 1/3 1/3 which will allow 3 columns. Visually you will see your row split into 3 columns.

Row Splits into 3 Seperate Columns

At this stage you will see now the 3 gray boxes with a + buttons at the middle of each. This button allows you add content to the columns. Either text, single picture or post etc. Choose your page element.

Visual Composer Content Block Available in Popup Window


For this WordPress Tutorial click on the + button and choose Text Block. Your Page elements will be populated with sample text.
VC Columns with VC Sample Content






You can type your text, insert pictures etc. The same as the default visual editor in WordPress. The visual composer window inherits the standard visual wordpress editor properties and adds such options as inserting posts directly into the columns content blocks.roofing website seoSave you content, remember to Publish and Update your Page.

Tip: Right click and Open link in New Tab to check you work live on your website.

View our example visual composer page used in this tutorial.

by Design and Marketing