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
