Link Lists (Responsive)
Link lists have several practical uses on your site. One way is that they can be used to create a secondary menu for a particular section of pages. As you create a Link List, your links can go to internal pages, external pages, or a combination of both. Your Link List can be customized to show different fonts, colors, and/or backgrounds when a visitor hovers a mouse over the list.
When adding the Link List page element, you will see the additional Details tab. Click here for more information about the generic tabs that are shown when adding content.
Within the Details tab, there are three additional tabs: Links Information, Common Properties, and Styles.
Links Information Tab
- URL: Select "use external URL" and then type in the URL for your link in the field below, or use the drop down to select an existing page within your site.
- Title: Enter a title for your link. This is the text that will be displayed as the link.
- Target: Choose if you want the link to open in the same window or in a new window.
- After you've entered a URL, Title, and Target, click the Add button.
- Link List: This shows you all the links you've added to your link list.
- First, Up, Down, Last: Click on a link, then use these controls to change the order of the links in your link list. Make sure to click the Update button after you finish.
- If you need to make any changes to a link, click on the link, make your changes, then click the Update button.
- If you need to delete a link, click on the link, then click the Delete button.
- Image: If you prefer to use an image instead of a Title, click on the gray box under "Image." This will open the library. Select an image from the library. You can then enter a new width and height if you'd like.
Common Properties Tab
- List Type:
- Horizontal List: Creates a list of links that display horizontally across your page.
- Alignment: Choose if you want your list to be left, right, or center aligned on the page.
- Padding Above: Enter a number in pixels to add padding above your link list.
- Padding Below: Enter a number in pixels to add padding below your link list.
- # Items per line: Enter the maximum number of links you'd like to display on one line. If this is left blank it will automatically diplay as many links that can fit.
- Vertical List: Creates a list of links that display vertically down your page.
- Alignment: Choose if you want your list to be left, right, or center aligned on the page.
- Padding Above: Enter a number in pixels to add padding above your link list.
- Padding Below: Enter a number in pixels to add padding below your link list.
- Spacing between items: Enter a number in pixels if you'd like to add space in between each link.
- Separator and text space: Enter a number to add space between your separator (you can choose a separator on the Styles tab).
- Drop down: Displays your links within a drop down field.
- Alignment: Choose if you want your list to be left, right, or center aligned on the page.
Styles Tab
- Separator
- Select Separator: Use the dropdown list to choose a style for the separator that appears between your links. Choose "none" if you do not want to use a separator. Choose "custom" if you'd like to make your own separator.
- Enter Separator: Enter a character to be used as a separator.
- Separator Color: Choose a color for your separator.
- Border
- Border Size: Use the dropdown to choose to add a medium, thick, thin, or no border around your link list.
- Border Color: Enter a color for your border.
- Commom Style
- Font Style: Use the dropdown to choose a font style.
- Font Color: Use the dropdown to choose a font color.
- Background Color: Use the dropdown to choose a background color.
- Rollover Style
- Font Style: Use the dropdown to choose a font style.
- Font Color: Use the dropdown to choose a font color.
- Background Color: Use the dropdown to choose a background color.
- Active Style
- Font Style: Use the dropdown to choose a font style.
- Font Color: Use the dropdown to choose a font color.
- Background Color: Use the dropdown to choose a background color.