{"id":5785,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-columns-widget\/"},"modified":"2022-08-22T07:49:30","modified_gmt":"2022-08-22T07:49:30","slug":"landing-page-columns-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_IN\/landing-pages\/builder\/columns\/","title":{"rendered":"Landing Page Columns Widget"},"content":{"rendered":"
\n

The Columns <\/strong>widget helps you split the work area into separate columns (2, 3, or 4 columns). Then, you can proceed to drag and drop any other widget onto the created columns. For example, add a text\/image\/button or any other design element as per your requirements.<\/p>\n

How to use a Columns Widget in a Landing Page?<\/h2>\n

Step 1<\/h2>\n

Navigate to the landing page builder<\/h2>\n

Use the Main Menu<\/strong> on the left to create a landing page<\/strong> and subsequently navigate to the landing page builder<\/a>.<\/p>\n

<\/div>\n

Step 2<\/h2>\n

Add a Columns widget to your landing page<\/h2>\n

The blank area on the left is the Work area <\/strong>where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as widgets<\/a>.<\/p>\n

In order to divide a space in your work area into columns, drag and drop the Columns <\/strong>widget to the work area (as highlighted in the screenshot below)<\/em>.<\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 3<\/h2>\n

Specify the number of columns that you wish to divide the widget area into<\/h2>\n

As you drop the widget into the work area, the widget Settings <\/strong>are displayed on the right (as highlighted in the screenshot below)<\/em>.<\/p>\n

<\/div>\n

\"Set<\/p>\n

<\/div>\n
\n

Use the Columns Settings<\/strong> to specify the number of columns that you wish to divide the widget area into.<\/p>\n<\/div>\n

Click Save<\/strong>.<\/p>\n

<\/div>\n

Step 4<\/h2>\n

Customize the Columns’ background and design<\/h2>\n

You can edit the overall appearance of your Columns using the options available under the Style <\/strong>tab (as highlighted in the screenshot below).<\/em><\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Herein, use the fields:<\/p>\n