Build Your Own Business Website header image

How to Create a Matrix of Images and Links

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.

Part 1 – Install and Configure BYOB Thesis Shortcode Content Widgets Plugin

This is the first 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 show how to install and configure the BYOB Thesis Shortcode Content Widgets Plugin which we’ll use to create a grid layout for the product images. We also install another plugin, Black Studio TinyMCE Widget Plugin, which allows you to use an editor to style text, add images and links in the text widget without using HTML.

Video Transcript

Rick: And what Gary wants to do is he wants to stack a number of images side by side, essentially like products with a title, images, a little product brief product description and a price. And he wants that stuff to link off to the site, that is linked to the site where the product is actually resides. He’s tried to use a gallery plugin which I think is just a mistake, I think there’s any way to make a gallery plugin, at least not one that I know off, do what you want to do. However, it is a reasonably easy thing to do using a combination of my plugins and somebody else’s plugins.

And so, that’s what we’re going to do here, we’re going to show him how to do that first. OkK, so then what we’re going to do is we’re going to add a couple of plugins. The first plugins that we’re going to add is the BYOB Thesis Shortcode Content Widget Plugin. So, under plugins, we add new and that is, let see we’re just going to upload directly from…my computer. You’ll have to download this from the website…shortcode content widgets, latest version, activate that plugin. And while we’re at it, I think we will also add another plugin which will give us that TinyMCE Editor control over our text widgets. And I’m going to search for Black Studio, that’s the maker of the plugin, Black Studio TinyMCE Widget. We’re going to install that one, activate the plugin.

Ok, and so, then what we’re going to do is we’re gonna create a grid with this shortcode content widgets plugin. It’s going to be a grid of four across and as many down as anybody might want. But for the time being we’re gonna set that up, so we go to shortcode content widgets plugin and we’ll select as widget block one and we’re going to select four columns. So, we’re going to be able to put four column side by side. And then, I think, we know already we want to do some kind of margins in between them, so I’m just going to give us, let’s say a 15 pixels margin on each side. Ok, and this is [byob-content-widget-block=1]. So now we copy that shortcode and go back to a page, we’ll just put this on the Home page. And we’ll paste that shortcode right here, so [byob-content-widget-block=1]. Actually I want this on the no sidebars template also, so this thing stretch all the way across. Ok, so although it doesn’t look like it creates a 15 pixels in between. Oh, you know what that’s because what I did here, this is the overall. And that’s not what I wanted. It’s not the widget block margins it’s the widget column margins. And so, now this will put margin in between each one of those little widget columns.

0 Comments… add one
0 comments… add one