This article...
- Details how to add the Quick Links layout to a canvas on the Design tab.
- Describes the properties panel, where customizing the layout is done on the Content and Style tabs.
- Discusses style customizations: border, padding, alignment, and spacing controls for the links.
Use the Quick Links layout to create a group of hyperlinks, each of which you can individually customize.
Add a Quick Links layout
To add a Quick Links layout:
- Navigate to the Design > Build tab.
- Expand the Static Elements group.
- Click-&-hold and drag the Quick Links layout to the canvas and drop it in place.
TIP: The precise location isn't crucial right now because you can reposition the layout later.
The layout is selected on the canvas and the associated "properties" panel opens on the left. You can:
- start configuring the properties (refer to the next section) or
- click the Back button in the panel to add another layout. The layout that you added remains in place; you can configure it later.
Quick Links properties
After adding a Quick Links layout, click to select it on the canvas to access its properties. These properties are divided into two categories:
- Content
- Style
Content tab
- Stack on Mobile Version - Check this box to have the links behave responsively on mobile devices and clients.
- Separate links with - Select one of the following to separate your links:
- Nothing
- Colon
- Hyphen
- Vertical Bar
- Image
- Images - If you select image, you’ll have the option to upload a custom image. Note that using a large image as a separator can cause rendering issues. Use small images when possible.
- Rearranging links - Click the Up or Down arrows to re-order the links.
- Each of the links that you add (to a maximum of eight) has a dedicated text properties editor where you can customize that link. (Be sure to set the text as a hyperlink with the hyperlink icon!)
- Click Add Quick Link to add a new link.
Style tab
The Style tab lets you modify the look and feel of your quick link layout.
- Border - If checked, your quick link layout applies a border with several possible settings.
- Border Style - Click the drop-down to select a solid, dashed, or dotted border.
- Border Size - Click the drop-down to set the border size in pixels (1 – 10).
- Border Color - Click to use the color picker to select a unique color for the layout’s border.
- Apply Border To - Check the corresponding checkbox for each side (top, bottom, left, and right) that uses the border.
- Padding - Click the drop-down list to set the padding around your quick links (0 – 30 pixels).
- Alignment - Click the drop-down list and select the alignment (left, center, or right).
- Spacing - Click the drop-down list to set the spacing between each of your links (0 – 30 pixels).