[BEST] Create a PERSONAL PORTFOLIO WordPress Website 2021 | WordPress Elementor Portfolio Tutorial

are you a freelancer an agency owner a photographer or any sort of small business owner and if you don't have a portfolio website then there is a 99 chance that you won't get a job let me share my personal experience with you so far i have done nearly 1200 plus freelance projects and over 90 percent of clients of mine came through my portfolio website even i have done 100 plus jobs on freelancing marketplaces and 80 of clients asked me this question first do you have a portfolio website so many of you guys always ask me how did i land so many freelance jobs while others are suffering to get their first job then my number one suggestion would be make your portfolio website before anything now in this tutorial i will show you how to create a portfolio website that will help you to attract more clients even though i have done the hardest part i have designed the whole website for you i will provide you the template for free all you need to do just import the template replace the text with your own text adding your own images your own phone number email address you know so clients can contact you immediately to create this website we will be using a free cms a free theme a free page builder and all free resources and you don't need to know a single line of coding we will be creating everything just by drag and drop so no matter if you haven't made a website before this tutorial is perfect for you let's now have a look at what we're going to make in this tutorial first i will show you how to create this beautiful banner section with background particles here you can put your own picture your own name and here you can see some animating text you can post here all your strong skills and here within this button you can link them to your contact form also if you want you can contact them to your fiber or upwork account then on the right side we will have our social media links and then next here we will have our beautiful about me section where you can put your another image and all about yourself also you can add your skills with this beautiful progress bar and then underneath we will have our beautiful education and work section and then let's scroll down here we'll have your beautiful services section also when you hover over on it you can put your services details here then underneath here you can put how many works you have done how many customers do you have all these facts then on the next section here you can put your all recent works or portfolios within this beautiful filterable gallery like here under web design you can put your all web design works underneath web development you can put other works you can show your e-commerce works all these all right then next we will have our beautiful packages section so if you would like to do hourly projects you can put your hourly rate here also your project rate or monthly rate with all details now on the next section here we will have the client's testimonial section here you can replace this dummy text with real clients testimonial their feedback their headshots everything and then underneath we will have our beautiful contact section here you can provide your contact number your email address also there will be a beautiful contact form i will show you how to create this contact form so your clients can easily contact you by using this contact form and then here is our global fooder now if we click on this go to top button that jumps to the top of our website i will show you how to create this beautiful logo using an online free tool then how to create this beautiful navigation menu also if we click on any of these menus like here i'm clicking on this about menu it jumps to the about section then if we click on the contact button it jumps to the contact form section can you believe we will be doing all of this without doing a single line of coding i'm really excited if you are excited like me please give this video a big thumbs up and don't forget to subscribe this youtube channel it would mean the world to me alright we will be creating this beautiful portfolio website in easy four steps first i will show you how to get your own domain name and web hosting also i will provide you a 50 discount link then we will install a free page builder then we will install a free theme and finally we will start customizing our amazing portfolio website also i will be adding a timestamp in the description so you can always jump to the necessary part you need let's now start with the step number one which is to get your domain name and web hosting so first of all what is a domain name domain name is basically your website address like facebook has facebook.com amazon has amazon.com i have jim fahad digital.com similarly for your website you need a address that will be yourwebsitename.com and what is web hosting web hosting is the storage space for your website all the images takes you will have in your website all will be stored on your own web hosting as you are owning your own web hosting so there wouldn't be any limitation you can run ads you can upload any text or images you can upload any themes or plugins you want you are in charge of your own website okay now how to get your own domain name and web hosting so first just click on the very first link in the description below this video or you can go to gym for jimfahrerdigital.com forward slash hosting and this will take you to a special discounted bluehost page so why bluehost in my opinion bluehost is the best web hosting provider i'm a web developer i tried so many other web hosting companies i don't want to mention their name but i personally ended up using bluehost hundreds of my clients using bluehost and they never complain about using it if you see my bluehost account i have hosted tons of websites here and i never get a downtime their customer support is really cooperative in case you need any help and their price is really affordable that's why i always recommend bluehost so now click on get started here you can see their different plans the main difference between them with the basic plan you can host only one domain you can take their plus or choice plus plan if you want to host unlimited domains also you can take their pro plan if you have millions of visitors on your website already i recommend starting with the basic plan then in future you can upgrade that anytime now let's select the basic plan now we will select our domain name if you already have a domain name that you want to use you can just go ahead here on the right but for now i'm gonna get a new one now here let's try for something like apple.com and click next it says the domainapple.com cannot be used on bluehost please try a different domain name it should be because we cannot take that because we all know that's apple's official website so we will be typing our own domain name here and also if you click on the right side you can see dot site.net.info websites i always recommend to take.com websites because it looks more professional and legit so i'm gonna type here let's say our elementor dot com as we are going to make our website through elementor page builder and now click on next it says our elementor.com is available that's awesome and here we need to put our account information i'm putting mine here really fast only to not make you bored okay here you can see the business name field if you don't have a business just keep it blank or put your full name but here is the most important thing that's your email address make sure you put your correct email address because after completing purchase a receipt will be sent to that email address so make sure you put your best email address here all right now scroll down here's the package information and it's automatically set to 36 months and this is gonna be your cheapest plan so yes you're paying for 36 months up front but it comes out to only around 3.95 cents a month so this is 50 off that's gonna be your biggest discount now what i recommend is to just do 12 months if you don't want to commit to the 36 months or 24 months it's still 33 saving and it's only around 5.95 a month and you also have your domain name for 12 months so no more additional cost for your domain for these 12 months and here you got package extras first here is the option for domain privacy having domain privacy is good and i always recommend having domain privacy so no one gets to know who is the owner of the website but for the sake of this tutorial i'm deselecting this one let's click on turn it off because i don't wanna hide myself at this moment i want to be transparent so if anyone knows i own this website i have no problem you can keep this one checked if you want not a big deal i'm also deselecting all other options they are offering we actually don't need that they are just upselling their stuff all right now you can see the price is now only 71.40 for the full year including the domain that's awesome and i'm legally obligated to tell you that this is my affiliate link so i do get a little bit of commission off of this but it does save you a ton of money and it helps fund these free youtube tutorials what i'm doing so everybody wins i really appreciate it and here is the payment information i'm putting my credit card number here expiration date and cvv code then select this one here so that you are agreed to their terms and policy now click on submit it says your purchase was a success also you can see here is your receipt they will also send it to your email i'm also waiting to get that email meantime we can create our bluehost account so let's click on this create account button here here's the domain name that's automatically selected now let's create our password create a really strong password combining capital letters numbers special characters you know how to make a strong password and then retype the password in the second field now check this once again that you have agreed with their terms and policy now click on create account i already have received an email to confirm my purchase so i'm opening my email you will also get an email like this then click here verify your email it's very important so it's not verified awesome now let's login into our bluehost account with the domain name and password we have just created if you are logging in for the first time you may see a pop-up like this like it says let's create a website bluehost actually want to help you to make the website just click at the very bottom there i'm not creating a website because i will be showing you everything step by step and skip all of these pop-ups because we don't need any of that cool we have successfully registered our domain name and web hosting [Music] congratulations so far if you have any questions please let me know in the comment section i will try my best to help you personally so now we can move on to step number two which is to install wordpress and for some reason if you logged out then login again now from left menu bar click on my sites then you can click here create site or here create a wordpress site i'm clicking here sometimes after clicking on my sites you may see these my sites from there just click here on add site then you can see here two options one is limitless customization and another one is fast easy site building as we will be creating our website using an amazing page builder the elementor page builder that's why we will be selecting this option the limitless customization so just click here on get started so let's now add a site name and site tagline we can change that anytime so i'm putting a site name jim production and the site tagline it deserves to be seen now let's click on advanced here you need to put your email address your username and password for your wordpress so i'm putting my email address here wordpress admin username i want to name it jim fahad and here let's put a password do you want to see my password i'm clicking here on show so it's abc123 i will of course show you how you can change it later so for now click on next close this browser popup now it says where we want to install our wordpress so make sure you keep this directory blank and here is your domain name selected and bluehost here is suggesting some free plugins but we don't need that let's deselect this all now click next awesome it says wordpress installed successfully now you can copy these informations right here and save that somewhere on your computer where you can access it again later and click here to show your password actually i intentionally gave this an easy password that's abc123 never ever use this kind of easy password i'm showing you shortly how you can change that password we can now sign into wordpress by clicking here but this is not the usual way because all the time you cannot log in this way i mean from this page this button right so you should get used to signing into wordpress all the time is by going up to a new window and typing in your domain name forward slash wp dash admin so i'm typing here my domain name our element dot com forward slash wp admin and click enter so we can see our wordpress login page here that means wordpress has installed successfully sometimes it takes 30 minutes to 24 hours to process this installation and this process is called propagation it basically has to let everyone know that hey this new domain name now exists and registered but we can see our website instantly they actually say it might take 30 minutes to 24 hours but i've been using bluehost for more than 10 years i always get domain live immediately actually that's another reason why i love bluehost so now you know that your domain name is working so go ahead and i'm just gonna type in my name which was the user that i created and i'm gonna type that easy password abc123 you can click this i icon to show it now let's click on login so right now we are inside wordpress admin panel or wordpress dashboard i will make you familiar with all of this but before anything i wanna do three basic things first of all i will clean up the wordpress dashboard then i will change that easy password and then i will delete all the unnecessary plugins so to clean up our wordpress dashboard from left click on dashboard and then from top here click on screen options and to make our wordpress dashboard clean i'm just unchecking all of this from top let's uncheck them all also let's close this notification right now our wordpress dashboard is looking much cleaner okay let's now change the easy password that we have given abc123 to change that is a password hover over on users and then go to profile from here just scroll down and here under account management you see new password from there click on set new password first i'm clicking here on hide so you cannot see my password now here i'm putting my new password it says medium but it's okay for me so let's just scroll down and from here click on update profile and now to make our wordpress dashboard more cleaner i will be deleting all the unnecessary plugins and to do that from here hover over on plugins click on install the plugins all these plugins came with wordpress default installation but we don't need any of them so we can select all the plugins together by clicking on this first checkbox now click here from bulk action first let's click on deactivate click on apply and then again select all them together this time from bulk action click on delete and then click on apply browser popup says i'm sure or not yes i'm sure so click on ok now all the unnecessary plugin has been deleted cool now we will be installing four plugins that is necessary for our website so the four plugins are elementor page builder wp forms essential add-ons and then elementor add-on elements so let's first install our elementor page builder and to get the limiter page builder just go to jimfiredigital.com i will put this pages link in the description from that page under important links here you can see it says download elementor free version just click there now you see elementor starts downloading automatically you will find this elementor zip file inside of your download folder let's now go inside dashboard and from plugins click on add new then click here on upload plugin and let's upload here the file you have just downloaded i mean the elementors zip file then click here on install now now click on activate plugin cool we have successfully installed elementor page builder plugin let's now install our next three plugins so let's now click on add new we can install these three plugins from the wordpress plugin directory so first from this right search field i'm searching here for wp forms here you go click on install now now activate it our wpa forms has been activated let's now install our next plugin so from here plugin click on add new this time here i'm searching for essential add-ons this one essential add-on for elementor click on install now now click on activate let's now do a quick setup actually i want to keep everything default so now here click on next but here we need to do one important thing under the elements make sure you have selected this wp forms so i'm selecting wp forms remember not the wii forms not the ninja form we are selecting the wp forms now let's scroll down click on next again click on next and then finally click on next then click on finish awesome let's now install our last plugin so from here plugin go to add new this time here i'm searching for elementor add-on elements here you go this one elementor add-on elements click on install now let's activate it and here click on skip all right it's activated now to check them all together from plugins click on install plugins make sure you must have installed these four plugins all right the next thing i wanna do i wanna change the theme of our website so to do it from left over on appearance and from there just go to themes you see here by default the 2021 theme is activated but i want to use another theme so from here just click on this big add new theme button and from the search bar here i'm searching for astra here is the extra theme now click here on install then click on activate awesome we have successfully installed the extra theme the next thing we will be creating our page so to create a new page from left over on page from there click on add new as it would be our homepage so here i'm naming it home now from top right corner click on publish click on publish one more time so we have created our home page now from settings we need to set this page as our home page so from left over on settings from there go to reading and then you see your home page displays set it to a static page and homepage let's select the home that we have just created then scroll down and click on save changes awesome now i just wanna do one last thing from under settings just go to permalinks and make sure your permalink is set to the post name option so your all page urls would be more human readable and it's good for search engine optimization alright let's now scroll down and click on save changes alright so we have done all the basic setup now we will start the most fun part of this tutorial now we will be creating our beautiful website using elementor page builder just by drag and drop so first from left go to pages to all pages and here is our home page let's now click here on edit and then click here on this edit with elementor button so right now we are inside elementor page builder here at the top we can see our global header that's coming from the theme also at the bottom we can see our global folder and now in between our header and footer we will be creating our beautiful website using elementor page builder so first let me make you familiar with elementor page builder fundamental let's say if you wanna take a new section for that you need to click on this plus icon then you can select any structure like single column two column three column or any of these i'm selecting a single column structure now here everything you can see inside this blue line this is our section if you want to increase the height of this section you can do that from here let's set the height to minimum height and from here you can increase or decrease the height then if you wanna set any background color then you just need to go under style tab then from here background let's select the background type click on this classic icon then from this color picker you can select any background color from here then inside this section you can see a gray dashed line this is our column now inside this column you can drag and drop any elements or widget so to do that you can just click on this plus icon now from left you can drag any of these elements like heading text editor image video button all of this also there are some elements like form gallery login price list these are not free you will get these elements or widget if you purchase elementor pro i will also put elementor pro purchase link in the description but in this tutorial we will only be using the free widgets now let me give an example if you want to use the heading widget just drag this heading widget inside this column here now if you want to change the text just type inside here here i'm typing jim fahad then let's make the alignment to centered then if you want to do styling with it just go under style tab from here you can change the color to any other color like blue or you can set another color from this color picker and then you can work with its typography from here you can make the font size bigger or smaller you can set the font weight you can make it bolder also you can change the transform let's set it to uppercase also you can change the font family from here you can see there are lots of google fonts available here for example here i'm setting poppins font so here you see the font is instantly set to poppins font now let me give you another example let's say i want to add a button widget underneath this heading so to do that just click on this rubik's cube icon and from here this is the button widget just drag it under this heading widget here now let's first make its alignment to centered and then you can change the button text from here instead of click here i wanted to say contact now then inside this link field you can link this button to any of your other pages or any external website like here i'm linking it to my main website that's jim fahad digital.com then you can do the style for this button then just go under style tab from here if you want to change the buttons background color you can change that from this place let's say i want to change this background color to blue like this and now let me show you another interesting thing like if you want to create another button you don't need to do that from scratch you can just right click over it and if you click on duplicate you can see it's instantly duplicated then you can change its contents from here you can change the url or if you want to style it differently then you can just go under style tab for example if you want to set its color to another color i'm making it a green color also let's change its text color to black color like this and if you change your mind if you don't want this button anymore just right click over it and delete this button it's instantly gone in this way if you want you can create everything from scratch but in this tutorial you don't have to do that because i already have created the whole website for you to get the ready template you just need to go to jim fahad digital.com on that page under important links here you can see download the images plus templates i use in this tutorial from there you will be basically downloading this folder there inside you will find a json file that says portfolio by jim fahad all right now i'm showing you how to insert that inside of your website so i'm going inside elementor page builder let's first delete this section that we have just created for example okay this time click on this folder icon now from top right click on this import template icon now click on select file and here i'm inserting the portfolio by jim fahad the dot json file now click on open so here we can see it says portfolio by jim digital now click on this green insert button click on yes and boom here we have got the whole radio website template now let me show you very quickly how to change all of this let's say if you want to replace this image with your own image just click over this image and from left click on the choose image now from under upload files click on select files now here i'm selecting my image click on open and then click on insert media you see it's instantly inserted now here instead of um x fahd i want to put here my real name and you see it's very simple if you want to change anything just click over it and you can find the option on the left to change the text or images very simple so here just instead of x here i wanna write gym so it's i'm jim fahad and then underneath we can see a beautiful typing text effect just click over it so here on the left we can see the prefix text and it says experienced in and that's basically this yellow text is coming from this place if you want to change it you can put any other text here and then you see some typing animated text it says plugin development rest api wordpress development these texts are basically coming from these so i have set here three wordpress development if you want to change it to any other thing like instead of wordpress development if you wanna set here customization you can do that also if you wanna add more then just click on add item and you can add more string here but i'm happy with these three so i'm deleting the extra one now on the right side we can see some vertical social media icons so if we want to change the links of the social icons just click over it then from left you see facebook twitter youtube linkedin instagram dribble if you want to add more just click here on add items then click on this icon so you can select any of the social media icons like pinterest and click on insert then inside the link field you can put your pinterest link and if you want to delete the pinterest you can just click on this x so in this way you can put your facebook twitter youtube linked in any other social media links all right now let's have a look with these buttons so i want to change the text of this x works button now click on this blue pencil icon now from left instead of x works i want it to say recent works and then inside this link field i actually wanna link this recent works to some inner section of this page so whenever i will click on the recent works button it jumps to our recent work section i will show you shortly how to do that and then inside this hire me now button just click on this blue icon similar like the recent work button you can also link this button to any of the intersection of this page or if you want you can put here your fiverr link or your upwork profile link all right let's now go to the next section of our website you know if you want to change this image you can just click over it and you can change the image from left similarly you can change the title paragraph and button links from left just click over it and you can find the changing option on the left side very easy then underneath we can see some beautiful progress bar if you want to change any of this text or percentage you just need to click over it let's say instead of design if you want to put here html then here title you just need to write here html and if you want to put your html score 90 instead of 70 then here instead of 70 just write 90. you see it's becoming 90 instead of 70. so in this way you can customize all the progress bar the way you want let's now go to the next section here you can put your education work or skills like you can put your university name your past year or you can put your past working place and you know all you need to do just click over it and you can change them from the left bar same for this progress bar just click over it and you can change the percentage from here you can change this text by clicking over it and you can change the text from here all right let's now go to the next section this is the services section and here we have got nice hover effects so let me show you quickly how to change all of these so here first on this card you can see it says ui ux design and we can see a pen icon also we can see a beautiful background image if we hover over on it we can see some text okay now to change everything just click on this blue pencil icon or you can click over any of the space of this card then first go inside the content now see here we have got two tab one is front and one is back so if you want to change this pen icon with any other icon just click over this icon and you can set any of these icons from here but i'm happy with this pen icon then you can change this ui ux text from this place and now have a look if we hover over on it we can see some text if you want to change this text then from left you just need to go under this back now scroll down you can change this text from inside this text editor and now if you wanna change the background image of this card then from left scroll up a bit go under the style tab you see this background image is coming from this place let's replace this image so click over it now go to upload files click on select files i'm selecting this image click on open and then click on insert media you see the background image is instantly changed now let's go to the next section this is the facts section so here you can put all of your achievements like how many projects you have done how many customers do you have and you know changing this is very easy just click over it and you can change all these numbers from here you can change the text from here inside this title field also you can change these icons just clicking over it now let's go to the next section this is the recent work section or this is the portfolio section so here if you have a look we have some filters here like designs if you click on design you can only see the works that's under the design tab and then if you click on web development you can only see the portfolio or works that's under web development you can click on ecommerce so you can only see your e-commerce works and again if you click on all we can see all categories works so if you want to create more categories by your own then from left you just need to click on this filterable controls you see there are three filters or categories one is saying design then web development and e-commerce so these categories are basically coming from this place if you wanna edit them you can edit the name from here so let's say instead of design i wanted to say web design so now we can see it says web design and now if we click on web design you see nothing is showing underneath why is that all right for that you need to understand how this gallery is working so if we now go inside these gallery items here we can see there are one two three four five and six items and that's why we can see here six portfolios and if we hover over on it we can see some text and each of them has its own image so let's now have a look with the first one so here it says design example if we click over it you see the control name is still design but we have changed its filter name to web design to make it work just go under filterable controls and this is the web design one just copy this list item name and again go under the gallery item open the design example this is the first one so here instead of design we need to put the right control name that's web design now have a look if we now click on web design we can see the first item here and then let's say if you want to change this title you can change the title from here so instead of design example i'm writing here design a and then you can change its paragraph text from here so let's just scroll down you can change the text from here also if you want to change this image then just scroll down and from here you can select another image all right now click on all but now i want to make this design example the another one i wanna set its filterable control name so open it now here instead of design i wanna set it to web design so now if we click on web design we can see the two items that we have set the control name to web design now let's click on all so in this way basically you can create more portfolios or more gallery items then if you don't want any of them just click on this x to delete very simple all right let's now go to the next section and this is our beautiful package section so here if you wanna work in hourly basis then you can put your hourly charge here if you wanna work on a project basis then you can put the project rate here then if you are available for monthly basis work you can put your requirements here and you know to change any of these just click over it and you can change them from left side also with these buttons you can link them to your freelancing platform links or you can link them to your contact section that will be also the jump button i will show you shortly how to do that let's now go to the next section this will be the client's testimonial section so you can put here your previous clients reviews to change these with your real client's reviews just click over it then you can change your clients image from here and then if we click inside the testimonial content you can change the real testimonial from this place also you can put your client name from here the client's company name from here and then if we scroll down you can see here is the rating number so if you want to put yourself for start then you can do that from this place but who wants to put four star rating on their portfolio website i think no one so i'm setting it to five alright in this way you can change all of these and let's say if you want to put more client reviews here then you can just duplicate this to duplicate it just click over these six dots right click here and click on duplicate you see here two new client reviews has been added you can just click over it and change their image text rating their name company name all these but for now i don't want it so i'm just clicking on this x to delete it all right now let's scroll down here is our contact section on the left side you can put your address phone number and you know to change it just click over it and from the left side you can change the title from here you can change your phone number from this place also you can change your email address from left side here and you already know about the social links because on the top banner we have got our vertically aligned social media icons it's the same to change it just click on this blue pencil icon then you can change all of your social media links from this place all right now on the right side here i wanna insert a contact form otherwise how anyone can contact with you okay so to create a contact from we need to go back to our wordpress dashboard so to go back to our wordpress dashboard you can just click on this hamburger and click here on exit to dashboard but i don't wanna do that because i wanna use a new tab for opening the wordpress dashboard so to do it i'm just copying the url from the top bar so it's our website name dot com forward slash wp admin let's now open it from a new tab i'm just pasting the url and hit enter i'm doing this because i don't wanna just go back and forth all the time from this place that's why i always love to open the wordpress dashboard tab on a different tab all right so to create our contact form from left just click on this wp forms i mean hover over on it and click on add new now we can create a contact form very easily by clicking here on this simple contact form click here on use template so here we can see we have got the name field email field and the message field this is enough for me but if you wanna add more fields here let's say if you wanna collect the customer's phone number then you can just click on this number you see here is the number field instantly added but i don't want that so i'm clicking on this delete icon click on ok now let's do a bit setup so just go under this settings and then click on the notification so from here you can change just one thing you see it says send to email address by default it's set to your wordpress email address but if you want to change this email address to other email address you can do that that could be your yahoo email address or gmail if you want you can change the email address from this place but i want to keep it the default email address that i'm using for this wordpress website all right now click on this save button to save this contact form now click on this x to exit okay so we have just created this simple contact form now let's go inside elementor page builder and this time before doing anything click on this green update button to save all of our work that we have previously done and then refresh the page all right now let's go to the very bottom of our website so this is our contact section now here we can see a empty contact form just click on this pencil icon from left you can see an option says select form click here and select the simple contact form that we have just created and boom on the right side we can see our contact form field now here i only encounter one simple problem that we cannot see any placeholder nor levels with this input fields so from left just turn on the labels now let's change the labels color so just go under style tab now scroll down and open the labels tab from here the text color let's now set it to white color so we can see all the labels here alright so we are almost done with our website now before showing you how to do the header and footer of our website i want to show you how to create the jump buttons like i said if we click on the recent works that will jump us to the recent work section or the portfolio section of our website so first let's go to the portfolio section or resend to work section so first of all to grab this section click on the six dots of this section go under its advanced tab now here you can see css id here i'm naming it portfolio dash section now let's copy this css id name let's now go to the top of our website click on the recent works button now here inside the link field first i'm putting a hashtag and then i'm pasting the id name that's portfolio section now have a look if we now click on the recent works button that jumps us to the portfolio section in this way you can link any button to the other section of your website so let's say now i wanna link some buttons to the contact section so first let's go to the contact section click on the six dots of this contact section go under advanced tab here we already have a css id that name is contact section just copy the css id then just scroll up a bit now i want to link all these hirami buttons to the contact section so just click on this hirami button now from inside these links i already have linked them but again i'm doing it just hashtag and then paste the css id that contact section so if we now click on this me button you see it jumps us to the contact section cool we're almost done with our website let's now have a look how to customize our footer and also let's go to the top of our website i will also show you how to customize our header on the left we will put our own logo and on the right side i will show you how to create a navigation menu and put that on the right side so to customize our header and footer we need to do that from theme customizer so let's now go to our wordpress dashboard and now from this left menus just hover over on appearance and from there click on customize so right now we are inside our theme customizer so first here we can see our site title and here you can see a blue pencil icon just click on this blue pencil icon now here from left we can upload our own logo but before that we need to create our own logo and to create our own logo we will be using a free logo making tool so let's go to logomecha.com it's logo maker without the e so first let's close this video pop up all right so from left let's first take a text and here i want to write here jf jf stands for jim fahad now you can resize it just by dragging its corner like this and now i want to change its fonts from here so instead of railway let's set it to passion one and then i want to change its color so from this color wheel let's make its color to black now right after this jf text i want to put a square shape not actually square it would be a rectangle so from here click on this shape and i'm selecting this square shape so let's now resize it just by dragging its corner like this and i'm putting it just after the jf text here now i want to make its color to our branding yellow color so here i'm just putting the yellow color code that is ffc nine zero zero now here i wanna take another text so just click on this text here i wanna type digital now let's make its color also black color now let's resize it and then i'm just putting this digital inside this square box here and lastly i wanna just reduce the width of this yellow box so i'm dragging its corner from left like this now let's grab this text and the background yellow color together by dragging over it and let's adjust its position like this now we can make this whole logo bigger just by dragging over it and we can make it bigger just by dragging its corner now from right bottom corner click on this crop icon now i want to crop it from top from bottom from left and also from right and then click on this check mark so we are done now to save this logo from top right corner click on save logo now if you want a very high resolution image then you need to pay them 19 but we don't need that i'm happy with the low resolution file so i'm clicking here no thanks our logo has been downloaded here you will find that on your download folder let's now go inside our theme customizer let's now click here on select logo upload files select files and here is the logo we have just created click on open now click on select click on skip cropping and here we go but i want to make the logo with a bit smaller so from here i'm just setting it with to 120 pixel and also i don't want this title so from here i'm disabling the site title perfect now i wanna create our navigation menu and put that on the right side of this header so first from top let's just go back and go back one more time now let's scroll down and let's now go inside my nose from here i wanna create a new menu so click on create new menu first let's name the menu you can name it anything but i'm naming it main menu and then this one is very important you need to select both the primary menu and also the off canvas menu if you don't select the off canvas menu this menu won't show on the mobile devices so make sure you're selecting both now click on next now let's add the menu items so click on add items and here i will be using the custom links so click on custom links the first item i wanna say it about so i'm writing here about and i wanna link it to our about us section so you may remember how we have created our jump buttons if we now go inside our elementor page builder let's now go to our about section this is our about a section click on the six dots go under its advanced tab so here you can see the css id name is about section so i'm copying the css id now go inside the theme customizer so here the url would be hash then the css id about section let's now click on add to menu so let's create our next menu item it would be services and the url let's now go inside elementor page builder let's now go to the services section let's scroll down this is our services section click on the six dots go under its advanced tab and here the css id is services section copy it go inside theme customizer now url put a hashtag and then paste the css id that services section all right now click on add to menu now in the same way i will create the pricing reviews and contact menu items and only not to make you bored i'm fast forwarding this portion all right we have created all the menu items and i want to show you another thing if you wanna put the contact before the reviews you can just simply drag this above the review section here but i don't want that so i'm putting the contact after the reviews menu item all right so when you are happy with it just click on this publish button to save your work but here i want to do a bit of styling with this menu items so let's click on this blue pencil icon now from left you see we are under the primary menu now go under design so from here just scroll down first instead of blue i wanna make the text color to black color so i'm setting it black and then the hover color we can set it from here so click over it and i want to set the hover color to a yellowish color so from here let's select the yellow color but a bit dark yellow you know so let's now have a look if we now hover over on it you see the dark yellow color here all right now from here let's set the typography the menu font click on this pencil icon first i want to set the font family to the poppins font so i'm selecting poppins then font size let's make it 14 pixel and here text transform i'm making it uppercase also let's set the font weight to medium that's 500 perfect now i want to do the very last thing that's our footer so to customize our footer just go back go back one more time now from here just click on footer builder so now let's scroll down so we can see our food are better from here so first let's change this copyright text to do that from here click on copyright now if you want you can change the whole text from here and you can put your own text but i'm fine with the copyright and then the copyright symbol and here we can see the current year dynamic text that's why we can see here 2021 on 2022 it will be automatically updated as we are using here the dynamic current year and right after the current year here i can put some text by my own so here i'm putting a pipe symbol and let's write here gym for head production all right let's now go under the design tab so first the text color let's set it to white color and now the footer background color so click on this blue pencil icon go under its design tab and from here select the background color i'm making it black color also if you want to add a border color at the top you can do that from here i'm putting here a dark edge color like this alright so when you are happy with all of this just click on this publish button to save your work and then click on this x to exit all right now the very last thing i wanna check it how our website is looking on mobile device and tablet device and you can check that from inside elementor page builder so first from inside elementor page builder just refresh the page so to have a proper look how it's looking on desktop device we can just minimize the bar from left so this is our website is looking right now this is our beautiful banner if we now scroll down here we have got our beautiful about section nice progress bursts let's now scroll down here is our beautiful education work and skill section and here is our services section is looking great let's now go here all the facts is looking great now underneath here is the recent work tab is working perfectly then underneath if we scroll down here we can see our beautiful packages section and then here we have got our client testimonial section now underneath here we have got our beautiful contact form section also if we click on go to top button it goes to our banner section all right let's now expand the elementor builder from left let's now have a look how it's looking on tablet and mobile device so to check it from here just click on the responsive mode icon now let's have a look how it's looking on tablet device click on this tablet device icon so on tablet device everything is looking great the about section go to the next section everything is looking great on the tablet device i really like it all the sections on tablet devices let's now go to the bottom everything is looking great all right let's now go to the mobile device so click on this mobile device icon let's start from top here everything is looking great but we need to remove this side title also from the mobile device we can do that from theme customizer all right i'm doing it very shortly but other than that everything is looking great on mobile device all the sections the education section let's go to bottom the services section everything is looking great let's now scroll down the work section this is the portfolios and here is the pricing the client's testimonial section and here is the contact form everything is looking great let's now go to top and like i said we need to fix this from the theme customizer so again just go back to our theme customizer from left over on appearance and go to customize now again click on this blue pencil icon so you see we have disabled the display site title from here but if we go to the tablet view we also need to disable it from tablet device and also let's go to mobile device we need to disable that from mobile device as well right now everything is looking great let's hide this bottom bar right now it's looking super clean also if we click on this hamburger icon we can see the beautiful drop down menu alright and don't forget to click on this publish button to save our work so we have created our beautiful portfolio website within one hour now please just go ahead and create your own portfolio website i believe you can land your very first client very soon if you like it please give this video a big thumb up and don't forget to subscribe this youtube channel also press on that bell notification icon to get notified before anyone whenever i will upload a new video on this youtube channel and if you want me to help you on your wordpress project or elementor project then you can contact me through my website that's jim fahad digital.com i will try my best to help you personally once again thank you so much for watching this whole tutorial i will see you on the next video for now bye bye

Channel: Jim Fahad Digital

Views: 16,347

Keywords: how to make a portfolio website, WordPress Elementor Portfolio Tutorial, wordpress portfolio website, portfolio website wordpress elementor, wordpress portfolio elementor, portfolio website, elementor portfolio website, How to make a personal portfolio website, make a portfolio website with wordpress, personal portfolio website wordpress, how to make a portfolio for freelancing, how to make portfolio website in wordpress free, create a portfolio website using elementor, WordPress

Id: H5g6TgswX7E

Length: 55min 0sec (3300 seconds)

Published: Thu Sep 16 2021