We’re here to help! Email us here.

Tutorials

loading...

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.

User-added image

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.


 

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

User-added image
 

 
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.
User-added image

 

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.

User-added image



4. Under the Font section, you'll have two options:

  • Link
  • Link (Hover)

User-added image



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:

  •  None
  • Underline
  • Strikethrough
  • Overline

User-added image

  
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!