In this lesson a member asks for help creating and styling a catalog page on his site. He has used tables but the images and text don’t line up well. Tables are difficult to style for anything but tabular data. We discuss other options for creating and styling the download catalog page. We demonstrate how to use our BYOB Thesis Shortcode Content Widgets to place text widgets side by side and add text and images. Then we use the plugin to style the widgets.
[This post contains video, click to play]
Image may be NSFW.
Clik here to view.
Video Transcript
John: Good morning, Rick.
Rick: Good morning, John. How are you doing?
John: Really good, thanks for asking.
Rick: Good. So what are we doing today?
John: Well, I began to tinker with uploading the images to the page where I’d like them to display and really kind of wrestled with just trying to lay them out by just inserting the images with text next to them. And I could never get things to go the Market Resources tab, Marketing Resources tab. There you go. You can see I used the template that comes with the editor in Thesis. And right now, I have the line showing which I plan on removing but you can also see that things are… like some of the text isn’t really level you know, from left to right. You can see that last image is…
Rick: This is actually why tables don’t work well for this sort of thing because you don’t have that kind of control over a table. Tables, by definition, you know, center their content in the vertical space and if one vertical is larger than another then they’re just going to… it just shakes out the way it shakes out. So if you want, if you really want control over how the images look, you need to use… I mean, I’m sorry… how text and images line up, you need to use HTML and CSS and not tables. Tables work great if you’ve got rows of tabular data but if you’ve got stuff like this that wants to you know, line up, they just… it doesn’t work well for that.
John: Okay and how about if you were just to insert them as a text and images without using the tables at all? Would I have more control doing that or do I really still need…
Rick: Absolutely. No, you’ve got way more control doing that. So your question, at that point, the question becomes how do you… well okay, so if you want this to lay out, notice how your widths are all different?
John: Yes.
Rick: That’s another issue associated with the tables. Sometimes, if you specify a width of one table cell, you can get it to stay where you want it to but other table cells just sort of expand and contract to fill the space and what they have available to them and that kind of stuff. So for…
John: Yeah, it was an easy process to begin and it looked like things are snapping into place but as I continued, all I did was add up you know, trying to adjust and it never really ended up looking right.
Rick: Sure. So then your choice is either to do a raw, straight HTML inside of your content area or you can use…well, or you could use the J Shortcodes plugin to create columns so that you know, each of these things, you’d have 3 columns and as long as you specified you know, a height of the heading and the height of the image, the 3 columns would you know, be of equal width and each piece would be of equal height. Or you can use my plugin, the Shortcode Content Widgets plugin and you could essentially put 3 rows of widget areas in this page, 3 columns I’m sorry, of widget areas in this page. And then you could put, inside of a text widget, you could put the title and the image and you can specify all the styling for those things inside of that plugin so that each one ends up being the same height and width and that sort of thing. There are… I mean, all 3 of those suggestions end up, one way or the other, doing what the first suggestion is which the raw HTML. The J Shortcodes will replace the shortcodes that you used for styled HTML and my plugin will replace the… or will augment the content that you place in the widgets with HTML and CSS. And so…
John: Okay, I guess hearing all that is… those are some things I didn’t know and I guess the obvious question to myself and anybody else at my level would be which one should I use?
Rick: Well you know…
John: Not acquainted with any of them but…
Rick: Sure. You could use one or two of my plugins together to accomplish this and the upside is that you could easily make the pieces sort of drag and drop. That is you could have it essentially a text widget for each of these things that you’re offering and you just drag them to the sidebar that you want to use… that you want them to sit inside of. And then you can rearrange them and stack them and move them and style them to your heart’s content. That’s probably the… that might get you the most sophisticated styling at the same time as it gives you a uniform look. I suppose the downside to it is that you’ll end up with 3 sidebars and your widget options screen that are only going to apply to this page. You won’t be using them…
John: Why is that a downside?
Rick: Well, it’s not necessarily a downside except that you end up… you can end up with lots of sidebars. That is the potential downside to my Shortcode Content Widgets plugin because you can create columns of sidebars with that thing and use them only one time.
John: And if I do that, I’m presuming you’d be able to display them in the middle of the page, somewhat like I have here?
Rick: Exactly like you have here.
John: Okay and keeping the end goal in mind, each of these are just images and I’d like to be able to have the person click on one of the images and have it link off to one of the BYOB Website landing pages. Just thought I’d give you a little plug there and then from there, I’d like them to be able to you know, to get the image downloaded. They’d have to of course, fill in the little sign-up box and click the button on that download or on that landing page. So I was really kind of hoping to get to the landing page today but I don’t know if that’s realistic. Most important, I guess would be to make sure that this page operates the way it should and right now, it’s not. So…
Rick: Okay one thing you should do is improve the quality of your images. Yeah, I’ll show you how to do this using my current plugins and we’ll just set up one right now.
John: Okay.
Rick: So I’m on this byobtutorial.com page that I use for demonstrate a bunch of stuff and I think we’ll just toss this stuff on the Contact Us page. Oh, it’s demo 1. Oh I see, okay. Yeah, we’re not going to use that one. How about About? Okay, perfect. We’ll do it on the About page.
So first thing I’m going to do is make it a no-sidebars template so we can get 3 of them side by side. And then I’m going to open up my Shortcode Content Widgets plugin which is already installed here and I’m going to create… I’m already working on these 2 blocks so I’m going to create a brand new set of widget blocks. So instead of 2 sets of widget blocks, I’m going to now have 3. And this 3rd widget block is going to have 3 columns. So how many widget columns? We’ll pick 3 then you can see this little layout here you know, what that looks like then.
So we’ve got 3, at the moment, equally spaced columns and the shortcode is BYOB Content Widget block 3. So if we come back over here to our page, set this one here, yeah… and paste that content, that shortcode there in the HTML view and hit update, it’s going to show us now, when we look at the page, it’s going to show us 3 widget areas here.
Now interestingly, these widget areas should have been side by side and maybe, it’s because I need to… maybe I just didn’t save that. Sometimes, it feels like I saved it and then, there we go, okay. So now we have 3 widget areas here side by side and if we come over and look at our widgets menu, we have just created this widget block 3, widget column 1, widget column 2, and widget column 3. Okay?
So and each one of these, we’re going to drag a text widget and let’s look at your… so Staging Your Home for Better Results. And then on widget column 2, we’ll grab another text widget, Selling Your Home in a Cool Market. And then on widget column 3, How to Make Sure your Home Sells at the Right Price. Okay so now we have 3 text blocks or we have a text widget in each of those columns.
Actually, we may as well just do another one just so you can see what happens when you want them to stack. So now we’ll take 10 Top Short Sale Myths and so now this widget column has two, right? And then you can just keep on adding more and if at some point, you wanted to move that one up above it, you can just drag it up there. We’ll leave it as you’ve got them ordered right now.
If we come back over to our page and refresh it, okay we’ve got 3 text widgets sitting here. Now we may as well add your images too so I’m going to save this image as… okay, interiordesign.png. That’s what you’ve got it saved as. See, this is way too low a quality for a png. Png should just be sharp and crisp. And then we’re going to save this image as selling a home in a cool market and we’ll save this image as how to sell your home at the right price and we may as well save this image as 10 top short sale myths. Then we’re going to come back over to the Media Library and we’ll upload those. So from My Downloads, let’s see, let’s get them by date.
Okay so those 4 and for grins, well let’s see, let’s pick pages that we’re going to link them to here on the site. Let’s see so we will pick… we’ll do demo 1, demo 6. Okay so anyway, we’ll view that one, view that one, view that one and view that one.
John: And these are the…kind of like our what we’re going to…
Rick: These are the pretend landing pages.
John: Okay.
Rick: Okay and so now we’re going to put those images in the text widget or in each text widget and we want them to link to those pages. So the easiest way to do that is to use a sandbox page and to insert the image or add an image from the Media Library, the first one will be Interior Design. So the link URL, we’re going to send this one to demo 1 so we’ll grab that URL… let’s see, where did I go? So the link URL is going to be that link URL. We want it to be centered. We want it to be full-sized and oh, isn’t that… so you’re not actually using it full-sized, are you, on your site?
John: I think… you know, I work in Firefox most of the time. I think I was able to you know, change the size of the image. I was having trouble in most text boxes so I was pulling the little sidebars, little adjustment bars on the image so that I could trick and expand them.
Okay well let’s just use medium for the time being. Are they all 285 by 561 or are they all different?
John: They’re all different.
Rick: Okay, it’ll be important that you make them all the same size because if you want everything to line up nicely, they all need to be the same, at least the same height even if they’re not exactly the same width. They need to be the same height.
But for the time being, we’re just going to go ahead and use medium and we’ve got our link URL and this… in terms of our title, we’ll say “Download our free report” something like that. Insert that into the post, okay. And we’re just going to take that and copy it, come over to our widget. This is widget block 3 number 1, paste that in there, hit save. You’ll see it’s already you know, starting to take shape.
John: You just pulled the HTML code from the sandbox and drop it into the widget.
Rick: Right, yeah. The widget doesn’t have an editor so you either just type it raw in there or you type it in the sandbox page, copy it and paste it which is what I did.
John: Oh okay.
Rick: So then we come over to… let’s just do that for the next one. Let’s see, so again, we’re going to add an image from the Media Library and this one will be the Selling Your Home in a Cool Market. This going to be “Download our free report.” You’ll see why this is important here because this title becomes the tool tip when you hover over it with your mouse. And then the link URL, we did demo 1 for the first one so we’ll do mommy blogger for the 2nd.
John: So that title, does it have any SEO…
Rick: Yes. Yes it does have some SEO, yeah. And let’s see, we’re going to keep this one full-sized since it’s pretty close to the other one, center it, insert it into the post, copy it, over to the 2nd widget and then let’s just do that one more time. From the media library and how to sell your home at the right price… again, download. And actually, instead of saying the same thing every time, you might say, “Download our free report…” how about you say, “How to Sell your House at the Right Price report”. And then the link URL for that one is going to be demo 2. Again, we’ll make it full size and centered, insert it into the post and then go back to our widgets and place it in the 3rd widget column.
Rick: Okay so now you’ve got these 3 things sitting side by side. Now what we want to do is add some styling to them. So the simplest thing to do is just to style the header and how do you have the heading styled? Let’s see…
John: I just get them in the editor.
Rick: Okay so it’s orange and… what’s that? Dark orange, is that what you said?
John: Dark orange and I think it’s number 2 editor or something like that, if it is.
Rick: Well, we won’t do that but what we’ll do is we’ll come back over to the… I’m sorry, the Shortcode Content Widgets plugin and now we’ll add our styling. So what we’re going to do is we’re going to start off… actually, we’re going to start off by adding… actually, we probably don’t need to do any margins actually in this case. We’re going to look at the widget block heading style and we’ll customize it. And then the widget block heading style… that was two, pardon me. Widget block heading style… so we’ve got Arial, let’s make it 18. Actually, this doesn’t allow you to say dark orange but we’ll just pick a dark orange color. We’re not going to use a background color. We’re going to get rid of that 2-pixel spacing. We’re going to get rid of the all caps. We will center the heading text and we’ll hit save. Let’s see how that looks. Where am I? Here.
Okay so the next thing to do in order to make these things all the same height… just a second. I’m going to… sometimes, I get mixed up on which of these things I’m looking at. Block heading style… okay and then so what happens… you know, I might… the way I do this flawlessly is to use the next plugin but I don’t want to start that yet. So I’m going to say we’re going to do 10 pixels of padding on this which I think will force the one line to become two, at which point, everything should line up.
John: Now we’re doing that because the 3rd one has 2 lines in there?
Rick: Yes, that’s right.
John: I see.
Rick: Now we could also…
John: Wait, is that padding to the…
Rick: To the header which… I’m going to explain heading in detail in a few minutes but did I say padding? I’m going to explain padding in detail here pretty soon. But essentially, what padding is is if your… well, let’s just look at it over here in Firefox. Padding moves the content away from the edges of its container, inwards. And so the container is the boundary of the heading tag there and so if we inspect this element for a second, here’s our container. It is the whole h3 tag that automatically happens there. That’s our container and the padding moved the text away from that edge and that’s the dark purple or that purple border on the inside, that’s the padding. And margin would move the container away from its containing element which I’ll talk about a little bit later but we might actually just add a return in this heading too, though. So let’s try that.
I’ll get there yet. I might just do that here with widgets and it was column 2, isn’t it? No, block 2 column 2, right. We might just take a br tag. That’s essentially a line break. It didn’t work though. It was my mistake. It’s not going to let me put a line break in there because it’s HTML.
Okay so I guess what they have to do then is I have to demonstrate the next plugin. The next plugin gives you a lot more control over the styling of these widgets. However it’s also a fair bit more complicated. Actually, let’s just increase the size of the… oh let’s do that. Let’s increase the size of the font on that and maybe that will just force it. Instead of 18, let’s make it 22. See if that’s enough to force it to 2 lines without forcing the other one to 3 lines. Yeah, okay.
John: There you go.
Rick: So the point of this exercise was to sort of take an uneven amount of content and make it the same height, right? And…
John: Yeah, I thought it was great.
Rick: And what you want to do here is you want each of these images to be the same height and they may as well be the same width. There’s no reason why these can’t all be the same width. So they may as well be exactly the same size and then it’s quite easy for your headings and your images all to line up across you know, their common lines. And then when you add more widgets in here, they just stack up below and then you know, you click on that image and it takes you off to the landing page, right? That’s what the…
John: I think that’s a good solution and I think… so thank you.