Add an event flyer to your homepage – Web Design – Wix Tutorial

Articles, Blog

Add an event flyer to your homepage – Web Design – Wix Tutorial

Add an event flyer to your homepage – Web Design – Wix Tutorial


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
homepage. Now, you might be thinking “what are you talking about?” Well, if you made a
website either for yourself or for someone else, it’s very common that the
day’s gonna come.. they’re gonna give you a call, text, email, and 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’re
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
three 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 can 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 takeout” 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. Let’s
go to the homepage. And now here’s your beautiful website. You have it all set up
and then your client says “hey can you put this ad on my webpage?” “Umm. Sure” So I 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 paper, you know,
they gave you this paper with the flyer on it, well the first thing you’re going to
have to do is go ahead and scan it or take a picture of it with your phone but
you need to digitize it, obviously, first. If you can get the original flyer
even if the client says “hey we got this flyer right here” you could 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 to 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. Second, the blog post allows us to add details regarding the event to your
site. So let me show you how we get this done. 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. We’re going to add a catchy title.
Now, the 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” Here’s the image. Check out our
flyer..Pao 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.. Now 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 Wxplosion Asian fusion Pizza explosion and then in the copy go ahead and put as
much details about the event as you can. Such as the day, you know, the time and
place how much does 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 can 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 could 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 have to go ahead and add that category here. Say “done”
and everything looks finished. 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. Unpublished changes…okay let’s make sure
everything gets published here. I’m 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 published website your whatever 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 and now you’re gonna 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 gonna use it later and that’s the link you’re 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 everyone good with that if so give me
happy face give me some comments show me that you really liked this tip pic right
now if there’s any comments okay if you’re watching the recording
you can still leave a comment and I’ll try to respond to you give me some
emotion everybody I’m 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 homepage 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 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 yeah oh let’s put the flyer in the corner yeah that looks
good or maybe on this maybe 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 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 talked about in the Academy
we talked 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 as our our content right here we’re just gonna pull everything back in it’s gonna click and drag kind of
squeeze that back in I use the drag arrow to get all my content back into
place okay 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 I don’t want that green space in between
everything needs to be touching want to just take these strips make sure
they touch right there move the black line there
okay looks good so here’s our new strip we’re not gonna have mountains in the
background it was just to set things up for you okay now we’re gonna take this
flier we’re gonna 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 flier is gonna go with it
it’s kind of a package deal and this is going to ensure that
everything’s 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’s 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’re gonna click on add a link now where are they
gonna 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’ll glow 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 mountains so I’m going to just switch
this out and you can use just a plain color if you like although that is kind
of a huge block of color white would be just way too 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 texture I like to use textures that are relevant
to your brand so wood paneling marble you know depends on your brand if you’re
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 it may be
purchase one from stock images but what we want is some kind of a background
that’ll match I’m looking for some kind of a brick here it goes here’s a brick
wall that’ll work and it gives that New York feel right so
here’s the brick wall and here’s our post now that brick wall it does look a
bit distracting so what I’m gonna do 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 kind of it that’s more of a ketchup red yeah make
it I’m just gonna 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’re 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 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 Flyers just kind of
hanging there on the brick wall now as another thing you want to do is add a
call to action they could just click on the flyer
but that’s um I don’t know that might 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
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 customise design
I like the button so I’m not changing that well I want to do is when you look
at it let’s change the fill to something that’s already in our website palette so
I’ll change it to this green and when they hover over I’ll have it turned into
kind of this bright yellow we’re kind of that mustard yellow let’s take a preview
of the button over the mouse it didn’t take let me try that again change the design – the design hover I wanted to turn into
this kind of mustard yellow their regular hover that should work go 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 in a third party event registration page either through Wix or
someone else you can link directly there Ticketmaster 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 those good contrasts with the background
and we’re just gonna 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 and 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 gonna make that a
little bigger yeah 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 gonna ctrl C and then ctrl V which will
copy and paste my text that way I don’t have to mess with the formatting all
over again how’s this 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 that 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 effects so let’s do a
kind of a parallax effect and to see the parallax we have to actually see the
website so I’m gonna hit preview you’ll see the full motion video going and as I
scroll down look at it see how the text in the flyer seemed to be they just kind
of float on top of the bricks they’re just the bricks are sort of in the
background and then you have the next section coming in it’s this
three-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 should always be something new so if you
did not have in the 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 anytime you add 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 Flyers
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
gonna make some quick adjustments here bring the text down there we go and I’m just gonna go here
you could make this smaller if you want to this is what it looks like on a
mobile phone I’m gonna click and drag click and 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 and 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 could 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 he had 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 let me know if you enjoyed this lesson and I’d like to
see you back here next Tuesday at 12 training Tuesdays at 12 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 could check it
out for free for 3 days go to webmaster Academy da online and I’ll see you guys
then thank you for joining me see you next time

Leave a Reply

Your email address will not be published. Required fields are marked *