Possible Configurations

The Page Builder Links component was designed to display complex lists. It is usually used to make a list of links more appealing, but it can also be used for list that have no links.

Each item in the list can display an icon. You can customize the icon but a default icon is used depending to the link type.

Each item can also display an image and text.

The component configuration Type will determine how the different elements of the items will be displayed.

Type 1

Example configured in color blue (unless overridden), 4 columns, 16px column gap, 100% width.

Container settings configured with 2px border, padding all around.

Link 1

Link to an URL.

Show icon, show portrait thumbnail on top, centered. No color override.

Link 2

Link to a file. In this example the file is an image.

Show icon, show portrait thumbnail on top, centered. No color override.

Link 3

Link to content displayed in overlay.

Show icon, show portrait thumbnail on top, centered. No color override.

Link 4

Link to video - displays in overlay.

Show icon, show portrait thumbnail on top, centered. No color override.

Type 2 - 90% and links without images

Type 2 adds an underline on each link item.

Show icon, show square thumbnail on top, left aligned. Base color blue.

Link 1

Link to an URL.

Link 2

Link to a file. In this example the file is an image.

Link 3

Link to content displayed in overlay.

Link 4

Link to video - displays in overlay.

Link 1 without image

Link to an URL.

Link 2 without image

Link to a file. In this example the file is an image.

Link 3 without image

Link to content displayed in overlay.

Link 4 without image

Link to video - displays in overlay.

Type 3

Type 3 adds a box around each item.

Show icon, show landscape thumbnail on top, left aligned. Base color blue.

Container settings configured with dark gray background, white text and padding all around. This shows a possible dark theme usage.

Link 1

Link to an URL.

Link 2

Link to a file. In this example the file is an image.

Link 3

Link to content displayed in overlay.

Link 4

Link to video - displays in overlay.

Type 4 - Color Green and text before item

Type 4 adds a rounded box around each item.

Show icon, show landscape thumbnail on top, left aligned. Base color green. Some items have a text before the item title.

Link 1

Link to an URL.

Link 2

Link to a file. In this example the file is an image.

Link 3

Link to content displayed in overlay.

Link 4

Link to video - displays in overlay.

You can have some text before the item.

Link 1 with text Before

Link to an URL.

The items are arranged in rows if more items than columns

Link 2 with text before

Link to a file. In this example the file is an image.

Buttons - rounded corners

In this example the component was configured with type set to Rounded button. This can be used to create buttons with rounded corners. This example shows simple buttons with only  icon and title. The color style for the group was set to blue, but the color style was customized for the first button to orange. 

Container setting configured with a video background, 1px border all around, rounded corners.

REGISTRATION
AGENDA
HOTEL INFO

Buttons - square corners

This example is configured with type set to Buttons. This setting adds a background color and makes the entire link item clickable, instead of just the title of the item. You can have simple buttons or more complex ones, with image and/or text.

Link 1

Link to an URL.

Link 2

Link to a file. In this example the file is an image.

Link 3

Link to content displayed in overlay.

Link 4

Link to video - displays in overlay.

REGISTRATION
AGENDA

Configurations

Component Configurations

  • Title
  • If title should be displayed on the page
  • An introduction text displayed before the links
  • Number of columns
  • Column Gap
  • Type (how the link should be displayed)
  • Color
  • Component width as a percentage of the total width available for the component
  • Placement (top of page content, bottom of page content, inline, etc.)
  • Container Settings

Container Settings

Container settings allows the configuration of the container housing the component. It allows the following settings:

  • Padding (in px): top, right, bottom, left. Defaults to 0px for all.
  • Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
  • Border (in px): top, right, bottom, left. Defaults to 0px for all.
  • Border Radius (in px): defaults to 0px.
  • Border Color
  • Background
    • Color
    • Text Color
    • Extend text color to items or not
    • Opacity (%)
    • Blur (in px)
    • Media (image / video)
      • Parallax Effect (for Image only)

Link Item Configurations

  • Title
  • Type (no link, url, file, video, overlay content)
  • Url
  • File
  • Video
  • Content (text)
  • Thumbnail
  • Show Icon (Yes/No)
  • Show Thumbnail (Yes/No)
  • Thumbnail Position and Orientation (landscape, portrait, square, circular)
  • Color Style
  • Description (before and/or after title)
  • Icon customization