How To Make a Dark/Light Mode Personal Portfolio Website ~ WordPress & Elementor 2024 for Beginners

first of all I want to tell you a secret that nobody reveals if you have a close look at all the successful Freelancers and agency owners they have one Secret in common they all have a beautiful portfolio website that's the catch yes if you want to stand out from the crowd you must have a portfolio website no matter if you do freelancing on marketplaces like Apper or Fiverr or if you hunt clients from the social media the first thing you should have is your portfolio in this tutorial I'll show you step by step how to create an amazing portfolio website that will attract CS like a magnet and we'll be using all free resources to create this beautiful website let's have a sneak peek on what we will create in this tutorial from scratch we will create a very clean Banner area with headings buttons and social icons about area with your display image and basic information your experience area Services area within beautiful cards portfolio area you can keep portfolios within this beautiful filterable Gallery testimonial Carousel so new clients would know your Worth contact area with a fully functional contact form so when anyone submits this form you will get an instant email notification and of course it has a clean and minimal footer it has a fixed nav bar at the bottom when you scroll the phage they will be autoactivated and the most interesting thing is it has a dark light toggle option so by clicking on this button people can switch to dark and light version of your website how cool is that and most importantly we'll learn how to make this website 100% responsive for tablet and mobile devices can you believe we'll be doing all this just by using a free page builder you don't need any kind of design skills nor any kind of coding experience this tutorial is for complete beginners and by using ele page builder we'll create everything just by drag and drop now let me introduce you to myself first my name is tyer nishad I'm a professional web developer in the past I have completed so many freelance WordPress projects for my clients so basically you're learning all the best methods and techniques from a real professional web developer I'm really excited if you excited like me please give this video a big thumbs up this is the only thing I want from you other than that this video is completely free for you just have a look if you like this video then from YouTube's lead bar you can go to like videos and find this this video easily later all right we will be creating this beautiful website in easy for steps first I'll show you how to get your own domain name and web hosting I'll also provide you a 78% discount link then how to install WordPress how to install a free theme and a free page builder finally we'll start creating our amazing website step by by step I will be also adding a Time step in the description so you can always jump into the necessary part you need let's now start with step number one which is to get the domain name and web hosting so first of all what is a domain name domain name is basically your website address like Facebook has facebook.com Amazon has amazon.com we have gahad digital.com similarly for your website you need an address that will be your websitename.com and what is web hosting web hosting is the storage space for your website all the images text you will have in your website all will be stored on your own web hosting as you are owning your own web hosting so there wouldn't be any limitation you can Rite ands you can upload text or images you can upload any themes or plugins you want you are the in charge of your one website now how to get your one web hosting with a free domain name so first just click on the very first link in the description below this video or you can just go to Jim Fahad digital.com for/ best host and this will take you to a special discount hostinger page so why hostinger in my opinion hosting is the most affordable and also the fastest web hosting provider available just have a look into their trust pilot reviews people are super happy with their hosting speed affordable pricing and customer support now from here you can change your language if you speak Spanish Portuguese or Hindi you can select any language from here one thing I also want you to say is that this page changes quite often in fact they probably change it once a month so if the banner or interface looks different don't worry Don't Panic this happens quite often it's the same website let's scroll down a bit you'll find all different plans by the way here we can see three plans but sometime you may see four plans here but just don't panic because you can create your website with any of these plans but as you are starting out I recommend taking this premium or business plan with both of these plans you can create up to 100 websites for example example today you're creating a portfolio website tomorrow you want to create a Business website and next week you want to create a e-commerce website so you don't need to purchase hosting each time so here with this Premium plan you'll get 100 GB of SSD storage with the business plan you get 200 GB of nbm storage and with any of these plans you'll get all the features like unlimited free SSL so all of your website would be inced and super secure unlimited bandwidth so there wouldn't be any limit how many website visitors you will have free email you can create hundreds of professional email addresses like info@ your website.com or admin aty website.com like this then free domain yes like I said you'll get a domain name for free you'll also get tons of Wordpress features like free oneclick WordPress installation free website migration so if you want to move your existing website from another hosting provider to hostinger they will transfer it on behalf of you how cool is that now let's talk about the security personally I'm very serious about website security and hostinger just nailed it with all of these features like cloudfare protected name servers mware scanners and all of these I've had very bad experiences with other web hosting providers we have got so many malware attacks and we had to pay the hosting providers additionally to use their other security tools but here in the hostinger you're getting all of these security tools for free now let's select a plan like I said you can take any of this plan based on your needs for now I'm taking the Premium plan you can upgrade it later anytime so click on add to cart all right right here you're going to see different options now this is referring how long do you want to host with hostinger so we have 1 month 12 months 14 months and then we also have 48 months first of all I don't recommend going with the one month because it's almost $12 a month which is super expensive and we don't want that my recommendation would be go with 48 months so for the 4 years you just need to pay 2.99 per month that will save you $432 and then after those 4 years you start to pay 7.99 per month which is still super affordable for a web hosting plan that can hold up to 100 websites but if you just want to start with 2 years or one year you can click over here and then in your first year you just have to pay $3.19 per month and you still going to create up to 100 websites and after that first year you start to pay $9.99 per month so the longer the first period the the more discount you will get when you renew your plan so if you have the budget and you want to get the most discount possible you can go for the 48 months and after those 48 months you start pay around 7.99 for month instead of $9.99 per month but wait there is more if you scroll down here here you will see have a coupon code and if you feel with my special coupon code jfd 10 and then click on the apply you will now get a total of 76% discount can you believe we are getting a super fast web hosting with the free domain name for the full year only for $34 what an amazing deal right so I scroll up again here you see pricing is only $22.87 a month for the first 12 months 2.78 a month per the first 24 months and 2.69 a month for First 48 months now let's scroll down put your email here make sure you use your best email address because they will create Hosting account with this email address and then let's put a very strong password here now you see you can pay with your credit card PayPal or Google play or you can even pay using your cryptocurrency also you may see more different Loc payment options based on your country so let's just skip this part and scroll down here and in here I'm just putting my card informations then let's just click on submit SEC payment so from here you can skip this part from here make sure you select WordPress from here now let's click on the select WordPress button so here it says create login details for WordPress account so you know in order to create an WordPress account we need to put our email address and password so my email address is already here so I'm using this one and let's put a strong password I pasted my password then let's click on the next and now it says what will your website look like so right now we don't want any theme so we'll just click on the skip here it says do you want free selected plugins for your website no I don't want it so let's click click on here no I want to select plugins manually and let's then click on the next also we can just skip this so in here it's asking what's your website name so basically it's referring to choose your domain name so let's select a name for our site let's type jfd toots once I typed in you can see on the bottom it's suggesting the domain with the extension like JD to.in J bl. me and jbs.com and more from here you can choose any extension you like but I recommend you to choose that Doom because it sounds more professional and legit so I'm going to choose the doom and I'm just going to click next here it says where is your target audience you can just give this default which in my case they have selected a data center in the United States the closest one they have to my country but in your case it can be a different one so you can just keep it default or change it from here or you can just change it later on so I'm just keeping it as it is and I'm just clicking on the next button now it's installing WordPress we are almost there let's just wait a bit and right now we're at the control panel of the hostinger and from here if we go into the Home tab you will see in the account action it's saying we have sent a verification email to your Gmail account so let's check our email you'll find an email address in your inbox that's called verify your email address now from here we'll just simply click on this verify email now it will take you back to the hostinger C panel with the email address confirmed now from here I want to get my WordPress so from the premium web hosting here on this manage button I'm just going to click this now it will take us to the hostinger dashboard now from here it says WordPress overview let's click that and then under here it says admin panel let's just click on here and it will directly take us to the WordPress dashboard all right so we are at our WordPress admin panel or WordPress dashboard so on the left hand side I'll make you familiar with these options like posts media Pages comments appearance plugin user tools and everything these are actually very easy and self-explanatory but I'll just make you more familiar with this but before doing anything I'd like to clean up the environment around because personally I like to work on a cleaner environment rather than a messy environment so let's just start from here this is the welcome popup I'll just close it by clicking the dismiss button also you can close this drop downs by clicking here or if you want you can open the screen options and from here you can deselect every of them like this now the WordPress dashboard is much cleaner and fresh but I want to clean up more like we can go to plugins from here click on installed plugins we have some plugins already installed here these actually came by default after installing the WordPress if you are wondering what is plugins plugin is basically extra tool or extra add-on which extend the functionality of your WordPress website of course we will going to be use some plugins to build our website but we are not using this specific ones so what can we do is select all plugins by clicking here then go to bulk action select the deactive and then click on apply now all the plugins is been activated now select all the plugins again go to BU action this time select the delete and click on the apply button it asking you that are you sure of course we are sure so just click okay now all the unnecessary plugins has been successfully deleted great and now the next thing I want to show is how you can change your password and other basic user information so from the left side hover on the users and click on the profile in here under profile this is admin color scheme here you can select this light modern or blue color scheme to change the whole dashboard color but this doesn't actually matter that much because only you can see this so I'm going to keep it default and if you scroll down you'll see a language option where it can select any language you can choose your native language or select English language or you can just give the side default so I'm keeping the side default and if you scroll down a bit you'll see you have a input for your first name so I'm going to put my first name thore and the last name nishat and from here in the nickname I'm going to just put my full name and this one the display name is uh important thing so from here you get couple variation but I'm going to choose this variation because the display name Will displayed to users most of the time like this this is a post and the author name here is Jim Fahad so this is actually the display name he choose like in our case we choose this one all right and from here you can choose your email address and this is your website's URL I'm not Ming with these options right now so I'm going to scroll down and from here you can actually change your profile picture this is the profile picture of your wordp dashboard so if you want to change it you can click it here you can just simply change your profile picture and here under account management you can set new password if you click here the WordPress suggest you a very strong password but I'll just use my own password which I can remember easily although it's showing medium but I'll keep it as it is right now now scroll down and you'll see a update profile button just click it to update your profile now at this point I want to make you familiar with two basic terms one is is the back end of our website which is this dashboard and another is front end of our website so this everything what we are seeing right now these all the options all the contents here is our backend website if you want to see your WordPress frontend website you can simply over here on the site logo and click on the visit site I'm opening on a new tab and I'm going on the tab and as you can see this is your WordPress front end website where the whole world can see this portion of our website right now this is looking like this but of course we'll make a custom design of our front end website using page Builders and by the way we can see this black top bar on the top only we can see this as we are logged in as a admin of our website otherwise no user can see this by the way before jumping to the next thing I want to change some simple settings so I'm going to go back to my WordPress dashboard and go to settings and under the settings I'm going to click on General from here in general settings we can change our site title to anything we want like this and in here in the tagline you can actually put some meaningful stuff like best website in California this can actually help you to rank on the search engines then I'm going to scroll down and of course you can change the language and then here we have the time zone settings you can choose any settings date format and time format in between then I'm just simply save the changes then the next thing I would like to do is I'll go to permal Links under the settings and this peral link settings is very important right now the permalink structure is set as day and name sometimes it also can be set on the plane right now it is day and name but I always recommend you to choose this post name because I'll just show you a simple demonstration of difference between plane and post name peral links so here this is the plain peral links in the URL of your website this will be like your website.com bizar number versus the post name here it will be like your website.com SL a page name like about us or a post name so this one looks better cleaner and it's human readable and also it will help you rank on the search engines as well so now I'm going to go ahead and save the changes all right so the thing we are talking about was the back end of our website which is this dashboard and the front end of our website this is the front end of our website right now this is looking like this but of course we can change this there is many way to change the look and feel of your front end website and I'd like to introduce a way that is you can use themes to change look and feel of your front end website so I'm going to go back to our our dashboard under the appearance I'm going to click on the themes and we can see here we have already plenty of theme installed like this one is 2024 this one is 2023 and one and two right now the 2024 is activated as you can see this is the one so for example let's try this one the 2021 I'm going to click on active button so this one is the active one right now and I'm going to go back to our front end website in the new tab and just reload the tab so as you can see the front end of our website has been changed according to the theme now I'm going to go back on the dashboard from here you can actually add new themes in your list you can click on add new theme or click on add new theme from here in here you have access to thousands of themes and also you can search here as well I'm going to search Hello Elementor and I'm going to install this one by clicking there it has been installed and now I'm going to go back to that themes and activate this one now the hello theme is activated and we can see it here by reloading the page I know nothing crazy here but as I have said earlier we're going to use a page builder to build our page so now to do that first thing we need a page builder and what is the best page builder in WordPress yes Elementor and it's completely free to install and use ele element plugin to get the Elementor free version you can just go to Jim Fahad digital.com and also I'll put the link of this page in the description and if you go under important links in this page you will find a link that says get elementer free version so I'm going to go on this link and it will take us to the elim pro purchase page although we are going to be using the Elementor free version but let me just give you a little tour of the element pro version here we have uh different pricing plans for Elementor Pro in the pro version of the Elementor we get some Advanced features like Pro widgets Dynamic content custom code and CSS e-commerce features and many more using these you can not only create your own website but also can create website for clients like like e-commerce website and advanced blogging website very easily so like I said we're going to be using the elementary free version so you can just login for free account from here now from here you can create an account here you can use your Google Facebook or Apple account or you can continue with your email address if you click on here it will ask you for your email address and your password just simply enter and create your account but as I have already created an account so I don't want to recreate the account so I'm just going to sign in and I'm just going to continue with my already created account I'm going to put my password and click sign in okay now after creating creting your Elementor free account you can go back to your WordPress dashboard now we have to install the Elementor plugin so let's go to plugins click add new plug-in and let's search Elementor there you go this is the Elementor website builder and you can see it has 5 million active installations so let's click on install now and then click on activate so now the Elementor is installed and activated now let's add some other necessary plugins let's go to add new plugin I'll Search ENT sh add-ons and I'll install this one and then I'm going to search elements kit and I'm going to go ahead and install this one and find finally I'm going to search mid form and install this and then I'm going to go back to the plugins I'll select the new plugins and from the bulk action I'll select the active and then click on the apply this is the onboard from uh plugin so I'll just skip this all right so let's go back to the plugins and you will see all the plugins are active great and now I'm really excited to show you the power of the Elementor which is this particular plug-in but before anything we need pages to build things right so let's go to Pages by default you will see there is some pages coming from the WordPress so we'll just select all and from the bulk action we will select move to trash click on apply and I'll just quickly close all this popup okay so now we want to create our homepage so I'm going to go ahead and add new page from here I'll name our homepage as home and I'm just going to click publish and again publish now the home is live but one thing if we go to our front end we will see nothing has been changed here the home we have just published is is not showing here but why is that because WordPress shows all the post on the default URL by default but we don't want that right we want our custom homepage on the default URL so to achieve that let's go back to our dashboard under the settings you will see there is reading option click there and under reading settings currently your homepage displays your latest posts but instead we want a static page so we will select this one and from the homepage select the home that we have just published now just click on Save changes so now if we go back to our front end and refresh you will see we have some content that is coming from the homepage we have just published all right now go back to the dashboard in the pages and we are going to build this page using the Elementor page builder so I'm going to click on the edit and from here this button says edit with elementer so I'm going to go ahead and click it and this going to take us to the elementer page builder we can just close this popup so finally where in our element page builder where the front part begins on this right side this is the main building area in the Page Builder and on the left side this is Elementor panel and in here these each items are called Elementor elements or widgets like this heading elements or widget this image element or widget similarly the text editor video button and more if you scroll down here you'll see a part that contains all the widgets with premium features but we are only using the Elementor free version for this tutorial so we are not going to use any of these so we are just going to keep this closed and if you scroll down a little bit more you will see there is more free widgets that you can use to build your website by the way here if you notice one thing in this area everything is exactly same as our front end website here so from here we are going to start creating our Masterpiece now let me give you a basic idea that how this amazing page builder works so from here let's click on this plus icon and select a structure I'm selecting the first one now as you can see it's added a basic box you can change its height by dragging the slider to the right or you can decrease its height by dragging it to the left alternatively you can put custom value like 400 pixel so it's now having 400 pixel of height also I'm going to go ahead and make the justify content Center I'll just explain you this in few moments so let's color this box to color go to the style tab from the left and here here in the background type select classic and from the color click here and you will have a full Color Picker and by using this knobs you can control and set any color you like so let's make it full black so now our box is fully black now let's say you want to add more content here to add new contents all you have to do is click on this grid icon from the top and you will have all widgets shown in the sidebar so let's try this heading to add this heading just drag it from here and drop it inside the box you can change the heading text by triple clicking or from here you can edit from this field I'm just typing JY for hard digital also you can change the text color from the style you can see it's already having a bluish color by by default but you can always change it so click here and from the Color Picker I'm choosing fully white color also here from the alignment you can make your text aligned on the left right or Center I'm keeping this centered then here is typography you can click on this edit icon to open its typography here you can see the font family currently it's Roboto but we can open it and you can see we have all the Google fonts available here so we can type popins and it will suggest it and we'll select this after selecting the text font is instantly changed also from here you can change the font size by dragging the slider here or you can put custom value I'm putting like 40 pixel and this is the font weight with this you can choose the text thickness you can choose the higher number to make the text Bolder and you can choose the lower numbers to make it thinner so I'm going to keep it 600 which is semi bolt and this is the transform you can use this to fully upper case your text or fully lower case your text or capitalize your text I'm just going to keep it default and from the style here you can you can style your text like italic so you can just play with these different options and then I'm going to show you this options the later spacing this later spacing can literally add space between each of your letters so if you drag the slider to the right it will start adding the space between your lers and then then there is word spacing that can add space between each words actually you can be super creative combining these options okay so I'm going to keep everything default and now let's say you want to add a paragraph underneath this heading so click on the grid icon again and drag the text editor underneath this heading here we go you have some dummy text here you can change it or keep it so just for now I'm keeping it and from the style let's change its color something like gray and from the alignment let's select the center to Center the text and you also get the typography option for this paragraph Also let's choose the popins here as well you can mess with the size and everything now let's say you want to add something else like a button underneath this paragraph So I'm dragging and dropping it you can change the button text to like contact me and you can put a link like HTTP colon double for/ Jim Fahad digital.com so whenever a visitor will click on this button it will take them to this link which is great then from here you can choose the Align I'm choosing it to the center if you now want to style this button yes you guessed it right you need to go to the style tab from the text color you can change the text color and from the background color you can choose the background color so um choosing a red type of background color for this like this so right now the button background color is initially red but if you want a hover effect on this like when you hover the mouse over the button you get a hover effect so how you can do it it's very easy just switch to the hover here add a text color I'm going to add white and on the background color I'm going to add a shade of blue so whenever you hover the mouse over the button the button will change its color how cool is that now what if you want some Gap or space between your each elements let's say you want some space from top of this element or from the bottom of of this element at this point let me introduce you the Advan tab in the Advan tab you will find all the advanced properties including the margin padding position and options like Z index and many more we will learn everything later in this tutorial for now let's focus on adding space or gaps so to add space we have the margin and feding these two properties are the most commonly used to add spaces let's try the margin to use it let's first unlink the values and let's say you want some margin from the top of this element so let's add some space on the top like 20 pixel and you see the 20 pixel space has been added from the top and now we want some padding on the bottom so I'm going to give 30 30 pixel space from the bottom and you can see it's added the space now the padding will work similarly like let's try 20 pixel from the top and 30 pixel for the bottom it's adding the same amount of space but it's working a little bit differently we will learn in depth in later in this tutorial so for now let's keep as it is just keep in mind that you always can add spaces between elements using margin and padding so basically this was the very basic demonstration of how a page builder works and now let's say you don't like an element here you can just right click on that element and you will find the delete option here if you click the delete it will be completely gone and if you want to delete the whole main container you can click the cross icon to completely delete it and later if you change your mind you can always hit control Zed to undo your actions or contrl Z to redo the action so to summarize this each items here has three tabs layout style and advanced in the layout it's basically all like basic structure like you can add text you can edit text like that and in the style tab it's all about styling like you can pick a color you can change the typography and everything and advanced tab there's many Advanced options that can help do very Advanced things so now let's just delete the whole thing because at this point I want to make you understand the flex container concept using the flex container concept you can create any layout or any structure all by yourself so this will be very important for you to learn so let's add a container using the plus icon from the structure here you have many structure that you can use so two most common Ed structures are column directed container and the row directed container so let's choose the column directed one so as you know it adds a basic blog and from here we can change the height of the box as you drag it to the right it will increase its height or drag it to the left to make the height decrease so let's custom value of 600 pixel so this is our main container or the parent container if we want to add another container inside this parent container we can click on this grid icon and drag a container inside this parent container now another container is added we can call it child container and the main one was the parent container now from here we are going to select our child container and in content width we will select the full width and from here we will choose the pixel property so it will give us a very straight value so we are going to make it like 300 pixel and for minimum height we're going to make it 150 pixel now I want to make you better understand the parent and child structure so I'm just going to give them different colors so I'm going to make the parent container something like blue but very light and I'm going to select the child container and give it a background color of blue but this time deeper blue all right now I want to duplicate the child container so so I need to right click click on the duplicate and it will be exactly the same I want another one so I'm duplicating again so now before we do anything let's do a little bit tweak on the parent container from the main height we'll just increase the height a little bit so I can show you some stuff so here we have justify content property if we select the justify content Center it will align the inside it to Center if we do justify content end it will put all the contents to the end if we select this one justify content space between it will add equal gap between the Childs similarly here in the Align items if we click on the center it will horizontally Center the child inside the parent so let's left the justify content center now let's get more familiar with this direction property right now this is is selected as column based Direction because earlier we have added the column based container now we can make it row base container by selecting this row Bas direction if we select it you can see the inside contents are ordered in horizontally before when it was the column based it was ordered vertically now it's ordered nicely horizontally so that's how basically the direction works then we have the gaps property if you notice here we have some default gaps in between the child elements this is happening because of the gaps here you can see by default it has column gap of 20 pixel and row gap of 20 pixel so if we unle this and it will become zero and right now you see there is no gap between the child elements so let's add our custom Gap so let's add for example 30 pixel so again it added 30 pixel Gap in between the elements now one thing here if we make the direction to Vertical again you will notice there is no gap between the elements this is because the row Gap is zero right now so if we make the row Gap 30 pixel it will add the 30 pixel gap between the child's again so let's keep it row Direction and remember one thing that you make any settings on the parent container is only applicable for its immediate child containers what I mean by that let me give you a small example for example I want to add a new element inside this middle child container I'm going to click on the plus icon I'll just drag a button inside his child container and if we select this child container and select the justify content Center and align ATM Center center it's showing the effect inside this container now if we select this main parent container and make the justify contain start and align item start you'll notice every blue child containers is affecting by the parent container but not this inner child container because this is the immediate child of this inner container and these blue Childs are immediate child of the main parent container so let's make everything nicely centered so these were the very basic example of the flex settings so basically this direction justify contents then Allied items and gaps these are basically all the flex settings for some reason if you did not understand or got a bit confused you can watch last 3 to 5 minutes to get it properly otherwise I think it's enough theoretical talks because I like more practical stuff rather than theoretical stuff now let's move on to the stepbystep tutorial and trust me it's going to be fun and one thing here as you see that tutorial is hours long so if you are ready to invest your next 1 to 3 hours then you can follow this tutorial but let's say all of you don't have such long time or you are on a rush and you want to make your website really really fast instead of watching one 2hour long tutorial then I have another approach for you you can use ready template from kitp papa.com of course we will create the whole website from scratch step by step but the kitp papa.com is for the people who want to create their website really fast so here just let me give you a quick tour of the kitp papa.com if you scroll down here you'll see you have website of almost every category you can imagine there is business there's portfolio there is freelancing technology and apps Education Health Medical food and restaurant Sport and Fitness you name it these are perfectly dedicated ready templates for each of the category not only you can create fully professional website for you but also you can create website for your clients within a few clicks let's say you have a client who is a lawyer and he wants his website to be fully professional and at the same time he wants it really really fast fast so it has a lower category here so let's get in the lawyer category and check out they have three ready templates within the lower category let's check this one out here let's look around on things a little bit you will find a very interesting thing here before you purchase a template here you can literally see a fully live demonstration from here you can see the full page and interact with everything within this beautiful if frame you can go to another page from here also very interesting thing is you can check the responsiveness of the website like I'm checking the tab version how it looks on the tab or I'm checking the mobile version you can check how it looks on the mobile devices which is really great then if you close this and if you scroll down you will file every single documentation to use this kit also you have a video installation guide of around 3 minutes which fully explain how to use this kit which is amazing so now you can actually watch this only 3 minute video of this ready template and make a whole website out of it instead of watching the hours long tutorial which is really amazing also if we scroll up we can see this fully ready template is only $14.99 which is really affordable because you can actually use this R template for your multiple projects and you can charge your clients couple thousand dollars very easily so that's a great win for you or let's say you are an agency or a freelancer and you need to create templates quite frequently for your clients you can actually grab their buy all package so if you notice they have some discount going on right now so if we click on the grab the deal you can actually get full access to the premium kits like all the kits they have in their website instead of purchasing each one of their kits also you will get their future updates like whenever they will add a new theme you will just get that theme for free and it's for lifetime so right now on their website limited time discount going on for the lifetime access and that's just for only $49 honestly in my opinion that's a great great deal like they have 180 Plus premium kits and they update 10 plus templates per month what more can you expect so now for this particular tutorial we'll be creating a theme so let's go back to the homepage of the kit Papa and search or bit in this tutorial we are going to make the kit like this so as you know of course we will create the whole website step by step in the Elementor but you always have option to buy the whole ready template from the kit papa.com now before jumping in I want to remove these additional contents which are coming from the hello Theme by default to do that from the bottom here click on this setting icon then in the page layout select the Elementor canvas now it will give us a fresh and empty canvas where we will create our amazing website all right so as you know we will create our site and we will have a light mode and a dark mode feature in our website so we will create the dark version first then we will go ahead and create the light version so now I'm taking a container structure from here and inside this container we are going to actually add all the elements and all the things we are going to have in our website for dark version so for your better understanding I'll turn on the navigator from the bottom here and you will see we are having a navigator here from here we can see all structure and all the containers we have in this Builder so right now we are having a container which is this so as you can see in the Navigator as well the container is here so right now it's named container but as I said earlier we're going to put all the elements for the dark version of our website so I'm just going to name it dark version so now let's style our dark version container so from the style tab here in the background type I'll choose classic and background color will be because it's dark so I'm going to put 0 b111 b e so we have a black color now let's add our header section within this container so I'm dragging a container in and as you can see in this dark version container we have added another container so we are going to name it header section and I'm going to select this header section and go to the advanced from here I'm going to make the padding all zero and from the layout I'm going to select the direction row and then I'm going to make the justify content space between and the Align items will be centered then I'm going to go ahead and click on this advaned tab and from here in the padding I'm going to make it all zero so our work is done with the header section so now let's go ahead and add another container inside the header section then from here I'll set the container width 970 pixel then I'm going to make the direction row I'm going to select the justify content space between then I'm going to set the Align items to Center so this is basically the layout of our header section so now I'm going to add a logo on the left side so I'm click on this grid icon now let's drag an image element or widget inside this container now from here we're going to choose image so when you click here you're going to have a whole media management popup where you can upload files and manage them from here you can select the files by clicking this select files and you can just select all files from your desktop and click on the open so it will all be uploaded at once from here you can select your images from your computer by the way if you want to follow the whole tutorial and want to use the exact images I have used then you can go to this page page which I'll put in the description and and under the important links you can see one link is here it says download the images I have used in this tutorial so after downloading the file you will have a folder structure like this one folder is image folder and another is templates so basically we'll be using this images folder to get all our images so now let's go back to our elementer you can just drop all your files or click here to select all the files from your computer select all files and click on open and it will be uploaded all together so from here I'm selecting this image which is our logo for the header so select it like this and click on this select button so as you can see our image is added now let's re rame this image as logo then from here in the style I'm going to select the pixel property to keep it a straight value and I'm going to make it 60 pixel then from the alignment I'm going to choose center right now this apparently does nothing but you'll understand it later why we have selected this so next we are going to add our dark mode icon so I'm going to click on GD icons and then from Search widget I'm going to search icon and from here you'll get many icons options but right now I need this one so I'm dragging it in inside the header container and dropping it now this by default having a star icon but we're going to change it from here click on the icon library and from here we are going to search Moon and I'm going to just select this one and hit insert then we're going to going to style tab from here I'm going to make the size of the icon 20 pixel and I'll make the color b a b e C4 it's a gray kind of color so this is our header where we are having a logo and a simple icon when a visitor will click on this icon the whole sides color mode will be changed so we will function that later after we create create our static page right now let's go ahead and add another container right after the header container like this and this time we are going to name it Banner section so this is our header section and this one is our Banner section and now we're going to work a little bit on our Banner section so I'm selecting this and I'm making the direction row then I'm going to go ahead in the advanced and unlink the value of padding and I'm going to make it 60 pixel 10 pixel 10 pixel and 10 pixel so I'm giving it 60 pixel padding from the top 10 from the right 10 from the bottom and the 10 from the left all right now let's add another container inside this Banner container similar to the header section we have now select this new container from the style and I'm going to make it width of 970 Fel and now I'm going to add a heading into the banner container now I'll change the text to hello I I am now within the style tab I'll make the color F0 F2 F4 then in the typography I'll choose the font family the popins and I'm going to make the size 14 Piel and then I'm going to select the font withd 500 and then I'm going to go ahead in the advanced Tab and unlink the margin value then from the bottom I'll add a negative margin which is minus five then next I'm going to add another heading underneath this heading and change I'll change the text to John do and from the style tab I'm going to make it centered align and the text color will be F0 F2 F4 now from the typography I'm going to choose poppings again and the size will be 40 pixel and the font we is 600 and now I'm going to go to Advanced and I'll add the negative margin here as well so minus 5 oops minus 5 and then we are going to add another heading underneath this John do heading then we are going to change the text to front and developer this time I want this text style to be exactly same as this one so what we can do is I'll just right click here and then copy it and right click here then paste style so it style will be exactly same as the one we have just copied this is actually a very amazing feature from Elementor but this time we have one little thing to do in this last text so we're going to select it and in the style tab we're going to change the color a little bit so the color will be b a b e and C4 all right so next thing we're going to do is add two buttons but we have to wrap the buttons inside a container which is a good practice so we're going to add a container after this headings and here we're going to name it button group so I'll select this button group container and select the direction ction row as our one button will be on the left side and another will be on the right side so as we learned earlier the road direction will make the thing inside horizontally then we will choose the justify content Center and I'm going to go ahead and add some padding from Advanced tab we're going to make it 10 pixel from the top 10 pixel from the right and 45 pixel on the bottom 45 pixel and then again 10 pixel from the lab by the way I'm just going to drag it a little bit down so we can see everything on the top so yeah so let's now add our buttons I'll drag a button in and change the text to download CV and here in the link you can add any link you want for example I'm adding HTTP colon for/ kitpa this is just for an example then we're going to go under style Tab and in here we're going to select the text color it will be A3 95 e 99 and then we're going to make the background color transparent so to make transparent you just to drag this bottom knob all the way to the left and you will get a transparent background color so as our button is right now without a back ground color so we have to add a border to our button so let's select the Border type solid and we're going to make the Border WID 2 pixel and then let's select the Border color exactly same as the text color so I'm just going to copy from here and paste it here like this so if I close this you'll see our button is having a border now let's add uh some border radius like 8 pixel to make our button nice and round then under the advaned tab in the padding unlink the padding add padding like 16 pixel 13 pixel 16 pixel and 13 pixel then in here padding from the style tab we're going to add padding of 16 pixel 13 pixels 16 pixel and 30 pixel and yes I'm going to open the diog graphy and from the font family I'm going to choose pop pins and font size will be 16 pixel and the font weight will be 500 let's now add another button by duplicating this existing one so we have the same buttons but let's change the button text about me and here in this link let's for example put JY fad digit to all right now let's go under style Tab and this time our this button will have a solid background color so in the background color I'm going to make it A3 95 E9 and in the text color I'll make it 0 v11 now if you want to add a hover color on these buttons as I showed this is is very easy so select the button and go under the hober here and everything you put here will just show when you hover the button so on Hover I want to select the background color A3 95 and E9 and also on Hover I want to change that text color to 0 b111 and E so now if we hover on this button it will become like this now let's add hover on this button also so select the hob for this time I want to just change the background color on Hover a little bit so in the background color it will be the almost same color but little bit darker so this time it will be 91 83 da now if we overun this and then let's change the Border color as well the Border color will be exactly the same as the background color on hover so let's just copy and paste so now if we hover on this exact same background but little bit darker so if we close this you will better understand so on Hover on this button is like this and on here it's like this great now I want to add more things in the banner section so let's take a new container after these buttons let's make it called row directed justify content let's make it space between now within this container we will add three more items so to add items we'll use a container to wrap it insert container one container two container and this is three containers so in a container we have three child containers which is aligned horizontally so in the first container we will add a widget so let's search the widget which is social icons we'll select this one and drop it here so these are the Social Links when a visitor will Click on each of these links it will take them to Facebook Instagram YouTube or other social medias so for our case we will use some other social medias so let's just delete these ones so you cannot delete the last one so I'll just change this one our first one will be let's choose the icon for it it will be linked in I'm selecting this one and let's change the link I'm going to link it to linkedin.com then I'll just close it and duplicate this two times then I'll change the second icon to GitHub and select this change the link to get hub.com and the last one will be dble so selecting the dribble icon and changing the link to dbo db.com so here we have three social media links one is LinkedIn then the GitHub then we have the dribble so now let's style this from here the columns will be one so it automatically aligns everything in a single column then from here the alignment will be on the left then we are going to go into style tab from here in the color it says official color but we will change it to custom and then we will have two color one is primary color then there is the secondary color because these icons are having two different colors one color is used in the outside and the second one is used in inside of this icon so in the primary color we'll make it 15 1 C 28 so the outer layer of of these icons are black so outer side of this icon is black then let's change the secondary color which is A3 95 E9 now we have set the color now let's define the icon size the size will be 17 pixel then the padding will be 0.45 em not the pixel select em for this I'm going to keep the spacing as it is now the rows Gap will be 10 pixel now let's add a divider underneath this icons so let's click on the grid icon I'll search divider oops divider track the divider in so as you can see after the social icons I have added the divider in the divider style will be solid WID will be we're going to select the pixel WID will be only two pixel oops 2 pixel then let's go to style the color will be A3 95 E9 from here the weight will be 32 pixel and under the advanced tab the margin will be 0 0 0 and 16 pixel so as you can see we made a vertical line under the icons so it just remove the emptiness here and also it looks good now let's work on the middle container click on here go to style Tab and I'm going to set the width of 290 pixel then I'm going to make the the main height 400 pixel then I'm going to make the justify content Center and now I'm going to go ahead under the style Tab and under the background type I'm going to select gradient after selecting the gradient we have two color here one is color and second is the second color so from the color I'm going to make it A3 95 E9 and from the second color I'm just going to make it full transparent then I'm going to open the Border here and in Border radius I'm going to unlink it and make it 160 pixel on the top 160 pixel on the right on the bottom 16 pixel on the left it's also 16 pixel with border radius I just made the whole box round rounded from the top and little bit rounded from the bottom now I'm going to go under the advanced in the pedding I'm going to make it all zero now let's add an image inside this box so I'm going to drag an image in I'll choose the image from the media library I'm going to choose this one and select and I'm going to go under the style Tab and I'm going to make the WID 220 pixel and that's it for the image now let's work on the third child column inside Banner now we're going to add a button here by clicking that button you can go to the next section you'll know what I mean after some moments so let's search icon I'm dragging an icon in and then I'm going to change this icon I'm going to search Mouse icon I'm going to select this one insert and in this link field I'm going to make it about section so right now I'm just going to go to style tab from here I'm going to make it align right then I'm going to choose the primary color it's a395 E9 now the icon size will be 20 pixel then let's go ahead under the advaned tab from here in this position I'll make it absolute then I'm going to scroll down and make the horizontal orientation right and the vertical orientation to bottom and then the horizontal offset will be - 5 pixel then the vertical upset will be 125 pixel now let's click on the grid icon and add a heading widget inside this third ch container if you drag and drop and widget mistakenly other or else you can just simply use the Navigator and as we added the heading right now so you can drag this up and make it within the container now let's select this one and let's change the text to scroll down let's add the link for this one as well so hash about section then let's go to style tab let's add a color it will be the same color as the icon so A3 95 E9 let's make the Align to the right then the typography will be Popin font size will be 40 pixel and the font WID will be 400 now let's go under the advaned tab same for this the position will be position absolute then the horizontal orientation will be right then the vertical orientation will be bottom and then the offset will be Min - 35 pixel for horizontal orientation and the vertical one will be 70 pixel then if you scroll down you will find transform drop down here open it and you will see you have a rotate option here so click on this pencil icon you can drag the slider right or left F to angle the element so I'm going to just add a custom value which is - 90 pixel and it will make the heading like this okay now let's little bit work on the inner child containers to make everything perfect so let's start with this column I'm going to make it full WID from content width then I'm going to choose the pixel property and make it 150 pixel then I'm going to come down and make the justify content end so the inner content stays on the end then I'm going to come to the second container I'm going to make it full width and I'm going to choose the pixel property and make this column to 90 pixel then finally we're going to work on the third container I'm going to make it full weight then WID will be 15 50 pixel now every elements in our Banner looks perfect it looks perfect on the desktop view but let's check how it looks on the responsive mode so first let's check the tablet mode in tablet mode the header and also the banner is good now let's check on the mobile portate as we can see we have to work a little bit on our header and also of course on the banner so let's start with the header and actually here we can see this icon is mistakenly outside of this container so if you notice here we have a header section inside that we have container section inside the container section we have the this logo and this icon should be inside this container so I'll just drag it in and readjust the order and now it's good so in mobile device the header is perfect now let's move on to the banner so from here first thing I'll do is I'll place this whole social icons part under this image so how we can do is let's click on this in the advance tab we have a order option here if we choose end from here it will teleported into the end of this section and then this image looks fine here but let's just work on this one so I'm selecting this container and from the layout let's make it all everything Center by selecting align item Center and then let's click on here and from here in the columns let's select three so it aligns horizontally and about this divider we'll just remove the divider from the mobile view we will go under Advan Tab and if you scroll down you'll find a responsive drop down here let's open it and from here let's turn on this option says hide on the mobile so if we turn on it will be hidden from the mobile as you can see it's uh it's showing a gray shade over it but you can see this only in the elementary page builder so if we update and click on preview and we try to make it Mobile screen you can see you cannot see this all right so let's go back and now let's work a little bit more on this icons here so in here from the style I'm going to increase the gap between icons so let's increase the spacing like this now I want two horizontal divider one before the icons and one after the icons so let's click on the GD icon and take and divider so I'm just going to drag and drop here and let's make it with 50 pixel then in the style let's pick the color A3 995 E9 then in the weight let's increase its weight to uh 2 pixel and actually I'll make it smaller like this and then I'm going to go under the advanced Tab and select the Align Center so let's go back to our desktop mode and from here on the phone we showed this divider and from here let's go under the Advan Tab and open the responsive then from here let's hide it on the desktop and on the Tet as well also for this Advanced responsive hide on desktop and tablet but now we need to do one more thing here because we added the new dividers later in the mobile version that's why the first divider in the desktop mode is little bit aligned on the bottom side so we will select this we'll just use negative merg it from the top like 50 pixel or 60 pixel and it looks fine so now we can move to the next section which will be our about section so we're going to drag and drop a new container after the banner container like this and we're going to name it about section we will make it row detected and I'm going to go ahead and add some pedding of 80 pixel 10 pixel 10 pixel and 10 pixel now I'm going to drag and drop another container within this about section container then I'll make it width of 970 pixel after that I'll add a heading inside this container which is a free title so we're going to name it free title and I'm going to change the text to my intro then I'm going to go to style Tab and make it centered align then the color I'll choose 8 88 B 91 then in the typography I'll make it popins and the font size will be 13 pixel and the font width will be 500 and then I'll go to Advanced Tab and add some margin of 0 here in the bottom I'll add minus 10 pixel of a margin and then I'm going to add another heading underneath this pre-title and this time we're going to name it section title and I'm going to change the text to about me because this is the About Me section so let's style The Heading by going to style tab we'll make it centered align then the color will be A3 95 E9 then the typography will be popins the size will be 24 pixel and the font width will be 600 then in the Advan tab I'll add margin of 35 pixel on the bottom now our pre- title and the section title is ready now let's go ahead and add another container underneath this section title so let's make it rad directed container and that's all for this container so let's add another container inside this container and as we will keep a image in this container so let's rename it as image holder and then now let's add the image inside this inner container now let's choose the image from the media library I'm going to choose this one then I'm going to select this image and go to style Tab and make the alignment center and now I'm going to choose pixel and in the width I'll make it 350 pixel then down here I'm going to give a border radius of 24 pixel so the image looks round and nice that's it for the image now let's add another container and drag another new container right after the image container like this and in this container we will add our contents so this time I'll rename it contents holder I'm actually renaming a everything just for you to better understand it then inside this contents container first click on this container then go to Advanced in the padding I'll add 10 pixel on the top and 25 pixel on the left now let's another container inside this container and in this inner container we will add some icon boxes so I'll just rename it icon icon box group like this and we will select this container and make the direction row then the justify content will be space between then the Gap will be 8 pixel on the column and also in the row then we will add a margin of 15 pixel from the bottom and now we will add a widget which is called called icon box we'll drag that in in here we'll change the icon I'm going to search a word icon and select this and in here the title will be experience and the description will be 8 years working oops window the space here then from the style here open the icon and in here the color will be F0 F2 F4 then the spacing will be zero and then icon size will be 20 pixel then in the content open the content here title spacing will be 10 pixel title color will be F0 F2 F4 then under the style tab open this icon drop down let's set the primary color to A3 95 E9 then the spacing will be zero and the text size is 20 pixel then open the content drop down the title space make it 10 10 pixel color let's make it F0 F2 and F4 in typography font family will be popins then the font size will be 14 pixel and font weight will be 400 pixel so this was for the title let's go to the description and change the color color let's make it P A P E C4 in the typography Poppins size 10 pixel and 400 let's actually do one thing let's make this title typography and from front weight let's choose the 600 so it looks a little Bolder now let's go under Advanced tab if you scroll down you'll find the background option here open the drop down from here you can choose the background color of the box so I'm going to make it 15 1 C 28 then I'm going to close the background and open the border and from here I'm going to add border radius up 12 pixel and now I'm going to close this border and open the layout drop down from here I'm going to give a padding of 16 pixel oops let's unlink the value first 16 pixel 20 pixel 16 pixel and 20 pixel so now the icon box is having a good shape so we want this icon box more here so let's duplicate this one more and now let's change the inner content of the icon box let's change this one's icon to a brief case like this one and let's change the title to completed and the description will be 48 plus projects and then the last one let's let's change the icon first and for this one let's choose this icon and let's now change the title which will be support and keep the description as it is and one more thing here to do is Select this container and go to layout and one thing here I don't like here is it's having too much gap between each elements so to remove extra gaps let's click on this icon box and go to Advan tab then under the width here choose full width 100% then let's copy this one and paste the style to each of them so now it's looking fulfilled and nice all right now let's add a paragraph underneath these icon boxes so let's add a text editor underneath this icon boxes so in this widget this is a dummy text you can just type your text like this or you can paste your paragraph here in my case I just copied and paste my already typed paragraph then under the style tab I'll change the color to b a b e C4 from diog graphy pop in of course size 16 pixel and 400 of font WID then in the advanced tab I'll add some padding on the right of this element 50 pixel of padding on the right side this padding just makes the text little bit compact so it looks nicer so now let's add one last thing to this right container which is a button so let's add this button by dragging drop then we'll change the title contact me but actually this time we are not going to recreate a button because we already created buttons for our site so we so we can just simply copy that and let me just delete this one and just simply faced it here oops it's on the wrong place so I'm just going to drag it down drag it down here and now I'm going to change its title to contct me and yeah the button is ready by simply duplicating the x16 one and now actually in here I'm going to do one last thing to make it all perfect I'm going to select this icon group container from here in the advanced tab I'm going to make it padding all zero so it doesn't have an unnecessary space you can see everything now looks perfect cool now let's make our about section responsive so I'm going to turn on the responsive mode from here in the tab version select this container after the section title select this and make it column based container so everything will go aligned vertically now let's select this container in here make the Align items Center and from this text in the style make it align Center and it will become nicely all aligned to the center now let's work in each of the items in depth so first select the image let's make the image size 220 pixel and then let's select this container with icon boxes and from the layout tab let's add a fixed width which is 450 450 pixel so it looks more compressed and nice then let's select this text in here in the typography and from the advanced tab let's remove the padding 50 pixel and make it all zero so that's only it for the tablet version let's see how it looks on the mobile version right now so click on the mobile so let's start from the image the image is good let's work little bit here so click on this contents holder container and from the advanced we'll make every padding zero now select the main about section and from here make padding everything zero now let's add little bit margin on the bottom of the button so let's add 20 pixel of margin from the bottom and right now and right now our about section is perfectly responsive all right now our about section is completed now let's move on to the next section which will be my experience section so let's click on the grid icon and drag icon container underneath this about section container then let's rename it experience section experience section let's make it row directed then in the advanced let's keep some padding of 80 pixel 10 pixel 10 pixel and 10 pixel then let's add the inner container of this section and let's make it width of 770 pixel then let's go ahead and add our pre-title and the title so I'm just going to copy and paste the previous one the section title as well now I'm going to change the text this pre-title will be my ability is my abilities then the section TI will be my experience oops I have a typo here it will be capitalized after this let's add a new container after the heading we'll make it rad directed then let's make the gaps 60 pixel on the column and also on the row now let's add one more container inside this and let's make it 100% width Direction row justify content space between and from here under the wrap let's make it wrap now let's go under the style tab in the Border let's make the Border radius 20 pixel and let's open the background drop down here and make the background color one 5 1 c 2 a now let's go under the advanced tab in the padding let's add padding of 30 pixel 40 pixel 30 pixel and 40 pixel we're going to make two cards inside this container so this is one of the cards which has the background color so we will make it first and duplicate the same thing so let's add a heading inside this card so I'm going to direct The Heading and this heading name will be front and developer from the style let's make it align Center and the color let's type A3 95 E9 in the typography font size 16 pixel and font weight 500 then the padding will be 10 pixel from the bottom and from here in the width let's select full width so it will be centered now now let's add other thing let's search the icon box widget and drop inside this now let's change the icon this icon will be check this one and the title is HTML and description is basic under the style tab from here let's make the icon position left then alignment will be Center then from icon drop down let's open it and let's change the color to A3 95 E9 then let's set the spacing to 10 pixel and let's make the size 16 pixel so that's it for dieon now let's open the content and let's select the title color and let's make the title spacing 15 pixel then let's set the title color F0 F2 and F4 now in the typography poins font size 16 pixel font weight 600 let's set the description color to b a b C4 and in the description typography font family popins font size 10 pixel and font weight 400 then in the title typography in the line height it will be 1 pixel now from Advance tab here under this width let's select custom width then let's make it 48% of width all right now we are completed our icon box so we're just going to duplicate until we get the six of them so let's duplicate 1 2 3 4 4 5 and six so basically we are having six icon box inside one single card now let's duplicate this card and then it will look like this now let's change the contents of the each item so this one will be bootstrap and in the description it will be intermediate here I'm just copying and pasting my text so I can show you really fast so I skipped this part where I change every single items content because I don't want to waste your time showing this so right now our card is good but let's make it a little bit more perfect by adding some space between elements so let's start with this one so right now the simplest way to add space between elements is Select this card and in here in the layout earlier we added the gaps zero on the column and also on the row so now I'm going to add 20 pixel gaps on the row and we can see instantly it's adding nice space between the rows which is amazing the reason I'm telling this to at the end because now you better understand this gaps use after making all these contents so let's do the same thing for this one let's let's first unlink this and let's add 20 pixel on the row so right now it's perfect for the desktop but now let's check the responsiveness from the responsive mode first let's check the tablet mode in the tab view it looks okay but let's make it more perfect let's work on the main section first so I'm going to click it and from the advanced tab from here let's just make the padding like 50 pixel 10 10 and 10 pixel and in here let's select this whole container where the two card is placed and from the gaps here instead of 60 pixel let's let's make it 30 pixel so it looks perfect all right now let's check on the mobile version let's scroll down in here looks like we have to just change the spaces around the elements so let's select this one and from the advance let's just decrease the padding unlink the value from here let's give like 30 pixel 20 pixel 30 and 20 pixel now I feel like we can change the gaps a little bit so let's try 15 pixel yes it looks good in my opinion so let's copy the style of this card and paste the style here as well so we got the responsive for this section so we can say we have completed this section all right now let's move on to our next section so let's drag a container after this section and let's name it what I offer section now instead of editing everything repeatedly let's just grab a main container from here and copy this and then paste the style this will save your time significantly so after pasting as we can see we have padding here perfectly we have all the properties that that we need on a main section so let's just add a inner container for this section and let's make it withth of 770 pixel now let's copy our pre title and section title like this to save time now here let's type my services and this one let's type what I offer now let's change the contents so this one will be let's type my services and in the section title what I offer all right now let's add a new container underneath this heading and let's make it row directed then in the gaps let's make it 50 and 50 now in the advaned tab let's add the padding of 0 50 0 and 50 now let's add one more container inside this container and make it Road directed and let's give a width of 100% now let's select the content withd full width and give it a width of 100% then under the style tab let's add a background color 15 1 C 28 now let's open the Border drop down and Border radius let's add 16 pixel then under the advanced tab padding let's make it 80 pixel 30 30 and 30 pixel now let's add a heading inside the title will be product design the text color F0 F2 F4 in the typography pop pins font size 20 pixel font weight 600 from advaned tab margin let's add 20 pixel from the bottom all right now let's add a button underneath this heading let's change the text to click here and then from here under the icon let's select this icon library then let's search let's type right and select this arrow and insert it then from the Icon position from before select the after so the icon will come after this text then in the icon spacing let's make it 6 pixel then under the style tab let's make the color A3 95 E9 then in the background color let's make it all transparent and in the typography font family popins let's make it 14 pixel and font Point let's keep it 500 so under the style for the button we are having a padding option here so from here I'm going to make it all zero to remove all space around the button text now we have completed our one item now let's duplicate this item 1 2 and three so let's just quickly change that contents so this one will be UI for/ ux designer and this one it will be visual designer all right in the desktop our section is looking great now let's check on this in responsive mode the tab version It's perfectly okay in the tab mode now let's check the mobile version we have to do some work here so let's select this one this main container of this three cards and from the the layout let's make the Gap 20 pixel and let's make the wrap wrap then let's go to advaned tab from the margin let's make it all zero and here in the padding let's unlink the value and add the margin of 50 pixel 20 pixel 20 pixel and 20 pixel all right now let's select this heading inside this card and under the advaned tab we will decrease the margin buttom to 10 pixel all right now let's copy the single card and paste the style to all other cards and also for this heading copy and paste the style paste the style now the last thing we have to do select this main container and from the layout make justify content Center to align everything on the center all right now our mobile version is also perfect so this section is also completed now let's move on to the next section so let's drag a new container in and drop it after the what I offer section and we're going to name this section recent Works section now let's copy our main section Style copy and paste style now let's add our inner container for this section and let's make it 770 pixel now let's copy and paste the B title and the section title oops change the content for the preti let's type my portfolio and for the section title let's type recent works now let's add a container underneath the headings let's make it padding Zero from the advanced tab then inside this container let's add and widget which is let's search filterable and we get this filterable Gallery widget so I'm going to add this so this is basically a gallery with Filter controls and multiple item on the bottom the concept is pretty simple when you select a controllable filter on the bottom you will only see the item that is related to that filter item so let's go ahead and make it our own so let's click on the filterable gallery like this and under the contents we'll keep everything as it is until the columns we'll make the column two and then from here we'll set the image height to 195 pixel and from the layout here let's select the card and select media then here we have three toggle buttons one is title clickable the second one is image clickable and third one is show popup caption so we'll just turn on this image clickable one after enabling this we'll scroll down and open the filterable controls from here we can add our item which will be our filter buttons on the top here by clicking those buttons we can filter the bottom items so let's add our first filterable control we'll name it web then we will close it and just duplicate this so we need three of them first one is web the second one is let's type mobill and the third one let's type design then let's close it and now let's open the gallery items from here let's delete the bottom ones and keep this first one for the control name let's name it mobile and for the item name we're going to name it app mobile so this one is showing right here and this one is being related to these control buttons so you'll understand it better when you see it after we finish this so from here in the paragraph box we don't need all of this text so we're going to just delete this instead we'll write demo and we will select the whole world and click on this insert or edit link and from here I'm just putting Jim Fahad digital.com and clicking apply so this right here this is working exactly as a link button so let's close this item and duplicate the items until we have five of them so three four and five now let's change the contents inside these items first one is good let's make the second one design and item name will be brand design then we have web and web design after that we have one web and web design and let's keep this last one as it is so if we come back here now if we click on the filter button for web it's only going to show you the cards which is associated with this web filter like we're seeing this web design ones so if you notice here for the web design one the control control name is web which is linked to this one so similarly how all of this works now the function is working now let's style the whole Gallery so obviously let's go to style Tab and let's set the background color to transparent make the padding Zero from here and then let's open the control drop down then in the padding let's link this and make it for 4 pixel 12 pixel 4 pixel and 12 pixel then in the typography obviously we are using Poppins everywhere so I'll select Poppins the font size will be 40 pixel and let's make the font we semi volt which is 600 let's make it capitalize then let's close this control dropdown and open the item dropdown then let's add the padding press unlink then 20 pixel 20 pixel zero and 20 pixel then let's make the margin all 25 then from here let's set the Border radius 16 pixel then let's close it and jump into the card item then let's add the padding I'll I'll make it 17 pixel 0 5 pixel and 0 pixel and I'll make this color F2 F0 F2 F4 then in the typography PP pins font size 16 pixel font weight 500 then our I'll keep the content alignment to the left so if you are seeing the whole section like this actually don't worry I made couple of things of this section using the custom CSS which I will show you how you can add this very easily so no worries let's do it let's start from here under General in the background color we'll make it all transparent then we'll make the padding o zero then we'll just close this General and open the control in here control drop down I'll add 4 pixel 12 pixel 4 and 12 pixel in the typography of course we are using Poppins then 14 pixel and 600 then in transform I'll choose capitalize then in text color let's make it F0 F2 F4 then then in the active tab here we'll make it 0 b 1 1 1 e and in the background color I'll make it A3 95 E9 then here you'll make the Border radius like 8 pixel so all I did here is only going to show when the filter button is active like this you get the idea it's basically adding a background color on the filterable control when it's the when it's the active one now let's close the control and move on to the next one let's open the item from here let's give the padding off 20 20 pixel 0 and 20 pixel and I'll make the margin all 25 pixel then let's make the Border radius 16 pixel now let's close the item and let's open the item card from here in the background color I'll make the title color F0 FS2 F4 then the typography let's just pop in then the text size will be 16 pixel and let's choose 500 then there is content typography from here let's make the color A3 95 E9 then in the typography pop pins size I'll make it 16 pixel and we I'll choose 500 and I'll just make the content alignment to the left but right now we can see see I added this color but the color is not showing here why is that because by default in Elementor page there's a default link color which is this red color so here we can do one thing let's click on the hamburger icon from the left now let's go to site settings now let's click on typography from here we can see we have a link option here so in here in the color we can add our color code a395 E9 and you see instantly we are having the Purple colors here as well you can see right now the whole section is looking little bit weird right now there is actually a reason behind that in this section I use little bit of custom CSS which I'll show how to implement that at your site as well it's super easy so let's go ahead we will open the jimpad digital.com page and the link is in the description and if we scroll down here we can see some CSS code given here like for this my portfolio section this is the CSS for my portfolio so what we will do is just copy this whole CSS right click and copy and let's go back to our Elementor now at this point I'm going to show you a very easy yet amazing trick to add custom CSS on your Elementary free version so just click on this grade icon and search HTML and you will get this widget just scroll down all the way to the end and drag and drop it here with this from here in this HTML code field you can just paste the style we have just copied from that website so this widget right here we can see in the Elementor Builder as well as we can see it here after you publish your site or preview your site no one will be able to see this you will only able to see this when you are building your website in elementer Page Builder so for example if we update the site and preview our changes by clicking here and if we scroll down there as we can see nothing is there so that's cool and let's now come back here so now the question is I have just pasted the CSS for the recent work section or my portfolio section but why the Cs is not working yet so for that we have to do our one last thing so let's go back to the website where we copied the CSS from then you can see this is my portfolio CSS and right after that this is my portfolio class so from here we're going to just copy this class and go back to our element page builder from here we will select the Feld filterable Gallery like this and then in the advaned tab scroll down a little bit and you will see here we have CSS classes and in this field just face the recent work class that we have copied from the website so I'm just going to right click and paste instantly you can see the additional style have been added to the section I just showed you a custom CSS example with a simple one so now our section is looking good finally it's time to add our images so let's click on the filterable gallery and from the content tab let's open the gallery items which is these so let's open the first one scroll down and you will find a image insert here so I'm choosing this I have we have added all the images in the media library earlier so I'm just going to select the image from here so the first will be this one I'm selecting this then let's select the second one then let's select the image for the second one I'm going to choose this one and then next this one I'm going to choose this one then for the then for this one I'm going to select this one and finally for the last one I'm going to choose this one I mean this one okay all the images has been added which is looking very nice so it's time to check our responsive mode so let's click on the responsive mode first let's check the tablet mode tablet mode is looking pretty nice no need to work on this so let's check the mobile version in the mobile version we can tweak a little bit here so obviously we will change our main section so in the mobo it's already looking good but we will select this container from the advanced tab in the padding we'll just make it zero and we're good oh let's see uh actually from here I feel like the space is too much so let's decrease this from here let's select the filterable gallery then let's open the item from here let's skip the pedding as it is but from the mergin let's unlink this and just make it like 20 pixel 20 pixel zero and 20 pixel and this is now perfect let's now go back to our desktop actually here one thing I feel like this demo button is little bit bigger so let's quickly fix this by clicking here we have have it in the item card then in the content typography instead of this 16 pixel let's make it 14 pixel now it's looking Perfect all right so now our recent work section is looking pretty good let's update the Elementor and let's preview the changes so now this section is beautifully and functionally perfect amazing so now let's come back to our Elementor page builder then next let's add our next section so let's rename this section testimonial section so this one will be our testimonial section now let's copy a main section and paste the style to the new container now let's add the inner container for this section let's make it 780 pixel now let's repeat the thing let's copy the free title and paste it in the container copy the section title and paste it underneath let's change the content to my clients say now for the section title it's just simply testimonial all right I'm going to go ahead and drag a container after this heading and I'm going to go ahead in the advanced Tab and make the Ping all zero then I'm going to click on the grid icon and Search widget that is testimon testimonial and you will see this one so I'm going to drag it down and as you can see we have a testimonial widget and in here if you see here we have we have six different testimon style so I like the fifth one so I'm going to select this one now in the testimonial drop down let's disable the enable code icon and also let's disable the rating and down here we have three testimonial items which are being slided in here so let's remove all the items and in the first item let's edit the contents so for the client name I'll put this this is a client name and the ignition will be let's make it manager then in the testimonial review you have to put the user review text so you can either type here or copy and paste your own text so to do it real quick I'll just paste my text and also down here you can put any link like kida.com so from the client but I'm going to choose this one like this and that's it for the one item let's duplicate the item two times and let's let's just change the images and let's change the third one to this all right now we have completed the testimonial work so let's close it and open the settings drop down then under the settings from here make the slide to show two then from here it has the option show dots toggle this on so we are done here now let's move on to the Style part so from here under the layout there is a column Gap let's add 18 pixel and then feding let's add let's unlink and then then let's add 24 pixel 32 24 and and 32 pixel then let's add some border radius of 24 pixel and in here the background let's make the color 15 1 C 28 right now it's looking very ugly but we are going to the part where we will color the text to White so after this let's open the description and from here let's add the color b a b e C4 then in the margin here let's make it all zero but 25 pixel on the bottom then in the typography pop in then 14 pixel and weight will be 400 then let's add some line height top 1.6 and I'm going to choose the EM property now let's close this and move on to the client drop down from the client name the color let's make it F0 F2 F4 4 then the client designation let's make the color b a b e C4 and then the client name typography let's make it 16 pixel pop pins and then font weight 500 then the cine designation color let's make it P A P C4 and in the typography let's make it 14 pixel and let's select the Poppins all right then here in the client image section let's make it 60 pixels so it becomes a little bit smaller so we're good here so I'm going to close the clients and open the dot I'm going to make the dot top spacing minus 33 pixel and the width and height I'm going to keep it the same then from here I'm going to make make the merg right 6 pixel then in the background I'm going to make it Tri 8 B9 17 and D so it's semi-transparent with the bluish color now let's scroll down and we can see we have active section here so basically for your better understanding right now we are doing The Styling for this dot so initially the dot color is like this the semi transparent we have just added now we are going to add the color when the dot will be active so it will be A3 95 and E9 now as we can see our DOT is going outside of our section so let's click on our main section and from the padding let's add some more padding from the bottom and it will be good now let's check the responsiveness of our section so let's check the tab first so on Tab we have to add the padding on the bottom of our main section so I'm adding 100 pixel again or I'll actually add 80 pixel then let's check on the phone now let's make the padding on the main section all zero but 60 pixel from the bottom now it's looking pretty good so let's go back to the desktop mode so now our testimonial section has been completed now let's move on to creating a very important section which is our contact Section so let's first add a new container now let's name it contact Section and from this section let's just copy the section and paste the style to have basic padding and everything but but from here I'm just going to make it zero 80 pixel so it looks good now inside this let's add the inner container and let's make it 970 pixel then inside this I'm going to add the pre-title and section title and this pre title will be get in touch then the section title will be contact me okay now let's after this heading let's add another container so let's make it Direction row and under the advanced the pedding let's unlink it and make it 10 pixel 100 pixel 10 pixel and 100 pixel and then within this container let's add two more container side by side like this now let's click on this first container then then let's make it full width and let's make it 50% of width and let's go under the advaned tab in the padding let's add zero and 70 pixel then zero and then 10 pixel and then we're going to copy this container and paste the style in this container as well but just only for this one under the advanc tab and from the padding let's make the right padding Z pixel now within this container we will add three more containers vertically so let's first add this container and work on this and now let's add a heading inside this container like this and and let's change it to talk oops talk to me then under the style tab let's make alignment center then let's choose the color F0 FS2 F4 in the typography popins then let's make it 20 pixel and choose the font weight I'll give it 600 then in the line height let's give it 1 Point 5 em of line height like this all right now let's add some more containers within this within this left container so I'll just drop the container so I'll just drag the container like this and in this container we will add an icon box widget so I'll search icon box and drag it in then from here let's choose the icon on I'll choose in pullup I'll just choose this one and for the text let's type email and in the description let's type user at gmail.com like this then let's go under the style tab make the alignment to center and open the icon and then we have here icon primary color we'll make get F0 f24 then we'll remove the icon spacing we'll make it zero and the size will make it 25 then let's open the content from here title spacing let's make three and the color let's make it F0 F2 and F4 then in the typography popins and then 14 pixel of size then let's make it 500 then for the description we'll type b a b e C4 and then in the typography pop pins we'll make the size 14 pixel and we'll keep it 400 after this we'll add a button underneath this icon box so let's go to style from typography let's choose the icon let's search right and let's choose this one and add it and make the icon position after so icon appears after the text then in the icon spacing we'll make it 6 pixel then let's go to style in the typography let's make it pop pins 4 pixel and 500 then in the text color let's make it A3 95 E9 and then in the background type in background color let's make it all transparent and from the advanced let's make the padding zero and from the style padding I'll make it all zero and finally I'm going to go to advanc Tab and in self align I'll make it Center all right so now we have our content ready let's just select this single card and go to style and let's go to background color and give it 15 1 C to 8 also from here in the Border we will make the Border radius 12 pixel to make it more round and nice all right so now let's just duplicate the card and make it all three then let's go ahead and change the content of each item this one let's type WhatsApp and then I'm going to put just some random number and for this one's icon I'll search sech WhatsApp and choose this one all right then for the next one I'll type messenger and in here I'm going to just put this text icon for this one so let's search messenger and you'll see this and I'm just adding this all right now the next thing we're going to do is we're going to add a contact form on the right side so to add a contact form we're going to be using a widget that's called mform from the mform plug-in so I'm just going to drag that in and here this particular widget is bit different than other widgets because we cannot edit the form directly within this left panel and to edit that you have to just click on this edit form and from here you can create a new form or you can select your already created form so as I don't have a form so so I'm creating my new form so let's enter the form name so for example let's make it my contact form and I'll just select the Bland template and I'll just click on this edit form now from here a different Elementor popup came up from here the building mechanism is exactly the same but it just dedicated to make the contact form all right so let's start building our form so I'm going to take a simple container and then I'm going to make it column directed then under the advaned tab I link the padding and I'll make everything zero now I'll click on the grid icon then I'll drag this text widget in this contact from here we'll change the label title to yes the label let's type name and in the name let's make it MF hen name and down here in the placeholder I'll just type insert your name and the placeholder will show in this input then let's go to style Tab and under the label let's change the color to b a e C4 and in trog graphy popins font size 13 pixel font weight 400 pixel now let's add the margin of 00 0 8 pixel and 20 pixel now let's open the input in here input padding I'll put everything 20 then here in input color I'll make it P A P C4 then then I'll put the input color on the focus like when will you focus on this input then how you want to style it so in the input color on Focus I'm going to put I'll put the same color b a b e C4 then in the input background let's make it fully transparent and then if you scroll down you will see a border type select solid and you will have a border width I'm going to make it 2 pixel then I'm going to insert the Border color let's make it 888 p91 then in the input typography let's make it popins as well and then the size let's make it 16 pixel and font width 400 so if you write your name it will look like this nice now let's style the placeholder that is showing before you type anything so open this placeholder in the placeholder I'm going to make it 16 pixel and 400 and then the color will be 85 86 87 all right now one thing I want to do is in the input if you scroll down here there's that border radius so let's make it like this 12 pixel now we have created our name input so let's copy this one so let's duplicate this one turn this one into a email input so from here in the label I'll put email and in the name MF hen I'll put email and from here I'll change it to email insert your email and then the rest is the same so now let's add our text area so let's click on the Gade icon and scroll down and you will find the text area here here so I'm just drag and dropping it now from here in the label it will say project and I'll keep this thing as it is and from the placeholder it will say write your project now if we copy this uper inputs and paste the style here in the text area so we instantly have the style from them amazing and now find finally let's add our form button so I'm going to directag the submit button underneath this text area and from here I'm going to make the button alignment to the left and the button will say send message then under the style tab I'm going to make the padding 12 let's first unlink this so 12 16 12 and then 16 the typography popins and then 16 pixel and weight will be 500 all right now let's change the text color so let's type O b111 and E then there is background color let's make it A3 995 E9 and then after that I'll select the Border I'll go to advance Tab and and make the padding 20 pixel from the top and everything zero so now let's update this and click it here update and close now the form will load now as you can see our form is loaded here so now I have just added some simple custom CSS to Simply tweak this contact form so I will show you how you can easily add the custom CSS so let's go let's go back to the site where the all CSS code is there you can scroll down here under the form section CSS just copy the whole code and then let's come back and scroll down to the bottom and select this HTML widgets now let's make it a little bit bigger so you can see and in here click here and hit two enters and exactly here paste the code you have just copied so right now I have just added couple lines of code in this style tag actually you don't have to understand any of this thing even actually don't look at this code you can just copy and paste the way I tell you and it will work perfectly for you so after pasting we can see nothing is changed so as I said earlier we have to add a class to the element that we want the change in so in this case I'm going to select the M form like this and in the advanced in the CSS classes I'm going to go to go back to the site and just copy this class it's called form section class this one was the form section CSS and this is the form section class it's actually very well written so I'm going to just copy it and go back there and just paste the class in here so now as we can see our style worked but I want to edit this form a little bit because what I exactly want now I want some space around this label so we can do that very easily so let's click on edit form and edit form and from here click on this input then from the style tab here under this label it has a padding property so I'm going to just give something like 5 pixel of padding and just copy this and just simply paste the style to the other ones and I'm going to update this and click on the update and close now we can see there is a nice space between between the line and the label very cool now our contact Section is looking nice on the desktop now let's check how it looks on the tablet so let's click on the tab looks like we have to work on this so so let's select this right container and from the advance we can fix this by decreasing the padding from here so let's try oops let's first unlink this and on the right let's keep it 30 pixel and from the L let's keep it 10 pixel and then let's select this container after this heading so this one has some huge number of paddings so let's decrease it so un link it all zero and on the right let's make it 50 pixel and on the left also 50 pixel so it looking nicer now let's check it in the mobile in Mobile we also have to play with the paddings so from here I'm going to make it all zero then I'm going to select this container and I'll remove the spacing from here as well now it's good here also perfect in here all right let's go back to our desktop mode so now our contact form is ready now we have to create our last section which is the footer section so I'm going to take a section from here and I'll make this full width then from here I'll just drag it up and put it before the HTML container because I want to keep it all the way to the end so let's select this the footer container and and rename this footer section or just footer then let's select the footer and under the style tab let's add a color so the background color will be a395 E9 then let's go under the Advan Tab and in the padding let's add padding up 35 pixel 10 pixel and then 75 pixel and 10 pixel now let's add a new container inside this footer and make it align items Center and then we're going to click on the grid icon and add an image which is going to be our footer logos so let's rename this footer logo and from here let's just choose the footer logo which will be this one so I'm selecting this and from the style let's choose the Align Center and let's make the width in pixel of 75 pixel and then I'm just going to add a new widget which is icon list I'm going to drag it in and drop under the orbit and I'm just going to delete all of them except the first one and I'll just rename it about then I'll just duplicate and make it three then I'll make it projects then the last one let's make it testimonial now let's remove the icon from each one because we don't need icons all right now go to St F tab we're going to add space between 24 pixel and we'll we'll select alignment to Center then open the icon and in the color we will make it ob11 E actually it doesn't matter because we don't have the icon so I'm going to go ahead in the text and then in the color let's make it OB b111 e and then in the type typog graphy I'm going to make it 16 pixel and 400 and then we can add the margin here of 20 pixel 0 15 pixel and 0 pixel so all I'm going to do is I'm going to go in the content from here it says layout just make it in line all right now I want to add the social icons here as as well so if you remember we have created a social icon here on the banner so I want the social icon here as well so let's just copy this instead of making it from scratch because it will save a lot of time so I just copied and I'm just pasting it here but we didn't want it exactly like this in here so I'm going to make it align Center and columns will be three so it aligns everything in horizontal way and then from the style tab I'm going to just increase the spacing between the elements so let's make it like 20 pixel and it looks good and now the last thing in the footer I want to add is a text editor with this we're going to make a copyright text for example let's change the text like this I just pasted my text instead of typing so it looks like this then let's go to style Tab and select the alignment to the center and let's make the text color ob11 e and then in the typography let's make it PPP pins and then from the advanced tab let's add a margin from the top like oops 50 pixel and then let's make the style 40 pixel and 400 red and then let's change the color let's make it 15 1 C 28 and then in the typography popins and the size let's make it 40 pixel and weight let's keep it 400 and now from the advanced stab let's add some marging from the top like 50 pixel and it's looking good and let's check the responsive finally and the tab it's perfect on the mobile just let's from the mobile just let's edit the section padding from the 75 pixel to unlink this let's make it like this and it's looking good we are done creating our all sections and it's looking pretty good but in this page don't you feel we are missing something yes we are missing the navigation bar every homepage do have navigation bars so let's create one for our homepage now first of all let's scroll down all the way to the end and from here let's take a simple container and then let's rename this nav dark so we are making the navigation bar for our dark version now let's work on this section so in here I'm going to select row directed column and make it justify content Center then I'll go to Advan Tab and in here I'll add padding of 15 pixel 0 15 pixel and zero so let's work on this NAB dark from here we will make the WID 300 28 and then in the advanced we'll just make the padding all zero and then down here we're going to select the position fixed position fixed means your element will be in a fixed position and similar to the position absolute your element will not take any space so now let's make this vertical orientation offset to 15 and then we'll make the Z index 10 so our navigation bar stays on top of everything so currently our navigation bar is placed like this now let's add another container inside this then let's make the Justified content Center then in the style let's add a background color DD E3 e e CC now this gives us a semi-transparent color which looks cool now let's open the Border drop down and from here let's add a border radius up and then let's go to the advanced Tab and let's in the padding let's make it all zero then let's make it 15 pixel 0 pixel 15 pixel and then 0 pixel next we are going to add a social icon widget so click on the grid icon search social icons let's track that inside the container then let's delete all the options and let's edit the first option so I'm going to select the I'm going to select a home icon for this so I'm searching home and I'm clicking on this all icons to show all I'm selecting this one then let's add another and we'll select a user icon so let's select this one and then we want to add a book icon so I'm choosing this one looks good and then the last one we want a briefcase icon so I'm selecting this one then finally the last one we want the icon of messenger so I'm selecting the Facebook Messenger one okay so we have got our all icons now it's time to style it first from here let's make the shape Circle so it makes the icon shape Circle and then let's go under the style tab from here let's add our custom color so the primary color will be in the background the background we will make it full transparent and in the secondary color we will make it 52 57 60 now it's looking nice and clean now let's define the icon size let's make the icon size 17 pixel then let's add a padding of 0.45 em then the icon spacing let's add 25 pixel then in here in rows Gap let's make it 15 pixel already our navigation bar is looking pretty nice but it's time to make it fully functional so for example let's click on this social icons and in the content let's open this home button and in the link here let's type hash Banner hyen section and copy this Banner section and click on this Banner section here in this Advanced tab paste that copied text as CSS ID of this one now check this if I scroll down somewhere and then click on this home icon it automatically scroll up and takes me to the banner section cool right right then let's do it for user as well so let's make it for about section and then let's copy this about section and in the about section it advance in CS ID paste it if now we click it it takes us to the about section pretty good then now let's assign this book icon to the experience section and now I'll come copy this paste in the CSS ID now this is working as well then next we have a briefcase icon in here I'll dedicate this for what if section you can just put anything here and copy the thing to a section ID like this and it will perfectly work so this is working as well now the last thing we have messenger icon we will set this for contact and now we will copy the section paste it into the section ID so this works so our nabar is fully functional now let's make it more beautifully interactive so for that what we just have to do is go to the jimpad digital.com where we have the CSS code and you will have to just scroll down until you find this navigation section CSS so you have to just copy this whole code and now let's go back to elementary page builder and inside our custom CSS we will add this code inside the style tag after that we'll go back to the site and scroll down a little bit here to make that work we need to add some classes on some elements so let's first start with this this ISS main container of the dark version and light version so we will just copy this and then go back and we have this dark version which is parent of all the sections we'll go in here and give it a class name which is dark version and after that we'll just paste the main rapper class we have just copied then we will go back to the site and scroll down and under this JS nippet we we just have to copy this whole JS code please don't get confused by this big code because you don't have to understand the single bit of it so let's just copy it and go back to the Elementor and in the custom code after this style tag add some space and paste the whole script tag then finally let's go back again for the last time and scroll up little bit and you will find this menu highlighter and active button class under this social icon which are dark version and light version let's just copy it go back then click here click on this main main container of the dark NAB and under the advanced tab we'll just paste the class name and now we can see we have a active color when we go to the section where the icon is dedicated to it becomes highlighted or if we click on the icon it also becomes active so now let's update and preview in the different tab so as you can see it's looking pretty nice and it's very easy to implement if you just don't miss anything when putting classes and custom CSS so now we can say our dark version is fully completed and it's looking pretty amazing now it's time to show you how to make this whole side light step by step and very easily so I'm going to show you very simple and very straightforward way to turn this whole site into light mode so let's just first close everything and have a clean view so in this dark version container we have all the sections we have created for the dark mode so let's close this dark version container and let's right click it then let's hit the duplicate now we will see we have duplicated the exactly same thing right after this one so the first one is our dark mode and for the second one I'll just name it light version now all we have to do is that edit this light version and turn it into a white page and then when you will click on this icon this dark version container will be hidden and this light version container will be shown so basically initially the light version container will be hidden and when a user click on this icon then the light version will be shown and the dark version will be gone so I will show you this step by step how you can do it very easily so for now let's keep this dark version container hidden from here and first of all we will make every element suited for light mode then after we will function it so let's start with this container itself let's go under the style tab then in the background color we will just clear this background color property so by clearing you can just clear the background color and it will be white but we will not do that because that's not a best practice so we will make it like hash FFF so in case our visitor browser is in the dark mode and then they turn the light mode on so the background can show this white color all right then let's start from the header so in the header the logo is fine here but the we we have to change this icon under the style tab in the primary color let's change it to 2125 2 C so it will have a dark color and it will be nicely visible then in the banner in the heading here under sty tab let's add a color which is 2 1 25 2 C so I'm just going to copy this color as I'm going to put put this on every heading so let's do it very quickly but actually for this heading I'm going to make a defl color like 5257 60 and then our button is perfectly fine so we're going to not work on that one so next we have the social icons here we have to work a little bit so in the style tab in the primary color I'm just going to make it A3 95 E9 and then in the secondary color I'm going to make it fully white so triple F will work all right now the rest is good on the banner so let's scroll down and let's work on this pre tile here in the style let's make the color a little bit darker so 52 57 60 and this section title is okay so let's move on to this ones so let's edit the icon boxes background color so it's actually in the advanc tab and in the background we have this background color so we'll just make it white color and we have title inside so for title in the style then contents the ti tile color let's make it 21 25 2 C and then in the description 5257 60 and it's nicely visible now we will add some shadow on the item so select this then in under advaned tab we'll come down here we'll open the Border drop down then from here we have a box Shadow option so we will make the color # 0 b111 E1 a so it's a transparent light color then we'll set vertical two then I'll make the blur eight now if we close this we can see we are having a nice shadow around the item so let's just come back and copy and oops copy this and paste the style on the other ones okay nice then let's color this paragraph let's make it dark 52 57 60 looking nice then we have this one we'll just copy this one copy and paste the style oops I have to paste the style not paste so also in here I'll make it a light background so let's make it FFF and then inside the items under style tab under contents we have the title here so let's make the title like 21 25 2C and the description let's type 52 57 60 then I'll just copy and and paste the style very simple then let's select this box and under the advance Tab and under the style tab in the border and in the Box Shadow let's make it the same color 0 B one11 E1 a then let's make the vertical 2 and blur 8 and we have the nice shadow here as well so now I'm going to copy and and paste the style here and also this style on each items This and like this okay looking good then let's move on to the next one from here in the style I'll make the background color fully white HH FFF and then the title in the style color will be 2 1 25 2 C and the card color let's add a box Shadow so the same will be 0 b111 e 1 a and then vertical 2 blur 8 let's copy paste the style and paste copy paste the style face the style all right cool now next make let's make this paste the style and here as well now in this portfolio section in the filterable gallery let's work on here in the style let's open the control then in here in the color let's add 21 25 2 C then let's open the item card from here let's make the text 21 25 2C and we can see that text is blending with the background color so to remove this background color we have a simple custom code and from here actually we already have the CSS code inside our Elementor for the V dark and light mode just we have to change the style one for dark mode and one for light mode so all we have to do is Select this filterable gallery and in the advanced tab under the CSS classes it has recent work class but we'll just make it recent work light and here we have everything white but we just need a shadow here let's select the filterable gallery now let's go under the style tab of filterable gallery and from here under the item card and here we have box Shadow so let's make the Box Shadow # Z b111 E1 a then make it vertical 2 and then bl8 then from here under this item we have a box shed option so in here I'm going to just put the color o 0 b111 E1 a then from the vertical I'm going to make it to pixel and I'll make the blur 16 pixel and here we go we have nice box Shadow on each items then let's move on to the next section we have testimonial section in here for this one this is very easy in the style let's just change the background color to fully white and then in the description this description color let's make it 5 2 57 0 then in the client client name color let's type 21252 c and then client designation let's type 5257 60 perfect then let's move on to the next one which is contact me or contact Section from here let's make the heading 21 25 2 C and in here let's make the background white then let's select the icon box in here let's make the icon color 21 25 2 C and the title color it's the same 21 252c then the description let's type 52 57 60 and then find finally let's select this box and under the Border we have box Shadow from here vertical 2 blur 8 and then the color will be hash ob11 e 1 a looks nice so let's just copy and paste the style also for the icon box copy and paste the style so everything in this side is perfect so for this m form part we have a simple custom CSS if we put that it will work perfectly for the light mode so let's copy the class and CSS so so let's scroll down and here we have form section light CSS so I'm just going to copy this and put put this into our custom CSS here so inside the style Tab and then copy the class this is label BG light this is for the form section light class so let's go back and click on this select the more M form and in the advanced let's put the CSS class to this and it looks perfect on the light version as well and here in the footer we're not going to do much we can just change this background color to plain white and also we can little bit change this icons so in the style let's make it A3 95 E9 and in the secondary color let's make it fully white and now everything looks fine let's just recheck everything and we can notice here we need to add some padding and now to add some nice Gap I'll just use a custom CSS from here under testimonial section light CSS we'll just copy this paste it into our style tag so now it did not work because you know we have to paste the style so from here we'll select this and in the advaned tab CSS classes let's add this and it will add some nice spacing around the cards now let's recheck everything yes we have some little tweak for example like this one let's copy the style copy this on style and let's recheck everything from the bottom to top and to me the light mode looks perfect now let's click on update now all we have to do is function the color toggle button so when you click on here the page color will be automatically changed so we have our custom CSS for that I'll go back to the site and look for look for this light and dark toggle CSS so I'm just going to copy this and paste it into the style tag and now I'm going to just copy this light version class for our main main light version container and I'll just paste this style here let's just copy the footer from here and let's delete this footer from here now let's show the light version in in the Elementor which is hidden by initially so from the custom code we'll scroll down and you can show it in the Elementor so I'm hitting control+ forward slash to comment it out when you comment out a CSS code in the CSS it doesn't read so the code that is initially hiding the light version is now commented out so we can see the light version is here visible right now so we'll scroll down and then after this contact me section we'll paste our footer section so right now the footer section is inside the light version so if we again enable this CSS code then the light version will be gone and with that the footer will be also gone now to enable the function on click here the light mode will be activated all we can do is go back to the site and look for the class from here all we have to do is click on this Moon icon on and under the Advan tab in CSS classes let's just type dark button dark button and let's copy this then in the light version container inside the container and icon there's a s icon so from here we'll just make it s icon and under the Advan tab let's put the class light button and we'll click update then let's see the preview from here we have this Moon icon and if we click this the whole pages become light amazing right so this was the one of the simplest way how you can turn a dark page into a light page using elementer page builder all right so we have completed our amazing portfolio website design now you can just go ahead and make your own professional website please comment down below about The Learning Experience from this video also please share this video on social media it would mean well to me so I'll see you in the next video for now bye-bye

Channel: Jim Fahad Digital

Views: 16,282

Keywords: dark light mode wordpress, dark mode wordpress elementor, dark light mode portfolio, wordpress portfolio website, personal portfolio website wordpress, portfolio website, WordPress 2024, Elementor 2024, WordPress Tutorial 2024, Elementor Portfolio Website, portfolio website wordpress elementor, how to make a portfolio website, make a portfolio website with wordpress, Jim Fahad Digital, WordPress Elementor 2024, dark mode wordpress, wordpress dark mode, dark mode, WordPress

Id: GYi-2U7YczU

Length: 182min 58sec (10978 seconds)

Published: Thu Feb 22 2024