FR Columns
FR Columns is a module that allows you to create multiple columns within a page section.
You can use a column for formatted text, or as an entry point to, for example, a photo gallery.
For each column, you can also specify a header and a link to an internal page.
You can configure the styles on three different levels:
- globally, across the entire website;
- by section;
- by column.
General settings
Settings
For this page section, set the following:
- whether the column headers are displayed in the output
- whether the columns should be stretched horizontally
- the width of each column, in pixels
- the spacing between columns, in pixels
- the layout type used to divide the columns horizontally
- the layout type for the grid, i.e., how any empty space is displayed
Columns in this section
The table shows the columns created for this page section.
Update a column by clicking on its title, or click the Pencil icon on the right. Move a column using the Move buttons on the right. Delete a column using the Wastebasket button on the right. And add a column using the Add Column button.
Columns
Column title: Provide a short, clear title
Column content: Use the WYSIWYG editor for formatting, text, images, etc.
Page link: If desired, you can create a page link in this column
Link text: Enter a short, clear link text
Style overrides: If desired, you can set a different style for this column
Styles
You can configure the styles on three different levels:
- Global, website-wide: In the section screen, select the Open Global Settings button;
- Per section: In the section screen, go to the Section Styles section;
- Per column: In the section screen, open the desired column or create a new one, and go to the Style Overrides section.
Font family: Choose from the included fonts
Font size: Choose from the available sizes; clear a selected size to display the drop-down list again
Font color: Click the color swatch, select a color, or enter a (hex) value. Also specify the level of transparency. Or use the default.
Font weight: Choose from the available weights; clear a selected weight to display the drop-down list again
Background color:Click the color box, select a color, or enter a (hex) value. Also specify the level of transparency. Or use the default.
Padding: Choose from the provided distances; clear a set distance to display the selection list again.
Text alignment: Choose one of the provided options.
Example
In the example below, FR Columns is used for a portfolio page. Each column contains a link to a photo album created with FR Gallery.
