Styling Body Links
Clicking on any text link in the Content Column of your template allows you to customize the main content, or body, links.
The gray toolbar switches to the Body Links editing tools.
You can edit how the text of the links will appear. And you can select a background for the links.
Below is a screenshot of the toolbar...
If you're ever unsure what a toolbar button does, hover over it for a second. Its function will appear as a tooltip.
Normal
Normal is the link style when a visitor has never visited the link's destination, and is not hovering over the link.
For any first-time visitor, all your links will be the default color determined by the template. This is usually an underlined blue color.
- Click on the Color Palette button to change the link text color.
- Click on the B or I button to add bold or italic to the link texts. Click on the U button to change the underlining.
- Click on the gears button to open the Advanced Styles overlay and add a background color to the link text.
You can change this to any text color that suits your template's overall color scheme, add bold and italics to the links, remove the underlining, and add a background color.
Blue is the standard color for links on the web, so you may want to stick with a blue color. Underlining is also standard, so most people have come to expect links to be blue and underlined.
The bold and italic options will make your links stand out more from the regular text. This will be especially important if you don't use blue and/or don't underline the links.
If you make the normal link bold or italic, also make the hover link bold or italic. If you leave them as regular text, the content will shift back and forth due to the extra room on the line that bolded or italicize text takes up.
You can also add a background color to the links (click on the gears button). This change will be global across all links on all pages of your site, so think twice about adding a color. If you do add one, make it a very muted color that your visitors will not tire of after 30 seconds.
Do not set the Normal state's background color to Transparent if you want to have a background color for either the Visited state or the Hover state.
If you do set the Normal background color to Transparent, you'll see a warning message if you try to set the background color for either of the other states.
Visited
The Visited link state is the styling that the links take on after visitors click on that link and land on the destination page. If they return to the previous page, or visit another page with a link to that same destination page, the link will have the Visited styling.
The standard color for visited links is purple. You can choose a variation of purple that suits your color scheme, or go with a different color.
- Click on the Color Palette button to change the link text color for the Visited state.
- Click on the gears button to open the Advanced Styles overlay and add a background color to the Visited state of the text links.
You can change the text link color and the background color for the Visited state.
The Color Palette button has a V on it to indicate that this is the palette for the Visited state. Click on it to change the Visited state link text color for your template.
The first time you click on the button, you'll see a warning message. Read the message before proceeding.
Click on the gears button if you want to add a background color to the Visited state of all links. Since each visitor will see only a small fraction of your links as visited links, adding a background color here will not be as jarring to the eye.
However, since visited links are less important than unvisited links, you may not want to call attention to them with a background color.
You'll note that there are no B, I and U buttons for the Visited link state. Whatever is set for the Normal state applies to the Visited state as well.
Hover
The Hover link state is the styling that appears when a visitor places her mouse or trackpad over a link (this action is called hovering).
The standard color for hovering over links is red. Choose a variation of red that suits your color scheme, or select a different color.
- Click on the Color Palette button to change the link text color for the Hover state.
- Click on the B or I button to add bold or italic to the link texts. Click on the U button to change the underlining.
- Click on the gears button to open the Advanced Styles overlay and add a background color to the Hover state link text.
You can change the text color, add bold and italics, remove the underlining, and add a background color.
Since hovering is a temporary action (it doesn't change the way the links look when the mouse is not on the link), you can make changes that will not affect the overall look of your site.
Click on the Color Palette button with the H on it to change the link text color to a variation of red, or to another color.
The first time you click on the button, you'll see a warning message. Read the message before proceeding.
If you made links bold and/or italic for the Normal state, keep those the same here. As noted above, changing them can have text moving back and forth in the line when visitors hover over your links. This is due to the change in character size from the addition of bolding and/or italics.
So the best way to make hovering stand out (other than a color change) is to add a background color -- unless you added one to the Normal state. Ensure that visitors can still read the link text as they hover over links. For example, you don't want to use red text color on a dark color.