Manage Spire CMS widgets

Widgets are pre-configured content holders that allow you to rapidly add content to your pages without having to develop these elements. In Spire, users have different widgets and configuration options available to them as compared to the Classic CMS.

Best practices

You can add widgets to existing rows or add more rows to contain widgets. After you have added a row, you can click the Plus icon within the cells of the row to add widgets. Each cell can contain multiple widgets that stack within the cell.

Basic Row

Click the Plus icon to view the Row widget menu and select Basic Row.

Basic Rows in the Spire CMS must always have 12 columns. You can choose from some of the pre-configured layouts in the Row menu, or create your own by entering whole numbers separated by a plus sign, as illustrated in the examples below.

Flex Row

You can also select Flex Row, which gives you more flexible options for row customization.

You can set the following configurations in the Flex Row:

• Gap Between Zones – Set the gap between zones. Zones are the same thing as columns for Basic Row widgets. Value must have a valid CSS length format, such as 10px or 30%.
• Direction – Choose if the zones should be in a Row, Row Reverse, Column, or Column Reverse.
• Wrap – Choose if the content should have No Wrap, Wrap, or Wrap Reverse.
• Justify Content – Set the justification for content: Start, End, or Center.
• Align Items – Choose how the items should align. Options are Stretch, Start, End, Center, and Baseline.
• Align Content – Choose how to align content for the wrap. This option only appears after you select Wrap or Wrap Reverse.
• Flex Zones – Set the number of flex zones (columns) for content. Click Add to add a flex zone.
  • Flex Grow
  • Flex Shrink
  • Flex Basis – Value must have a valid CSS length format, such as 10px or 30%.

Click Save once you are done configuring your Flex Row. You can also go back and edit these settings later.

Widget features and functionality

Widget fields are labeled G, C or T, which have the following meanings:

• G – global value that applies to the website in every context
• C – contextual value that may have different variants
• T – translatable value

You can use a telephone number in any widget that allows you to add links by typing tel: Phone Number into the link space. When a user clicks on the telephone number, it initiates dialing, making it easier for them to contact you.

Add a widget

1. Access the Spire CMS by adding /contentadmin to the end of your site URL or by selecting the Content Editor links from within the admin console.
2. Select a page from the Pages tree.
3. Click Edit.
4. Scroll down and click Add Widget.
5. If you need to add a row, select the desired configuration for the row you are adding to the page. If not, proceed to the next step.
6. Click Add Widget within one of the row's cells. The Add a Widget window appears and shows widgets available for the page.
7. Search for or select a widget from the displayed widget groups and options.

Edit a widget

1. Access the Spire CMS.
2. Select a page from the Pages tree.
3. Click Edit to enter edit mode for the page.
4. Click Edit on the widget you would like to edit.
5. Update the content or settings of the widget as desired
6. Click Save.
7. Click Publish to publish changes.

Copy a widget

1. Access the Spire CMS.
2. Select a page from the Pages tree.
3. Click Edit to enter edit mode for the page.
4. Click Copy on the widget you want to copy. A message displays that the widget is copied to your clipboard. This includes any nested widgets.

   

5. Click Add Widget on the same page or a different page, and select the widget from the Clipboard elements. You can only use the copied widget one time.

   

The copied widgets are only available during the active session.

Delete a widget

1. Access the Spire CMS.
2. Select a page from the Pages tree.
3. Click Edit.
4. Hover over the widget you would like to delete and click Delete.
5. Click Publish.

Available widgets

The widgets available depend on the page you are editing. Some widgets are only available on certain pages, while others are available on most pages.

These widgets are available on every page:

• Basic Elements 
• Common Elements 
• Contact Us Elements
• Header Elements

The table below shows the elements that are specific to each page type.