{"id":2493,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-section-widget\/"},"modified":"2022-06-09T10:06:09","modified_gmt":"2022-06-09T10:06:09","slug":"landing-page-section-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/landing-pages\/builder\/section\/","title":{"rendered":"Landing Page Section Widget"},"content":{"rendered":"
\n

The Section <\/strong>widget helps you add distinct sections to your landing page. You can drop any number of widgets onto a section. You can then move and rearrange the section as a single unit. Also, when you duplicate a section, the section is duplicated as a whole, i.e., along with the inserted widgets.<\/p>\n

For example<\/strong>, you can use the Section widget to create templates with predefined headers and footer sections. The content sections can then be added to the landing pages as per your design preferences.<\/p><\/blockquote>\n

<\/div>\n

How to use a Section Widget in a Landing Page<\/h2>\n
<\/div>\n

Step 1<\/h3>\n

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

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

<\/div>\n

Step 2<\/h3>\n

Add a Section widget to your landing page<\/h3>\n

The 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 add a section to your landing page, drag and drop the Section <\/strong>widget to the work area.<\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 3<\/h3>\n

Design the space as required!<\/h3>\n

As you drop the button widget into the work area, the widget settings are displayed on the right under the Style<\/strong> tab (as highlighted in the screenshot below).<\/em> Use this section to customize the section background and click Save<\/strong>.<\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 4<\/h3>\n

Add other functional elements to the section.<\/h3>\n

Drag and drop the widgets corresponding to the functional elements that you want to add to this section – a text\/ button\/ image, etc.<\/p>\n

For example, <\/strong>in the campaign shown in the screenshot below, we first added a Column widget to divide the section into two columns. We then added an Image widget to the left column, and Text, and Button widgets to the right column.<\/p><\/blockquote>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

And that’s it!<\/p>\n

You have successfully added a content section to your landing page!<\/p>\n

Note: <\/strong>As explained in the widget introduction, a section is a distinct content block in the Email that can be moved or copied as a whole.<\/p><\/blockquote>\n

For example, <\/strong>if you duplicate the Section widget (as highlighted in the screenshot below)<\/em>, a copy of the section will be created along with the widgets it contains:<\/p><\/blockquote>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n
<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Let’s proceed, and have a look at how to add a custom CTA button to a landing page using the Button Widget<\/a>!<\/p>\n<\/div>\n