Tutorial: Creating Links
HTML links (also called hyperlinks) are what everyone uses to find their way on the big wide world of the internet. You have already clicked on quite a few links to get to this tutorial! Links also make it possible for visitors to navigate through your site. Finding information on the internet would be impossible without links connecting everything together. So if you want a super cool website that search engines love, you need to get really familiar with this feature in Yola! Luckily we have made it really easy for you.
There are two ways to create links:
- Text Links
- Picture Links
Creating a link with the Text Widget
In the Text Widget, type the text you want to use as the link (in the example below, "Click here" is the text) and highlight it with your mouse. Then click on the "Link" button (looks like a chain link) on the Text Editing Toolbar.
The Link Editor dialog box will open up that will allow you to link to:
- Another page of your own site.
- An external URL (another website).
- An email address.
- A file.
When you have made your selection, click "OK". To test that your link is working, save and preview your page. Great stuff! You are now familiar with all the functions of the Link Editor. Remember to use this Link Editor whenever you add something to your site that just can't do without a link.
Formatting your Text Link
An effective way to draw people's attention to your link is setting it apart from the rest of your text through the use of color. The color and format of your links are set by the style, but you can easily change these using the Style Designer. Here's how:
1. In your Sitebuilder, go to Style > Settings > Style Designer.
2. Under the Color section, you'll have 3 options available for editing your links:
- Link: This is the color you see displayed on your links.
- Link (Hover): This is the color you see when you mouseover the link.
- Link (Visited): This is the color you see after the link has been visited.
3. Click on the square to the right and the Color Picker will open up, allowing you to either select a new color or enter a hex color code.
4. Under the Font section, you'll have two options:
- Link (Hover)
5. Click on the 3 ellipses on the right to open up a dialog box. Click on the text on the right-hand to bring up the editing options:
Click "Save" to retain the changes.
Turning a picture into a link
This is a really nifty little site design trick. You can place a picture on your page and then turn it into a link! Your visitors will often instinctively mouse over your pictures and when they are looking at your site, and when the mouse pointer indicates that the picture is clickable, few will be able to resist the temptation to click through and take a look at the next page on your site, or another website that you want to send them to.
To turn a picture into a link, upload and add the picture as normal using a Picture Widget. Hover over the Picture Widget and click on "Edit" on the top left. Then click on "Choose a Link". The Link Editor will open up again, giving you the same options as before.
Awesome! Links are a web design skill, they help visitors navigate your site, and other parts of the web you want them to visit. Use this feature creatively and intelligently and you will be well on your way to crafting an excellent website!