Creating links

Note: This article refers to websites created using HostPapa Website Builder

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

In the Text widget, type the text you want to use as the link (in the example below, “Read More” 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.

screen1a-3

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.

You can also choose Open in new window. This means that when visitors to your site click on the link, a new tab will open up in their browser. In this way, they stay on the current page of your website, and can also access the link provided.

screen2-3

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.

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 > Designer.

editingnavigation1

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.

formattinglinks2

3. Click on the link element you want to edit and the Color Picker will open up, allowing you to either select a new color or enter a hex color code.

formattinglinks3

4. Under the “Font” section, you’ll have two options:

  • Link
  • Link (Hover)

formattinglinks4

5. Click on the link element you want to edit to open up a dialog box. Click on the existing link option to bring up the editing options:

  • None
  • Underline
  • Strikethrough
  • Overline

formattinglinks5

Click Save to retain the changes.

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 Edit on the top left. Then click Choose a Link. The Link Editor will open up again, giving you the same options as before.

screen3-3

Related Articles

This post is also available in: FrançaisEspañolDeutsch
Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache