Basic Elements widgets

  • Updated

Basic Elements widgets are available on any page and provide fundamental functionality for your Configured Commerce website.

Spire_BasicElements.png

Read more about each of these widgets below.

Banner

This widget is one of the most commonly used types of visual display. You can use it to call out important information. This widget is also contextual, letting you change the way content is displayed on different-sized screens and for different customer segments.

Configure the banner widget using options on three tabs: Basic, Settings, and Advanced. 

Basic

Background – Select Image or Color from the drop-down list for the banner background. This setting determines the options that follow.

  • Image
    • Add Image – Select or upload an image for your banner. When selected, the image's location displays in the field below. You can also enter an image URL.
    • Image Color Overlay – Select an overlay color using the color picker, a hex code, or the RGBA fields. This color overlays your entire image by default.
    • Partial Overlay – Set your color overlay to cover only part of your banner image. Use Partial Overlay Positioning to position the color overlay at the top, middle, or bottom of the banner. The heading and subheading will remain on this overlay and be repositioned with it.
    • Focal Point – Adjust the focal point of the image on your banner.
  • Color
    • Partial Overlay – View options for positioning text on the banner. You can also overlay the text on the top, middle, or bottom of the banner.
    • Color – Select the banner color using the color picker, a hex code, or the RGBA fields.

Heading – Configure the heading for your banner. Click Expand to view more formatting options.

Subheading – Configure the subheading for your banner. Click Expand to view more formatting options.

Button Label – Enter text that displays on the default button on your banner.

Button Link – Link the banner button to a page in your site's page tree, a site category, or another URL.

Button Variant – Select your site's primary, secondary, or tertiary color for your button. These colors are configured in the Style Guide.

Minimum Banner Height – Select the viewport size for your banner, which determines how much of your image displays. You can select 1/4 Viewport, 1/2 Viewport, 3/4 Viewport, or Full Viewport.

Disable Button – Select this checkbox to disable the default banner button.

Content Padding – Determine the padding surrounding the banner text in pixels. If you are using an image with a color overlay, this setting adjusts the size of the overlay.

Center Text Vertically – Select this checkbox to center the text vertically in the banner. This overrides the text alignment settings in the heading and subheading rich text fields.

Settings

Responsive Font Sizes – Select this checkbox to make the banner text responsive to screen size (recommended).

Custom Font Sizes – Select this checkbox to enable and configure custom font sizes for normal text, H1, H2, H3, H4, H5, and H6 in the heading and subheading rich text fields.

Advanced

You can configure custom CSS for your banner. This is only for display CSS and is not intended for script. 

Breadcrumb

Use this widget to place breadcrumbs on the page. This widget is not configurable.

Button

Use this widget to add a link button to your site. 

Basic

  • Button Variant – Select from your site's primary, secondary, or tertiary color for your button. These colors are configured in the Style Guide.
  • Button Label – Enter text that displays on the button.
  • Button Link – Click this field to view button link options. You can link the button to a page in your site's page tree, a site category, or another URL.
  • Button Alignment – Select your button's alignment to the left, center, or right of your page.

Advanced

You can configure custom CSS for your banner. This is only for display CSS and is not intended for script. 

Code Snippet

Use this widget to add a snippet of Custom CSS, HTML, JavaScript, Markdown, or PlainText to your page. Only users with the CMS_ContentDeveloper role can add and configure this widget.

Flex Row

Use this widget for 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 as columns for Basic Row widgets. The 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.

Grid

Use this widget to assign a layout by configuring the number and size of columns in the viewport.

Image

This widget adds an image to your page. You can use it in combination with other widgets in a grid. For example, you could place an image above a related button. This widget is also contextual, letting you change the way content is displayed on different-sized screens and for different customer segments.

Configure the image widget using Basic and Advanced options. Read more below about individual fields and settings.

Basic

  • Image – Click Add Image to select or upload an image for your banner. Once selected, the image's location is displayed in the Image URL field below. You can also enter an image URL directly into that field. 
  • Alt Text – Enter a short description of the image.
  • Image Link – Link your image to another page on the site, a site category, or an outside URL, if desired.

Advanced

You can configure custom CSS for your banner. This is only for display CSS and is not intended for script. 

Item List

Use this widget to create a list of links to all subpages under a chosen page. This shows page hierarchy, which may be relevant for pages such as news pages. You cannot use this widget to link to external sites.

Override Title – Override the default title displayed for the page chosen (optional).

Default Page Size – Enter the number of pages to display under the title. Any subpages on the list beyond this number will display on consecutive pages, which you toggle through using arrows or navigate by page number. This field defaults to 5.

Page – Select the page for which you want to display subpages.

Link

This widget adds a basic text link to your page, which will often be used on a grid with other widgets. You can configure the link widget using Basic and Advanced options. Read more below about individual fields and settings.

Basic

  • Destination – Set the link to another page on the site, a site category or an outside URL.
  • Override Title – Use this optional field to override the default link title. Links to pages on the site will default that page's title, while URLs will display in full if not overridden.

Advanced

You can configure custom CSS for your banner. This is only for display CSS and is not intended for script. 

Link List

Use this widget to create your own link list. Configure the link list widget using Basic and Advanced options. Read more below about individual fields and settings.

Basic

  • Direction – Set the list orientation under the title to horizontal or vertical.
  • Alignment – Set the link list alignment to left, center, or right.
  • Title – Enter the list title.
  • Title Link – Link the list title to a page in your site's page tree, a site category, or another URL, if desired.
  • Links – Click Add to create links on your list. Enter the link destination and an optional title. You can also select to open the link in a new window. Click Done when finished. You can also drag to reorder the link list, click Edit to change a link, or delete a link.

Advanced

You can configure custom CSS for your link list. This is only for display CSS and is not intended for script. 

Logo

This widget adds a logo image to your site.

Click Add Image to select or upload an image for your logo. Once selected, the image's location is displayed in the Image URL field. You can also enter an image URL directly into that field.

Toggle Mobile Specific Image to set a logo in mobile contexts. Additional mobile logo settings display. Click Add Image to select or upload an image for your mobile logo. The image's location is displayed in the Mobile Logo field. You can also enter an image URL directly into that field.

Navigation List

Use this widget to create a link list that shows your site navigation. You can configure the widget to show different taxonomy levels within your page tree.

Configure the Navigation List widget using options on two tabs: Basic and Advanced. Read more below about individual fields and settings.

Basic

  • Depth –  Set the number of taxonomy levels to display on the list.
  • Page –  Select the top-level page for the widget.
  • Left Margin – Select the margin size to the left of the list (defaults to 0). 
  • Margin Bottom – Adjust the spacing between list items (defaults to 0).

Advanced

You can configure custom CSS for your Navigation List widget. Note that this is only for display CSS and not for script. 

Page Title

This widget lets you add the page title to your page. You can configure the title by clicking More next to a page on the page tree.

Quick Order

This widget lets you add access to the Quick Order functionality to any page without going to the Quick Order page. You cannot configure this widget. Clicking Upload an Order brings the user to the Order Upload page and clicking Order Multiple Items takes the user to the Quick Order page. 

Rich Content

This widget lets you have text and images in a single widget, rather than using multiple widgets on the grid layout. Configure the Rich Content widget using Basic and Advanced options. This widget is also contextual, letting you change the way content is displayed on different-sized screens and for different customer segments.

Read more below about individual fields and settings.

Basic

  • Background Color – Select the background color for your rich content using the color picker, a hex code, or the RGBA fields.
  • Content Padding – Use this field to determine the padding surrounding your rich content in pixels.
  • Content – Enter your text and images in this box. Click Expand to view more formatting options, including inserting links, images, videos, and files.

Advanced

You can configure custom CSS for your rich content. This is only for display CSS and is not for script. 

Row

Use this widget to define the number of columns in a row. Configure the link list widget using Basic and Advanced options. Read more below about individual fields and settings.

Basic

  • Layout – Rows must always have 12 columns. You can select from eight pre-configured* layouts or enter integers separated by plus signs adding up to 12 into the field, as shown below:
    • One column* – 12
    • Two equal columns* – 6+6
    • Three equal columns* – 4+4+4
    • Four equal columns* – 3+3+3+3
    • One large column and one small column* – 10+2
    • Three columns (two small columns and a third twice the size of the other two)* – 3+3+6
    • Three columns (two small columns on either side of a third that is twice the size)* – 3+6+3
    • Six equal columns* – 2+2+2+2+2+2
    • Four columns (one twice the size of the other three) – 6+2+2+2
    • Three uneven columns – 5+4+3
  • Gap Between Items – Increase or decrease the space between columns.
  • Use default reflow for responsive screen sizes – Click this checkbox to ensure rows are responsive to screen size changes (checked by default).

Advanced

Configure the alignment of each row to top, middle, or bottom on this tab.

Rows 

This widget lets you quickly create full-width rows for layout or padding.

Row Count – Enter the number of rows to create.

Gap Between Items – Increase or decrease the space between the rows.

Slideshow

You can use the slideshow widget to create a collection of slides with images and text. This widget is configured similarly to the Banner widget. This widget is also contextual, letting you change the way content is displayed on different-sized screens and for different customer segments.

Configure the Slideshow widget using Content, Settings, and Advanced options. Read more below about individual fields and settings.

Content

Under Slides, click Add to add a slide and configure its content. This field is contextual, so you can configure slides and target content according to device, language, or customer segment using the drop-down lists at the top of the content admin toolbar.

Slide Title – Enter a title. This is for reference when configuring the widget and will not display on the slide.

Background – Select Image or Color from the drop-down list for the banner background. This setting determines the options that follow.

  • Image
    • Add Image – Select or upload an image for your slide. Once selected, the image's location is displayed in the field below. You can also enter an image URL.
    • Image Color Overlay – Select an overlay color using the color picker, a hex code, or the RGBA fields. This color overlays your entire image by default.
    • Partial Overlay – Set your color overlay to only cover part of your slide image. Use Partial Overlay to position the color overlay at the top, middle, or bottom of the slide. The heading and subheading will remain on this overlay and be repositioned with it.
    • Responsive Image Behavior – You can Cover the entire slide with the image, Center the image on the slide, Prioritize height to fit the slide image height, or Prioritize width to fit the slide to image width.
    • Focal Point – Adjust the focal point of the image on your slide.
  • Color
    • Partial Overlay – View options for positioning text on the slide. You can also overlay the text on the top, middle, or bottom of the slide.
    • Color – Select the slide color using the color picker, a hex code, or the RGBA fields.

Heading – Configure the heading for your slide. Click Expand to view more formatting options.

Subheading – Configure the subheading for your slide. Click Expand to view more formatting options.

Button Label – Enter text that displays on the optional default button on your slide. 

Button Link – Link the slide button to a page in your site's page tree, a site category, or another URL.

Button Variant – Select your site's primary, secondary, or tertiary color for your button. These colors are configured in the Style Guide.

Content Padding – Determine the padding surrounding the banner text in pixels. If you are using an image with a color overlay, this setting adjusts the size of the overlay.

Center Text Vertically – Select this checkbox to center the text vertically in the banner. This overrides the text alignment settings in the heading and subheading rich text fields.

Click Save when you have finished configuring your slide content.

You can add additional slides and drag to reorder them.

Settings

Configure settings for the slideshow as a whole on the Settings tab.

  • Height – Select the viewport size for your slide, which determines how much your image displays. Select 1/4 Viewport, 1/2 Viewport, 3/4 Viewport, or Full Viewport.
  • Text Alignment – Align the text for all slides in your slideshow to the center, left or right.
  • Show Arrows – Select this checkbox to show arrows on each side of the slide that can be used to navigate through the slideshow.
  • Slide Indicator – Select this checkbox to show a progress indicator at the bottom of the slideshow.
  • Autoplay – Configure the number of seconds each slide will display (defaults to 10 seconds).
  • Responsive Font Sizes – Select this checkbox to make the slide text responsive to screen size (recommended).
  • Custom Font Sizes – Select this checkbox to enable and configure custom font sizes for normal text, H1, H2, H3, H4, H5, and H6 in the heading and subheading rich text fields.

Advanced

You can configure custom CSS for your slideshow. This is only for display CSS and is not intended for script. 

Social Links

The social links widget provides preconfigured icons for common social media platforms. You can also work with a partner to create custom icons. Social icons are used most often in the footer.

Configure the Social Links widget using Basic and Advanced options. Read more below about individual fields and settings.

Content

Links – Click Add to add a social link. Enter an optional Title. Select from Instagram, YouTube, Facebook, Twitter, X, Rss, User, LinkedIn, Camera, Video, and Notebook Icons. Enter the related URL in the destination field. Select the checkbox if you would like the link to open in a new window. 

You can add additional links and drag to reorder them.

Settings

  • Display – Select to display your social links in a column or in a row.
  • Text Position – Select to display the title text to the left or right of the icon.
  • Icon Size – Set the icon size in pixels.
  • Icons Per Row – Select the number of icons to display in a row (up to 8).
  • Visibility – Select to display both the icon and the label (title), only the icon, or only the label.
  • Icon Color – Select the icon color using the color picker, a hex code, or the RGBA fields.
  • Background Color – Select the background color using the color picker, a hex code, or the RGBA fields.

Advanced

You can configure custom CSS for your social links. This is only for display CSS and not for script. 

Subscribe

Use this widget to solicit subscriptions to your email list. You can access subscribers in the Admin Console. 

Configure the Subscribe widget using options on two tabs: Basic and Advanced. Read more below about individual fields and settings.

Basic

  • Layout – Set the widget alignment to Center (default), Left or Right.
  • Title – Enter a title for the widget (Subscribe by default).
  • Description – Enter a description for the subscribe widget in the rich text box. This information is displayed under the title.
  • Placeholder Text – Enter placeholder text for the email address (Enter the email address by default).
  • Disclaimer – You can enter a disclaimer in the rich text box that will display under the email address field. For example, you can tell customers how you will use their information. For example, you may distribute a newsletter or special discounts or clarify whether their information will be sold to third parties.
  • Button Label – Enter text that displays on the button (Subscribe by default).

Advanced

You can configure custom CSS for your Subscribe widget. Note that this is only for display CSS and not for script.