Login
Home CMS Documentation Home CMS 10 Editing Basics Page Builder CMS 10.6 Page Builder CMS 10.6 Building Presentations CMS 10.6 Adding Layouts CMS 10.6 Setting Column Properties

CMS 10.6 Setting Column Properties

Set Column Properties for columns within row layouts in Page Builder presentations. Properties include settings for CSS classes, padding, and column count.

To set Column Properties for a column:
  1. Navigate to Site > Site Tree.
  2. Select the page with the Page Builder presentation.
  3. Check out the page, and select the Design tab.
    The Design tab workspace and accordion menu displays.
  4. Select the Column header of the column in the presentation row layout via the Design tab workspace.
    The column displays as selected (i.e., the column and header fill color change to blue), and gear (Column Properties) icon displays.

    Column in Page Builder Presentation

  5. Select the gear (Configure Column Properties) icon Configure Row Properties Icon in the Column header.
    The Column Properties dialog displays.

    Column Properties Dialog

  6. Optional: Complete the following fields to modify padding settings.
    Note
    Enter a padding value (in px) in the fields by entering the number manually or by using the number picker arrows. Keep in mind that padding changes only display in Preview.
    FieldDescription
    Additional Padding (all)Applies padding value to all sides of the column. This value populates the other padding fields.
    Padding (top)Applies padding value to the top of the column.
    Padding (right)Applies padding to the right side of the column.
    Padding (bottom)Applies padding to the bottom of the column.
    Padding (left)Applies padding to the left side of the column.
  7. Optional: Add one or more CSS classes to the column by using one of the follow steps:
    • Select the class from the drop-down list.
    • Enter a keyword in the field to search for and select the class.

    Selected classes display directly above the field.

    The available CSS values depend on your implementation. This drop-down list provides all classes used in your DSS Preview CSS file. Page Builder compiles the classes for this list in real time.

    Troubleshooting

    Your implementation may provide different stylesheets for different page views. The Additional CSS Classes drop-down list only displays CSS classes from the DSS Preview CSS file used for the current page.

    If the drop-down list is missing particular classes, then the CSS file associated with the page view doesn't contain those classes. The missing classes may reside in a CSS file associated with a different page view.

  8. Optional: Use the Add Column buttons to create columns in the row layout.
    • Select the Add column to the left button Add Column to Left Icon to create a column to the left of the current column.
    • Select the Add column to the right button Add Column to Left Icon to add a column to the right of the current column.
    Note
    Each row layout allows a maximum of 12 columns. The CMS automatically inserts or removes a column when you click the corresponding button, regardless of whether you select Confirm in the dialog.
  9. Optional: You can delete the current column by selecting the Remove column button Remove Column Icon. See Deleting Columns for details.

    Keep in mind that Page Builder requires row layouts to hold at least one column. If the row layout only contains one column, Page Builder prevents the deletion that column.

    Warning
    If the column contains embedded content units, the deleted content cannot be recovered.
  10. Select Confirm to register Column Properties changes.
  11. Save changes when you finish by selecting Save in the Design tab toolbar.
    Warning
    Always save after making Page Builder presentation changes. Otherwise, the system will not preserve your new changes.