Build Your Own Business Website header image

How to Add Image Links in a Text Widget

In a recent forum post a member asked how to insert an image link into their site using a text widget. The Forum question is entitled “Linking Images”. In the video below I demonstrate how to do this.  This answer is an extension of a video tutorial in Lesson 9, Part 3 of  the “Start Building Your Website Here” tutorial series.


How to Add Image Links in a Text Widget

We’ll start at a demonstration website that I have called Categories.byobwebsite.com. In the Dashboard go down to edit Pages and I’m going to a page that I have created called the Sandbox Page. The Sandbox Page is for the purpose of playing around with different code and it’s quite useful for doing this task in particular. Under Visibility I made it private so that it never shows up. This is an excellent tool for doing what we’re doing here now.

Change the Title

I’m in the HTML view of the Sandbox and I’m placing my cursor inside there and then select Add an Image. Go over to the Media Library and add this cherries3 and under cherries3 I’m going to give it a different title. I’ll title it Go to My Home Page. If I didn’t do that then when we hovered it would have said cherries3 instead and I want it to have a real prompt there.

Add Alternative Text

Go to my Home Page and the alternative text is going to be Washington Cherries. We always want to put alternative text in. You can put SLQ in words that make sense to the image as well but in this case I’m just going to use very descriptive text.

Add Link

Then down here is where you put the link. Right now it’s linking to the image itself. I’m going to get rid of that and I’m going to link to my Home page, www.byobwebsite.com. Then I want it to be on the left, at Medium in size, 300 x 300. Its normal dimensions are 500 x 500 but I’m going to stick to 300 x 300 and we’re going to say Insert into Post.

Add the Link to Text Widget

Now what we have is the HTML for that image as a link. Here is the link itself; the a href equals my website address, then we have the image which is the address, the alt text, the title, its height and width and then the class that tells it to move to the left. So what we’ll do is we’ll go ahead and copy. Let’s go ahead and update the page so we can get back to it later if we need to change it. We’ll scroll down to Appearance, Widgets and then scroll down to grab a Text widget and place it in the sidebar. Then paste that HTML text inside the widget, give it a title, Link Image Demonstration, and hit Save.

We’ll come over and take a look at that site. I’m going to right click on the title here, Open Link in New Tab. Scroll down and look at the site and there it is. It says Link Image Demonstration and it says Go to My Home Page. If we click on it, it does in fact take us to my Home page.

4 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options

Related Posts

4 comments… add one
  • Sue Neal April 19, 2012, 9:14 am

    Great little tutorial – exactly what I was looking for – thank you so much!

  • john October 12, 2012, 8:18 am

    how do they make the blue arrow image move next to the link in this widget? Thank you for taking the time to read this and answering my question.
    http://www.templatemonster.com/demo/38931.html

    • Rick Anderson October 12, 2012, 11:49 am

      John, that is a background image whose position changes based on the hover condition. You would specify a background image for the li element and then specify a different position on hover. It also looks like they are using CSS3 animation to adjust the easing of the shift.

Leave a Comment