EverWeb Widgets

Hyperlinks

With the proliferation of touch devices, text hyperlinks aren't used so much in modern web design and have been replaced by CTA (Call To Action) style tabs. CTAs have proved to be much more effective in compelling visitors to follow links.
Links can still be used effectively in text but they need to have their target area increased for fingertips and be made more obvious by adding extra padding and a background.
In widgets with text entry boxes, hyperlinks are created using HTML like this …

<a href="#">Hyperlink Text</a>

The hash sign (#) is replaced with a relative or absolute file path. See the File Path page for more info.
To open the link in a new window, add target="_blank" like this...

<a href="#" target="_blank">Hyperlink Text</a>

If a hyperlink is created in an HTML doc which is then displayed on a web page using an iframe, the linked page will also open in the iframe which may not be the desired result. To open the link out of the iframe, change the target from "_blank" to "_top" like this …

<a href="#" target="_top">Hyperlink Text</a>

Phone Link
A phone link is created like this …

<a href="tel:888-123-4321" title="(888) 123 4321">Tel: (888) 123 4321</a>

The format for the phone number is shown in red, the title shows the number when the link is hovered and can be deleted if not required and the text seen by the vistor is marked in blue.

Email Link
<a href="mailto:info@my-website.com?subject=Email Subject&body=">Email Me</a>

The email address is marked in red, the subject line in green and the link text seen by the visitor is blue. Any body text can be inserted after the equals sign and before the closing double quote.

Using Spans

When some text is selected in an EverWeb default text box so that its color, style or weight can be changed, the application uses a <span> tag to achieve this.
When using the text boxes in widgets, the same technique can be used like this …
<span>Span Text</span>
The styles can be set inline like this…
<span style="color:#FF0000">Span Text</span>
When using a number of spans on the same page, it is more efficient to set up a class name for the span and use internal styles in the Head Code box in the Page inspector like this …
<style type="text/css">
.blueSpan{display:block;
text-align:center;
color:#0000FF;
margin:0;
padding:5px;
font-style:italic;
font-size:16px;
}
</style>
The HTML goes like this …
<span class="blueSpan"> Span Text</span>
… and the result looks like this …Span TextNote how these spans are aligned center in the widget. This is done by declaring the span as a block level element with 100% width and setting the text align to "center". When set up like this, the span doesn't need a <br> to return it to a new line.

© EverWeb Widgets -