Column Control

Basic Info

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

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 container will appear indicating that you need to set column types.
  4. To set Column Control type, click Edit on the component toolbar.
  5. Column Control options will vary based upon your previously selected page template.
  6. Column Control options for the Content Template with Sidebar:
    1. 2 Columns - 50%, 50%
    2. 2 Columns - 33%, 66%
    3. 2 Columns - 66%, 33%
    4. 3 Columns - 33%, 33%, 33%
  7. Column Control options for the Content Template:
    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. 4 Columns - 25%, 25%, 25%, 25%
  8. Click OK.

Back to Top

Column Control Reflow

Watch the mobile-friendly content templates in action. The column control component is designed to reflow your content based on browser width.

YOUTUBE MEDIA
2wfCdF_lg2o

Content Reflow in Action

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

Component Tutorial: Column Control

Component Tutorial: Column Control