Columns

The Columns extension lets you add up to three columns of text with images and call-to-action buttons using Site Management Tools (SMT). You can choose to add one, two, or three columns, and the layout adapts to fit the width, according to the screen size. With Columns, you can organize your content into manageable blocks.

Important:

Commerce extensions are only available if provisioned, installed, and activated for a selected domain in your account. For more information, see Commerce Extensions.

Note:

Extensions require SuiteCommerce or the Aconcagua release of SCA or later.

This topic explains how to:

Use SMT to add, configure, or delete a column on multiple areas of your website. Adding this content type to enhanced or custom landing pages allows you to feature a column in the place and style you want. For more information on Site Management Tools, see Site Management Tools Overview.

Add a Column

To add a column to your web store, add the Column content type to a page of your site using SMT. You can add up to three columns.

To add a column:

  1. In your website, navigate to the page where you want to add a column.

  2. Log in to SMT.

    For more information, see Users and Roles in SMT.

  3. In Edit mode, click Add on the Site Management toolbar.

  4. Drag the Column content type to the page.

    Note:

    If you do not see this content type, check that the extension has been installed and is active. Click Settings on the Site Management toolbar to access the Content Manager. Drag the content type from the Inactive Content Types list to the Active Content Type list.

    You can drag a Column content type to multiple areas on the page.

    For more information on the scopes of different SMT areas, see Area and Scope.

  5. Configure the settings to best fit your needs.

    See Configure a Photo Gallery.

Configure a Column

Configure properties to customize your column.

The following procedures explain how to customize:

  • General settings — Configure general settings, such as a header, text color, and new window behavior.

  • Column settings — Configure column settings, such as an image, text, and button link.

To configure general settings:

  1. While logged in to SMT, navigate to the page that contains the column.

  2. In the Column box, click Edit.

    This displays the Column Settings in the side panel.

  3. On the General tab, set the following fields:

    Field

    Description

    Name

    Sets the name for the column to appear in the Review Changes list in SMT.

    Visibility

    Sets the visibility option that determines when you want to make the column visible.

    For more information on visibility options, see Visibility Dates.

    Header

    Sets the title for the column.

    Text Color

    Determines the color for the text fields.

    By default, the Header, Caption, and Text fields use different colors that are taken from your theme.

    If you select Dark, all text fields use the dark text color defined in your theme. If you select Light, all text fields use the light text color defined in your theme.

    Column Alignment

    Determines the positioning of the text content and button.

    Open in New Window

    If checked, opens a link from the column in a new tab or window.

    Image Size ID

    Links to the image resizing option you want the image to use.

    To use this option, you must enter an enabled Image Size ID found under the Images tab in the Image Resizing section of the Web Site Setup record (Commerce > Websites > Web Site Lists).

    For more information on image resizing, see Image Resizing and Compression.

    Tags

    Sets keywords to help filter your content in the Review Changes list.

    For more information on content tags, see Content Tags and Filter Tools.

  4. Click Save.

To configure column settings:

  1. While logged in to SMT, navigate to the page that contains the column.

  2. In the Column box, click Edit.

    This displays the Column Settings in the side panel.

  3. On the Column tab, set the following fields:

    Each column has its own Column tab with associated fields, so you can change the settings for each column. If you enter information in only one Column tab, only one column is displayed. See the Example for an example of how the elements appear on a website.

    Field

    Description

    Image

    Sets the image to display using the Image Manager. For more information, see Image Manager.

    If you do not select an image, only the text column is displayed.

    For optimum performance, optimize images before uploading.

    Alt Text

    Sets a description of the image to be used to improve accessibility and SEO.

    Caption

    Sets the column subtitle.

    Text

    Determines the text to display in the column.

    Basic HTML formatting tags are supported.

    Button Text

    Sets the button text.

    If you leave this field blank, the button does not appear.

    Button Link

    Determines the URL to which you want the button to link.

  4. Click Save.

Delete a Column

You delete the column from your site using SMT in one of two ways, depending on whether you have published the content to your website:

  • Discard the column if you have not published the content.

  • Remove the column if you have already published the content.

To discard a column (Unpublished Content):

  1. While logged in to SMT on your website, select the Review & Publish Changes list from the Site Management toolbar.

  2. Select the Column content in the list.

  3. Click Discard.

  4. Click OK.

To remove a column (Published Content):

  1. While logged in to SMT on your website, navigate to the page that contains the column you want to remove.

  2. In Edit mode, click the Column box.

    This highlights the column and displays the content controls.

  3. Click Remove.

  4. Click OK.

Example

The image is an example of how the columns extension looks on your website.

Columns extension on website with components labeled.

Key:

  1. Header

  2. Image

  3. Caption

  4. Text

  5. Button

Related Topics

SMT Text Content
Blog

General Notices