Play Video

Dance Club Template from Wix – Web Design – Tutorial

Let’s explore the Dance Club template from Wix.com. Learn Web design along the way, from a Wix Certified Trainer.

I will teach you how to build Wix websites from concept to automation at www.webmasteracademy.online

This graphic and hip design puts your music venue’s unique content front and center. Use Wix events to promote and sell tickets for your upcoming shows and share the latest news using the cool Wix blog. Let clubbers know what musical vibe to expect by linking to your social media feeds including Spotify and Soundcloud.
Good for a dance club, live performance theaters, or a concert venue

Partial Transcript
Hello everyone. Welcome to the Webmaster Academy. I’m Michael Wood and I am the owner and chief web designer at Captivatim Multimedia and Web Design.

Tonight I’m going to be talking about the Dance Club template from Wix.com. This template is good for anybody who wants to have a website that showcases their unique content. Whether you’re a nightclub, a dance club, or maybe a theater, and you host live performances, or maybe you’re a traveling group of actors and actresses who go around to different venues and you want to keep your fans aware of the different performances you have. So this doesn’t have to be a fixed location if you fit any category where you have different venues and you just want to showcase how unique your content is to the people, this is going to be a great template for you. We’re gonna to use Wix blogs and we’re going to use Wix events to make things happen behind the scenes.

The first thing I’m going to do is do a walk-through of this template and then I’ll go under the hood and I’ll show you how you can customize the template for your own business or service. Let’s do our quick tour of the actual website itself. This fictitious dance club is called Frame and it has a little animation. This red cursor here blinks from time to time that’s a quick little animation. The menu at the top features the social media links and these are text, instead of buttons. You’re probably used to seeing text or social media buttons so the text is a little bit of a different design. It has Facebook, Spotify, Instagram, and Soundcloud. Then over on the left hand side, we have “program, news, cafe, and, info” under the menu navigation and then the name of the club is at the very top
left, which in this case, is called Frame.

When I scroll down, you could see the first things are the posters or the events that are happening at this particular club and here on the left we have “Technicolor and Friends Friday”, tropical-island showcase, and the “Alpha toys by DJ Mikey” going on February 25th. These are three major events that are happening. If the user uses the mouse and they scroll over, there’s a slide animation that happens, and the slide just gives you more information on that particular venue. In this case, it gives the name, the date, the time, and the location of this event. I scroll over and you could see that the information simply hovers and moves or slides in. So it’s nice because there’s no clicking that has to happen. It’s very smooth animations right there. Then as I scroll down you see there are info buttons if they want to know more about that particular venue. Then there’s a News section and here you have some very interesting art. It works kind of like a blog. Here we scroll down and we see that the news in this case is just one major article.

Then further down, you can learn more about the cafe
itself. There’s a photo of the cafe and a quick little description here on the right. It’s letting you know that breakfast is served all day. Then there’s a subscribe box down on the bottom left. When someone puts their address in there you will get their address on the Wix back end and that’ll help build up your email list. You can then take that list and send out different emails to the people. You could even use Wix Shoutouts to create very quickly some colorful and very well designed emails out. It has the copyright information down at the bottom and here’s the social media buttons or icons down on the bottom right. In the footer, you’ll notice the footer is the same color as the page background. In this case it’s white, so the footer doesn’t really stand out. It’s just part of the website, so this is a very minimalistic approach. There’s a lot of text on this site, which, you know, can be a little bit more of a modern feel to it. If I click on program, it goes to another web page actually and it’s called “this week” and it tells them what’s going on this week. In this case, it’s “Technicolor and friends” You notice the menu at the top is persistent as I scroll down. Then it tells you what’s going on next week so here’s “this week” and then here’s “next week”.

If I click on info for a particular venue, it will give you the details and it gives them the “register now button” so they can register for each one of these events…

Full transcript at www.webmasteracademy.online

Hello everyone welcome to the Webmaster Academy. I’m Michael Wood and I am the owner and chief web designer at Captivatim Multimedia and Web Design. Tonight I’m going to be talking about the Dance Club template from Wix.com. This template is good for anybody who wants to have a website that showcases their unique content. Whether you’re a nightclub, a dance club, or maybe a theater, and you host live performances, or maybe you’re a traveling
group of actors and actresses who go around to different venues and you want to keep your fans aware of the different performances you have. So this doesn’t have to be a fixed location if you fit any category where you have different venues and you just want to showcase how unique your content is to the people, this is going to be a great template for you. We’re gonna to use Wix blogs and we’re going to use Wix events to make things happen behind
the scenes. So thank you for being with me. Let’s go ahead and get started… Well everyone, once again. Welcome to the Webmaster Academy. the first thing I’m going to do I will do a walk-through of this template and then I’ll go under the hood and I’ll show you how you can customize the template for your own business or service. Let’s do our quick tour of the actual website itself. This fictitious dance club is called Frame and it has a little
animation. This red cursor here blinks from time to time that’s a quick little animation. The menu at the top features the social media links and these are text, instead of buttons. You’re probably used to seeing text or social media buttons so the text is a little bit of a different design. It has Facebook, Spotify, Instagram, and Soundcloud. and then over on the left hand side, we have “program, news, cafe, and, info” under the menu navigation
and then the name of the club is at the very top left, which in this case, is called Frame. When I scroll down, you could see the first things are the posters or the events that are happening at this particular club and here on the left we have “Technicolor and Friends Friday”, tropical-island showcase, and the “Alpha toys by DJ Mikey” going on February 25th. These are three major events that are happening. If the user uses the mouse and they
scroll over, there’s a slide animation that happens, and the slide just gives you more information on that particular venue. In this case, it gives the name, the date, the time, and the location of this event. I scroll over and you could see that the information simply hovers and moves or slides in. So it’s nice because there’s no clicking that has to happen. It’s very smooth animations right there. Then as I scroll down you see there are info
buttons if they want to know more about that particular venue. Then there’s a News section and here you have some very interesting art. It works kind of like a blog. Here we scroll down and we see that the news in this case is just one major article. Then further down, you can learn more about the cafe itself. There’s a photo of the cafe and a quick little description here on the right. It’s letting you know that breakfast is served all day.
Then there’s a subscribe box down on the bottom left. When someone puts their address in there you will get their address on the Wix back end and that’ll help build up your email list. You can then take that list and send out different emails to the people. You could even use Wix Shoutouts to create very quickly some colorful and very well designed emails out. It has the copyright information down at the bottom and here’s the social media buttons
or icons down on the bottom right. In the footer, you’ll notice the footer is the same color as the page background. In this case it’s white, so the footer doesn’t really stand out. It’s just part of the website, so this is a very minimalistic approach. There’s a lot of text on this site, which, you know, can be a little bit more of a modern feel to it. If I click on program, it goes to another web page actually and it’s called “this week” and it
tells them what’s going on this week. In this case, it’s “Technicolor and friends” You notice the menu at the top is persistent as I scroll down. Then it tells you what’s going on next week so here’s “this week” and then here’s “next week” If I click on info for a particular venue, it will give you the details and it gives them the “register now button” so they can register for each one of these events. Then there’s more detail about the events
and it gives the user the ability to share this event on their own social media platforms. If I register now, it’ll come up with a box where the user will put in their first and last name and their email and then submit now these events could be free or paid so that’s a good option depending on your venue and what it is you’re doing you can give a combination of both even and Wix will handle all the financial transactions and the registration
details on the backend there are links again to Facebook and Instagram which are very common but a couple links I want to point out is one is on Spotify and the other is on soundcloud so that’s going to be really important to really showcase the type of music that your club offers so Instagram will give a good visual of the club and the people who go to your club and the SoundCloud will be just great showing off the different music that’s
happening and so it’s a way for people to really experience your particular venue and that’ll get them to want to go in person so they’ll know upfront exactly what to expect from your club so it’s fairly it’s a fairly simple site it’s really two major parts the news section which tells people the events that are upcoming and then the ability to register for each of the events now this is a very sophisticated blog and that people can actually log
in and sign up that helps you to not only capture leads but it helps people to be able to comment on each of your blog posts and they can make it very personalized with their own username and password this helps generate conversations and when you’re generating conversations about about your content that produces a really good SEO or search engine optimizations as you know in 2018 moving forward SEO is all about having real conversations about
real content there’s been many advances in SEO where they’re trying to move away from all of these BOTS and little programs that try to cheat the system by saturating the website with keywords now it’s all about content nowadays Google is starting to pick up on natural conversations that are being held about your particular domain name so it’s really important that you start building discussions and conversations on your website about your
website and about your content products and services so enabling people to log in to your blog it’s going to help facilitate that organic SEO so each of these links gives people the ability to comment and give a little heart aura like it’s kind of its own little social media built into your website so that is the basics of the site very simple the really the most important things is you know what is your venue doing how do people register and
what’s the music and what’s the environment of your club this website provides all of those parts very easily now if you don’t like the look and feel of this I’m going to show you how to customize this site to match your particular club or venue before I do that I’m just going to look off to the side and see if there’s any questions at this time if you have a question feel free to leave that in the comments and go ahead and give me a heart or a
like let me know what do you think about this template are you using templet do you plan on using this template let me know in the comment section alright if you’re watching the replay feel free to comment I see the comments afterwards and I try to get back to everyone as soon as I can let’s go ahead and go under the hood now when I show you how to customize I’m just showing you some of the basic things that you can do there’s a whole lot more to
web design and Wix does make it easy but there’s a lot of web design principles you can learn at the webmaster academy so for anything that you want to get more in depth about whether it’s SEO or blogging or just basic good design principles check us out at WWE I will take you from concept that’s pen and paper from concept to automation of a brand new website that you could build for yourself or you can learn how to build websites for others
alright let’s go ahead and go under the hood so I’m gonna go into the Wix editor and here we could start seeing the things we can change now the first item is a strip and this website is built using strips I have a whole lesson on web design using the strip building method at the academy if you want to learn more about that so here we have a strip and in the strip sometimes we have multiple columns in this case it’s only one column now you notice
when I scroll the menu is persistent do you see where it says program news cafe this vertical menu it stays persistent no matter what I do and the way they did that is you click on the vertical program menu and it’s basically pinned so I could set the position of the menu whether it’s in the corner or middle or over here to the right or any other place I want the menu to be and then I can adjust the horizontal off so as you see it’s here in the
top left watch when I move this horizontal slider okay so do you see the menu just kind of moving left and right okay that’s what this slider is for and it’s going to lock that I can also move this up and down to lock it in place so that’s a pin and that gives a persistent feel to the menu so you can unpin it if you don’t like it or just keep it there so let’s look at this strip right here let’s go ahead and change the background that’s nice as
you could just simply change the color and what I did is I clip I clicked on the strip and then I clicked on this box that says change strip background click on that and this little box pops up here I can change the color and these are the colors that are set for this site if you don’t like these five colors you just click on change and you could change any of the colors right here so let’s go ahead and change it to purple for example change it
to purple you want to pick a color that’s gonna match your branding and if you don’t like the solid color you can go ahead and click on an image and you could upload your own custom image or you can go and get hundreds of thousands of free images from Wix com so I’m gonna just put in a dance just type in the word dance so wow this is good if I change it to ballerinas that would definitely change the look and feel of this site let’s change it to
club and I didn’t see anything under club for wicks oh that’s because I was searching in wicks exclusives so here let’s go ahead and type in dance again and to all and you’re going to get a much bigger selection so this has a lot of people dancing of course and you’re going to want to find a picture that matches the look and feel of your particular site let’s try dancing so what I’m doing is just trying different keywords see if I can really
radically change the look of this site I could try typing in nightclub nothing for nightclub about just club all right so when I just typed in club I’ve got some more modern pictures so here and of course you don’t find anything in Wix you can get them from Shutterstock or any other stock image website so let’s go ahead and change the background here it’s going to ask me to save my work so just changing to the image you can see let’s do a quick
preview it definitely changes the look and feel of the site already this is a slide show interestingly enough so remember that little cursor that was blinking that was a slide show of a looks like it was a text so I could change this probably do a question mark let’s do a preview see the question mark just blinks okay so that’s how they created that it was in is basically a slide show where one slide has the item and the next slide does not so
you can actually just put any letter that you like right there let’s put a maybe an exclamation point instead of the question mark and we’re gonna call our dance club dance how’s that hey it’s the nightclub called dance okay all I need to do is just adjust it so it’s a little bit closer right there let’s do a preview and there we go says dance I like it now we could change this image right here instead of a photo we can go ahead and change that
to a video that’s another option you could do there’s some free from Wix let’s see if there’s any videos that would work if you have you know optimally you want to have a an image of your own club that’s really what you’re going to want I’m going I’m going to delete that blinking cursor for now I’ll also change this color to white just so it stands out against the background a little bit better and same with this little subtitle here I’m going to
change that to white as well let’s go ahead and do a preview and you could see that just making the change on that cover definitely change the look and feel of the site if you want to show more of that video I can just make the menu a little bit smaller here and I could change the header design by clicking on change header design and what I could do here is I could just make it with no color and I could take this strip and if I want I could
probably you know just try to put it up as high as I can to a preview so now you have the header with the video playing right behind it so if I change each these are buttons so I would have to change the design of each button to where it’s a white text instead so I can go with the premade buttons or click on customize and just change that to white I won’t do it for all of them but I just wanted you to see so you have text right here and you have
a text a button when I hover over the button glows a certain color and this enabled me to have a full video background of my club remember you want to go with the look and feel of your particular brand alright so that’s how we change the strip let me just see if there’s any questions at this time nope so far so good let me know what you think in the comments if you’re watching this and during the replay let’s go and change the strip background
here now for these events you don’t change them directly you actually change them through the back end using wicks events so for that I’m going to say manage event and this is where you can add events or edit the events that are already there and what’s nice about this is you can actually collaborate with other people on your site so you can add them as a collaborator or a contributor and what happens is they can go ahead and manage your events
and they don’t ever have to go to the website itself so that’s great because you might have a really great you know event organizer or a great marketer they don’t have to be a web designer as well they can just go into these events create the events by giving a name a little teaser a little image right there they decide on the location and the time and where it takes place and then they could add as much detail as they want once you build the the
event you can then go to tickets and you could decide how much those tickets are or if you want them to be free and then people will have the ability to pay for those tickets on your website they will receive the proper email confirmations of their purchase and they’ll also have the ability to cancel the event through email by clicking on the cancel button so that’ll be really useful not only for your users but for you to be able to keep track of
these registrations so once you create the events you would then go into settings and you could decide which events are here or you could just have one if you don’t have three of them you would fix that in settings let’s scroll down here and now the next part is the blog so this is the news section and right here it says under settings this is a feed from my blog what’s nice is I can actually choose a category so for each blog post I would pick
again a category and I could filter just the main ones if I want you might have blog posts about previous events upcoming events or pictures of the event itself and under the new section you might just want to put the upcoming events so in that case you can automatically tag your blog post as an upcoming event and then that will automatically scroll here I can display choose what I want to display here about the blog and I could do in this case
just one column or if I have a lot of events I can go ahead and just change the look and feel right here this particular website is set up for a single column and I could decide how many posts I want to show in this case they decided to just have one post on the home page so I would just take the slider and simply go to one and that keeps your web page from your home page from getting too cluttered so that’s kind of the automated stream of your
blog itself here’s the cafe section you would click on the column so this is a strip with two columns on the column on the left is just simply an image so you would change the column background and you would pick a picture preferably of your particular Club I highly suggest you take authentic pictures so people know what they’re getting into when they go to your club and I just went to the free Wix just for demonstration purposes you could even
show the exterior of your club especially if your if your club might be hard to find maybe it’s in between other big stores or maybe it’s one of those your doors a small door and a brick building somewhere so you might want to show what the front door looks like so in this case I just want to show a quick picture of the cafe and you could add some basic menu items there if you’d like you can add more columns too if you want to give more
information about your cafe or if you have a place where people could eat at your club so you could add as much detail as you want in this particular strip just by going to manage columns and then you can add a column and that will they’ll automatically be spaced out for you or you can remove a column so that’s how you manage columns I get a lot more detail at the Academy and in terms of working with columns and then let’s go ahead you understand
the program you’re going to do that through Wix events you’ll customize their Wix events and then we go into the news section this is the actual blog itself and so for the blog I’m going to click on manage posts so you actually manage these posts in the backend of Wix once again the advantage of that is you can have other people in your organization or business manage all of the blog posts and they don’t have to actually touch the website they’ll
log into Wix and they’ll have access to this dashboard where they can manage all of the blog’s okay so they can edit the content of each blog they can duplicate they can turn off commenting or delete them and set up the tags so if like click on edit post I click on post settings and here’s where I can put in the date a custom URL and the title of the blog post so this is all good for SEO they actually show you what the blog post looks like on
Google so that’s pretty cool that’s a great way to build your SEO right there and then I could set up the different categories in this case there aren’t any categories established I would do that on the back end so that’s how you manage the blog so it’s very it’s a very simple site for somebody who just wants to show the unique programs and content that their theater or Club has for the public give people the ability to know where you are how to
register and what’s going on keep it simple with this template right here so that is the template that is the dance club template from Wix calm let me just see if there’s any questions at this time or comments right so far so good so if you do have any comments let me know I really appreciate you taking the time especially if you’ve gone all the way to the end of this video with me thanks for spending time with me and I look forward to our next
video in our next template once again if you want to know more about Web Design from concept to publication to automation check us out at the webmaster academy the link is in the show notes at the bottom don’t forget to subscribe and we’ll see you guys in the next video bye bye you