How to create a Portfolio Website

Making awesome videos is great, but it means nothing if nobody can see your work. People need to find you on the internet and that starts with a website. And no, it’s not technical challenge. everybody can do it! Hey folks, Jordy here for Cinecom.net. We share tips for film makers and that also includes the business side of our creative work. Websites can cost a lot, unless you can make them yourself. But them we see a technical gap We are not programmers, we are video editors, film makers. Luckily there is a solution called wix. Wix.com is a website, that allows you to drag and drop different elements. Customize it to fit your style and it’s super easy to use. So dive into Wix and make a website. So once you created your account and head over to Wix.com, you will see this dashboard. Which allows you to do all kinds of sendings necessary for you website. And I have already created one website as a demo before i was creating this tutorial. And you can see that appearing here on the left, Portfolio. But if i click on that, you’ll see here that i can create a new website by clicking on this button. That allows me to go to some kind of wizard that will help me, to create a particular website and it will ask me what the website is for at first. We can chose here for example a portfolio & cv Because that’s what we are going to create, a video portfolio for film makers. So click on that and that will bring you forward to the editor that you will like to chose. And there are to kinds of editors. You got some kind of wizard again, but this one doesn’t has that much customization options. So i would go for the Wix editor Because that allows you to do really everything. So click on that and that will bring you to the next step. And that is to chose your template. Now if you like you can chose any of these templates and then adjust anything you would like about these. And this can be a very good starting point for your website But if you are like me, then you just like to start from scratch and that is also possible. By just going here on the left, you can see here “Blank templates”. And under the blank templates, you can really, like it says here, start from scratch. That’s really blank, nothing. But there are also pre-designed layouts, now these don’t have a particular style. But they do contain all the elements already. Like a slider, the menu and so on… But for now, let’s go with the scratch. So we just click on edit and that will bring you to the Wix editor. And here we are, now the wix editor is actually very simple in use. You can drag and drop all the elements you like, you can change the settings of all the elements, etc. You don’t need to know any code! So that is wonderful about this. And still we can change everything we like in here. The first thing they always recommend is to start with your menu. Think about it first, which pages am i going to need and make sure that you got that at front and then we are going to design the rest of the website. So here on the top left, you can find your pages and currently we only have a homepage. But if you like you can add another page, by just clicking on this button here on the bottom. And then you can say, well i like to add a real page or you can also say to add a link to your menu. Like if you wanted to go to a third party website, like a Behance portfolio or anything like that. I’m click going on page now and let’s create a portfolio page. So we’ve got the homepage, which gives a small introduction to what we do. Then the portfolio page actually contains all the photos if you are a photographer or the videos if you are a film maker and you like to showcase your latest work. Portfolio and done. Then let’s add another page and this going to be the about page. You know, people like to read about me. If it’s a portfolio, then make sure that you also include enough about yourself. And finally, if it’s not the most important page. The contact page, you know you want people to contact you. So what ever that is, your phone number, your address, etc. And of course at any point you can change the order of this menu, so you can just for example, the portfolio is pretty important, so going to drag that under need the home page and then the about and as last the contact page. Great, let’s close this menu now and let’s add the actual menu elements to the website. So just go to the left side here where you can change everything, even apps that will do something specifically. Just click on add and here you see a bunch of things, that we can add to the website. So we can add text, images, galleries, slideshows and so on… Of course like i said before we are going to start with the menu. So head over to menu and here you can see some pre-designed menus that you can chose from. And again i would say go with any of these and then you can change the style if you like so afterwards again. So let me just pick out one of these menus right here. I do like this one a lot. So just take that and drag it to your website. But of course we are not going to drag that into the page, but going to drag that to the header. Which is up here. And then just let go and in the beginning Wix will help you with some tips, but you don’t need those tips, because you guys got me! Let’s just close that and continue here. I’m going to drag the menu here to the right side, because what i want to do is actually add my logo here on the left. But let’s first take a better look at the menu and one of which is the design. So if you can click on that, that will open a new popup box. You can change the design of that menu, also you can go into the custom design mode. And just change everything you like in here, like the fill color. You can change the borders, the corners, everything you like… But you know what i really like the menu a lot, so i’m just going to leave it as it is and i’m going to dive into these options with some other elements later in this video. So just close that menu. And let’s add that logo here on my left side. So go back to that add menu here on the left and i’m going to head over to images and select my image uploads. You can find you library of uploaded images. now i’ve already got two images in here Which is me and the Cinecom logo. But i’m going to add another, because for this website, i’ve created a new logo. I hope you guys like it. I’m going to click on upload images and i’m going to browse to my desktop. And over here i got a wix folder, which contains all the logos and photos that i’m going to use for this video. And right here is my awesome logo. I’m going to be Jordy the Freelancer and i’m very good at camera, light and editing and that’s what i want to showcase in this website as well. So once it’s uploaded, just press done. And then once it’s selected here, click on add to page. Now we can just drag that to the header here, on the left side of the page. And there we go, we’ve got a beautiful header now, with the menu en the logo here. And because it’s in the header section, it’s going to stay there for all of the pages. But let’s start designing now. I’m going to head over to the homepage, because i’m currently at the contact page. And we are going to start with the homepage, so just click on here from the pages menu. And you know what is really popular these days? Those sliders, so i’m going to add this header slider. Head back to that add button here and i’m going to chose slideshow. And from here again you can select any preset if you like or just design your own. I’m going to take this one here. And drag to the page, there we go. And maybe you can change the height of that slider, perhaps it’s a bit to large. And in that slider we can change different elements, we can also add new text in here. new images, etc. So let’s add text, what i’m going to do here is going to tell the visitors actually what i do. With these sliders. So i’m going to do something playful here and i’m going to say “I am” and underneath that “camera” as you can see as i’m changing the text a new popup will appear. Where i can change all the stuff like the font size, as you can see. The color, the alignment, some effects. You can even add a drop shadow to it and so on Now what i want to do is align these elements right here, in the middle of that slider. I can select one of these, but also i can select multiple by holding down the shift and i’m want to make sure that i group these elements. And i can do so by just clicking here on this button. Once i select multiple elements, group elements. Now i can simply click one sentence and that will select the whole group. And now i can just drag that around here in my slider to reposition it. As for the sliders background, of course you can also change that. Just click on that slide and head over here to change slide background. There are different things we can do again here, We can chose from the Wix stock backgrounds, that even includes videos. Like this one right here. Which i like very much, the only one problem is that my text is not so readable anymore. Because of the bright background, but even Wix thought about that as well. Just head over to the settings of that background, here on top. That allows you to add an overlay pattern to that slider image or video. And for example i’m going to take any one of these and that will actually make the slider darker or you can also select even lighter if you have a black text. But for now i’m going to select darker and now the text is a lot more readable. Let’s continue, we’ve got three slides. you can navigate to them from this blue menu here on top. Let’s go to slide number two. Also here i’m going to group these elements and going to position them in the middle. And let’s change that again to say “i am” and the subtext is going to be “light” Also the font size, just increase that a little bit I am light And here you can again change that background if you like. You can also upload your own images of course. Also here group the elements and put that in the middle double click to change the text, “I am” and also the subtext, is now going to be “the editor” I am the camera. I am the light. I am the editor. It clearly says what i’m doing. So if anybody is looking for a camera guy, a light guy or an editor. You know where to find me! For those who still don’t know, what i’m doing. We are going to add the bloat out slider, the services So again head to that add button right here and i’m going to head over to strip. And on strip here on the right side, i’m going to select services. And here we can find some pre-designed services elements and i really like this one over here. So i’m just going to drag that into my design. There we go. And as i only have three services, i can go into these settings here and say manage columns. Click on that and from here i’m going to say to the last column, column number 4. Which is consulting in this case. Just delete that. There we go. And now we can close that, go into these things and again change all the text, the icons, the elements, the font, the color, everything we like… So let’s do that for the icon right here, click on that and say change shape. That will bring us to the shapes from Wix. You can again upload your own shapes if you like, but Wix has tons of shapes, tons of icons. So why not use them. Let’s search for a camera and look at that. they even have a camera shape or icon. Also here for this one, here it’s going to be the lighting; So if i type in light, they even have a film light. Apply. And then the last one, i’m going to search for a laptop. Because this is going to represent the service editing. There we go. Then let’s also name that, this here is going to be camera. And add a little text below that. Let’s say that i’m a experienced camera guy. working with RED and dslrs. This kind of stats which kinds of cameras i work with. Communication companies usually look for a freelancer that works with a particular camera. And usually that’s between RED and ARRI. So let’s just say i’m working with red here. Then here also lights and i’m going to change this text right here to the color white. Because i’m not using the color green anywhere else. And as for the text also here, let’s say “Hire me as a DOP making use of my own complete light kit.” Now with this i’m also saying i have my own light kit and you can hire me as a DOP as well. And then finally the laptop here, this is going to be editing. And i’m going to change the font color to black in this case. And as a text i’m going type something in as i have my own editing suit working in Premiere Pro. There we go. With these three basic elements, you instantly say what exactly you do and what you have to offer. Now let’s say that someone here comes to your website and her or she is looking for someone who works with an ARRI. And you are only working RED, then that person might go away and go to another website. And that is actually not a bad thing, you want to position yourself on the internet. You want to clearly state what you are about and that will attract people. And that will also unattract people. But you want to focus on the people that are attracted to you. For business purposes of course. Alright, the read more i’m just going to delete that. If you have for example a services page, then you can also included that. I’m also going to make this a bit smaller. There we go. Another thing to also mention here, we are currently working in full width as you can see. But if you like to work more boxed mode, you can also do that and all the element groups, will have some kind of option here to stretch or not stretch your elements. And currently it’s set to screen size, but you can also set that to page size. Now as you can see, that will kinda box these elements. But we are going to work full size here, so let’s put that back on screen. Now to finalize this page, i’m going to add several pictures from behind the scenes. If you have a reel, you can also put that in the slider. That is also by the way always great to do so, so people can see what exactly you do. Because you can say your are working on a RED and that you have your own light kit and all, but are you of any good. Do you actually have all of this equipment, then make sure to show that. Showcase your creative work, showcase your gear with pictures or with videos. And Wix is telling us something pretty good here. Make sure to save your work! Even though we are working in a browser, still make sure that you are always saving your work! Because you know, browsers can crash as well! Press on save, and give that a name. You can get a free link from Wix of course. But you can also connect your custom domain name. For example, jordythefreelancer.com. But we are going to stick to that free domain name right now. So let’s say Jordythefreenlancer. Look at that. Save and continue It’s all saved up, but it’s not published yet. So don’t be worried yet, only until we hit publish now are people going to see it. So let’s head back to that add menu right here and i’m going to head over to gallery. And we’ve got a bunch of different galleries. There are really some cool designs here, like these hexagons and such. But for this design, i’m going to pick something more rectangle-isch. So i’m going to drag in this grid, drag that below that slider. There we go. And also here again, it’s currently set at box. But if we are going to head to the stretch menu, we can set that stretch to full width. Close that. And of course what i want to do is change the images. So you can either say to replace these images by selecting any of these or you can also delete them and just upload new images. That’s exactly what i’m going to do. I’m just going to delete all these images, because it will go a lot faster if we are just going to upload the new ones. Delete, delete. Not my picture, Not my picture and not my photo. Add new images. Then i’m going to head over to upload images. And i got a bunch here, just select all of them and say open. It’s going to upload all of these wonderful photos from behind the scenes from stuff that i’m working on. So people can see what i actually have. You see we got a picture here of the studio. People then know, hey he got a studio. And you can see some cameras. Okay you know that guy know his business. Press done. And i’m going to select all of them. You can hold down your ctrl key to select multiple photos. And then press add to gallery. And well that’s it! Then just press done. And bang, your photo’s are added to the gallery. Now it seems that there’s one picture to much here, so i’m going to head back to pictures. And i’m going to delete one of these. I’ll remove this, the last one here. and now it looks a lot better. We are at the bottom at the page, that means it’s time for a footer. The footer will usually contain some copyright information. So click your footer, it’s always funny to say that. And head over to change design. And again you can add shadows here, you can add different colors and so on… But let’s just go for a plain dark color. There we go. And i’m going to add a text, let’s just add a paragraph to it. Drag that into your footer. And we just say edit text, the first thing want to do is change that to white. Ther we go. And i’m going to change the text here, to stay off my stuff! There we go. Position that, perhaps here a bit more to the left and if you like so you can add some more stuff here on the right. Perhaps some links to social media But we are going to look at that on the contact page. But that’s for later, we are first going to go further with the portfolio page. Now we are going to see how we can add actual videos to the site. So you are back to the top left, head over to portfolio. And as you can see the header and the footer are still there . We only have to design the actual page now. So head back to that add button over here. And let’s head over to video now and from here we can actually chose to add a youtube video or a vimeo video. We can embed that. This also the best way to do it, you know we are able to upload videos to Wix. But we are limited to only 50mb and that’s because usually you want to use uploaded videos as a background of a slider. But if you are going to add actual videos in here. I really suggest to work with youtube or vimeo. And the reason for that is, well youtube is going to convert your video in different formats. A format that suits mobile users, a format that suits users with a 4K broadband internet connection. So it’s going to push different formats to those users, that have also different sizes. Which makes it more user friendly. So drag in that youtube element. And of course we are going to say change video. And pretty cool here, we can actually search for videos. So let me just enter Cinecom in here. And let me just take any of these. For example, the 5 tips to light a scene. Press add. And there we go, the video is already added. Now what is even more cool, is that we can head over to the design of the video. We can add a cool frame to this. For example something like this, a drop shadow. Anything you would like and that makes it a bit more personal. So there you go, this is our first portfolio video. Now here is something pretty cool i haven’t seen that often yet with online editors. You can actually use your shortkeys that you are used to, in let’s say in a text editor or even Premiere Pro. Anywhere you use them. Things like copy, paste, undo, redo, etc… So let me just copy this, ctrl C and say ctrl V. Now i have just copied this element. Now pretty cool also is here, i just dragged that to another position and i can just say ctrl z to undo my action. And that is what makes working with the Wix editor so pleasant. Right so let me just place that back here and i’m going to change the source one more time to something different. So let’s search for cinecom again. And let’s take the 5 tips to stabilize your shots video. There we go. It’s pretty much set actually with just having your videos in here. But it doesn’t look so great yet. We are going to add this big banner here on top and that will kinda make your website a bit more personal. Head back to your add we going to head over to strip and i’m going to add this standard strip, with the background video to it. There we go. And i want to make this smaller, because what i’m going to do here is put a title into it. So something like this would do very well. Now head back to that plus here. Let’s say add, text. And in here i’m going to add this all caps big title text. There we go. And let’s change this to portfolio, so people know at what page they are And i’m going to change that to the color white. Perhaps make that a bit larger, not to much. Something like that, looks pretty cool. And underneath that, a little subtitle as well. I’m going to go back to texts and let’s take something here. Cute title, i like that. It’s a cute website as well, so let’s just take it. Here is what i can do. Change that also to white. Make that box a little bigger and put that underneath the big title. There we go. Now we have some kind of subtitle to it. There are some pretty cool things about this strip, if we go go back to change background strip and head over into the settings. Again we are going to add this darker pattern onto it. But also we can add different scroll effects to it. Like the very popular parallax effect. So i’m going to select that as well, close the video settings and now we’ve got a pretty cool banner. Of course you can add more videos to it, you can add different backgrounds to it. You know how the strip works now. The stip is an element you probably use more often. What is going to now is just copy this entire header. Ctrl C Head over to the about page. And right in here i’m going to pasted it. And now we can just very easily change the text. So let’s say, “about” now. And as the subtitle, we are going to say “all about me”. And as for the about, there is a pretty cool element for that as well. So head back to the add element menu and again i’m going to head over to strip. Because you know this one has the most. And right here we can find about. I’m going to drag in this element over here, we can re-design that again. Let’s start with the left column here. Say column background and currently these feet are in it. But i’m going to say change that with an image and i’m going to select my image. I’m going to go back to upload images, select myself and open that up. Press done, select that image and say change background. And now my pretty face is in that column . And on the right side, also here we are going to change the column background. We are not going to work with that green. We would just like a different color, for example again that dark grey color. There we go. And on the top here, About us. Well it’s only me, so i’m going to say “Jordy Vandeput” And underneath that a little text, which i already typed for you. And i’m going to put that in the white color as well and i’m also going to align that to centre. Something like this. The button right here, i’m just going to delete that. I don’t need it. So there we go, this is the about page. Nothing more to say You also can add some certificate icons in here. Just go to the add menu and select shape to add different icons in here. So you can showcase you diploma’s from film school and so on if you like. But i’m going to consider that this page is done. Again i’m going to copy the header and head over to the last page which is the contact page. Paste it there. Contact And let’s say in the subtitle, “Let’s get in touch” Very important for the contact page is that we have a contact form. So we are going to head over to the add again. And we got an option here, contact. And from here we can just drag in any contactform we like. For example the first one, again we can always change the design afterwards. By heading over to the design option. Let’s go with something simple, actually i like this one a lot. Except for the button. Going to head over to the custom design. Click on fill color and opacity and as for the background of the button. Going to make that dark again, so that it fits more with the rest of the style. Cloes that. Also here in the set your email options, you can set the email address that the message has to go to. And underneath that you can change the fields of that contact form. But i actually like it a lot, so i’m going to leave it as it is. And like i said before, we want to add some social links here in as well. So go back to the menu here and we are going to go to social. And again you can select any of the styles. I think you guys understand now how Wix is working. So i’m going to drag that to my page. Move that a bit lower. And again go to the settings here, change social links. You can just select any of these images here and in the option here on the right, you can change to which page it has to go to. Now by default, it’s all linked to the Wix page. But you can of course change that. For example to the cinecom.media, which is the facebook page of cinecom. Make sure to like us by the way! And then just press done, to close that menu. And finally, that’s the last think i’m going to show you guys for this tutorial on how to use Wix. And that is to add a google map to it as well. So go back to the add menu and you should find under contact here as well, If we are going to scroll down to the full width google maps. And i do like this one here a lot. So just drag that underneath those social links. Again you can just change the address from the options. I mean it’s getting pretty straight forward, what you can do with all the different elements. Now once your website is done, you can of course publish it. But before you do so, make sure you first preview it. And make sure that everything looks awesome, looks the way you want. Try to test out the different menus and so on. Now very important, here is something you are going to see. For example, i’m going to head over to the about page. Looking pretty good here. But let’s say i’m viewing this website on a mobile phone. On a smartphone to be more specific. Then change the viewers here, to a smartphone. Mobile view. And right away, you can see that some things aren’t really right. The text here, the title is over the other text. This element here is way to large. This is not good. So let’s go back to the editor, how do we fix this? Well also in the editor, we have two different views. We have the mobile view and we have the desktop view. Which we can always change back and forward from. By clicking in this menu here on top. Currently i’m in the edit mobile view and don’t be afraid here. You can just start again changing your elements. So i’m just going to drag this title here on top smaller for mobile users. Now this is not going to effect the desktop users and that is what makes this thing so great. Everyone has probably heard about responsive websites. But this thing is actually taking it to the next level. By creating adaptive websites and that means that the content on a desktop and a mobile phone is going to look different. So you can even say to add different photos or different buttons in here on mobile that you wouldn’t see on desktop. Also the logo here, i’m going to drag that a bit smaller for mobile view. There we go. Now when i’m going to switch back to the desktop view. You’ll see that everything still looks the same as i created with the desktop view. So there we have it, we have a basic website created underneath a hour. Now let’s go to save again. And we are going to say publish now. And well that’s it, it’s published! You can go to visit site now, this here is you link on top. Cinecomnetwixsite.com/jordythefreelancer And when i’m going to head back to my dashboard. You can just go to Wix.com. You will see that the website here is also on my left right now. So we’ve got Jordy the freelancer and we’ve got portfolio which i have created before. Currently i’m in the settings of Jordy the freelancer. And in here i can change different things, like upgrading my plan to a premium account. And by doing that you can connect you domain name to your website, work with an eCommerce shop and so many other options… Now that we have created our own portfolio website, we can take it to the next level by turning it into an online shop. You can sell merchandise to earn an extra buck or set up a printing service as a photographer. But that’s for a different video. Thank you so much for watching and stay creative!. As found on Youtube First Tier Marketing
Optimization WordPress Plugins & Solutions by W3 EDGE