How to Make a PERSONAL PORTFOLIO WordPress Website using Elementor

hey what's going on guys this is jim fahad and in this video i'm gonna show you how to create a wordpress website step by step in this tutorial you will learn how to create any website design that you can possibly imagine specifically in this tutorial i will show you how to create a personal portfolio website but following the principle of this tutorial you can make any kind of website we're gonna be using an awesome drag and drop page builder plugin that allows you to have 100 control over the customization of your website and it's super easy to use and there is no coding involved at all so whether you are a complete beginner or you have made a website before this tutorial will show you how to create a beautiful fully functional website like this that's 100 responsive on mobile device tablet and desktop now you wanna quote one thing having just a portfolio website won't help you to bring new clients but an eye-catching portfolio website does i'm saying it again having just a portfolio website won't help you to bring new clients but an eye-catching portfolio website does and if you follow this tutorial from beginning to the end you will have a modern eye-catching portfolio website that will help you literally stand out from the crowd i will show you how to change text and fonts how to create beautiful backgrounds creating awesome buttons i will show you how to create an eye catching about me section that will have a downloadable cv option a skill subsection with nice progress bars experience and education subsection to describe more about you then how to create beautiful services section how to change icons handle spaces borders text and everything i will show you how to create filterable galleries to show your portfolios in a creative way by separating them into different category tabs with image carousel how to create a client review section to attract more new clients i will show you how to write a blog post and insert them into home page i will show you how to create fully functioning contact form then i will show you how to create header and footer how to create navigation menu and how to create a logo for free i will also show you how to customize a blog page single blog post page and so on so first let me introduce myself the instructor my name is jim fahad i'm a professional web developer i have been developing websites for more than 10 years now i started my career as a freelance web developer on a website called odesk right now it's upper.com whatever i'm not regular on that website because i get a lot of website orders from my personal website that's gymforthedigital.com if you want you can also contact me through my website but you don't have to do that because by following this tutorial you can make your own website by yourself i'm telling all this beforehand only to make sure you that you're learning from a real web developer now let's get started okay so before we get started why are we using wordpress well because wordpress is the world's most popular website builder on the market so you may see ads for wix or squarespace or other website builders but unlike those wordpress is free and it powers more than 30 percent of all websites on the entire internet which is a lot of freaking websites so needless to say is the best way to make a website now in this tutorial i will be showing you how to get a domain name which is about five dollars but i will also show you how you can get your domain name for free for the first year and i will also be showing you how to get web hosting which is about two to seven dollars that's all there is no other hidden cost so what is web hosting well web hosting is just renting space on a server that's connected to the internet so that you can fill the server with all of your pictures and videos and text and other media to build your website and then publish it for the world to see web hosting is a must have if you want to own your own website there is no other way around it now there are such things as free websites but there are a lot of downsides of that you will not own your own domain name it would be something like your domain name.wix.com or your domainname.squarespace.com or whoever is hosting this free website for you you cannot upload plugins to help with the functionality of your website and you are also limited to a very small number of themes for the customization of your website and you can't upload new ones you also cannot monetize your website with ads in order to make money with it and your website could be deleted at any point if the hosting provider feels like you have violated their terms of service so that's why i recommend getting on web hosting ok so let's get started and you will find time stamp in the description so you can jump any specific part you need alright so without further ado let's get started the first thing we're gonna do is to get a domain name and web hosting and i will provide you my special link so you will get a discount around 50 percent then we will install wordpress then we will install a free theme and a free page builder called you know elementor then we will start creating our amazing website so let's now first get our domain name and web hosting if you have your domain name and web hosting already you can skip this part if not then follow along so first just click on the very first link in the description below this video or you can go to jimfahredthedigital.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.com websites because it looks more professional and legit so i'm gonna type here let's say our elementor dot com as we are going to make our website through elementor page builder and now click on next it says our elementor.com is available that's awesome and here we need to put our account information i'm putting mine here really fast only to not make you bored okay here you can see the business name field if you don't have a business just keep it blank or put your full name but here is the most important thing that's your email address make sure you put your correct email address because after completing purchase a receipt will be sent to that email address so make sure you put your best email address here all right now scroll down here's the package information and it's automatically set to 36 months and this is gonna be your cheapest plan so yes you're paying for 36 months up front but it comes out to only around 3.95 cents a month so this is 50 off that's gonna be your biggest discount now what i recommend is to just do 12 months if you don't want to commit to the 36 months or 24 months it's still 33 saving and it's only around 5.95 a month and you also have your domain name for 12 months so no more additional cost for your domain for these 12 months and here you got package extras first here is the option for domain privacy having domain privacy is good and i always recommend having domain privacy so no one gets to know who is the owner of the website but for the sake of this tutorial i'm deselecting this one let's click on turn it off because i don't wanna hide myself at this moment i want to be transparent so if anyone knows i own this website i have no problem you can keep this one checked if you want not a big deal i'm also deselecting all other options they are offering we actually don't need that they are just upselling their stuff all right now you can see the price is now only 71.40 for the full year including the domain that's awesome and i'm legally obligated to tell you that this is my affiliate link so i do get a little bit of commission off of this but it does save you a ton of money and it helps fund this 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 pop-ups because we don't need any of that cool we have successfully registered our domain name and web hosting [Music] congratulations so far if you have any questions please let me know in the comment section i will try my best to help you personally so now we can move on to step number two which is to install wordpress and for some reason if you logged out then login again now from left menu bar click on my sites then you can click here create site or here create a wordpress site i'm clicking here sometimes after clicking on my sites you may see these my sites from there just click here on add site then you can see here two options one is limitless customization and another one is fast easy site building as we will be creating our website using an amazing page builder the elementor page builder that's why we will be selecting this option the limitless customization so just click here on get started so let's now add a site name and site tagline we can change that anytime so i'm putting a site name jim 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 these informations right here and save that somewhere on your computer where you can access it again later and click here to show your password actually i intentionally gave this an easy password that's abc123 never ever use this kind of easy password i'm showing you shortly how you can change that password we can now sign into wordpress by clicking here but this is not the usual way because all the time you cannot log in this way i mean from this page this button right so you should get used to signing into wordpress all the time is by going up to a new window and typing in your domain name forward slash wp dash admin so i'm typing here my domain name our element dot com forward slash wp admin and click enter so we can see our wordpress login page here that means wordpress has installed successfully [Music] 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 okay so we are now inside wordpress admin panel or wordpress dashboard so first let me familiarize you with the wordpress admin panel or wordpress dashboard so let's first cleaning things up a little bit here you can see some pop-ups so let's close all these just click on this x icon let's close this one let's minimize this one minimize this one this one this one and this one now first have a look here on the left bar you can see some links like here you can see dashboard you can see here posts from here you can control all your future blog posts from these pages you can see all your pages you can monitor all the comments from here you can change your themes from here you can handle all your plugins from here so no worries i will show you everything step by step so now the first thing i wanna do i want to change that easy password that we have given abc123 so to change that password from the left bar here you can see users hover over on it and from there let's now click here your profile so here first you can see admin color scheme option you can change this from here like you can select the light one blue one coffee one actually doesn't even matter because no one can see it without you so let's just keep it the default one and then scroll down underneath here you can see the option for changing your first name last name nickname and here is your display name publicly as so you can change your publicly display name from here so what this display name basically is okay so whenever you will post a blog post or any article on that article or blog post you can see your name as the blog post author like this here so this author name is basically coming from this place so the name you will put here that will be shown as the author of that blog post and then from here contact information you can change your email address from here you can put your other website url you can write about yourself a bit more here you can change your profile picture from here using gravatar and here under account management you can change your password you can see a field new password let's now click here on generate password so here you can see what press has generated some random password for you if you want you can use that so just save this crazy password into other place so you can recall it later but i wanna give it a password that i can remember so i'm hiding this one and here i'm typing my password okay so it says weak but i'm happy with it for now so let's just click here confirm use of weak password and then let's click here update profile okay so next i want to clean my wordpress a bit more so from the left bar you can see her plugins from there let's go to install plugins because wordpress has given us some plugins during installation but most of them we don't need that so you can select these plugins all one by one by selecting like this but i wanna select this all by clicking here and then top you can see bulk action click here and select the deactivate first then click on apply and then select all those together again and then bulk action this time select the delete one and click on apply here you can see a browser popup says i'm sure or not yes i'm sure so let's click on ok so our all unnecessary plugins has gone now from the left bar let's go to pages here you can see pages hover over on that and click on all pages also here you can see some dummy pages that came with wordpress installation but i don't need any of them so i'm selecting all these together from the top bulk action let's now click move to trash and click on apply those pages are gone but you know what those are not permanently gone if we click here on the trash you can see they are sitting here so if you wanna delete them permanently you can click here delete permanently one by one or again you can select all this together by clicking here and from bulk action now select to delete permanently and click on apply so all those dummy pages are gone permanently now i wanna create some pages so to create a page you can click here on add new or from left under pages here also you can see add new so either click here or here i'm clicking here add new okay now close this popup it seems all fully screen but i don't want that so from top right corner click on these three dots you can see here full screen mode is turned on i'm clicking here to turn it off now you can see the left sidebar here okay so let's first create our home page so here at title i wanna name it home and on the right top click here on publish and click on publish again then i wanna create another page so from left here let's click on add new again this time i wanna create a blog page now click on publish click on publish one more time okay so we have created our home page and a blog page though both of the pages are empty right now now let's have a look on posts so from the left bar here you can see posts from there let's now click on all posts here you can also see another dummy blog post it's hello world i have not posted this blog post actually it also came with wordpress installation by default so if you don't wanna keep it you can click here on trash to delete it but i wanna show you another thing so if you wanna see this blog post from here you can see view let's click here i'm opening it from a new tab so let's open it now let's have a look like i said this is now a single blog post page here you can see the block title is hello world here is the blog post date and here you can see jim fahad this is basically the publicly displayed name as author that we have said a few times ago and here i wanna show you another thing like if you have a close look at the url bar here you can see here is our domain name then forward slash and then a bizarre number like a question mark p equal one does that make any sense i think no so instead of this kind of bizarre number i want to make it a more human readable url so to do that let's go back to our wordpress dashboard now from left bar here you can see settings hover over on it from there let's now go to permalinks so here you can see by default the permalink settings is plain that's why we can see our url like our domain name then forward slash and then this kind of bizarre number but i don't want that instead of that i wanna select the post name this option so basically if we select the plain one then our blog post page or our page url will look like our domain name then forward slash this kind of buzzer where number and if we select the post name option then we can see the url like our domain name forward slash the post name or the page name that's why we are selecting this option the post name one okay so right after selecting this one let's scroll down and from here let's click save changes now if we go back to our blog post page and if we now refresh the page see here instead of that bizarre number we can see here our domain name dot com forward slash hello world that's basically our blog post name so it's more human readable and it's good for search engine optimization all right now let's close this and now if we wanna see how our website is looking so to see it from left top here you can see the site name and if you hover over on it you can see here visit site so i'm opening it from a new tab so our website is looking like it right now i know it's super boring super ugly but we will be making our website out of this but can you notice a weird thing here this is our home page but we can see here blog post why is that because by default wordpress shows all the blog posts on the home page but we don't want that we want to make our home page to look like a custom home page and we will be making our blog post page to a different blog page so how can we do that to do it let's now go back to our wordpress dashboard now from here under settings let's now click on reading here you can see your home page displays by defaults it's set to your latest posts that's why we can see the blog post on the home page so now select this option a static page so we want to select our home page to the home that we have just created and the post page let's select the block page and right after that click on this save changes button now let's go back to our front end and if we now refresh cool it's nothing crazy but at least we can understand this is our home page that we can see our main domain or our main url now the next thing i want to change the theme of our website so to change our theme from left bar here you can see appearance from there let's now click here on themes here you can see some themes that came with wordpress by default but you know what personally i don't like any of them so i want to install another theme so to install it here at the bottom you can see a big button says add new theme let's now click here now in this place you can see a lot of free wordpress themes so basically what are wordpress themes themes are basically the look and feel of your website like here you can see different looks and feels so all these are different themes if you select this theme your website will look like this theme if you select this theme your website will look like this but you know what i don't want any of them because i wanna install one of my favorite theme that's called extra so i'm searching for that from this top right search bar i'm typing here extra so here it is the left one extra let's now click on install now click on activate to activate the theme cool our extra theme is activated successfully let's now close this pop-up and now to make our website lightweight i wanna delete some of these unnecessary themes that came with wordpress by default so here we can see 2019 theme let's now click her theme details and on the right bottom here you can see delete let's click here popup says i'm sure or not yes i'm sure click on ok also i wanna delete this one click on delete okay but here i don't wanna delete this one because it's always a good practice to keep a backup theme besides your activated theme so here our extra theme is activated and we keep another theme only to make our website secure if anything wrong happens so just consider it as a best practice to keep a backup theme alright so our theme is now activated let's now install our page builder and you already know we will be using one of the best free page builder my favorite the elementor page builder so to get elementor page builder let's now go to jim fahad digital.com i will put this pages link in the description so from that page if you scroll down a little bit here you can see under important links you can see a link says get elementor so let's now click here on get elementor it takes us to the elementor's official website so from here you can click here on get started this button or here this button okay i'm clicking here on get started now it says to sign up so if you don't have an elementor account just put your email address here and put a password here and then click here create account it's completely free i already have a free account here so i'm clicking here on login so here is my username and password let's now click on login after logging in sometimes you may see this type of survey portal so i just want to skip these so from the right top corner i'm clicking here on escape also i want to skip this one so i'm clicking here on skip then it's asking do you have a wordpress website yes we have so here is the option yes let's now click here on continue now here they are showing the different packages but in this tutorial we'll be using only the free version so just click here on install free now there are several ways to install elementor page builder like you can just put your domain name here like our domain name is our elementor.com we can just put our domain name here and then click to check for wordpress so if you want you can install elementor page builder in this way but i want to show you another easy way like here at the bottom you can see here alternatively if you prefer to install elementor manually you can download it here so click on this here in this link i'm clicking here see here our elementor page builder has been downloaded it's still downloading okay so it's downloaded already you can find this zip folder inside your download folder or where you save your download files so for me here is the zip file that we have just downloaded now let's go back to our wordpress dashboard now from the left bar go to plugins from there click on add new and at the very top you can see here upload plugins click here then from here click on choose file so i'm selecting the zip file now click on open now click install now then click on activate plugin awesome our elementor page builder has been activated successfully now i want to install some other necessary plugins that we will be using to create our beautiful website so from left here plugins let's now click again on add new now from here we will be installing our all necessary plugins that we're gonna use for this website by the way if you're wondering what are wordpress plugins plugins are basically extra add-on or app-like things for your website basically wordpress alone cannot do all the things you need to do with your website so there are different add-on or apps like thing that will extend the functionality of your website like if you wanna create a contact form inside of your website for that you need to install a contact form plugin and then let's say if you wanna make your website search engine optimized there is a different plugin for that so each plugin has their different purpose okay so let's now install our necessary plugins the first plugin i'm looking for you can search your plugins from this right search bar here so first i'm here searching for classic editor so this one classic editor let's now click on install now now click on activate now click on add new again this time i'm searching for another plugin named essential add-ons so i'm searching for essential add-ons this one essential add-ons for elementor let's now click here install now click on activate and lastly i want to install another plugin for making our contact form so let's now click here add new and this time i'm searching for wp forms this one contact form by wp forms it's a pretty good one you can see here three plus million active installations so needless to say it's a pretty good plugin now let's click here install now now click on activate all right we are almost ready to go here's the fun part begin now we will start creating our beautiful website using the awesome elementor page builder just by dragging and dropping and with few mouse clicks okay so from left now let's go to pages to all pages so here is our home page let's now click here on edit as we're going to make our website using elementor page builder so let's now click on this big button says edit with elementor okay so we are now inside elementor page builder here you can see at the top this is our main header we will put our logo here at the left and our main navigation on the right side here but we will do those later and here you can see our main fooder we will customize our header and footer later basically right now we are going to make our beautiful website in between this header and footer i mean in this place using this awesome elementor page builder so first let me familiarize you with the elementor page builder so here on the left you can see a bar you can minimize it by clicking here and you can expand it by clicking here and on the left here you can see all these available elements or widgets like here you can see image widget here is the text editor widget here is the video widget here is the button widget or element there are lots of elements available so you can use all of them like here is star rating basic gallery counter testimonial all the necessary widgets all those are available inside elementor page builder all we need to do we will be just dragging these widgets from this left bar to the right side i mean inside our main website like here you can see a heading we can just drag this to our main website like this basically in this way we will be creating our website and besides these widgets if we scroll down here you can see some pro widgets these are more awesome and more cool options out there like you can creative slides animated headlines pricing table price list flip boxes call to action testimonial carousel share buttons countdown but these widgets are only available on elementor pro version so if you wanna use their pro elements as well i will put the elementor pro purchase link in the description but in this tutorial i will show you everything using elementor free version so for now i'm minimizing this one okay so before starting creating our main website i want to make you understand the three major fundamental things of elementor page builder if you understand these three fundamentals of elementor page builder you can literally create anything using this awesome page builder so what are those three things those are section column and elements or widgets so basically the most outer thing is the section and then inside a section you can take multiple columns so inside a single section you can take one column two column three column four column like that and inside a column you can take multiple elements or widgets very easy concept so if we want to create a section first let's now have a look on real page builder to create a section first we need to click on this plus icon here and then you can select any structure from here like you can select the single column structure or two column three four all these different kind of structure so first i want to take this two column structures so i'm clicking here now everything you can see inside this blue line is our section and if you want to select this section you need to click on these six dots then you can do all the work with this section from this left option like if you want to make these sections a height more bigger you can do that from left like here you can see the option height let's set it to the minimum height see the section height is increased even you can maximize the height more just by dragging this bar to the right like this you can decrease the height just by dragging this bar to the left like this you can give the height in pixel here also you can give this height in vh clicking here vh stands for vertical height so if we give it to 100 that means it will cover the 100 percent of your device okay for now let's keep it 70 percent then if you wanna make this whole section to full width then you need to click here on stage section turn it on click here now if you want to do any styling you can go under this tab here style then let's say if you wanna add some background color or background image you can do that from here you can see background type let's click here on this paint brush tool icon if you wanna add a background color here you can see color click on this color picker you can change the background color just by dragging on this color picker like this black red white like that also if you want to add a background image here just click here on this background image click here now from upload files click on select files now from inside images folder let's select this image click on open now click on insert media so here is our background image but we cannot see it properly we need to adjust its position so here underneath this image you will find some option like here position let's make it to center center let's make the attachment to fixed then here's the repeat let's select it to no repeat and size let's make it to cover so no matter how big the image is it will cover the whole area i mean it will cover this whole section then on the left if you scroll down here you can see more option like background overlay let's click here if you want you can add an overlay over it so to do that here you can see background type click on this paint brush tool icon now click on this color picker here i want to put this color hash one one 0 3 1 a so this is the dark purple color also if you want to use this color later you can save this color for future use so your cursor is now at this point now just click on this plus icon so this color is added to your color snippet here so you can use it later so each time you don't have to input the color hex code here cool all right now from here you can change the opacity just by dragging it to the right to make it more darker you can drag it to the left to make it more lighter but i want to make it really a bit darker like this 0.8 or 0.85 like this also i want to show you something cool like here you can see another option says shape divider if we click here then it's selected to top also you can select to bottom then from type let's select it okay let's make it mountain see here is the mountain shape at the bottom also you can increase the width of this mountain shape you can decrease it you can increase the height of this mountain shape you can decrease it you can flip it by clicking here also there are more shapes like here is drop shapes then here is curve shape then here is waves brush shape it looks really cool okay but for now i don't want any of them so i'm selecting to none all right so this is our section and inside this section we have two columns here this is our left column and this is our right column you can identify a column by seeing this grey dashed border all around it so this is the column like this section if you want to do anything with the column level all you need to do you need to click here on this column icon here so i have selected the right column and now if we go under style tab here we can also give this column a background color from here background type click on this paint brush tool icon let's see if you want to give it a white color so from color picker let's drag the color picker to the white like this all right now i want to add some widgets or elements inside this right column how can you do that you can click on this plus icon or you can click here on this rubik's cube icon so let's click here let's say i wanna drag a heading so just drag this heading inside this right column here you can see the heading text here you can change this heading text just by clicking here so here i can type jim fahad production then from left if you want to make it to heading 3 you can select it from here see it's now smaller also you can make it heading 4 or hitting 5 ok let's keep it heading 3 also you can set the alignment to the left or centered or right ok let's keep it centered then if we go under style tab here you can change the text color from here text color click on this color picker if you want to make it red just drag the color picker to the red then if you want to do anything with this font typography you can see here typography click on this pencil icon so from here you can see from family so let's click here all these are google fonts so let's say if you select this font abc select this one it's changed immediately then here if we search for poppins font here it is let's select this one it's instantly popping spawned you can change the font size just by dragging this side like this you can decrease it by dragging it to the left you can change the font weight from here let's see if you want to make it really bold let's set it to 900 see it's super bold right now you can change the transform from here so you can make it all lower case or all uppercase like this you can change the style from here let's say if you select italic so it's instantly tally also you can change the line height from here you can change the letter spacing just by dragging it to the right you can decrease the letter spacing by dragging it to the left like this then if you want to add a paragraph or text underneath this heading just click on this rubik's cube icon again and then here you can see a text editor just drag this and drop underneath this heading here so here's the paragraph you can change all this text just by typing here or also you can change this text from by typing here on the left easy then let's click on this rubik's cube icon again if you want to add a button just drag this button widget underneath this paragraph here so here's the button you can make the button to the centered aligned or right let's keep it centered you can make the size to medium or large okay let's keep it small you can change the click here text to let's say contact now like this you can change the button link from here also let me show you another thing so if you want to add some space all around with this column all you need to do just click on this column icon here so you are on the column level now now go to under advanced tab here you can see margin and padding option so if you want to add some breathing space inside you need to use the padding and if you want to add some outer space you need to use margin so i want to add some space inside so i'm gonna use the padding let's just add 30 pixel of padding all around it see the padding has been added on the left top right and bottom so the basic idea is when you want to work on a widget or element level like this button is a widget you need to click here on this pencil icon and then on the left you will find the content tab the style tab and the advanced tab for that widget same for the text editor widget same for the heading widget you just need to click on this pencil icon and you will find all these three tabs for this then if you want to work on a column level you need to click on this column icon then for this column you will find the layout tab style tab and advanced tab here so you can add just everything on this column from this left options and finally if you want to do anything with the section level all you need to do just click on this six dot icon also for the section you will find this layout tab style tab and advanced tab very simple concept but if you feel still confused just move the video backward and watch it one more time you will clearly understand now let me show you some more coolest thing like let's say this is our right column if you wanna make this right column i mean if you wanna drag this right column to the left all you need to do just drag this right column and move it to the left like this see it's reversed instantly and then if you press command z it's reversed again so if you want to do undo then just press command z or if you're on pc just press ctrl z not only the whole section if you only want to drag this button just click on this pencil icon and drag it to the left like this if you don't want that press on command z then if you want to duplicate this heading just right click on this pencil icon here and click on duplicate it instantly duplicate it and if you want you can change this text to other text like let's go alright and finally if you don't like it overall then just right click on this pencil icon again and click on delete to delete it okay so now i also want to delete this right column so to delete it right click on this column icon here and click on delete also let's delete this section you already understand what you need to understand in order to design any type of website now let's start creating our real beautiful website okay now let's first start creating our real banner section so let's now click on this plus icon and i wanna take this two column structure and first this section i wanna make the content width to full width and height to minimum height and i wanna make it in vh and let's make it 100 vh now let's go under style tab and this time background type i wanna select the gradient type this one so first select the color i wanna make it a yellowish color so i'm putting here hex code hash ffb400 also i wanna use this yellowish color later so i'm clicking here on this plus icon to save it on global color and i wanna name it yellow now click here on create you can see that shortly how you will use that now here location i wanna set it to 24 and here is the secondary color i wanna make it black that's hash one one one one one also i wanna save this color as global color so click on plus and i wanna name it black click on create now my plan is to make it a curved looking background so for that i'm setting the location to zero and from here let's adjust the angle so i wanna keep it like this or more curved maybe 70 would look good all right now inside the left column i wanna take an image first so click on this plus icon and i'm dragging an image widget inside here now let's click here on choose image and i want to upload the image from my computer so click here on upload files then click here on select files now from inside images folder i wanna select this image click on open click on insert media all right now let's adjust this image so go under style tab and the maximum width i wanna set it to 80 or 85 percent now from here give it some border radius i wanna add here 35 pixel of border radius or let's keep it 30 pixel all right now i also want to reduce the column width so i'm clicking on this column icon to select the left column and here column width i want to set it to 40 percent so the right column will become automatically 60 percent all right now inside the right column first i wanna take a heading widget so i'm dragging a heading widget inside here and first i want it to say i'm jim fahad now let's do some styling go under style tab and the text color you may remember we have set a global color that's yellow so to take that yellow color just click here on this global icon and from there select this yellow one all right now let's select the typography click on this paint brush tool icon from family i want to set it to pop-ins font size 51 pixel font weight let's keep it 700 all right it looks good now i just wanna duplicate it so right click here and click on duplicate so the second heading here instead of um jim fahad i wanted to say web designer and let's change its color so go under style tab here is the text color i want to set it to pure white color and now i want to reduce the space in between these two headings so just click over the first heading here go under advanced tab and bind the margin and i want to add some negative margin at the bottom so i'm just clicking here on this down arrow and let's keep it like this or more okay minus 35 is fine now underneath these two headings i wanna add a paragraph so let's click on this rubik's cube icon and just drag a text editor widget underneath this heading here now instead of this load i mean some text here i'm pasting some copy now let's go under style tab so first text color i wanna make it pure white color and let's do some typography from here from family let's make it open sense this one font size let's make it 16 pixel font weight 400 is fine and here let's add some line height so i'm putting here value to perfect now underneath this paragraph i wanna add a button so let's again click here on this rubik's cube icon and drag a button widget underneath this paragraph here so first instead of click here i wanted to say more about me and i wanna add an icon on the right side of this button so i'm selecting here on icon library and i'm searching for a plane let's select this one and click on insert so here i can position instead of b4 i wanna set it to after and let's increase the icon spacing a bit it's too much let's keep it nine now go under style tab but before styling it i want to add some margin at the top of this button so let's go under advanced tab and bind the margin and let's add maybe 40 pixel of margin at the top or a bit more 45 perfect now let's go back to under this style tab so first let's see the typography so i'm clicking here from family i want to set it to pop ins font size 15 pixel font weight let's make it 700 and line height i want to keep it 1.4 em all right now text color i wanna set the text color to pure white and then the background color i wanna make it transparent so i'm just dragging this bottom bar to the very left like this so you see the button is now background transparent all right now i want to add some border around this button so border type let's select it to solid border with one pixel and here is the border color so we can pick that yellow color just click on this global button icon and pick the yellow one now let's add some border radius maybe 30 pixel or a bit more 35 pixel is fine and then lastly i want to add some padding so first let's unbind the padding on the top let's add 16 pixel then right 50 pixel bottom 16 pixel and on the left let's add 50 pixel perfect now i want to add some hover effect so from left here click on this hover on hover i just wanna change the background color so i'm taking it from global color so click on this global icon and let's select the yellow all right if we now hover over on this button it becomes the yellow color it looks cool and the last thing i want to do i want to add some breathing space on the left hand right of this column because it looks too busy so i'm just clicking on this column icon and go under advanced tab let's unbind the padding and this time instead of pixel i wanna give the padding in percentage so i'm selecting here percentage layers are some padding on the right so 20 percent and on the left layers at 10 percent of padding how it looks perfect and decent now let's create our next section so underneath this banner i wanna take another section that's about me but before creating our about me section i wanna create our services section first so to create our services section again click on this plus icon this time i want to select this single column structure now go under style tab here is the background type select the classic one and i want to give it a solid color background so click on the global again and select the black one now go under advanced tab i want to add some padding at the top and bottom so first unbind the padding and on the top let's add 80 pixel of padding and on the bottom same 80 pixel of padding also on the right i want to add 10 pixel and on the left 10 pixel of padding now first i want to add a heading widget here inside this column you know if we click on this rubik's cube icon we can easily drag this heading widget here but my plan is to make it look more cool so instead of this regular heading widget i wanna take a dual color heading widget and you may remember we have installed a plugin called essential add-ons for elementor and we will get that dual color heading from that plugin so if we now search here dual color heading here we go and whenever you can see uh this tiny e a icon at the top right corner of any widget you can understand that's coming from essential addon for elementor plugin all right now just drag this dual color heading widget inside this column here so by default here besides the two color heading you will also find the icon but i don't want that so from left here you can see show icon i'm disabling it also here you can see some paragraph option but i don't want that so i'm just removing the text from here now it's only the two color heading okay so here title the first part i wanna say it my and the last part i wanna say it services okay now go under style tab and let's expand this color and typography so first i want to set the main color to that yellow color we have set on the global so just click on this global icon and make it yellow and the solid color this one i wanna make it to pure white like this so from here let's do some typography click on this pencil icon and now font family let's make it pop ins font size let's make it 56 pixel and font weight i want to make it really bold so let's make it 900 perfect all right now under this my services heading i wanna take an inner section so to do that let's click on this rubik's cube icon and here is the inner section just drag this underneath this dual color heading widget now inside this inner section i wanna take icon boxes so just click on this plus icon and here i'm searching for icon boxes so here it is icon box just drag this inside of the left column here okay let's say logo design is one of our services so first i wanna make that text to logo design so from left here you can see title and description from here i want it to say logo design also you can change the description text the way you want also we can change this icon from here just click over it and as the service name is logo design so i'm searching here for something like brush okay let's select this one and click on insert and let's now do some styling with it so go and restyle tab icon color i wanna make the icon color to the branding yellow color so from the global color set i'm clicking here on this global icon let's select the yellow and the icon size i wanna make it like this let's keep it 35 it looks perfect now open this content tab so first the title color i wanna set the title color to pure white color and let's do some typography from here so the title typography from family let's keep it to pop ins font size 22 pixel and font width let's make it 700 now click outside and here's the description option same for the description i want to set the color to pure white and then here's the typography i wanna make the description from family to open sense this one then font size let's make it 16 pixel font width 400 is fine and i want to add some line height maybe 1.6 am is fine all right now underneath this icon box i wanna add a button widget so just click on this rubik's cub icon and drag a button widget underneath this icon box now i actually make these buttons designed similar to our above button design so we don't need to do same thing twice so just go to inside this banner section and right click on this button then click on copy and now scroll down put your cursor over this button right click here and click on paste style now i just want to adjust it a bit so first here instead of click here i wanted to say get a code so from inside text i'm writing here get a code and i want to make it centered so here alignment i want make it centered also i don't want any top margin here so let's go under advanced tab this time link the margin and remove the value so it's set to default perfect now the last thing with this icon box i wanna add a border around this whole column so just click on this column icon go under style tab and expand the border now border type let's make it solid and border width of course one pixel now let's select the border color from here okay so first i'm selecting it to pure white and now i wanna create it really really off so yup i have selected the color to pure white but now i wanna reduce the transparency so i'm just dragging the bottom line bar to the very left here like this all right so now you can see the tiny border around this whole column here okay now i just want to duplicate this column couple more times so i'm right clicking on this column and click on duplicate let's duplicate it one more time right click and duplicate and let's just delete the empty columns so right click here and click on delete so if you only have three services you can keep it like this and if you have more services i mean more than three so you can just right click here on this inner section and then click on this duplicate to duplicate the whole inner section and for sure your all services won't be logo design so if you want to change all the services name you know just click over it and you can change all the title and description from here you can change the icon from here so i'm changing all the icons and the services title really quickly only to not make you bored all right i have changed all these icons and titles so in the same way you can change all the icon and services name with your own and of course after changing everything don't forget to click here on this green update button to save your work so we have already created our top banner section and then we have created our my services section now in between this banner and this services section i wanna create our about me section so to take a section in between these two existing sections we need to click here on this plus icon and then you know you can click here on this plus icon to create a section from scratch but all the time you don't need to create everything from scratch sometimes you can create anything from pre-built templates and the about me section we are going to create the good news is i already have created the section for you so to get that ready section you just need to go to jim fahad digital.com i will put this pages link in the description and from that page if you scroll down a bit here from under important links you will find here download the images plus templates i use in this tutorial just click there you will get all the images i'm using on this tutorial and also the templates i'm using you will get that all all right so this time instead of clicking on this plus let's click on this folder icon here so first let's go under my templates right now we have not any template saved so first we wanna import a template now just click here on this import template icon and then click here on select file so whenever you will download the images and templates from jimfiredigital.com you will get a zip file and after unzipping it you will get these two folders one is images and another one is templates so just go inside templates folder you will find the about me section.json file there just select that and click on open so now under my templates you can see here about me section has been imported successfully now just click on this insert icon click on yes here you go we have got our beautiful about me section that i have created for you i am describing everything how you can change all these so here underneath you can see nice my skills subsection also underneath that here is beautiful experience and education subsection okay so first here you already know how to change this dual color heading so if you want to change that just click over it and you can change the text from left here now underneath here is the personal informations so here you will find the first name last name age nationality address phone number email all these if you want to change any of this just click over it then from left you can see here is all the options let's say if you want to change the first name just click here on this first name then in between this b tag here you can find the name now just put your name here let's say if your name is rick so instead of a gym just write here rig like this you see here rick is instantly changed but my name is not rick my name is jim so i'm keeping it gym similarly if you want to change any of these just click over it and you can change any information from left also if you don't want to keep any of this just click over it let's say if you don't wanna keep this language option just click on this x to delete it again if you wanna get it back just press command z from mac and ctrl z from pc and underneath personal informations here you will find a download cv button so it's basically the same button like this but i will show you shortly how you can make this button fully functioning like whenever anyone click on this download cv button your pdf formatted cv will be downloaded immediately on the same page i will show you shortly how to do that and on the right column here you can see all these credibility options like if you have 25 plus years experience you can put all this on the right column here and if you want to change it you know you just click over it let's say if you don't have 25 plus years of experience instead if you want to change this number you can change that from here you can see ending number instead of 25 you can keep it 10 and if you don't wanna keep the plus then from left here you will find the number suffix the suffix is plus but if you don't want this plus icon just remove it from there so it's now not 10 plus it's only 10 but i wanna keep the plus icon here then here 53 plus errors on if you want to change it just click over it now let's say you want to change the text hours on instead you wanna say five star rating gained or anything like that you can change these text from here so instead of hours on i wanted to say five star rating cool now let's scroll down to the next sub section so this is the beautiful mysql section you can change the text from here just click over it and you can change it from left and then these beautiful circle progress bar represents your skills on any particular skill like if you're a programmer and if you have a minimum knowledge of html maybe 25 percent then you can keep it like this html 25 and if you want to change it let's say instead of html you wanna say it shopify so you can change this html text from here you can see title instead of html i'm typing here shop e5 also here instead of 25 percent i wanna set it to 75 so from here counter value i wanna make it 75 like this so in this same way you can change all this progress bar title and your percentage in the same way and you know if you don't wanna keep the below inner section you can just click here on this x to delete this row all right now let's scroll down here is the beautiful experience and education subsection so here on the left you can put all of your working experience and on the right you can put all of your educational background so now i'm showing you how you can change all these informations very easily you know just click over it and then you will find all these featured items here like here it says web developer jfd and then here you can put some text so to change it from left just expand the first one this one and then here you can see this icon if you want to change this icon you can change that from here also this title is coming from this field here title field you can change it from here also this paragraph these are coming from this content field you can change that from here all right let's now minimize it so you already understand if you wanna make more featured item like this you just need to click here on this copy icon you see here is another item is added and if you don't want it just click on this x to delete it cool and after changing all this text with your own text don't forget to click here on this update button to save your work all right so far we have created our beautiful banner section and now we have here our beautiful about me section our my skill subsection and here our experience and education subsection underneath that here we have created our beautiful my services section now let's create our next section okay now we will be creating our portfolio section and you know we can always create a new section by clicking on this plus icon but this time i just want to duplicate the section our services section so to duplicate this whole section just put your cursor on the six dots right click here and click on duplicate so here underneath the whole my services section has been duplicated so first i wanna delete this inner section also i wanna delete this intersection and here instead of my services i wanted to say my portfolios and now underneath this heading i wanna drag a filterable gallery widget so just click on this rubik's cube icon and here i'm searching for filterable gallery this one this one is also provided by essential add-on here you can see an essential add-on icon here so just drag this underneath the heading okay so basically our goal is to create a filterable gallery here like here at the top you can see all and then here is the filter name so whenever we will click on all we can see all the portfolios and if we click on any filter or category name on that time we will be seeing only that categorized or filtered portfolios i think instead of giving you the theoretical idea let's do it in practical so first from here on the left under content the default settings here is fine so let's just minimize it and let's now expand filterable controls so first i wanna create here two filters or two categories but you can create as many as categories you want so first here by default its name gallery item just click on it i wanna create a category named web design here you can see it appeared with design and let's add another one click on add item and i wanna name it e-commerce so let's say if you are web designer and if you have different portfolios under web design and e-commerce category so whenever you will click on web design only your web design workforce will be shown here and whenever you will click on e-commerce only your e-commerce portfolios will be shown in this place so let's create this so now minimize filterable controls and now expand the gallery items here by default you can see here six items so let's expand the first one so basically this first one all the information we will put here that's for this one the first portfolio similarly here you can see the second one this one for the second portfolio and the third one that one is for the third portfolio like that so let's start working with the first one so i'm clicking here on this first item here the first thing you can see a field name control name so here you need to put the filters name so i wanna keep it under web design category or filter so here i'm putting the control name that we have put under the filterable controls that web design and now give this item name a name so whenever anyone hovers on this portfolio item they can see the name let's say i am a web designer and i have done a web project for my client so i can put the project name here in this field item name so here i'm naming it alpha web project and then if you scroll down you can put here a short summary of your project so after hovering over on it you can see the project title name and the project description here let's now scroll down here you can select the image just click over on this image now go to upload files select files now from inside the images inside portfolios let's upload all images together then we can select one to put inside on the first portfolio so for now i'm selecting all and click on open to upload on wordpress so for the first portfolio i'm selecting this image and let's now click on insert media here we go here is our first portfolio image all right now we can keep all other settings the way it is now let's add another fruitful item so i'm expanding the second one so here first i wanna keep it under the e-commerce filter so here under control name here i'm typing e-commerce and then item name here i wanna put one of the e-commerce project that i have done for my client so here i'm typing shop bolt e-shop project and then the paragraph takes place keep it like this and then here is the image option click on choose image then for this one i want to select this image click on insert media here we go now let's have a look we are now under all tabs so we can see all the portfolios here but if we now click on web design now only we can see the project that's under web design filter and if we now click on e-commerce now we can see only the project that's under e-commerce filter very simple so now click on all again and only to not make you bore i'm adding all other portfolios really quickly and i'm coming back to you [Music] okay so i have added four more portfolios so now we are under all tab so we can see all the portfolios if we now click on web design we can see only the portfolios that's under web design category and if we click on e-commerce we can see now the portfolios that's under ecommerce filter or e-commerce category all right now let's do some styling with our portfolios so from left let's scroll up a bit and let's go under style tab now first here background color i want to make the background color to transparent so i'm dragging this bottom bar to the very left like this now let's expand the control style so from here text color i wanna make it pure white okay and now let's go under active tab here so right now the all this one is activated so for the activated one text color let's keep it white but the background color i want to set it to global yellow this one all right and now the last thing i just wanna change the color of these two links or two icons because i want to match its color with our whole website color so i wanna make its color to our branded yellow color so to do that from left here you can see icon style expanded now background color i want to set it to global yellow so right now these icons colors are yellow and lastly i just want to reduce this button size or link icon size is a bit smaller so to do that just scroll down here you can see the icon size it's 50 pixel instead i just want to make it 40 so right now it looks great so now to save our work just click on this update button so we have completed our beautiful portfolio section it looks really really great if we click on web design we can see only the web design categorized portfolios and also let's click on all then if we hover over on it if we click on this plus then we can see the image on a nice light box also we can navigate through these right arrows like this all right let's now create our next section and we will be creating our client reviews section and you know client review sections are so important because whenever anyone visits on your website the most important thing they notice that's your client reviews and depending on your client reviews they decide they will hire you or not so keeping a client review section on your portfolio website is crucial all right so let's create a review section and again i just want to duplicate these existing portfolio sections just right click on the 6 dot and click on duplicate now let's scroll down it's duplicated underneath here so first i just wanna delete this filterable gallery from here right click here and click on delete and here instead of my portfolios i wanted to say the first part client and the second part reviews or yeah reviews so it says client reviews now underneath this client reviews heading i wanna add another widget that's the testimonial widget so i'm searching here testimonial here it is the testimonial now let's drag this underneath this heading here so here first under content tab inside this content field you can put your clients reviews so first here on the left under content tab here inside this content field you can put your client real reviews and then here you can put your client logo or headshot and then here you can put the client's name then the client's title or their company name like that let's do it so first here i'm putting a real review that one of my clients sent me after a successful project completion so i'm just pasting that review here and then here i wanna put a headshot of that client so i'm clicking here on choose image let's now go to upload files select files now inside the headers folder i wanna select the client headshot from here and click on open now click on insert media so here i also want to put her real name her name is daniel dino and here i'm putting her real job role that's webcaster design agency owner now let's scroll down here you can see image position i wanna make a top like this now let's do some styling with it so from top let's go under style tab so text color i wanna make it pure white typography one family let's make it open sense font size 16 pixel point to 8400 is fine but line height i want to put here 1.6 em all right now let's expand the name so the text color i wanna give it the global yellow color and typography the fun family open sense let's keep other things default and then expand the title i just wanna make its color a bit off white like this alright so if you wanna put only one testimonial then you can keep it like this but i wanna keep a few more testimonials so for that first i wanna take an inner section so here i'm dragging an inner section underneath the heading here so inside this inner section you can see here two columns so i just drag this testimonial inside the left column here so to do that just put your cursor on this blue pencil icon grab it and drag it inside the left column here cool and right now i just want to duplicate it couple more times so let's just right click here click on duplicate and this one is the empty column so right click here and click on delete it's gone and now instead of two if you wanna create four testimonials simply just hover over on these six dots of this inner section right click here and click on duplicate so now we have got four testimonials here and again only to not make you bored i'm just changing all these testimonials with my real client testimonials and with their headshots their name and their job role and i'm coming back all right now i just wanna do a bit more styling with this reviews like if we now add some border with each of the reviews it will look more good also i wanna add some breathing space inside of each testimonial so to do it just click on this pencil icon go under advanced tab now let's add 20 pixel padding all around it and let's add some borders so here click on the border border type let's select the solid border with one pixel and border color let's make it white first but then i wanna make it more transparent like this all right but now you can see the border and inside padding only applied on to the first review so i wanna do the same thing with all other testimonial but i don't have to do that one by one we can just right click here then click on copy and then right click here on this review and click on paste style same for this one right click here and click on paste style also for this one right click and then click on paste style awesome it looks really clean and decent now now we only have two sections remaining on our website that's our blog section and then our contact section so first let's create our block section so similarly let's just duplicate this section right click on the six dot click on duplicate now scroll down here the client review section duplicated now first let's just delete these inner sections also let's delete this one now here instead of client reviews i wanted to say the first part my and the second part blog now here underneath this my blog heading i wanna show here our blog post but we have not posted any blog post from our wordpress dashboard so before doing anything with this section let's first post some blog post so far whatever we have done with this website to save it just click here on this green update button and now let's post some blog post so to create a blog post we need to go back to our wordpress dashboard so from left click on this hamburger icon and then click on exit to dashboard so to create a blog post from left here you can see posts from there let's go to all posts and here you can see a dummy blog post that say hello world it came with wordpress by default but i don't want that so i'm clicking here on trash now let's create a blog post really fast to create a blog post click here on add new so first here is the title field put a blog post title inside here like this and then inside this visual builder or visual text editor you can type anything i'm just giving you an example like here i'm writing my name is jim bahad and you can do anything inside this visual builder it's almost similar like google doc so let's say if you wanna make this gym for the text bold just select this gym for the text and from top click on this bold icon you see it's instantly bolded to see more options of this visual builder just click on this toggle icon then you can see from here like if you want to change any of these text color just select it and from here you can change it to any other color you want also for giving you an example here i'm writing go to my website and if we now wanna make this website to a link just select this website text then from top click here on this insert or edit link icon then here i'm putting my website url that's https forward slash jim farhad digital.com then hit enter this website text is instantly linked to my website so actually i have a complete different tutorial where i have explained everything how to write a perfect blog post using this visual builder i will also put that tutorials link in the description but for now i'm just putting here some dummy text like this so here at the top this is our blog title and everything you will write inside this visual editor or visual text editor that's your blog's main content and also if you wanna give it a featured image or thumbnail image you can do that from right side scroll down a bit more here you can see the featured image option so just click here on set featured image now let's upload files select files and from inside blog post images folder i just want to select this all because i will be posting couple more blog posts so let's click on open so for this blog post i'm selecting this featured image and click on set featured image all right now scroll up and from the right side click here on this publish button to publish this blog post so similarly i wanna create couple more blog post by clicking here on this add new button so again not to make you bored i'm creating those blog posts really fast and coming back to you okay i have posted two more blog posts and to see all the blog posts we need to go under posts to all posts now here we can see the three blog posts that i just have published and now my goal is to show this blog post on our website's home page under that my blog heading so let's now go back to our home page so from pages let's go to all pages and here is our home page let's now click here on edit with elementor so now we are inside eliminator page builder and we wanted to show our blog posts under this my blog heading and to show blog posts we need to drag here a widget says post grade so let's now click here on this rubik's cube icon and here i'm searching for post grade so here is the post to grid element and also you can see it's coming from essential add-on as you can see an essential add-on icon on the top right corner of this element but all the time if you search here on post grid you may not find this post grid element and for some reason if you don't find this element then you can just go back to your wordpress dashboard and from left click here on essential add-ons then go under this elements tab here and then under this global control just click here on enable all then let's scroll down and very bottom here click on the save settings button here all right so it says setting saved now let's go back but here we can already see the post to grid element so now just drag this post to grid element under the my blog heading here boom now we can see all the blog posts here under this my blog heading all right now let's customize these blog posts here really quickly so first from the left here you can see posts per page so on the home page we only wanna show three posts so instead of four i'm selecting here three and then under layout settings let's click here here a column instead of four i wanna make it three then layout instead of masonry i wanna make it a grid and then i wanna make it look really really simple so i just want this thumbnail image then the title and the exact text i don't want any other thing like this read more or author image author name then the post date i don't want all these so first from left here you can see show excerpt is turned on yes i wanna keep it turned on but except words i want to increase the words a bit more so instead of 10 i'm making it 15 and then show read more button no i don't want that so i'm hiding it also all this metadata i don't want any of this so show meta um making it hide so simply just the featured image the title and the excerpt all right let's now do some styling with it go under style tab now first the post background color i wanna make it a darkish color that has 252525 now click outside now i just want to do some color and typography steps so click here on color typography and spacing so the title color i want to make it pure white and then title hover color on hover i wanna make the color to our branded yellow color then the typography let's make the fonts to pop in and font size let's make 18 pixel and font weight let's make it 700 all right also i just want to add some margin at the bottom so unbind the margin and only bottom i want to add 15 pixel of margin now let's do some style with the excerpt so the exact color let's make it pure white then the exact typography let's make the font family to open sense font size let's make it 15 pixel and give it a line height to 1.6 also i wanna add the margin bottom with this except so just unlink the margin and margin bottom i wanna add 20 pixel to me it looks perfect and it matches with the overall design of our website now if we hover over on it we can see an arrow here but i don't want that so from left here you can see hover card style i just wanna delete this arrow icon so here is the delete icon click here now if you hover over on the thumbnail we cannot see that arrow icon and if we hover over on the title we can see our branded yellow color cool so we have completed our block section as well now to save our work click on this green update button now let's create our very last section that's our contact section so again instead of creating it from sketch by clicking on this plus icon i just wanna duplicate this column not column this whole section so right click on these six dots and click on duplicate and then scroll down now first i want to delete this post grid element so right click here click on delete and here instead of my blog i wanted to say it in touch all right now underneath this heading i just wanna take an inner section here and the lift column just click over it i wanna make its width to 35 percent and then first inside here i wanna just drag a heading widget and i wanted to say don't be shy let's do some styling with it text color let's make it pure white then typography let's make the font size to sorry from family to poppins then from size 26 pixel and for the weight let's keep it 600. now underneath this heading widget i'm just dragging a text intro widget here and i'm pasting some hop here let's do some styling with it as well so next color i want to make it pure white and typography let's make the font family to open sense and concise let's make it 16 pixel all right now underneath this paragraph i wanna add an icon list so just click on this cube icon and here i'm searching for icon list here is the icon list just drag it underneath this character here and i just wanna use two icon lists so i'm deleting the third one and inside the first one i wanted to say mail me and then here i wanna use a html tag that beer to give it a line break and then here i wanna take a b tag that's for making anything bold then inside this starting and ending b tag i wanna put my email address that's gym mail.com of course it's not my real email address and then i want to link it to with my real email address so whenever anyone click over it they can send me directly email that's why here under link field i'm putting mail through column then my email address and here i want to change the icon so i'm searching for envelope let's select this one click on insert all right now let's expand the second list item here i wanted to say call me oops call me and then again uh html tag break to give it a line break and then inside a b tag i want to put here a phone number of course it's not my real phone number and also i wanna make this phone number clickable so whenever anyone click over this phone number they can directly call me so to do it i'm just copying the phone number from here and then here inside link i'm just typing tail then colon and then i'm pasting the phone number that's it and now here you can see apply link on so instead of full width i wanna make between line all right now let's do some styling with it so go only style tab so first expand the icon tab here icon color i want to make it to our branded yellow color and let's make it size more bigger so let's make it 40 or 39 is fine and then text let's make the text color to pure white color or a bit of white color like this all right and typography let's make the front family to open sense font size 15 pixel and font width let's maintain 600 and now let's expand the list cab from here because i want to add some space between these two items so i'm just dragging this place button to the right let's keep it 15 like this and of course i wanna change this x icon with the phone icon so just go under content let's expand the second list then instead of this x icon here i'm searching for phone let's use this one click on insert it looks perfect now all right now underneath this i wanna put my social media links so let's just click on this rubik's cube icon again and here i'm searching for social so here is the social icons widget just drag it underneath this so here you can see the facebook twitter and youtube social icons if you want to add more you need to just click here on this add item then click on this icon now you can select any social media platform icon from here let's say i want to add whatsapp so i'm selecting whatsapp and let's now click on insert so here inside the link field you can put your whatsapp url here if you have a facebook page then inside this facebook feed you can put your facebook page url here so here i'm putting mine there's my facebook page url so in the similar way you can put your twitter handle url or youtube channel url here all right now let's do some styling so from here shape instead of rounded i wanna make it to circle and alignment i wanna make it to left align all right now let's go under style tab so here color instead of official color i wanna use the custom color then the primary color i want to make it a transparent color so i'm just dragging the bottom bar to the very left and then the secondary color though by default it's white but i want to make it white to make it not to be overrated by anything now let's make the size to 20 and here is spacing let's give it 12. now i wanna add a border so here border type let's give it solid and width one pixel and border color i wanna give it the default white or the pure white color like this also here on the icon of our tab i just wanna set the primary color to our branded yellow color so if we now hover over on it it becomes yellow perfect now inside this right column i want to make our contact form so to bring a contact form inside this column we need to create a contact form from our wordpress dashboard so to bring our contact form inside this column first we need to create a contact form from our wordpress dashboard so for now whatever we have done to save it let's now click here on this update button and let's now create a contact form from wordpress dashboard so let's now go back to what is the dashboard click on exit to dashboard and you may remember we have installed a plugin says wp forms and as we have installed the wp forms plugin so you can see here a link on the left that says wp form so just hover over on it and from there click on add new so first here we can give a form name here you can give it any kind of name so i'm just naming it james form and then here it says select a template i wanna select this one simple contact form so just click here create a simple contact form so this is the wp forms contact form builder here you can see the name field and here's the email field here's the comment field so this is the default format but if you want to add more fields here like if you want to add here a phone number field then on the left you can see here a number option or number field option if you click on numbers see here is a new field has been added that says number also if you wanna drag a to the top of the comment field you can do that just click over it drag it and drop it at the above of the comment field like this also if you don't want to keep these numbers filled from the right just click on this limit icon to delete it yes i'm sure click on ok all right so i wanna keep this name field so it will take the first name and last name but i wanna decorate these fields in a different way so i'm just clicking on this name field here then on the left you will find all the options that related to this name field so here the label name is name that's fine and actually i want to keep it required that's fine as well now let's click here on advanced option i'll scroll down now i want to put some placeholder text inside this field so inside here this first name field i want to put the placeholder that first name and inside the last name field i wanna put the placeholder to last name then scroll down i wanna hide the label also i wanna hide the sub labels let's do the same with the email field and the comment field so i'm now clicking on the email field go inside the advanced option scroll down here please folder text i want to say your email address also i want to hide the label now click over this comment field go inside advanced options scroll down here facebook text your message oops not our message it's message then hide the label all right now i also want to change this submit button text so to change it from the left click here on the settings tab now here under general tab you will find all the general options like here is the from name that's jim's form you can put any other name if you want so from here i just wanna change this submit text so the button text should say send message all right now let's go inside this notification tab so i wanna keep everything default within this notification tab and i highly recommend you to not messing with all these fields because the default settings is fine but the only thing is here you can see the send to email address by default you can see within this highly bracket it says admin email so it's basically the email address that you are using on your wordpress website so let's say if you wanna receive the contact form information on a different email maybe in your other gmail or yahoo email address then instead of this admin email you can put your other email address like gym gmail.com or any other email address you have but i wanna receive the email address on the default email address that i have given on this wordpress website so um just keeping it the way it was all right now let's go inside this confirmation tab here so by default it said to message so whenever anyone complete your contact form they will put their first name last name email address and a message and then they click on the submit button after the successful submission a message will be appeared on that page that will be saying thanks for contacting us we will be in touch with you shortly also there are more options like instead of message you can select here go to url so after from submission if you want to redirect your visitor to any other url you can put that url here but i want to keep it to that default message that's fine for me so we are done with this form to save this forms information just from the top right corner click here on save all right now click on this x to exit now let's again from pages go to all pages and here is our home page let's now click here on edit with elementor and this time i want to open it from a new tab otherwise we'll have to always back and forth from the workpiece dashboard to elementor page builder that will make our working progress slower that's why i opened the elementor page builder in a new tab it's still opening though and on the other tab here is our wordpress dashboard all right now let's scroll down at the very bottom of our website scroll more so here inside this right column we wanted to put our contact form so to put our contact form here we will be using wp forms of widget so here i'm searching for wpe forms and we will be using the wp forms widget that's provided by essential add-ons you can see the essential add-ons little tiny icon at the top right corner of this widget and for some reason if you don't find this w crop forms widget that's provided by essential addon again just go back to wordpress dashboard then from left click on essential add-ons go under elements tab and just click here on enable all and then click on save settings so it says settings set all right now let's go back to elementor page builder now let's drag these wp forms elements inside the right column here and from left it says select a form we have created the gyms from so it's showing the gyms form let's select that form first here we can see here jim's form but i don't want it to be displayed so here title i'm just hiding it let's now style our contact form so let's go under style tab so here the form container everything default is fine so minimize it let's go inside input and text area so first i want to set the background color to a black looking color that has 253525 now click outside next color let's make it pure white and now you can see a border around with all these fills but i have not given this border and i'm not sure from where it's coming so i just want to hide these borders to do that here border type i'm selecting solid let's give it a border width to one and i just wanna make the border color for transparent color so i'm just dragging this to the very left like this all right now let's add border radius 35 pixel and also i wanna add some padding so here is the padding option let's add 20 pixel of padding and i want to change the typography so here is the typography option let's make the fun family to pop-ins all right and now let's go inside this placeholder tab i just want to make the placeholder color to black oops not black let's make it white and let's now make it more transparent like this perfect now let's do some style with this button so click here on submit button so first the background color i want to make it transparent and the text color let's make it to white now let's give it a border border type solid with one pixel and color our branded yellow color now let's add 35 pixel of border radius and heading on the top 16 pixel on the bottom 16 pixel and on the right 50 pixel on left pixel and you know on the hover i just wanna change the background color to our branded yellow color like this it looks perfect now all right now let's click on this update button to save our work so we are almost done with our website we have created all these beautiful sections and i have shown you everything how you can create these sections step by step by yourself now let's make our website tablet and mobile responsive as well so to take it how our website is looking on mobile device and tablet device we can do that from inside this elementor page builder so let's first have a look how our website is looking now on tablet device to check it from here on the left bottom you can see here a responsive mode icon click there and first let's go to this tablet mode so this is how our website is looking on tablet device we need to reduce the font size of these two headings let's now have a look on other sections this section looks perfect on tablet this section also looks perfect on public device our services section looks perfect on tablet device portfolios looks perfect and the client reviews looks perfect block section looks perfect on tablet device and our contact section is also looks perfect so we only need to fix our top banner for tablet device so let's just scroll bit up okay so we only wanted to reduce the font size of these two headings so let's now just click over this heading here now let's go under style tab and here click on typography so here beside the size text here you can see a tablet icon here so whatever font size we will be putting here that will be applied only on tablet device so only for tablet device i wanna give it concise 236 pixel also for the second heading click over it go under style tab and here's the typography let's make it 36 pixel only for tablet device and i want to give it a line height that's 1.6 it looks perfect but on the tablet device you may notice on this banner section there are lots of space at the top of this section and also at the bottom of your section so i just wanna reduce it to reduce it just click on the six dots now go under advanced tab you can put some heading here but i don't wanna do that so let's just go back on the layout tab and here minimum height you can see the tablet icon also here so whatever minimum height we will be putting that will be applied for the tablet device only so let's now give it a minimum height in pixel it's 603 okay let's make it 600 it looks perfect now all right so our website is looking great on tablet device let's now have a look how it's looking on mobile device to check it from the top sorry bottom left click on the responsive mode icon again and click on mobile okay so this is the mobile view of our website right now it looks almost perfect but we need to do some work okay so let's start from the top so the first thing i want to do i want to switch these two inner columns because whenever anyone visits your website and at the very beginning if they just see a picture of you that doesn't make any sense so i just want to put these text these headings at the top then i want to put this image underneath these headings and paragraph so we can do that using a really simple click let's now click on this six dot here now let's go under advanced tab now from left click on responsive and then here only for mobile device here you can see reverse columns turn it on so now these headings paragraph and button came to the top and then underneath here you can see our image now let's do some styling to make it adjustable with mobile view so let's click on the 6 dot again to select the section now expand the advanced tab i just wanna add some padding at the top so unlink the padding and on the top i wanna add eight pixel of padding now let's select this column go under advanced tab and bind the padding and on the right hand left i just want to give 20 pixel of padding and now click on the heading for the mobile view i want to go inside typography and let's make the font size to 34 pixel same for the second heading from typography let's make the font size to 34 pixel also i just wanna add some margin at the top of the below heading so just go under advanced tab and bind the margin and on the top let's add 10 pixel of margin and now i want to make it centered so from content let's make the alignment to center for mobile device also for this one go under content and make the alignment to centered now let's select this paragraph text go under the style tab i also wanna make the alignment centered for mobile device also for this button click on this button the alignment for mobile device i wanna make it center also i don't want this matching top on the mobile device so let's go under advanced tab and unbind the merging instead i want to add some margin at the bottom so here bottom let's add 20 pixel of margin all right now our banner section looks really really great now let's go to our next section that's our about me section so this section looks really great on mobile device also this my skills looks great then the experience and education section looks great and here this my services text looks so big so i just want to adjust it to adjust it click here on this pencil icon now go under style tab from here expand the color and typography tab now here the typography only for mobile device i want to set it to 42 pixel like this also you may see these spaces are huge in between these two sections that's why i want to reduce the heading from the top and bottom of each sections so to do it just click on the six dots go under advanced tab first unbind the padding and on the top i want to add 40 pixel also on the bottom i want to add 40 pixel now it looks perfect now let's scroll down scroll down this heading also looks huge and also we need to reduce the space within the section so i don't want to do it each time manually so we can do it easily so i'm just going over this section as we have adjusted the font size of this heading so just right click here and click on copy now let's scroll down here on this heading right click here and click on paste style how it looks great and also on this section go under advanced tab unbind the padding on the top for the pixel and bottom for the pixel for mobile device now let's scroll down everything looks great on mobile device also we need to reduce the font size of it so right click here click on crystal style looks perfect now let's click on this section icon go under advanced tab unlink the padding on the top let's add for the pixel and bottom for pixel let's do the same with other heading and section so here my blog right click here click on paste style and on the section go under advanced tab unbind the padding top and bottom add for the pixel of padding now let's scroll down everything looks perfect so also here getting touch is huge right click here click on paste style and now select the section by clicking on the six doors go under advanced tab unbind the padding on the top add for the pixel and bottom for pixel of padding so now everything is looking great on mobile device as well the my blog section here is the fancy view section here is the portfolio section looks great on mobile device and here is the services section looks great here is about me section with other subsection everything looks great clean and organized i really like it so whenever you are happy with all of your work all of the responsiveness you have adjusted then don't forget to click here on this green update button to save your work all right so we are almost done with everything of this website now let's do some final touch so now i wanna customize our header and footer so the first thing i wanna create a logo and put that here on the top left and i wanna create our main navigation or menu bar here and i want to create that as a jump button like we will be creating here about reviews portfolios navigation menu so whenever anyone clicks on about that jumps to this about section when anyone clicks on the portfolio link or portfolio menu item that will jump to the portfolio section like this okay so first let's create a main navigation so to do that let's go back to our wordpress dashboard and from left here you can see appearance from there let's go to here click on menus so first here main menu we need to give it a name so i'm naming it main menu we can name it anything you want and here we need to set the display location i'm setting it to primary menu if you don't set it to primary menu it won't show on the home page top right corner so checking on this primary menu is very important now let's click here on create menu and within this menu i wanna add some custom links so here click here on this custom links so the first link text i wanted to say about and url is hash then about now let's click on add to menu the next one i want to say is our vsas and the url hash services click on add to menu next one portfolios and url hash portfolio add to menu next one i wanna name it reviews and url hashtag then reviews click on add to menu then next link text blog and url hash blog at tomano and the last one link text i wanted to say contact and url that's a hash contact click on add to menu so here is our all menu items also if you wanna drag any of these to the above or below you can just simply drag this like here if you wanna drag this reviews to the top of portfolio you can do that like this but i wanna keep the reviews under the portfolios here and now let's click here on save menu all right now let's have a look here on this about link if we expand it you see we have put a url that has about and we need to use this exact name without this hashtag on our css custom id so i'm showing you how to do that let's go back to our elementor page builder so let's scroll down this is our about me section so to grab this section click on the six dots now go under advanced tab here you can see a field that says css id in this field we need to put that url that's about a b o u t so if we now go back to our menu again here you can see the url is hashtag then about and on our elementor page builder under advanced tag the css id we need to put that about without the hashtag let's do the same with all other sections so here is our my services section let's click on the six dot here the css id that's services then the next one is the portfolio so here css id i'm typing here portfolios then the next one the reviews click on six dot and the css id it's reviews next one this one is blog so here css id i'm putting blog and the last one this is the contact section so here i'm putting the css id that's contact all right now click here on this update button to save our work okay now click here on this eyeball icon to preview our page so here you see our top navigation has been added on the top right here and if we now click on about that jumps to this about me section also if we now click on services that take us to the services section similarly if we click on this contact menu item that jumps to the contact section how cool is that all right now here at the top left instead of this gym production test i wanna add a logo here but before adding a logo i want to show you how to create a logo for free using an online tool so to create a logo we need to go to a website that's logomecha.com it's actually logo maker without the e and it's completely a free tool to create a logo for your website or for your business okay so first i want to take an icon so from here i'm searching for a pointer icon i'm typing here pointer hit enter so you see here are tons of pointer icons here let's select any of them from here okay i like this one or maybe this one let's click on it now you can drag it like this you can make it bigger just by dragging its corner or you can make it smaller just dragging it inside like this also if you want to change its color from this right color wheel you can change the color like this but i wanna keep the color to black let's drag it to more left like this and make it a bit bigger this way and now i want to add a text so to add a text from left here you can see a t that t stands for text click there and here i wanna write jf then space dg tell now similarly you can change this text color from this right color wheel so i also wanna make this color to black then you can change its font from here so there are different categories of fonts so if you click here and instead of simple and modern if you select the handwriting then you will find different handwriting fonts from here so if you select this one there's another handwriting font but i wanna keep it simple so here i'm selecting the simple and modern and the font family let's keep it this one it says passion one now let's decrease its width by dragging it from the left corner like this and also i want to make it bigger so i'm just dragging it from this corner in this way now let's align this text with our icon like this so we have created our logo very easily in this way and when you are happy with your logo then from the top right corner just click here then it says if you want a very high resolution logo then you need to pay them 19 but for our website we don't need a very high resolution image so we are happy with the low resolution logo so now click here no thanks download low resolution file i'm clicking here so it's downloaded now let's close this pop-up because i want to create another logo actually the same logo but i just want to change the color so select the icon again and i want to change its color to white also let's select the text and i wanna change its color to white we cannot see the logo now because the background is white and our logo is also white that's why we cannot see it right now the reason i'm taking another white logo because i want to use it on other place i will show you that very shortly but for now let's save this logo so again click here on this top right corner save logo and click here no thanks download low resolution file so now we have two logos one is black and another one is white version alright now let's go back to our wordpress dashboard and to change our logo we need to use our theme customizer so now from here you can see appearance under that you will find this customized link click there on customize so we are now inside our theme customizer as we are using extra theme these all these options are provided by extra theme now let's change our logo from here so to change our logo from left click here on this header or header builder now under general you can see here logo click on that now here click on select logo go to upload files click on select files now let's upload the logo that we have just created on logomaker.com and click on open let's select the black one and click on select click on this keep cropping here we go but the logo looks too big for me so here i want to adjust the logo width i want to make it to 180 pixel also let's scroll down here you can see display side title and that's why we can see her gym first production but i don't want that so from here i'm disabling the display site title it looks perfect now now let's scroll down a bit more here you can see it's the option for select site icon so site icon is basically the fav icon what you can see at the very top of the browser that's little tiny icon so to update that click here on select site icon go to upload files select files and i wanna use this fab icon so i'm just selecting this one and click on open let's now click on select skip cropping here we go at the top of the browser here you can see our little tiny fab icon or site icon all right now let's go back go back one more time because now i wanna change all these menu items color by default it's blue and when we hover over on it it becomes black but i wanna change that so to do that from left let's now click on global now click on colors so here you can see the link color i want to change it to pure black so now our navigation items are black now click outside and the link over color i wanna set it to our branded yellow color so that's hash ffb400 all right now if we hover over on these buttons or menu items it becomes our branded yellow color all right now let's go back go back one more time now i wanna customize our footer so let's just scroll down and this is our footer right now so to edit our footer from left here you can click here on this footer builder let's scroll down so we can show the footer at the real time so now we can see our footer here at the bottom in this place so first i wanna change the background color of our footer so let's click on this pencil icon here and then from left click here on this design tab now from here you can see the background let's click on this color picker and i wanna change the background color to pure black color and then let's now hover over on this copyright text click on this pencil icon first let's go under this design because at this moment we cannot see the text so let's first change the text color from here i wanna set it to pure white like this and then go under general tab here now you can write everything you wanna write inside this footer area so by default it says copyright then a copyright symbol and then you can see here inside this bracket it says current year basically it's the dynam here so if you keep it like this you don't have to update year in every new year like it's 2021 so by giving it the current year it's showing now 2021. in 2022 it will automatically become 2022 and then here you can see the site title as our site title is the gym for production that's why we can see it right now and also here you can see the part by text but i don't want that so i'm removing this text from here cool so it's just sweet and simple copyright 2021 gym first production and in between 2021 and gym for the production i wanna put a pipe so i'm putting my cursor here and let's put a pipe symbol here awesome and lastly in between our footer and this last section i want to add a tiny border here so let's go under design tab actually not on this design tab let's just click here on this pencil icon again and then go under design tab now here top border size i want to give it one pixel and then border color i wanna make it white but then i wanna reduce the transparency like this cool now from the top click here on this publish button to save our work and let's now click on this x to exit and let's now have a look how our website is looking right now so if you hover over on our site name click here on visit title i'm opening it from a new tab here we go so we can see our beautiful logo here at the top left and on the right side we can see our navigation menu if we now click on this about that jumps us to our about me section if we now click on services that jumps to the beautiful services section if we now click on the review section also if we click on the contact that jumps us to the contact section very cool and here at the bottom we can see our nice footer that we have just created all right so we have completed our beautiful home page let's now customize our blog page and single blog post page so to do that let's go back to our wordpress dashboard now from left here pages go to all pages here is our blog page let's now click here on this view to see it at this moment how it's looking so at this moment our blog page is looking like it so here on the left we can see all the blog posts that we have posted and with each blog post we can see the featured image the blog title and the blog excerpt also on the right side here you can see a sidebar and within this sidebar here is a search bar option and here you can see some recent posts and some other widgets like recent comments categories meta all these alright so now i wanna customize our blog page to customize it from this top black bar you can see here customize now click there so to customize our blog page from left let's now click on blog and then click here on blog or archive so here you can see all the blog posts with their featured image in case if you don't wanna show these featured images you can just turn it off by clicking on this eyeball icon so i'm clicking here so we can no longer see the featured images but i want those featured images so i'm just clicking here on this eyeball icon again we've got back our featured images again and in the same way you can select which option you wanna display and which options you don't want to display so you can select all these options from here on this left bar like here you can see all this meta option one is comment another one is category that's why you can see here leave a comment then the category name and here is the author name let's say if you don't want to display this category name you can just click here on this categories eyeball icon now we can no longer see the category name here also if you wanna get it back just click on this eyeball icon again otherwise it looks great and also you can adjust the sidebar i'm also showing you that very shortly but before that let's customize the single blog post page so to customize the single blog post page we can click on any single blog post page link let's now click on this blog post so right now we are inside on a single blog post page so if we now want to customize this single blog post page then from left let's go back and click on single post you can do the same customization like the block archive page here like you see you can enable or disable the featured image you can control all these submeta item options also at the bottom of each single blog post page your visitors can leave any comment here i really like the way it is and i only want to customize the sidebars because on this sidebar i only wanna keep the search bar and then the recent posts but i don't want these recent comments archives category and mate options so let's just click on this pencil icon from right then on the left you can see all these available sidebar widgets like on the right side here you can see the search recent posts recent comments these are actually coming from these left options here you can also see search recent posts recent comments so like i said i only wanna keep this search and recent posts widget and i wanna delete this one so just expand it click on remove also this one remove it categories remove this one and the meta i also want to delete this one all right actually we are using extra free theme that's why we don't have enough customization option but so far it's looking right now i'm happy with it so from the top left click here on this publish button and let's now click on this x to exit so this is our blog archive page is looking right now it looks very light and simple i really like it and if we click on any single blog post now it's our single blog post page it's also super clean here's the featured image then here is the title and here's the description also you can go back to your previous post by clicking here and then here is the living comment option everything looks simple and sweet and from our blog page if we click on our logo we will go back to our home page here we go now i only want to show you one more thing like on our home page if we click on this button more about me that will take us to this section about me section also i will show you when anyone click on this download cv option how you can upload your cv so people can download your cv by clicking on this button also if you scroll down here under my services if any of your website visitors click here on get a code that will take them directly to this contact form so to do it we need to go inside elementor page builder you can go to elementor page builder from wordpress dashboard or you can go that from this top black bar so here you can also see edit with elementor let's now click here so first let's make this button clickable and you know we need to get the css id first so our about miss section css id to get that click on this six dot and go under advanced tab the css id is about i'm just copying it and let's now click on this button and here link after the hashtag i'm putting here about so if we now click on this more about me that take us to the about me section so the same concept for these services let's now click on this get a code button and the link i wanna link here the contact section also for this button here i wanna type contact also for this button here contact so you can put all of this button link to contact so whenever anyone click on this get a code button that take them directly to this contact form section all right now the very last thing that i wanted to show you how can you make this downloadable cv button in action okay so first you need to upload your cv on this wordpress website so to do that let's go back to our wordpress dashboard and then from left here you can see media from there click here on add new now let's click here on select files now you need to put your cv in a z formatted file so if you have your cv into a pdf formatted file just make it a zip formatted file and upload that file to your wordpress website like this like here you see it's a zip formatted file so now click here on this edit link and on the right here you can see the file url just click here on copy url to clipboard now let's go back inside the elementor page builder now click on this download cv button and just paste that link we have copied and now click on this update button to save our work let's now have a final look how our website is looking so let's go to the front end of our website and refresh the page so here is our header looks great our top banner looks great and if you click on more about me button that takes us to our beautiful about me section and here if you click on this download cv button you see the cv started downloading instantly all right now let's close this underneath that here is our beautiful my skill section here is our experience and education subsection then here is our beautiful services section then our filterable portfolio section so we can go to any section like if you click on web design or e-commerce we can see all the filtered portfolios here now underneath here is our beautiful review section and then here is our blog section and underneath that here is our contact section and at the very bottom you know here is our footer now you know everything in order to create a beautiful portfolio website now it's time to take action i wish you all the best and please feel free to ask me anything in the comment section i will see you in the next video

Channel: Jim Fahad Digital

Views: 22,297

Keywords: portfolio website wordpress, wordpress portfolio website, wordpress portfolio, elementor portfolio, wordpress portfolio tutorial, portfolio wordpress, portfolio website wordpress elementor, personal portfolio website wordpress, portfolio website, portfolio elementor, how to make a wordpress website, how to make a portfolio website, wordpress tutorial, how to make a website, elementor tutorial, jim fahad digital, resume website, wordpress elementor, make a website, wordpress

Id: yOORJVWf6r0

Length: 144min 17sec (8657 seconds)

Published: Tue Apr 06 2021