Add An Event Flyer to Your Homepage

Live Training on Facebook Live.

A client says "put this flyer on our website" Now what? We will discuss various ways of accomplishing this task.

Full Transcript:

Hello, Everybody. Thank you for joining me here at the Webmaster Academy. I'm Michael Wood, your Wix certified trainer, and I'm going to show you how to add an event flyer to your home page.

Now you might be thinking: What are you talking about? Well, if you made a website or -- either for yourself or for someone else, it's very common that the day is going to come, they are going to give you a call, text, e-mail say, "Hey, there's a flyer for an event. Can you put this on our website?" "Sure. Of course."

Now what? That's what this video is going to be about. So stay tuned...

This is our pizza website. And if you are with me in the academy, this is the website that we build together. By the way, just go ahead and go into the show notes and go to www.webmasteracademy.online, and you'll find out how to become a member for only $9.99 a month with a 3-day free trial, and you can learn how to master web design and build sites either for yourself or for others and get cash -- or credit, either way. Money, right?

So I'm going to show you some strategies that the professionals use when making websites. And this is our pizza website. Let me show you a quick preview.

So as you could see there's a full-motion video background, and the name of our pizza shop. This is a one-page design; so I'm going to scroll down. And you have "Our Story," you have "Order Take Out" or "Eat Here." There's a reservation area, a photo gallery, which is actually an Instagram feed, a way to sign up for private events, and the contact information. Okay. Let's go to the home page.

Now, here's your beautiful website, you have it all set up, and then your client says, "Hey, can you put this add on my web page?" "Um, sure." Well, so what I want to do is walk you through the process of how to add an event flyer to your website.

Now if they give you the physical flyer, the piece of paper -- you know, they give you this paper with the flyer on it, well, the first thing you are going to have to do is go ahead and scan it or take a picture of it with your phone; but you would need to digitize it, obviously, first. Now, if you can get the original flyer, even if the client says, "Hey, we got this flyer right here," you can always call and ask them if they have the actual file from the designer. If they do, then go ahead and get that set up and get a digital version. That's the first step.

The next thing is we want to get this onto our website. Now I want to pave the road ahead of time. So hopefully your website has a blog already installed or some sort of newsletter. If you have a blog, I highly suggest it, go ahead and add a blog post. That's the first thing we do is make a blog post, for a few reasons. One, the event can be archived and people can always reference the event later, and you can use that link, the event link, and use it in your social media accounts, and people can even comment and contribute photos.

The second is the blog post allows us to add details regarding the event to your site. So let me show you how we get this doing. I'm going -- and this is in wix.com. You can use other website builders. These strategies work just the same. But as far as the how to, I'll be using Wix for that.

I'm going to go to the blog button on the left here, and I'm going to create a post. And we're going to add a catchy title. Now first thing we need to do is add our image. So we're going to add an image, and we're going to go into our computer. We'll go, upload images, go dig in your computer and find that digital flyer. So here it is, right there, it's going to upload to wix.com. I'll say, "done," click on the image and say, "add to page." Okay? Here's the image. Here is -- check out our flyer. Pow presents Friday, June 5th, Asian Fusion Pizza Explosion! Boom! Wow! What a cool flyer. Well, looking at the flyer, let's first change the size of it -- a little too big. You know, with the new editor, it looks like they don't have the sizing option. So not a big deal, we'll just keep it there. Let's add a catchy title, which is Asian Fusion Pizza Explosion. Explosion. And then in the copy, go ahead and put as much details about the event as you can. Such as the date, you know, the time and place, how much is it, cost. So I'm just going to write in here, details. You want to put how much does it cost, when is it, where is it. You could even talk about why. Why are you having this event? You might even want to add some photos or a place they can add photos. So under post settings, we can adjust all the SEO details right here, and then we can set our categories. We'll just put "getting started" or whatever categories you have set up ahead of time, most likely this is going to be an event as a category.

If you don't have that, then you would go ahead and add that category here. Okay? Say, "done." And everything looks finished. And now we have some publishing options. We could save it as a draft. And everything looks good. We could add a video as well. Let's go ahead and publish this. So now it is on our blog post. Unpublish changes. Okay. Let's make sure everything gets published here. We're going to publish the changes. Okay? That should be it.

Now what I want to do is do a preview. I'm going to click on the blog post right here. Here it is. And then what happens is in the real website, you'll have to go to your actual publish website, you're whatever dot com, go to the site, find the blog post, then copy the "url." Don't copy it from the editor. You have to actually go to the published website. Copy the "url." You will use that as a link later on. Okay?

Let me show you what that looks like. Let's publish this page. Let's view the site. This is the live site. Okay? Not in the Wix editor. This is the live site. Look at the top. Look at the url. This is the proper url. Click on "blog." Okay? Now you are going to go to the blog post that we just created. Here it is. We're going to copy this link. Go ahead and copy that. Okay? We're going to use it later. And that's the link you are going to use in your social media just to show people -- or to promote your event. Okay? So that's the first step. Create a blog post. Is everyone good with that? If so, give me a happy face, give me some comments. Show me that you really like this tip. Check right now. See if there's any comments.

Okay. If you are watching the recording, you could still leave a comment, and I'll try to respond to you. Give me some emotion, everybody. All right.

Let's go ahead and move forward. So now that you have a blog post, we are now ready to add the flyer to the website. Hey, didn't we do that with the blog? Well, yeah, but we want to call attention to it. So what I need to do is add content to this home page, because, as you see, I don't have a space for any kind of event flyer. So we need to create that. Now, let me just fumble through the dark a little bit and show you what happens if you don't have a plan. Here's our event flyer. Let's go ahead and click on "add to page." Now, here it is. Now you got to think, "Hey, here's my flyer. Do I just kind of slap it right there? Right? Does that look good?" You know, just slap it there. Or Hey, let's put the flyer in the corner. Yeah, that looks good. Or maybe on this. May be down here. Maybe we'll just, yeah, we'll put it there. Let's do a preview. How's that? Right? So, obviously, this doesn't work in -- it totally messes up your nice beautiful home page, design, balance, all that good stuff. So we need to add another section for this flyer.

Now I talk about, in the academy, we talk about how to add content to your site. So I'm going to drag the element down here. This is a strip actually. This is the strip that belongs to the "Passion For Our Pizza." Let's change the page background so you don't get confused. So here's the page background. It's actually green. So when you see the green, that means there are no elements here. This beige means there's something there, and in this case, it is our strip, and is our content right here. We're just going to pull everything back in. It's going to click and drag, kind of squeeze that back in. I use the drag arrow to get all of my content back in place. Okay. The strip is back.

So in this green, this is the empty space. So what I want to do is go ahead and add a strip. Click on "add." Let's add a strip. We're going to use a photo strip. So let's click and drag right onto the canvas. Let's make sure the strip is touching each of the other elements. So reach out and touch. Yeah, don't want that green space in between. Everything needs to be touching. So I want to just take these strips, make sure they touch. Right there. With the black line there. Okay. Looks good. So here's our new strip. We're not going to have mountains in the background, it was just to set things up for you.

Okay. Now we're going to take this flyer. We're going to click and drag so it's on the strip itself. See, you'll see the blue button that says, "attach to strip." Here it is. Now it's attached. So if I move this strip down or to the bottom or rearrange, the flyer is going to go with it. It's kind of a package deal. And this is going to ensure that everything is in place when looking at this website on other screens.

So here is my flyer. Now, as you can see, a lot of it is cut off; so we need to change the settings of this image. So click on settings, and for image resizing we want to hit "stretch." Now if it looks kind of weird, because we might have moved things around, go ahead and click on "reset image proportions." Boom! All right. Everything is right back how it should be. Now anytime someone looks at the image, it will not be cut off. Now when someone clicks on this image, we want them to go somewhere. So we are going to click on "add a link." Now where are they going to go? We'll say, web address. And that's where you type in that url that we got from your blog post. That goes there. So when we click on the image, it will go to that blog post. So now we're set. Now we have the flyer right here, and all someone needs to do is click on it, and they will be able to go to that blog post for more details.

Now how do you change the background of the strip? Obviously, we can't have any green mountain. So I'm going to just switch this out. And you can use just a plain color, if you'd like. Although, that is kind of a huge block of color. White would be just way to bright. So I'd rather use an image. And what I like to do with flyers, I just go to free from Wix, and I click on textures. I like to use textures that are relevant to your brand. So wood, paneling, marble, you know, it depends on your brand. If you are a really fancy bed and breakfast, maybe you'll use some rustic wood. Here we have a pizza shop, and there's nothing that beats good old-fashioned brick. So if they don't have a texture you like, you can go ahead and upload one. Maybe purchase one from Stock Images. But what we want is some kind of a background that will match. So I'm looking for some kind of a brick. Here it goes. Here's a brick wall. That will work. Kind of gives that New York feel; right? So here's the brick wall, and here is our post.

Now that brick wall, um -- it does look a bit distracting. So what I'm going to do is go to settings, and I'm going to change the color behind it to kind of a brick red. And then I'm going to change the opacity. So here it is, brick red or it's kind of a -- it's more of a ketchup red. Yeah. Make it -- I'm just going to click on "add color." I want more of a brick red. Your color might look a little different on your screen. There we go. That's more of a brick red. Now, I'm going to gradually bring in the bricks. So then you get the texture, but then they are not distracting. All right? So here's the pizza place. Go down, and you have this brick wall with the flyer.

Now I want to give this flyer kind of a 3D effect. So I'll go to "design," and right now it has no frame. I want to go ahead and use this frame. And what it's going to do is make -- give a tiny little shadow right underneath, and it makes it look like the flyer is just kind of hanging there on the brick wall.

Now another thing you want to do is add a "call to action." They could just click on the flyer, but that's -- I don't know -- that may not be that intuitive. Now I have it there because it's easy to click on. It's really a huge button. But let's add some more elements so our audience will know what to do. So I'm going to add a button. And we already have some pre-made buttons right here. Now that color does clash or blend too well with our background. So I need to go into design -- customize design. I like the button; so I'm not changing that. But what I want to do is when you look at it, let's change the fill to something that is already in our website pallet. So I'll change it to this green. And when they hover over, I'll have it turn into kind of this bright yellow, kind of that mustard yellow. Let's take a preview of the button, hover the mouse. Okay. It didn't take. Let me try that again. Change the design, customize the design. Hover. I want it to turn into this kind of mustard yellow there. Regular. Hover. That should work. Go ahead and do a preview. And there it is.

So when I hover the mouse over the button, kind of glows. That's what we want, that glowing effect. Now we don't want it to say "button." This is an event, right? So you want them to RSVP or get tickets or whatever it is. Get tickets. You could just put "tickets." I like to put a verb, like an action. And then where is this button going to? Well, it's going to the blog post, because on the blog post, we'll have a link.

Now if you're doing a third-party event registration page, either through Wix or someone else, you can link directly there. Ticket Master, whatever it is. So that's how we build the link right into the button here. So "get tickets." And then what you want to do is go ahead and add some copy to this. So I'll just go grab some text here. We'll put a paragraph. Change that to white. So it's good contrast with the background. And we're just going to say what this is. And the reason why -- the words are already on the flyer, but you want to actually type the words onto your website, for a few reasons. Maybe the image doesn't come out well or it doesn't come out. The other bigger reason than that is search engine optimization. See, the web crawlers won't read that image, necessarily. They'll read the text that's on your page. So Asian Fusion Explosion. So you want to have the actual text on your page. 

Let's go ahead and center that, and we're going to make that a little bigger. There you go.

Now if you want to play with the fonts and stuff and make it look even cooler, that's fine. So I'll add, "Get Tickets Here." And then a lot of times -- I'm going to "Control C" and then "Control V" which will copy and paste my text. That way I don't have to mess with the formatting all over again. That's just a quick little shortcut there. And now I'm going to put in the details. It's on Friday, June 5th. I misspelled Friday. All right. So that's looking good. 

All right. Fantastic. So there's some details. Call to action. And you can either lead them to your blog post if there's more details. That's why we did that. Or you can lead them straight to your website.

Now on this strip, I'm going to click on this strip. Change strip background, go to settings. And here I want to scroll effect. So let's do a -- kind of a parallax effect, and to see a parallax, we have to actually see the website. So I'm going to hit preview. You'll see the full motion video going. And as I scroll down, look it. See how the text and the flyer seem to be -- they just kind of float on top of the bricks. It's just the bricks are sort of in the background? And then you have the next section coming in. It's this 3-dimensional effect. So all I did is I went into settings and added a parallax effect to that. So that right there is how you add an event to your website.

And what's awesome is when this event is over, then go ahead and replace it. Put another flyer for the next event. There should always be something new. So if you did not have a place for events, go ahead and add a strip, and then put in the image, text, and call-to-action button. And all you got to do at this point is change those things. Now, remember, any time you had elements to a page, you need to always check what it looks like on mobile. So let's click the mobile button.

Edit mobile view. Now let's see this site on mobile. So it looks fine. Our flyer is nice and big, the text is there, but the button is way too big. So is our home button. So this site hasn't truly been optimized for mobile yet. So I'm just going to make some quick adjustments here. Want to bring the text down. There we go. And I'm just going to go here. You could make this smaller if you want to. This is what it looks like on a mobile phone. I'm going to click and drag. I can drag this here. There we go. Date up there. And let's make this button a little smaller. Sometimes there's such a thing as a button being so big they don't even know it's a button. So let's make that there. And then close up our gap.

Now you see this green? Okay. That's the background of the website. We don't want that showing. So we just say, "delete space." You can do it manually also. Sometimes it's too small. So delete that. So then that's good. So our mobile site looks fantastic. Let's go back to the desktop and remember to save and publish your site. Publish now to make sure those changes are permanent.

And here we go. We now have an event flyer that does lead to the blog post with more details, if we need it, or send them straight to your event or ticket manager. All right? So now you know what to do. The client says, "Hey, add this flyer to my website." You got it, because you went to the Webmaster Academy.

Thank you, Everyone, for being here. Please leave your comments. Let me know if you enjoyed this lesson, and I'd like to see you back here next Tuesday at 12:00 -- training Tuesdays at 12:00 P.M. at the Webmaster Academy. Be sure to like us on Facebook, subscribe on Instagram and YouTube. And if you want to know more about the academy, how you can check it out for free for three days, go to webmasteracademy.online, and I'll see you guys then.

Thank you for joining me. See you next time.

Complete and Continue  
Discussion

0 comments