Column Control

On this page:

Basic Info | Example | Tutorial | Column Control Reflow | Screenshots

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. 

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 Template with Sidebar (sample page)
  
• Content Template (sample page)
  

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

Single Column Control Container

^ Back to top

Screenshots

^ Back to top