Widget placement on a page

You can place widgets on a page using the Page Builder to create information hubs of digital workplace content for your organization's employees. 

Considerations

  • Cancel: Selecting Cancel at the top of the Page Builder will refresh the page, and you will lose all changes made since you last selected Save Page. 

Who can do this?

  • Workplace administrators 
  • Site administrators

Components of the Page Builder

The Page Builder utilizes rows and columns to allow the placement of widgets on the page in a responsive grid. Each row has 12 units (screen size percentage) for columns to use. The row and column size can be configured based on the intended display size. Display sizes include: 

  • Extra Large: Desktop ultrawide screens up to 2560 x 1080 resolution. 
  • Large: Desktop screens up to 1920 x 1080 resolution.
  • Medium: Laptop screens up to 1280 x 800 resolution. 
  • Small: Mobile tablet screens display horizontally up to 1020 x 1366 resolution.
  • Extra Small: Mobile device screens display vertically up to 390 x 844 resolution.

The image below places widgets on a page with different column sizes, dependent on the intended display device, with gutters and the default column spacing of 2 units. 

Widget layouts with different column width ratios.

Note:

It is recommended that the Small and Extra Small display sizes be set to a column width of 12 units to ensure a good display style in the mobile browser and the Igloo Flex Mobile app.

Place a widget on a page

  1. Go to the page you want to edit. You can find it using the Menu or the Search box in the Top Bar.
  2. Select Edit this Page.
  3. Select New Widget.

  4. From the Widget List, select a widget and drag it onto the page to place it. While dragging the widget, you can hover over a location, and the Page Builder will display a label for actions you can take with the widget. Options include: 

    • Above row: It will create a new row above the current row and place the widget in that row. 
    • Below row: It will create a new row below the current row and place the widget in that row. 
    • Above widget: It will place the widget above the currently placed widget. 
    • Below widget: It will place the widget below the currently placed widget.
    • Left of column: The widget will be placed to the left of the placed widget. If Column Sizes are set to Auto, the widget will be sized according to available space. 
    • Right of column: The widget will be placed to the right of the placed widget. If Column Sizes are set to Auto, the widget will be sized according to available space. 

    If you have misplaced the widget, select the handlebars in the widget's bar to drag and drop the widget to a new location. 

  5. Once you have placed the widget, you can configure it. See Widget for information on configuring different widgets. 
  6. (Optional) Configure the row: In the row's bar, select Edit to edit the row's configuration. See the Row configuration section below. Alternatively, you can select Delete to remove the row. However, any columns or widgets in this row will also be removed. 
  7. (Optional) Configure the column: In the column's bar, select alt Edit to edit the column's configuration. See the Column configuration section below. Alternatively, you can select Delete to remove the column. However, any widgets in this column will also be removed. 
  8. Select Save Page. 
  9. If you have no further changes to make, you can select Exit, and if prompted, select Yes, exit. 

Row configuration

When dragging and dropping widgets into the Page Builder, rows are horizontal spaces where multiple widgets can be placed. Each row can be subdivided into multiple vertical columns with various widths.

When configuring a row, you should consider adjusting the following settings: 

Display Settings Description
All

Configure the following options for all display sizes: 

  • Maximum Width: Select a maximum display width for the row. Options include: 
    • None
    • Extra Large
    • Large
    • Medium
    • Small
    • Extra Small
  • Gutters: Toggle on or off to display space at the beginning and end of the row.
Extra Large

Intended for desktop ultrawide screens up to 2560 x 1080 resolution.

Configure the following options for the Extra Large display size: 

  • Column Spacing: Select the amount of space to place between columns. Options include None, or 1 to 12 units. The default value is 2. 
  • Row Spacing: Select the amount of space to place between rows. Options include None, or 1 to 12 units. The default value is 2. 
 Large 

Intended for desktop screens up to 1920 x 1080 resolution.

Configure the following options for the Large display size: 

  • Column Spacing: Select the amount of space to place between columns. Options include None, or 1 to 12 units. The default value is 2. 
  • Row Spacing: Select the amount of space to place between rows. Options include None, or 1 to 12 units. The default value is 2. 
Medium 

Intended for laptop screens up to 1280 x 800 resolution. 

Configure the following options for the Medium display size: 

  • Column Spacing: Select the amount of space to place between columns. Options include None, or 1 to 12 units. The default value is 2. 
  • Row Spacing: Select the amount of space to place between rows. Options include None, or 1 to 12 units. The default value is 2. 
Small

Intended for mobile tablet screens displayed horizontally up to 1020 x 1366 resolution.

Configure the following options for the Small display size: 

  • Column Spacing: Select the amount of space to place between columns. Options include None, or 1 to 12 units. The default value is 2. 
  • Row Spacing: Select the amount of space to place between rows. Options include None, or 1 to 12 units. The default value is 2. 
Extra Small
 

Intended for mobile device screens displayed vertically up to 390 x 844 resolution.

Configure the following options for the Extra Small display size: 

  • Column Spacing: Select the amount of space to place between columns. Options include None, or 1 to 12 units. The default value is 2. 
  • Row Spacing: Select the amount of space to place between rows. Options include None, or 1 to 12 units. The default value is 2. 
Display Settings

Column configuration

When dragging and dropping widgets into the Page Builder, columns are vertical spaces where multiple widgets can be placed. Each column can be subdivided to allow multiple widgets to stack vertically.

When configuring a column, you should consider adjusting the following settings: 

Display Settings Description
Extra Large

Intended for desktop ultrawide screens up to 2560 x 1080 resolution.

Configure the following option for the Extra Large display size: 

  • Column Size: Select the size of the column. This will affect the size of widgets in the column. Options include Auto or 1 to 12 units. The default value is Auto. 
 Large 

Intended for desktop screens up to 1920 x 1080 resolution.

Configure the following option for the Large display size: 

  • Column Size: Select the size of the column. This will affect the size of widgets in the column. Options include Auto or 1 to 12 units. The default value is Auto. 
Medium 

Intended for laptop screens up to 1280 x 800 resolution. 

Configure the following option for the Medium display size: 

  • Column Size: Select the size of the column. This will affect the size of widgets in the column. Options include Auto or 1 to 12 units. The default value is Auto. 
Small

Intended for mobile tablet screens displayed horizontally up to 1020 x 1366 resolution.

Configure the following option for the Small display size: 

  • Column Size: Select the size of the column. This will affect the size of widgets in the column. Options include Auto or 1 to 12 units. The default value is Auto. It is recommended that you configure a column width of 12 units to ensure a good display style in the mobile browser and the Igloo Flex Mobile app.
Extra Small
 

Intended for mobile device screens displayed vertically up to 390 x 844 resolution.

Configure the following option for the Extra Small display size: 

  • Column Size: Select the size of the column. This will affect the size of widgets in the column. Options include Auto or 1 to 12 units. The default value is Auto. It is recommended that you configure a column width of 12 units to ensure a good display style in the mobile browser and the Igloo Flex Mobile app.
Display Settings

Related to