Adobe Experience Manager Component Reference:Columns
Component Category
- Layout
Extensions
- Columns 3
Related Components
"Columns-3" redirects to this page as it is an extension of the Columns component.
The columns component allows you to divide the current dropzone into two, three or four columns. Each column forms its own dropzone and has its own set of options.
Defaults
The Columns component will create a two column layout with two equal-width columns and no column styling. If the original dropzone is not divisible by two, the columns component will not occupy the full width.
The Columns 2 component will create a two column layout with two equal-width columns and no column styling. If the original dropzone is not divisible by two, the columns component will not occupy the full width.
The Columns 3 component will create a three column layout with three equal-width columns and no column styling. If the original dropzone is not divisible by three, the columns component will not occupy the full width.
Options - Main Component
# of Columns
- Two
Separates the parent dropzone into two equal-width columns. If the parent dropzone is not divisible by two, the resulting columns will not take up the full width of the component. - Three
Separates the parent dropzone into three equal-width columns. If the parent dropzone is not divisible by three, the resulting columns will not take up the full width of the component. - Four
Separates the parent dropzone into four equal-width columns. If the parent dropzone is not divisible by four, the resulting columns will not take up the full width of the component.
Notes
- If your parent dropzone's size is not divisible by the desired number of columns, CQ will make the Column component's columns equal width and leave the remaining space empty on the right.
- Increasing the number of columns will add new columns to the right of the last current column.
- Decreasing the number of columns if there is content in the soon-to-be extra columns will create a second tier of columns under the resulting first set. Any columns in this second tier should be emptied and deleted to prevent layout errors.
Column Layout (advanced)
The column layout option is a multi-item option that allows you to customize each column's width. The widths are based on the layout grid and must be entered in the format: grid-6.
You can create as many columns as you have grid space in the parent dropzone. For example, the main dropzone on a standard page is grid-12, so you could create six equal-size columns of grid-2 (not recommended) or three columns of grid-4, grid-5 and grid-3 or any combination, provided your grid totals equal no more than 12.
When specifying custom sizes and using the full width of the parent dropzone, you must add the "alpha" switch to your first column and the "omega" switch to your last column. Without these, your columns will run over the allowed width, resulting in a layout error.
Here is the default column layout for the 3 Columns component:
Your grid totals must be equal to the width of the Columns component’s parent dropzone.
You can use the advanced column controls to create up to 12 columns on your page (each of size grid-1). However, University website style calls for a minimum column size of grid-2 (for items such as small headshots or thumbnails), so you should never have more than 6 columns (each of size grid-2) within the main content area.
Options - Individual Columns
Location of the Firefox refresh button
Individual columns can be styled and formatted just like sections once they are populated with some content.
To style a column as a secton:
- Add any permissible component to the column.
- Click the refresh button in the address bar on your browser to refresh the page.
- In the Start of Column control bar, click Edit. This will bring up the Edit Component Styles dialog for that column.
After refreshing the page, click on Edit in the Start of Column control bar to style and format the column.
Layout
- None
No special styles are applied to the content inside the section. This setting is recommended when creating content that will be reused (and possibly styled differently) elsewhere in the site. - Padded Teaser
This layout adds some padding around the content inside the section. This layout option is required for sections in the sidebar that are not the gradient or solid background layouts. - Gradient
This layout adds a gradient that matches the page's color theme behind the section content with the solid color starting at the top and fading toward the bottom. Note that this layout changes the styling for the Extra Large (h1) heading style. - Solid Background
This layout places the section content in a padded section on top of a solid background matching the page's theme. Note that while it may appear that your solid background section has a smaller available grid width, if you have a grid-12 section, for example, with a solid background, your section will still have 12 grid columns with which to work.
Bullet Columns
- None
Any bulleted lists in the section will appear with standard formatting with all bullets in a single column. - 2 Columns
The system will take any bulleted lists in the section and divide each list into two approximately even columns. To enhance user readability, the system will not split a bullet between columns. - 3 Columns
The system will take any bulleted lists in the section and divide each list into three approximately even columns. To enhance user readability, the system will not split a bullet between columns.
Important Note on Bullet Columns
Internet Explorer (versions 9 and earlier) does not support the code that renders the bullet columns. Internet Explorer 9 and earlier users will see bulleted content in a singular column regardless of this setting.
Examples of Styled Columns
Heading (h1)
Layout: None
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus bibendum consectetur. Nunc rhoncus, massa eget rhoncus hendrerit, felis nunc blandit dolor, vitae imperdiet neque lorem vitae nibh. Phasellus sit.
Heading (h1)
Layout: Padded Teaser
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus bibendum consectetur. Nunc rhoncus, massa eget rhoncus hendrerit, felis nunc blandit dolor, vitae imperdiet neque lorem vitae nibh. Phasellus sit.
Heading (h1)
Layout: Gradient
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus bibendum consectetur. Nunc rhoncus, massa eget rhoncus hendrerit, felis nunc blandit dolor, vitae imperdiet neque lorem vitae nibh. Phasellus sit.
Heading (h1)
Layout: Solid Background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus bibendum consectetur. Nunc rhoncus, massa eget rhoncus hendrerit, felis nunc blandit dolor, vitae imperdiet neque lorem vitae nibh. Phasellus sit.
Component Q&As - Column
Can I use more than one style in one column?
No. The layout and bullet column control is for the entire column.
Can I place a Section component inside a column?
The system does not allow the placement of Section components inside columns. As a result, you can apply Section layouts and bullet columns to individual columns.