[A-Z] How to Create a PERSONAL PORTFOLIO WordPress Website 2020 | Elementor Tutorial

By | March 6, 2020


Hey, what’s going on guys, this is Jim Fahad, and in this video I’m gonna show you how to create a WordPress website step by step. In this tutorial, You can learn how to create any website design that you can possibly imagine. Specifically, in this tutorial I will show you how to create a Personal Portfolio Website. But following the principle of this tutorial you can make any kind of website. We’re gonna be using an awesome drag-and-drop page builder plug-in that allows you to have 100% control over the Customization of your website and it’s super easy to use and there is no coding involved at all. So whether you are a complete beginner or you have made a website before, this tutorial will show you how to create a beautiful fully functional website like this! That’s 100% responsive on mobile device tablet and desktop. I will show you how to change text and fonts. I Will show you how to create buttons and customize them however you like. I Will show you how to add your own photos and backgrounds to your site. I Will show you how to add YouTube or Vimeo videos as background. I Will show you how to add an image gallery with a nice lightbox. How to add awesome section dividers. How to embed the latest blog post inside the home page with cool design. I Will show you how to create a working contact form. How to embed Google Maps inside of your website and so on… So first, let me introduce myself the instructor. My name is Jim Fahad. I’m a professional web developer I have been developing websites for more than 10 years now. I started my career as a freelance web developer on a website called oDesk, right now It’s upwork.com, whatever I’m not regular on that website because I get a lot of website orders from my personal website, that’s jimfahaddigital.com, If you want you can also contact me through my website. But you don’t have to do that because by following this tutorial you can make your own website by yourself I’m telling all this beforehand only to make sure you that you’re learning from a real web developer. Now Let’s get started Okay. So before we get started, why are we using WordPress? well, because WordPress is the world’s most popular website builder on the market so you may see ads for Wix or Squarespace or other website builders. But unlike those WordPress is free and it powers more than 30% of all websites on the entire Internet, which is a lot of freaking websites. So needless to say It’s the best way to make a website Now in this tutorial, I will be showing you how to get a domain name which is about five dollars. But I will also show you how you can get your domain name for free – for the first year. And I will also be showing you how to get web hosting which is about two to seven dollars That’s all. There’s no other hidden cost. So what is web hosting? Well, web hosting is just renting a space on a server that’s connected to the Internet so that you can fill the server with all of your pictures and videos and texts and other media to build your website and Then publish it for the world to see web hosting is a must-have if you want to own your own website There is no other way around it .Now there are such things as free websites, but there are a lot of downsides of that You will not own your own domain name It would be something like YouDomainName.wix.com or YouDomainName.squarespace.com Or whoever is hosting this free website for you! You cannot upload plug-ins to help with the functionality of your website and you are also limited to a very small number of themes for the Customization of your website and you can’t upload new ones you also cannot monetize your website with ads in order to make money with it and Your website could be deleted at any point if the hosting provider feels like you have violated their Terms of Service So that’s why I recommend getting own web hosting. Ok. So let’s get started Step number one is to get a domain name and web hosting So first just click on the very first link in the description below this video or you can go to – jimfahaddigital.com/hosting and this will take you to a special discounted Bluehost page So why Bluehost? In my opinion, Bluehost is the best web hosting provider. I’m a web developer I tried so many other web hosting companies. I don’t want to mention their name, but I personally ended up using Bluehost Hundreds of my clients using Bluehost and they never complain about using it. If you see my Bluehost account, I have hosted tons of web sites here and I never get a downtime Their customer support is really cooperative in case you need any help and their price is really affordable That’s why I always recommend Bluehost So now click on get started Here you can see their different plans the main difference between them – with the basic plan You can host only one domain. You can take their plus or choice Plus plan if you want to host unlimited domains. Also, you can take their pro plan if you have millions of visitors on your website already. I recommend Is starting with the basic plan. Then in future you can upgrade that anytime. Now let’s select the basic plan now We will select our domain name If you already have a domain name that you want to use you can just go ahead here on the right, but for now I’m gonna get a new one now here Let’s try for something like Apple.com and click Next It says that domain apple.com cannot be used on Bluehost. Please try a different domain name It should be because we cannot pick that. Because we all know that’s apples official website So we will be typing our own domain name here And also if you click on the right side, you can see .site .net .info websites I always recommend to take dot-com websites because it looks more professional and legit So I’m gonna type here let’s say ourelementor.com as we are going to make our website through Elementor Page Builder and Now click on next it says ourelementor.com is available. That’s awesome. And Here we need to put our account information. I’m putting mine here really fast only to not make you bored Okay here you can see the business name field if you don’t have a business just keep it blank or put your full name But here’s the most important thing. That’s your email address. Make sure you put your correct email address Because after completing purchase a receipt will be sent to that email address So make sure you put your best email address here all right now scroll down. Here is the package information and It’s automatically set to 36 months. And this is gonna be your cheapest plan. So yes, you’re paying for 36 months up-front, But it comes out to only around $3.95 a month. So this is 50% off That’s gonna be your biggest discount. Now – what I recommend is to just do 12 months, If you don’t want to commit to the 36 months or 24 months. It’s still 33% savings and it’s only around $5.95 a month and you also have your domain name for 12 months so no more additional cost for your domain for these twelve months and Here you got package extras. First, here is the option for domain privacy Having domain privacy is good. And I always recommend having domain privacy So no one gets to know who is the owner of the website But for the sake of this tutorial, I’ll be deselecting this one. Let’s click on turn it off because I don’t want to hide myself at this moment I want to be transparent. So if anyone knows I owned this website, I have no problem You can keep this one checked if you want, not a big deal! I’m also deselecting all the other options they are offering. We actually don’t need that They’re just upselling their stuff. Alright. Now you can see the price is now only seventy-one dollar forty cents for the full year – including the domain. That’s awesome. And I’m legally obligated to tell you that this is my affiliate link. So I do get a little bit of commission off of this but it does save you a ton of money And it helps fund these free YouTube tutorials what I’m doing, so everybody wins I’d really appreciate it. And here is the payment information. I’m putting my credit card number here Expiration date and CVV code then select this one here So that you are agreed to their terms and policy. Now click on Submit. It says your purchase was a success. Also, you can see here is your receipt. They will also send it to your email. I’m also waiting to get that email Meantime, we can create our Bluehost account. So let’s click on this create account button here Here’s the domain name that’s automatically selected now. Let’s create our password Create a really strong password combining capital letters numbers special characters You know how to make a strong password and then retype the password in the second field Now take this once again that you have agreed with their Terms and policy now click on create account. I Already have received an email to confirm my purchase So I’m opening my email you will also get an email like this Then click here verify your email. It’s very important So it’s now verified. Awesome. Now, let’s log in into our Bluehost account with the domain name and password We have just created if you are logging in for the first time. You may see a pop-up like this Like it says let’s create a website Bluehost actually want to help you to make the website Just click at the very bottom there I’m not creating a website because I will be showing you everything step by step and skip all of these Pop-ups because we don’t need any of that. Cool we have successfully registered our domain name and web hosting Congratulations!!! So far. If you have any questions, please let me know in the comment section. I will try my best to help you personally so now we can move on to step number two, which is to install WordPress and For some reason if you logged out then login again Now from the left menu bar click on My Sites Then you can click here create site or here create a wordpress site. I’m clicking here So let’s now add a site name and site tagline. We can change that any time So I’m putting a site name Jim Fahad Production and the site tagline – You Deserve To Be Seen. Now Let’s click on advanced here. You need to put your email address your user name and password for your WordPress So I’m putting my email address here WordPress admin user name I want to name it Jim Fahad and here. Let’s put a password Do you want to see my password? I’m clicking here on show so it’s ABC one, two, three I will of course show you how you can change it. Later so for now click on next close this browser pop-up now it says where we want to install our WordPress so make sure you keep this directory blank and here is your domain name selected and Bluehost here is suggesting some free plugins, but we don’t need that. Let’s deselect this all now click Next Awesome. It says what press installed successfully Now you can copy these Informations right here and save that somewhere on your computer where you can access it again later and click here to show your password Actually, I intentionally give this an easy password. That’s Abc123 never ever use this kind of easy password I’m showing you shortly how you can change that password We can now sign into WordPress by clicking here But this is not the usual way because all the time you cannot login this way I mean from this page this button right so you should get used to signing in to what is all the time is by going up to a new window and Typing in your domain name forward slash WP dash admin So I’m typing here my domain name our element comm forward slash WP dash admin and click in der So we can see our wordpress login page here. That means what place has installed successfully Sometimes it takes 30 minutes to 24 hours to process this installation and this process is called propagation It basically has to let everyone know that hey this new domain name now exists and registered But we can see our website instantly They actually say it might take 30 minutes to 24 hours, but I’ve been using Bluehost for more than 10 years I always get domain live Immediately actually, that’s another reason why I love Bluehost. So now you know that your domain name is working so go ahead and Just gonna type in my name which was the user that I created and I’m gonna type that easy password Abc123 you can click this eye icon to show it now. Let’s click on login So here we are inside the WordPress dashboard and it looks like crazy right now with all these notifications and such So just go ahead and click on the X on everything that you see Cool just kind of cleaning things up makes it look a lot better So the next thing we’re gonna do is change our password to a strong password not that abc123 so to do that just going over to users and from there click on your profile and then just scroll all the way to the bottom and Then you will see account management here. Now. Here’s the option for setting new password now click on generate password So now instead of that abc123. I want to put my strong password Though it says weak but I’m happy with it because it may not be that much e strong But it’s easy to remember for me So I’m clicking here confirm use of weak password now to save this password click this update profile button here Cool, ok So now we’re gonna move on to step number three Which is to activate a new and the theme we’re gonna be using is called flux So in order to get flux, we were just gonna go over to appearance and over here Just click on themes. You can see that these are currently installed themes We got twenty nineteen seventeen twenty twenty sixteen and right now twenty twenty theme is activated So at this moment if we want to see how our website is looking Just go over at the top left here under your site’s name. You can see a drop down say visit site I’m opening it from a new window. So this is our current website Looks like it’s super boring super plain. Yes, so we are gonna go ahead and start changing So I’m just gonna cancel out this and now to add our theme we can click here at this big box Add new theme or at the top here we can upload anything for now Let’s just click on this big add new theme button You can see hundreds of free themes here at this page So what is what pays theme theme is basically the look and feel of your website here You can see hundreds of themes. So there’s hundreds of different looks and fills I will be using phlox because I like that one and it has a lot of free Customization options, so I’m going here at the right top search bar and typing in flocks Its pH L or X. Here we go. So this is the flocks theme Let’s now just click on install now click activate So our flocks theme is activated and in the notification they are suggesting to install their flock score plug-in So I’m installing that let’s click on install flux-cored plugin Cool, and as we are using flock steam Installing. This core plugin is really important. So let’s make sure our plug-in is activated Correctly to take that let’s go over on the left here from plugins. Let’s click on install plug-ins here You can see all the plugins including the flux core plugin other Plugins came with by default as we have installed our WordPress using Bluehost, but we don’t need any of these So let’s delete all of this. So to delete it I’m selecting all this together by clicking here I’m only selecting the flux core elements plug in here and let’s first deactivate all of them So I’m click here deactivate and let’s now click on apply now Select all again and deselect the flux core elements plug-in and now click on the bulk action Click on delete click apply. It says I’m sure or not here So, I’m sure click ok coal are all unnecessary plugins are gone now Let me show you another thing if you accidentally delete any necessary plug-in how you can activate that again So for now only to show you I’m deleting this flux core elements plug-in So let’s first deactivate it apply now. Let’s delete this plug-in. So If we now want to get that plugin again, let’s go to here. Add new at the top You can see here all the available plugins. These all are free now from here. Let’s search for flux core elements here I’m searching flux core elements and here it is Let’s now click on install now and activate it again, by the way if you don’t know what a plugin is plug-in is actually extra add-ons or extra apps like things that add extra features or Functionalities into your website. Ok, cool now I also want to add another plug-in that’s called classic editor So I’m clicking here on add new and I’m searching for a classic editor. So here’s the classic editor plugin So why am I using this plug-in? I’m showing you the reason for really quick If we now go to post here, and let’s now click on add new from a new tab Now, let’s have a look. This is the WordPress default page or post editor It’s Gutenberg editor, but I’m not really a big fan of this That’s why I’m installing classic editor plugin. So let’s now click install now and activate it So if we now go to add new post page and refresh it See, this is our classic editor. I like this interval Is it to use like my stress of the word we will discuss it later for now, let’s close this all right so now we just have activated our new theme and Plugins and if we now have a look how our website is looking let’s click on visit site from a new tab It’s still looking really boring because we actually have not built anything for the website yet So in order to build it we need to get our page builder plug-in So step number four is to activate page builder plug-in So now we are going to install the awesome page builder plug-in called Elementor So I’m just gonna go to Jim for her the digital calm for our slash Elementor one two five I will put that link in the description so on that page if you scroll down a little bit you can see a link says get Elementor now click here and From here, we can download our page builder by clicking here a free download button or from here this download button I’m clicking here here. We need to put our email address So I’m giving here mine and now click on subscribe and download. It is started downloading here So it’s been downloaded on my desktop here now Let’s go back to our wordpress dashboard and from plug-in on the left You can click here at new and at the very top you can see a button says upload plug-in. I’m clicking here now let’s click here choose file and Select the zip file that we have just downloaded and click on open Now click install now now click on activate plug-in Ok, cool. So now that our elementary edge builder has been installed and activated Ok, we can now move on to step number five. That’s customize our website. So this is the fun part This is where we’re gonna start dragging and dropping and building out our website So first, we need to create our home page and other pages, so to do that. Let’s go to pages here And then click over here all pages You can see some sample pages came by default with WordPress But we don’t need these so let’s select this all then bulk action Click move to trash and apply by the way These pages are not permanently deleted if we want to delete these pages permanently Let’s go to trash and let’s now select all again bulk action select delete permanently and click on apply Ok, let’s now create our page. So to do that. Let’s click on add new button at the top here So the first page I want to name it home And for now, I want to keep everything empty because we will be creating our page using elemental page builder So for now keep everything empty and click on publish Now, let’s create another page click on add new Let us create a blog page click on publish and another page Let’s create contact and click on publish. So we have created our home page though That page has no content at this moment Now what we need to do next is tell what press to use this blank page as our home page? Because if we go to our website right now click on visit site Let’s close this you can see it’s not using this new page that we have created Called our home page. It’s got the stuff on it. It says hello world, which is actually a post So we need to tell what place to use the correct page so to do that Let’s go to the top here customize click here So this is the customizer of our website. Let’s now is scroll down at the very left You can see here home page settings. Click here now from here your home page displays click a static page and For home page. I want to select the page. We have just created called home Cool so now you can see this is our blank home page and this is actually the footer right here So we actually need put stuff in between the header and footer We’re gonna be building it out ourselves All right now go ahead and click on here publish and then at the very left click on this X to close this Alright, we are now ready to go this or blank homepage Now we will start creating this page to an amazing page. So first click on the top here it it paid now click on this big button edit with elemental as We are going to make our page by using this awesome page builder now first Let me familiarize you with this amazing elemental page builder So here on the Left all these you’re seeing are elemental elements or elemental widgets Basically, you can just drag all these from left to the right inside of your real website and on the right side This is basically your main website. So here you can see this plus icon If you click on this plus icon You will find to pick different distractor option like single column double column 3 column section 4 column section like that So let’s first take a big single column section. Click here so this is our section inside this blue border and Inside this section. We have our column you can see a column icon So if we now click on this column icon now this column is selected So you can see a gray border line. That means our column is now selected And if we click on the 6 dots here now our sexually selected Like on the left, you can see at the top here. It says edit section So whatever in it we will be doing right now that will make effect on that section So if we now want to add a background color on this section first Make sure this section is selected and now from left click on this style tab Then inside background you can see background type. So we want to take a classic background so first click on this classic or Paintbrush tool icon now click on color and from this color picker You can take any color you want like black or red or white anything you want for now? Just keep it black for the moment now click outside So here inside this section you can take any kind of elements So to take a element you can click on this plus icon or from this left menu You can see a icon like Rubik’s Cube. You can click over here. So here is all the widgets or elements Let’s now drag a heading inside of this column first We cannot see the text because our background is black and our text color is also black So to change the text color from left, let’s go to his tile here You will find text color click here Let’s make it white so we can see the text properly click outside. Now. You can see the heading text So if you want to change the text You can click over here and then you can see a pencil icon here. Click on that now Let’s go to contents here now You can change your text by typing here Or you can change the text from inside the real website on his screen. That’s really cool Like here, I want to say Jim for HUD, it’s instantly changed awesome Now if I want to add some breathing space at the top and bottom of this section Let’s now select on this section by clicking on these six dots so our section is now selected Now from left go to top Advanced tab now here you can see padding So if we now increase the number of padding by clicking this up icon You see it’s getting a huge spacing all around it But I only want the spacing at the top and bottom not left and right so to do that Let’s make them zero and click on this icon So we are unlinking or unbinding it and I only want to give it 100 pixel padding at the top not one thousand one hundred and 150 Pixel padding at the bottom like that Now instead of the solid black color if I want I can add a background image so to do that Let’s go to his tile tab here and underneath the color option. You can see image So click here to choose image now click on upload files select files Now let’s select an image from folder. I’m selecting this image and now click on open By the way, if you want to get all the images, I will be using for this website You can go to Jim for her digital calm for our element or one to five I will put that link in the description and from that page if you scroll down a little bit You can see a link download the images I use in this tutorial By clicking on that link you can download all the images So basically you will get a zip file and after unzipping you will get all these images these all images are royalty-free So feel free to download it and use it on your own website Alright now here this image is uploaded now click on insert media You can see here is our background image, but we need to update its position so we can see it properly So underneath the image from the left you can see the position Let’s make the position to sender sender and let’s make the attachment to is scroll That’s actually the default settings. But if you want to have a nice parallax effect, you can select this fixed So if we scroll down or scroll up that image will be fixed at the background. That’s really cool but for now, I want to keep the default settings and Repeat, let’s make it no-repeat and the size. I want to make this size to cover So no matter how big is the section is the background image will be resized and cover all the area of this section Also, we can add background overlay with it. You can see here background overlay option. So let’s click here Because you see our text color is white and our background is also kind of whitish so we can add background Overlay to make our text more easy to read so from here background type let’s click a black color click over here on this color palette and let’s make it black and Then you can set the opacity from here If you drag this to the right This overlay will be more darker if you drag it to the left the opposite will be more lighter So let’s keep it something like point 7. All right Now, let’s have a look what we can do with this text So first click over on this text and then you will see the options like you can make it. H3 H4 h5, so by default. It’s h2. If we select h3, it will be smaller if we select it H1 it will be more bigger also We can set that justment to centered or right aligned left aligned like that Then if we go to is tile we already see how he can change the text color. Also, you will find the typography option So if we click here on this pencil icon, you can give it a custom size like if we drag this size to the right It will be more bigger if we drag it to the left. It will be smaller And here is the option for font weight you can make the font weight more thinner or more bold so you can set it to Bold and from transform you can make it all uppercase or you can make it all Lowercase or you can keep it default Also you have options for line height so you can increase or decrease the line height of this text I’m keeping this default. And here’s the option for literary spacing so you can increase the literary spacing like that You can decrease the letter is spacing like this, but I want to keep it default I’m just showing you what’s possible and when you are happy with it all Then you need to click on this update green button here This is very important, you know, nothing sucks than losing your hard world. I did this mistake So many time I can remember for a client. I was doing a page I almost designed the whole page But I forgot to click on that Update button and I lost all the work and I had to redo it So never forget to click on this Update button to save your work. So you are already familiar with Elemental at least you already know how to handle this basic stuff. So now we can start creating our real website So for now, let’s delete this section. Oh, no, my hard work has gone Don’t worry. We will make it more better So let’s now click on this plus icon and now I want to take a two-column section. So I’m clicking This is checked. I want to make it full width. So from here is stretched section I’m turning it on and now first let’s add some breathing space at the top and the bottom so let’s go to advanced unbind the padding and I want to add 100 pixel padding at the top and 150 pixel padding at the bottom here is our left column here is all right column So first inside the right column, I want to insert an image. So let’s click on this Rubik’s Cube icon here We can just a drag an basic image inside here. But instead of this basic image. I want an advanced image So I’m looking for that So here under flocs general you can see advanced image to get it make sure you have installed Flux core elements that we already have installed Otherwise, you will not get these widgets. That’s under this flux general area these widgets These are basically coming from that flux core elements plug-in So make sure you have installed that now let’s drag this advanced image inside this column So here it is. We need to put the image now. Let’s click here to choose image Upload files select files and I want to select this image So I’m clicking here click on open now. Click on insert media. Ok, it looks very big so image size I want to make it full size and now I want to add a little bit margin at the right So I’m going to add verse tab unbind the margin and only right I want to add 100 pixel of margin like that and let’s now go under settings tab here Here is the option for preload image. I’m turning it on You see a nice blurred loading effect So there are a few other different options, but I like the blood 1 and here is the tilt effect So right now if I hover over on it, nothing happens, but if I active that tilt effect And now if I hover over on it, you can see a nice tilled effect when I hover over on 8 awesome Now here’s the option for colorized shadow. Let’s turn it on so you can see shadows around this. I like it Alright, let’s go to our right column some clicking here on this plus icon. Let’s add some text inside it first So here’s the text editor I’m dragging it inside of this column So like Microsoft Word you can edit any text from inside here So I’m putting some dummy text here and let’s now go to his tile tab. Click on typography I want to make the font size 15 pixel and Font wet. Let’s make it very thin Maybe 200. Yup. Alright So now I want to add heading at the top of it so let’s click on this Rubik’s Cube icon here at the top and you know I can easily just drag a heading at the top here like this But this time I’m not doing this way because I want to make it a really cool-looking Heading not a generally hitting like this if you want you can keep it like this But I want to make it really really cool. So first let’s delete this one to delete it Just go over here on this pencil icon and right click you’ll find the option for delete. Let’s click on delete It is gone. Now first. I’m gonna take an inner section at the top of this paragraph. So here’s the inner section I’m dragging it at the top of this paragraph here and here you can see two columns, but I need only one column So I’m deleting one right click here. Delete this column so inside of this column I want to make that Cool-looking heading and the reason I’m taking it inside a column because I want to reuse it all over the website You can see that shortly for now. Just follow along So let’s now click on this plus icon and let’s drag a heading inside of this column here So this one I want it to say Jim fahadh and let’s go to his style tab. Click on typography. I want to make the letter is missing 210 like this and I want to duplicate this heading now So to duplicate it right click here and click on duplicate and above one I wanted to say about me and now let’s go to content tab here. I want to make it really small Let’s make it h6. Now less who under his tail tab, and I want to change this text color So click on this color picker. I want to take a greenish color like this and then let’s go to typography Here here is the font weight. I want to make it 400 and transform I want to make it all uppercase cool now I want to take another heading so let’s click on this Rubik’s Cube icon here and I’m dragging another heading at the top of these two heading here and I want it to say about and I want to make it really big So let’s go under style tab. Click on typography and let’s make it really big. Let’s keep it 148 now I want to make this one color lighter. So now let’s click on text color palette here So I want to keep the same black color, but I want to reduce the opacity You can reduce the opacity by dragging this to the left like this. Let’s keep it like this And now I want to add some negative margin So to do that, let’s go to Advanced tab unbind the margin I want to add some negative margin at the left So I’m clicking here at the down arrow, or I can type it manually So let’s keep it minus 70 and also I want to add some negative bottom margin. So let’s make it a 135 like this See overall. It makes a really nice effect To make it more cooler. I want to add some animation with this big heading So to add animation we go to under this Advanced tab here. You can see motion effects Let’s click here and you can add different animations from here first. Click here You will see there are different options like fading down or we can select fade in right? Yes, I like this one here is the animation duration by default It’s normal, but you can make it slower or you can make it faster. I Want to keep it normal and let’s add some animation delay. I want to add 600 m/s cool This time I do want to lose my hard work So now click on this Update button to save our work cool Our first section is done now. Let’s create our next section So now we scroll down Now, let’s click on this plus icon in order to take a new section again. I want to take this single column section I’m clicking here. Let’s turn on the stretch section and I want to add some space at the top So I’m going to advanced Unbind the padding and I only want to add some padding at the top. So maybe 50 pixel All right. Now inside of this column. I just want to copy this and paste this Actually, there’s the reason I keep it inside a single column So now hover over on this column right click here Click on copy now is scroll down inside this section here right click and click on paste cool Now don’t worry that this big text goes outside of our website We cannot see it only because of this left menu bar of Elementor if we minimize this we can see it perfectly see so now expand the elemental page builder and Underneath this section. I want to take eye spacer. So that will create some space So I’m clicking here on this Rubik’s Cube icon. And here’s this spacer I want to take it underneath this all heading right here You see here this spacing you can increase it by dragging it, right or you can decrease it. I want to keep it default There’s 50 like that and then underneath that I want to take inner section I’m clicking on this Rubik’s Cube icon. Here’s the inner section I’m dragging it underneath the spacer here now. Actually, I want to make this our services section So I want to put two or three different services here So let’s click on this plus icon first and inside that I want to take an icon box. So here I’m searching for icon box Here it is. Let’s drag this inside of this column here. You can change everything inside of it Let’s say you’re a photographer and photography is one of your service so you can change these texts to photography like that and by default age H3 we can make it h4, and then you can change these underneath text from here So I’m putting here some dummy text like this. Also, you can change this icon from here. So let’s click here on icon box You will find tons of icons from here or you can search from the top field. I’m searching for a photo or maybe Camera this one. Let’s select this one and click on insert now Let’s go to his tile tab here first I want to change the color of this icon to match with our website with that greenish color So let’s click on primary color color picker here So I want to select that greenish color cool now click outside now here you can play with this spacing size and rotation Let’s make the spacing default 15 to 10. I want to make the size 260 like this and if you want you can rotate this image like this, but I want to keep it default So I’m removing this now. Let’s open the content tab here because I want to change the font size of this text So I’m clicking here on this typography of description. Now, let’s scroll down here font size I want to make it 14 pixel like this. All right Now scroll up now. Let’s go to Advanced tab now I want to add some margin all around it So let’s add maybe 10 pixel of margin and here is the padding option Let’s unbind the padding first I want to add 25 pixel padding at the top and 25 pixel padding at the bottom and 15 pixel padding at the right and 15 pixel padding at the left cool also I want to add some box shadow with it. So to do that here you can see border. I’m clicking here And here’s the option for box shadow. I’m clicking here on this pencil icon now from here Let’s first select the box color box shadow color. I want to keep it really dinner I’m in lighter. So let’s drag these 2.2 or let’s keep it point three like this Keep the horizontal zero Vertical let’s make it five. I want the blur to 30 and spread I want negative is spread maybe minus 15. Yep, and position outline is fine for me now I just want to duplicate this column couple more time. So hover over here on this column icon right click here and click Duplicate let’s do it one more time right click here Duplicate and let’s delete this empty one right click Delete this now you may have different services like photography You may have videography service or other services so you can change anything icons Heading and paragraph for each of it. So not to bore you. I’m doing it really quick Alright now I also want to change this text. So instead of amgen fahadh here. I want it to say Services provided and here instead of about me. I wanted to say my services and Instead of this big about at the back. I want it to say Services or service cool now click on update to save our work So we have created our services section and at the top we have completed our about Me section So now in between this about Me section and services section, I want to add another section There’s a carrier section and unlike this two section. You don’t have to do it from scratch because I have a gift for you I already have made that for you. So, let’s see how you can use that We already know underneath any section if we want to create a new section We need to click on this plus icon, but in between these two section if we want to create another section So that means we want to take a section at the above of the service section So we need to click on this plus icon here. So We can add a new section here by clicking on this plus icon But as I said, we don’t have to do that. I already have made that We just need to input that action inside here. So instead of clicking on this plus icon Let’s now click on this folder icon here from here top. Click on my templates Here we have no templates at this moment. So to get a template let’s now click on this icon This is the import icon. I’m clicking here. They’ll now click on this button select file and the folder download link I have given in the description inside that folder you will find a subfolder says gift blocks so let’s click on these gift blocks and inside there You can see a JSON file says carrier – section dot JSON now select this and click on open Now here you can see inside my templates here is courier section template added So let’s now just click here on this insert button Here we go So here is our carrier section with nice shape divider and you can change everything Inside of it every text each heading the main heading everything so you can talk about your work history Your education and if you want to change anything Just click over that like here instead of software engineering if you want to say computer engineering you can do that over a screen Like I’m typing computer This way cool also underneath this you will find your skills section With a nice progress bar all these are editable All you have to do just click over here if you want to change this progress bar So hover over on it click on this pencil icon here so Here it says UI UX Designer instead of that if you want to say any other thing you can change that from here You can change the percentage right now It’s 80 if you want to make it 100 percent, you can do it only by dragging right or left Also, if you want to customize the design you can go under style tab here if you want You can change this white color to any other color. So in a word you can customize everything Even if you don’t like this cool shape divider you can also change that so to do that you need to click on the six dot icon and Let’s now click on its tile and here you can see shape divider. Click here So right now it’s waves brush So if you want to change it to any other thing like curve it’s now curved or if you want to make it tilt It’s now tilt. So this is the top shape You see here top selected, even if you want to change this bottom shape You need to click on this bottom shape and you can change that from here But for now, I also make the top one to wave the brush. So I’m selecting top type from here I want to select waves brush awesome so this is our courier section underneath that here is our services section and then I want to add a portfolio section no matter if you are a photographer no matter if you’re a web designer as a Professional you must should have some kind of portfolio to show your clients So first, I want to duplicate this area. So to duplicate it I’m clicking here on the six dot icon right click here, and I’m clicking on duplicate so here our services section is duplicated now here in this section instead of service provided I Wanted to say recent work here instead of my services I wanted to say see the outputs and Instead of that big service. I wanted to say portfolio Cool now I want to delete these columns because I want to add an image gallery here So to delete it, let’s click on this X icon here. Let’s now go to here Click on the Rubik’s Cube icon and here I’m searching for modern gallery this one Let’s just drag this and drop it here. Our gallery is empty now. We need to insert our images here So to do that, let’s click on this plus icon here on the Left. I’m clicking here now Let’s go to upload files select Files and from inside this folder. I want to pick 10 images as our portfolio image You can select more images at a time If you are on a PC, just click on ctrl key and select one after another and if you are on a Mac Please comment and then select one after another So I have selected ten images and their height width is not similar Let us now click on open All the ten images are selected and now click on create a new gallery and from here you can drag and drop Order or reorder these images as your wish like this Also, you can reverse that by clicking here reverse order You can do that again reverse order now. Let’s click insert gallery button here cool here. You can see all the images They all have been cropped in same size But I want them into their own size and I want this section to look really cool So to do that from here gallery layout by default, it’s big. Let’s make it masonry. I’m clicking here masonry and Here’s the columns option. I want to make it 3 Also, let’s make the image is spacing 10 to 15 like this ok now click on this Update button to save our work here and Still we cannot see this masonry effect inside this elemental page builder So if we want to have a look on the real feel of this masonry image gallery, we need to preview it from here So let’s click on this eye icon to preview the page Now here this preview page here is our about Me section underneath that here is our carrier section and underneath that Let’s scroll down here is our services section and then if we scroll down a little bit you can see the nice Masonry gallery here. It looks really amazing even if we now click on any of this image, like I’m clicking here you Can see the image with a nice lightbox we can navigate through this right or left arrow if I click on the right arrow Here is the next image like this amazing I really like it So let’s now close this and go Back to our elementary page builder here. So inside of elementary you may not see it working perfectly But if you want to see the real result, you need to go to this preview page, then you can see how it really looks All right Now underneath portfolio section. I want to add a call to action area with a video background I know you’re excited about it. So let’s now click on this plus icon I want to select the single column structure now Let’s click stretch section turn on and for this section. I want to give it a minimum height So here you can see height click here. I want to give it a minimum height by default. It’s 400 I want to make it 550 pixel so this is the height Now I want to put a video background of this section in order to do that Let’s go to his tile tab here and here you can see background type from there let’s click on this video icon and here you can put any Video link no matter it’s at YouTube or Vimeo link Just copy a YouTube video link from URL your browser URL and paste it here You can see the video background even you can set a start time and in time from here so I want to Give it a start time 55 seconds and in time Let’s keep the default 70 also you can set the option if you want to play to once or if you want to make it loop and Then you can also add a background overlay over it So I’m clicking here on background overlay here. You can see background type. I’m clicking here on this paintbrush icon Let’s pick a color. I want to give it a black overlay some selecting black color and you can control the opacity from here you if you drag it to the right it will be more darker if You drag it to the left. It will be more lighter. I want to make it a little bit darker. So I’m keeping it Five, that’s okay. I also want to add shape divider on this area So from left is scroll down here. You can see shape divider click here here is top selected. Let’s select the type I want the same waves brush, even you can play with the width of this shape divider like this But I want to keep it default and height. I want to make it 100 like this Also, I want to do the same with the bottom one. So I’m selecting bottom now click on type I want to make it also waves brush and also this one’s height. Let’s keep it 100 cool Now inside of this I want to add a heading so I’m clicking on this plus icon Let’s drag this heading inside of it and I want it to say let’s capture this special moment You can say whatever you want But first I want to make this one’s color white. So I’m going under style tab. Let’s select the text color I want to make this white now click outside and I want to make it a bit bigger. So let’s click on typography Size, let’s make 8:58 pixel like this now. Let’s go back to content tab. I Want to make the alignment sinnard? Alright now underneath this heading I want to add a call to action button So let’s click on this Rubik’s Cube icon here. I’m dragging a button underneath this heading here Before styling this button. I think this video background is distorting your attention So for the moment, I’m disabling the video background. So I’m clicking on this section icon and from under the style tab here background For the woman, let’s just put a classic background image instead of video. So I’m selecting an image Let’s keep this image for now Now click insert media. Actually the video background was distorting our attention what we’re going to do with this button That’s why I’m temporarily using this solid image background image Now, let’s see style the button. So let’s click on this pencil icon here first This button is saying now click here instead of that. I’m changing the text from here I want it to say let’s talk and then alignment I want to make it alignment Center and The size here is is small by default. If we want we can make it medium or large or extra-large Let’s keep it small. Also if you want you can add an icon with it Like if we click on this icon and we select an icon Let’s insert it so You can see here is icon before the text. If you want, you can set the icon after the tipped like this So you can change the icon position from here, but for now, I don’t want any icons So I’m clicking on this delete icon here. Now. Let’s go to style tab. I want to change AIDS font size So let’s go to typography and let’s make the font size to 18 pixel Alright now I want to add some border radius with the corners of this button So here you can see the border radius option So I want to give it 25 pixel border radius and I want to add some padding inside this button so I’m unlinking this padding, so I want to give it certain pixel padding at the top and Certain things there at the bottom 40 pixel at the right and 40 pixel at the left like this cool Now if you want you can add and hover animation. So let’s go to advanced. Sorry not advanced Let’s go to his tile tab and here you can see normal and here’s the hover so let’s now click on hover and if you want any Hoover animation You will find that from here Like if you select the push animation and if we know over over on it You see a push effect here then if you select the pulse and now hover over here is a pulse effect But the more simpler more better. So let’s select grow. Now. Let’s have a look. Yep It looks perfect. Now. Let’s go to content here here You can link this button too where else so you can link it to your other website your Facebook account anywhere But I want to make this button interesting I wanted something like if anyone click on this button, they can directly make a call to us. So how can you do that? so let’s go to Jim for the digital dot-com for our Elementor 1 to 5 if we scroll down a little bit you can see a code clickable phone number Copy this and let’s go back to our element of page builder here link remove the hash and Paste the code here is my phone number. You will put your phone number here So in this place you will be putting your phone number So now if anyone click on this button, they will make a direct call to our phone. Cool Now I want to add a divider in between this button and this heading so let’s click on this Rubik’s Cube icon Here is a divider. I’m dragging this in between them Here we cannot see it because we need to change its color. So I’m going under style tab I want to make it the same greenish color and here’s the width Let’s make the width two three. And right now the gap is huge So I want to reduce it to two and let’s go to content and here which is now in percentage I want to make it in pixel. Let’s make a 200 pixel and Alignment, let’s make it centered like this Awesome. Now, let’s click update to save our work. We are almost done with our website Now I want to add a pricing Table underneath this area and I also have pre-made that for you. So no worries You don’t have to do that from a scratch. So let’s now click on this folder icon here Go to my templates now click on this import icon Click on select file from inside that folder Let’s go inside gift blocks folder here. You’ll find pricing table dot JSON file So I’m selecting this one and let’s now click open. So here is pricing table section added Let’s now click on insert button here Here we go So no matter if you have a product or service you can create this kind of pricing table for you and You can change everything inside of this. So just hover over on any text You can see the text editor here at the left. So you can just type inside here and everything will be changed now Let’s create our next section that I also have created for you. There’s our contact section So let’s now click on this folder icon again. Click on this import icon here select files and here you will find contact – Section dot Jason select this and click open So here is our contact section block added now click on insert cool So in this context section in the left, you can change your address from here. You can just type inside here You can change your contact number from here and you can change your email address from here You can change this icon You already know that how to change this icon and their color and here is your social media icons So if you want to change any of these just click on this pin icon here So here you can add your all social media accounts like Facebook Twitter YouTube Instagram LinkedIn if you want to add more just click here add item button and then you can add your other social media icons and If you don’t have any of these just click on this X, so it’s instantly gone deleted So if you want to link it to your Facebook page Just click here on this Facebook then here you can see link Just you need to put your Facebook link here same for Twitter YouTube Instagram just put your Instagram account link here put your LinkedIn account link here like this and you Can change these shapes from here? You can see the ship is now circle if you want to make it is square click on a square But I like the circle one. You can make it alignment Center right or left Then let’s go under this tile tab from here. You can change the color right now It’s the black color if you want to change it to anything else you can do it from here Also, you see here. We have selected custom color. But if you want their official color, you can pick this Official color so now they are on their official colors, but I want them in black cool Okay, so now we can move on to step number six, which is to create a new contact form So having a contact form on your website is a must-have It allows anyone to be able to contact you professionally for inquiries or questions or maybe your selling products whatever it might be having a contact form is just Absolutely necessary for a professional website and I will be showing you the easiest way So I want to put that contact form on this right column So let’s click on this plus icon here and from the left widgets. I’m searching for contact and We will be selected the easiest one that’s provided by phlox So again, make sure you have this flux core elements plugin activated Otherwise, it won’t work. We have it activated So let’s now go back to elemental page builder now drag this phlox contact from inside of this column Here now. You only need to do a single thing that You need to put your email address here some putting mine So this is the email address where you want to receive the email? So whenever anyone comes to your website and they fill up this form and click on submit You will receive that into your this email address That’s all we are done with our contact form Now I want to show you an interesting thing like we have pricing table here. And here’s the book now button So I want it to behave like when anyone clicks on this book now button The page will be jumped to this contact form section. So these buttons will be jump buttons Let’s see how we can do that so before that we need to know each section has own CSS ID to get that click on these six dot icons and Let’s now go under Advanced tab here. You can see a field CSS ID So here you need to put an unique ID. Like I’m putting here contact Section together noise spacing between them and let’s now go to buttons here let’s now click on this pin icon here and Here you can see the link option. So I want to link it to contact section the CSS ID name of this section and we need to put a hash before that and there is no – because we haven’t put any – Like this hash then this section CSS ID now. I want to do the same with other buttons So I’m copying this one. Let’s now select this button Here I want to put the same ID also for this button I want to put the same ID now have a look if we now click on this book now button It jumps to the contact section cool Now I want to add the last section of our page. That’s a Google map So let’s now click on this + icon here I want to select a single column structure now make the stitch section turn on and for this one content width I want to make it full width now. Let’s click on this Rubik’s Cube icon and I’m searching for map Here’s the Google map. Let’s drag this inside this section cool. So here is our Google map You can change your address from here. You can change the zoom by default It’s 10 if you want to be more zoom in then you can increase the number But I like the default one You can change the height you can make it more longer like this, but I want to have it default some removing this and Also, if you have a close look you can see some spaces around this map But I don’t want this space So let’s now click on the 6 dot icon and here you can see column gap default I want to select no gap it looks really cool now Also, I want to show you another thing if you want to make this google map black and white you can do that So let’s click on this pin icon and go under this tile tab here here you can see the CSS filter Let’s now click here And if you reduce the saturation here to the very left it now becomes black and white Also, if you want to make it colorful when you hover over on it Let’s now go to this hover tab here And let’s now click on CSS filter and here make the saturation 100 So if you now hover over on it, it’s colorful and in general. It’s black and white. All right So here is our footer we need to customize that and here is our header. It still says gym fat production we will be adding our logo and here we will add our minnows and Here if we now click on this top menu that will take us to the top of our page Now we can move to our step number 7 customize our header and footer So here on the top left on the header, we will have menno’s as it’s a single page website We need to make those jump buttons That means when you click on any button that will jump to the specific part of this page So we need to link those top menus with this CSS ID of these sections So before creating the menu, let’s first add CSS ID with all these sections I want to do it really fast. So this is the about Me section Let’s select this section now go under Advanced tab. And here’s the CSS ID I want to name it about me then here is the next section Now select this section Go to under Advanced tab. I want to name it carrier then go to the next section Let’s select this section Go to under Advanced tab, and I want to name this CSS ID to services So I’m doing this with all the sections because I don’t want to make you bore you already understand how to do that now Let’s click on this object button to save our work now click on this top hamburger menu Here and let’s now click exit to dashboard because we want to go back to our wordpress dashboard now So let’s now create our menu from appearance here. You can see menos Let’s click your menos then here. You can name your menu anything. I always love to keep it main menu No matter what the name is because no one can get to see what’s the menu name. Let us now create menu and Inside this menu. I want to add those custom CSS ID links. So from left, you can see custom links. Let’s click here so the first menu should say about Me and I want to link it to that CSS ID. That’s about me So hash about me now. Click Add to menu then the next one carrier because after about my section we have our carrier section and Let’s link it to carrier now click on add to menu and again not to bore you I’m creating other menus really quick because you already understand how to do it Ok, I have added all the menus here. Let’s now click on save menu Here now. Let’s go to our website from top left. Click on visit site. I’m opening it from a new tab So here is our website, but we cannot still see the menu at the top. Why is that? Let’s now go back to our WordPress dashboard Here in the menno’s underneath here. You can see display location. So we need to select its location I’m selecting now hit our primary navigation here. And let’s now save the menu now let’s go back to our front-end of the website and now refresh the page Here we go. Now if we click on career menu it now jumps to the career section If we click on portfolio, it jumps to the portfolio section. It looks really awesome If we now click on ‘contact from top it jumps to the contact from section Awesome. Now, I want to add logo at the top left Also our favicon so to do that, let’s click here at the top customize So here it is our customizer from here left Click on site identity now here is the option for adding logo So let’s now click here on select logo now go to upload files select files Inside that folder you will find also a logo or you can put your own logo So this is the logo I’m selecting this one now click on open now. Click on select No, I don’t wanna crop this so click on skip cropping So here is a logo Awesome. Now. I also want to add a favicon here Like if you go to Jim Fahad digital comm you can see a favicon at the browser top Here this little tiny icon So I also want to add that so from left is scroll down here at the bottom. You can see site icon Let’s click here select site icon now go to upload files Select files and from inside this folder here I made a favicon select this and now click open now Click select a skip cropping we can see it now instantly now here at the top You can see the text home is 2-yard to see a text home on the home page So we want to remove that. So now from left is scroll up. Click here to go back now click here page Then click your page title now here you can see display title bar section I’m disabling this one. Now that weird home text is gone Now, let’s click here publish to save our work and now click on this X to close this So far this page looks really amazing All the section looks super modern slick and professional If you want, you can keep your site like this But I want to make it a little bit cooler. So to do that I Want to add a nice? Before/after slider in this place and I want to do that using of course Elementor. So let’s click here it with Elementor So now here at the top I want to add that before after slider So let’s now click on this plus icon to add that section. Let’s now click on this plus icon I want to take this single structure now let’s click stretch section turn on and I want to make the content with two full width and I want to give it a minimum height and This time I want to give this height not in pixel, but vah vah means vertical height So I want to display this section at the full height of that device So I’m selecting that v8 from here and I want to make that VH 100 That means 100% height of the device Now, let’s click here on this plus icon and I’m searching for Before/after slider so here it is now. Let’s drag this inside here I want to make the image size full so I’m making them full for both now. Let’s add our before-and-after images So in the first one, I want to add a black and white image and the second one I want to add a colorful image So let’s now select the first one Go to upload files select files, and I want to select this black and white image Let’s open it now click on insert media Whoa, it’s a huff and now select our second image I’m clicking on this choose image upload files select files Now let’s select our colorful image here. It is now click on open now click on insert media Awesome, you can make your photo black-and-white version using Photoshop or you can just google it with the keyword Black-and-white photo maker online you will find tons of online software Websites you can make a black and white version of your photo and you can create these kind of cool-looking before/after slider at your website Now underneath this section. I want to add another section. I really quickly just follow along now Let’s click on this saikhan to take a new section. I also want to take a single structure Let’s make this one straight. I want to give it a minimum height let’s make it a 300 and column position I want to make it top and I actually want to make this one inside this Before and after slider so to do that I want to give this section some negative margin so I’m going to advanced and bind the margin and I want to give it – 300 pixel so it’s now inside our slider here and here inside of it I want to take two heading some clicking on this plus icon Dragging the heading inside of it. Let’s make it centered and I want it to say Hello. Now, let’s go to style. I want to make it white now. Let’s go to typography. I want to make it really big So let’s make it 200 pixel like this and Here is the line height. Let’s make it 0.8 and letter spacing Let’s make it thin like this and I also want to add some text shadow with it So here’s the text shadow option. I’m clicking on this pencil icon. Let’s select the color by default It’s point 3, let’s make it 0.5 now click outside Rest is fine now underneath. Hello I want it to say Jim Fahad personal website or Jim for personal portfolio a text like that So let us now click on this Rubik’s Cube icon. I’m dragging another hidden underneath this. Hello. I Want it to say Jim Fahad? personal Portfolio. I want to make it centered now. Let’s go to a style tab Text color. I want to make it white Now, let’s click on typography. I want to make the font size 28 pixel and font weight Let’s keep it 700 like this Now I want to do one last thing That is I want to create a jump button menu here then actually I will delete the main heading Because I want to make this page looks really unique So let’s now click on this plus icon Here now. Let’s take another new section single column structure Let’s make this one a stretch section turn it on content with full width and Column gap let’s make it no gap Now click on this plus icon and I’m searching for Meno Here is the flocs navigation menu. Let’s drag this inside this full width section So here you can see by default menu here main menu that we have created you Selected automatically so we can see about me courier services portfolio pricing contact all this Also, you can select the mobile design from here So if we select the hamburger this menu, we cannot see it now But on mobile it will be look like this on a hamburger we can see that shortly now Let’s go to his tile tab before styling Let’s go to Advanced tab first because I want to give it padding all around it 10 pixel now let’s go to stile tab and First I want to make them centered. So here text align. Let’s make it centered Now I want to give this section a greenish background. So let’s now click on this section icon Now go to his tiles now let’s select a background type classic and I want to give it that greenish color. All right. Now, let’s check this menu is working perfectly so if we now click on pricing Here’s jumps to the pricing area. So it’s working perfectly now Let’s click on update to save our work now Let us click on the top hamburger icon click on XD to dashboard now from top Click on visit site So this is our website right now and as we have created this We don’t need this one anymore. But of course, this is my personal choice You can keep it if you want as it’s a single-page portfolio website So that’s why I want to hide this heading so let’s now click on customize Now from left click on header Now at the top here click on header section and from here, you can see header layout a scroll down Scroll down now click on no header if you don’t want to show this header Some clicking on no-hitter our header is gone But you can see here is some empty space. This is coming from theme So I also want to reduce that not reduced. I completely remove that. So let’s now go back Go back one more time now. Let’s go to page then page layout Here you can see display content top. Margin. Let’s disable this Done. There is no top margin. Let us now click on publish to save it now click on X to exit So here is our cool looking personal portfolio website. Here is the nice Before-and-after slider if we slide to the left You can see the full colorful image if we slide to the right. You can see the black and white image It looks really really cool Then underneath that we have our menu here. So this is our jump menu so if we click on about me, it jumps to the about Me section and On hover here is nice tilt effect with this image Then we have our carrier section here. I love this section Then here is our services section Now here is our portfolio section With nice masonary images then here is our call to action section then here is our pricing table and underneath that we have our contact form and then we have our Google map and Then here is our footer underneath here So now we can customize our footer like we can add a footer menu here on the right side with some pages like privacy policy or Cookie policy or if you have affiliate links inside your website, you should have a disclaimer page So now we can move to our step number eight create a new page Yes, this is a single portfolio page website But still you should know how to add a new page like as I said, you may need to add privacy policy Disclaimer that kind of pages so let’s add our footer menu first So let us now click on customize here at the top Now, let’s scroll down to the footer of our page From left bar click on footer then again. Click here footer now you can see for the layout Let’s select the third layout this one. So here is our copyright text and on the right side We will be adding a footer menu If you want to change this text you can change it from here, but I’m happy with it. Let’s now clear our footer menu So let’s now go back Go back one more time. Now. Let’s click on menno’s. We already have one menu That’s main menu that we are using as our jump menu. So now let’s create a new menu for our footer Click here. Create new menu. I want to name it full menu. Now this time check this one footer navigation Now click on next now click add items here We want to add some pages like privacy policy or Terms of Use Disclaimer this kind of pages so we can create our pages from here You can see here is a field add new page. So let’s now create first terms of use. Click Add Then now add cookies policy click on add now Let’s add a disclaimer page click on add now Let’s minimize it and have a look Now you can see there are three links created terms of use cookies policy and disclaimer Let us now. Click on publish to save it now. Click X to close this now if we go to our wordpress dashboard Now from pages, let’s click on all pages Here you can see our cookies policy disclaimer and Terms of Use pages are created. So here’s cookies policy Let’s now click on edit You already know how to create a page using Elementor so you can create that using elemental page builder But for the pages like cookies policy disclaimer or Terms of Use These are actually basic pages to get an idea. Let’s go to Entrepreneur com and if we scroll down to their footer you can see they also have their Terms of Use privacy policy cookies policy page so if we go to their cookies policy page You see this is a pretty simple page with only texts. So to create this kind of simple pages We will be not using Elementor we can create this kind of pages using this Classic editor. So for now, let’s just copy the text from entrepreneur.com cookies policy page Don’t just copy and paste their text inside a website. I’m just giving you an example now, let’s go to our WordPress dashboard and Paste the text inside this editor this editor is very easy to use It’s similar like Microsoft a world Like if you want to make this one bold, you can just select that and you can click this bold icon here So it’s now bolded Also, you can add any heading here. Like if I Write here Cookies policy just select this text and from top here click here And let’s make it heading two like this and on the right you can see her template Let’s keep the default template and if we scroll down we’ll find couple more options Like you can select different layout different sidebar options and underneath that Here you can see display content top margin. So you may remember for home page We have removed that top margin, but it specifically on this page. We want that top margin So let’s now click here and select. Yes now click here on update now Let’s go back to our front in from top. Let’s click on visit site And if we now scroll down to the bottom of our page on the footer right here is the cookies policy Let’s click here cookies policy here is our simple and plain cookies policy page So in the same way, you can create your Terms of Use and disclaimer pages We can move on to step number nine, which is how to create a blog post So if you want to start a blog you don’t have to do anything extra Everything is already ready for you from dashboard. Just go here on the Left posts and from there click on add new and From this page you can write about anything All you need to do just give here a title of your blog post Like I’m giving here how to start a photography business and then start writing whatever, you know about that stuff inside this classic editor, so I’m putting some dummy content here and Then from right you can create a category for your post to do that. Click here. Add new category like if you want to post it under photography category just type photography here and click add new category and then scroll down Here you can see there is option for set featured image So you can say the featured image for this list now click here. You can upload a new photo from your computer I’m just using this one now Let’s click here set featured image when you are done with your all writings then just click here on this publish button Then if you want to create another post click here at the top add new or you can always go to their from the top Posts under that you will find add new. So click there and write your second post third post 101st so again not to bore you on creating couple more posts because I want to show you How you can add your posts inside the home page? Ok, I have created some dummy blog post. I actually made four and here is once his hello world It came with what press by default so I want to delete this one. So let’s click on trash is gone So now let’s go to our front end of the website Now, let’s click Edit with Elementor Now inside our home page, let’s scroll down Not at the very bottom maybe here at the top of the contact section. Let’s add another section Let us now. Click on this plus now click here Let’s select a single column structure. Let’s make this one is straight Content to it. Let’s make it full width and column gap layers make it no gap and let’s now go to advanced I only want to add some padding at the top maybe 50 pixel and 50 pixel at the bottom Now inside this section click on this + and from left widgets I’m searching for posts Here you can see tiles post Layers drag this inside this section. Here it is So you have different layout options like I want to have this layout Cool. Now let’s go to content by default here. 8 posts will be shown I want to make it full. Also. There are tons of customization option. You can play with it all Now, let’s click on this Update button to save our work Ok, we can now go to our last step. That’s step number 10 They did our website for mobile and tablet So making sure that your website looks great on mobile and tablet as well as desktop What we’re seeing at this moment, this is our desktop view and it’s looking perfectly fine Professional and modern looking now. We need to make sure that it looks also perfect on tablet and mobile device So, how can I check that from here left at the very bottom? You can see a Responsive mode icon here. Let’s now click here from here We can preview the tablet and mobile view. So let’s first have a look how it looks on tablet So now click on tablet here First we need to fix our top area so to do that Let’s click on this section icon. And you may remember on this top. We set minimum height to 100 % vh but on tablet let’s make it 500 pixel like this and you can see it’s only applicable for Tablet here. You can see the tablet icon whatever changes we are making right now Onde effect on mobile device or desktop. So we are now only working for tablet device Now we can reduce the font size of this. Hello text because it looks too big on tablet So let’s click on this pin icon Go to style and from typography. Let’s now drag this to the right Let’s keep it 110 and On this top we have given some margin on this section So let’s click on this section icon here Let us now go to advanced now unbind the margin on desktop we have given 8 – 300 for tablet layers give 8 – 200 maybe yep, it looks good on tablet and let’s now go to layout also now Let’s change the minimum height for this section Let’s keep it 200 Now we cannot see the navigation menus here. So to enable it Let’s click on this pencil icon and from left here You can see display barger toggle on let’s make it also on for tablet now You can see the hamburger menu icon here. So if we click on it we Can see now our all the menus here perfectly now close this Now let’s fix the next section for tablet So first, I want to reduce the font size of this about text. So I’m selecting this one now let’s go to is tile then let’s go to typography and Let’s make the font size 100 pixel and you may remember it’s only for tablet device So as long as you can see this tablet icon These changes are only applicable for tablet devices now, let’s go to advanced Unbind the margin and bottom I want to give it negative 135 pixel and left let’s give it -20 pixel like this and Now, let’s click on this image on this pencil icon let us now go to advanced and bind the margin and I only want to give 20 pixel margin at the right or maybe 30 and now let’s click on this column icon and Only on tablet I want to make it vertical-align:middle Perfect now scroll down Our carrier section looks perfect on tablet our surfaces section looks perfect And I scroll down our portfolio and call to action section looks perfect Pricing tables looks perfect. Here is our blog section looks perfect on tablet device and Contact section also looks perfect as well. Cool. Now let’s have a look how it looks on mobile device So from left, let’s now click on Here we need to fix this top area. Now. Let’s have a look. How other Sections are looking so far. It’s looking perfect Carrier section looks perfect. I Really love its look on mobile device. Here’s the services section looks perfect Here’s the portfolio. And here’s the call-to-action button here on mobile device We can reduce the font size of these text So let’s now click on this pencil icon here now Let’s click on typography and you can see here mobile icon Whatever we’re changing right now is only applicable for mobile device So let’s now make it 28 pixel. It’s too small for this area Let’s now make it 40. Yep. It looks perfect. Now let’s scroll down Pricing area looks perfect Block section looks really nice and here is our contact area Everything looks nice and organized and here is our contact form also looks great. And here is our map Alright, we only need to fix the top area of our website So this area so let’s now click on this section icon and on mobile device We don’t need any minimum height for this section. So let’s make it zero Layers now reduce the font size of this. Hello on mobile device Let’s now click on typography and let’s make it maybe 30 let’s make it 80 like this and now Select this section go to Advanced now unbind the margin only on mobile device I want to give it some padding at the top only So unbind the padding here and I only give it to 20 pixel padding at the top and On mobile device. I want to give it a black background color so it would look really great. I think So let’s now go to his tile tab From here, we can see a background only for mobile device because you can see here mobile icon So it own effect on tablet or desktop view So let’s now choose a image upload files select Files I want to select this black image Now click on open insert media Now this area looks perfect now scroll down Now from mobile if you click on this hamburger menu items pops up perfectly now close this this area looks perfect and The rest of the website looks really amazing right now Now, let’s click on update to save our work. Now. Let’s go to top hamburger icon here and click on exit to dashboard From top let’s click on visit site lifts have a final look off our website we have checked It’s already looking perfect from mobile device and tablet device and we’re having a final look from our desktop Top slider looks amazing. Here is our jump buttons. Here’s our about Me section Here is our courier section looks perfect Here is our services section looks perfect portfolio look awesome now, let’s scroll down Looks perfect Here is our packages or all pricing table looks perfect. There is all blog post Contact section looks perfect Maps and footer looks also perfect. Awesome So everything is working all the buttons each section looks great and working perfectly awesome Alright guys, so that was how to create a personal portfolio WordPress website is step by step If you have enjoyed the video Please this give video a thumbs up and if you want more awesome tutorials on how to create websites from scratch how to make money with your websites And all sorts of website related videos then please hit that subscribe button. You will not be sorry Alright guys, that’s it for now. Thank you so much for watching, and I will see you in the next video. Bye. Bye

Leave a Reply

Your email address will not be published. Required fields are marked *