Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    User Guide

    Column Control Component

    The Column Control component is designed to help content authors manage the layout and structure of web pages. It allows them to organize content into multiple columns, offering a flexible way to create visually appealing and responsive page designs.

    Overview

    Component name: Column Control

    Authors who can use: any

    Templates/page types that can use component: all

    Required or optional: optional

    Authoring Fields

    Adding the Column Control component to the page

    1. Once on the desired page in Edit mode, add the Column Control component by doing the following:

    a. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Column Control” in the search bar, or scroll to the Column Control in the list. Double click to add to page.

    b. Option 2- on the left hand rail, navigate to the Components tab. Type “Column Control” in the search bar, or scroll to the Column Control in the list. Double click to add to page.

    Editing the Column Control component

    1. With the edit wrench, open the component.

    Column Control toolbar, featuring the edit wrench.

    2. General tab

    a. Layout Style dropdown: The author can select the following options for the page layout:

    i. 2 columns 50/50

    ii. 2 columns 25/75

    iii. 2 columns 75/25

    iv. 3 columns 33/33/33

    v. 3 columns 25/25/50

    vi. 3 columns 50/25/25

    vii. 3 columns 25/50/25

    viii. 4 columns 25/25/25/25

    b. The layout styles will break the page into columns. Once the layout is selected, the author will see a parsys for each column where components can be added. In this example the 2 column 25/75 was selected. The first column will take up 25% of the page, and the second column will take up 75% of the page.

    i. A parsys is the blue highlighted area on the template where a component can be added – similar to a Container. It highlights to show where the component can be added.

    c. First Column:

    Layout style of column control component focusing on the first column, on the left side of the container

    d. Second Column: 

    Layout style of column control component focusing on the second column, on the right side of the container

    Column Control examples

    Figure A: Two-column, 50/50 Column Control. Figure A: Two-column, 50/50 Column Control.
    Figure B: Three-column, 25/50/25 Column Control. Figure B: Three-column, 25/50/25 Column Control.

    Accessibility

    1. There are no specific accessibility notes for the Column Control component.

    Other tips

    1. Use the Emulator widget to test Column Control size on different devices.

    2. Components are not blocked from being added to the Column Control. However, it is not recommended to add large components to the smaller columns of the Column Control. For example, the Teaser component should not be used in a column that is less than 50% of the page.

    3. When added to the page, the text “Column Control” appears above the component. This will show in both Edit and Preview mode. To see the page without the text, navigate to View as Published mode (this will not publish the page, but shows how it will look when published).

    4. Column Control should be used to build the “Related Services and Information” section of the Service Detail template, if authoring. Go to the Service Detail user guide for more info.