Basic Info

The Column Control component can be used to divide your page into sub columns to create more layout options. Because of the responsive design of the NYU website, column options are based on percentages and will adjust accordingly as browsers shrink or expand. 

Example

This space is divided in half using the column control component.

Bobcat mascot

Tutorial

  1. Navigate to and open your page.
  2. Add the Column Control component.
    1. Note: A Column Control component cannot be placed inside of another Column Control component, this will cause an error in the CMS.
    2. Note: Copy and pasting or deleting a Column Control component will copy or delete the entire container, including the other components inside.
  3. A new Column Control component space will display on the page.
  4. To set Column Control type, select the Column Control container space. The component's toolbar will appear above that space.
  5. Select the wrench icon to Configure.
  6. Column Control options will vary based upon your previously selected page template.
  7. Column Control options for the Content Template with Sidebar are:
    1. 2 Columns: 50%, 50%
    2. 2 Columns: 33%, 66%
    3. 2 Columns: 66%, 33%
    4. 3 Columns: 33%, 33%, 33%
  8. Column Control options for the Content Template are:
    1. 2 Columns: 50%, 50%
    2. 2 Columns: 33%, 66%
    3. 2 Columns: 66%, 33%
    4. 2 Columns: 25%, 75%
    5. 2 Columns: 75%, 25%
    6. 3 Columns: 33%, 33%, 33%
    7. 3 Columns: 25%, 25%, 50%
    8. 3 Columns: 50%, 25%, 25%
    9. 4 Columns: 25%, 25%, 25%, 25%
  9. Click or touch the checkmark icon to save and close.

^ Back to top

Column Control Reflow

The column control component is designed to reflow your content based on browser width. Test the mobile-friendly content templates in real time by visiting one of our sample pages:

Content Reflow in Three Columns

When using Column Control to divide your page into three columns, content doesn't reflow the same way other column divisions do. The third column on the far right reflows to be underneath the other two columns and, depending on how you add content to your columns, you may see some unexpected white space.

Adjust your browser size to see how space divided using a 33-33-33 Column Control reflows when content is adding into a single container versus stacking multiple Column Control containers.

Stacked Column Control Containers
Content reflow example: Content A

Content reflow example: Content B

Content reflow example: Content C

Content reflow example: Content D

Content reflow example: Content E

Content reflow example: Content F

Single Column Control Container
Content reflow example: Content A

Content reflow example: Content D

Content reflow example: Content B

Content reflow example: Content E

Content reflow example: Content C

Content reflow example: Content F

Screenshots

Component Tutorial: Column Control

Preview of Column Control options available when using the Content Template with Sidebar.

Component Tutorial: Column Control using Content Template

Preview of additional Column Control options available when using the Content Template.