Build Your Own Business Website header image

How to Create Download PDF Buttons

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , ,

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.

In this session, a member asks how to create a download button for a PDF. There are two options, one is creating the download button with an image but no text and the other is creating a button that has text but no image and both can be done using the J Shortcodes plugin. Rick demonstrates how to accomplish these options.

Video Transcript

Rick: Good morning, Sandy. How are you doing?

Sandy: I’m fine, thank you.

Rick: So tell me about your question.

Sandy: Well basically, I wanted to have on the widget on the sidebar that would open a PDF document that I have stored in the… up where the image is where the media things are. So I was able to do a link, just a text link and it would open the document. But then I thought I’d get real creative and I wanted to make a fancy, little download button. And I made the button but for some reason, it would not open that document. So I don’t have the coding correct.

Rick: Okay.

Sandy: Go ahead.

Rick: Does the button have text in it?

Sandy: Yes, it’s just the Download… I mean, something stupid. Just wasn’t half… it’s just an image. The button is an (1.09) image.

Rick: Okay. Well there are you know, depending upon how… depending upon what you want it to look like, there are a couple of different ways to approach it. And so, I mean I can demonstrate how to use the image without text, how to use the image with text, and or how to create a download button without using an image. Do you have a preference there?

Sandy: That’s a lot of choices. It doesn’t really matter to me. I just wanted it to, I guess, look nice graphically you know, visually for the person. So whatever you suggest.

Rick: Okay well so what I’m going to do is I’m going to show you 2 solutions to that. One of them is not using a… it’s creating a button without using an image at all and the other one is creating a button that has text integral to the button. And so, we’re going to start that one off here at this site that I played around with last week. I’m going to add a download link here to this widget using that.

So the first one is not using an image at all and the way you do it without using an image is you use the plugin J Shortcodes. I have a whole bunch of videos on the site about how to use J Shortcodes. It’s a great plugin. It gives you a lot of power over you know, a lot of graphic elements on your site without having to go to a lot of effort. And I’ve already installed J Shortcodes on this and I have uploaded a document to the Media Library. This document is my… our checklist for our BYOB Website One Hour Makeover sessions that we’re doing on Thursday evenings. So anyway, the people that are participating in it were given this checklist for the purpose of thinking about this.

So what I’m going to do is I’m going to link to this location. And I’ll start that off by getting a link in the first place. It doesn’t really matter which solution you use. You still always have to have this link. So I’m going to copy that link then I’m going to come over to my widget areas and in sidebar 1 up here, I’m going to drag the text widget and I’m going to paste that link there.

Now, we could just make this a standard text link by wrapping this in a tags but I’m not going to do that with this. What I want to do is I’m going to use the J Shortcodes plugin to do this and let’s see, let’s open up a sandbox page. Sandbox, edit.

Okay and so, let’s see. I’m just going to go ahead and delete that for the time being. And then let’s open up J Shortcodes instructions also. And I’m going to start off with… we’re going to use this blue color here and I’m going to use an extra large image and it’s just going to say, “Download this PDF file.” And so, all I’m going to do is copy this and come back over to my sandbox and in the HTML view, paste it. I don’t want double extra large, I just want extra large so I’m going to turn that down. I’m going to say download my PDF.

And then of course, I need the actual PDF location. And so the way you do that is just type in link, equals, quotation marks and then I come back over here and grab that link again. Paste it there and the close the quotation marks. Download my PDF. We can actually see what this looks like, if we want to preview this. There’s what the button’s going to look like so it’s you know, reasonably attractive. It’s got a nice color. It’s got a hover behavior.

And so what I’m going to do is just copy it, come over to the widgets and paste it. And then go back and look at the site. Okay and so obviously the text, my widget area, is not quite large enough for the text here. So you know, I could just swap that down from extra large down to large, just so it’s all in one line. Hit save and refresh it.

So that’s one way to create a button is to sort of manipulate the different… while using J Shortcodes and you can change colors and all that kind of stuff. And in fact, you can also even use something like this where it’s got a little PDF icon? So for example, all we really need here is the additional designator of icon = PDF. So if I copy that and come back over here to the widget and color=blue, size=large, link equals… let’s just put it beside size=large. Icon=pdf, if we hit save and come back over here and hit refresh, now it’s got the little icon there. We could you know, if you’re going to have that icon, maybe you want that to be gray. And so then, instead of blue… what is this? And actually, it’s not even calling out a color, is it? So that must be the default color. So you could just take out color=blue, I guess, and hit save and refresh it. Now you’ve got a Download My PDF.

So actually, I wonder if I can specify the width. I think I might even be able to do that. J Shortcode width, yes I can. So I can come back over here and if I want it to be 300 pixels wide, paste that there and say 300 and hit save. I must have not done that correctly. Maybe I have to say px. Yeah, let’s just try saying px then, width… custom width parameter. Yeah, let’s just try saying px and see if that works. Width = 300 px, save. No, I must have my syntax off a little bit here. Oh, this is J box. Pardon me, I’m sorry. I need… no, I guess there isn’t. I guess the button doesn’t have a width parameter. So you are… actually you could do this. You could add CSS to give it a style so if we did that, we say copy this and instead of width 300 pixels, let’s paste that a CSS and instead of border and that stuff, let’s just say width: 300 px and hit save and refresh it. I bet that works. It does work. And so 300 px is probably too wide for this but you get the drift. You can… I guess that would probably be more like 280.

Okay well anyway, we can even go down to 10 pixels probably but if you click on this, it opens up, right? Okay so that’s one way. Sandy, do you want to see another way?

Sandy: No, I think that was perfect. I just… I don’t know why I thought J codes… or the shortcode was something different than what it actually is. So the shortcodes are here basically buttons and that little clear box (12.20)?

Rick: Oh, it’s huge actually. It’ll do buttons, it’ll do boxes, it’ll do columns, it’ll do tabs, it’ll do accordions. I didn’t do anything on the gallery because I didn’t really think the gallery was that well-developed or even that interesting. But I have tutorials on the accordions and the tabs and the boxes and the columns and everything. I mean, it’s spectacular for boxes and buttons and I have you know, I have done all kinds of stuff using those on the site. But if that meets your need then we don’t have to do it with an image. The nice thing about this is this actually loads much faster than an image would load and it doesn’t require an http request either. So it’s going to be a more efficient, slightly speedier system than using an image. So does that…

Sandy: That’s perfect. Yeah, it’s perfect. I see that this is good for me.

Rick: Okay. Well, anything else?

Sandy: No. I’m good today.

Rick: Okay. Well, you have a great day.

Sandy: Thanks, Rick.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment