How to Make FREE DROP SERVICING Website with WordPress | Smartest Way to Make Money Online 2021

hey what's going on guys my name is jim fahad in this tutorial i will show you step by step how to make a drop servicing website i will show you everything from scratch using all free resources we will be doing everything just by drag and drop you don't need to know a single line of coding so whether you're a complete beginner or you have made a website before this tutorial is perfect for you you can make this website for yourself or for your clients like i said we will be creating a drop servicing website so first you need to understand what is drop servicing drop servicing is something similar like drop shipping but in drop servicing you don't need to work with any physical product let me make it more simple for you so first think about a service business if you are a logo designer then you can take logo design work from clients and you will get paid after providing them the logo with their requirements now think about drop servicing business in the drop servicing business you will take the work from the client but you will not do the work by yourself instead you will hire someone to do the work and pay them a portion of the payment that you get from the client let's say you managed a client for 100 to make a logo you take the work from the client and then hire someone for five dollar to make the logo so your clients pay you 100 and you pay your designer 5 and finally you make a straight 95 profit from each logo design so basically you are the middle man right now drop servicing business is more profitable than freelancing or dropshipping in this business format you don't need to become a guru or expert of any skill set like web design or logo design or book cover design because you are just managing the client and your designer or developer will do the work for you in this tutorial i will show you how to make a drop servicing website that will attract clients like a magnet also i will show you how to hire someone to do the work for you so i'm requesting you all to watch the video from the very beginning to the end now first let's have an overlook of what we're going to make in this tutorial so basically we will be creating this beautiful website in this tutorial and as you can see here this is a book design company website but instead of book design you can create any other niche or category website and you can choose the categories from fiverr.com so you can select any of the categories from here like here you can see graphics and design here is digital marketing and here we can see tons of subcategories under there here also you'll find writing and translation so you can create any drop servicing business within any of this category work here you will also find music and audio here is programming and tech so let's now have a look under the graphics and design category so from here you can take any category like logo design or brand style design or game art or album cover design or book design so i'm selecting the book design let's click on book design and if you wanna specify it more so let's click on book cover design now have a look here you can see there are tons of people who are willing to design any book cover only for five fifteen or ten dollars yep there are some people they will charge you 50 or above but they are not our concern you see there are so many people who are willing to design our book cover only for five dollar or for ten dollar and if we have a look on our website you see we are charging our clients 79 149 299 so the range is 79 to 299 dollar so basically from your website you can take the book covered design work from 79 to 299 and you can hire someone from fiverr.com who will do the work only for five to ten dollars so following this way you can literally create a great margin of profit and if you follow this tutorial step by step you don't need to do anything manually everything will go on autopilot let's now have a look how it will finally work so i will show you everything step by step how to create this beautiful logo by yourself for free how to create this nice header with this nice navigation menus i will show you how to create this beautiful image gallery and when you click on any image you will get this nice image carousel like this then i will show you how to create this section so here you can see it says why choose the book design pro company here you can change its name to your company name and you can change everything very easily all the icons all the titles all the paragraphs because we will be designing and creating our website using a free page builder tool that's called elementor page builder then also i will show you how to create these sections then we will create this section together so you see it says how does it work so actually in this way our website will work so our client can place their order then after checkout they will need to fill up the questionnaire and when we will get their order we will first submit the draft and when everything is done with their requirements then we will deliver them the final design now let's scroll down i will also show you how to create this nice testimonial section and finally i will also show you how to create this nice pricing table with all these buy now buttons so now if anyone choose this option the basic option and they click on buy now button that will take them directly to the card page so if they have any coupon they can apply that coupon from here and then they can click here on proceed to checkout i will show you everything how to create this card page and after clicking on proceed to checkout they will come to this checkout page so i will also show you how to create this beautiful checkout page so from here your client can pay you via their paypal or they can also pay you via their credit card or master card i will show you how to set up paypal how to set up stripe payment gateways and also they can create their account from here so very quickly i'm filling out this form to show you what happens after this checkout page so i'm filling out this form really quickly so i'm putting my name and address and everything all right i have filled out the whole firm and now i'm selecting the stripe so here i'm putting a test card then if we click here on pva stripe then that will take us to a questionnaire page so here the client need to put all the other required question as it will be a book cover design company so these questions are relevant to book cover design like what kind of book design they want if your business is about logo design then you can create the questions like what would be your logo colors what would be the logo ratio or if you have any inspiration you can put the reference logo links in the description so i will also show you how to create this kind of form or questionnaire so after checkout they will come into this form and they need to fill up this information so i'm just filling up it so here what's your publishing type i'm selecting the ebook and what should be portraying type that's emotion and also here client put any description like this and whenever they will click on submit now it says your form has been successfully submitted all right now have a look from your perspective so as you're the website owner so you can go inside your workplace dashboard so from your dashboard you can go inside woocommerce and you can check all the orders that you are getting from your website so you can see it like this jinfad ordered a book cover design from your website then you can click on that so you can check the client's name their email address their phone number and when you think you can do the work then you can just make the status to completed and click here on update so your client will get also email that your order has received or you will get your work done within the next week like that and also as the client has fill up the questionnaire or the questionnaire form so if you go inside the submissions and if you select the questionnaire from your dashboard then you can see what information the client has provided to you so all the questions you will see you can see all the answers of that client here so depending on all the informations that client has provided you can go to fiverr.com and depending on that requirement you can hire someone only for five to ten dollars and you see you are getting this order for seventy nine dollar to two hundred and ninety nine dollar and you are getting someone from fiverr.com who will do the work for five to ten dollars so in this way you can create a great margin of profit and i will be showing you everything in this easy 12 steps so first i will show you how to set up domain and web hosting and also i will provide you a 50 discount link then i will show you how to install wordpress how to install a free theme how to install a free page builder how to install other necessary plugins then i will show you how to install woocommerce and how to setup that how to add a product in woocommerce then i will show you how to design the whole website using the free page builder then i will show you how to create the logo for free and i will also show you how to create the navigation how to customize the theme how to create the questionnaire form and finally i will show you the final testing and you will find the timestamp in the description so you can jump into any specific part you need let's now start with the step number one which is how to get your domain name and web hosting and if you have your domain and web hosting already you can skip this part if not then follow along so first just click on the very first link in the description below this video or you can go to jim fahad the digital.com forward slash hosting and this will take you to a special discounted bluehost page so why bluehost in my opinion bluehost is the best web hosting provider i'm a web developer i tried so many other web hosting companies i don't want to mention their name but i personally ended up using bluehost hundreds of my clients using bluehost and they never complain about using it if you see my bluehost account i have hosted tons of websites here and i never get a downtime their customer support is really cooperative in case you need any help and their price is really affordable that's why i always recommend bluehost so now click on get started here you can see their different plans the main difference between them with the basic plan you can host only one domain you can take their plus or choice plus plan if you want to host unlimited domains also you can take their pro plan if you have millions of visitors on your website already i recommend starting with the basic plan then in future you can upgrade that anytime now let's select the basic plan now we will select our domain name if you already have a domain name that you want to use you can just go ahead here on the right but for now i'm gonna get a new one now here let's try for something like apple.com and click next it says the domainapple.com cannot be used on bluehost please try a different domain name it should be because we cannot take that because we all know that's apple's official website so we will be typing our own domain name here and also if you click on the right side you can see dot site.net.info websites i always recommend to take dot com websites because it looks more professional and legit so i'm gonna type here let's say our elementor dot com as we are going to make our website through elementor page builder and now click on next it says our elementor.com is available that's awesome and here we need to put our account information i'm putting mine here really fast only to not make you bored okay here you can see the business name field if you don't have a business just keep it blank or put your full name but here is the most important thing that's your email address make sure you put your correct email address because after completing purchase a receipt will be sent to that email address so make sure you put your best email address here all right now scroll down here's the package information and it's automatically set to 36 months and this is gonna be your cheapest plan so yes you're paying for 36 months up front but it comes out to only around three dollar ninety five cents a month so this is fifty percent off that's gonna be your biggest discount now what i recommend is to just do 12 months if you don't want to commit to the 36 months or 24 months it's still 33 saving and it's only around 5.95 a month and you also have your domain name for 12 months so no more additional cost for your domain for these 12 months and here you got package extras first here is the option for domain privacy having domain privacy is good and i always recommend having domain privacy so no one gets to know who is the owner of the website but for the sake of this tutorial i'm deselecting this one let's click on turn it off because i don't want to hide myself at this moment i want to be transparent so if anyone knows i own this website i have no problem you can keep this one checked if you want not a big deal i'm also deselecting all other options they are offering we actually don't need that they are just upselling their stuff all right now you can see the price is now only 71.40 for the full year including the domain that's awesome and i'm legally obligated to tell you that this is my affiliate link so i do get a little bit of commission off of this but it does save you a ton of money and it helps fund these free youtube tutorials what i'm doing so everybody wins i really appreciate it and here is the payment information i'm putting my credit card number here expiration date and cvv code then select this one here so that you are agreed to their terms and policy now click on submit it says your purchase was a success also you can see here is your receipt they will also send it to your email i'm also waiting to get that email meantime we can create our bluehost account so let's click on this create account button here here's the domain name that's automatically selected now let's create our password create a really strong password combining capital letters numbers special characters you know how to make a strong password and then retype the password in the second field now check this once again that you have agreed with their terms and policy now click on create account i already have received an email to confirm my purchase so i'm opening my email you will also get an email like this then click here verify your email it's very important so it's not verified awesome now let's login into our bluehost account with the domain name and password we have just created if you're logging in for the first time you may see a pop-up like this like it says let's create a website bluehost actually want to help you to make the website just click at the very bottom there i'm not creating a website because i will be showing you everything step by step and skip all of these pop-ups because we don't need any of that cool we have successfully registered our domain name and web hosting congratulations so far if you have any questions please let me know in the comment section i will try my best to help you personally so now we can move on to step number two which is to install wordpress and for some reason if you logged out then login again now from 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 any time so i'm putting a site name gym for production and site tagline it deserved to be seen now let's click on advanced here you need to put your email address your username and password for your wordpress so i'm putting my email address here wordpress admin username i want to name it jim fahad and here let's put a password do you want to see my password i'm clicking here on show so it's abc123 i will of course show you how you can change it later so for now click on next close this browser popup now it says where we want to install our wordpress so make sure you keep this directory blank and here is your domain name selected and bluehost here is suggesting some free plugins but we don't need that let's deselect this all now click next awesome it says wordpress installed successfully now you can copy 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 give this an easy password that's abc123 never ever use this kind of easy password i'm showing you shortly how you can change that password we can now sign into wordpress by clicking here but this is not the usual way because all the time you cannot 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 dash 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 all right so right now we are inside wordpress dashboard or wordpress admin panel and i will describe almost everything whatever you can see on this left like here you can see the post so from here you can post any blog post and then here you can see media here you can upload your own images or videos and here you can see the pages from there you can add new pages and here you can see comments from here you can check all the comments you get then here you can see appearance from there you can change the theme or menus also widgets and theme editor other options then here you can see plugins from here you can add new plugins or install plugins then from here users you can add new users or you can change a password from here and then here from settings you can change all the general settings writing reading permalinks all these i will show you all of these step by step but before that let's clean up our wordpress dashboard so first let's close these notifications by clicking on this x like this you can minimize this like this or you can do one more thing like from here above you can click here on screen options and you can just deselect it like this then deselect this all just by one by one now click here on screen options again also let's close this notification now it looks more cleaner but i wanna make our dashboard more cleaner so to do that from plugin let's go to install the plugins because these plugins came with wordpress default installation but i don't want any of them so first i'm just selecting all of these together by clicking here and from bulk action first click here on deactivate and click on apply and then select all the plugins again by clicking here now bulk action click on delete and then click on apply the pop-up browser says i'm sure or not yes i'm sure so click on ok so our all unnecessary plugins has been deleted also as i love to work in a clean environment so i also want to delete the unnecessary pages so from pages go to all pages and then select all the pages now from bulk action click on move to trash and click on apply i have deleted those pages but if we go inside trash we can still see the pages so this time let's select this all and from bulk action click on delete permanently then click on apply so all the pages now permanently deleted so if we now go back to dashboard it looks much cleaner now okay so now i wanna change the easy password that i have given at the beginning abc123 so to change that password from here users go here to profile now in this place you can keep all the default settings and to change password just let's scroll down at the very bottom here so now here under account management you can see the option new password so now just click here on set new password so from here you can change your password if you want you can keep this password that's wordpress is suggesting but for me it's hard to remember so for that reason i'm giving here a new password first click on hide and here i'm giving a new password it says week but for now i'm okay with it so i'm clicking here confirm use of weak password now at the very bottom click here on update profile now also do some basic settings from here so from settings let's now go under permalinks and then by default it's set to plain but i want to set it to post name and let's now click here on save changes then under settings let's now go here on general so here you can change the site title you remember we have given the site title to jim for production so now i'm changing it to book design pro and here tagline i'm writing here best book cover design company and now here wordpress address and site address you can keep the way it is but if you see here http instead of https then just make sure you put a s after http so always remember you need to keep it https to make your site super secure otherwise your customers won't be safe to put their credit card or people into your website so it's very important to make sure to keep it https also here on site address https before your website name all right now here you can put your administration email address so i'm keeping it and here this one is also important membership just click here anyone can register as our website will have woocommerce functionality if we don't keep this checked then no one can register during checkout so it's important to have this checked and then let's go to the very bottom and click here on save changes all right so we are almost done with our basic settings let's now change our website theme so to change our theme from appearance let's now go here on themes so these are the wordpress default themes that came with wordpress installation but first i want to make you understand what is a wordpress theme so first if we have look how our website is looking right now from the top left corner click here on visit site i'm opening it from a new tab so right now our website is looking like it as our theme is now 2021 is selected if we change our theme to any other theme like signature this one let's activate this one so now sinatra theme is activated if we now go to the front end of our website and refresh the page you see our informations are still the same but the look and feel of our website is now different so basically the theme is the look and feel of our website but instead of these themes i wanna select another theme so to get that let's click here on this add new theme big button and from here i'm searching for a theme named ocean wp this one let's now click here on install and then click on activate so now the oceanwp theme is activated if we now go back to our front end and refresh the page yup we can now see the difference clearly so right now oceanwp theme is activated alright and now i wanna delete other themes from our wordpress so to delete a theme click here on theme details and from right bottom corner click on delete okay also let's delete other themes really quickly also let's delete this one delete and click on ok so right now oceanwp theme is activated and here i have kept another theme as a backup it's always a good practice to keep a theme besides of your activated theme alright let's now install our page builder and you know i love the elementor page builder because it's free and it's awesome so to install elementor page builder you just need to go jim fahad digital.com i will put this pages link in the description so from that page if you just scroll down here you can see get elementor free version just click on that link and that will take you to the elementor's official website from that site you can just click here on this get started button or you can click here let's now click here on this get started button and if you landed on elementor's website for the first time it may ask you for some surveys but i just want to skip this so from top right corner click on skip again let's click on escape now it says do you have a wordpress website yes we have so right now click here on yes click on continue and here they are showing that different plants actually elementor pros are more special they have tons of features i personally use elementor's pro version so if you wanna use any of the pro version you can take that from here but for this specific website i just wanna use their free version so from here i just wanna install the free version click here on installer free and now here you can just put your website domain url name like our website domain name is our elementor.com so you can just copy the website url name from here and then go back you just paste the website url and then click on check for wordpress so in this way you can install elementor page builder but there is another way like here at the very bottom you can see alternatively if you prefer to install elementor manually you can download it here so i'm clicking here on this download link now the elementor page builder is started downloading here okay it's downloaded successfully so you can get that from your download folder now let's go back to wordpress dashboard and from left here from plugin let's now click here on add new now first let's close this notification bar so let's just close this and now from here you can see upload plugin option click there and i'm just dragging the download file we have just downloaded from elementor's website i'm just dragging it here and then click on install now it's uploaded successfully let's now click here on activate plugin all right so elementor page builder plugin has been installed successfully cool now i wanna install some more additional plugins so to install a new plugin from here plugins let's now click here on add new if you wonder what is a wordpress plugin wordpress plugin is something like extra applications or extra software like in default wordpress if you wanna create a e-commerce website there is no e-commerce option in the default wordpress so you need to install another plugin to enable the shop option into your website also if you wanna use instagram feed on your website for that there is another plugin available you need to install that plugin for that so each plugin has the different purpose so basically plugins are the extra app like things that will increase the functionality of your default wordpress website so here first the plugin i wanna install that's ocean extra as we are using wp theme with that ocean extra plugin adds some extra features so here i'm searching for that plugin that's ocean extra this one is the plugin let's now click here on install now and let's now click on activate to activate it so right now we have elementor and ocean extra plugins activated in our wordpress website and let's now close all these notifications so click on this x also let's close this notification and let's click here on skip setup now i wanna add another plugin that has the most important plugin of our website that's the woocommerce plugin so to add that let's now again click here on add new and here i'm searching for woocommerce this one is the plugin woocommerce by automatic you see there is 5 million plus active installation let's just click here on install now and now click on activate ok so we have successfully installed the woocommerce plugin now here we need to put some basic informations so here it's just asking about your business or which kind of shop you want to create using woocommerce just fill up this form with your own informations let's say if you're from united states put the information here i'm just putting here some information so here is address line one then here is the country that's united states and the state the california city here i want to put testing and postal code 92780 now click here on continue so here in the pop-up they just basically wants to help me but i don't want that so just click here on no thanks all right now in the next step it's asking in which industry does the store operate as we are going to create a service website so here is no option for services that's why i'm selecting the other option now in the description i'm putting service website now scroll down and click here on continue then it says what type of products will be listed so of course we will not sell physical products from deselecting it and as a final product we will be delivering them a logo or a book design so we can check the downloads option let's check it and now click here on continue now it says how many products do you plan to display so you can choose in between any of these if you want i'm selecting 1 to 10 and it says currently selling elsewhere so if you sell it outside of this website you can select that from here but i'm selecting no now click on continue and it's asking for installing some recommended options but i don't want that so i'm deselecting it from here and now click on continue now it's asking for choosing a theme we already have installed our free theme that's oceanwp so you can just click here on continue with my active theme or at the very bottom if you scroll down here you can see is keep these steps so i'm just clicking here on skip this step all right now we are back inside the dashboard so let's now just close this and now from the left under woocommerce you can see here home order customer coupons report settings status and extension also here you can see the products to add in new products you can click here on add new i will show everything later but at this point i want to show you another thing as we have installed the woocommerce plugin if we now go to pages to all pages you see after installing woocommerce plugin we have got these pages with woocommerce one is cart then check out my account and the shop page now let's do some basic settings with the woocommerce so let's hover over on woocommerce and from there let's go to settings okay so now we are inside woocommerce settings option and remember we're not setting up a complex product based e-commerce website so i'm just showing you what you need to customize to sell the services all right so first from under this general tab you need to put your address here and then put your cd here and your current state then the zip code now from here under general options selling locations if you wanna sell it to the all countries then you can keep it to sale to all countries then also if you want if you want to sell it on a specific country or if you wanna sell it without any country you can select that from here but i want to set it to sale to all countries and then here is the shipping location so by default it's shipped to all countries you sell to yup i want to keep this default settings also let's keep the default customers location to shop base address now here is the option for enable taxes so if you want to add taxes into your sales then you can enable this option i will show you later how to add tax classes in the next tab and then here enable coupons let's keep it enabled and here the currency options all defaults are fine so here you can see currency by default it's dollar but if you want to change it to any other currency like instead of united states dollar you can set it to other currencies like eastern caribbean dollar or cfranc then there are more currencies but i want to keep it as united states dollar all right let's now click here on save changes now let's go under this products tab so from under the products tab we need to check this one the add to cart behavior i want to select this one redirect to the cart page after successful addition because if we have a look on our demo website let's go at the very bottom at the pricing section so here after clicking on this buy now button we are directly going to the card page so basically to enable this option just after clicking on the buy button we will be redirecting to the cart page instantly to enable this option we need to check here on this redirect to the cart page after successful addition here all right now let's go to the very bottom and click on save changes now let's go under the text tab here so actually adding a text on woocommerce is very easy you just need to add a text class first so from here you see additional text classes so just go inside this field and after zero date just hit enter and i'm taking a new class i'm naming it a vat book cover and then from the very bottom click on save changes now at the top on text options you can see here new class has been added that that book cover rates let's now click here now from this place you can add new tax rates on the book covers so to add it just click here on this insert row button then you can select the country from here i'm selecting the united states that u.s so here united states and if you wanna specify more by the state or zip code you can put the state code or zip code here but i'm keeping all this blank and rate if you wanna put here tax rate 10 you can just type here 10 also you can give it a tax name i'm giving it that 10 and as it's not a physical product so i'm just deselecting the shipping option so if anyone from united states take your service they will have to pay 10 percent that additionally with the price also if you want to put a different tax rate for other countries people you can just click here on instead row let's say you wanna put a text date for canada so i'm selecting here canada and for canada let's say you want to set the tax rate to 15 percent so i'm typing here 15 and tax name vat 15 also let's deselect the shipping in this way you can make different tax rates for different countries all right now click here on save changes now let's go inside shipping as we are not selling any physical good or physical products so we don't need to do anything with this shipping field so let's now go under payments option so here inside payments i want to enable the paypal option and also the credit card acceptance option so for that credit card accept option i want to use the stripe payment gateway so i will show you both how to set up paypal and how to setup stripe but you can see here is another option says cash on delivery if it's a physical product then you could select the cash on delivery option but as our product is a virtual product or a service based product so we of course don't select the cash on delivery let's now have a look how to set up the paypal standard option so first let's click here to enable it now click here on save changes and to setup the paypal standard from right click here on manage so here first enable or disable just make sure it's enabled the enable paypal is standard then you could keep the title to paypal and in the description it says pay via people like if we go to the demo website and from here from the cart page if we now click on the proceed to checkout so here on the payment option you see is people and underneath it says pay via people you can pay with your credit card if you don't have a paypal account so basically this description text is coming from this place inside this description field and then here you need to put your paypal email address and then scroll down then inside the receiver email you can also put your paypal email address here and other rest things you can keep all default but here is the most important thing that's the api credentials so you need to put here your live api username live api password and live api signature so to get your api credential just log in into your paypal account and then from the top bar go inside tools and click on api credentials from here let's just scroll down and there you will find an option says in vp or sop api integration so just click there on manage api credentials so after clicking on manage api credentials you can see a page like this and there you will find the api username api password and api signature and then you need to click here on this show and this one and this one all these show buttons as these are my confidential informations that's why i'm not clicking on show on this screen so you just need to click here on show and copy that if username from here and paste that inside the ap username field and you can just copy the api password from here by clicking on this show and paste that inside the password also the similar way just copy the signature code from here click on the show and paste that signature code inside the live api signature here so i have put all the credentials of mine here let's now click here on save changes all right so right now the people is enabled now click here on the payments again because this time i wanna add the stripe payment gateway and to add this type payment gate we need to install a plugin first so for that from here plugins let's go to add new and from here i'm searching for commerce stripe so from here if you want you can install the woocommerce stripe payment gateway by woocommerce but i don't want to use that i'm searching for another one that's by way of toffee here it is this one is traffic gateway for woocommerce and it's by wave toffee it's a pretty good one so let's now click here on install now and now click on activate all right so it's activated successfully now i wanna close these notifications as well so let's close it okay so now again let's go to commerce and from there let's go inside the settings again go inside the payments tab and as we have installed the stripe here you will find the stripe payment option let's just enable it by clicking here now click on save changes now from the stripe payment on the very right click here on manage so here it's pretty simple to setup now here on the transaction mode if you wanna test it just click on the test mode but if you want to make it live from here you just select the live mode but for now i'm just selecting the test mode and then go inside your stripe dashboard then from the left click here on developers and click on api keys so here you can see the publishable key and the secret key so first i'm just copying the publishable key from here just click on click to copy now go inside the dashboard so inside the test publishable key i'm pasting the key here again go inside the dashboard office type and here is the secret key click here reveal the test key okay i'm confirming my password click on continue all right so this is the secret key let's copy it and go inside the dashboard and paste the test secret key here inside all right and just remember one thing we are testing this right now so here the transaction mode is test mode but whenever you wanna start the real transaction that time you need to go inside your stripe account and here you can see on the right it says viewing test data so on that time you just need to click here on this toggle bar so there instead of these test keys you will find the real live keys here so after testing you just need to go back on your wordpress dashboard and here instead of test mode from transaction mode you need to select the live mode and you need to put the live publishable key and live secret key here but i wanna use the test mode for now all right now scroll down keep everything default and click here on save changes now let's go inside accounts and privacy so here just keep it checked allow customers to log into an existing account during checkout keep it checked and also here this option allows customers to create an account during checkout yes keep it checked and this option allows customers to create an account on the my account page let's also keep it checked now scroll down scroll down click here on save changes so we are almost done with all the commerce settings lists now just go under advanced tab and just check the card page is selected to cart and the checkout page is selected to check out and the my account page is selected to my account so if everything is fine from the very bottom click here on save changes so like i said as we're not creating a complex woocommerce website that's why only these settings are fine for our woocommerce settings let's now add some product into our website so to add a product from left you can see here products from there click here on add new and in this website basically we will have three products because if we have a look on our demo website let's scroll down here we have basically these three packages one is basic another one is standard and another one is premium and their price is accordingly 79 149 and 299 so we need to add these three as three products so our first product name will be basic the second product name will be standard and our third product name will be premium so let's now add the product okay so let's now add our first product so our first product will be this one the basic one so here i'm putting the product name basic and then just go to the very bottom of this page here here inside the product short description i just wanna copy this text from here so these are all the basic products feature so let's now just paste this text inside here so actually these are the features they will get after having the basic packages like front cover design licensed stock image 3d mockup unlimited revisions two days delivery like this now from here under the product data is the simple product and click on here as it's a virtual product now under general you can set the regular price from here and as our first product price is 79 dollars so i'm putting here 79 and then if you want to set text from here you can set the tax status to taxable and then text class you can set that to that book cover that you have set on the woocommerce settings but for now i'm just setting the taxi status to none now let's go inside this inventory tab and from here i just want to keep everything in default only here sold individually i just wanna check it and now from the right side here product image click here on set product image now let's go under upload files click here on select files by the way if you want to follow along this whole tutorial and if you want to use the same images i'm using on this website then you can go inside gym for the digital.com i will put this website link in the description so from that page if you scroll down a bit here you'll find that download the images plus templates i use in this tutorial link just click there and after clicking on that link basically you will get all these files like all the images logos fab icon all these okay now let's go back now let's select the product image from here click on select files now let's select this image and click on open click on set product image and let's now go to the top right corner here categories let's click here on add new category so i want to set a new category and i want to name it packages click here on add new category all right so that's basically it let's now click here on publish let's now add our second product you can add that by easily clicking here on add new but there is another way like we can just copy this product and we can change the information so from the right side here you can see copy to a new draft i'm clicking here so this one it's not the basic it's the standard one so i'm writing here standard and its price would be 149 dollars so let's scroll down here if we scroll down more here product data general here the regular price i want to set it to 149 dollar also go inside its inventory and let's select the sold individual it's checked now let's scroll down here's the product short description so for this one the standard package i just want to copy this text so i'm just copying this text and pasting inside it here and the product image from the right side click here on remove product image because it's not the basic one is the standard one so click here on set product image again go under upload files click on select files let's select the standard one now click on open click on set product image and from the top right click here on publish similarly let's create our third product so click here copy to a new draft again so this product name i'm writing here premium and then scroll down here under inventory just make sure the sold individual is checked and under general tab the third product its price would be 299 so here general just set it to 299 and here the product short description i just want to copy it from the demo side here so the third products description i'm just copying it and let's now go back and pasting it inside here also let's change the product image first remove it and let's add the third product image upload files select files and here is the premium one click on open now click on set product image also from the right side make sure the packages category is selected now click here on publish okay so if we now go under products to all products click there now we can see here three product has been added successfully cool so almost basic settings are done now it's time to design the website so before designing our website we need to create our base page first so that would be basically our home page so let's first create that one so from pages let's now click here on add new now let's close this and first from the top right corner click on these three dots and let's deselect the full screen mode okay now we can see the left bar again now i wanna give the page title to home now from the top right corner click here on publish click on publish one more time now if we hover over on the left bar and click on visit site i'm opening it from a new tab let's now have a look we have created our home page but we cannot see it as our home page because right now we are at the main domain but we can see other page that's the block page why is that because we have not set this page as our home page so to set this page that we have just created as home we need to set that as our home page so to do that from left here let's go under style and then click here on reading now here you can see your home page displays from there click here is static page and home page let's select the home and now click here on save changes so if we now go back to our main domain name and refresh the page now instead of blog post page we can see the home page right now but this time we can also see the sidebar here on the right also we can see the title here but i don't want them in the home page so to enable them let's go back into the dashboard now go to pages now go to all pages and here is our home page click here on edit so first from here oceanwp settings under main you can see here content layout from there let's make it 100 full width and here is the sidebar i don't want that actually you don't need to disable it because as we have set the content with to 100 full width so there wouldn't be any sidebar on the right but let's now go here inside the title tab and from here display page title let's make it disable now from the top right corner click on update and if we now go to the front end and refresh the page cool so right now we don't have the sidebar on the right and we don't have the title anymore so here this is only the header and this black one this one is our footer now in between this header and footer we will be creating our beautiful website and we will be creating our website using the awesome elementor page builder so to do it from dashboard you see it's the home page from here let's click on edit with elementor button alright so we are now inside elementor page builder and like i said here at the top you can see this is our header and here in the bottom this is our footer and in between our header and footer here we will be creating our beautiful website now first let me familiarize you with the elementor page builder actually it's pretty easy basically everything you can see here on the left all these are elementor widgets like here you can see an image widget here you can see a heading widget here you can see a button widget here you can see a divider widget here you will find more widgets like some of these are pro widgets so if you wanna get all these widgets that's under this pro tab then you need to purchase the elementor pro version if you want to purchase that i will also put the elementor pros link in the description but for this specific website we don't need elementor pro so i'm just minimizing it you will find more options like image box icon box ratings icon list all these and let me show you how to use these elements very easily so whenever you want to use this button widget or button element you just need to drag it from this left side to the right side here now here you can see the button widget and first of all if you want to change the buttons text by default it says click here but if you want it to say get started then from left inside the text field you can type here get started then if you want to make this button linkable then you can put the link inside here like facebook.com or youtube.com if you put here youtube.com and then if someone clicks on this button that will redirect them to the youtube website or facebook website if you want to make this button alignment to the center you can center that by clicking here on the center also have a look here on the left here you will find three different tabs one is content and right now we are working under the content tab from here you can change the text the links the alignments the sizes like instead of small you can make it medium or you can make it large like this and if you want to do some styling with this button then you need to go under this style tab here so from here you can change the typography of these fonts so let's click on this pencil icon from here now instead of the roboto family you can set any other family fun family like here i'm searching for poppins let's select the poppins you see it's immediately the pop-ins font you can increase the font size by dragging it to the right you can decrease it by dragging it to the left you can set the font way to the very bold like this then from transform you can make it all uppercase or a lowercase or you can make it to capitalize then from style you can make it normal or you can set it to italic like this then if you want you can increase the line height by dragging this bar to the very right like this you can decrease it by dragging it to the left also you can play with the letter spacing just by dragging it to the right or you can decrease the letter spacing by dragging it to the left like this also now let's click on the outside from here you can see you can change the text color you can change the background color from here by default is this greenish color if you want to change it just click on this color picker then you can select any color from here for now i'm just setting it to the black like this now click on outside then let's say if you wanna add some radius or round corners then you can do it from here border radius i'm setting it to 30 pixel you see 30 pixel border radius has been added on this fourth corner and then you will have more options under this advanced tab so from here you can basically do the advanced thing like adding some margins adding some paddings i will show you that shortly during the creation of the whole page also you can add the z index css id css classes from here so now if you wanna add another element then you just need to click here on this nine dots or rubik's cube look alike icon just click over it then you will find all the elements again so from here if you wanna select another widget or element let's say if you wanna use the heading widget just drag this heading widget here if you wanna keep it above the button just drag this above the button and drop here so if you wanna change this text you can click over it and you can change the text over screen also you can change the text from this left field here so here i'm typing book design pro you can make its alignment to centered then if you go under style tab from here you know you can do all the stylings under this style tab so here text color you can set it to black like this then you can set the typography from here so instead of roboto also if you wanna set the fonts to pop ins you can select the poppins font you can increase the font size just by dragging it to the right you can change the font to weight from here let's make it very bold 900 like this now let's go under advanced tab so from here let's say if you want to add some space at the top and bottom on that case you can use this padding option so if you wanna add only the space at the top and bottom then first you need to unlink this so to unlink it click here and now on the top layers add 50 pixel of padding you see there is 50 pixel of padding has been added at the top and let's also add some padding at the bottom so add 50 so there is also 50 pixel of spacing at the bottom so basically in this way you can just drag any elements you want you can just drag this from the left to the right and you can do the advanced option like the margin padding stuff if you want to design it let's see if you wanna change its color or typography you can do that under this style tab and if you wanna change the basic content of that specific widget then you need to go under this content tab and you can change the text their alignment all these from under this content tab alright so also if you want to delete this element you just need to right click over this blue button here and click on delete so that heading is instantly gone also if you want to delete the button just right click over this blue button and click on delete so now basically i wanna design the website from scratch so first i wanna take a section so to take a section we need to click here on this red plus button and then you can select any structure from here like if you want to take a single column structure you can select it you can take two columns three column four column or any kind of structure from here so for the first section i want to select this single column structure and first i want to add some space at the top and bottom so for that let's click here on this six dots okay i got it click here okay so let's click on this six dot and from left let's go under advanced tab so first let's unbind the padding and on the top i wanna add 70 pixel of padding and on the bottom i wanna add 50 pixel of padding now let's click on this rubik's cube icon and first i wanna drag a heading widget inside this section here so the first heading text let's have a look on our demo website okay so from here let's go to the very top here is our first heading i'm just copying this text from here and let's now paste it inside here first let's make its alignment to centered and now let's do some styling so go under the style tab let's make its color to black and instead of making it pure black i'm putting here a color code that hash one one one now click outside and click on typography now let's click here on this pencil icon i want to set the font family to pop-ins click on pop-ins and font size i want to set it to 36 pixel and font weight let's set it to 700 and also line height let's make it 1.3 or 1.4 is fine so now underneath this title or heading i just wanna add a basic gallery let's have a look on the demo website so the gallery will look like this and underneath this gallery we will also have a nice button so let's now create that so again click here on these nine dots and here i'm searching for the basic gallery here is the basic gallery let's just drag it underneath the heading here now we need to select the gallery's images so to select the images from here click on this plus icon now let's go under upload files and click on select files so now i'm going inside the top section book covers let's select these six images actually not six it's five so let's select these five images together and click on open now let's click here on create a new gallery now from here if you want you can just order or reorder it the way you want and then click here on insert gallery so now here we can see all the gallery images or ebook images but first thing from the left here image size i wanna set it to full and columns i wanna set it to five so now in a single row there are five images now let's go under style tab and from here is spacing i want to set it to custom so the default 15 is fine and now i just want to add some spacing at the top and bottom so to do that let's go under the advanced tab and unbind the padding add the top layers at 20 pixel and at the bottom let's add 30 pixels of padding all right now i just wanna add a button here underneath so let's click here on this rubik's cube icon and drag the button widget underneath here so first instead of click here i want it to say order now and here on the link i wanna link it to hash then pricing i will describe it later but the main purpose is when anyone click on this order now button that will jumps to the bottom of this website because at the bottom of this page we will have our pricing table so whenever anyone clicks on this order now that will take them to that pricing table option or pricing table section i will show you that shortly but for now just remember i'm keeping here the link that hashtag then pricing now let's make the alignment to centered and also with this button i wanna add an icon so from here let's click here on this icon library and here i'm searching for a down icon so let's select this icon and click here on insert now add some icon facing from here so here icon is spacing let's set it to 10 okay now let's do some styling so go under style tab and here typography let's click on this pencil icon and fun family i wanna set it to poppins font size let's make it 18 pixel and the font weight let's make it 600 now click outside and here the text color the default white is fine but the background color i wanna change it so let's click on this color picker and i wanna make it a red or pinkish like color so that's hashtag then ff3f76 and i also wanna use this color on other places of this website so i wanna save this color so to save this color as a global color we need to click here on this plus icon click there and i wanna save it as pink now click here on create okay now i also want to add some border radius with the corners so from here border radius i'm adding 30 pixel of border radius and also let's add some padding from here so first let's unbind the link and on the left i want to add 16 pixel and the bottom oops not on the left on the top i wanna add 16 pixel and bottom list at 16 pixel on the right let's add 50 and on the left let's add 50 pixel as well our button looks really great now okay so we have created our first section let's now create our next section and let's first have a look how our second section will look like so we can have a look from our demo website so now let's scroll down so that will be our second section there will be one heading one paragraph and these three columns basically is the why choose the book design pro company section so it's basically the why us section and here you will provide the reasons why someone should hire you to make the design of their book cover because we are professional because we are affordable and our work is full of perfection all right now there's that section uh but before creating the section i just wanna change the color of this button because i gave it a pinkish color but now i want to set it to a blue like color so here the background color instead of this pink color i want to make it a blue color that hashtag 4960ef yup it looks good now okay so let's now create our second section and i don't wanna create our second section from scratch so first i just wanna copy this section that we have just made so to duplicate or copy a section just hover over on the six dots right click here and click on duplicate so the top section is now duplicated at the bottom here now the first thing i want to reduce the space at the top in this section so let's click here on these six dots and go under advanced tab so here the padding top instead of 70 i want to set it to 50 pixel and then here the heading instead of this heading i just wanna copy the heading from the demo site so that would be this heading i'm just copying this heading from here and let's just paste the heading inside here also i want to reduce the font size of this heading because this is our primary heading our main heading so it's a bit bigger but i want to reduce the font size of the secondary heading so let's go under style tab and from here let's select the typography so instead of 36 i want to set it to 32 pixel and also in this section we don't want this basic gallery so just right click here on this blue pencil icon and click on delete we also don't want this order now button so right click here and click on delete now underneath this heading i just wanna add a paragraph so for that i'm dragging a text editor here underneath this heading now let's go under the style tab i just wanna make it center align so alignment let's make it centered and the text color i wanna set it to hash 7777 so it's basically a gray-like color also let's do some typography from here so for the paragraph roboto font is fine the font size let's make it 15 pixel and font with default 400 is fine and also i wanna add some space on the left and right because if we have a look just click over it and go under the content tab if the paragraph text are more than this let's just increase the text like this you see they are taking lots of space on the left and right so i just wanna create some white space at the left and right so to do that let's add some padding go under advanced tab now unbind the padding so on the right let's add 30 pixel and left let's add 30 pixel of padding now it looks decent all right now click here on this rubik's cube icon again and now i want to take here an inner section so here's the intersection widget just drag it underneath this paragraph so by default inside this inner section we have two columns but i wanna create three columns so to create another column you can just right click over this column icon and click on duplicate so right now we have three columns here all right now click here on this rubik's cube icon again and here i'm searching for icon box widget here is the icon box widget or icon box element let's just drag it inside the column here so you can change this icon box icon from here you can change the title this title from this field and you can change this paragraph text from here okay so first let's change the icon of this icon box item click here on this icon and for the first one i'm searching for a word icon this one let's select it and click on insert and let's change this heading so here instead of this is the heading i'm typing here professional and let's keep the paragraph the way it is now let's do some styling go under the style tab and now let's select the color of this icon from here and you know you can select the color from this color picker like you can select any of color by dragging your mouse cursor within this color picker but also you may remember we have saved a color during creation of this button we have saved a pink color as pink on our global so to get that from here let's click here on this custom global icon and select the pink now let's open the content tab so the title color i want to set it to hash 3333 and let's do some typography with the title click here on this pencil icon now let's set the font family to pop-ins again then the font size to 28 pixel and the font-weight let's set it to 700. all right now before doing anything else with this icon boxes first i wanna change the background of this whole section so to do that let's click here on the six dots of this section now go under the style tab and click here on background type click here on this classic icon and color let's click on this color picker and let's set it to a off-white or we can give here the color code that's f9 f9 f9 so that's also white color but it's a bit of white color that separate the top white section to a bit of white looking section all right now let's again click here on this column icon now go these columns style tab here and then columns background type click on the classic icon again now select the color and i want to make the columns background color to white like this and then at the bottom here you will find the border option click here so i don't want to add any border i just want to use the box shadow option so just click here on this pencil icon and from here i just want to use some negative spread minus four is fine now also let's go under the advanced tab of this column so on this column i wanna add 20 pixel of margin all around with it also padding let's add 20 pixel of padding and also i want to add some border radius with it so again go back to the style tab now go under border and here border radius let's add 10 pixel of border radius now it looks really cool so now you can just copy this column couple more time here and here so let's do it just right click over this column icon here click on copy now let's go inside the middle column right click on this column icon and click on paste also let's select empty column right click here on this column icon and click on paste and let's now delete these empty columns so right click here click on delete also right click here on this empty column and click on delete cool so we have these three columns right now but i want to change these icons and text so here instead of professional i wanted to say devil and the last one i wanted to say perfection also now let's change its icon so for the affordable one i wanna set the icon to balanced this one and click on insert and for the perfection one let's select uh dice icon so here i'm searching for dice let's select this one and click on insert alright so we have created our second section perfectly and whatever we have done so far so our first section and the second section to save all this we need to click here on this green button says update if you don't click here on this update button you may lose all of the hard work you have just done all right now let's create our third section and in the third section i wanna add more book design example using the basic gallery so to do it again i just wanna duplicate this section so right click here and click on duplicate so the second section is duplicated here but in this section i want to make its background to white background so just click on the six dot and go under style tab here background color let's set it to pure white and in this section i don't want this paragraph right click here click on delete i don't also want this inner section so just click here on this x to delete it also here instead of this text i'm pasting some text from the dummy website and now underneath this heading i wanna add here a divider widget so let's click here on this six dots not six dots is nine dots all right so from here now let's drag this divider widget underneath this heading here so this dividers with i wanna set it to ten percent like this and the alignment let's set it to centered now let's go under the style tab so it's color i want to set that global pink color so let's select that pink and the width i want to set the weight to 3 and the gap lid select let's set it to 2 like this now click on the rubik's cube icon again and let's drag the basic gallery here underneath this divider so this time i want to add here 8 more images into two rows so to do that let's first click here on this plus icon and go under upload files click here on select files now from inside mid section book covers open it and i'm selecting all these images click here on open now click here on create a new gallery click on insert gallery now image size let's set it to full and columns yeah this time i wanna keep it four though the images are still loading but let's now go under the style tab and let them load first okay so the images have loaded now and from here under style tab spacing let's set it to custom and this time i wanna set the spacing to 30 like this and also i want to add some padding at the top and bottom so to do that let's go under the advanced tab and bind the padding and on the top let's add 20 pixel and bottom add 20 pixels now underneath these portfolios are portfolio book covers because i'm seeing these portfolios because people will order a book design from you depending on the portfolios or previous work of yours so if they convinced with the book covers you have put here so they of course want to hire you or they want to order you that's why it's always a good practice to keep the order now button in between of your website couple more times so here underneath these book cover designs i want to put here another button so from the top i just wanna copy this order now button so right click here click on copy and let's now scroll down and underneath this basic gallery i'm just right clicking here and click on paste so here's the order now button is again placed alright so we have done with our portfolio section as well let's now create our next section and let's now have a look how our next section will look like so let's go to the demo website now let's scroll down so our next section will look like this there will be an image or a book cover on the left and on the right here will be our steps so these are basically the steps are the procedure of our business all right let's now design this section on our real website here so again i just wanna copy this section right click here and click on duplicate so it's duplicated here and again in this section i don't want this basic gallery so right click here click on delete also i don't want this button right click here and click on delete and i want to change this sections background color to that f9 f9 f9 so i'm selecting this section go under style tab here is the color so from the color picker i'm setting it to hash f9 f9 f9 that off-white color and instead of this heading i'm just pasting here the heading from the demo website all right now underneath it i wanna take an inner section so click on this rubik's cube icon and drag an inner section underneath this divider here so inside the left column i wanna drag an image widget so i'm dragging this image widget here inside the left column now let's click here to choose an image so i wanna choose a book cover let's select this one and click on insert media and right now this image is looking huge so i wanna reduce its width to do it let's go under style tab and here you can see the max width i wanna set its max with 250 percent or let's make it 55 percent cool also i wanna set this images position always vertically centered so to do it let's click on this column icon and from here vertical align let's set it to middle i want to do it with also on the right column so let's click on the column icon of the right column here again let's make the vertical alignment to middle so basically if we set any columns vertical alignment to middle then no matter which columns elements height is bigger or smaller they will always remain centered vertically alright so now inside the right column i wanna take an icon box here so let's click on the rubik's cube icon and here i'm searching for icon box here is the icon box let's just drag it on the right column here now instead of this structure i wanna set the icon position to left this one so first let's change the icon i wanna change it to a plane icon so here i'm searching for a plane let's select this one now click on insert and the title i wanna set it to is tape one then place your order now let's do some styling so go under style tab first the icon color i wanna set it to that pink color so from the global color let's select the pink default spacing 15 is fine and now the size i wanna make the size to 30 or let's make it 35 also if you want to rotate it you can rotate it like this but i don't want that okay now let's expand the content option so the title color i wanna set that color to hash three three three three three three and the typography let's select the font family to pop ins then font size let's make it 22 pixel and font weight 600 is fine also the description text color i just want to set it to hash 777 777 like this now i just wanna duplicate this icon box couple more times so just right click here click on duplicate again right click here click on duplicate and one more time right click here and click on duplicate and now before changing all these content first i wanna change the background color of the column so let's select the left column here now let's go under style tab and the background type let's select the classic and change its background color to pure white then go under this border tab let's make the border radius to 10 pixel also let's add some box shadow we have done this already on the top sections so here is spread just to make it -4 and click outside let's now minimize the element options from left and have a look it looks now really nice but i think we need to add some spacing as well so let's expand it and now go under the advanced tab so first i just wanna add some spacing only at the bottom so i basically want to add some margin at the bottom so unbind the margin and let's add 20 pixel of margin at the bottom and now unbind the padding now let's link the padding because i want to add some padding all around the column so let's add 20 pixel of padding now i just wanna change all the text of these so here the second one it would be the step two and this one would be step three and this one would be step four i'm changing this really quickly and i'm coming back to you okay so i have changed all the steps text with the real texts so we are also done with our how does it work section let's now create our next section and let's have a look from our demo website so underneath this section this will be our next section that's the review section okay let's now create this section really quickly so for this section i don't want to copy this section let's scroll a bit top i want to copy this section so right click here and click on copy and then scroll down here underneath this how does it work i want to paste that section here so right click here and click on paste so it's our wire section so first thing i want to change is background color to white so click on the six dot and go under style tab now change its background color to pure white color and now here instead of this heading i want it to say what our customers say and now in between this heading and the paragraph i wanna paste the divider so from the top i'm just right clicking here over the divider and now click on copy now let's scroll down here underneath this heading in between these heading and paragraph i just want to paste that divider so i'm clicking here paste i have pasted it here but i cannot see it oops hit right here at this place no worries we can just drag it in between this place so i'm just dragging over it so let's just grab it on this blue pencil icon and drag it in between the heading and paragraph here all right and now here inside each column i wanna put the reviews of the past clients so first thing i wanna do i want to delete this icon box so just right click here and click on delete so here if you have a look inside the customer's testimonial there will be an image then their name then their title and some paragraph text actually this paragraph will be their real testimonials alright so let's make it so first let's click on this rubik's cube icon and drag an image widget here so first let's choose the image click here on choose image go under upload files click on select files so here from inside client headshots i'm selecting all because we will be needing them a bit later so let's select all and click on open so for the first client i'm selecting this one and let's now click here on insert media so by default its alignment is centered but i wanna just reduce its width so go under the style tab and let's set the maximum width to 45 percent now underneath that i just wanna take another heading widget here and here i'm just pasting his name let's make it alignment to centered now let's go under style tab the text color i wanna set it to hash 333 333 and then the typography let's set its font to pop ins and font size let's make it 24 pixel all right now we can just duplicate this text right click here and click here on duplicate now instead of his name again here i want it to write writer now let's go under this style tab let's set it color to that pink color from the global color and from typography let's make the font size to 20 pixel and font weight let's set it to 700 like this and now let's drag another text editor to add a paragraph underneath this heading and subheading so first let's go under style tab and let's make the alignment to centered so it would look like this and also let's make the text color to hash seven 777 and let's keep the typography default all right now we can do another thing we can just right click on the middle column and let's delete it and again just right click on the right column and click on delete to delete it and this time let's just right click on this existing column and click on duplicate again just click on this right column and click on duplicate now we have three client testimonials here if you want to keep only three client testimonial or reviews you can keep it like this but also if you wanna add three more testimonials then you can just right click over this inner section widget and click here on duplicate so the whole inner section has been duplicated at the bottom row now i wanna change all the clients headshots their name their title really quickly and i'm coming back to you okay i have changed all of their headshots their names and their titles so we are also done with the reviews or testimonials section and let's now create our very last and most important section that's our pricing section or our service section so let's now have a look from our demo website so if we scroll down from our demo website we can see here is our pricing table or services section so now let's create this section really fast so let's go to our real website and to create our pricing section i also wanna duplicate this section again right click here and click on duplicate so here the customer section is duplicated so first here in this section instead of what our customer says i wanted to say our services and then instead of this dummy paragraph i wanted to say we offer three packages to match your needs and also i wanna change the background color of this section so click on the six dots to go under style tab and from here background color let's set it to hash f9 f9 f9 that off-white color you know and now first i wanna delete the inner section so let's click on this x icon to delete it and now first inside the left column let's now delete the headshot also delete this heading now delete his title from here and let's also delete the paragraph from here so let's now have a look again on the demo website so first i wanna write here basic and then here is one line text that shows the service we will basically provide so that's the front cover design and then the price and then some of the features and then the buy now button okay so let's now create that very quickly so first let's click on the rubik's cube icon and drag a heading widget here so i want it to say basic let's make it alignment to centered go under style tab and let's make its color three three 2-333 and now let's do some typography from here let's set the fun family to pop ins and font size let's make it 28 pixel also font weight let's make it 700. now let's click on rubik's cube icon again drag another heading widget underneath the basic text and also let's make its alignment to centered go under style tab let's make the text color to hash 777 777 and now here is the typography option okay let's keep it roboto and the font size let's keep it 15 pixel and the font weight let's keep it 500 and the text itself i want it to say front cover design all right now underneath this i wanna take another heading widget so i'm just dragging another heading widget underneath the front cover design text here let's now set the alignment to centered and here i wanna type seventy nine dollar now let's go under this style tab let's select the color to that global pink color and now the typography i wanna set the fun family to pop ins and from size i want to make it really really big so let's keep it 65 pixel and font weight let's make it 700 also let's add some line height okay let's decrease a bit so 0.7 is fine and now underneath this i just wanna add those features so let's now click here on this six dots again and drag a text editor widget underneath the pricing or underneath the price and now i just wanna copy the features from the demo website so from here i'm just copying these texts and let's paste it inside here within this text editor now let's go under the style tab let's make the alignment to centered and text color i wanna set it to hash 777 777 and now let's click here on typography i just want to make the font size to 15 pixel and to make it bit bolder let's make the font weight to 500 like this now again just right click here and click on delete to delete the centered column and also let's delete it so right click here and click on delete to delete the right column all right and you know so to just duplicate it just right click here and click on duplicate and again just right click here and click on duplicate now here at the mid column instead of basic i wanted to say standard and on the right instead of basic i wanted to say premium and the standards price is 149 and the premiums price is 299 also let's change the feature text from the demo website so i'm just copying the text from here really quickly and let's just paste it with it also with the last one i'm just copying from the demo website the last features let's copy it and i'm just pasting it here all right so we have created our three different services or our three different pricing tables now we just wanna add the buttons within each of the services so we can just copy the button from above so let's just copy it right click here and click on copy and let's now scroll down now underneath this paragraph so here in this place right click here and click on paste also here on the mid column right click here and click on paste also on the right column right click here and click on paste now let's start with the basic plans button so if we now click on this button and now have a look on the button link is the hash pricing but first i want to remove it because if now anyone clicks on this order now button i want them to go to the cart page directly so first of all instead of order now i wanted to say buy now so i'm typing here buy now and also i wanna change this chevron down icon so from here icon i'm searching for a cart icon so let's select this one card plus icon and click on insert okay so first thing i wanna do the same with all these buttons so just right click here click on copy and then right click here and click on paste also right click here and click on paste and then let's delete the previous one so delete it and also let's delete this one all right now let's start with the left one the basic one now inside the link i wanted to link to the first product of our shop so if we now go back to our wordpress dashboard and from the left here you can see products from there if we go to all products so here we can see our three products one is basic another one is standard and another one is premium and if we have a look when you hover over on it you can see here it says id14 if we hover over on standard it says id17 if we hover over on a premium it says id 19 here so we need this id number to make our direct card pages so just remember our basic products id number is 14. all right now let's go inside the elementor page builder so here within this button now i wanna link it to that products card page so first thing you need to put here the website url so our website is our elementor.com so i'm just copying our website name from the browser url bar so here i'm pasting that's our website name then a forward slash then put a question mark then add to cart then equal the product id so the basic products id is here we can see it's 14 so here add to cart equal 14 now let's click here on this green update button and for the moment let's check it so to check it's working or not let's go to the front end of our website and let's now refresh the page all right everything is looking great already okay let's go to the very bottom section here if we now click here on this buy now button yep it's redirecting us to the card page of the basic product cool so it's working perfectly we will customize our cart page later but at this moment we can only understand that that buy now button is working perfectly and that took us to this card page instantly all right now i just wanna copy this link from here and now let's click here on this standards by now button and inside the link i'm just pasting the link and let's remember it again that would be basically our website name then a forward slash then a question mark and then add to cart equal the product id number so our standard product id number is 17 so i'm putting here 17 and also let's do the same with the premium product so let's click here on buy now inside the link just paste it and here instead of 14 our premium products id is 19 so i'm typing here 19. all right now let's click here on this green update button to save our work so we are almost done with the designing of our website but now i wanna check it how it's looking on other devices like on tablet device and mobile device so to check it from left bottom here you can see an icon it says responsive mode so first let's click here and now click on tablet so let's go to the top first so this is our website looking on the tablet device so firstly i think the top heading is looking a bit bigger on the tablet so i want to reduce that so first click here on this pencil icon of this heading now let's go under style tab here and click here on typography click on this pencil icon and now have a look here besides the size text here you can see a little tiny tablet icon so whatever font size we will give here that will only impact on tablet device our mobile device font size or our desktop device font size will remain same so whatever changes we are making that will only applicable on tablet device as long as we are seeing this tablet icon here so for the tablet device i'm setting the font size to let's make it a bit smaller maybe 26 pixel yep it looks perfect and then these looks decent and also i wanna reduce the font size of this secondary heading so now let's click over it and from under style tab let's set the typography so font size let's make its font size to 22 pixel or let's set it 24 pixel all right now let's scroll down and these three columns are not looking great so i want to do each of them with to 100 so i'm just clicking on this column icon now let's go under its layout and here also column width you can see here a tablet icon so whatever we will do that will only impact on the tablet device so here the column width i want to make is width to 100 on the tablet device also let's do the same with this one column width 100 percent also with this one let's make the column width to 100 percent now this looks perfect now let's scroll down also let's reduce the font size of this heading so here under style tab typography let's make it 24 pixel this gallery looks great on tablet device and here i wanna also reduce the font size of it so from under style tab here is the typography let's make it 24 pixel and here also i wanna make the left columns width to 100 so i'm making it 100 percent also the right column this one i want to make it to 100 percent so from under layout the column width i'm making it 100 percent but you know what i don't like this book cover image to take the whole width on the tablet device so i just wanna hide it on the tablet device also on mobile device so to hide it from the tablet device just select this column and go under the advanced tab now expand this responsive tab so as i want to hide this column from the tablet and mobile device so from here you see hide on tablet i'm selecting this one also hide on mobile device i'm selecting this one as well so on the real tablet or mobile device after this how does it work they are on to be shown this image so after this heading and this divider on the tablet and mobile device the this steps section or steps column will be shown all right now let's scroll down i want to also reduce the font size of this heading go on restyle tab typography let's make it 24 pixel like this and you know what i also wanna make them 100 percent so just right click here oops not right click just click over it and from the left column width let's make it 100 percent and now we can just duplicate it or we can just copy it so just right click here click on copy and now just right click over this column and click on paste style let's do the same with them all right click here click on paste style also with this one right click click on paste style scroll down right click and click on paste style also with the last one right click here and click on paste style everything is looking great now let's scroll down also let's reduce the font size so from android style tab let's make the typography let's make it 24 pixel also let's make them with to 100 percent so 100 percent also with this column let's make it 100 percent and the last pricing let's make it 100 as well so everything is now looking great on tablet device nothing is broken everything looks decent now let's go to the mobile device so from here let's click on this responsive mode and click on mobile now let's go to the very top first so on mobile device i just wanna reduce the font size of this heading a bit more so just click over it and now go under style tab and click on typography you see here now the little tiny mobile icon so whatever change we will make here that won't impact on the tablet or desktop view it will be only applicable on mobile device okay so on mobile device i wanna set a font size to 20 pixel like this and then everything is looking great if you scroll down it looks great but you may remember on desktop we have given some padding at the left and right so just click over this paragraph now unbind the padding so that is facing from the left and right is gone from mobile device now each of these cards looks great this heading all these portfolios looks great on mobile device also how does it work section looks great also on the customers review section i wanna get rid of the left and right spacing so go under advanced tab and unbind the padding it's gone now each of the clients testimony looks great on mobile device and here is our services are pricing each of them are looking great on mobile device all right now from the left click here on this green update button to save our work so our website is looking great on mobile device it's also looking great on tablet device and of course it's looking great on desktop device all right let's now customize our header so first i will show you how to create a logo for free and then i will show you how to create the navigation menu and then also i will show you how to customize the whole header in a efficient way all right so let's now create our logo first and to create our logo we will go to logomaker.com its logo maker without the e so it's logomaker.com let's now close this video tutorial now first from here if you want to use any icon you can search any icon from here as it's a book design company logo so here i'm searching for book and hit enter you will find tons of book icons here like if you want to use this one then you can just click over it now here you can drag this book icon you can make it bigger just by dragging its corner you can make it smaller just by dragging it inside also if you want to change its color you can change that from this color wheel like this but for this website's logo i don't wanna use any icon so i'm just removing this icon by clicking here on this delete icon on this logo i just wanna use the text so to use a text from left i'm selecting on this text icon and here i want it to say book design and similarly like the icon you can make it with decreased or you can make it bigger by dragging its corner like this then you can change its font from top so first you can select the type so by default it's simple and modern but if you wanna change it to fun and funky you can do that also if you wanna set it to other like handwriting so you will get this type of handwriting font but i wanna select it to simple and modern and also from the font family here i wanna select the passion one so here it is let's select this one and let's make it more bigger like this and i wanna make its color to that pink color we have used on our website so this color let's scroll down i wanna use this color so let's just take the color from elementor page builder i'm just copying this color from here let's now go back to logomaker.com so here inside i'm just pasting the color code so it's now that pink color and now i wanna take another text so here i'm again click here on this text and in this text i wanted to say pro now let's make this text a bit bigger like this or a bit more like this now let's place it at the above of design also i want to rotate this protest a bit so from here i'm just rotating it a bit right here like this also let's make its color to that pinkish color but i wanna make it a bit white so i'm dragging this color picker to the nearest of the white color like this you can barely see it right now alright to me it looks pretty decent and if you now want to make it cropped just from the right bottom corner click here on this crop icon now you can crop it like this from the top then from the right from the bottom and from the left now click on this check mark all right now i want to save it so from the top right corner click here on this save logo icon now the pop-up says if i want to get the very high resolution logo then i need to pay them 19 but as we want to use this logo only at our website header so we don't need a very high resolution logo so i'm just clicking here on no thanks download low resolution file so let's click here it's now downloaded you will find that inside your download folder all right now let's go back so we were inside elementor page builder and don't forget to click here on this update button to save everything what we have done all right now let's go back to our wordpress dashboard and from our wordpress dashboard let's now go to here on the left on appearance hover over on that and from there let's go here on customize okay so right now we are inside the theme customizer so from here i want to customize our header folder and other things so let's first have a look here here this is our header and at the top of our header we can also see a top bar here but i don't want this top bar so to remove it from the left you'll find here top bar let's click here now let's click here on general and here as we don't want this top bar so i'm disabling this one so right now we don't have this top bar at the top so let's now go back and go back one more time now before adding anything into the header i want to show you another thing at this moment i just wanna add the site icon or fab icon of our website basically the site icon or fab icon is the little tiny icon you can see at the top of the browser at this place so to add it from the left here let's click here on site identity and you know from here you can also change the site title you can change the site tagline from here and from here you can change the site icon so let's click here on select icon now let's click on upload files click on select files now inside the images folder you will find a little tiny fab icon so if you don't want to use this web icon just remember you always need to use the square size image for your fav icon so i'm selecting this image for now and click on open now click on select skip cropping here we go here you can see at the browser top this is our little tiny fab icon all right let's now go back and let's now go inside the header so first thing i wanna add the logo here so to add our logo from here let's click here on logo now let's click here on select logo go to upload files select files let's now select the logo that we have just created from the logomaker.com and now click on open now click on select and now click on skip cropping so here is our logo but it looks super big so i just wanna make its max width to 180 pixel like this and let's now go back now let's go inside the general option here so now the first thing i want to change the background color of this header so we can do that from here from the background color let's click on this color picker and here i wanna put the hashtag to one one one one one one now click outside also most probably you cannot see there is a little tiny border at the bottom of the header if you wanna change its color you can also change that from here so actually i don't want that border color in different so i wanna also make that color to hash one one one one one one like this now click outside all right now let's go back and this time i want to create our navigation menu so we can create our navigation menu from here within this menu option but i want to show you how to create a menu from wordpress dashboard instead of this place so for now let's click here on this publish button to save our work we will come back here within this customizer again but let's now create our navigation menu first from wordpress dashboard so for now let's just click here on this x to exit now from our wordpress dashboard from left click on appearance hover over on appearance and let's now click on menus so first i want to create a menu that will go on the right side so i'm naming it right menu now click here on create menu and within this menu i wanna create two menu items so from left let's click here on custom links the first link text should say our work and i want to make the url to hash work now click here on add to menu and the second menu the link text should say pricing and the url i'm setting it hashtag pricing so why is this hashtag okay if we have a look inside the elementor page builder so actually our menu will be placed in this place and let's say here we have a menu item says pricing so whenever we will click on this pricing item that will take us to the section of our website and that's why we have set here the url that's hash pricing and to make it work from our wordpress dashboard let's just select this whole section click on the six dots now go under advanced tab here we need to put the css id that's pricing so this is basically this url that hash pricing so inside the url we need to put hash then the pricing and here inside elementor page builder on the sections advanced tab we need to set the css id pricing without the hashtag also you may remember we have just created another navigation item that says our work and we have set that url to hash work and let's click on the six dots and let's go under its advanced tab so here the css id would be work as we have said they are the url as hash work so here inside the css id it's the work without the hash i hope it makes sense so from inside the elementor page builder click here on update to save it now let's go back to the wordpress dashboard where we were all right so we were creating our navigation items let's now click here on add to menu so inside the right menu we have two menu item one is our work another one is pricing and i wanna set the right menu as our main navigation menu and let's now click here on save menu and now i wanna create another menu so to create another menu let's click here on create a new menu and i wanna name it as a left menu so i'm typing here left menu and this time click here again on save menu so within the left menu i also wanna add some navigation items so again click here on custom links so the first link text i want to say it home and here url is hash home now click here add to menu then the second one link text should say why us and then the url i'm just giving it hashtag then why now click here on add to menu all right and this time i'm not selecting any menu because we can select that from our theme customizer you can see that shortly now just click here on the save menu button also as we have created here home and why us navigation items let's now go inside elementor page builder and i wanna name this top section id that hashtag home so click on the six dots and from under advanced tab here is the css id i'm just naming it home and then for the next section click on the six dots go under advanced tab here css id you remember on the menu we have given the url hash y so here i'm just typing why without the hashtag all right now click here on update button all alright now let's go back to our wordpress dashboard so we have created two menus one is left menu and another one is right menu so for now let's keep it like this and go back to our theme customizer so from under appearance let's now click here on customize now from inside the customizer let's click here on header and now first let's go inside the general and from here the heading style i wanna set it to center so right now we have the centered layout so here is our logo at the middle and on the right side we have got our right menu that we have set as our main menu but we cannot see the left menu anywhere we need to set that so to set that from left if we scroll down here we will find the option for left menu so on the left menu i wanna select the left menu we have created a few seconds ago so select it here you go here is our navigation menu on the left but we need to change its color because it is barely visible okay we will do that very shortly but before that here i also want to disable the border bottom so just uncheck it all right now let's go back go back one more time now let's go inside the typography so click here now let's go inside the body and here first from family i wanna set it to poppins so all the fonts there's are coming from the theme that will also becomes the poppins font also i wanna set the font weight to 500 or 600 now let's go back because now we want to change the color of the links let's go back all right now let's go inside the header again now let's go inside menu and now scroll down here you can see the link color click here i just want to make its color to white so you can see now the menu items colors are white now click outside also here at the very right after this cart image here you can see a search icon so i don't want that so from the left let's scroll down let's scroll down more here you can see the option for search icon so here you will find search icon style let's click here and i just wanna make it disabled alright so the search icon is gone let's now click here on this top publish button to save our work so we are almost done with our header just the last thing i wanna make our header to a sticky header but for that we need to install another plugin so i will show that a bit later but for now let's customize our footer so this is our footer to customize our footer let's now go back now go back one more time first from here let's go inside the footer widgets and first disable this one the footer widgets because you can see here a gray or black like space at the top of the footer so i don't want that first let's disable it now it's gone let's now go back now let's go inside the footer bottom so first here i want to increase the padding at the top and bottom so to do that here you can see padding so instead of 15 i want to set the top padding to 30 pixel and on the bottom i want to add a 30 pixel of padding like this and also if you want to change this text you can change that from here so you can see here copyright then oceanwp underscore date you don't need to change this text because this is the dynamic text for the current year but here after then instead of oceanwp you can change it to any other thing like all rights reserved by book design pro that's the company name so you can put your company name here all right so we have customized our footer as well and also we have done our header work also let's have a look if our buttons or navigation items are working or not so if we now click here on why us that jumps us to this why us section if we now click here on our work that jumps us to our work section and from the top if we click on pricing that jumps us to the pricing section that's really cool all right so everything is working perfectly let's now click here on this publish button and now let's click on this x to exit so now just the last thing i want to do with this header like i said i wanna make it as a sticky header so whenever we will scroll down that header will be sticked at the top in this place all the time so to do that we first need to install a plugin so let's go back to our wordpress dashboard now from the left here plugins let's go to add new now here i'm searching for sticky header so i want to use this plugin it says sdk menu sticky header so let's now click here on install now and now click here on activate so here the sticky menu on his scroll plugin has been activated so now after activating this plugin if we hover over on settings here you will find a new option says sticky menu now click over it so this pop-up is now asking for taking their pro plan but we don't need that so just click outside so here you just need to put the headers id to make it sticky so you can do that very easily just by inspecting it so if we go to the front end of our website and at this moment if we put our cursor at the header and right click on it and click on inspect then here we can see our header is inside the header tag so if we just write a header that should work but also if you want to make it more specified then you could write header hashtag site header so let's now close this and let's now go back to the plugin so if we now type here header then hash and then the id name that's site header so if you are using the oceanwp theme that will always be header hashtag then site dash header let's now scroll down and click on save changes if we now go back to the front end of our website and refresh the page let's now try to scroll down awesome so our header is now sticky at the top of the website all the time now i also wanna customize a bit of our card page and checkout page so to customize those pages first let's go to our cart page okay we can go to our card page just by clicking here click on buy now because we will be automatically redirected to our cart page the thing i want to focus here on this card page i wanna remove this sidebar from the card page so let's edit this card page so from the top click here on edit page so on the card page from here oceanwp settings here content layout instead of default i wanna set it to full width now let's click here on update so if we now view the page again cool it's now full width and if we now click on the proceed to checkout page proceed to checkout button we will be redirecting to the checkout page on our checkout page we can also see the right sidebar but i don't want the sidebar on the checkout page as well so let's again click here on this edit page so on the checkout page from the oceanwp settings from inside the main content layout let's set it to full width and click on update now let's click here on view page again to check our checkout page now our checkout page is looking perfectly fine there is no sidebar on the right side all right so we have almost done with the customization of our website now we just need to do some more funnel things like i said at the beginning of this tutorial whenever anyone fill out this checkout form and they will pass using their paypal or stripe after clicking on this proceed to people or this button pay by strive button they will redirect it to a questionnaire now i will show you how you can create that kind of questionnaire very very easily but before that i wanna do one more thing because we did a silly mistake that is inside the elementor page builder we have added some css ids like here on the top section if we click on these six dots and go under advanced tab here you can see the css id its home so there is no problem with these css ids but we need to change the url on the menu items so let's go back to our wordpress dashboard and let's go to our appearance from there let's click on menus so here is our left menu let's now expand the home menu item so here instead of just home before that we need to put our website url so our website is our elementor.com with the https so i'm copying it whole so here before that hashtag just paste your website url so basically it's your website name.com forward slash hash then the css id name so i'm doing it for all of the menu items let's now scroll down here is the why us menu item so here instead of just hash y put the website url name before that so the website name dot com forward slash hashtag y let's now click here on save menu and let's also select our right menu from here and click on select so also on the right menu on our work expand it so before hashtag i wanna paste our website url also the second one the pricing here before the hash i'm pasting our website url now click on save menu so if we now go to our checkout page and if we refresh the page now so now even from our checkout page if we click on this pricing or our work button on menu items let's now click on the pricing menu item it will take us to the home page and on the pricing section that's really cool all right now let's create our questionnaire form so to create our questionnaire form we need to install a plugin first so let's go back to our wordpress dashboard and let's now go to plugins to add new and here i'm searching for the ninja form plugin so this is the ninja firm's contact from plugin let's click here on install now and now click on activate all right our ninja forum plugin is activated successfully so we can see on the left here is the ninja forms new tab from there let's now click here on add new now let's click here not now okay so our goal is to make a questionnaire form so after making the checkout they can provide more informations what they want from us like yes they can order in between our three packages but using the questionnaire they can specify more like what kind of book design they want or there will be a description field so they can more thoroughly describe about their book design need all right let's now to create our questionnaire click here on this questionnaire so this is the questionnaire form so from here if you want to keep this first name last name and email field you can just keep it like this and also let's see if you don't want to keep this email confirmation field you can just hover over on this gear icon and you can delete it then let's have a look from the beginning so i want first name i want last name i want to grab their email address because using their email address we can understand this is the same user who have taken our packages so this email field is crucial so of course i will say in the page title that they need to use the same email address they are using on their woocommerce checkout so we can do that using elementor i'll show you that shortly that's just a simple notice at the above of that page all right i also don't want a gender identification so let's delete it also i don't want age so let's also delete it so here the question one i wanna edit it so just click over it and you will find the options on the right side so the question i should ask them as we are a book design company book cover design company so here i'm asking them what's your publishing type so then i can give them option like ebook and the second option let's say hard copy and i don't want any third options so i just wanna delete it click here on this x icon all right now let's also delete the question 2 from here so hover over on this gear icon and delete it then here is a radio button option so let's now edit it just click over it so here in the question 3 i'm asking them what should be put ring type so i could give them option one is emotion and another is theme if you're a book designer you understand that these two type is the major footring type of a book cover all right i also wanna delete the third option from here so they can select in between emotion or theme portraying type and then in this way if you wanna ask them more question you can add more question question four five six like this but i don't want this question force over it and delete it and in this field this is the description field so here instead of question 5 i want it to say please describe more thoroughly like this so now let's keep it like this and here's the submit text is fine all right so when you are done with the form the questionnaire form just click here on this write done button and then click on this publish button so it's now saved and now click here on this x to exit so here you can see this is the questionnaire form and here is shortcode we will be using this shortcode a bit later before that let's create the page for that questionnaire first so let's go to pages and click on add new and here the page title i want to name it project details and here main content layout let's make it full width also from the title let's disable the page title let's now click here on this publish button click on publish again all right now let's go back to our ninja firms to ninja forms dashboard so here is the questionnaire and here is its shortcode so i'm just copying the shortcode from here now let's go back to pages to all pages so here is our project detail page let's click here on edit now let's click here edit with elementor so here the first layers take a section with a single column now let's go under advanced and unbind the padding let's give it the padding in percentage so from the top five percent right 10 percent left in percent and from bottom five percent oops not fifty it's five all right so within this section first i wanna add a heading widget so here's the heading and let's make it centered also i wanted to say thanks for ordering now let's go under the style tab text color let's make its color to hash one one one one one one let's make its typography so set its font family to ins and font size let's make it 34 pixel and font weight let's make it 700 now just let's duplicate it and here i wanted to say please use the same email address you used on the check out page because underneath this text i will be pasting the ninja forms shortcut that questionnaire shortcode okay so let's now go under style tab and let's make the text color okay let's make its color to that global pink color and typography let's make the font size a bit smaller like this let's keep it 20 pixel and on advanced tab let's unbind the padding and i want to add only some bottom padding so on bottom i want to add 40 pixel of padding or let's make it 50 pixel all right so this is our heading as they will come into this page after their checkout page so here i wanna thank them so it says thanks for ordering and here i'm saying please use the same email address you used on the checkout page and underneath this text let's click now on this rubik's cube icon and here i'm searching for short code so let's now drag this shortcut widget underneath this heading here and here i'm pasting the shortcode that we have just copied from the ninja forms questionnaire short code so i'm pasting the shortcode here and now click here on apply so it's not loaded inside the elementor page builder for some reason but if we now save this page by clicking here on this update button and if we now preview the page by clicking here on this eyeball icon boom now we can see the form or the questionnaire perfectly so here's the first name last name field here is the email field here is the e-book publishing type so they can select what's the publishing type ebook or hard copy and they can select the footring type from here emotion or theme and also they can describe about their project mode thoroughly inside this description field and they can click on submit all right so now we just need to make it functional like whenever anyone check out i mean whenever anyone make their payment from our checkout page right after that they will come to this questionnaire page and to make that happen we need to install another plugin so let's now go back to our wordpress dashboard so now go to plugins to add new so here i'm searching for a plugin that says thanks redirect who commerce so this is the plugin thanks redirect for woocommerce and it's by someone his name is nitin prakash i have used this plugin before so it works perfectly let's now click here on install now and now click here on activate now let's click here allow and continue all right so here is the plugin thanks redirect for woocommerce is activated successfully let's now close this notification popup so now to redirect our user after the checkout page to that project details page let's now go to products to all products so here is the basic product let's now click on its edit i'm opening it from a new tab so we are now editing the basic product and here if you have a look after installing the thanks redirect plugin here you can see a new field has been added there's thank you url so we want to use the project details url here so the url is this page so i'm just copying this page url and let's now go inside edit product and let's paste the page url here so it's our website name dot com forward slash project details all right that's it and from the top right corner click on update to save it let's now do the same with other products so for the standard product let's open it so inside the standard package here is thank you url i'm pasting the project details page url here let's now click on update also let's do the same with the premium package so here are inside the thank you i'm pasting the project details page and from top click on update all right so we are done with everything with this drop servicing website let's now have a final test so from top left let's now go to visit site everything is looking perfect our design looks perfect and it's very practical now let's go to the pricing section so let's say i wanna take the basic plan so now click here on buy now so after clicking on buy now it takes us to the cart page directly so from there let's now click here on proceed to checkout so we are now on our checkout page so here i'm filling up the form so here i'm putting my information really quickly all right so i fill up all the informations and now here instead of people i want to use the test stripe so i'm selecting it and here i'm putting a test stripe number and you may remember when you wanna get rid of this test mode you can just go to your dashboard.stripe.com and just toggle that test mode to live mode so you will have the real card processing option here so as it's now the test mode enabled so here i'm putting a test card number here is the expiration date here is a test cvc code now let's click here on pva stripe so it's now loading all right so after the checkout we came into this project details page so let's now fill up the form so here i'm putting my first name that's gym last name and then here your clients can put their email address so here i'm putting mine so what's your publishing type that would be an ebook and what should be footprint type that would be emotion and then you can describe about the whole project so your client can write here anything about the project and then after clicking on submit boom that's done so it says your form has been successfully submitted all right so this was from the client's perspective now as a admin what you can see from the dashboard let's have a look on that so let's go to our wordpress dashboard so as the admin of our website if we now browse our dashboard and hover over on e-commerce we can see there is one order so let's now click on orders so here we can see this order is from jim fahad let's now click here to expand it so from here we can see the order details like here is the client's name his address his email address his phone number and here is the item so it's the basic package its price is 79 also we can see all the details here the payment status is succeeded so the client have used his visa card so when we will check everything is okay then from here status instead of processing let's select it to completed and we can select on update so after making it completed the client will get another email that your order has been received successfully you will get your order within the next week like that so here you can only understand that the client has ordered the basic plan but as you have the project details questionnaire so you now know more details about the client's need so to get that from here ninja firms hover over on that and go to submissions now from here select the form so that's the questionnaire form so here we can see one submission has added if we now click on edit we can see the details from here so you already knew that the client has ordered the basic plan and from the submission field you now know that the client's publishing type will be an e-book his portraying type will be emotion and you can read all the details from this description field so you don't need to email them back and forth everything is now on autopilot so you now know the details of their need so depending on this need you can just go to fiverr.com and then from under graphics design if your service is book cover design now click here on book design now if you want to make it more specific you can click here on book cover design so from here you will find loads of people like he it's not a he is a she so she will design your cover only for five dollar then she will design your book cover design only for 10 dollar his bit expensive so it's 50 dollars so i want to go with this guy but here is 15 it's also perfect for me but you see you can get a lot of freelancers only for five to ten dollars so you see here you have got the project order for 79 dollar this project is for 79 so you can get that from fiverr.com only for five to ten dollar so you can keep a great margin or great profit from that actually that's the reason nowadays drop shipping is becoming so much popular so now you know how to create a drop servicing website how to make it fully functional how to make this type of beautiful pricing tables how to make woocommerce functionality how to take the orders how to create the questionnaire and then finally how to hire other designer from fiverr.com so at this moment you know everything now if you wanna create your new carrier on drop servicing you have to take the decision for yourself so i wish you all the best and if you have any question feel free to ask that on the comment section i will reply back on each question personally and if you like it please give this video a big thumbs up and don't forget to subscribe this youtube channel because in this youtube channel i will upload more videos similar like this where you can learn how to make a website depending on a business and once again thank you so much for watching this whole tutorial i will see you on the next video for now bye bye

Channel: Jim Fahad Digital

Views: 8,194

Keywords: drop servicing, drop servicing for beginners, make money online, how to make drop servicing website, how to make dropservicing website, how to start dropservicing, how to start dropservicing with wordpress, drop servicing blueprint, drop servicing 2021, drop servicing challenge, jim fahad digital, drop servicing fiverr, drop servicing business, drop servicing website example, Dropservicing, dropservicing with wordpress, dropshipping, drop servicing course, drop servicing niches

Id: ULMuZUW5opQ

Length: 146min 8sec (8768 seconds)

Published: Thu Apr 22 2021