How to make a Personal Trainer / Health & Fitness Coach Website (WordPress Elementor Tutorial 2022)

are you a personal trainer a health and fitness coach or are you a nutritionist or a yoga trainer if so then in this video i will show you how you can take your career to the next level by presenting yourself online more efficiently let's now have a look at what we will learn in this tutorial so first i will show you how to create this beautiful home page of your own here at the top you will have your own banner section so you can put any background image on the right side you can put any headline or your own paragraph also this beautiful button so you can link this button to anywhere of your website and then i will show you how to create this section here you will have your own image some other information about yourself then i will also show you how to link this button to anywhere of your website or outside of your website then underneath here i will show you how you can talk about your program with this beautiful timeline design for example you may have weight loss program or meal planning program you can tweak all these designs by yourself and then i will show you how to create this package pricing section as you are a personal trainer so you may have different packages or different programs you may have some training courses or ebook i will show you how you can sell your courses or ebook from inside of your website and then underneath i will show you how you can create this beautiful review section so you can display all your clients review within this beautiful slider then here you can put more information about yourself and then here we will have the connect section so you can put your office hours the phone numbers email addresses social connects and here if your visitors click on this phone number they can directly call you i will show you step by step how to do that and then from the bottom right corner if we click on this go to top button that will take us to the top of our website i will show you how to create your own personal blog so here within this beautiful timeline design your all blog posts will be shown and here if you scroll down you see here is a load more posts button if we click on this load more button here more blog posts will reveal and then if we go to any single blog post so here is a blog post let's now click on this blog post it takes us to the single blog post page here at the top we can see the blog categories here is the blog title then here the blog author name will be shown and here is the block publishing date underneath here you can see a big featured image of this blog post and then if you scroll down here at the left side this is your real blog post and inside this blog post you can insert anything like this image or any code then underneath you will have this social media share icons so your visitors can share this blog post on their social media and here is the blog post author name and the details i will show you how to do that and then here is the navigation for going to the previous post and the next post underneath we will have the related blog post within this beautiful carousel and then your visitors can also make beautiful comments by using this comment form and on the right side of this blog here you see at the top here is the search bar here is the recent posts then underneath here is the social media links more recent posts and here all your blog post categories then i will show you how to create your beautiful services page so you can put all your services here and then here if we scroll down we can see the package pricing section these are not just a static section these are completely functional like i said as you are a personal trainer so you may have different packages you may want to sell your own course or your own ebook let's say you may have a course or ebook that's name is weight loss and its price is 99 so from here if anyone clicks on this register now button that will take them directly to the card page from the card page they can increase or decrease the quantity also they will have the apply coupon option and then from the card page they can just simply click here on proceed to checkout that will take them to the checkout page from the checkout page your customers can simply just put their name and all the details information then from the right side they can pay you through directly paypal or from their debit or credit card alright then i will show you how to create a beautiful about me page here you can talk about yourself more in the next section you can put your all skills with this beautiful progress bars also underneath you can put some fun factors about yourself like how many happy clients do you have how many meal plan you have made and then underneath i will show you how to reuse the connect section again on this page i will show you how to create this beautiful contact page so in this page you will have this contact form here people can put their first name email address subject and message and then when they click on the submit button you will get all this information on your email box i will also show you how to work with this header so you can put your logo on the left on the right side you can create this beautiful navigation bar then on the very right side here you will have your all social media links people can also search through your website by clicking on this search icon so if i click on the search icon let's say here i'm searching for keto diet so i have written here keto diet let's now hit enter so here people can see all the blog posts that has keto diet keyword within it okay then i will also show you how to create this beautiful fooder so here you can again put your all social media handle links and at the very bottom you can put some copyright text of your own can you believe we will be doing all of this just by drag and drop you don't need to know a single line of coding so no matter if you have built a website before or if it's your first website this is the perfect tutorial for you and let's say if you want to hire a web developer to make a website like this i'm in a clean designed multi-page website a complete blog with that also with the e-commerce functionality that will cost you minimum three to five thousand dollar but if you follow this step-by-step tutorial then you don't have to hire a developer you can make this complete functional website within 100 bucks only and if your web developer you can make a huge profit by creating such an amazing website for your clients you just need to purchase a premium theme that will only cost you around 30 to 60 dollar and you can charge your client three to five thousand dollar or higher than that it depends on your negotiation skill obviously i'm really really excited to show you how to make this beautiful website if you are excited like me please like this video subscribe to this youtube channel it would mean the world to me so without further ado let's now jump into it first i will show you how to get your own domain name and web hosting i will also provide you 50 discount code then i will show you how to install wordpress then how to install a theme and a free page builder and then we will start creating our amazing website i will also attach timestamp in the description so you can always back and forth to the specific part you need let's now start with the step number one which is to get your domain name and web hosting so first of all what is a domain name domain name is basically your website address like facebook has facebook.com amazon has amazon.com i have jim fahad digital.com similarly for your website you need a address that will be your website name.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 are 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 the 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 gym for 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.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 alright now you can see the price is now only 71 dollar 40 cents for the full year including the domain that's awesome and i'm legally obligated to tell you that this is my affiliate link so i do get a little bit of commission off of this but it does save you a ton of money and it helps fund these free youtube tutorials what i'm doing so everybody wins i 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 popup like this like it says let's create a website bluehost actually want to help you to make the website just click at the very bottom there i'm not creating a website because i will be showing you everything step by step and skip all of these pop-ups because we don't need any of that cool we have successfully registered our domain name and web hosting [Music] congratulations so far if you have any questions please let me know in the comment section i will try my best to help you personally so now we can move on to step number two which is to install wordpress and for some reason if you logged out then login again now from left menu bar click on my sites then you can click here create site or here create a wordpress site i'm clicking here sometimes after clicking on my sites you may see these my sites from there just click here on add site then you can see here two options one is limitless customization and another one is fast easy site building as we will be creating our website using an amazing page builder the elementor page builder that's why we will be selecting this option the limitless customization so just click here on get started so let's now add a site name and site tagline we can change that anytime so i'm putting a site name jim for production and the site tagline it deserves to be seen now let's click on advanced here you need to put your email address your username and password for your wordpress so i'm putting my email address here wordpress admin username i want to name it jim fahad and here let's put a password do you want to see my password i'm clicking here on show so it's abc123 i will of course show you how you can change it later so for now click on next close this browser popup now it says where we want to install our wordpress so make sure you keep this directory blank and here is your domain name selected and bluehost here is suggesting some free plugins but we don't need that let's deselect this all now click next awesome it says wordpress installed successfully now you can copy this informations right here and save that somewhere on your computer where you can access it again later and click here to show your password actually i intentionally gave this an easy password that's abc123 never ever use this kind of easy password i'm showing you shortly how you can change that password we can now sign into wordpress by clicking here but this is not the usual way because all the time you cannot log in this way i mean from this page this button right so you should get used to signing into wordpress all the time is by going up to a new window and typing in your domain name forward slash wp dash admin so i'm typing here my domain name our elementor dot com forward slash wp admin and click enter so we can see our wordpress login page here that means wordpress 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 abc123 you can click this i icon to show it now let's click on login so now we are inside wordpress admin panel or wordpress dashboard now i will make you understand with all of these options like how to create a page from here how to create a blog post or other things like what is a wordpress theme and what is wordpress plugin but before starting with anything first i want to clean up the wordpress dashboard because personally i love to work in a clean environment so to clean up our wordpress admin panel let's first from this left tab let's hover over on these plugins and from there go to install plugins now here we can see a lot of plugin but we have not installed any of these plugins all these plugins are came with wordpress default installation now if you wonder what is a wordpress plugin wordpress plugin is something like extra add-on or extra app like thing that will extend the functionality of your wordpress website so we will be installing and activating some of the plugins that we will need but at this moment i want to delete all of these plugins because we don't need any of them now we can select one by one like this but i want to select all of them by clicking here then from this bulk action first click on deactivate and click on apply and then let's select all of them together now from bulk action this time click on delete now click on apply the browser popup says i'm sure or not yes i'm sure so click on ok so here our all unnecessary plugin has been deleted then i want to clean up our wordpress website more so from left let's go again to the main dashboard now from here we can close all this notification pop up so i'm closing this by clicking on this x also if you want you can minimize all of them like this and we can do another thing from top let's open the screen options and i'm just deselecting all of them one by one like this right now it looks much cleaner all right the next thing i want to change that is a password you may remember we have given the password abc123 so we of course need to change that password and to change the password from left if we hover for on users from there let's just click on profile now under this profile tab if we scroll down here you can change your first name last name also if you want you can select your nickname now here i'm selecting my first name as jim and my last name as fahad and then here this is the display name publicly as so from here i'm selecting jim fahad this display name will be shown on all other pages like if you write a blog post on that place as the author of that blog post your this name will be shown there then under this contact information if you want you can change your email address also if you want you can put your another website url and here inside this biographical information you can put some text about yourself so here i'm writing some bio text all right now let's scroll down from here if you want you can change your wordpress profile picture you just need to click here on this graphite link and from there you can just upload the image then under the account management from here you can change your password so here you see new password from there click on set new password so if you want to use this password you can do that but i'm selecting another new password so first i'm clicking here on this hide now here i'm typing the new password all right so here the indicator says medium that's okay for me let's now scroll down and click here update profile cool now before moving forward i want to make you familiar with another thing because if you understand this that will make your workflow more faster so right now whatever you see all these left tabs or overall all these things right now we are inside wordpress admin panel or wordpress dashboard only we can see this dashboard because we are the admin of the website but if you now want to see the front end of our website then from top left corner hover over on the site name here you can see it's a link it says visit site i'm opening this link from a new tab so here this is the front end of our website the whole world can see this portion of our website so in short this is the back end of our website or this is the dashboard of our website and this is the front end of our website so whole world can see this person all right so let's go back to the backend or dashboard now from here first i wanna delete all of the existing pages and posts because i want to start from scratch so you can understand everything now first from left hover over on pages from there go to all pages here you see we have not created these pages these pages also came with wordpress default installation but personally i don't want any of them so i'm selecting them all together then from the bulk action select move to trash now click on apply later i will of course show you how to create a new page by yourself and now let's move to posts so from the left tab hover over on posts from there go to all posts so here we can also see a dummy blog post that says hello world i also don't need it so i'm selecting this now from bulk action click on move to trash now click on apply so the dummy blog post has been deleted okay so right now our wordpress website is completely empty now first i just wanna make a very simple settings so from left have hover over on settings from there let's go to permalinks and here by default the permalink set to plane but instead of plane i wanna select the post name option now let's scroll down and click on save changes if you wonder why i have selected post name because it would be very helpful for search engine optimization and it's always a good practice all right now like i said we will be editing and customizing our whole website using a free page builder that's elementor page builder plugin so now i will be installing the free elementor page builder plugin to get that plugin we can just simply go to jim fahad digital.com i will put this pages link in the description from that page under the important links if we click on get elementor free version let's click there all right it's now taking us to their pro page because elementor has also their pro version is of course a paid version but for this tutorial we won't be using elementor pro version so from top let's click on this elementor logo now from the home page under the choose your plan button here you see it says try the free version let's now click there so it's asking you to create a free account so you know you just put your email address set up password and click on create account your account will be created instantly but i already have a elementor free account so i'm clicking here on login so now let's login then it will take you a survey page but i'm not doing it right now so from the top right corner click on escape then click on escape one more time okay so from this page if you scroll down a bit here you see here is the link for the basic free version so it says basic version let's now click there now here you can just put your website url then click on check for wordpress but i don't want to install in this way underneath all of this here you see it says alternatively if you prefer to install elementor manually you can download it here so i'm selecting i mean i'm clicking on this download link now elementor free version is started downloading here you will find that on your download folder so basically inside of your download folder you will get a file like this it's a zip file all right let's now close this and go inside wordpress dashboard now from the left tab if we hover over on plugins from there let's now click on add new and then click on upload plugin from here then click here on choose file select the zip file that you have just downloaded and click on open then click on install now all right then click on activate plugin so we have successfully installed elementor page builder plugin now we will move to our next portion that's installing theme i'm explaining what is a theme but before that let's see where to get access on changing themes so if you want to change your wordpress theme then from left hover over on this appearance from there click on themes now here we can see some themes like 2021 or 2019 or 2020 all these are wordpress default theme to be honest i don't like any of them because they are pretty basic and there are also a lot of free themes available so if you wanna see that then just click here on this big add new theme button so i'm clicking here now here you can see a lot of free themes are available here so in general uh theme means the look and feel of your website but actually it doesn't mean just the look and feel of your website because if we use any of these free themes we will get a very less customization option and very less demo designs and yeah if you are a designer or coder by yourself then of course you can use these free themes because all these free themes has very less options so if you use any of these free themes then you need to design the whole website by yourself also you need to create the custom fields and advanced option by yourself but if you don't want to do all of those hard work by yourself then i highly recommend you to use any of paid theme and one of my favorite paid theme is soledad theme so for this website i will be using the soledad theme and if you want to get the soledad theme you just need to go to gym digital.com i will put this pages link in the description so from that page under important links here you see it says get soledad theme you can simply click there on this link or you can go to jim fahad digital.com forward slash soledad i will also put that link in the description all right so from here i'm clicking here get sola dead theme like i said of course it's a paid theme and if you have a look it has got 36 000 plus sales so far and with this 36 000 plus customers they have maintained 4.86 ratings out of 5. that's insane and one of the reasons i love them most because if you scroll through here you see they have all the video tutorials available they have their written documentation so if you think or if you feel confused on any person during the creation of your website you can take help of these video tutorials or the written documents and you see their theme is compatible with all the major browsers like firefox safari opera chrome age internet explorer and they're compatible with all the major plugins like woocommerce elementor elementor pro wp bakery bb press body press all these and then the one of the main features that amazed me most that is their theme is super fast i've tested their theme before i have got always 95 plus score both on desktop and mobile device also you see on pingdom and gt matrix you will always get page speed score a and also you will get their custom widgets so additionally you don't need to purchase elementor pro whenever you are using the soledad theme then you can translate your website very easily because they have wp ml and polylang support and also you see they have their own header builder folder builder so you can create your website just by few clicks and in this tutorial i will show you how easily you can do that using this soledad theme so first from the top of this page you see their regular license price is only 59 and i know it's worth each of the penny so let's now purchase the theme so from here i'm clicking here on add to cart now it's asking do i need any extended support for 12 months if you need that then you can check it here but for now i don't need that so let's click here on go to checkout okay so here first you need to create a inverter account it's very simple you just need to put your first name last name and email address but i already have an inverter account so i'm clicking here on sign in i'm signing in here using my username and password let's click on sign in to your account all right so from the payment method you know you can use your credit card paypal or screen i want to use my credit card so i will of course blot out this portion all right so here i have put all my credit card information now let's click here on pay securely all right now it says payment complete and email confirmation is coming your way the item is now available on your download page so from here you can just simply click on this download page but let's say in future if you don't find this page then you can always just go to the top right of the website and if you hover over on your name then from there you see there is a link it says downloads so let's now click on downloads so here we can see the theme that we have just purchased is solid multipurpose newspaper blog and woocommerce wordpress theme so from here click on this green download button now from here let's click on all files and documentation so i'm clicking here so here all the selected themes file started downloading here you will find that you know on your download folder or wherever you save all the download files and also we need to download another file so from here let's also download this one it says license certificate and purchase code so let's download it as well because it will provide us a license code or license key that we will be needing to activate the theme all right so we have basically downloaded these two files here this one and this one let's now unzip the first file within this file we will get the main theme so i'm just unzipping it and here inside this folder we can see there is a zip file it says soledad dot zip we will be needing this file okay now let's go inside our wordpress dashboard and now to install the soledad theme from here again just make sure you are under appearance and then click on themes now at the top of the page after the add themes click on upload theme now click here choose file let's now select this soledad dot zip file now click on open then click on install now all right the solid theme installation has been done now from here click on activate cool but now we need to activate the theme so from here let's now go under active theme then from here if you scroll down here you need to put your purchase code or the key and you remember we have downloaded another license file so this text file let's open this text file so here under item url under item id here it is it says item purchase code let's just copy your purchase code from here now let's go back to the dashboard paste the purchase code here within this field and then click on activate theme cool it says active soledad theme successfully activated thanks for buying our product okay so we have successfully installed and activated the soledad theme now we need to install some plugins so from here you can easily click on this installed plugins button but i want to show you step by step how you can access here in this place let's say if you just go to dashboard again and now if you want to go back under the previous soledad page then from the left bar click on this soledad and here we see it says step one install and activate the recommended plugins so from here i'm clicking on install plugins now here you see there are a lot of plugins here they are recommending to install but on this particular website we don't need all these plugins but for this moment i just don't wanna make things complicated so i'm selecting this all from the bulk action let's now click on install and then click on apply because right now i'm installing all of these plugins and after the end of this tutorial i mean and in portion of this tutorial i will be deactivating the plugins that are not necessary for this particular website but for the moment i have installed all the recommended plugins to double check that if we now go to plugins hover over on that and let's now click on install plugins you see we have installed and activated all these plugins at the last portion of this tutorial i will be disabling and deleting all the unnecessary plugins that we don't need on this particular website okay so for now let's keep it like this and now i wanna import a demo website so to do it from left if we hover over on appearance from there let's now click on import demo data so here they have provided some guideline if you want you can read all of them but that's not nothing crazy because i will be also showing all of this step by step okay so for now let's scroll down here you can browse through all of their demo websites like art magazine astrology club beauty and cosmetics news beauty website beauty salon website book website restaurant website business website all of this also if you get confused which demo website is suitable for you then you can search the email side i mean you can search the demo site from the top of this bar let's say from the top of this search bar you can just search for delivery website so all these search results are delivery websites demo website okay let's clear the search bar from here and now in this particular tutorial we will be creating a health and beauty website it's suitable for any nutritionist any health trainer or fitness trainer or any yoga coach so from here i'm searching for health and here it says health codes now make sure the import demo style and import demo content both are selected now from here click on this import button now browser popup says are you sure you want to import this demo yes i'm sure so click on ok so it started importing the whole demo website so it might take three to seven minutes so i'm waiting all right now it says import completed now to check it we can go to posts or pages so first let's go to pages to all pages so we can check if there is pages has been imported or not yes we can see here the about me contact my blog services and solidart page has been imported also if we now go to posts to all posts here we see some of the dummy blog posts has been imported here as well cool and of course i will show you how to write a blog post by yourself how to create categories how to attach text how to add featured images by yourself from scratch so no worries about them for now i'm just making sure we have imported everything successfully also let's check the media files so from here if we now go to media to here we can see all these images has been imported as well all right let's now go to the front end of our website so this is the home page it was before installing the soledad theme so right now we have installed soledad theme and then we have imported the health demo website so if we now refresh this page boom here we go so here instantly we can see our beautiful website this is the home page here we can see the global header all the sections are instantly available here i will of course show you how to customize all of these by yourself so you can put all your custom informations here i will show you everything how to change each of these how to change all of these images all of this text all the background images everything so let's now start by customizing the home page and right now we are at the front end of our home page and you know as we are the admin of the website so you can always see this top black bar so from here you can always click on edit with elementor to edit and customize this page so this is one of the ways but the best way is you just go back to your wordpress dashboard then from left let's now click on pages to all pages then here we can see this is our homepage it says solid at home so from here you can directly click on edit with elementor also if you want you can click here on this edit button okay let's now close this pop-up i'm clicking on this x and right now we can see this page on full screen but i want that black bar on the left side so to enable that from the top right corner click on these three vertical dots and then click here to disable the full screen mode alright so we are at our home page at this moment click here on this big button says edit with elementor so we are now inside elementor page builder and here's the fun part begin now first before customizing our website let me familiarize you with the eliminator page builder it's super simple super handy so here at the top you can see this is our global header like here on the left this is our logo and on the right side this is our navigation menu then on the right side this is our social media icons everything inside this header we will be changing all this information from the theme customizer not from elementor page builder also if we go to the very bottom of this page here we can see this is our global folder so here we will have all the social media handles and at the bottom here is some copyright text now whatever you can see in between this folder and this header so all of these contents all these sections all these pricing area the testimonial area your packages all the top banner we can adjust and edit everything using elementor page builder now here on the left side everything you can see all these are elementor elements or elementor widgets by the way these elements is specifically these elements are coming from solid theme so you are getting all these widgets and if you now scroll through here you can see more elements these are the basic element widgets like heading widget image video button widgets and then if you scroll down here you can see some pro widgets but in this tutorial we won't be using any pro widget so i'm minimizing this one here we have got more widgets like icon box image carousel tabs testimonial all these so here before customizing the existing design or the demo website i wanna make you familiar how to create anything using elementor page builder so let's say i wanna take a section in between this first banner and this second section so to create a new section i'm clicking on this plus icon by the way i'm creating this only for giving you an example later i will be deleting this section i'm giving you the example so you can better understand the elementor page builder and how it works okay so to take a new section we need to click on this red plus icon then you can select any structure like single column two column three column or any of these structures so for now i'm selecting this single column structure now here within this blue line everything you can see within this blue line this is the section now if you want you can increase the height of this section from left you see it says height from here i'm setting it to minimum height now by default it's set to 400 pixel but if you want you can increase the height by dragging this bar to the right you can decrease the height by dragging this bar to the left in this way okay now let's say if you wanna add a background image or background color with this section then you just need to make sure you are selecting this section by clicking on the six dots then from left let's go under style tab from here let's now click on this background type i'm clicking on this pencil icon so if you want you can give it a solid color from here so i'm clicking on this color picker from here you can take any color like red or black or you can select any other color from this color bar like blue or pinkish color like this also if you wanna add a background image instead of a solid color then you can select that image from here so i'm clicking on choose image you can use any of these images that we have imported but for now i'm showing you how you can import any image not import how you can upload an image from your computer so you just need to click here on upload files then click on select files for example let's select this image now click on open now click on insert media then if you want to play with its position so from here position let's now make it to center center then the attachment you can make it scroll or fixed then here repeat i'm making it no repeat and here size i'm making it cover so it covers this whole sections area okay now this is our section and inside of this section we have one column here now if you want to select any column then here you can see and column icon so i'm selecting this column again we can go under this columns style tab here now let's say if you wanna give this column a different background color you can do that from here so background type click on this pencil icon from here i'm selecting a color so from here i'm selecting black color but i wanna make it a bit transparent so i'm dragging this bottom bar a bit left side here like this all right now let's say if you wanna add some space at the right side and left side of this column then you can just go under the advanced tab of this column and from here you can use the margin so first of all i'm unlinking by clicking here so like i said i only wanna use the space at the left and right so here you see the right i'm adding for example 40 pixel of margin and on the left side i'm adding 40 pixel of margin we cannot see the spaces at the left and right at this moment because before that we need to add some element inside of this column so if we want to add any element or widget inside this column we need to click on this plus icon so let's click on this plus icon and let's first add here a heading widget so i'm searching for the heading widget here we go let's drag this heading widget inside of this column here now you see this is our heading widget now if you wanna change the text of this heading from here for example i'm writing here health and fitness now you can make the alignment to centered by clicking here the alignment tool centered now i wanna do some styling with this heading so go under style tab from here um changing the text color so let's click on this color picker i'm making the color to pure white color like this then i want to do some work with this typography so click on this pencil icon from here if you want you can change the font of this text or heading so here if i click on the font family here you can see a lot of fonts available all of these are google fonts so here i'm searching for a learn font so select the alarm font and then if you wanna make this heading more bigger then just drag this size bar to the right side like this you see it's becoming bigger you can make it smaller or bigger by dragging this bar then if you want to make it more bolder from here i'm making it 900 then transform we can make it all uppercase or a lowercase let's keep it the default then also you can play with the style like normal or italic i'm keeping hit default also you can increase the line height from here like this or you can increase or decrease the letter spacing from here in this way all right now let's say underneath this heading if you want to add some text or paragraph then from top here you need to click on this rubik's cube icon also you can search the widget name from here so i'm searching for text editor widget here it is i'm dragging this text editor widget underneath this heading here let's drop it now you can change the text from here in this place you can do some style just go under style tab from here i'm also making the text color to white color then i'm making the alignment too centered you can also play with its typography like if you want to make their font size bigger like this you can do that now let's say if you wanna add some space at the left side and right side of this text or paragraph you can do that from under advanced tab so let's go under advanced tab and this time i will be using padding so first let's unlink the padding only on the left and right i'm adding 50 pixel of padding okay let's see now underneath this text editor if you want to add a button again just click on this rubik's cube icon from here i'm typing button so here is the button widget you can use this button widget or the pc button widget for the moment i'm dragging this button widget underneath this paragraph here then you can make the alignment tool centered and here is the link option so if you want to link it to any other page of this website you can just put the link of the page here no matter if it's this websites link or you can put here any external link then if you want to change the text like i'm writing here read more then go under style tab from here you can change the button color so instead of this green let's say if you wanna make the button color red so i'm dragging the color to the red side and let's make it red color you see it's very simple so in this way you can create everything step by step by yourself but like i said as you have already purchased solid themes so you don't need to do all of the work by yourself i'm just showing you the example how to work with elementor page builder so you can customize or adjust whole page i mean you can change all the contents you can change all the backgrounds with your own background image all the text with your own text all the button links with your own links now you can do everything very very easily so this portion it was only to give you some example i hope you already understand how elementor page builder works so we don't need this section anymore now i wanna delete it so from here let's click on this x to delete this example section it's gone all right let's now start customizing our real home page from here so first let's say if you wanna change the background image of this section you already know that how to do it so from here let's just click on this six dots now the whole section is selected then if you wanna change the background image just go under style tab from here you see the background image is coming from here now if you wanna change the background image you need to just click here on this image and you can select any of the image from the media library or you can select any image from your computer but for now i wanna keep the background image the way it is so i'm closing it then if you wanna change this text and paragraph just click over it so it's very handy whenever you wanna select anything i mean whenever you wanna change anything just click over that then you will get all the options here like on the right side it says it clean health coach and underneath here is some paragraph if we want to change all of this text and paragraph just go to the left side and if you scroll down a bit you see here under title it says title text and this text is coming from here now you may wonder what this beer tag means beer means the line break like here you see after it clean there is a line break and then health coach this line starts but from here if we remove this beer tag i'm removing it now they are at the same line but i want that line break so i'm adding the line break again now here you can change all the text with your own text and then if you wanna change the paragraph just scroll down from here under the description whatever you will write within this description field that will appear here you see how simple it is okay now let me show you more options like here underneath you see custom margin top for content so if you want to add more space in between this headline and the paragraph then you can just increase the bar from here so you see they have got more breathing space in between and if you want to go back to default just remove the value from here so it's the previous state then also if you want to adjust the width like right now they are covering this width but if you want to increase or decrease the width of this portion you can do that from here it says custom width for content so if you want to decrease it just drag this bar to the left you see their width is now decreasing but i don't want that so i want to keep the default 510 pixel like before all right now let's say here you can see a background color only with this column so if you don't want this background color with this column you just need to select this column go under its style tab you see the background color of this column is coming from this color picker so instead of this color if you wanna put here any other color or your brand color you can do that from here like this i'm changing this color with another color in this way but you know the previous color was better so i'm pressing just command z so we have got back to the previous color you can always undo your work if you are from mac then you need to press command z and if you are from windows then you need to press ctrl z all right now here is a button let's now work with this button first let's select this button now here if you want to change this button text by default it says become clients but here i want it to say contact now and then i wanna link this button with our contact page so here inside this link field i started typing contact and here is suggesting the contact page of our website so i'm selecting the contact page now we can see the contact page url that's https colon forward slash forward slash our website name dot com forward slash contact so this is the link of the contact page now if we click on this contact button it will take us to the contact page of our website alright let's now scroll down here if we have a look at the bottom of this section we can see some wave effect so if you also want to play with this wave effect you just need to make sure you have selected the section so i'm selecting this section by clicking on the six dots let's now go under style tab from here if you scroll down here you can see shape divider let's open it and if we now go under bottom you see the bottom shape divider is set to waves brush but instead of waves brush if you want to select any other pattern or any other shape like if you want you can set the tilt option here now you see it's tilted instead of that width also there are more options you can play with all of this like if you want you can put the mountain shape see now at the bottom we have got the mounting shape but the previous wave shapes was far better than this so i'm switching back to the waves brush here is the website brush let's select it again all right it looks cool now let's scroll down and go to the next section you already understand how easy it is to change anything any portion any image of the website like here if you want to change this heading and paragraph just click over it then on the left side you will find all the options like if you want to change this new wear new you text then you can change it from here if you want to put your real text here the description then you can change that from inside this description field then here let me show you another interesting thing let's say if you wanna put this image on the left column and if you wanna put all of this content on the right side how can you do that you can do that very easily you can just swap that like a twist just grab this column and drag it to the left side here you see instantly the right column is now on the left and the left column on the right side and somehow if you change your mind you know you can also undo that so press on command z it's instantly reversed and then if you want to change this image with your own image just click over this image then from here you can choose another image of your own and upload that here also you can change this image on the same technique now here we have got another button it says my program i will show you shortly because here i want to do a trick whenever anyone clicks on this my program button that will jump them to the bottom area i mean bottom section this section i mean whenever anyone clicks on this my program button the page directly scrolls to this portion of the website i'm showing you that very shortly but before that let's now have a look with other portion of the website so you know if you wanna change this text and paragraph just click over it and you can change all of them from here then if you wanna change these images you can do that just click over it and change the image within this section you can put all about your programs all the details like weight loss could be your one of programs then meal planning or juice detox program then let's say if you want to change this icon or this text just click over it first instead of this bullet if you wanna put here any other icon just click over here you will find huge list of icons you can just scroll through or you can search the icons from the search bar for example if i put here this check square so i'm selecting it you see it's changed immediately then if you want to change the title you can change that from here if you want to change the paragraph you can change that from this place very simple all right let's now scroll down this is the package pricing section and it won't be just a static pricing i will show you very shortly how you can make it fully functional because i will also show you how to add ecommerce functionality with all of these pricing so whenever anyone clicks on this register now that will take them to the checkout page and they can pay you through their credit card so all this pricing will be 100 functional but for the moment let's have a look how you can change all this text or these prices from here so you know just click over it then from here you can change this text the weight loss text from here then if you want to put any short text you can put that here inside the pricing subtitle you can set the price here inside you already understand it you can change everything from inside this field and like i said at the last portion of this tutorial i will show you how to make it completely functional using woocommerce so your customers can pay you instantly all right let's now go to the next section this is the client's testimonial section so here you can put your clients reviews or testimonials as many as you want and it will work like a slider so first let's click over it here by default we have got one two three reviews okay first let's open a review so i'm opening the item one now here you see we have got one headshot or image so you can replace the image from here you can change this kelly name from inside this custom name field then you can change this full review the text view from inside this description field and you can change the rating from here by default it's 5 but let's say if you wanna put the rating to four you can select four from here so now you see the rating is four but who wanna give them four star rating on their own website so i'm making the rating to five okay this is the first testimonial or first review now let's close the first item like this here inside this is the testimonial two if we now click on this next arrow here we can see the next one if you want to update that you can do from inside this item to field if you wanna update the third review you can do that from under this item three and then if you wanna add more reviews then you can just click here on add item or you can just duplicate one of the available reviews so i just wanna duplicate the item three so i'm clicking here on the duplicate icon now open the item four from here let's say i'm naming it james fahad then we can change this image with any other image so i'm opening the media library from here for example um setting this image now click on insert media now if we go to the next review the next review and here is the fourth review you see the image has been changed here the name is jim fahad and you know you can change this text and the ratings from here all right let's now go to the next section here you can talk a bit more about your services so here you can change this image with your own image you can change this text with your own text from here now let me show you another interesting thing like here we can see two columns but let's say if you wanna add two more columns underneath this section here you can do that very easily you just need to right click over these six dots and then click on duplicate you see here two other columns has been added instantly but you see it's overlapping each other so in this case we can just add some margin at the top of this section so select this section go under its advanced tab from here instead of negative 150 i'm adding 50 pixel so here underneath this section we have got another new section here i have duplicated this section only to giving you example if you have more features to talk on your website you can do that but for now i don't need it so i'm deleting it from here let's click on this x okay now underneath this here is the connect with me section and you know you can change this background image by clicking on the six dots go under style tab you can change the image from here and then you can change all these text from these fields like if you wanna put here your office hours the phone numbers the email addresses the social icons you can do that inside of this fields very easily okay i'm showing you how to do that so first i wanna change the text of this office hours so i'm clicking over this and again if you wanna change the icons you can change them from here you see there are lots of icon but for now let's keep the default office hours icon then if we scroll down now inside of this paragraph field or the text editor field i wanna change the office hours so for example monday to friday i'm setting it to 8 a.m to 8 pm and then let's add a line break and here i want to say saturday to sunday i just want to say it closed all right now click on the phone numbers here i will also show you an interesting thing so let's just scroll down and inside the text editor here first i'm putting here a fake phone number so that might be like anything it's just a random fake number okay now i want to show you how you can make this phone number clickable that means whenever anyone clicks on this phone number that will make a direct call to your phone so to do it first i'm selecting this whole phone number then from top click on this insert link now here first type t e l that's tail then a colon and then put your phone number with the country code something like plus 880 then your phone number and then hit enter now if anyone clicks on this phone number they will directly call to your phone in the same way i'm just copying this and then let's add a line break here i'm pasting another phone number so you can just change this number with another number and also here click on this edit icon you can put the real phone number here like this and hit on enter in this way you can put your two real numbers now whenever anyone clicks on any of these numbers you will get a real call on your phone how cool is that now let's work with the email addresses so click over it i will also show you how to make click to email function so first let's remove this text so here again i'm putting here a fake email address of course this is not my real email address so i'm typing here the email address okay now let's say if you wanna make this clickable so whenever anyone clicks on this email address they will directly mail you to make it that functional you just need to select this whole email address now click on this insert link icon actually wordpress itself done the job so here is added mail to colon the email address now click on this apply button now if anyone clicks over this email address they can send you email directly so here i'm adding another email address i'm just putting here another fake email address again select whole this email address from top click the edit link so it's now mail to colon then the email address now click on apply so in the same way you can add some of your major social media links here so i'm clicking over here then inside of the text editor field let's remove the default text first i'm typing here facebook then let's add a line break and here i'm typing instagram so first let's select the facebook text click on this edit link then inside of this link you can put your facebook page url so here inside i have put my own facebook page url now hit enter and then i'm adding a line break oops we don't need any line break because we already have written instagram at the bottom so i'm removing the line break now let's select the instagram text also give it a link so here i have added my instagram handle now click on apply all right so far we have done with this connect with me section and here at the very bottom we have the global folder so we will be customizing this global footer from the theme settings not from inside elementor page builder otherwise we are done with our beautiful home page but here i want to show you another thing as we have written all of the informations here like our office hours our phone number our email address our social connects everything here i want to use this section on other pages like on our services or about me pages and you know i don't want to repeat the same work on the other pages that's why i want to save this section as a template then i can easily reuse that on the services about me or any other pages so first let's save this section as a template to do it just right click over these six dots here then click on save as template now i wanna give it a name so i'm naming it connect me section then click on save alright so you see it's saved under my templates and its name is connect me section all right for now let's close it otherwise we're done with our beautiful home page now to save all of our hard work all you need to do just click here on this green update button all right let's now customize our services page and to do that first i want to go back to our wordpress dashboard so to go back to our wordpress dashboard from the left side here you need to click on this hamburger icon then click on exit to dashboard all right now from left here pages let's now go to all pages then i want to work with the services page so here it is from here click on edit with elementor all right let's now start customizing our beautiful services page but before that i want to tell you one thing sometimes you may see your page is broken or you may see some unusual things so in case if you see something like that make sure your page is set to elementor full width how can you check that whenever you are editing any page just go to the very bottom left of your page click on this gear icon and from here make sure your page layout is set to page full width also if you want you can select elementor full width but for now let's keep the page full with all time don't select the elementor canvas or any other template or layout select the page full width okay i'm selecting this one actually it was the default one all right so we are now at our services page here let's say if you wanna change the background of this top banner then you can change the background image or background color from here all you need to do you just need to select these six dots but i cannot grab these six dots from top sometimes it's happened because here we have got our global header so if we now want to select this whole section all you need to do just right click here on any empty space oops not here just make sure you are inside of this section then right click here then click on edit section now let's go under the style tab then from here if you want to add any background image you can do that from here so let's choose an image then from here you can select any of this image then click on insert media also you can adjust the position from here like cinder cinder attachment to scroll and then size to cover so if you want you can use any background image if you like but here instead of in a background image i wanna use a solid background color so let's delete the image by clicking on this delete icon now from the color picker let's select the color picker here i'm adding a color code that's c3e1c3 it looks decent but you can of course play with this you can use any other background color or any other background image if you want then if you scroll down here we have got the three main services here we have got weight loss here is the meal planning here is the juice detox and you know you can change any of these the way you want if you want to change this image just select this image by clicking over it then you can replace the image from here if you want to change this text icon or the paragraph text just click over it and you can change everything from here you already know that and let's say if you have more services than three then you can just duplicate this whole section just right click here and click on duplicate you see the new three services has been added here you can replace this image and text with other service name but for now i don't need that so i'm deleting this section then here we have got the package pricing like i said on the home page we will be making it totally functional using woocommerce and notice that's completely free so i will show you that at the very last part of the tutorial let's now scroll down here you can add some factors about your program like if your program has any refund policies or any other feature like immediate results or two months program if your program is a six month program or one year long program you can put the text here you know your business better so you understand what to write here in these places all right let's now scroll down and here we have got the very last section of this page and now let's say if you wanna run any offer for example it says 50 off on all package like this if you want to add any promotion on your website then you can use this timer so let's select it now from here you can set the year so here instead of 2020 i'm making it 2022 and let's say this offer will end after january 15. so here month i'm making it one one means january you know and here day i'm making it's 15. so after 15th january this offer will end so in this easy way you can create this timer from this place and then you can link this button with your offer page and you know i already have shown you on the homepage how you can change these office hours phone numbers social connect or email addresses but now here i wanna show you another efficient way like you may remember on the home page we have saved this whole section as a template now i want to import that section in this page so to import that section let's scroll down from here click on this folder icon this time and now go under my templates here you see we have saved this template connect me section let's now click on this green insert and then click on no now let's say if you wanna use the same section instead of this section then you can just simply delete this section from this page so you can just keep this section on this services page like the home page but now here i want to show you another interesting thing like if you just reuse the right column this person or only these social factors or your office hours email address phone numbers all these informations only and you wanna keep all the same then let me show you a trick so from here i'm just right clicking over this inner section right click here then copy it now go to the top section put your cursor here over these six dots then right click here and click on paste so here underneath we have got the copied inner section and we don't need this because we already have done the work with these sections so let's delete the dummy one this one and also on the services page we don't need this so let's delete the entire section by clicking on this x all right so we are also done with our beautiful services page let's now start working with the about me page but before that here i want to show you another thing because on the about me page i will also use this same color that's why i want to make this color as a global color so we can use the color on any other page to do it again just right click here click on edit section go under its style tab here we have got this color so we don't need to copy this color and go other page then paste the color we don't need to back and forth this type of work all the time more easily we can just set this color as a global color to do it make sure this color is selected here then click on this plus icon we can name it light green now let's click on create so this color is now set as global color we can use the color on any other page of this website all right so we are done with our beautiful services page to save our work click on this green update button let's now quickly move to our about me page so from the hamburger click on exit to dashboard and then from pages let's go to all pages now here is our about me page let's now click on edit with elementor now here on the about me page top banner i want to use the same color that's why we have taken the global color now to apply that color just right click here then click on edit section go under its style tab then you don't need to select the color manually from the color picker this time you can simply click on this globe icon to pick that global color so i'm clicking here then you remember we have named it light green so i'm selecting the global light green color and here we go then if you scroll down on the about me page here you are free to put anything what you want to put about yourself because you know it's about you so you know better what represent yourself you can change all these images with your own image you can put this text this paragraph with your own text then if you scroll down here you can put your skills so on the right side you can replace this image with your own image and on the left side i'm showing you how easily you can change this progress bar with your own skills so to change it just click over this progress bar now let's say if you want to edit the first scale then here this one is coming from the first one it says b fitness okay i'm clicking here now let's change the label so instead of b fitness i'm writing here just training now you see it's instantly changed to training now here the value is 90 if you want to change the value you can change it from here so instead of 90 i'm setting it to 95 so here the default color is this greenish color if you want to change the green color you can do that from here you see custom background color so just click on this color picker then from here you can change any other color like red for example so here you see the color has become red but i don't want that so i'm just reading it so from here click on this clear button now it's went back to the green color in the same way if you want you can change all of this with your own skills and if you wanna add more skills then you know you can just simply click on this duplicate icon then you can change that with your other skills then let's scroll down here you can add some fun factors about yourself or some number factors like how many clients do you have how many weight loss clients do you have all these then if you want to change any of this just click over it like here instead of 90 plus new clients here instead of 90 i wanted to say 234 and then instead of new clients i wanna say it keto plans okay and also you can control the animation duration actually you can play with all of this i'm just showing you the major things and then you are free to play with all these options like after all of this you see there is a suffix that's a plus icon instead of plus icon if you put here any other icon or any other number for example here i'm typing just gym so you see after the two three four number here is gym added so you can add here anything as the suffix but the plus makes more sense so here i'm adding plus as the suffix of the number all right let's now scroll down here we have got another connect section and again to make our website synced instead of this section i want to use that pre-made template that we created from the home page so from here i'm deleting this connect section and let's now click on this folder icon because i want to import that template so go under my templates from here connect me section click on this green insert button now click on no it's done all right so far we have also completed the about me page let's now go to our contact page but before that don't forget to click on this green update button to save your work okay now from hamburger click on exit to dashboard again from pages go to all pages so here we want to work with the contact page here we go now let's click on edit with elementor so here you know first i wanna change the background color to sync this page with other pages so right click here click on edit section now go only style tab from here i wanna select the global color that's the light green color all right now we have got here the contact form okay i'm showing you shortly how you can work with this contact form let's now scroll down and here you know instead of this i wanna reuse that template so let's just delete this section now from underneath click on this folder icon go to my templates let's just wait okay it's loaded and here it says connect me section click on this green insert button and click on no all right so we have added the bottom section i'm in the connect section by importing the template now here i wanna show you one of the most important things of your website that's the contact form so using this contact form people can communicate with you very easily okay so first let's select this form from here now on the left we can see this form is made using contact form 7 plugin ok so here first let's keep the page the way it is so to save the page let's now click here on this green update button because now i will go back to the wordpress dashboard because i want to create a contact form first all right let's now go back to our wordpress dashboard then from the left menu bar here you can see there is a menu link it says contact so from that contact let's now click on contact forms and then here inside one pre-made contact form we can see it says contact form one i wanna reuse it so first let's click here on this edit icon now here i wanna keep the contact form exactly like this because it will have the name field it will have email field the subject field and the message field and then it will have a submit button so we don't need any other input field other than this so let's keep it like this all i want to do i just want to change the email address i mean where i want to receive the email i want to change that email address to change it from here after the form here you can see it says mail click there now by default that to is set to the email address that you are using on this wordpress website so here if you want you can keep the email address then whenever anyone comes to your website's contact page they fill up their name email address subject and message and when they hit on the submit button you will receive that as an email on this email address that's basically your wordpress default email address but here instead of this you can add any other email address like here i'm adding one of my email address that's elementor at jim fahad digital.com okay that's it i don't wanna change any other thing like from subject i wanna keep everything default so now from the top right corner click on save so here just remember one thing our contact from name is contact form one and this is the shortcode of our contact form even from left if we go to contact forms here we can see this is our contact form 1 and the shortcode is this so from here i'm just copying this shortcut let's copy it and now let's go inside elementor page builder this is our contact page now before doing anything first i want to refresh the page so let's refresh the page otherwise it won't get synced with the contact form that we have just made that's why i'm refreshing the elementor page builder i'm in the contact pages elementor page builder okay let's now click over this contact form and here first remove the existing shortcode and here i'm pasting the shortcode that we have just copied here you go and from top click on apply so here we can see our new contact form it has your name field email field subject field and message field but you know what i want to add some space at the left and right side so to do it let's click on this contact form here now go under its advanced tab from here let's unbind the padding only on the left and right i'm adding 50 pixel of padding like this okay let's now click on this green update button to save our work and now i want to check if this contact form is working or not and one important thing this contact form of course will not work inside of the elementor page builder we need to test this contact form from real web page so if you want to preview the page on a real browser all you need to do from here just click on this eyeball icon to preview this page on real browser so i'm clicking here on this eyeball icon all right now from the contact page let's fill out this contact form so here i'm quickly putting my name email address subject and a message so here first i'm putting a fake name that's john doe a fake email address john.gmail.com and here is a subject so here i wanted to say i need a custom mail so for example i'm a customer and here i'm writing i want a custom mail plan for next 16 weeks all right that's okay for now now let's click on this submit button to check if it's working or not so it's now spinning here i'm waiting and yeah it says thank you for your message it has been sent cool all right so as we are the admin of this website i already have received a mail so if i now open the mail here you see this email has came from gym production that's our website name and we can see it's wordpress at our eliminator dot com also the first name is john doe the subject is i need a custom mail and here is the message buddy it says i want a custom meal plan for the next 16 weeks and underneath it says this email was sent from a contact form on gym for production then here's the website name and of course on your website you can see here on behalf of your website name and your website url then if you wanna reply back to this customer you can just click here on reply and you can write your reply message all right let's now go back to our browser so just have a quick look let's first go to the home page so here i'm clicking on the logo so we have completed our beautiful home page we now know how to change all of the images all of the contents all the background images everything let's now go to the services page now you also know how to customize the services page also let's now go to the about page you also know how to work with about me page how to work with this progress bar these fun numbers and how to reuse any template that you have created on other page like this connect area also let's now go to the contact page you know how to create a contact form by yourself and you already see it's 100 working all right now we only left the blog page but before creating the blog page or before customizing the blog page i want to show you how to create a single blog post so to create a single blog post we need to go to our wordpress dashboard then from left bar let's go to posts and from there now first click on all posts as we have imported the demo website that's why we can see here some imported blog posts and here you see all these blog post has its title here's the author name here is the category here is the tag and here's the publishing date as we have imported the demo website that's why we have got this imported single blog post now first i will show you how you can create a single blog post from scratch so to create a single blog post from under posts you can click here on add new or from here let's just click on add new so now first you need to add the block title from here so here i'm writing a block title it says all you need to know about keto diet pros and cons okay we will be writing our blog details inside here within this blog but before that i wanna show you some options here like within this blog if you wanna add any sidebar i mean if you just wanna turn on or off the sidebar you can do that from here but on this website i wanna keep all the default settings like it is so let's keep all the default settings here so let's now scroll up let's now have a look how to write a single blog post from here now first have a look if we click here then on the right side here we can see a plus icon so click here to add a new block now inside this block you can add any paragraph or image or heading or any gallery or list item or code then there are several blocks if we click on browse all then you see you can insert any of these blocks from inside this gutenberg blog editor but here first actually within the single blog post we don't need all of them we will be using only these basic blocks like paragraph heading list quote all these now let's add first a paragraph by clicking on this paragraph icon we can simply drag this paragraph inside here or you can just simply click on this plus icon and click on paragraph then here i'm pasting some dummy text now underneath this if you wanna add more text just after this paragraph hit enter and let's write another paragraph here you can add more paragraph in the same way okay now let's say after this paragraph if you want to add a heading then click here on this placeholder it says type or to choose a block so i'm clicking here then from the right side click on this plus icon and like i said this time i wanna use a heading widget so let's take an heading so here i wanted to say be the change you want to see in the world now if you want to make this heading any other heading like by default it's h2 now from top let's click here you can make it h345 so here i want to make it h4 like this then underneath this heading widget if you want to add more paragraph just hit enter then you can add more text here in this way now let's say if you want to insert an image inside of this blog post then after this paragraph hit enter to make some space then from right side click on this plus icon and this time i'm selecting this image block so from here you can upload the image i'm clicking on upload so let's insert this image and click on open now you can make the image smaller or bigger just by dragging from its corner like this then if you wanna align the image you can just click over this icon and from here i wanna make it to align center you see it's now centered all right now after this image i wanna add more paragraph lines so i'm hitting enter let's now add some more paragraph line some more and after this paragraph i wanna add a quote so let's again hit enter and here this time click on this plus icon and select the quote block now i'm pasting some text here so these will be shown as a code on the real blog post all right let's now hit enter alright let's now hit enter twice so here you can add more paragraph lines like this all right so we have written the blog post let's now have a look here is the block title we have made this blog text by using paragraph some heading some images some code but this is not all because we need to set some other settings for this blog post so to do it from here top right corner click on this gear icon and then you see right now we are under post so from here first open the template make sure you have select the default template and then we can select any category from here so open the category in this demo website there are these three pre-built categories but let's say if you wanna create more category you can do that by clicking here add new category let's say i wanna create another new category it would be fitness then click on add new category so you can select one or multiple category for a single blog post so i'm selecting fitness also the nutrition category for this blog post now let's scroll down from right side here i want to add a featured image with this blog post so click on featured image now click on set featured image so for this blog post feature image i'm selecting this image now click on set featured image it's added so when you are done with the blog post writing and also with the settings like the featured image the category then from top you can simply click on this publish button then click on publish one more time so now if we want to preview the website here on the right side you see here is the link it says view post so i'm opening this view post link from a new tab so let's now have a look how our single blog post page is looking right now so first have a look here at the top we can see the fitness and nutrition these are the categories and here this is our blog title and here we can see this is the author name and here this is the blog publishing date now here this big image this is the featured image that we have just set then here underneath the first have a look on the left side i will talk about the right portion a bit later so here this all paragraph this heading this image here is the code we all i mean i have written all this from inside the blog writing editor that's the gutenberg editor and then if we scroll down here you can see how many comments we have got like right now we have no comments so here it's saying zero comment then here we have got social media sharing options now underneath here is the author name that's jim fahad and here is some details about the author you may remember from wordpress dashboard profile we have set this text then here is the option for navigating through the previous post and also here will be the navigator for to go to the next blog post and here is the related blog posts i will show you shortly how to customize these as well now here underneath this is the commenting option now have a look on the right side here on the right side we can see this is a search bar here we have got the recent posts here is the recent comments here is the social connects then on the right side here is other recent posts and if you scroll down here's the newsletter option if you wanna grab your customers email address from the newsletter then you can use this and on the right side we have got the categories so this is how our single blog post page is looking right now if you want to customize this page you can do that from theme customizer and you know you can go to theme customizer from wordpress dashboard and if we hover over on appearance from there just click on customize then you can go to theme customizer also if you on the front end of your website you can always access to this blacktop bar from there you can simply click on customize so right now we are inside the theme customizer this is the soledad theme customizer so from here first i want to customize this single blog post page and to customize it from here from the left bar let's click on these single posts so i'm clicking here now first let's go inside general so actually here you will get tons of options you can control almost everything from this customizer like the first thing i wanna show you here on the right side we can see this sidebar but instead of right side if you wanna display this sidebar on the left side you can also do that from here so you see it's a single post sidebar layout by default it's on right side but if i make it to left sidebar now you see the sidebar is on the left side but i don't want that so i'm making it the right sidebar again then here at the top we can see this big featured image and it's always good to display big featured image here but let's say if you don't want to display this featured image at the top of the single block post page then you can disable that from here so you can just click here hide featured image on top so if i click here now you see at the top there is no featured image but let's just turn it off so we can see the official image at the very top of this blog post alright let me show you more options like if we scroll through this like here we can see the post author here is the post date if you want to disable them you can just select this to hide this jim fahd name if you select this hide post date then december 11 2021 this date won't be shown but i of course wanna show this metadata all right let's now scroll down scroll down more okay if we now have a look on the more options from this left side so here you see it says hide comment count right now it's a zero command because at this moment we have no comments here within this blog post but if you wanna enable or disability you can do that from here then here is the author information if you don't wanna display it you can also disable that you can disable that from this place you see it says hide author box so you can just click here then the author box will be disabled like this you can also enable or disable this previous or next post navigation bar from bottom so here each and everything is customizable also from top let's now go back even if we click on this related posts so here these related posts are coming from these settings so if you don't wanna show this related post you can hide them from here you just need to click here on hide related posts box also here you see the text it says you may also like if you wanna also change this text you can change that from here so you understand here each and everything is editable also if we go back and open the comments form so basically this is the comment form if you want to hide it you can hide that from here just click in this height comment and comment from option all right let's go back now go back one more time now i want to show you how you can work with this sidebar so to work with this sidebar from left options let's now scroll down and here i'm searching for widgets so click on widgets from there let's go inside main sidebar because this main sidebar is responsible for this sidebar on the right side on the single blog post page so first this search bar i want to keep it then the recent post all right we can also keep that but i don't want this recent comments so if we want to delete it okay first it says welcome to block widgets okay got it so click here now here you see all these options like first the search bar then here is the recent posts that's why we can see the recent posts here and then here is the recent comments but i don't want to display this on the right side here so just click over it then from these three dots click on remove a block also this one click over it click on this three dots now click on remove block like this i also don't want this newsletter so just click over it then click on these three dots then click on remove block all right so on the right side i also don't want this search bar because we already have a search bar here at the top so from left i don't want this one so just click on these three dots and click on remove block all right other than that all other options like recent posts are fine and categories are fine i'm pretty happy with the single blog post layout right now so just scroll up from left then click on this publish button to save this settings all right so now i wanna customize the main block page to customize the main block page we need to go back to wordpress dashboard first so let's click on this x to exit this customizer now let's go back to our dashboard so i'm clicking here on dashboard then from here pages let's go to all pages and here is our blog page it says my blog i'm opening it from elementor page builder now click on edit with elementor all right so this is our main block page here we can see all the blog posts here you see all of this like this is the blog featured image this is the blog categories here is block title here is blog other metadata like the author name date and here is some excerpt and then whenever we will click on this that will take us to the single blog post page that we have just customized all right let's now customize this blog page first like other pages to make the design sync i wanna change the background image of this top banner so right click here click oops not here just right click here inside this section so right click here click on edit section first go quantity style tab from here global color that's the light green color like other pages and then here this is the block queries so if we now click on this blue pencil icon here we will find all the options for this block query so first of all here have a look now here we can see the blog numbers one two then three four five six seven eight on the first page we can see eight blog post and then if we click on load more posts more blog posts will appear here but initially instead of 8 i want to display only 6 blog posts so to change that option from here let's click on query and from here you see posts per page is set to 8 but instead of 8 i'm making it 6. and also if we open the layout from here it says custom number posts for each time load more posts here instead of six i wanna make it four so now here you see by default one two three four five six blog posts are here and then if we click on this load more posts instead of six other four blog posts will reveal underneath here all right i'm pretty much happy with these settings but of course you are always free to play with all of these settings because if we have a look within this style just click there you will be amazed you see how many options are available like here the default setting is greet two columns post but let's say if you just click on overlay posts right now all the blog posts are looking like this but it looks super big so instead of that let's select another layout so from here style i'm selecting boxed posts style 1 and yep it looks pretty cool so let's keep our block page like this because so far i'm pretty happy with it so to save it from here click on this green update button alright so we are almost done with all of the pages now i want to customize the header and footer of our website so to do that again we need to go back to our theme customizer so first let's go to our wordpress dashboard now from left if we hover over on our parents from there go to sim customizer so i'm clicking here on customize all right so let's first start with the header customization so first i wanna show you how to play with the logo how you can change the logo with your own logo so if you want to change this logo with your own logo then from the customizer let's click here on logo and header then go inside logo now you can replace this logo by clicking here just click on change image so here we can upload any other logo for now i just wanna upload a random logo only to show you how to work with the logo so i'm clicking here on upload files let's now click on select files so i'm selecting this logo now click on open then click on choose image so here at the top our logo is looking perfectly fine but if you face any problem with your logo you can always adjust the width and height from this place also if you wanna have a look how your logo is looking on tablet and mobile device you can do that from here so from the theme customizer just click here on this tablet icon to have a look how your logo is looking on tablet device it's looking perfect now if we click on mobile device on the mobile device our logo is also looking perfect then on the left side here we can see the hamburger now logo goes at the top of this of canvas menu all right let's now click on this x and go back to desktop view so now we know how to work with logo but honestly this logo is not going perfectly well but honestly i want to replace this logo with the previous logo because that suits best with this health niche website so from here click here again change image and i'm selecting the previous logo now click on choose image and of course you will be uploading here your own image i'm just showing you how to change or upload your own images or logos okay now i want to show you another thing how you can change the fab icon of your website so what is a fav icon if we have a look at the browser top here you can see a little tiny icon right now we can see the browser's default fab icon here but if we want to upload our own fab icon then just go back on the customizer here go back one more time then let's go inside the general and then click on general settings from here you can upload your own fav icon just to make sure the fab icon is is square shaped so that could be 64 by 64 or 300 by 300 anything but that should be square shaped so here i'm clicking on select image let's now go to upload files click on select files i'm selecting one of my five icons here now click on open if you want you can also use this but it's always great practice to have your own fav icon alright so click here on choose image so here we have uploaded our fab icon but still we cannot see the fab icon here actually we can see that very shortly whenever we will replace the page so for now let's do other settings then whenever we will replace the page we can see the fab icon at the top of our browser here okay so let's now go back go back one more time now i want to show you how to work with this navigation menus so let's say if you want to add more menu items or if you want to change the links of the menu items then how you can do that you can do that from here so here i'm searching for menus here we go this is menus click here and this is our primary menu so go inside the primary menu now here you can see this is our home services about me contact and blog and here the services about me contact my blog all these are pages so if we just open one of them here you see this is our services page and then if we open the home let's open it you see this is a custom link and as we have imported it as a demo website so here is still the demo link is sitting here so i just wanna replace this link after the http is colon forward slash forward slash i wanna put here our website name that's our ali mentor.com you should put your website url here all right let's now minimize it now i want to show you another thing let's say if you want to create another menu item how you can do that just click on this add items then let's say i wanna insert here a new menu item so i wanna put a custom link inside of that menu so i'm creating the menu item by clicking here on this custom links let's click here the menu item should say part nurse and i wanna link it to my real website that's jim fahad digital.com so here i'm linking it https colon forward slash forward slash gym for hud digital.com and now click here on add to menu so now you understand not only your website pages you can also add an external link within the menu items and now let's say if i want to place these partners after the about me item then we can just simply drag this partner underneath the about me item here so now have a look on the real website if we just click here now on the real website you see home services about me and then we can see here is partners and if we click on these partners it will take us to gympad digital.com alright now you know how to work with these menu items now i will show you how to work with these social icons or social links so from top let's go back now go back one more time now from left bar here i'm searching for social media here is the social media let's now click here you see here are tons of social media names like facebook twitter instagram pinterest linkedin flickr you can name it there are a lot list so here the rule is very simple like whenever you will put your linkedin link inside of this field on that time the linkedin icon will be shown here like if i just put here a hash then you see here is a linkedin icon added newly so of course you shouldn't put just an empty hash link you should put here your real linkedin id link also here inside you should put your facebook page url here inside you should put your twitter handle url like this and if you don't wanna put your pinterest link or pinterest icon here then you just need to remove your pinterest link from inside the pinterest field so i'm removing it from here now have a look there is no pinterest icon at the top and not only with these top icons this social media also works with the bottom social media area like if we scroll to the footer of our website here you see we have also got the social media icons like facebook twitter instagram linkedin youtube these social media icons are also coming from the same place so right now you see there is no pinterest at the bottom but if i put here a pinterest link for example i'm putting just a hashtag to make a fake link now you see a pinterest link has been added here but you know i don't want that i'm showing you only to give you the example i'm removing the pinterest link now from bottom area pinterest social link also has been removed all right now the very last customization i want to show you how you can change this footer text so to do it from top let's go back now from here let's now scroll down and here here is our footer so let's click on folder and go inside general from here if we scroll down now scroll down more yep from here you can change all this text that we can see underneath on the main footer so first here instead of 2019 i wanna say 2022 and then it says designed and developed by pencil design so here instead of pencil design i wanted to say jim farhad digital and then i wanna link this jim for the digital text to my jimfah digital.com website so here instead of this link i'm removing this link from here and here i'm typing https colon forward slash forward slash gym digital.com so right now this bottom jim fahad digital.com is linked to my main website so when you are done with all these settings all of your footer settings all of this header setting when you are done with your logo with all the menu items with all the social media links then from top just click on this publish button to save all of these settings and by the way you can also check the responsiveness of your website from this theme customizer like here at the bottom you see this is the desktop icon this is the tablet icon and this is the mobile icon so from here if we click on this tablet device you can see the real view of your website how it's looking on tablet device so you see on the tablet device our website is looking perfectly great and then if we click on this mobile device icon so let's first start from top on the mobile device our website is looking perfectly fine everything is looking organized on mobile device all the sections the client reviews section everything is looking perfect here is the connect section everything is looking perfect on the mobile device then also from the top left if we click on this hamburger icon we can see the of canvas menu from here let's say if we click on the services then we can also see the mobile view of the services page everything is looking great on the mobile device i really like the responsive view of our website also let's go to another page for example i'm going to our blog page just have a look on mobile device our blog page is looking super clean there are tons of white space everything is looking 100 perfect also if we click on any single blog post so let's click on this blog post so this is the responsive view of the single blog post page everything is looking great all the social share here is the related blog posts and you see this is the sidebar so it went under the main blog post here everything is looking great on mobile device and again if we click on the logo it takes us to the home page of our website all right let's now go back to the desktop view and finally when you are happy with your work click on this top x to exit from this theme customizer alright so we are almost done with our website and here i just wanna show you last few things like at the beginning of this tutorial i promised i would show you how to make these packages functional let's say if you don't want to take the payments through your website then you can just make this button as a contact button i mean whenever anyone clicks on these buttons that will take them to the contact page and through your contact page they can manually contact with you so to do it we can just go inside elementor page builder from the top of this page just click on edit with elementor now from inside elementor page builder let's scroll down to the packaging not packaging the pricing section so here let's say if you just wanna make this button as a contact button so they can manually contact with you and then you can call i mean then you can contact them manually over phone or elsewhere on that case just click over it then from left side if we just scroll down here you see here is the button link so you can simply here can put your contact page url so from here you can just select the contact page but i don't wanna do that because i wanna make it completely functional i wanna make the transaction within this website so to enable that e-commerce functionality first we need to install some plugins so let's go back to our wordpress dashboard now from here let's hover over on plugins and then go to add new all right so let's close this top pop-up okay now the first plugin here i'm searching for that's who commerce here it is it's woocommerce by automatic let's now click on install now and then click on activate now here woocommerce is asking for some of our information so you need to put your address line here i'm putting the address here then here's the country select your country from here i'm selecting california united states then city i'm writing here testing and let's put your postal code here and then um i'm checking this because i don't wanna get all this email every day so let's deselect it and click on continue now here woocommerce want us to help me to create this woocommerce website but i don't need that so here i'm clicking on no thanks and then it says in which industry does the store operate and our website is under health and beauty so i'm selecting this one now click on continue now here it says what type of products will be listed so if you sell physical products like any cbd well or any health related product that's physical so you can touch it then you can select the physical product you can also select download products let's say if you sell ebooks or any online course then you can also select this one so i'm selecting downloads let's now click on continue now it says how many products do you plan to display so here you can put anything because it's nothing related to the functionality they are just taking this survey to improve their platform so here i'm taking 1 to 10 and currently selling elsewhere so if you sell outside of this website you can select yes on another platform but i'm selecting no now let's click on continue now they want to add some other plugins with it but i don't want that so i'm deselecting it and let's now click on continue and lastly it says choose a theme so right now you know our solated theme is activated so i'm clicking here continue with my active theme alright so we have successfully installed the woocommerce plugin let's close this pop-up here on the left you see under woocommerce we have home order customers coupon reports all these settings and here's the settings for products so if we want to create any new product we can add that product from this place i will add products shortly but before that i wanna do some woocommerce settings so from under woocommerce let's now click on settings so first here i'm under general tab okay let's close this popup now here if you want to change your address you can do that from here and all these default options are fine for me let's say here it says selling location sale to all countries but if you want to specify any region you can do that i'm keeping all the default settings here if you want you can also change the currency to any other currency but i'm keeping everything default let's now go under products tab from here i will also keep everything default but i just wanna check this option it says add to cart behavior i'm turning this option on it says reject to the card page after successful addition so let's check it then from bottom click on save changes and as our product would be digital product or downloadable products so we don't need any shipping settings so let's now go under accounts and privacy i will show you shortly how to set up payments but before that let's go under accounts and privacy settings so from here you can set everything as default but from here i'm selecting this option also let's select this option and this one now scroll down and click on save changes all right let's now set up the payment so go under payment tab by the way this elementor popup is really annoying because i have closed it multiple times but still it's coming again all right let's click on no thanks okay so by default we can see all these payment methods like direct bank transfer check payments cash on delivery as our product is not a physical product so of course we own to be using all of this option i want to enable credit card payment or paypal payment through this website so to enable people and credit card we need to install another plugin so to enable that from left let's hover over on plugins go to add a new this time i'm searching for woocommerce paypal so here this one woocommerce paypal payments i will be using this so let's now click on install now and then click on activate now to setup that people checkout we just again go to woocommerce over on it from there go to settings now go under the payments tab here you see two option has been added one is people and another is paypal card processing i'm turning on both of this so let's turn it on also let's turn this on so after turning on the people option it takes us to this settings page so here if you just want to test your transaction then you can enable this sandbox option but i wanna enable the real people here so you can do it just by clicking here on this button connect to people then you need to login via your email address and your paypal password actually you don't need to do anything manually that will automatically connect your people with this wordpress website but here i want to show you how you can do that manually so from here you see manual mode just click on toggle to manual credential input so first here you need to put your email address so this is the email address you are using for your people here i'm putting mine then you need to put your merchant id within this field so if you wonder how to get your paypal merchant id just login into your paypal account then from top right corner if you hover over on your name from there just click on account settings i'm opening it from a new tab then from this page on the left click on the business information now you can see your paypal merchant id here so i'm just copying it let's copy it from here now go inside our wordpress dashboard oops not here go inside wordpress dashboard and put the merchant id here then you need to put your client id so to get your client id again go inside paypal then from the main tab click on app center then if you scroll down or you can search it from here i'm here searching for api credentials so here it is let's click on api credentials now from here click on get started then here you will get your client id and the secret key so from here i'm first copying the client id go inside wordpress and paste the client id here now go inside paypal and let's copy this secret key from here go inside wordpress and paste the key here and then click here on this save changes button so our people setup is ready now from here under people checkout just select this option it says enable the people gateway i'm turning it on then again scroll down to the bottom go to the very bottom of this page and click on save changes so our woocommerce settings has been done now i want to add some products so to add products from left if we scroll down here you see products over on it and from there click on add new let's now add our first product and our first product would be let's now go inside elementor this would be our first product it's weight loss so let's just copy this name okay i cannot copy from inside here okay let's type here manually it's so weight loss and then if you want you can write the description of that product so as it would be a downloadable product because for example let's make it a downloadable ebook if so then just go inside the product so if they buy this package they will get this like custom mail then two zoom session and one a book all right let's now scroll down then here from right side if you want you can also add a product category so from here i'm adding a category to packages now click on add new category and then from right side for this product if you want you can add an image let's click on set product image now go to upload files click on select files now inside the products file i'm selecting this image now click on open then click on set product image okay now here is the main thing make sure it's a simple product so from here the simple product is selected and as this is not a physical product is it's a virtual product so select this virtual product and we will be providing them an ebook that's why i'm also selecting this downloadable option so here the regular price so this price would be 99 so here i'm putting 99 if you want to give them any discount you can put the sale price here but at this moment i don't want wanna give any sale price so the regular price is the main price then here you see it says download limit if they purchase it one time within their account they can download it as many as they want so let's keep this settings the default settings from here i will upload the downloadable files so just click on add file now from here i'm giving the file name to diet book then let's choose the file so i'm clicking here go to upload files click on select files now here i'm uploading this pdf ebook now click on open so here the pdf ebook has been uploaded now click on insert file url so they can only get access of this ebook after purchasing this product or this package and the other settings like this inventory settings we can keep everything default but if you want you can give it a unique sq number to remember it easily but i'm keeping everything default so go to general alright so when you are sure about the price all the ebooks then just scroll up a bit from here click on publish to publish this product so we have launched our first product then i wanna add some more products and instead of adding those products from scratch i just wanna copy this product and change some information like their name their price and the images so let's just copy this product first we can do that easily from here click on copy to a new draft i'm clicking here so here it says weight close copy but this product would be this happy life product so here i'm typing happy life let's keep everything same because on your real product you can change all of these informations but from here instead of this image let's select another image so i'm uploading a new image from here let's select happy life this product click on set product image now here this regular price it would be 129 so here i'm putting 129 dollar then if you want to sell another ebook you can just upload another ebook here within this file url but for now i'm keeping it all same so let's now scroll up click on publish and i wanna create another product so click here copy to a new draft and this product it would be the full services this product so go to edit product now here i'm writing full services and its price is 159 so from here i'm changing the price to 159 dollar also let's change the product image from here so upload another image i'm selecting this image perfect let's now scroll up and click on publish so right now if you want to see how many products we have added then from here if you hover over on products or here under products we can see all products now click on all products we can see here three products that we have just added one is full services another one is happy life and another one is weight loss all are them are in stock here is their prices here is their category and here is the publishing date cool now we will be adding this product within elementor page builder so first let's go inside elementor page builder because here first we need to do some customization because here it says per month but this is a downloadable ebook so here i just want to change this per month text so from here instead of per month i wanted to say one time fee then let's copy it i wanna apply this same text within all of these packages also with the third one here instead of per month i'm saying one time fee okay let's now go back to the first product this one here on this register now button i wanna put the link of the first product so to do it just scroll down here we need to put the button address i mean the product address and you know as this is not a regular shop website so you cannot just browse through all the products like all the hoodies shoes then select the product go to the cart page then the checkout page this is not a usual e-commerce website you just want to sell your specific packages or ebooks so here my goal is whenever anyone clicks on this register now button that will directly take them to the add to cart page and from that page they can go to the checkout page and pay them using their paypal or credit card so to make that happen here inside this button link we need to put a specific code or a specific url so to get the format we can go to jim fahad digital.com this pages url is already in the description so from under important links here you see it says link button to product card page so from here i'm copying this url pattern now go inside elementor now from inside this button link remove this hash first now i'm pasting the snippet here now have a look it starts with website dot com so of course this is a demo name because our website name is not website.com our website name is elementor dot com so i'm copying this whole https colon forward slash forward slash our limiter dot com not this wp admin or any extra thing just copy the main url of your website then here first remove the website dot com text and put your website url so it's your website name dot com forward slash then a question mark then add to cart equal product id so from here remove the product id and here you need to put the product id of this product so if we now go to the products from wordpress dashboard here you see this product is weight loss and if we hover over on the product name here we can see the product id is 330 so just copy this product id from here go inside elementor now from this link just remove this product id text and here paste the id code that's 30. now i'm just copying this whole link from here because i wanna now set the second price button link so click on this button now from left let's scroll down just remove this hashtag paste the same code here but instead of 330 the happy life product code is 333 so i'm just copying it go inside elementor then here instead of 330 i'm putting here 333 and with the third product from left layers scroll down remove the button link here our website name dot com forward slash question mark add to cart equal then it wouldn't be 333 it would be the code for the full services product it's 335 so just copy the code go inside elementor now here instead of 333 i'm pasting 335 all right let's now click on update button to save this page and now to preview the website click on this eyeball icon so this is the real view of our homepage let's now scroll down so here i'm going under the package pricing section let's say now i want to take this weight loss program you see the price is 99 and here is the register now button let's now click on register now it directly takes us to the card page and you see on the card the weight loss product has been added then if you wanna take this program multiple time maybe one is for yourself and another is for your wife maybe you can increase the number from here but here i wanna take one so i'm setting it to quantity one now from here you can click on proceed to checkout or you can directly pay via paypal from the card page as well but let's see if we click on proceed to checkout it takes us to the checkout page so from here your customers just need to put their first name last name all other informations and then from right side if they click on people they can pay through paypal or if they click here on debit or credit card they can also pay through their credit or debit card so it's now completely functional now let me show you another thing if we just go to our home page again because i want to save this section as a template so we can easily reuse this section on other pages because you know our services page also has this section so we don't need to do these things over and over again on all other pages so from here let's just select this inner section or we can select this whole section from here just right click here then click on save as template i'm naming it functional pricing then click on save so it's now saved as functional pricing okay if we now go back to our website and let's say if we go to the services page and here in this page we have this same section it says package pricing so click on edit with elementor then now scroll down first here i'm clicking on this plus icon then let's click on this folder icon go to my templates and here i'm importing the functional pricing just click on insert and click on no so here it's inserted successfully with the complete functional buttons and we don't need this section anymore so let's just delete this one and then to save it just click on this green update button all right so now you know how to create a complete health and fitness website by yourself you know how to make a complete blog and how to make a complete e-commerce functionality within your website so now just go ahead and make your website live today i believe this video has added some value into your life if you like it please give this video a big thumb up and don't forget to subscribe to this youtube channel also press on that notification bell icon to get notified before anyone whenever i will upload another valuable video like this on this youtube channel also don't forget to share this video with your friends i will see you on the next video for now bye bye

Channel: Jim Fahad Digital

Views: 2,173

Keywords: HEALTH & FITNESS website, Fitness Trainer Website, Nutritionist Website, Health Trainer Website, Fitness Coach Website, Health Coach Website, Health and Fitness coach website, personal trainer website, Gym Trainer website, Yoga Trainer Website, Health and fitness wordpress website, health and fitness elementor website, SoleDad Theme Tutorial, Soledad theme, Jim Fahad Digital, Wordpress 2022, Elementor 2022, Elementor Tutorial 2022, WordPress, Elementor, WordPress Elementor

Id: J5EU7QgVDY8

Length: 140min 2sec (8402 seconds)

Published: Mon Dec 13 2021