HubSpot's new page editor brings a lot of new features to the table, but it's lacking many useful features such as:

1. Assign ID or custom class to a section
2. Turn section full-height
3. Swap columns on mobile
4. Remove padding/spacing between columns

This is where the Settings module comes into play. 

Assign ID or custom class to a section

1. First, drag-and-drop the Settings module into any part within a section. 
2. Select Target = Section
3. It will display the following fields:
   
   
   
   1. You can add your custom CSS classes into the Custom Classes field
   2. Custom ID only supports one ID. 
      Format: no space, no symbols except hyphen or underscore, uppercase/lowercase accepted.
4. Save.

Turn section full-height

1. First, drag-and-drop the Settings module into any part within a section. 
2. Select Target = Section
3. Check the Section Full Height boolean field
   
4. Save.

Swap columns on mobile

End result:

• Desktop:
  
• Mobile:
  

Here are the steps to follow:

1. First, place the Settings module below the Row we're editing.
   
   Note: The Settings module MUST be placed directly below the row.
2. Select Target = Row
   
   
3. Enable the Swap Columns (Mobile) boolean field
4. Save

Remove padding/spacing between columns

In many cases, we need to build a section that consists of columns that are stacked side-by-side without any spacing. 

HubSpot page editor doesn't provide the option to completely remove a column's spacing, and this is where the Settings module is useful. 

By removing the padding/spacing between two columns, we can achieve layouts such as:

Here are the steps to follow:

1. First, place the Settings module below the Row we're editing.
   
   Note: The Settings module MUST be placed directly below the row.
2. Select Target = Row
   
   
3. Enable the Remove Module Spacing boolean field
4. Save