Adding Columns to a Page Layout

  • If you want multiple content blocks to appear side by side, instead of in one column, you can add additional columns to the page. (If you want to replace content already on the page with different content, go to the Add the Content section.)

    (Note: Widgets in the same column will always stack on top of each other. Each widget only holds a single content block or collection.)
  • What’s a Column?

    In Page Layouts, the word column does not mean a vertical column like on a newspaper page. Instead, it means a chunk of the page that will be handled as a unit.

    You can just have one column on a page, or put columns on top of each other or beside each other. They can be shifted around the page by renumbering their order. Each column can contain one or more pieces of content, and you can move content from one column to another—it’s very flexible. Here’s more info about columns.

  • To add a column, look for the large white plus sign at the top right of the last column on the page. (Note: a column will not appear until the mouse is moved over it.)

    Click the plus sign once. The page will reload, and a new column will appear at the bottom of the page.

    Make the New Column Responsive 

    1. Click on the Resize icon (the double arrow) in the column’s top bar. The Resize Column menu will appear.
    2. In the Size Type drop-down menu, choose Responsive.
    3. The Width menu will now appear. New columns default to 12 column units wide. You can leave this as is, or change it to any other width. When done, click Apply.
      • If you only have one column on a page, leave it 12 column units wide.
      • Side-by-side column units cannot total more than 12 column units wide. Otherwise, they will wrap under each other.
      • Total width of all columns, whether side-by-side or a single one, should not be less than 12 column units. Anything less will result in white space to the right of the page. This can cause problems when viewed on smaller devices or in smaller browser windows.

    If you want two equal-size columns side by side, change each column width to 6. 

    Learn more about the responsive design of the IUP website.