Build Your Own Business Website header image

How to Create a Matrix of Images and Links – Part 2 – Add Images and Text Using the Black Studio Tiny MCE Widget

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is the second video in a tutorial series on how to add a block of product images with titles and descriptions that link to the site where the products reside. In this session, we add the Black Studio TinyMCE Widgets to the widget blocks we created in the first video with our BYOB Thesis Shortcode Content Widgets plugin. Then in these text widgets we add the product images and product descriptions showing you how to add links to both.

Video Transcript

Rick: Right there, Ok. So then the next thing that we’re going to do is we’re going to add an image, we’re going to add text widgets here. So if we come back over to Appearance and Widgets, we now have these widget block 1 – columns 1 to 4. So we are going to come looking for our Black Studio TinyMCE Widget, drop it in place. We’ll give this a little title called Product 1. And then in here, we’re going to add a, let see, open the kitchen sink so we can see everything. And then, what we’ll do is we’ll upload a picture. And so, I’m going to select from the group of pictures I have… ok, apples-175.png.

Ok, now that first thing that we want to do is, well let’s give it a title and the title we’ll give it is “Buy our apples” that will show up when we hover over it. Then we’re going to do this Link URL, now the Link URL, what we really want in the Link URL is the site that we want this to link off to. So, I’m going to say that I want this to link off to Thesis ToolBox. So that is the link that will be active when you click on this image. I want to center the image. I think that’s good, we’re going to insert it into the post.

Ok, and now, below that we want to insert some text. So, I’m going to say “Here is a line of descriptive text”, I want that to be a link as well. So, I’m going to go ahead and set up the link. And this is going to link to Thesis ToolBox, we’re going to add that. And then the other thing I want is I also want this to be centered in the space so I select centered. Ok, now we’ll go ahead and save that. And if we come back over and take a look at our one of our widget, now we have Product 1, image, Here is a line of descriptive text. If you click on that image it takes you over to Thesis ToolBox. Ok?

So let’s do that again with the column two. Again, we’ll grab Black Studio and we’re going to call this Product 2. And we’ll start off by inserting in the image and this time we’re going to insert cherries. And the title will be “Buy our Cherries” and the link URL this time will be BYOB Website. Again I want it to be centered in the space and full size. So we’ll insert that into the post and then just like before “Here’s another line of link text. That’s going to get Bryan watching me do this a whole bunch more times, still going to set it up here, so we can just go to BYOBWebsite.com. Ok, and we’ll select this again, say it’s centered, hit save. Go back and refresh it and then there’s our second product.

Actually you know I think, I’m going to, in order to expedite this, I’m just going to copy this stuff. So come back over to Black Studio again, paste that HTML… Product 3, Save. And we’ll do the same thing one more time. Product 4. Ok, so now, if we come over here and refresh this we’ve got a row of four products sitting here with the title, a link, I mean the image that links off. Plus you can see when you hover it the tooltip it says that and then another piece of link text, again linking off to the appropriate site.

Ok, so and you can easily just stack this up right. You could easily decide that the next thing you’re going to do is add more. And this will be Product 5 and we’ll paste that text here again and hit save. Now, we’ll come back over and refresh it, now you get Product 5 stack right below Product 1. And you can keep going across so that you have  an entire grid of products, four across and three deep. So then, you want to style a little bit more. So that’s where the next plugin comes in.

0 Comments… add one
0 comments… add one

Leave a Comment