Blog

Building Graphic Links

Building graphic links on your website is easier than you think! Whether you want to create a link to another website – such as a social media account, or simply provide a visual link to another section of your website, utilizing visual links can be a great asset.

Before we begin this tutorial, one word of caution. Website design and standards are continually changing, and these days, graphic links are best when used minimally and in icon form – not large pictures or graphics. Having too many graphic images on a page clutters the look and current website standards are moving away from that. White space is good – and allows the users eye to be drawn to the few icon or modest graphic links you have.

  1. To begin, you need an image. Start off with a good quality, 72 dpi image.  If you are building a link to a popular website – such as Facebook, YouTube, Twitter, etc. you can easily find free downloadable icons to use.

    See some resource links at the bottom of this post.

  2. Upload your jpg, gif or png file to your File Uploads area. Once uploaded, click the “info” link – a pop-up window will appear. Copy the entire URL for the file, and for now, keep the pop-up window minimized – you may need it again in the next steps.
  3. In your Navigation Builder, go to the page and location you want to build the graphic link. In a Text/Graphic Editor, position your cursor to the correct location (or at the top for a new Editor) and click the “Insert Image” icon. 
  4. In the Insert Image menu, paste the image URL that you copied from the info window.
  5. Click the Link tab on the menu and URL field,

    enter the destination URL. In the drop down menu below for “Target”, choose “New Window” if you are setting up this link to go out an external website.

  6. Before you click OK, go back to the Image Info tab and enter a “0” in the Border field. This will ensure that your icon or graphic doesn’t have a border around it. Now click OK.
  7. Click Update on the Text/Graphic Editor on your Faithwebsites admin. Check out your new image!

    Should work great.

You can edit your Text Editor and add two or three small icons in a row, or use your Right Side bar and add a single icon or image.. the list of options goes on!

For more assistance with inserting linked images, visit CK Editor Source Help Documents.

Free icon resources for social media websites (note that Faithwebsites does not specifically endorse any of these resources):

Tags: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our RSS Feeds

Blog Search

Join Us on Twitter

Join Us on Facebook