Responsive WordPress Portfolio Website in Elementor 2022 (Step by Step FREE Tutorial for Beginners)

before starting this tutorial i will ask you three simple questions first do you want to create a very unique portfolio website instead of just a basic and boring website so clients cannot wait to hire you secondly do you want to create your beautiful website by using almost all free plugins free themes and free resources and thirdly do you want to create your amazing website without any coding knowledge just by drag and drop if the three answers are yes then this is the perfect tutorial for you in this tutorial i will show you how to create an amazing and unique personal portfolio website like this so first i will show you how to create this beautiful cover image and then how to create this amazing personal details area so here you can post your own image your name your title all your social media links and on the right side some quick contact information like your email address your phone number then some other basic stuff like your birthday or location then here underneath we will have our navigation bar on the left then the main content section on the right side and of course you can add more navigation menus as many as you want then on the right side i will show you how to put your own image then all the profile details information then how to put this download my cv button so whenever anyone clicks on this button your cv will start downloading instantly then underneath i will show you how to create this services area so you can push your all the services with the icons the service names and service details then underneath you will have your all clients logos and you see this is a beautiful slider so people can slide through the slider and then from the left navigation bar if we go under resume here you can push your all education quality your job experience so people can know a lot better about you then underneath that we will have the skill section here you can pull your all the major skills with the percentage and then if we now go under the work section here we will have our beautiful filterable gallery like if we hover over on it we can see the details of the each work or each portfolio also you may have your more works or more portfolios so people can click here on this load more button so here more portfolios or works will appear then if anyone clicks on this single work they can see the full image and also navigate through these arrows all right then i will show you how to create these filters at the top so whenever anyone click on this app they can only see the portfolios that under this app category if someone clicks on development they can only see these portfolios that under development category and again if they click on all they can again see all of your portfolios together and then if we now click on this contact navigation menu here again you can put your name some of the details if you want again your social media handles and on the right side i will show you how to create a fully functioning contact form so people can communicate with you using this contact form all right also at the bottom of our website here i will show you how to create these folders so you can put your own image or your logo here then underneath you can also put some copyright text and then i will also show you how to make this website 100 responsive for mobile device and tablet device so here you see on the mobile device the website is looking super great and also people can easily navigate through the navigation bar that's fixed at the bottom of the mobile device so now from bottom if anyone clicks on this resume they can just see the resume area they can also scroll through this similarly if they click on this contact button here they can see this contact form it's really super handy can you believe we will be creating this amazing website using a free theme a free page builder and all free resources and you don't need to know a single line of coding everything we will create just by drag and drop now before moving forward let me share my personal experience with you i'm a professional web developer i have done nearly 1200 plus freelance projects so many of you guys asked me how do i land so many freelance projects where others are suffering to get a single job the secret is i have had my very unique looking portfolio website from day one even before applying to any job so now you know my secret you need to create a creative portfolio website before anything and now if you follow this tutorial step by step after the end of this tutorial you will have this unique looking portfolio website of your own and then just wait to get hired by your client i'm really really excited to show you how to create this amazing website step by step if you are excited like me please give this video a big thumb up and subscribe to this youtube channel it would mean the world to me so without further ado let's jump into it 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 time stamp 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 ok 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 jim fahad the digital.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 domain apple.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 dot 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's 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 want to 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 cents 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're 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 popups because we don't need any of that cool we have successfully registered our domain name and web hosting [Music] 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 for production and 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 this 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 give 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 dash 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 now we are inside wordpress admin panel or wordpress dashboard but first of all don't get overwhelmed with all of this i will make you familiar with all these options like this posts media pages appearance plugins all of this and personally i love to work in a cleaning environment so here this all looks super messy right now so first of all i wanna clean up the whole wordpress dashboard and during our wordpress installation there are lots of unnecessary things has been installed so i wanna disable all of them so here first thing i wanna disable all the unnecessary plugins to do that from left if we hover over on plugins from there let's go to installed plugins so here we can see tons of plugins but we don't need any of them by the way if you wonder what is a wordpress plugin wordpress plugin is like an extra add-on or extra app like thing that extends the functionality of your wordpress website of course we will be using some wordpress plugin but we don't need any of them so let's delete them you can select these plugins one by one like this or you can select all of them by clicking here on this plugin let's click here now from bulk action first i'm clicking on deactivate now click on apply and then select them all together by clicking here and this time from bulk action let's now click on delete and click on apply the browser popup says i'm sure or not yes i'm sure so click on ok so here our all unnecessary plugin has been deleted awesome if we now go back to our wordpress dashboard so from top click on dashboard you see it now looks much cleaner but i wanna make it more cleaner so we can just delete this all notifications so i'm closing it by clicking on this x also let's minimize this one this one this one this one and this one you see it now looks much cleaner okay the next thing i wanna change that is a password you may remember that was abc123 so to change the password from left if we hover on users from there just go to profile then just scroll down at the very bottom of this screen so here under account management you see new password now click here on set new password you can keep this random generated password but i wanna create a password by my own so first of all i'm clicking here on hide then i'm typing here my password and now it says medium but if you want you can create more stronger password but i'm happy with it so just scroll down and click here on update profile all right now before moving forward i want to make you familiar with another thing like whatever you can see here on this screen or if we click on this dashboard everything you can see inside this dashboard only we can access here because we are the admin of this wordpress website now from top if we hover over on our site name you see it says visit site i'm opening this visit site from a new tab so let's go to this new tab this is the front end of our website so this is the website the whole world can see basically this is our real website and this is the dashboard of our website only we can access here okay now from our wordpress dashboard i want to create our first page now to create a page from left over on pages from there click on all pages here we can see some default pages i have not created this page if you don't wanna keep this page you can just click here on trash or here click on this trash or leave it like it is now to create a new page from top click here on add new alright so from here we can create our new page but you may see another screen here like you may not see this bar on the left so you can enable this bar or disable this bar from here on the right corner if we click on these three dots from here you can turn on this fully screen mode or you can turn it off by clicking here so i want to keep it like this so i can always back and forth with these menu items okay so first of all here i want to create our home page and i wanna name it awesome home so here i'm typing awesome home now from top right click on publish and then click on publish one more time so we have created our home page now let's again go to the front end or of our real website right now it's looking like it but i wanna display here our homepage that we have just created because by default wordpress shows this page that says hello world and some text i don't want that i wanna display here the page we have just created so to do it just go back to wordpress dashboard from here if we hover over on settings from there now click on reading then from top your homepage displays instead of your latest post i want to select a static page then the home page i want to select the awesome home that we have just created now from bottom click on save changes if we now go to our website and refresh this page yeah we can see this is our new home page i know it's still super blend is still super simple but at least we can understand this is the home page we can see here now one last thing i want to do from our wordpress dashboard that is from the settings to the permalinks click on permalinks now from here i want to set the permalink to post name always select your permalink to this option that says post name is good for search engine optimization now scroll down and click on save changes all right if we now go to our real website right now you see it's looking like it and first of all i wanna change the look and feel of our website to do that we need to change our wordpress theme so let's go to wordpress dashboard from the left if we hover over on appearance and click on themes here we can see some themes these are actually wordpress default themes but personally i don't wanna use any of these themes so here from bottom i'm clicking here on this big add new theme button and here you can see a lot of free themes and like i said themes are basically the look and feel of your website so from here if i select this theme then our website's look and feel will look like this if i select this one our website will look like this but here i'm looking for another theme that says astra so from this search bar i'm searching here extra here this one i was looking for it now from here click on install and then click on activate so we have successfully installed our extra theme if we now go to our website or front end of our website and refresh the page yep our theme has been changed successfully i know it's still looking super bland super boring but we will be creating our beautiful website out of it all right now i wanna install our page builder plugin you know we will be using elementor page builder so to get elementor page builders free version we can just go to jim fahad digital.com i will put this pages link in the description so you will get all the necessary links from this page so here on this page under important links just click here on get elementor free version now from this page if we click here it says try the free version i'm clicking here now you just need to create an account it's completely free you just need to put your email address and password here but i already have a free account so i'm clicking here on login so let's log in here and now elementor is asking for some questions or service but i don't wanna do that so from top right corner i'm clicking on skip now click on escape one more time by the way elementor has its own hosting service and their pro version if you want you can buy the pro version or they are hosting if you want but for now i don't want any of them so just scroll down and here you see it is looking for more options from here we have found a link it says basic version for free so click here on basic version and at the bottom it says alternatively if you prefer to install elementor manually you can download it here so just simply click here so eliminator free version started downloading here so just go to your download folder or go to the folder where you usually get your download files you will get a zip file so basically after downloading you will get this elementor zip file okay now let's close this and go inside our wordpress dashboard now from here from the left hover over on plugins from there click on add new then from top click on upload plugin then here this file you have just downloaded so i'm dragging this zip file here then click on install now and then click here on activate plugin all right so we have successfully installed and activated elementor page builder now i wanna activate and install two other plugins so to install another plugin from left to the plugins from here click on add new so here i'm searching for another plugin that says essential add-ons this one it says essential add-ons for elementor let's now click on install now and click on activate and let's now configure this plugin is very simple just click here on next and then these all are the elements that we are getting with this plugin so keep everything the way it is but only from here under this form styler elements just checked this one it says wp forms because we will be using this wp forms plugin now scroll down click on next and we won't be using this templately so just ignore it click here on next also keep everything like the way it is click on next and finally click on finish so it's all done let's now install our next plugin so from here plugins click on add new this time i'm searching for another plugin that says wp forms and here you go it says contact form by wp firms let's now click on install now then click on activate all right we have successfully installed the wp forms plugin we don't need to do anything with this now only to double confirming from plugins if we now click on install the plugins now we have this three plugin installed one is elementor another one is essential add-ons for elementor and the third one is wp from slide so before moving forward make sure you have installed these three plugins otherwise some of the features may not work so we're now almost ready to go here is the fun part begin we will start creating our website by using the elementor page builder just by drag and drop so you know we already have created our home page to access that page from here pages now go to all pages so here is our awesome home page let's now click here on edit and then click on this button it says edit with elementor so right now we are inside elementor page builder here at the top that you can see this is our header and at the bottom this is our footer this header and footer basically is coming from the theme you know we have installed the astra theme so this header and footer is coming from extra theme but for this website we don't need this header and footer because you already have seen in the preview this is a different type of creative website so we don't use this header and folder in this particular website so to disable this header and folder we just need to go to the very bottom of this page here you can see a gear icon it says settings just click here and then from here it says page layout from the page layout i'm selecting elementor canvas just wait a bit so it's loading the elementor canvas field and here we go we don't have the header and footer right now we have the elementor canvas only now to save it just click here on this green update button okay now let me introduce with the elementor page builder it's very very easy and very user friendly like here on the left you can see everything these all are elemental elements or elementor widgets there are lots of elementor elements or widgets like here you can see this is the heading element or heading widget then here is the image widget here is the text editor widget here is the button video a lots of widget here also if you scroll down here you can see some pro widgets because you know elementor has a pro version i will also put elementor pro version link in the description if you want to use these widgets or elements then you need to purchase the elementor pro version but for this particular tutorial i won't be using eliminator pro i will only be using the free widgets or free elements okay now before doing anything i just want to make you super comfortable with elementor page builder it's really very easy you just need to understand three major things if you understand these three major things you can literally create anything using elementor page builder so the three things are the section column and elements or widgets whenever we will be creating anything first of all we need to take a section so the most outer thing is the section then inside of a section we can take multiple columns if you want you can take one single column or two column three column the way you want and then inside of a column you can take multiple elements or multiple widgets now let me show you that in practical so let's say first of all i wanna take a section so to take a section first we need to click on this red plus icon and then you can select any of these structures like single column structure two column three column four column structure or any of these structures now only to giving you an example i'm selecting this single column structure so here everything you can see within this blue line this is our section now from left if you want to increase the height of this section you can do that from here so from height i'm selecting it to minimum height now you can control the height just by dragging this bar to the right you see the height is started increasing if you drag this bar to the left the height is decreasing like this so everything you can see within this blue line this is our section and then if you notice carefully within this gray dashed line this is our column and within this column we can take one or multiple widgets or elements so to access all the elements from top you just need to click here on this rubik's cube look like icon now from here for example i'm dragging a heading widget here inside of this column here now if you want to change this text you can just triple click over this text or you can change the text from left here for example i'm typing jim fahad digital now if you wanna make it to centered aligned you can do that from here let's make the alignment to centered now if you wanna do some styling with this heading you can do that from here from top just click on this style tab now let's say first of all if you want to change the color of this text you can do that from this color picker just click over it then you can select any other color like this or you can change to other colors like here if i drag this bar so for example if you take this purple or pink like color then you can play with its typography so from here just click on this pencil icon first of all you can change the font family if we click on this font family you can see there are hundreds of google fonts available if you select on this font you see the font has been changed instantly also from here you can search for any font so i'm typing here popping spawn because poppins font is one of my favorite fonts i'm selecting poppins then you can increase the font size just by dragging this bar to the right you can decrease it like this then you can play with the font weight you can make it bolder you can make it thinner for now let's make it really bold 900 then you can play with the transform you can make it a lowercase or all uppercase then you can play with its style like normal italic or oblique also if you want you can play with the decoration like underline or over line but i want to keep it default also if you want you can play with the letter spacing you can increase the letter spacing just by dragging this bar in this way all right now let's say if you want to work with the column then all you need to do you just need to click here on this column icon so i'm clicking here so similar like this heading widget you will also find this three option it says layout then style and then the advanced option okay so as we have selected this column so if we now go under this columns style tab now from here if you want you can change the background color of this column so to do it from here background type just click on this pencil icon now from this color picker just click over it you can make it any other color like red green blue any color you want i'm making it black for now all right let's not talk about spacing let's say if you want to add some breathing space around this column then you can do that under this advanced tab so for example i want to add some spacing around this column so from here we can add some padding so i'm adding here 30 pixels of padding you see here at the top bottom left and right 30 pixel space has been added and then let's say if you wanna add some white space at the left and right you can do that by using the margin option so here i'm adding some margin for example i'm putting here the value 250 pixel so right now 50 pixel margin value has been added at the top right bottom and left but let's say if you wanna only apply the margin on the left and right not on top and bottom then from here first of all you need to click on this unlink button now i just wanna remove the margin from top so i'm making it zero also from bottom i'm making it zero so now only on the left and right 50 pixel margin has been added not only with the column you can do the same thing with this heading widget or any other widget so whenever you want to do any work with any column you just need to click on this column icon whenever you want to work with any widget or element then you need to click on this blue pencil icon now let's say i wanna also add some space at the top and bottom of this heading widget then just go to its advanced tab then from here first of all i'm unlinking the padding now only at the top i'm adding 20 pixel of padding and on the bottom i'm adding 20 pixel of padding it's simple like this okay now underneath this heading if i want to add a button all you need to do just click here on this rubik's cube icon and from here um adding this button widget so just drag this button and drop it underneath this heading widget here so if we now want to change the text of this button you can do that from here so instead of click here here i'm writing see more then if you wanna make it aligned you can just set the alignment to centered then if you wanna link it to any other website you can just put the url here let's say i wanna link it to my main website so here i'm typing https then my website name jim fahad digital.com so if we now click on this button it will take us to the gym for thedigital.com okay now i wanna do some styling with this button so to do it just go under style tab from here if you want to change the color of this button then click on this color picker for example i just want to make these buttons color to white so i'm dragging it to the white color and the button text color i i can change it from here so from here i'm making the button text color to black you see how easily we can do this complex thing using elementor page builder very very easily okay now let me show you another interesting thing let's say if you want to create another heading in between this main heading and this button then you know you can just click on this rubik's cube icon and you can drag a heading widget here but also there is another way you can just right click over this heading and click on duplicate you see it's instantly duplicated here then if you want you can change its style a bit so i'm clicking here now let's go under its style tab let's say i wanna change its color to white so i'm making its color white also i wanna change its typography so i'm making the font size too smaller also it's style i'm making it's normal then if you wanna change the text from under content here we can say it based service provider like this and if you don't want that just right click here again and click on this delete to delete the heading all right now let me show you another cool thing let's say if you wanna add a background image with this section all you need to do just select this section by clicking on the six dots so right now the section has been selected now from the left bar go under style tab from here click on this background type i mean click on this classic icon then you know from this color picker you can change this sections background color to any other color like this but this time instead of this color i want to add a background image so from here click on this choose image then here you can upload any image from your computer so i'm clicking here on select files by the way you will get all the images and some sections templates from the description link because in the description i will provide you all of this so after downloading you will basically get this download folder and inside this download folder you will get two more folder one says images and another says templates okay for now i'm going inside this images folder and just take a random image this one click on open now click here on insert media and here we can see the background image here also if you want to resize the image you can do that from here so here position i'm making it sender sender or if you want you can make it to cinderlift or center right but for now i'm keeping it center center then the attachment let's keep it scroll then repeat let's set it no repeat and here the size i'm making it cover and you see it's already looking great now just let me give you the summary of the whole process so whenever you want to do anything with any elements or widgets you just need to select that particular widget so for example i'm selecting this heading widget then you will get these three tabs one is advanced that is responsible for this spacing then here is the style tab you can do all the typography step from here and you can change the main content from under this content tab then if you wanna work with any column then you just need to click on this column icon then you will also find the advanced style and the layout tab then if you wanna work with the section you just need to click here on the six dots then you will also find the style advanced and layout tab you can change everything from that place it's really such simple so i made this section only to give you the example but now we will be creating our website from scratch so for now i'm deleting this section by clicking on this x let's now delete by clicking here on this x icon now i will start to make this beautiful website this creative website all step by step by using elementor page builder but here let's say if you don't wanna create everything step by step if you just wanna make your website live instantly you can also do that of course i will show you how to create this creative website step by step but i know some of you want to create your website really really fast so if you are one of them then i have a good news for you you can simply just go to the description link on this page here under important links you will find a link it says purchase meta folio template just click there so here you can purchase the whole template that we are going to create in this tutorial and you see it's only nine dollar if you purchase this template basically you will get this json file so after getting this json file after purchasing all you need to do you just need to go inside elementor page builder then from here click on this folder icon now from top right corner click on this import template icon and then the file you have got after purchasing the template you just need to drag this json file inside of this and after that just click on the select file button and boom you don't need to do any other thing you don't need to follow this whole tutorial your whole website will become like this then all you need to do you just need to change this name because of course your name is not a jinfad you need to put your real name you need to put your ual email address your all other informations and those are very easy you just need to click over it and you can change it to your own text you can replace this image with your own image you can change everything from that template i made this template because previously i have made so many step-by-step tutorials but i have received some comments some of you guys don't want to follow the whole tutorial you just want to get the template and want to make your website live instantly so this is for them but now i want to create the website from scratch everything step by step alright so let's now start creating our website from scratch so here if we have a look on the preview website first we will create this top banner with this cover photo then we will be creating this section this section will have this image all the social media icons your name your title then all this information on the right side all right so let's do it and now before starting anything i just wanna do some global settings because it will make your life more easier and this is always the good practice okay to make that global settings first here i just wanna take some dummy heading widget so first of all here i'm dragging a hitting widget then i'm just duplicating this heading widget couple more time so right click here click on duplicate right click here click on duplicate and i want to duplicate it one more time if you think hey jim what are you doing just stay with me this will make your life more easier during the creation of the website okay so here the first heading i just wanna keep it as heading two that's h2 so here if you have a look it says html tag i wanna keep it as h2 then here is the second heading i wanna set it as h3 then here is the third heading i'm setting it as h4 and here is the last one i'm setting it as h5 so here we have got our h2 three four and five also let's now click on this rubik's cube icon here i wanna drag and text editor widget here underneath this heading so we can also have a look how the default text will look okay for now click on this green update button so we can see all the changes live here now let's do the global settings first from the left click on this hamburger icon and from here click on site settings okay so from here first i wanna set some global colors so each time we don't have to pick the colors manually we can get the colors from these global colors so now click on global colors now here keep the primary color the way it is i want to change the secondary color so open the color picker let's make the secondary color hash 8888 and then here is the text color i'm making the text color to hash 3333 and then here is the accent color i'm making the accent color to hash 4 ff014f all right now i wanna add more colors so to do it from here click on add color now this one i want to name it body color and i'm selecting the body color to hash e c f 0 f 3 and then i wanna take another color so click on add color i want to name this color to black actually it won't be black because i wanna add some opacity with it so i'm naming it black opacity so we can easily remember this color and then from the color picker first of all i'm making this color to black and then i wanna make it a bit transparent so i'm dragging this bottom bar to the very left i wanna make it more transparent so i'm dragging it more on the left okay let's keep it like this now click outside and then to save it click on update okay now from top let's now go back and then i wanna set some typography as global typography now click on typography but before doing anything with the typography we need to change the settings otherwise it won't work to change the elementor default settings you can just simply click here it's a link it says settings page but for some reason if you don't find it here you can just go back to your wordpress dashboard then from left if we hover over on elementor from there click on settings now from here you see here's two options it says disable default colors i'm checking it also disable default fonts i'm also checking it now click on save changes all right now let's go back to inside elementor page builder and remember we have changed the setting from wordpress dashboard now we are inside elementor dashboard so to get that changes we need to refresh this page so let's refresh the page i mean refresh the elementor page builder all right already we can see the changes because we have disabled the default fonts and default typography now i want to add my own typography as default typography so again from here click on this hamburger icon click on site settings you know we have set the global colors so we don't need to do with this just go back and now click on typography so here first of all i want to change the global body color so you can change the text color from this color picker but you know we have set some global colors so we don't need to take the color from this color picker we can just simply click on this globe icon it means it's global color so i'm clicking here on this globe icon and from here as the default body color i'm setting this text color then let's set the default typography from here click on this pencil icon first i wanna set the font family to poppins font from here so you see here all the font is now becoming the poppins font this is the beauty of global settings also i want to set the global font weight to 400. all right now click outside and then from here i want to set the global link color so from here set the global link color by clicking on this globe icon all of the links of this website will become this accent color that we have set from the global color so i'm setting the accent and now scroll down we won't be using h1 anywhere we will be using h2 3 4 and 5. so let's now start with h2 first of all i wanna change the h2 color to the global text color and then the typography i just wanna make its weight to 600. you see as i have changed the global h2 settings from here we can see it on action on the right side here by the way if you don't understand it yet just stay with me you will be amazed how it will make your life so much easier all right now let's do the same with the h3 so h3 i'm setting its color to global text color and then from the typography i wanna make its font size to 20 pixel then the font weight to 600 all right let's now go to the h4 i wanna make h force color to the accent color that's the reddish color and then from typography i'm making its size to 14 pixel then font weight i'm making it 500 then transform i want to make it all uppercase and then from here later spacing i'm making it one perfect now let's go to h5 i want to make h5 color to global secondary color and the typography i'm making the font size to 14 pixel and font weight to 400 perfect and all the paragraphs of our website will get the default body color you see this is a paragraph i have added a text editor widget so it's getting the color from this global body color only to giving you example from text color if i set it to accent color you see it's becoming this reddish color but i don't want that i want to set the default body color to this hash 3333 that's the global text color all right we are done with all the global settings now to save it just click here on this update button now from top click on this x so we have set all the global typography now we can remove all of this because you know we don't need it but now whenever we will be using any h4 tag that will automatically become this layout i mean this color this is spacing like this if we use any h3 each time we don't have to put this color this font size individually it will get this typography from global settings all right our all global settings are done so we can now start creating our beautiful website from scratch so let's now delete this example headings so i'm deleting this whole column by clicking on this x all right so like the example website that i have previously built let's first create this top banner or top cover area so to do it first we need to take a new section and you know to take a new section we just need to click here on this plus icon and for the top cover or banner area i'm taking this single column structure now first i'm making the content width to full width then the height let's set it to minimum height and i'm making its height to pixel also let's turn this stretch section option so i'm turning it on now let's go under style tab from here i wanna add the background image so click here on this pencil icon and click on image then like i said you will get all the images that i will be using in this tutorial on this page so under important links if we click here on download the images plus templates i use in this tutorial you will get all the images alright so from here click on upload files now click on select files i'm selecting this image now click on open then click on insert media now let's set the position from here so first of all i'm making the position to center center attachment to scroll then repeat to no repeat and size i'm making it cover and then i wanna create these profile banner section like it will have one image then here is the name then the title and here's the social media links and on the right side here we'll have some personal details alright so let's do it and you know first we need to take another section so click here on this plus icon and this time i will be taking this two column structure now here first i want to make the column gap to no gap now go under style tab because i want to give it a background color so from here background type this time you know we have set some global colors so from here i'm selecting this body color and with this section i wanna add some padding at the bottom so just go under advanced tab now unbind the padding only on the bottom i'm adding two not two 20 pixel of padding all right so this is our left column and this is our right column let's first start with the left column so i want to select the left column to select it click on this edit column icon first i want to make its background color to white color to do it from under its style tab i'm making the background type to classic and let's set its color to white color so i'm dragging this color picker to the very top and then if we have a look on the example website you see their corners around at this corner and this corner so the top left and bottom left corner has rounded here so here to make it happen i will be adding some border radius so now from under the style tab here open the border and bind the border here at the top and bottom i wanna add 14 pixel of border radius so top and bottom i'm adding 14 pixel of border radius okay now inside this left column i wanna divide it into two column so how can we do that there is a simple way i wanna take an inner section inside of this column simply you can just click on this rubik's cube icon or we can simply click on this plus icon here i'm dragging an inner section widget here and i'm making this inner sections vertical align to top then the next thing i wanna add some spacing around this whole inner section and you know to add the padding we can just simply go under advanced tab and from here i'm adding 30 pixel of padding all around this inner section then first within this left column i want to insert an image so simply click on this plus icon and here i'm dragging this image widget here and i want to make the images alignment to right align so i'm clicking here on right okay so first let's select the image from here go to upload files select files let's select this image click on open and click on insert media and now i wanna give this image a width we can do that from under this style tab here by default the width value is in percentage but i wanna make it in pixel and let's give its width to 200 pixel now i wanna add some border with this image so to do it from here let's select the border type to solid then border width to 6 pixel and here i'm making the border color from this global color to this body color now i want to make this image's corner rounded so you know to do it we can add border radius so from here i'm adding border radius 18 pixel and then the last thing with this image i wanna make this image pushed to the top so to do that we need to apply some negative margin here so go under this images advanced tab and bind the margin so here if we just give it to 20 pixel margin at the top you see there is some space creating at the top but i want it to push to the top that's why we need to apply some negative margin so first let's set it to 0 and if we press here on this down arrow you see it's now generating the negative value here so i want to make it to minus 122 pixel all right now within this right column i wanna add the name and the subtitle and the social media icons so first click on this plus icon here i'm dragging and hitting widget inside of this right column now i want it to say my name that's jim fahad and underneath this heading i wanna put my title so you know we can just simply duplicate it but before that i wanna do one simple thing you see each time if we want to do some action we need to right click here and then we can duplicate or we get other options but there is a shortcut way to do that so just click on this hamburger icon click on user preferences and turn on the editing handle so i'm turning it on now have a look if we now hover over on this there are these options available on hover so from here i'm duplicating it by clicking on this duplicate icon now here instead of jim fahad i wanted to say i'm a designer but now i wanna make a different style with it so governor style tab open the typography first i'm making its size to 18 pixel then font weight to 400 also i wanna make its position pushed a bit top so again i'm applying here some negative margin at the top now go under advanced tab and bind the margin and here i'm adding negative 5 pixel of margin all right now underneath this i'm a designer i wanna put some social icons so from here let's click on this rubik's cube icon and here i'm searching for social icons here you go this one i'm dragging these social icons underneath the secondary heading here okay so here you can see the social icons like facebook twitter youtube let's just open this one facebook so here if you want you can change this icon with any other icon and inside this link field you will put your facebook page url and if you open that twitter then you can put your twitter handle url here if we open the youtube you can put your youtube channel link here like this also let's say if you want to add more social media links then you just need to click here on add item then from here you can select the icon so i'm clicking here let's say if you want to add here your skype id then just click on skype and click on insert and inside this link you can put your skype handle name but for now i don't want that so i'm clicking on this x to delete it okay so first from here shape instead of rounded i'm making it square and the alignment let's set it to left aligned now i wanna do some style with it so go under style tab first instead of official color because by default you see it's set to official color that's why we can see the facebook color with facebook logo or facebook icon we can see the youtube color here but instead of that i wanna select the custom color so here the primary color i can easily pick any color from here if you want you can do that but as i already have set some global color i wanna select the color from here from this globe icon i'm selecting this body color and this secondary color to the secondary color that's the hash eight eight eight eight eight eight then if you want you can play with this spacing like you can increase the spacing in between you can decrease it from here but i wanna keep it to eight then i wanna add some border with each of these social icons so we can do that very easily from here border type to solid oops border type to solid then border with one pixel and the border color let's set another global color so i'm selecting this time black opacity and a bit of a border radius maybe four pixel would look great okay now if we hover over on this social icons you see nothing happens we can also do that from here here you can see the option for icon hover let's open it first the primary hoover color i want to set it to the accent color this one now if we have a look if you hover over on it you see it's becoming this reddish color also i wanna change the hoover border color to the accent color and the secondary color i wanna change it to pure white color now have a look if we hover over on it it looks pretty cool okay and if you wanna see it in action you can also see that from inside elementor page builder you can minimize the bar i'm in the elementor bar from here just clicking on this arrow icon so right now it's looking like it but i think here i have done a mistake like you see we wanted to make the corners rounded this corner and this corner but by mistake i made this corner and the right bottom corner rounded so let's fix it very quickly so we have applied the rounded corners on the column level so select this column go to its border so let's make the bottom radius to zero but the left radius let's make it 14 so if we minimize the bar here we can see these both corners are now rounded all right let's now expand it and here i think we can add some space at the top of this social icons so select this social icon widget go under its advanced tab and bind the margin and only at the top i'm adding here 15 pixel of margin so i'm pretty happy with it let's now start working with this right column so similar like the left column let's select the right column by clicking on this column icon go under each style tab because i want to also make its color to white color so from here i'm making its color to white then with this column i want to add some border radius at the right top and bottom so from here open the border and bind the border radius this time with the right and bottom i'm adding 14 pixel of border radius then i also wanna add some padding with this column so let's just go under its advanced tab unbind the padding only at the top i'm adding a 30 pixel and at the bottom i'm adding 30 pixel of padding all right now click on this rubik's cube icon and here inside this right column again i'm dragging an inner section to divide it into two columns and with this intersection i'm making the vertical align to middle then inside of this left column click on this plus icon first here i'm dragging and heading widget here now i want it to say email and here the html tag i want to make it h5 then underneath this heading widget let's click on this rubik's cube icon and here i'm dragging a text editor widget underneath this heading widget here now i will be putting a fake email address of mine that jim at dot example.com okay so i wanna make its font size a bit bigger so from here typography click on this pencil icon i'm making the font size to 18 pixel and weight to 400. also i want to add some negative margin so the heading and this text will be more closer so go under advanced tab from here unbind the margin at the top i'm adding minus 20 pixel and at the bottom i'm adding minus 30 pixel perfect we can now just simply duplicate this heading and this paragraph and change the text with other text so from here i'm simply just duplicating this one also let's duplicate this paragraph and now simply i'm just dragging this duplicated heading underneath this here now here instead of email i want it to say phone and here again i will be adding a fake phone number of course this is not my real phone number so just a random number like this and then now i just want to duplicate the same thing on the right column but there is a simpler way to do that we can simply duplicate this column just to hover over on it and duplicate this column and delete the empty column on the right side so hover over on it and delete the empty column now here just replace this text with something like birthday and here i'm putting another fake birthday that's 21st january and here i'm putting a location so here i'm writing meerpoor dhaka all right so far it looks great but i think we need to do some spacing work so let's select this inner section here now i wanna add some padding all around with this inner section so go under advanced tab from here i'm adding 30 pixel of padding all right now i wanna apply a little trick here like if we minimize it you see if we want to look them separate then we should add a vertical line here so to achieve that let's open it select this inner section and go under its style tab i just wanna add a border only at the left so from here open the border first border type to solid and here this is the main tricky thing first unbind the width only at the left i'm adding one pixel of border with and then here i want to add a very light color border color so from the global color i'm selecting the body color so if we now minimize it we can see it's looking great okay now as you have seen on the demo website this whole profile area i wanna make it pushed a bit top place in this area so to achieve it i wanna apply some negative margin with this column and this column so let's select this column go under its advanced tab and bind the margin here at the top i'm adding minus 115 pixel same with this column select this column go under advanced tab unbind the margin and here i'm adding negative 115 pixel and finally it makes that beautiful illusion that it's over the top cover area how cool is that all right now before creating the next sections or next area i want to make sure it's looking also great on the tablet device and mobile device so it's time to do the responsive design okay so to check how our website is looking on mobile device and tablet device we can simply click here on this responsive mode icon first i wanna check how it's looking on tablet device so from top let's click on this tablet icon so this is the tablet view of our website we need to fix it a bit and here i think one thing will make you confused like if we select this one you actually get confused which one is the column for what so to clarify the confusion there is a very easy way you can always use the navigator so to open the navigator from bottom left you see there is a navigator option you can simply click here or you can just right click anywhere of this page and then click on navigator so here you see this is our first section and this is basically this cover area and underneath that this is our second section so to make you understand first of all i'm closing all of them so you will understand it properly so let's minimize this one minimize this one minimize this inner section also minimize it minimize this one minimize this intersection also minimize this column so here have a look this is our section basically this is the whole section here then inside this section we have two columns that's why we can see here this is our left column and this is our right column then inside the left column if we open it here we have taken an inner section inside that inner section we have two more columns and here inside the left column we have taken an image widget this is this and inside the right column here we have taken an heading that is jim fahad then there is another heading that is i'm a designer and here is the social icons so first of all i wanna select the left inner section so i'm selecting this inner section on the tablet device i wanna reduce its padding because on the tablet device we don't need this much space around it so here instead of 30 pixel only on the tablet device i'm making a 10 pixel you see here after the padding there is a little tiny tablet icon so this 10 pixel will only be applied on the tablet devices the desktop heading will remain the same so this is only for the tablet device so now inside the left column we have our image this image if you cannot select the image from here on the tablet device i mean on the tablet view then you can easily select the image from the navigator so i'm selecting the image because on the tablet device i don't want it to push that much top so for the tablet device let's unbind the margin here and at the top i wanna only add negative 70 pixel of margin like this and then i want to make these social icons a bit smaller on tablet device only so from navigator let's select the social icons we did this one so i'm selecting this social icon widget now go under its style tab from here i want to reduce its size only on tablet device so from here i'm making their size to 20. right now this looks perfect on tablet device all right by the way you can also drag this navigator anywhere of the page so let's say if you want to work on the right side you can drag this navigator on the left so you can easily see what's inside here okay now i'm opening the right column let's expand it from navigator now here inside we know we have got one inner section let's open it as well now inside this inner section we have also two columns so here let's also open this column we have one heading and a text editor another heading and another text editor now on the tablet device i just want to reduce their font size so from here i'm selecting this text editor go under its style tab now from here open the typography and only on the tablet device i'm making their font size to 14 pixel and now let me show you another interesting thing if i want to apply the same design on the tablet to the other text editor we can simply do that so just right click on this text editor click on copy then right click over this text editor and click on paste style you see it's instantly applied so again if we open the other column then here let's select this text editor right click here and click on paste style so style has been pasted here also with the last text editor this one right click here and click on paste style then also with this inner section we can also select the intersection from here like the left inner section i also want to reduce its padding so go under advanced tab from here i'm reducing the padding to 10 pixel only for the tablet device so if we now close the navigator and have a look it's now looking great on tablet device alright let's now have a look how it's looking on mobile device so from top click on mobile and open the bar from left and here also we need the help of the navigator so right click here and open the navigator so here on the mobile device we don't need this corner rounded so first of all let's select the left column from here go under its style tab and open the border i'm making border radius to zero only for mobile device because right after the border radius here you can see a little tiny mobile icon so this value will only be applied on mobile device not on tablet or desktop device then the next thing i want to make this image centered on mobile device so from here let's select the image go under its content and i'm making the alignment to centered only for mobile device and you may remember we have given some negative margin to the left column and also with the right column to push them to the top with this cover image but on the mobile device we don't need that we can keep it with this left column but of course we need to remove from the right column otherwise you see we cannot see other contents like the social icons and the title all these so from here first i'm selecting the right column so on the mobile device i want to remove all the margin and padding from the right column so here i'm making the margin to zero and padding let's also make it zero also we don't need border radius with this as well so go under style tab open the border for mobile device let's make border radius zero then we can also do some work with the right columns in our section so select the intersection by the way if you don't wanna work in this pixel perfect way you can leave it like this but i wanna really look at super clean on mobile devices so here i have selected the right columns inner section here i wanna add more padding on mobile device so here i'm adding 30 pixel of padding but on the top we can just get rid of the padding so unbind it only at the top i'm making it zero and then you know we can make all of this centered align only for mobile device so let's select it make the alignment to center for mobile device also let's do the same for this one i'm making the alignment to centered also with these social icons go under its content and let's make it centered aligned we can now close the navigator you see it's now looking great on mobile device if we go to tablet it's looking great on tablet device and if we go back to desktop it's looking great then you can close the responsive bar from top so i'm clicking on this x so whatever we have done so far if you don't want to lose any of this hard work never ever forget to click on this green update button to save your work so let's now create our next section so let's first have a look on our example website now here this is our next section and first have a look how it's working so here on the left we can see the navigation items like about resume work and contact then on the right side here we can see the contents that will go under about so right now about is selected and here we can see all these contents will go under about then if we click on resume here we can see all the contents these will go under resume if we click on work these filterable gallery items will go under this work tab and if we click on contact these are the contents for the contact tab okay so let's first click on about and let's create it on our website all right and to create the new section you know we can easily click on this plus icon and create that section but here first to make your life easier i want to provide you a ready template this is not a complete template this is the template only for the layout because if we want to create that layout it's kind of complicated that's why i only want to provide the main structure or main layout so to import that layout we just need to click here on this folder icon this time now from top right corner click on this top arrow icon here and then click here on this select file now within the downloaded folder you will find these two folders inside one is images and another one is templates let's now go inside this templates folder now from here you will find a json file it says meta folio main layout just select it and click on open so here under my templates the layout has been imported it says meta folio main layout now let's click on this green insert button here then click on yes awesome we have imported the main layout but here we can see another extra heading and you know we don't want any header with our website so to remove it from here just click on the settings or gear icon then again set the page layout to elementor canvas so not only this time whenever you see this header then you can always just click on this gear icon and from here page layout make sure you have selected the elementor canvas one alright so here we have imported the main layout here on the left we can see all these buttons or navigation items and on the right side here we can see an empty column but here one important thing you shouldn't touch any of this i mean you shouldn't do anything with this column anything with this inner section or anything with this column like if we click on this column and go under its advanced tab here you see i have added a css class name it says content if you change this stuff then it won't work similarly if we go to this left column go under its advanced tab here also you see i have added a class name it says my menu so actually you shouldn't change any of this class name overall you shouldn't do anything with this and this column so we will be doing everything inside of this empty column by the way if you think if you want to change this about text or resume text or let's see if you want to add more buttons here you can also do that i will show you how to do that very easily but just be careful here i have added something under this contact button here you can see i have added some custom code if i click on it you see here i have written some custom codes so i request you not to do anything inside of this code snippet just keep this code snippet as it is because this empty space won't be shown on the real website if i just minimize the bar from left you see here is nothing under this contact button so don't worry about it at all let's now expand it now first i will be adding the content that will go under this about tab so here within this right column first let's click on this plus icon and here i will be dragging an inner section widget here so here inside this left column i will be adding an image and on the right side let's add some heading widget and paragraph widget so first i want to reduce the width of this left column so from here if i just put my cursor in between these two columns i can simply drag this to the left to reduce the width of the left column so i want to keep it just 43 percent then inside this left column click on this plus icon because here i'm dragging an image widget here let's now select the image from here go to upload files from here click on select files you can upload here any of your images but i just want to use these images you will also get all of these images inside of the download folder so for now i'm selecting this image and click on open let's now click on insert media now i just want to add some border radius with it so go under style tab then from here border radius let's add 10 pixel of border radius with this image now let's select this right column here now i just wanna add some padding with it so go under advanced tab and bind the padding on the top here i'm adding 60 pixel of padding and at the bottom i'm adding 30 pixels of padding now inside of this right column let's click on this plus icon first here i'm dragging and heading widget and i wanna make it h4 and then i wanted to say visit my portfolio and hire me now underneath this h4 let's drag another heading widget here underneath and i wanted to say about me okay but before adding any other thing i think we need to add some space at the left not on bottom so select this column again go under its advanced tab and from here instead of bottom layers keep the bottom padding to 0 but on the left i'm adding 30 pixels of padding all right so here is our heading 2 widget now underneath this heading 2 let's click on this rubik's cube icon and here i'm adding a text editor widget here and now underneath this text editor widget i wanna add some icon list so again click on the rubik's cube icon and you know we can easily search the widgets from here so i'm searching for icon list here we go let's just drag it underneath this paragraph here now first of all i just wanna delete these two so delete this one also this one now let's open it so here instead of list item one here let's just change the text so i wanted to say web design full stack you can say here any other thing if you want then let's minimize it by the way if you want you can also change this icon with any other icon but this check mark is okay for me so i'm closing it let's now simply minimize it and now i'm copying this one and the second one i wanted to say 24 by 7 support now minimize it and again copy it now we can say it unlimited revisions so actually you can put some of your features here all right but now i think in between this icon list and this paragraph there is huge space so i want to reduce the space and to do it you know just go under the advanced tab from here unlink the margin and at the top i'm adding negative 30 pixel of margin and now let's do some styling with this icon list so go under style tab from here first let's keep all the same just open this icon option so here i'm making this icon color to the secondary color and then let's open the text option so here text color i wanna also make it the secondary color that is the global secondary color and let's change a bit its typography so from here open the typography i'm just making the font size to 16 pixel and the font weight to 400. all right it looks pretty decent now underneath this icon list i wanna add a button widget so from here click on the rubik's cube icon and here i'm dragging a button widget underneath this icon list here all right so here instead of click here i wanted to say download my cv so here let's change the text to download my cv okay now here you can just put your cvs link i'm showing you how to do that very easily so if you want to upload your cv on your own website then you can just go to your wordpress dashboard then from left if we hover over on media from there click on add new so let's now upload a media file here click on select files so you can upload here any pdf formatted file or any zip formatted file so only for giving you an example here i'm uploading a zip file that's the cv file so i'm selecting it click on open so the cv has been uploaded and on the right side you see it says copy url to clipboard so this is the url of this resume pdf or zip file so i'm just clicking here to copy the url now go inside elementor page builder then inside this link field remove the hash and i'm pasting the download link so now if anyone click on this download my cv button that zip formatted cv will be downloaded on their computer and here you can become more creative like instead of download my cv you can also right here hire me on upwork or hire me on fiber then you can put your upwork or fiber profile link here inside this link field but for now i'm keeping it download my cv button now i wanna do a bit styling with this button so go under style tab from here first let's open the typography because here i want to make the font size to 14 pixel then the width let's make it 500 now from here let's make that text color to global text color and then the button color i wanna make it the body color this one also let's add some border with it so from here border type to solid border width to one pixel and here border color i'm adding the black opacity color then let's add some border radius with it i'm adding six pixel of border radius now if we hover over on this button you see nothing happens so we can also add some hover effect here but before that let's add some padding with this button so just scroll down here you can see this is the padding option so first of all i'm just unlinking the padding now here at the top and bottom i'm adding 20 pixel of padding and at the right hand left i'm adding 36 pixel of padding okay now let's add some hover effect with this button now here click on hover so on the hover this color i'm making it the accent color and the text color i'm making it white color so instead of this global color we can easily set the white color from this color picker and here also the border color i wanna make it to accent color on hover so if we now hover for on this button you see it's looking great all right now underneath this whole intersection i wanna take another heading because i wanna show some of my services here underneath now let's first click on this rubik's cube icon and from here i'm dragging and hitting widget underneath this inner section here so first i'm making the html tag to h3 now let's make the alignment to centered and i want to add some space at the top so just go under advanced tab unbind the margin now only at the top i'm adding 60 pixel of margin now of course i want to change this text so go under content and here i want it to say what i'm doing so now here underneath this heading i wanna take an inner section widget so from here click on this rubik's cube icon and i'm dragging an inner section underneath this heading here so now within these inner sections column i wanna take icon boxes so click on this plus icon and here i'm searching for icon box so widget here we go let's now drag this icon box widget inside this left column so first here i wanna change this icon so to change this icon click over this icon and here i'm searching for the edit icon we can select this one and click on insert now here i want to change this heading so for example here we can just write word press development all right so we have got our icon here here is our heading 3 and here is the paragraph we have got everything within this icon box widget now let's do a bit starting with it just go under style tab from here first i wanna change the primary color this is the icon's primary color so let's set it to the accent reddish color also let's now open the content here i just wanna increase the spacing so i'm making it 15. all right so far so good but now i want to add some spacing in between this icon box also i want to add some border with the border radius so to do it let's now go under advanced tab from here first i'm adding 20 pixel of padding all around with this icon box and then to add the border from here open the border field then you know from here i just want to add border type to solid border width to one pixel and then border color to the global black opacity color also let's add some border radius i'm adding 10 pixel of border radius so now i just want to duplicate this whole column so right click over it or we can hover over on it then duplicate this column now just delete this empty column from right like this and then i want to add two more services here so to do it simply just duplicate this whole intersection so from here i'm duplicating this whole inner section so now we have our four services here if you want you can add more just by duplicating this in a section one more time all right so here i will be changing all these icons all these headings with different service names so i don't wanna make you bored i'm doing that really quickly and coming back to you all right i am done with these services so i have changed all these icons and this text now underneath this services area i wanna add my clients logos area so you know we can do that very simply just click on this rubik's cube icon and from here i'm dragging heading widget underneath this inner section remember we always do a mistake sometimes during the dragging and dropping by mistake we can drop it inside of any other place like within the another column or any other place so very careful when you drag or drop anything so make sure you are dragging this outside of the inner section here so similar like this heading i'm making the html tag to h3 i'm making its alignment to centered now go under advanced tab unbind the margin only at the top i'm adding 60 pixel of margin or we can do here another thing we can just take an inner section first and then we can insert this heading widget inside of that inner section it's very simple like here i'm clicking on this rubik's cube icon and then drag this inner section underneath the upper inner section here let's now delete one of the inner column so i'm deleting one of these columns so this inner section has only one column now within this column i'm just dragging this heading here so we can just simply hover over on this heading widget then drag it inside of this inner section here okay now here instead of add your heading text here let's now add the real content so here i wanted to say our trusted clients now underneath this heading widget let's now click on this rubik's cube icon and here i'm searching for image carousel so let's now drag this image carousel underneath this heading widget here so here inside this image carousel i wanna add multiple images together so to do it from here just click on this plus icon and go to upload files click on select files so here from inside this companies folder let's open it now i'm selecting all these images together then click on open so make sure all the logos are selected here you can see the check mark so i'm selecting them all together now click here on create a new gallery then within this gallery if you want to order or reorder this then you can just drag and drop them like this and then click here on insert gallery so here we can see the client logos but if you have a closed look you see they are somehow cropped so i don't want that to fix it from here image size i'm making it to full so they are now showing perfectly all right so whatever we have done so far to save it we just need to click here on this green update button and now if i want to preview the website on the live page then you can just click here on this eyeball icon so i'm clicking here now on the live preview if you have a look we can see the navigation bar on the left but we cannot see any content on the right side why is that okay let's now go inside elementor page builder and have a close look here because this is very important so now if we just have a look on these buttons you see the first button it says about so click on its edit icon now go under its advanced tab here you see i have added a css id with this button and the id name is about now from here we just need to copy this css id name then from the right side let's select this inner section because this inner section wraps this portion so you have just selected this inner section go under its advanced tab then inside here inside the css classes you need to paste that id so if we now click on the green update button and then preview the website you see right now we can see this inner section under this about tab but if we click on this resume or work here you can see on the right side it's empty so let's again click on this about now here we can only see this inner section so let's now go again inside elementor page builder so first be very clear about this concept first select this button go under its advanced tab you need to copy the css id name from here and the area you want to appear under this about section just select that inner section go under its advanced tab paste the css id inside of the css classes here so now if i just select this heading widget go under its advanced tab also inside of its css classes i'm pasting the id is the about buttons id and then let's select this intersection go under its advanced tab inside the css classes paste the id here also here with this inner section select the inner section go under its advanced tab inside the css classes paste the id now if we save the page by clicking on this update button let's now preview our website so right now under this about nav i mean under this about tab we can see this section this heading widget this first intersection then here is the second inner section but we cannot see here the client's logos because if we go inside elementor and let's select this intersection if we now go under its advanced tab you see we have not added the about id name here so let's add the about id name here then click on update and preview the website now so here if we now scroll down here we can also see the client logos here all right now let's go inside elementor page builder let's say if you wanna show these client logos not inside this about you want to show them inside this resume field then what to do you already guessed it right you just need to select this resume button go under its advanced tab then you need to just select the css id name so i'm copying the resume id name from here then select this inner section go under its advanced tab from here instead of about i'm just pasting here resume id name if we now save it by clicking on this update button and preview the website right now so here under this about we can see this about section these services but we cannot see the client's logo but if we now click here on this resume we can see the client's logos here even not only that let's now go inside elementor let's say if you want to add a new button so for example i'm just duplicating this work button so hover over on it and duplicate this work button let's select this newly created button here instead of work let's say i want it to say clients now go under its advanced tab and here i'm giving it a css id that is clients now i'm copying these clients id name from here this time select these clients area now instead of resume um removing resume and here i'm pasting the id its clients so this client's id is basically for newly created button this clients button so if we now save our page and preview the website now have a look here under this about we can see only these areas this time if we go under resume we cannot see anything it's empty right now and if we now click on these clients right now we can see the clients so i hope you get the idea but here to make it look more cool we can add some entrance animation because if we click on about you see it's appearing instantly and if we click on the clients it's appearing instantly so you know we can easily add some animation with them so to do it just go inside elementor page builder then let's select this client section from under its advanced tab open the motion effects and here the entrance animation i'm selecting fade in also i to add this entrance animation with all of them so i'm selecting this inner section from under its motion effects i'm adding entrance animation fade in also with this heading go under advanced tab from here motion effects entrance animation fade in let's add with this inner section from here motion effects entrance animation fading let's do the same with this one from here entrance animation fading if we now save it and preview the website so now here under about we can see all of them but if we now click on clients you see the clients logos are appearing but we can see a fading effect also if we click on about we can see the fading effect here it makes its look super clean and smooth i really like it but you know what i have created these clients portion only to give you the example but i want these client logos under the about section so go inside elementor page builder from here i'm deleting this clients button and then select this client logos from under advanced tab instead of clients i wanna add the about id here that's basically the id name of this button all right so far we have done to save it click on this green update button all right let's now create some other sections so we can put them some of them under the resume some of them under the work and some of them under this contact area now here like i have created everything here step by step you can do that if you want you can create everything step by step from scratch the way i have done here but to make your life easier i have created some template for you like i have created a template section for the experience also i have created another template for the skill section if you want you can create everything from scratch but i made those templates only to make your life more easier okay so to import any template we need to use the importer and you know within any column we cannot import any template but no word is because i have a trick to do that just keep trusting me so first from here click on this folder icon now click on this top arrow icon to import the template now click on select files then go inside this templates folder this time i want to import this template it says meta folio experience section dot json so select this json file now click on open so here it is it says meta folio experience section now click on this green insert button then click on yes by the way after importing any template if you see the header is back again then you know just from here click on this gear icon and make sure the page layout is set to elementor canvas sometimes it happens but you can always then charge so you can just go to settings from the page layout select the elementor canvas alright let's now scroll down here you see we have inserted this json file or this template here but we don't need this template underneath this section i want this template inside of this right column here so we can just copy this template and paste it inside of the right column to do it just right click over here i mean right click here then click on copy then put your cursor here not inside these logos are not inside any other place just make sure you have put your cursor here on this empty white space then right click and then click on paste then you see it's just pasted here instantly now you may ask me why am i doing this why don't i import it inside of this right column because there is no option so we cannot import a template inside of a column that's why first i have imported into this below section then i have copied it and pasted inside of this right column so right now we no longer need this section so i'm deleting it from here because we already have pasted the template here then from this place you can easily change all of these informations these are very easy you can just click over it and then change the informations from here like this heading then what is your educational background i mean from which university you have graduated or your school or your college you can put here everything also you can put your job experience like your previous company your current company or what you do the details everything is editable so this one this experience section i want it to go under this resume button so first select this resume button and from here css id copy the css id resume now let's select this inner section go under its advanced tab oops i already have pasted here resume so i don't need to do it again but if you cannot see the resume is pasted just remove it from here and paste the resume buttons id name here in this place all right now underneath this experience section i also want to add a skill section and for that i want to apply the same trick i will be adding the template then i will be copying and pasting that underneath this experience section so let's do it from here click on this folder icon click on this top arrow icon click on select file this time i'm selecting meta folio skill section dot json so select it and click on open so here it is meta folio skill section click on green insert button click on yes so it's imported successfully and here is the skill section and you know i'm just right clicking here copy it then put your cursor here at the below white empty space right click here click on paste and then delete the section entire section from below here all right so we have our skill section here as well let's now select its inner section go under its advanced tab and make sure the css class is set to resume let's now click on this green update button to save our work and if we preview the page right now so here under this about area we can see all of them and if we now click on resume we can see here's the experience section and here underneath this is the skill section and also if you want to change any of these like this wordpress text or elementor text or any of this percentage you can do them easily from inside elementary page builder so go inside elementor let's now select any of them let's say i wanna change this one elementor so select it from left in instead of elementor if you wanna say here any other thing you can change the text from here then you can change the percentage from here now let's say if you wanna change this sigma so i'm selecting this one now instead of sigma i want it to say xd and instead of 70 i wanna give my xd scale to 90 percent let's now save this page and let's now go to the preview page if we open the resume and here have a look the xd skill is updated to 90 percent cool all right let's now create some content that will go under this work section so to do it let's go to elementor page builder again and the good news is i also have created the work sections template for you and you know to import it just click here on this folder icon click on this top arrow icon now click on select file and this time i will be importing this meta folioworks section.js so select the file click on open so here it is meta folio work section click on insert now click on yes all right so we have imported this section and you know what i will do just right click here copy it and put your cursor on this white space then right click here and paste it and then from bottom let's just delete this whole section now first thing first i want to make sure it will go under this work section so click on this work button go under its advanced tab from here the css id is work so i'm just copying this css id then from here let's select this inner section go under its advanced tab and inside the css classes i'm pasting the id here so if we now update the page and preview it so here if we now go under the work tab we can see it here so first let me tell you how this filterable gallery works like here if we click on all here we can see all the portfolios are all the works then if we click on this load more you see the more items is appearing here it's taking some time to load because right now my internet connection is not too fast all right so here now we can see all the items or all the portfolios then from here we can create the different filters or different categories so first if we click on design right now we can see only the works that under this design category we can click on development to see all the works that's under the development category and if we click on e-commerce we can see all the works that's under e-commerce category also if we click over any of this image like i'm clicking on this image we can see the image here then also by navigating through these arrows we can see the previous and next images this is really very cool all right now i'm showing you how you can customize it the way you want so let's first go inside elementor page builder now from here let's say if you want to change this category or filters like i have set it to design development and e-commerce so to change it let's first click on this blue pencil icon then from left first this is you can see here the settings tab for the moment let's now minimize it and open the filterable controls so here you can see here is the three filters that is design development and e-commerce if you wanna change the names you can do that just click here and you can change the name from here now if we minimize the filterable controls and open the gallery items here we can see all the single items like here we can see design item one two three so here if we hover over on it you see this is the design item one this is two this is the three and then here on the left we can see development item one two three and this is the development item one two three so this serial is coming from this place now also if we open the design item one the first one so let's open it so first of all if we have a look on the real website here you see if we click on design we can see the portfolios that's under this design category so here the first one you see design item one this one is under design category how you can identify the category so from inside elementor page builder you see here the design item 1 its control name is design so if we minimize the gallery items and open the fill table controls here you see the filterable control name is design here make sure you need to set this exact filter name with the gallery items control name so this name the design you need to put exactly this inside these gallery items let's open this item here so the filter name and here the control name should be same then it will go under the design tab but you can change these items names to any other name you can change this paragraph text to any other text basically when you hover over on it you see this is the title and this is the paragraph you can change them from here and here also if you want to change this background image then if you scroll down you can change the image from here now for example if you want to change this name this design name to any other name so i'm opening the filterable controls from here let's open the design instead of design let's say i wanted to say app and now let's scroll down open the gallery items so here design item one let's open it so no matter if you put here any name like design item one or any other thing it doesn't matter but you need to change the control name here because right now we don't have any control name that's design so we need to change it to app also let's minimize it open the second one so from here i'm changing it to app now minimize it and open the three so here i'm changing it to app so right now this three first one two three these three will go under the app tab or app category or app filter all right i hope it makes clear sense and now have a look on another thing like if we have a look inside these gallery items you see here we have got one two three four five six seven eight nine items but here on the right side we can see only one two three four five six items so where are the three rest items okay those are hidden for now but if we click on load more then the other three will appear you can also control that so if we open the settings here you see items to show i have set it to 6 but if you want you can set it to 3 then you see initially it will only display the 3 items here then when you click on load mode the other 3 will revealed then again when you click there i mean again if you click on the load more button it will appear three more items but here instead of three i'm making it six so initially it will display six items here all right so far what we have done to save it just click here on this green update button alright so we are almost done with our website like you see we have created the upload section we have created our resume section we have created our work section now we will be creating our contact section and within our contact section we will have our contact form and using elementor free version we cannot create contact form but you may remember we have installed a plugin that says wp forms we can create contact from using that plugin so now from the elementor page builder let's now go to wordpress dashboard by the way i wanna show you another thing let's say if you wanna go to wordpress dashboard from here then you just need to click on these three dots or hamburger icon from here you can click on exit to dashboard but i always keep the dashboard open on other tab and i open the elementor on the next tab so it make my workflow faster alright so now let's go inside wordpress dashboard now on the wordpress dashboard on this left menu bar you can see here is the wp forms from there if we hover over on add new not over let's click here on add new so this is the wp forms form builder first we can name it anything so i'm naming this form as jim's form you can name it anything you want then from here i'm selecting simple contact form so click on use template so this would be our contact from here is the field for name this is the first name last name field and here is the email field here is the comment field let's say if you want to add more fields then you can add the field from here for example if you want to add the mobile number field i mean if you wanna collect your customers or your visitors mobile number then you can just click here on numbers then you see here is another input field added it says number also if you want to drag it at the top of this comment field you can just simply drag it at the above of comment here and then if you don't want that from right you can just click on this delete icon yes i'm sure so click on ok but now to match with our design i don't wanna use these labels like this name label this email label this comment or message level instead of these labels i wanna use placeholder so there will be some light colored text would be inside of this field so to make those placeholders first click on this name field go under its advanced tab from here i'm just clicking here on hide label then instead inside of this first name i'm using the placeholder first name and inside the last name i'm using the placeholder last name let's now select this email field i want to do the same thing go under advanced tab from here i'm hiding the label and here the placeholder text i wanted to say your email address now here is the comment or message field go under its advanced tab let's hide the label from here and the placeholder text i wanted to say your message and if you want to make any field required like if you want to make this message feel required then go to its general tab from here you can turn on or off the required field so for this form i wanna make required all of this this name email and message field all right so when you are done with this form then from left bar click on settings and then go under this notification tab here so here i will be keeping everything like the way it is but if you want you can change this field by default it's set to admin email so whenever anyone fill up that form and click on submit where do you want to receive that email by default it's set to admin email so the email address you are using as an admin with this wordpress website by default you will receive that email on that email address but let's say if you want to receive that email on any other gmail or email account i mean gmail or any other email account then you can just remove this from here and you can put that for example at gmail.com like this but i don't want that i want to use the same email address that i'm using for this wordpress website so that's it we're done with this form to save this form now click here on this save button then click on this x to exit so here you see we have created one form it says james form let's now go inside elementor page builder this time before creating anything we need to refresh this page because we have created the form from wordpress dashboard that need to be synced with elementor so let's now refresh the page all right let's now scroll down here we can easily create any contact form or any other section from scratch but to make your life more easier i also have created the template like all other resume and work section so to import the template you know just click on this folder icon then click on this top arrow icon sometimes after clicking on this top arrow icon you may see nothing is changing on that case you just need to click here to reload it okay right now we can see the import option so this time click on select file now i will be inserting this template it says meta folio contact section.json select it and click on open so here it is meta folio contact section click on insert and click on yes and you know now i just will be copying it so right click here copy it and in between this white space right click here and click on paste then simply just delete this section because we no longer need this okay now here before doing anything you see the social icons is not getting our style so i want to design it as the same like these icons and we can do it very easily just right click here then click on copy now let's scroll down scroll down i just wanna paste the same style with the social icons so right click here this time click on paste style not paste click on paste style so the same style has been applied here but now i just want to reduce the top space so select it go under advanced tab only at the top i will just want to add some negative margin so minus 10 pixel or let's add minus 15 pixel okay and then from left you know you can easily change all of this text just click here and you can change your name you can change your title and if you want to say something you can change this paragraph text with your own text now it's time to insert the contact form that we have just created from wp firms so here after importing this section you see the right column is empty but if you notice very closely you see here is an empty widget just click on this empty widget actually is that wp forms widget i have made it previously for you after selecting it from left you need to select the form so if we click on this drop down here you can see your firm name so i have created the james form i'm selecting this one and here we go but here one last thing i also don't want this subheading like it says first and last so i wanna edit them just go inside elementor oops not elementor just go inside wordpress dashboard from here we have created this james form so click here on edit then let's select this name field go under its advanced tab here i forgot to disable this hide sub levels so i'm selecting hide sub levels then click on save all right let's now close it and go inside elementor page builder now let's just click on this green update button to save all of the settings that we have previously done and then if we refresh the page we will get the updated form labels all right so if we now go to the very bottom now here we cannot see the sub levels so otherwise everything is looking great all these sections are looking awesome but now i just wanna check i have added the contact id name here or not so let's select the contact go under its advanced tab here the css id is contact let's copy it then with this inner section select this intersection go under its advanced tab yep it's already added so css classes here is the id name that's contact all right let's now click on this green update button and have a final preview so here everything is looking great on the about tab let's go to the resume tab here everything is looking great then if we go to the work tab everything is looking fine and if we now go to the contact tab here we can see the contact form all right so far everything is looking great but now we need to add the footer of our website so to add that let's now go inside elementor page builder now we will be adding our footer at the bottom section here not inside of this column of course so to take our footer let's click on this red plus icon and this time i'm taking this single column structure so first of all i wanna give this footer background color so go under style tab let's set the background type so i'm selecting a color from the global color it would be the body color now i also want to add some space at the top and bottom so go under advanced tab unbind the padding at the top i'm adding 100 pixel of padding and at the bottom i'm adding 60 pixel of padding now first here i wanna add an image if you want you can also insert your logo here that of course your preference but here i wanna add one of my image so click on this plus icon and here i'm dragging an image widget so let's choose the image go to upload files select files now from inside the images folder i'm selecting this image click on open now click on insert media so first i want to make the images with smaller so go under style tab from here i'm making the width in pixel and i'm giving 80 pixel width then underneath this image i wanna drag and heading widget uh here in this place i wanted to say jfdg tull and i'm making a the html tag to h3 and alignment to centered also i wanna reduce the in between space so go under advanced tab unbind the margin at the top i'm adding negative 10 pixel all right now underneath this heading i wanna add some copyright text so from the rubik's cube icon i'm dragging that text editor widget underneath the heading here then i wanted to say copy write 2022 all right reserves by then here i'm writing jim fahad digital and i'm linking this gym for the digital text with my main website so i'm selecting this gym for the digital and then from top click on this insert icon and here i'm typing my website address that's jim fahad digital.com and hit enter all right now go to style tab and i'm making its alignment too centered also i want to make the font size a bit bigger so from here typography i'm making the font size to 16 pixel so we are almost done now i wanna show you last few things let's say if you wanna add your fab icon so fab icon is basically the little tiny icon that you can see at the top of the browser if you wanna add your fav icon on your website you can do that easily from inside elementor page builder to add your fav icon okay let's first save the footer that we have just done here so click on this green update button okay now to add the fab icon you just need to click here on this hamburger icon then from here let's click on site settings and then from here open the site identity then at the very bottom here you can see this is the option for site fab icon and it says suggested 5 icon dimension is 512 by 512 but actually you can upload any square shape image and of course you should upload a transparent image for now i'm clicking here on choose image go to upload files click on select files and i have already created a fab icon here i'm selecting this one if you want you can also use that let's now open it and click on insert media then click on this update button so if we have a look on our real website here at the top on the browser we can see the little tiny fab icon awesome and then one last thing i wanna show you okay first let's close this site settings from left so i told you at the very beginning of this tutorial don't touch any of this or don't touch any of these codes but here you can just control only one thing because it's safe like if you wanna change these active button colors you can do that from here because i'm using this reddish color if your website's base color is not this reddish color then you should change this active color to any other color so if you want to change this color you can do that from here so all you need to do at the bottom of this bar here you can see a course snippet just click here and again i'm saying it don't do anything inside of this code otherwise i mean if you do any mistake within this course then this thing will not work so from here you can just do one simple thing like i said if you want you can change this reddish color to any other color so here at the very top of this code snippet here you see i have written a line it says active background and then here is a hex code this is basically this reddish color hex code so instead of this red color if you want to use any other color like for example here i'm putting hash f or hash 00 ff00 so you see the active button color is becoming green but of course i don't want that i'm just showing you how you can change the color so i'm going back to previous reddish color other than that i highly suggest you to not do anything inside of this code snippet all right so we are done with our website let's now click on this green update button and let's now have a final look how our whole website is looking on the tablet device and mobile device so to check the responsiveness of our website you know we can just click here on this responsive mode icon so let's click here now first let's go to the tablet device from inside elementor page builder you know if i click on the resume or work or contact inside elementor page builder it won't work inside elementor page builder everything will be shown but on the real tablet device under the above button only the about section will be shown under the resume only the resume section will be shown you know what i mean so from here just check how it's looking i mean just check its responsiveness if we need to fix anything from here okay so on the tablet device this section looks great this section also looks great the client section looks great the job experience section looks great the skill looks great here is the work section it also looking great and here is the contact from section it looks great and here is our footer so it's already looking great let's now have a look how our website is looking on mobile device so click on this mobile icon this top cover and the profile area looks great and here you see we have got our cool menu and don't worry about this bottom space because this is the core snippet we cannot see it from real mobile device because if we minimize the bar we cannot see that code snippet here so this is the real view of a mobile but if we now click on resume work or contact it won't work inside of elementor page builder i will show you shortly on the browser how it will look on real mobile device but for now let's just check how it's looking on mobile in terms of checking the responsiveness okay so all these sections are looking great on mobile device everything is looking really organized i really love the mobile view of the website so everything is looking great let's now scroll down to the next section here is the contact from section perfect everything is looking great all right let's now open the bar from left and we can now have a look on the real browser not inside of this element of page builder so let's click on this eyeball icon okay so this is the real website view this is not inside elementor this is the real website i mean this is in the real browser so everything is looking great here under about we can see this about section is looking great then if we click on the resume the resume section is looking really really great then if we click on the work the filterable gallery is looking great and if we click on load more we can see the more works has been loaded then this filterable gallery all these are working perfectly i really love it and then if we go to the contact tab here we can see the contact form everything is looking super slick all right let's go back to the about tab and now if you want to see how it's looking on real devices you can check that from your chrome browser right now i'm using chrome so from chrome let's go to the very top right corner click on this three vertical dots from there click on more tools not click just hover over on more tools and then click on developer tools okay so i'm just minimizing this bottom console and make sure you have checked this responsive icon here this one because if you don't select this it would only show the desktop view so from here i'm checking the responsive mode and then from here i'm setting the percentage to 75 percent i'm minimizing the bar a bit more all right so first let's have a look how it's looking on the ipad or ipad pro so i'm opening it on ipad so on the real ipad it's looking like it it's looking really great on the tablet it's working perfectly if we click on work or contact they are looking great now let's have a look how it's looking on real mobile devices so from here if we select for example iphone x then you see it's looking great on the iphone device and here is the interesting thing right now as we are under this contact tab we only can see the contact form then here is the global fooder also we can see this top area but if we now click on this about tab we can see now only the about content here on the real mobile device and then if we now click on the resume we can see only the resume content here similarly if we click on work we can see our work section or portfolio section the filterable galleries are working perfectly i love it all right let's now close the developer bar so everything is looking great and working perfectly now you know how to make a really unique portfolio website so now you need to do the most important part you need to make your website live today so don't just watch this tutorial for the sake of watching the tutorial i want you to take action today i wish you all the best if you think this video has been added some value into your life then please like this video share this video and also subscribe to this youtube channel and press that notification bell icon to get notified before anyone whenever i will upload a similar valuable video like this on this youtube channel i will see you on the next video for now bye bye

Channel: Jim Fahad Digital

Views: 11,805

Keywords: Responsive WordPress Portfolio Website in Elementor, WordPress Portfolio Website, Elementor Portfolio Website, Elementor Portfolio Tutorial, WordPress Portfolio Tutorial, Elementor WordPress Tutorial, WordPress Tutorial for beiginners, Elementor Tutorial For Beginners, elementor tutorial, elementor, WordPress Tutorial, WordPress, Jim Fahad Digital, WordPress Tutorial 2022, Elementor Tutorial 2022, how to make a portfolio website, Elementor 2022, WordPress 2022, Make a Website

Id: zdjJfOWXgv4

Length: 136min 11sec (8171 seconds)

Published: Mon Dec 06 2021