this episode of film learnin is brought to you by wicks old guy hey guys welcome to film lenin the show dedicated to learning me some filmmaking and learning good and you know guys over the years I've been asked a plethora of questions such as hey why did you go bald why is our mattress in the corner what's that smell why is there a picture of Rob Schneider on your monitor are you doing in my back yard and why are you wearing a mini captain's Wow that's because sometimes I only feel like a little bit of a captain salute and one of those questions that has popped up from time to time ever since we launched the film learning-dot-com website is how did you build your website and who did you build it with and that's a two-fold question that I can answer with one word Wix Wix approached me about a year ago and said how would you like to build a website using a service and then teach people how to build a website so naturally I said yes and here we are today so before we jump the datura let's naturally segue into a pre-recorded message let's face it guys if you haven't heard of Wix you'd be there never been on YouTube or you're living under a rock which I've got to ask why are you living under a rock and then dangerous mud I digress for those Rock dwellers amongst you Wix is one of the easiest platform sees for website creation with loads of templates jumpstart your creativity and the ability to customize virtually everything the only limit is that brain of yours and perhaps living under a rock situation so sign up for a free account move out from under that rock and build a website and I really got stuck on that living under a rock thing I think there's a loop yeah it's fine smooth transitions grant now guys I thought it'd be a cool idea if we just recreated the film lantern website in the tutorial using a base template just like I did when I built the original website and going all the way through its completion it does mean there's quite a few steps but it also means that you're gonna get a really in-depth tutorial so let's get to work okay guys so here's our first step we're at the Wix website homepage and all we need to do is click get started so let's do that from there we're taken to the login page where you have the option to either sign up or sign in and since I've already created a Twitter account I'm going to sign in from there we'll be greeted with the welcome screen and since this is the first time we're creating a website we simply have to click create your website to start the process once your websites published this will convert to more of an admin page so the first thing we asked us is what kind of website you'd like to make as each of the templates are categorized into genres or professions now I'm pretty sure the film linen site was either photography or portfolio NCB so let's just click one of those this brings us to the template page as you can see on the left there are quite a few different template categories to choose from including a video one right here so gang you can either look at these filtered or just hit all and go digging or if you're feeling physically creative you can start from scratch with one of their blank templates now I just remembered that the template was the portfolio ncb that's the one I was after this one down here called small brand now gang when you find one you like you do have the option to either see it in action by hitting view or just start editing right away let's hit view so as you can see it's a pretty basic site but this is pretty much the same kind of base layer as the film on inside we have now so let's pull that collective finger out and hit edit this is going to open up the Wix website editor and we can start to play now the first thing you'll be greeted with is a tutorial popup on getting started I'd recommend you check this out as it does have some great info but since I'm teaching you let's go ahead and close that afternoon now let's get started by replacing this video here with say the film ylim channel trailer to do that we click on head up and click change video from there we want to replace the URL we have right here funnily enough I have it here and a week's ad start to play on our channel trailer when I opened it a weeks ad in a video that is essentially an ad for wigs my gosh yep that's next level so let's go ahead and copy the URL up here head back to the editor and paste that in once we close that out our video auto-updates and look at me more I'm a web designer next step is adding a new background to the site as this one is a tad plain but first we need to add a white background layer behind our video to separate it from the background and make it pop out a little so what I need to do is head over to the add menu right here find box and drag and drop that into our page like so now we can see that it's slightly transparent and we want it completely solid so let's hit change design head up to customize design fill on opacity and bump that up to 100% done I'll then right-click our box and from the menu I'll head to arrange and select send it back that way it will appear underneath our video from there it's just a matter of scaling it up to match the margins in this box which is easy as these color and margin indicators help us snap these into place okay let's add our background if we hover over the outer part of the site you'll see the change background button up here so let's click that you'll see we have a bunch of options including motion backgrounds as well as stills but since I already have my own image I'm gonna click gallery image right here from there it's simply a matter of me selecting the image I imported or you can just import your own image by clicking this upload button right here but since I've already imported it I'm gonna select that keep change background and bam it's all done now I'd like to apply the same background image to all the pages so I'm going to click this really obvious button from right here then it's simply a matter of clicking the check box on any of the pages you wish to apply that image to done time to play with the navigation menu for starters I'm gonna move it down to the bottom of a header frame like so from there I want to change that design to make it solid so let's click the really obvious change design button and then we're gonna head down to customize design I'll select the second option right here to outer fills where menu I'm then going to change the color of said background to a dark gray I'll then change the text to a white just for a bit of contrast between the two from there I'm going to customize their interactive behaviors for example in the mask hovers over or clicks them so I'm gonna keep the click dip white that's fine but I think I make the hover color Abe the EE BB because why not last thing on the menu is changing that font now guys I'm gonna speed this up because it took me a while to find the right one ah there it is I'll then adjust the font size a little as it's a bit big nice let's then close that out and our menu is done next the header I'm gonna start by deleting that text box and the logo image here now I could just change the image here but Wix will change out this image at the same scale and some cropping will occur and I don't want that it's simply easier just to delete it and start from scratch so let's head over to the add menu once more and I'm going to import my banner from my image library like so we can then drag it up and attach it to the header and click got it well then scale it up and make sure it stays within the margins by using those snapping guides that I mentioned earlier they'll change color to a purple when you're within the balance of the margin boxes now I might picking up my menu bar a tad but as you can see my banner image is actually cutting off the top of the menu so once again we'll click arrange on the image and select the image to go to the back so our menu sits on top like a proud mama hen last thing I want to do here is change this copyright text down here to something a little more well not that there we go I might be just my banner just a little bit more because I'm super anal done let's hit preview oh speaking of anal I just noticed the curved edge on the menu here which I really don't like so to fix that let's head back to the editor right-click on our menu and click design customise design head to border and I'll just zero out that curved edge much better let's then adjust it to snap to the margins and check out a preview alrighty our first page is done and that took no time at all if we compare the two pages you can see just how different they are and on top of that how damn easy was to achieve that result so let's keep going and make the rest of the film London website as best we can in the shortest amount of time let's head over to the site menu and click on manage pages from there I want to delete these two sub pages are under collections as we don't need them to do that we click on this menu button on the side of the page and select delete which we're prompted with a warning which will totally ignore okay done hmm you know what I'm gonna go ahead and delete that blog page as well done now I still need one more page to make up a site I'm designing so rather than build that other page I'm gonna click the menu here and select duplicate and we'll just call this page merge let's then double click collections and change that to the show and we'll change about to say downloads okay let's go back and start with the show now the idea here is to have this stream the YouTube channel directly from the site and at this moment you can see the page is full of text and pictures and we don't want that so let's just go ahead and delete old ad and from there we'll head over to apps app and we'll search video will then select Wix video and will hit the big old add to website button let's move that down like so and from there it's time to customize it for starters we'll go to manage videos and you can see on the bottom area it says embed any video from YouTube Vimeo and Facebook which is handy so let's add our channel URL right here I'll just head up and copy it directly from YouTube like so and let's paste it in here all done so let's hit next and follow it up with ad feed we'll close that out and from there we're gonna head to settings head to channels and from the menu let's select a YouTube channel there we go it is now embedded in our website now I'm not digging that a fault look of this thing so let's customize that firstly we'll add a few more rows below the feature one by increasing this number to say three nice and I don't like the banner just sitting there so let's head to player and change that to featured video cover and since our thumbnails already have titles let's go ahead and remove the title as well as the channel name since I'm pretty sure it's film learning lastly I want to change that play button color to stand out a little bit more much better if we check out a preview we now have a YouTube channel embedded into our website and if we compare the two sites here's what the page looked like and here's what it is now not bad for a few minutes work right so the next page is our merch page now the idea here is to link to my teespring merch store an external site but make it seem like it's a normal fluid part of the site so to do that let's head to the pages menu manage pages let's go ahead and delete that merch page yeah I didn't actually need it from there we'll head down and click Add link we'll make sure web address is selected here and we'll go to my merch store check out the most or if you want to just copy the URL and stop whoring and we're gonna paste it here and hit done and bram all linked up let's rename our linked merch and hit done it adds itself to the site menu and if we preview our site look at that we hit merch and there's our external merch site all linked up to our menu and working great then while we're here when I pick up a Margit shirt gang designed by our very own Tyler lamp ship okie dokie let's move on to the download section and we're on the homestretch gang now as you guys know when you download a pack from a film learning site you click on a thumbnail and the pop-up window comes up with the download link so I'm going to show you how to do that using Wix lightboxes let's start by adding a lightbox we'll head over to add down to light boxes and I'm just gonna go ahead and speed this up because it took me a while to find a lightbox I wanted there we go I'm also gonna speed up me farting around with the design of this lightbox because we all know how to edit a text box and I'm not gonna go over that now that I'm done let's finish this by clicking the download button and clicking the link button here we'll change this to web address and I'm gonna paste a link to our mediafire download pack at pocket dimension 1 to be exact done let's now head back to our pages menu hit pages head to light boxes let's finish off our light box by renaming it pocket dimension okay light box done now let's build it out to our download page so the first thing I'll do is add an image about pocket dimension thumbnail like so I'll then scale it down to a reasonable size and position it into place next I want to link it to the lightbox I created to do that we hit the link button and change it from web address to lightbox and since we only have one lightbox it's going to link it by default to ad pocket dimension lightbox we can then click done if we preview this we click on the picture and our lightbox comes up nice so my next step is to duplicate my image here and fill out the page just a little bit more just for an example so I'll right-click and copy and paste we can then use the snapping tools to easily align the picture to the middle of the page but certain copy and paste again and make a nice row of 3 I'll then select the middle image and click Change image let's then change it to a different thumbnail and then follow that up by changing the second one as well next we need to make some more light boxes and we're going to cheat here guys by heading to manage pages light boxes and we'll duplicate that lightbox we just created and rename it to say spider-man and then we'll simply edit the media file link hit done and one thing I want to also mention guys is you can save this site at any time before you publish it so while highly recommend you're hitting that Save button as much as you can say every time you finish a page or anytime you make any kind of significant change to the page and follow that up by duplicating that one and modifying that media file link to a starless reality stone pack we can then go back to the downloads page click the link button on that image and from the drop down menu we can select each of the corresponding light boxes pretty easy huh gang if we preview the site we now have three images linked to three light boxes that all have different external download links embedded into them okay last page gang the contact page now guys there's two different ways to do this so I'm going to quickly mention both of them the first method is to simply link the tab directly to an email link to do that we'll head to manage pages right here we'll go ahead and hide the current contact page by doing this from there we'll head down and add a new link set this to email right here will then type our contact email and a completely serious subject line if done rename it to say contact us and if we preview it and we hover over the contact tab right here you can see down the bottom the link is a mail to link and including that subject line so that's one way the other way is to simply enable that contact page and modify it to suit our needs so let's do that quickly let's head back to the pages manager hide that page link we just created unhide our previous contact page and let's get to work firstly I'm gonna delete anything I don't need which means these lines and text boxes right here I'm then going to grab everything by just clicking and dragging and just move it up next we're going to change the display to email here to our film one and one there we go and lastly I want to get rid of these social links here because our final step is to add a social bar to the header of our site to add that social bar let's head over to the add menu down the social and grab the social bar we're then going to drag it up and attach it to the header of our site from there let's click set social links and I'll quickly delete Pinterest and Google+ because well I sure as hell don't use them and then I'll add in all my links to the remaining ones which is super easy once done we'll close that and I might give the social bar over here and then let's have a preview look at our finished siding as you can see our social bar is working with all of our accounts and if we do one last comparison here is the small brand site we started with all white and claim with just other text boxes and here's the film and insight I just built right before your eyes in Wix with an interactive YouTube page a social bar all set up external links to our merch store and our download packs and that my friends is our first web design tutorial done so add up all those steps and you've got yourself a kick-ass website with Wix now guys I am going to mention that the example site we build is a free Wix website if you want to say connect a domain name increase your web storage you will have to sign up for a premium membership now there are several tiers to these premium memberships depending on what you want and they offer different things and you'll find more information about that down below in the links but guys that is my time if you didn't enjoy this episode please smash that like button I really do appreciate and hey if you I knew he hit that subscribe button turn that notification bell on so you don't miss a single filming episode I've got two other episodes right of you and I think got another one right over here my social media crap is above my head thank you two weeks guys and anti see you again keep learning .
Today on Film Learnin, this simple Wix tutorial, we’ll show you in a very easy to follow way how to create a Wix website in a few minutes. Wix is one of the easiest platforms to use for website creation in 2018, and after this Wix website tutorial you will totally see why. If you would like to see more regarding Wix and their membership options please visit this link: or visit the Wix YouTube channel here:
The finished example site:
Note: The video is a PAID sponsorship by Wix.
SUPPORT US ON PATREON:
Scored by Filmstro:
20% Annual subscriptions code: MAHGAWD_ANN
Get 10% off everything at ActionVFX.com by using the code "filmlearnin"
Want to take your projects and client work to the next level? Get the best templates & stock footage from VideoHive:
1. After Effects Templates:
2. Apple Motion Templates:
3. Stock Footage:
Need music for your projects or client work??? Get the best royalty free stock music tracks from AudioJungle:
► SUBSCRIBE HERE: