Linking image

[rakers93]

Hi Jason I am working on my homepage and I have three columns with images in each. How do I get the images to link to another page
http://kidsdrumminglessons.com/
Ray

Topic

[Jason Bobich]

Hello Roy,

So, in each column you have an image with HTML something like this:

And so to have it link somewhere you’d just wrap it in a standard HTML anchor tag to link wherever you want.

http://www.w3schools.com/html/html_links.asp

Make sense?

[edit] Ignore the rel="nofollow" part. My forum is adding that for some odd reason.

[rakers93]

That worked but now I have 2 new issues
1 there is a space between the h3 and image
2 the h3 in the third column is blue for some reason

http://kidsdrumminglessons.com/

[Jason Bobich]

1 there is a space between the h3 and image

This is just the margine on h3 tags and paragraphs. It can be changed with CSS customization, if you wish.

2 the h3 in the third column is blue for some reason

I do not see this any more on your site; so it looks like you’ve figured it out? Or abandoned linking the images? But I’m assuming you opened an anchor tag in the second column, but then didn’t close it. So, the anchor tag carried over to content of the third column.

[rakers93]

The blue text is fixed you were right an unclosed anchor tag was the cause. I would like to fix the spacing issue but, css customization sounds a bit scary.

[Jason Bobich]

Nah, it’s not scary. I can already tell by attention-to-detail and desire to get everything just right, that you’ll benefit from taking some time to learn in this regard.

To get started you want to get a Child theme activated. Start with watching this video: https://vimeo.com/41331677

Then any kind of CSS customizations you want to make simply go in your Child theme’s custom.css file. If they don’t work right or look the way you want, you either tweak or remove them.

So for example, here, you could take complete control over your homepage columns like this:

.home .columns h3 {
	margin-top: ...;
	margin-bottom: ...;
}
.home .columns p {
	margin-top: ...;
	margin-bottom: ...;
}

[edit] I just noticed that you have some extra spacing from WP automatic formatting on your columns between the h3 tags and images. To get rid of some of that you can uncheck the “Apply WP automatic formatting” box in the Layout Builder when editing the column’s content or make sure there are no line breaks there with this:

[rakers93]

Thanks! That worked perfectly! Do you have an e commerce plug-in you would recommend? I’m going to sell video downloads.

[Jason Bobich]

WooCommerce is a good one that has support for digital downloads. You can combine that with this plugin.

Another one you can try is easy digital downloads: http://wordpress.org/extend/plugins/easy-digital-downloads/

[Author]

Replies