How to Make a Beauty Salon / Spa / Barber Shop Website in WordPress | Phlox Theme & Elementor FREE !

hey what's going on guys my name is jim fahad in this tutorial i'm gonna show you how to create this awesome beauty salon website in wordpress and not only for your beauties alone you can use this website for your space ender for your beautifuler or for your barber shop to create this website we will be using a free theme a free page builder and all free resources by following this tutorial you can have your own beauty salon website or you can make a website for your client who owns a beauty salon and we will be creating everything just by drag and drop you don't need to know a single line of coding let's now have a look at what we're going to make in this tutorial so first i will show you how to create this beautiful home page how to work with this text this button how to change the images and then i will show you how to create this beautiful services section if you are running a beauty salon you may have different services like makeup nails tattoos or hair work you can change the name of the services and images the way you want and then i will show you how to create this beautiful story section where you can talk about your beauties alone and then here we'll have a read more button you can link this to your about page then i will show you how to create this beautiful call to action section also if we click on this how to work button this video pop-up will appear over our website then on the next section i will show you how to create this beautiful booking appointment form by using this appointment form your customers can book a time with you after that i will show you how to create this beautiful testimonial section here you can put your best client's testimonial and then here's the interesting thing i will show you how to put your recent blog posts inside of your home page then also i will show you how to create this beautiful global fooder where you can put your social media links also some copyright text at the very bottom then if you click on this go to top button it jumps to the top of our website i will also show you how to work with this beautiful header even i will show you how to create your own logo using an online free tool after treating that logo i will show you how to put that inside of your website i will show you how to create this hamburger menu so if we click on this hamburger menu here we can see all of our page links if you want you can also add an image on this full width navigation menu and then click on this x to close it all right let's now have a look on the next page that would be our services page i will show you how to create this beautiful services page here you can have these beautiful images of your services and then you can talk about your all services the sub services if you want you can also display the prices of your sub services and you may have different services so you can put them in two different sections like here we have got makeup section and here we have got the tattoo section by the way you can change all these images all this text the way you want you can change these images with your own images or also i will show you how to get free stock images so you can use those images for free all right let's now go to our next page that's our about page here i will show you how to create this beautiful about us section on the left here you can talk about your company i mean your beauties alone and on the right side you can put a featured image then underneath here you can create your team members section i will show you how to put the team members images with the name their role everything and also you can repeat the same call to action section here lastly here we have got the same global fooder let's now go to the top and have a look on the next page so then before the blog page let's have a look on our contact page i will show you how to create this beautiful contact page here on the left side we will have our google map and on the right side i will show you how to create this beautiful contact form by using this contact form your customers can contact with you and then i will also show you how to create this address phone numbers and open our section all right let's now have a look on our blog page so if we now go to the blog page here i will show you how to create this beautifully designed blog page now here we can see only three blog posts then if we click on this load more button then another three blog post will be shown here in the same way let's click on the load more the more blog posts will be shown so it would be functioning in complete professional way and from the blog page if we click on any single blog post let's now click on this blog post so here we have got our single blog post page here we can see the big featured image and then here is the blog title also we can create the blog category the author name and here we can see the blog details underneath our single blog post page we can see the tags also people can share your blog post by clicking on any of these social media icons also people can leave their opinion by using this comment form all right can you believe we will be creating all of this without doing a single line of coding i'm a professional web developer i usually charge two to three thousand dollar for creating this type of professional website but if you follow this tutorial you don't have to spend a single dollar on a web developer as you are learning from a real web developer it will save you a lot of time and money i'm really excited if you're excited like me please give this video a big thumbs up and don't forget to subscribe this youtube channel it would mean the world to me alright we will be creating this beautiful website in easy 4 steps first i will show you how to get your own domain name and web hosting also i will provide you a 50 discount link then i will show you how to install wordpress then how to install a free page builder called elementor and a free theme called flux then we will start customizing our amazing website also i will be adding a timestamp in the description so you can always jump to the necessary part you need so first of all what is a domain name domain name is basically your website address like facebook has facebook.com amazon has amazon.com i have jim fahad digital.com similarly for your website you need a address that will be yourwebsitename.com and what is web hosting web hosting is the storage space for your website all the images takes you will have in your website all will be stored on your own web hosting as you were owning your own web hosting so there wouldn't be any limitation you can run ads you can upload any text or images you can upload any themes or plugins you want you are in charge of your own website okay now how to get your own domain name and web hosting so first just click on the very first link in the description below this video or you can go to jim fahad the digital.com forward slash hosting and this will take you to a special discounted bluehost page so why bluehost in my opinion bluehost is the best web hosting provider i'm a web developer i tried so many other web hosting companies i don't want to mention their name but i personally ended up using bluehost hundreds of my clients using bluehost and they never complain about using it if you see my bluehost account i have hosted tons of websites here and i never get a downtime their customer support is really cooperative in case you need any help and their price is really affordable that's why i always recommend bluehost so now click on get started here you can see their different plans the main difference between them with the basic plan you can host only one domain you can take their plus or choice plus plan if you want to host unlimited domains also you can take their pro plan if you have millions of visitors on your website already i recommend starting with the basic plan then in future you can upgrade that anytime now let's select the basic plan now we will select our domain name if you already have a domain name that you want to use you can just go ahead here on the right but for now i'm gonna get a new one now here let's try for something like apple.com and click next it says the domain apple.com cannot be used on bluehost please try a different domain name it should be because we cannot take that because we all know that's apple's official website so we will be typing our own domain name here and also if you click on the right side you can see dot site.net.info websites i always recommend to take dot com websites because it looks more professional and legit so i'm gonna type here let's say our elementor dot com as we are going to make our website through elementor page builder and now click on next it says our elementor.com is available that's awesome and here we need to put our account information i'm putting mine here really fast only to not make you bored okay here you can see the business name field if you don't have a business just keep it blank or put your full name but here is the most important thing that's your email address make sure you put your correct email address because after completing purchase a receipt will be sent to that email address so make sure you put your best email address here all right now scroll down here's the package information and it's automatically set to 36 months and this is gonna be your cheapest plan so yes you're paying for 36 months up front but it comes out to only around 3.95 cents a month so this is 50 off that's gonna be your biggest discount now what i recommend is to just do 12 months if you don't want to commit to the 36 months or 24 months it's still 33 saving and it's only around 5.95 a month and you also have your domain name for 12 months so no more additional cost for your domain for these 12 months and here you got package extras first here is the option for domain privacy having domain privacy is good and i always recommend having domain privacy so no one gets to know who is the owner of the website but for the sake of this tutorial i'm deselecting this one let's click on turn it off because i don't want to hide myself at this moment i want to be transparent so if anyone knows i own this website i have no problem you can keep this one checked if you want not a big deal i'm also deselecting all other options they are offering we actually don't need that they are just upselling their stuff all right now you can see the price is now only 71.40 for the full year including the domain that's awesome and i'm legally obligated to tell you that this is my affiliate link so i do get a little bit of commission off of this but it does save you a ton of money and it helps fund these free youtube tutorials what i'm doing so everybody wins i really appreciate it and here is the payment information i'm putting my credit card number here expiration date and cvv code then select this one here so that you are agreed to their terms and policy now click on submit it says your purchase was a success also you can see here is your receipt they will also send it to your email i'm also waiting to get that email meantime we can create our bluehost account so let's click on this create account button here here's the domain name that's automatically selected now let's create our password create a really strong password combining capital letters numbers special characters you know how to make a strong password and then retype the password in the second field now check this once again that you have agreed with their terms and policy now click on create account i already have received an email to confirm my purchase so i'm opening my email you will also get an email like this then click here verify your email it's very important so it's not verified awesome now let's login into our bluehost account with the domain name and password we have just created if you 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 [Music] congratulations so far if you have any questions please let me know in the comment section i will try my best to help you personally so now we can move on to step number two which is to install wordpress and for some reason if you logged out then login again now from left menu bar click on my sites then you can click here create site or here create a wordpress site i'm clicking here sometimes after clicking on my sites you may see these my sites from there just click here on add site then you can see here two options one is limitless customization and another one is fast easy site building as we will be creating our website using an amazing page builder the elementor page builder that's why we will be selecting this option the limitless customization so just click here on get started so let's now add a site name and site tagline we can change that anytime so i'm putting a site name jim production and site tagline it deserved to be seen now let's click on advanced here you need to put your email address your username and password for your wordpress so i'm putting my email address here wordpress admin username i want to name it jim fahad and here let's put a password do you want to see my password i'm clicking here on show so it's abc123 i will of course show you how you can change it later so for now click on next close this browser popup now it says where we want to install our wordpress so make sure you keep this directory blank and here is your domain name selected and bluehost here is suggesting some free plugins but we don't need that let's deselect this all now click next awesome it says wordpress installed successfully now you can copy these informations right here and save that somewhere on your computer where you can access it again later and click here to show your password actually i intentionally 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 into wordpress all the time is by going up to a new window and typing in your domain name forward slash wp dash admin so i'm typing here my domain name our element dot com forward slash wp dash admin and click enter so we can see our wordpress login page here that means 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 i'm just gonna type in my name which was the user that i created and i'm gonna type that easy password a abc123 you can click this i icon to show it now let's click on login so we are now inside wordpress admin panel or wordpress dashboard so from here i will be showing you everything step by step first of all let's click here on the dashboard from the left menu bar by the way don't worry about all these links because during this tutorial i will explain about all these options for now i just wanna clean up the wordpress dashboard so let's close this one now let's minimize all of this also let's minimize this this one and this one also let's close this notification pop-up and here you will also find another option says screen options from here you can just turn off all of them because we actually don't need any of them right now so i'm disabling everything and click screen options again all right now before doing anything i just want to change that easy password that we have given at the beginning of this tutorial so to change that is a password from here if we hover over on user from there just go to profile and here you will find admin color scheme this is the default one if you want you can change it to light or you can change it to modern actually it doesn't matter because only you can see this color scheme so i'm keeping it the default one and then if we scroll down here you will find the option for display name publicly as so let's say in future if you wanna run a blog and then there you may want to display a name as the author of that blog post or the owner of your website like if we have a look on this blog post here you can see it's by jim fahad jim fahad is the author of this blog or of this website so you can change these author names from this place so let's see here you can see this play name publicly as by default i am setting it to jim fahad but also i can change it to other name by giving it a first name last name all this but let's keep it the way it is also you can change your email address from here all right so let's now change our easy password to change it from here under the account management just click here on the set new password here wordpress is suggesting a very strong password but i want to create a password that easily memorable for me so first i'm clicking on this hide so you can't see my password and here i'm giving a password that easily rememberable for me though it says weak but for now i'm happy with it so here i'm clicking confirm use of weak password now scroll down and click on update profile all right and like i said now i wanna clean up my wordpress dashboard a bit more so to do it i just wanna delete all the unnecessary plugins now from left if we hover over on plugins we can click on install plugins so here we can see some plugins that came with wordpress default but actually i don't want any of these plugins by the way if you wonder what is a wordpress plugin wordpress plugin is basically extra add-on or extra app like thing that extend the functionality of your existing website let's say if you want to do some seo work for your website there is a stand alone plugin for that so you need to install that plugin and use that actually each plugin has its own purpose but on a restaurant website we basically don't need any of these plugins so first i just wanna select all of them you can click here one by one to select them or if you click here you can select them all together and then from here bulk action i'm clicking on deactivate then click on apply now after deactivating all these plugins let's now select all the plugins again now from bulk action click on delete and then click on apply now browser popup says i'm sure or not yes i'm sure so click on ok so now our all unnecessary plugin has been deleted actually personally i like to work in a very clean environment so i always delete the unnecessary things now from left bar let's go to pages to all pages here we can also see some pages that came with default wordpress installation but we don't want these pages with our website so i'm selecting all and from bulk action click on move to trash and then click on apply so all the default or unnecessary pages has been deleted now i just wanna do another basic settings so to do that just hover over on settings and from there let's now click on permalinks from here you see the permalink settings is set to plane by default but i wanna set it to post name why am i setting to post name because if you have a look here if we set the permalink to the plane then for example if we have our about us page that url would be like our website name.com then this type of bizarre word number so instead of plain if we set our permalink to post name then our about us page url would be like our website name.com forward slash about us so it's easy to remember also it's good for search engine optimization so here i have set it to post name now scroll down and click on save changes so we are almost done with the basic settings of our website now i wanna install our page builder plugin and you know we will be using elementor page builder so to get elementor page builder for free you can just go to jim fahad digital.com i will put this pages link in the description from that page if you scroll down a bit here you will find important links from there you can see here download elementor free version just click there then eliminator free version will start downloading automatically now let's go back inside wordpress dashboard and from left here if we hover over on plugins from there just click here on add new now from top here you see upload plugins click there now click here on choose file so this is the file this is the elementor free version we have downloaded recently select it and click on open and then click on install now now click here on activate plugin awesome we have successfully installed elementor page builder plugin so at this point let's now have a look how our website is looking so from top if we hover over on our site name then here you will see the visit site link i'm opening it from a new tab so let's now have a look right now it looks super boring super plain so we need to create our beautiful website out of this now the first thing we need to do we need to change the theme of our website because this look and feel is coming from the current theme and we will be using other theme to make it really cool all right so to change our theme let's go back inside wordpress dashboard now from here if we hover over on appearance from there just click on themes and here you can see the 2021 theme is activated also here you can see some other themes that came with wordpress default actually you know what i don't wanna use any of these i want to use another theme called flux so to add another theme we need to click here on this add new button also you can click here on this big add new button i'm clicking here so from this place you will find a lot of pre-made themes and like i said theme is basically the look and feel of your website so now from the top right corner here i'm searching for a theme that's name is flux here it is so from here just click on this button says install and then click on activate awesome we have successfully installed the flux theme because here we can see the activated theme is the flux theme now here at the top we can see a pop-up it's not actually a pop-up it's just a notification bar so it says thanks for choosing flux to take full advantages of flux theme and enabling demo importer please install code plugins so now click here on install flux code plugin all right it started installing and right now it's activating and here we go it says welcome to flux theme and just make sure you are under this flux tab from the left side so from here we can see this is the dashboard and here is the demo importer here is the template kits we will be going under the demo importer there all right here under the demo importer we can see there are lots of pre-built demo websites and here if you have a look some of them are free and some of them are pro like here if you see the green import button that means these are free and if you see this pro only badge with it you will only get that with their paid version of the theme by the way on their paid version they have really unique and awesome designed pre-built websites i will also put their paid version themes link in the description but for now we will be using a free demo website and here one thing i don't like about them they should have a search bar here but i talked with them and they have insured me whenever you are watching this tutorial you will find here a search option but as right now there is no search option so you need to manually search for the beauty salon or you can do another thing if you are using pc you can press ctrl f to find anything or search anything and if you're using mac then you can press command f to find for it here i'm typing beauty and here we have got our starter kit it says beauty salon now just click here on this green import button okay now here we have got a notice it says for better and faster result it's recommended to install the demo on a clean wordpress website so just remember you are doing everything like i have shown like i have deleted all the unnecessary plugins all the unnecessary pages so we are good to go now just click here on this continue button all right now it says we need these plugins so to install these plugins you don't need to go back to your plugins and install them one by one you just need to click here on this install plugins button now they are installing and activating automatically all right all those three plugins has been installed and activated now this one says remove watermarks alright so when we will be using this starter template kit or starter website then on the all images there will be and watermark and that should be because we don't own these images i mean we don't have the licenses for using these images but let's say if you are a user of inverter elements if you have a paid subscription of inverter elements then you will get all these images but i'm assuming you are not a paid subscriber of inverted elements so for now just click here on this escape button okay now this portion is important here it says important demo content of flux theme from here you can just click on this option selected data only and you can select let's say just a media or pages or posts but i highly recommend for the first option this one it says complete pre-built website just select it and click here on import content so it started importing the demo content and here you see it says this process may take 5 to 10 minutes to complete please do not close or refresh this page all right as it says it will take 5 to 10 minutes so i'm coming back after 5-10 minutes alright now it says congratulations demo has been successfully imported for now let's just close it now let's have a look what we have got so to check it from here pages let's now go to all pages now here we have got all these pages from the imported website but from here i will only keep the elementor pages like here after about page you can see here elementor also with the blog page with the contact page with the home page and with the services page without the elementor pages i want to delete all those pages so just select this one cancellation getting started how it works photo gallery i just wanna delete these pages so from here bulk action now click on move to trash and click on apply all right so we have got these five pages about blog contact home and services all these pages are editable through elementor page builder so first let's now have a look on the home page so to view the page just click here on the view i'm just opening it from a new tab and here is our beautiful home page here we can see the beautiful banner and here is the services section let's now scroll down to the next section here is your story section and here i wanna mention another thing all these are editable through elementor page builder all these images all this text all these buttons all these links you can change anything using elementor page builder also let's say if you want to keep these images you can do that but if you have a look these images has a watermark with it so i will show you how to use your own images by replacing these watermark images even i will provide you some images so if you don't have your own image you can use those images as well alright so let's have a look on the home page here we have got the beautiful appointment section we have got the appointment form here i will show you how to set up that let's now scroll down here we have the beautiful testimonial section and then here is the recent post section so we can see all the recent blog posts here inside now let's scroll down here we have got our global folder all right so let's now start editing our website and i will be starting from the home page let's now close this page from here now to edit our home page this is our dashboard and here is the home page if we hover over on the homepage here we can see a link it says edit with elementor i'm also opening this link from a new tab so right now we are inside elementor page builder like i said from this beautiful page builder you can change any images any text just by clicking over it and like i said literally everything each and every images if you wanna change you can do that from using this awesome page builder plugin but before customizing this page i just want to make you familiar with the elementor fundamental or elementor basics so first of all let's say this is our first banner section and this is our second section for example if you wanna take a section in between these two sections you just need to click here on this plus icon and then click again on this red plus icon from here you can select any of this structure like one column two column three column or any of these structures i'm selecting this single column structure now here inside this blue border whatever you can see this blank space this is our section you can increase the section's height from left so from here you can see height let's set it to minimum height then if we drag this bar to the right you see the height is increasing so everything we can see within this blue line this is our section then inside here everything inside this great dashed line is our column and inside this column we need to drag and drop all the elements or widgets i'm giving you a quick example so let's just click on this plus icon now from left let's just drag this heading widget inside here now if i want to change this text from left i'm just typing here awesome saloon then if you want to make its alignment to center just click here to make it centered then to do some styling with it from top click on the style tab from here you can change the text color by using this color picker let's say if you want to make it red or if you wanna make it blue like this maybe a darker blue so you can drag this color picker to the bottom in this place then you can do some work with its typography just click on this pencil icon you can set the fun family from here you can see here is a huge list of fun families so from here i'm just typing pop-ins all these are google phones i'm selecting poppins font now you can change the size by dragging this bar to the right you can play with its weight from here so i'm setting it to 900 you see it's now more bolder you can work with transform i'm making it all uppercase you can work with its style i'm making it italic decoration here i'm making it underline now if you want to also work with the spacing of this heading then you just need to go under this advanced tab now for example if you want to add some space at the top and bottom then you can do that using this padding option first of all just click here to unlink the padding then on the top i want to add 20 pixel of padding you see there is 20 pixel of spacing has been added also i want to add that is spacing at the bottom so from here bottom i'm adding 20 pixel of padding it's easy like this now for example if you want to add a button underneath this heading then from left just click here on this rubik's cube icon and here is the button widget just drag this widget underneath this heading here so from here instead of click here i want to write here show more then let's make the alignment to centered and here is the link option so you can link this button to any of your websites page or if you want to link it to facebook you can do that if you want to link it to my website jimfirethedigital.com you can do that so here let's say i want to link this show more to our about us page so here you can just put the link of your about us page that will be for example your website name dot com forward slash about us or if you have already your about us page here you can just type here about here is showing our about page so just select the about page from here you see it's our elementor dot com forward slash about all right now to do some styling with it exactly like the heading just go under its style tab from here you can do all the typography text shadow text color color background type everything so here i'm just showing how to change the color from here this color picker you can make the button background color to red then the text color from here let's make it a greenish color like this one light green all right so similar like this heading widget and this button widget you can find a list of free elements or widgets here if you just click here on this rubik's cube icon you can see here inner section image video divider and there is a huge list of that so from this left widgets you can just drag this from left to the right in this way you see it's simple like it so if you want to create your website from scratch by doing each of these designs by yourself you can do that but we don't need to do all these hard works because this website is already designed by professionals here i was just trying to make you familiar with the elementor page builder so i hope you are already comfortable with that now i want to delete this example section so to delete it just click here on this x icon now let's start customizing our homepage from top so here first we can see a beautiful text it says beautiful balayage now if you want to change this text just click over this text now from left you see this beautiful text is coming from here it says beautiful now instead of beautiful if you want it to say awesome you can write that and here on the right you see it's become awesome instantly now probably you are thinking the corner of the e is cut off but it's not because on the left we have got a huge space for the elementary page builder on real website we have no left bar like this so to have the real feel we can just minimize the elementor builder i'm in the elementor bar so just click here now on the real website it will look like this all right now expand the elementor page builder now if you want to change this bullish text you can do that from here so this awesome was under the heading and this ballish is under the secondary heading here so if you want to change the secondary heading you can change that from this place and then if you want to change this paragraph text you can change that from here just click over this description from here you can change this paragraph text to your own text now let's have a look how you can work with this button so you know to work with anything you just need to click over that element right now we want to work with this button element so just click over this button element now from left here instead of our services if you want to say any other thing you can just type here inside this field then here is the link option so i want to link this button to our services page so here i'm just typing services so from here just select the services page you see it's very simple now let's change this image to other image to change this image just click over this image then from left you can select any other image to do it just click over this image and now if you have your own image you can just upload this image here and then click on insert media or let's say if you don't have your own image then you can just go to some free stock images websites like you can go to here pixels.com or you can go to pixabay.com from here you can search here i'm tapping makeup and hit enter so here you can see there are thousands of images you can select any of them or if you have your own images you can select those and also i will provide some images to get those images you can just go to jimfahrethedigital.com i will provide this pages link in the description from that page inside these important links if you click on this download the images i use in this tutorial you will get all the images i will be using on this tutorial alright so go back to elementor page builder from here i'm clicking on select files so basically after downloading the file you will get all these images all these folders now inside the home folder i'm selecting this image click on open and now click on insert media so here we have got the beautiful image without the watermark all right now let's go to the next section this is the services section so let's say you have got these three services one is for tattoo another one is for makeup and this one is for nails and right now you are thinking you may have six services so what you need to do on that case very simple you can just duplicate this right click over these six dots and click on duplicate so here underneath you have got three new services i'm just showing you how to do that but i don't need these three so i'm just deleting by clicking on this x now let's have a look how to change this text and images you know it's very simple just click over this text so if you want to change the text that says beauty salon you can change that from under the secondary heading here you can change that from beauty cell on this text and if you want to change the tattoo to any other text for example here i'm typing here you see it says here but let's keep it tattoo so here i'm typing again tattoo all right now if you want to change the image you already guessed it just click over the image and you can change that from here i'm again uploading it from my desktop and this time i'm uploading all these images together because i will be needing all of these images very soon so just click on open so from here for the tattoo service i'm selecting this image now click on insert media for the makeup one i'm selecting this image let's change the image from here i'm selecting this image click on insert media for the third one the nails one let's click over this image from here i'm selecting this image click on insert media all right now let's go to the next section this is the story section here you can talk about your beauty salon you can talk about your own story and also you can change this image with your own image but here i want to put my own image so click over it and from left here i'm uploading the image let's select this one click on insert media now on the right text if you want to change all this text just click over it and you know you can change the our story text from here the beauty text i mean the beauty salon this text from the secondary heading here and the paragraph you can change that from inside the description field also let's now click on this read more button i wanna link this read more to our about page so here i'm just typing about this is our about page let's select the about page all right let's now go to the next section this is a call to action section okay let's first change this background image so in this case if we just click over it we cannot see any image changing option on the left side because this is coming from the background image to change the background image just click on this column icon first then go under its style tab from here the background image is coming so just click over the image and i'm replacing the image with this one click on insert media all right and where you have got a big how to work button if you want you can keep that if you don't want just right click here and click on delete but i wanna keep it because it will work as a click to pop up button i'm showing you shortly just click over this button and here you can put any of your youtube video link so the video link you will put here after clicking on this button the video will pop up over this place it won't work inside the elementor page builder but if you want to see it in real then for the moment just click here on this green update button to save all of our works and then to preview it just click here on this eyeball icon so right now outside of the elementor page builder we can see here the real preview so let's now scroll down and go to that call to action section here it is if we now click on this how to work button you see here we have got the beautiful pop-up with the youtube video so if you want to change the youtube video with other video from inside elementor page builder you need to paste the youtube video link here all right now let's go to the next section this is the quick booking appointment section here on the left you can put an image so first let's change this image to other image i'm selecting this image click on insert media now on the right side we have got a form and we need to work with this form inside the wordpress dashboard so i'm showing you how to do that from inside wordpress dashboard very shortly just after completing our below section so just go to the next section here it is our client testimonial section so from here you can put your best clients review or your best clients testimonial here you can put that client's image i'm changing this image to other image without this watermark so let's select the image let's select it and click on insert media and on the right side you know you guessed it already just click over this and from left you can change the heading artist from here the secondary heading from here and the description from this place also if you want to change this text it says makeup service so that means this customer has taken your makeup service and after the service they have put this review if you want to change this text just click over it and you can change that from inside this text editor all right now let's go to the next section this is the recent post section so all these are coming from your blog posts i will talk about this section after creating our blog section i mean after creating our blog page i will also show you how to create a blog how to write a blog from scratch and how to create your blog page so these three blog pages are coming from your blogs but here i'm just showing you another thing like if you want to select this just click here on this blue pencil icon now from left you can decide how many posts you wanna show inside the home page like here we can see only three blog posts but we have more blog post on our real blog site from there let's say instead of three if you wanna display here six blog posts then instead of three i'm setting it to six now let's have a look here one two three and if you scroll down we have got another three blog posts here i have put here six only to show you but i just wanna show here three blog posts so i'm changing it to three right now it's showing only three blog posts and right after that here we have got the global footer i will show you that during our footer customization other than that we have done with our beautiful homepage we have done these testimonials we have done the previous this call to action section we have done this story section then here we have done the services section and here we have got our beautiful banner section then i will of course show you how to change this logo with your own logo even i will also show you how to create a logo for free then how to create these menus let's have a look if we click on this menu here we have got all the menu items i will also show you how to change this image with your own image so let's close it okay so now i wanna show you how to do that form i mean how to do that booking form here is our appointment booking form and like i said we need to do that from inside the wordpress dashboard so whatever we have done on the homepage to save it just click here on this green update button otherwise our all hard work will be gone so never ever forget to click on this update button whenever you make any change on the website alright let's now do some work with this form so first here i want to show you one thing just click here on this blue pencil icon to select this form i'm clicking on this blue pencil icon on the left you see it's coming from contact form save and shortcode and here is the shortcode i want you to focus on the id name the id name here is ide name not its id name is id number the id number is 46. just remember this 46 and let's go back to our wordpress dashboard on the other tab so from our wordpress dashboard on the left if we now hover over on contacts from there just click on contact forms okay so inside the contact forms here we have got three forms but i said you to focus on the id name so here we can see this form it says booking firm2 and its id name is 46. that means this form is placed inside the home page booking form here now if you want to do anything with this form we need to work with this booking form too all right so to work with it just click here on this edit button first let's close this notification okay this course may seems messy but they are really very simple to make it more simpler i'm just making some line breaks so after this bracket i'm hitting enter to make it a separated line also after this one and here after this one all right i think you can now see all this properly so let me make this very easy for you here you can see one it says full name and here this one says time this one says the select services and this one says the phone if we now have a look on the form here you see first one is for full name the second one is for time and then here it says select services so here we can see only nails makeup tattoo here and a dot dot dot i will show you how to change this then here is the field for phone and here is the field for note okay now i want to keep this full name so here let's keep this full name let's keep it the way it is now the second one i don't want to keep this time because if we have a look on the form they don't need a separated field to put the time because if they want to talk about their time they can put inside this note but here one important thing is missing that's their email address because whenever you will receive this contact from information on your email address you need to reply back to their email address but if they don't put their email address in this field where will you send their message right so we need to capture their email address so here instead of this time field i wanna put email field here to do that from inside the contact form i'm removing the time field from here then make sure you put your cursor in this place and then from top click on email so it will basically create an email field for you if you want to make the email field required then click here on this required field and then i wanna put some placeholder text it should say email and i wanna make it as a placeholder so i'm just selecting this placeholder all right now the shortcode has been created here then click on insert tag you see it's added here inside the form after the full name here we have got the email field and after the email field here we have got the select services that we can see here in this place you see select services so you can see nails makeup stat one here if you have a look on the form builder you see these are coming from this place it says nails makeup tattoo here so instead of this if you want to put here your own services so instead of here i'm just putting here a dummy service name so i'm typing here service one then instead of this dot dot dot just copy this service one and instead of dot dot i'm putting here service to and if you have more services then you can just copy this after the service to put a space and paste the service to here instead of service to i wanna say it service three okay for the moment to save it just scroll down and click here on save now only to check if it's working or not just go inside elementor page builder and if we now refresh the page let's scroll to the from section scroll down more so here we have got our quick booking appointment now here have a look after the full name it says email because we have set the email field and now if we click on select services here we can see nails makeups tattoo and then here service one two and three in this way you can put your own services name in this place and yup then the phone number is fine because some of you are comfortable to talk over phone to your client and then here is the note alright so we are done with the form fields now we need to do some work with a settings so to do it just go inside the contact form so we are done with this form creation now from top just click on the mail to do some settings all right first of all here you can see the to field here you need to put your own email address where you want to receive all the informations you are getting from the contact form so here i'm putting my email address that's elementor at jim fahad digital.com now here it says from so here i just wanted to say beauty salon and i am just removing the flux elementor this stuff and here this one is important after the wordpress ad you need to put your domain name so our domain name is our elementor.com so here i'm just selecting our elementor.com let's copy it and inside here instead of the demo.flux.pro here i'm pasting our limiter.com now there is no error message here and then here it says the subject field so whenever you will receive a message what should the subject say i just want to keep it simple so it would say beauty salon i'm just removing all other text okay now inside additional headers it says reply to your email but we don't have any field that says your email we need to put the field name here that's responsible for email capturing so our shortcode name is email112 now i'm just copying email112 and then instead of your email i'm pasting our email 112 shortcode here now you see there is no other error here now here is the last thing and i know you're pretty much confused in this time but after doing this message body option you will be very clear about all of these okay so from here i'm removing this extra text and then also okay let's remove everything from here i'm removing everything so first here i'm typing message details and then first we will be collecting the customer's name so here i'm typing full name and then we need to put here the full name shortcode the full name will come from this one text 791 i'm copying it and let's paste the shortcode here now hit enter then here i'm typing email now just copy this email shortcode from here and paste it inside this place then hit enter so the next field is for the service the client is asking for so here i'm writing services from here the services will come from the short code it says menu 494 so i'm copying the short code and pasting it here now next one it would be the phone number so phone number that would be the tail 916 this shortcode paste the shortcode here and the last one this should be the main message so here i'm typing message and the shortcode will be this one just copy this shortcode and paste it here i hope you have already got the idea you need to use the exact shortcodes that will be up here at the top of this form here if you wonder where are this coming from just go under this form again and here if you have a look with the full name here we have got a id it says text dash 791 with the email here is another one email 112 with the service here is menu four nine four like this so let's go back to mail okay so we have almost set up everything our email will go to this email address you need to put your own email address in this place we have said the from to our own wordpress at thedomainname.com then here is the subject here is the additional header and here we have created our message body okay so when you are done with all of these from bottom just click here on this save button let's now go inside elementor page builder or we can now just go to the preview page here this was our preview page let's now refresh the page okay now from this page let's now go to the form our booking form okay i'm scrolling down to the booking firm section here we have got our quick booking appointment section okay so for the moment i am the customer i'm browsing this website and i need an appointment on the beauty salon so i'm filling up this form so here i'm typing my full name that's jim fahad here i'm putting my email address that's gym at jim fahad digital.com oops.com now let's say from the services here i'm selecting service 1 here i'm putting my phone number of course this is not my real phone number and here inside the note i'm typing i want uh exotic here cut all right now as a customer if i click on this booking button it says thank you for your message it has been sent now as the website owner you will receive an email like this here i already have received that let's open that email now here you see this email is coming from beauty salon and i have received this email to elementor at jimforddigital.com because i have put the two address to this email address and here inside the message details i can see the customer's full name is jim fahad here i have got his email address here is the services name is service1 here is the phone number of course it is a fake phone number and here is the message he says i want a exotic haircut all right so as the website owner you can reply to your customer so you can just reply him sure please come at 7 00 p.m 8 p.m or 10 p.m the way you want to reply all right i have you got the idea so we are done with our beautiful home page let's just have a final look here we have got the story section here we have got the call to action section if we click on this button here will be the video pop-up okay let's click outside let's go to the next section here is our appointment form and it's working perfectly now let's go to the next section this is our testimonial section and now if you scroll down here you've got the recent posts these are all the recent blog posts and if you scroll down here we have got our global footer also if you click on go to top button it jumps to the top of our home page awesome by the way if you just wonder our website is responsive or not like you may think if ears our website is responsive for tablet device or mobile device then you can just go back to elementor page builder and you can check the responsiveness from inside elementor page builder to do that from here you can see a button it says responsive mode click there now from top if you click on the tablet device icon from here we can see the tablet device view and these are made by professional designers so there is nothing to worry about is responsiveness like here we can see the responsiveness for the tablet device and everything is looking perfect here if we just scroll down here is the testimonial section here is the latest news section let's scroll down to the next section actually here we have got our footer so everything is looking perfect on tablet device and to check it how it's looking on mobile device just from top click on the mobile device icon on the mobile device everything is looking great if we click on this hamburger here we can see the navigation menus let's click on this x now let's scroll down everything is looking great on mobile device as well so here is our form everything is looking great here is the testimonial and here is the recent blog posts and here we have got our global footer so like i said there is nothing to worry about the responsiveness of our website now from top right corner click on the x icon to exit the responsiveness all right now we will be moving forward to our other pages like our services page about page blog page and contact page but before doing that i wanna show you how to customize this header like first i will show you how to create a logo for free using an online tool and how to place that logo on your website header then how you can edit or adjust your navigation menu so if we click on this navigation menu here you can see the menu items i will show you how to add new menu items or how to edit these menu items also of course i will show you how to change this image with your own image now let's close it and also if we just go to our folder let's scroll down i will show you how to customize this footer top area also this bottom footer okay so let's now first start with the logo of our website now have a look how to create a logo for free using an online tool so to create our logo we will be going to a website it's logomaker.com actually it's logo maker without the e so first here you can see a pop-up video it is trying to instruct us how to do that but we don't need that because i will be showing you how to do that so let's close it now first i will be searching for some icons that will be using for the logo as it's a parlor website or it's a salon website so here i'm searching for something like flower then hit enter so here you can see thousands of flowers icons from them let's select one so i like this one let's select it and i wanna drag it to the left side here now i wanna add some text on the right so to do that from here click over this text first i wanna type here awesome you can make it bigger smaller by just dragging its corner in this way if we drag it to inner it's becoming smaller if we just dragging it to the outside you see it's becoming bigger okay this size is perfect for me now from here if we click on styles let's make it left aligned and then i'm just dragging it a bit right here in this place all right and then you can change its fonts from top from here by default it's railway but instead of railway i'm selecting it to open signs and then underneath the awesome i wanna write salon it's very easy just right click over it and first let's duplicate it now i'm dragging it the bottom of the awesome text now double click over it and here i'm typing salon now i want to make this salon word a bit bold so from here click on this styles and let's make it bold by clicking on this bold icon all right now i wanna make this awesome and sell on these both text colors to black color we can select it one by one but i wanna select these two so just drag over these two together now from this color wheel let's just drag it to the black color perfect our beautiful logo is ready so now if you want to save this logo from the top right corner click here on save logo now if you want a very high resolution image then you need to pay them 19 but for our website we don't need a very high resolution image i'm happy with a low resolution file so here bottom it says no thanks download low resolution file just click there it's downloaded all right now let's close logomega.com now we need to go back to our wordpress dashboard not inside elementor dashboard so to go back to our wordpress dashboard you can just click on this hamburger icon and from there you can click here exit to dashboard but here i have another tab opened its wordpress dashboard so from here if we just hover over on appearance and then click on customize so right now we are inside our theme customizer as we are using the flux theme so it's the flux theme customizer from here to change this logo on the left side here we can see site identity just click there and here you will find the logo upload option also if you scroll down a bit here you will find the site title and tagline option so if you wanna change that you can do that from this place but now i wanna change the logo so just click over this logo now go to upload files click on select files now let's select the logo that we have just created from the logomaker.com and click on open now click on select i don't want to crop this logo so click on skip cropping and here we go but our logo is looking super big no worries because i will be make this logo smaller from elementor page builder for the moment let's just keep it the way it is right now now i want to show you another thing that is the fav icon so from here if we just scroll down at the bottom you can see here is the site icon option site icon is basically the little fav icon what you can see at the top of our browser right now it's the default wordpress fab icon but here if you want to upload your own fav icon so to do that just click here on select site icon go to upload files click on select files so from here i'm just uploading a pre-made fab icon let's just select it you will get that on the download folder and remember your fav icon need to be square sized so if the width is 100 pixel height needs to be 100 pixel also that could be 64 by 64 or 120 by 120 you got the idea right so just select the file icon and click on open now click on select i don't want to crop it so click on skip cropping and here we go at the top of our browser you can see the little tiny icon this is our website's fab icon alright now let's have a look how to work with the navigation so if we click on this hamburger here we can see the navigation items or the menu items if you want to work with this then from this theme customizer just scroll up a bit and then go back now from inside the menus that's just under the site identity click on menus so as we have used the demo importer website their two menus are automatically generated or created those are top menu and bottom menu we don't need bottom menu in this website so let's focus on the top menu also if you wanna create a menu by yourself then you can just click here create a new menu but we don't need that because we already have a menu says top menu so let's now have a look what's inside this top menu click on the top menu now here we can see home services about blog contact and you see by following this order we have our menu here home services about block contact so these are basically coming from this place now if you want you can order or reorder them like let's say if you wanna put this about above the service then you can simply just drag this about at the top of the service in this place and then if you just click on publish and refresh the page you can see the changes working here on the live site but i don't want that so here i'm putting about under the services here now let's say if you want to add new menus then you need to click here on add items here you can add your new pages so in future if you think you will add more pages you can add those pages from here and added inside of your existing menu and not only your pages you can also add any custom links inside this menu so to add a custom menu you need to click here on custom links then here you can put the pages url or any other external page url here for example if i put my website url here my website is https colon forward slash forward slash jim fahad digital.com and then link text link text is basically what will appear as the name of the link so here let's say i'm putting just support and then click on add to menu you see it's instantly added inside of our menu items but that was just an example i don't need it so just click here on this x to delete it all right then when you are happy with all the settings then from top click on this publish button to save your work and then click on this x to exit all right now let's go to the home page of our website so from top if you hover over on our site name here you can see visit site i'm opening it from a new tab so here we can see our beautiful home page and like i said i now want to customize this logo size to do that we need to work with the elementor header to access the elementor header if we now hover over on edit with elementor you can just simply click here on site header also on the right side here you can see edit header and footer from there you can click on site header i'm clicking on site header now click on edit with elementor now from inside of our header builder i wanna customize the size of our logo so just click over this logo now from left go under style tab and here i wanna reduce the logo width so by default it's set in percentage but i wanna set it in pixel and let's make it 160 pixel right now it looks perfect now let's have a look on our navigation so first let's click on this hamburger icon and from here i want to replace this watermarked image with another image so to do that just go under this style tab by default here menu item is opened just minimize it now expand the full screen window from here and you see this image is basically coming from this place so to replace this image with another image you can select the image from here so let's choose the image go to upload files select files i'm selecting this image without the watermark and click on open and now click on insert media okay if we now click on this hamburger we can see the updated image perfect so when you are happy with it just click on this green update button to save our work now let's go back to front end of our website and if we now refresh the page now we can see our logo size is looking perfect also if we click on this hamburger icon we can see the latest image all right now let's scroll down to our footer so to customize our footer like the header just hover over on this edit header and folder and from there click on site footer then click on edit with elementor so here is our footer builder and here if you have a look in the middle we have got an extra navigation menu we don't need that so just right click on this blue pencil icon and click on delete we only need the logo that's on the left and on the right side we can see some social icons by the way again if you think these are broken actually they are not because we have got some spaces because of this left elementor menu if we just minimize it you see the social icons are aligned perfectly all right let's expand it now if you want to put your social media links here just first click on this blue icon now here on the left you can see item one two and three so if you wanna put here your facebook link just open this item one now from inside this place here you can see the link field you can just put your facebook page url and then we just minimize the item one and expand the item to this one is for the instagram so you can just put your instagram link inside this field in this way you can connect your social media icons inside of your website and then if you wanna customize the footer text just click over this text first of all i wanna make this text centered aligned so to do that from here alignment let's make it centered aligned and now have a look on the copyright text field first we can see the copy text and now within the two curly braces we can see a big y this big y is basically the dynamic year so right now it's 2021 so that's why we can see here after copyright 2021 and if we keep it like this i mean within the two curly braces on 2022 it will automatically become 2022. and then here you can also see the site name so our site name is jim the production that's why we can see it here and right after that we can see all rights reserved this text in this place now here instead of this site name if you want to write anything manually you can do that so i'm just removing this site name from here and i'm just typing here awesome saloon you see it's instantly updated so again when you are happy with it just click on this green update button to save your work all right now close it and if we now refresh the page we can see here the updated text awesome now we can move forward to our other pages so first we will be doing our services page let's now go to our services page by the way you can go to any page in two ways like here we are on our services page so from top we can just simply click on edit with elementor this is one way and also you can just go to wordpress dashboard from the left here we have got our pages from there just go to all pages then here is our services page from there you can just click on edit with elementor so these are the same you can click on edit with a limiter from this place or if you are on your services page already then from this top black bar you will find this link says edit with elementor so i'm clicking on edit with elementor so now first minimize the elementor builder so we can have a real look of our services page as it's a cell on services page so you may have this type of services like nail design so on the left side you can put some images that can relate on nails and on the right side you can put your different services that's inside the nail design i know manicure or pedicure is not included inside nail design but these are just examples you can put here any sub services that's suitable under nail design also if we scroll down here we have got the makeup section so under makeup you can put some sub services you can put the prices here and you can put some relatable image on the right side and then if you scroll down here we have got the tattoo service also you can put some sub services of the tattoos here and you can include the prices with that now i'm showing you how easily and how quickly you can do that so let's expand our elementor page builder first i want to replace this image with other image you know it's very easy just click over this image go to choose image click on upload files select files now from inside services folder okay let's just upload all these images together click on open so for the nail services i'm selecting this image click on insert media now on the right side if you wanna change this text that says beauty salon nail design just click over it and from left you can change the beauty cell on text if you wanna change the nail design text you can just go inside secondary heading from here you can change this text and then if you wanna change any of these sub services just click over these sub services text then here you can see all these are included as a single list so first here we have got many cube just click over it you can change the mini good text from here you can change its price from this place and let's say if you wanna add another sub service here under the predictor then from here we have got freddy cure first just duplicate it by clicking on this duplicate icon then click on the duplicated one from here let's say its name is what should i name it okay just name it pro pretty cure it's not pretty good i guess it's pretty cool right i'm not a girl so i'm not used to with this type of stuff and then you can set the price here 138 because if the pretty good price is 38 as is the pro pretty cure it should be 138 it's pretty fair you know all right so if you don't want to keep it just click on this x to delete it all right so the same rules for all of these sections just click on this image then to change it just choose other image i'm selecting this image click on insert media and then you know you can change all of these sub services so let's just go to next section and let's replace this image to other image i'm selecting this image and click on insert media all right now i want to show you another thing like here we have got our three main services one is nail design and here is makeup and then we have got our tattoo service what if you have more main services that's also pretty simple just we need to duplicate this section to do it just hover over on the six dots right click here click on duplicate then scroll down you see the above section is duplicated here now to match the design here you see on the top section the image is on the right side and the service is on the left and then we have image on the left and the services text on the right so we need to maintain the same design sense right so to do it we can do it very easily you know what is my goal my goal is to make this image position on the right side to do it just click on this column icon and then drag it to the right column here it's instantly done then you can change all this text on the same way so i have just shown you how to do it but i don't wanna keep this section so to delete it just click on this x icon to me this page is looking great to save this page again click on this green update button now let's go back to our wordpress dashboard let's now customize our about page so here we can see our about page and here is the edit with a limiter button just right click here i'm opening it from a new tab so this is our about page here on the left you can talk about yourself or your salon or about your experience so your customer can trust on you and if you wanna change this text i know you already guessed it just click over it and from left you can change all these then if you wanna change this text no matter which text you wanna change just click over it and you can change that from the left side also if you want you can put your signature over here but i don't want to keep it so just right click over this image and click on delete but if you want you can put your signature here as an image okay now from the right side i wanna replace this image so just click over this image and choose another image go to upload files click on select files now from inside about page i'm selecting this image click on open insert media and here we go all right now let's go to the next section this is our theme section so here you can put the images of your cellon so here you can put the team members image of your salon so for example you can put here the owner's image or your workers image also you can put their name and their occupation or their role here so to do it just click over this team member person now you can change her name from this place it says staff name and then you can change her role from here it says stuff occupation then if you want to change the image then from left just open the image option from here you can upload the image so i'm uploading image from here let's just select files let's upload all these together click on open so for the first team member i'm selecting this image click on insert media for the second team member let's go to image click on the image i'm selecting this image click on insert media and let's select the third image go under image tab click on the image to choose image now select this one and click on insert media by the way you shouldn't put random girls images here you need to put your team members image here i'm putting these images because this is only for this tutorial purpose these are just examples all right now let's go to the next section this is the common section because we already have done this section on our home page so let's just quickly replace this image click on this column icon go under style tab from here let's just replace this image we already have uploaded this image for the homepage so this is the image select it and click on insert media here you go and you know when you click on this how to work one video will pop up and you can select that video from here just inside the link you can put your youtube video url and then here we have got our global footer so right now everything is looking great and premium on our about page i'm really happy with these pages alright now let's expand the elementor page builder and click on the green update button to save your work all right now let's go back to wordpress dashboard and we have got only the contact page and block page let's now do those really really quickly so first let's do the contact page so from here click on edit with elementor i'm opening it from a new tab so here is our contact page on the left side here we will be putting the google map and on the right side here is our contact form you are already familiar with contact form you know how to do the contact form settings but i will again show you how to set up this contact form for the contact page and then if we scroll down here we can see the address phone number and open hours options so let's first do the work with this if you want to change the address of your salon just click over it then from left if we just go inside the content from here you can change the address of your cell loan then if we go inside the phone numbers here on the left inside content you can update your phone numbers and then if we click on open hours and you know just go inside this content you can update your weekends or working days from this place very simple all right now let's just scroll up a bit now here on the left side i want to put the google map so first i just wanna delete the default flux themes map so to delete it just right click on this blue pencil icon and click on delete now here inside i wanna put our own google map i mean the elementor's google map so to insert the google map just click here on this rubik's cube icon and from here you can see the google maps just drag this google map inside this column here now you can see the google map here but first i want to make its height to the full height of this section so to do it from here you see height by default it's in pixel but i'm setting it to vh and let's make it 100 vh so right now it's looking great but to match this map's design with our whole website we need to make this map to a black and white map to do it just go under style tab and click on the css filters from here i'm making the saturation to zero right now it's black and white and it suits off our website's design all right now let's go under the content tab again now from here you just need to put the address of your salon so the pin will go on your address so the pin will go at the top of your address you know then from here if you want you can increase the zoom so by default it's 10 if you want to increase it more you can make it 11 or 12. you see it's zoom in more than the default all right i'm happy with it and then on the right side we have got our contact form so to work with it first click on this blue icon and here we can see the shortcode we have done one contact from 7 form on our home page that's for the booking but this one is for general contact now first just remember the id name here the id name is 61. now let's go inside wordpress dashboard from other tab then from left if we hover over on contact and click on contact forms now here we are looking for the id 61 that the second one this one you see here id number is 61. now we will be modify this contact form so to do it from here just click on this edit button so first here we can see the full name then email subject and message that we can see here in this place here we can see full name email subject and message all right so everything is perfect because on the contact page we only need their name their email address the subject and their message so we are good to go with this form we don't need to update anything within this form now let's just go under this mail tab but i think we have some errors on the form so let's find out go inside this forms again if we have a look here you see the full name its id is text-76 also if we have a look on this subject its id is also 76 so this is the error we cannot keep the same id name on multiple inputs so just change the id name from this place here instead of text 76 i'm putting here text subject so it's more readable actually we can change all of these names more human readable so here instead of text 76 i can write here text name here instead of email 524 i can type here email name and also instead of text area 140 i can just type here text area text these are more human readable right all right so to save it from here just click on this save button now let's refresh this page and then go to the mail tab here so first here we need to fix the two here instead of this random gmail address here i'm putting my gmail address actually not gmail it's my email address custom email address it's elementor at gymfahaddigital.com and here again instead of all these i just wanna keep it sweet and simple so from i'm removing all these just the beauty salon and then here wordpress at after the ad we need to put our domain name so our domain name is our elementor dot com so now it's not showing any door then here inside this subject field we can make it dynamic by using the text subject so let's remove all this text and we can just put here the subject shortcut so i'm pasting it here or we can just simply write here email from beauty salon so there is no more readers then here additional headers reply to your email but we don't have any short code that says your email for email capturing we are using email name this shortcode so i'm just copying this shortcode name and then here instead of your email i'm just pasting the shortcode that is email name and then here is the message body like our homepage booking firm first of all i just want to remove all of this existing text so here first i'm writing message text and then hit enter so first i'm typing here full name and then i'm just putting the shortcut that is responsible for taking the username so here i'm pasting the shortcode and then here is the email so just copy the email shortcode from here and paste it in this place hit enter now let's type subject and here let's just paste the shortcode that's responsible for capturing the subject hit enter now here is the message so just copy the text area text shortcode from here and paste it inside this place all right now from here just scroll down and click on the save button to save our work let's now go back to our contact page we were inside elementor page builder so to save our existing work click on this update button and to preview the live page click on this eyeball icon because i also wanna test the contact form okay so let's now fill up this contact form here i'm putting my first name then here is my email address okay let's put here a subject i'm setting it here cut and let's type here a message so i can type here can i get a schedule at 7 pm all right let's now click on send message it says thank you for your message it has been sent and then as the admin of the beauty salon you will receive an email like this so this email is coming from jim fahad here we have got his email address here is the subject here cut and here is the message it says can i get a schedule at 7 00 pm so if you have time you can just reply back to him yes sure or anything you want you got it right all right so we are done with our contact page as well here we have got our google map on the right side we have our beautiful contact form and it's 100 working right after that here we have got the address phone number and open our section lastly we have got the global footer perfect now we only have our blog page remaining but before customizing our blog page i want you to understand how to write a blog post so to do it let's now just go inside our wordpress dashboard and then from left here we can see a link it says posts so from there if we just go to all posts here we can see some dummy blog posts i haven't created any of these blog posts you know we have imported a demo website and within the demo import we have got all these dummy blog posts but now let me show you if you want to create a blog post by yourself how you can do that because right now you are owning your own website so of course you want to write some blog post by your own right maybe not now but in the future you know so to write a blog post you just need to click here on add new you can also do that from here underneath the main post tab here you can see add new so just click here or here on add new let's now close this pop-up so first you can add your blog post title from here it says add title click there but before that i want to show you another thing you can see it's on full screen we cannot see the left bar of the wordpress so to enable that from right corner here you can see three dots click there and let's disable the full screen mode just click here so we can now see the wordpress bar on the left all right so here you can put your title like here i'm typing exotic here cut i'm not sure is there anything named exotic haircut this is just for example all right so this is our block title and then your main block text you need to write that from this place it says type or to choose a block so just click here then you can straightforwardly just type your blog post here also i want to show you another easy way how to write a blog post because you are probably comfortable with google doc so i'm showing you how you can easily write your blog post like a tool that's similar like the google doc so to have it from the right corner click on this plus icon and from here i'm searching for classic editor here it is click on a classic so you see it's similar like google doc so you can write anything here here inside i'm just pasting some dummy text so you know these are pretty simple so let's see if you want to make something bold just select that text and make it bold from here by clicking on this bold icon if you want to make anything italic just select it and click on the italic icon you can also link it to any other website like let's say if you want you can just select these two words and if you want to link it to other website just click on this insert link i'm just linking it to my own website that's jim fahad digital.com then hit enter it's instantly linked to my website also if you want to add any image in between these two paragraphs just hit enter after this paragraph and then from here you can see and media icon just click there and upload any image that will be placed in between these two paragraphs it's very simple like i said it's similar like google docs all right now i wanna show you some other things so when you are done with the writing of your blog post here you have your blog text and here at the top you have your blog title then from the right side under this post you need to do something like here if we scroll down and open the categories from here you see there are some existing categories those are coming from the demo website we have imported but let's say if you want to add some categories by your own then you need to click here on add new category so for example if you want to add a category that's name is exotic so here i'm typing exotic then click on add a new category so this blog post will go under exotic category then if you scroll down you can add some text with it so here i'm adding here cut put a comma maybe exotic again and put a comma so these are the tags of this blog post and one last important thing you need to add that is the featured image so click on the featured image and then click on set featured image now let's click on upload files and select files then from inside the block folder i'm selecting this image now click on open and then click on set featured image all right that's basically it then from the top right corner click on publish and click on publish one more time now to see our blog post we can click here on view post so i'm opening it from a new tab let's now have a look on our single blog post so here on our single blog post page first we can see the thumbnail image that's basically the featured image and right after that here we can see the block title also here we can see the category is under the exotic category and the author is jinfard because i have posted this and then here we can see our blog posts text then scroll down here we can also see the text that is exotic and haircut and also we have got here share button so if we click on this share button we can share it on all these social platforms also there is option for commenting so right now as i'm logging in that's why i can only see the comment field but if i go to log out then i can see a field for first name email address and then the comment field on that way any other user can comment on this blog post you don't need to do anything for that because it's already pre-built all right in this way you can create as many blog post you want now let's have a look how to customize our blog page so now just go back to our wordpress dashboard okay now just for the moment have a look if we click on all posts here we can see with the all dummy blog post we can also see the blog post i have just created that's the exotic haircut i could create all these blog posts by myself but that will take a lot of time and we will also be bored if i do this on a screen so i'm explaining the block page having these dummy blog posts all right now from the pages just click on all pages so here is our blog page now to edit the page click on edit with elementor i'm opening it from a new tab okay now let's go to the blog page so here we can see all the blog posts so now i'm showing you quickly how you can customize this blog page to customize this block preview just click on this blue pencil icon then from here you can see the default number of the posts to show is set to nine that's why we can see here one two three and then four five six and then seven eight nine these nine blog posts let's say for example here instead of nine if i set it to three now we can see only three blog post and then right after that we cannot see any of the blog posts okay so now i wanna do something interesting here my goal is by default here will be showing only three blog posts and right after that here will be a read more button if someone clicks on the read more button the next blog posts will appear so to do that from left if we scroll down here you can see the paginate click there so for the pagination i'm selecting this option now after the three blog post here we can see a big load more button all right now to save it just click here on this green update button and then click on this eyeball icon to show it on real website so this is our blog page and here we can see only three blog posts then if we scroll down here we can see a lot more button let's now click on this load mode button it's loading and here we have got our next three blog posts and then again if we click on the load more button it's loading and here we have got the next three blog posts and again if we click on the load mode we can see here the very last blog post that made by me so from here if we now click on this last blog post that will take us to the single blog post page cool so our single blog post page is looking really great if we now go to our blog page here's also looking great with this load mode option also let's now have a final look on all other pages so from the hamburger menu let's first go to our home page here our homepage is looking great this banner looks great and if we scroll down here the services looks great and then if we scroll down here is the story section it's looking great now let's scroll down to the next section this is the call to action section if we click on this how to work button the video pops up nicely now click outside and then let's go to the next section here is the quick booking appointment section is looking great and you see this form is working perfectly now let's go to the next section here is the testimonial section everything is looking great with nice animations and here is the recent blog posts we can see them here perfectly now let's go to the next section this is our global footer all right now let's go to our next page that's the services page our services page is also looking amazing here we have got different services and here is underneath the sub services with their own prices and here we have got the global footer now let's go to top and let's go to the next page this is our about page our about us page is looking great with this text and on the right we have got a big image now let's scroll down here is our team member section and it's looking great with these beautiful animations then here underneath we have got the call to action section and then here is the global footer everything is looking perfect now let's go to our contact page also our contact page is looking great on the left we have got our black and white google map on the right side we have got 100 working contact form then underneath here we have got the address phone number and open our section and lastly we have got here our global footer awesome so that's basically it if you are a beauty salon owner or a spa center owner or even if you are a barber shop owner then just go ahead and create your own website by following this tutorial i hope this video will help you a lot if you like it please give this video a big thumb up and don't forget to subscribe this youtube channel also press on that bell icon to get notified before anyone whenever i will upload a new video on this youtube channel also if you want me to help you on your wordpress project or elementor project then you can contact me through my website that's jim fahad digital.com i will try my best to help you personally once again thank you so much for watching this full tutorial i will see you on the next video for now bye bye

Channel: Jim Fahad Digital

Views: 7,834

Keywords: How to Make a Beauty Salon, How to make a Beauty Parlour Website, How to Make a Spa Center Website, How to make a barber shop website, Beauty Salon Website, beauty salon website design, spa center website, Barber Shop Website, How to make a Spa Center website, Jim Fahad Digital, Elementor, Elementor tutorial, WordPress, WordPress Tutorial, Elementor WordPress Tutorial, Phlox theme, Elementor Phlox Theme, Make a website, beauty salon, hair salon, salon, Salon Website design, Phlox

Id: njkphMdQaPI

Length: 102min 27sec (6147 seconds)

Published: Thu Sep 09 2021