How to Design Courier Logistics Website with Live Tracking System with Free Theme and Elementor .

hello guys welcome to my channel this is where i teach you how to design professional website and i give you premium theme and plugins for free today i'm going to teach you how to design a courier or logistic website using free theme and elementor pro the website is going to look like this this is the home page the website is looking very professional this is the above page the services page this website has an online tracking functionality where buyers of this goes they can check and track their movement of their goods so put here the tracking number enter the tracking number and click on track results this is the information of the ghost and the owner can check the current location of his or her goose this is the contact page and this is the blog or the news page looking very professional so we can check the responsiveness of the website this is the mobile version and this is the tablet version and i'm going to give you all the resources that i have used including the templates for free so to get the resources for free go to the link in the description below and click on it so that you can download the files for free i'll open a new tab and paste the link over here and hit enter these are the files so download it save the files the file has been downloaded so i'll close this page so let us go and extract the file or unzip the file so this is the file that i have downloaded so i'm going to extract it here open the folder these are the files that i'm going to use so you could see elementor pro here the contact form images and the page templates i have given you all the templates the page templates so let's go to the elementor and extract it this is the elementor that we are going to use the free version and the pro okay so let's get to the back end of the website let me teach you how we are going to design this website so this is the back end of my website so the front end of my website will look like this but at the end of the video we'll turn it into something like this so the first thing we are going to do is to install a theme so a theme gives a feel and look to your website okay and the free theme we are going to use is called generate press to install a theme you must hover on appearance and click on themes click on add new and search for generate press click on install and activate we can delete this one so let us preview the appearance of our website now it is looking better so let's go back to the back end so the next thing we are going to do is to click on customize click on site identity we are going to upload our site icon so click on select site icon site icon is this small image upload the file you have downloaded open it and go to images you see site icon here click on select skip cropping so our site icon has been upload it click on publish go back click on layout and sidebar on the home page contact page services page about us page we don't need this sidebar we only decide on the blog page okay so i'll go to sidebar layout and choose new sidebar click on publish and go back to the dashboard the next thing we are going to do is to download our plugins so hit on plugins and click new or add new the first plugin we are going to download is classic editor i'm going to use this one to write my blog the second one i'm going to install is hide admin notices it is used to hide some nagging notification about updates so install now now type here elementary don't download this one okay so install elements kit elementor essential add-ons for elementor and we are going to download our tracking plugin called wp cargo don't activate them now we are going to upload our elementor plugin choose file first don't upload f profess upload the call this we call it elementor call upload it first please don't activate it go back by click on plugin installer and upload the pro element approve install now now click on install plugins we have an update for elementor call please don't update it i say don't update it okay so come here and activate hide advantages so that to hide the notification of this you can now pick all the plugins select activate and apply we are left with one plugin to install so click on add new and type here forminator install and activate you cannot refresh the page so let us go into elementor and do some settings so hover on elementor and click on settings make sure landing page is selected make sure template is selected and widgets is selected so select mark post pages landing pages templates and widgets you can choose elements kit items save changes go to advanced if this is disabled please enable it enable unfiltered uploads because we are going to upload our templates if this is disabled it will give you arrow try again okay so make sure it is enabled click on save changes click on dashboard so the next thing we are going to do is to create our pages so click on pages there is no page at the moment so click on add new so the first page we are going to create is home come to the template and choose elementor full with and publish add new about template full with publish add new services click on add new contacts template elementor full-width click on add new blog block i want the sidebar so i'll leave the defaults like this and click on publish so i can add one call track packages elementor full width so let's create our menu now so hover on appearance and click on menus so let's give name to our menu no one will see this name so i'm going to call it main menu click on create menu sometimes when you create a menu this will not come in automatically the pages will not come automatically you must click on all view select them or select all and add to menu then we'll come here but fortunately for me they have appeared here but i'm going to do away with this custom link home so this is my actual home page so view this and see what will happen here so i want to rearrange this i want the home page to come about services then i want this one to come here so let me go back to the dashboard menu so i want the home to confess followed by about page services page you can create a sub menu by dragging it to the right then i want the tracking to follow the services contact page and i want the block to be the last page select primary menu today to appear here click on save menu refresh the page let's get to the back end of my website over on settings click on general this is where you give the site title so i will describe it here the best courier company in ghana save changes hope on settings and click on reading select a static page the home page will be home and then the post page will be blog this is very important i am using this website for this video purposes so i discouraged this website from showing on search engine like google or bing or yahoo but if you know your website is live you want it to show on google or bing or yahoo please uncheck yeah it should be like this but for me i don't want it to appear on google so i will take it i'll discourage it from showing on search engine save changes hover on setting and click on permalink permalink is the structure of your url look at this it will give you this with dates and time i don't like it like that so select post name and click on save changes click on dashboard now refresh the page this is the header and this is the footer i don't like this header so i'll use an elementor pro to design the header in the footer okay i want it to look like this very nice like this and the photo should look like this so i'm going to use very clean like this so i'm going to use elementa pro to design my header and my footer but i have given you the template of the header and the footer so let's get to the back end go over on elementor templates and click on save templates click on add new and select header give a name to your header and click on create template you can choose among these elementor templates but i don't like it i want to show you how i design my so cancel it to import the template i have given you click here and click here select the file and choose responsive header so this is the header click on insert yes anytime i design a header i design it in three version you can see this version is for pc and these two hidden if i switch to the tablet version it will appear and then the pc version will be hidden and then the mobile versions also will be hidden when i switch to the mobile version the pc and the tablet will be hidden okay let me go back to the pc version so i'll teach you how i have done that the reason for me doing this is that i want the header to be very responsive okay on all devices so i'm going to style the pc version header so this is the pc version header this is the section you can see a blue border around it and in this section i have chosen two column in this first column i put here image elements and in this second column i put here nav menu to change your logo you click here and upload it so i'm going to work on the nav menu so click here so you can move it to the left and right the alignment so i'm going to style this on style the normal color i want it to be black so i think this one is okay the hover color i don't want green so i want this color this orange color i will use a chrome extension called calazilla to pick the color so for the hover color i'll paste s-code here and i'll save it as orange and the active color i want to use the same orange so i am done with the pc version okay if you like you can change the typography i use 18 pixels and the weight i use 500 pixels for transform i use upper keys okay to switch to the tablet version click on responsive mode choose a tablet this is the logo you can change it and click here this is called toggle button or hamburger so go to style and click on toggle button that line here is white it's called color is white and then the background i want it to be orange for hover color i want it to be the test to be still be white and then the background should be orange this is called drop down so click on drop down the test i want it to be white is okay the background want it to be black is okay the hover color i want it to be of the text to be orange and for the background to be transparent so i bring the transparency down for the active i want the test color to be orange and then the background color to be transparent i can see a gap between the header and then the drop down so i want to close it come to distance and decrease the number we are done with the tablet version let's go to the mobile version so click here and select mobile this one too you can change your logo click here the toggle button is gray we don't want it we want to change it to orange so select here and go to style go to toggle button and change the color the color this color is white and then the background we want it to be orange go to hover the color is white it's okay that this line here and then the background should be orange it's okay click on need the drop down to go to drop down the normal color for the background is black it's okay the text color is white is okay for hover i want the text color should be orange so when i hover on it it will change to orange and the background color want it to be transparent no color so i would drag it down and for active i want the text color should be orange and then the background color there's a small gap between the header and then the drop down scroll down and you see distance decrease the number and click here so let me switch to the pc version how did i hide these things so to hide these things you click on the section here for pc and go to advanced go to responsive and hide it from mobile and tablet then you move to tablet you pick the section here go to advanced responsive and hide it from i don't want it to show on i don't want to show on pc and mobile so you hide it from desktop and mobile then move to mobile pick the section go to advanced go to responsive and hide it from [Music] desktop and tablet so desktop and tablet click on publish but our condition is that we want this header to display on all pages okay you can set different condition but this is what we want now click on save can now view the header it's looking nice let us exit to the dashboard so click here and exit to dashboard we are now going to create our footer so click on save templates and click on add new choose footer name your footer and click on create templates we won't choose any elementor template cancel it we are going to import the footer that i have given you so click on this icon and click here select your file and choose your footer this is the footer name footer 2 insert this is our photo is looking good so let us style it so to start this footage because on this website you could see this orange border here okay so let's do that click on this test go to advanced and click on border this is the border this is the left side so i've given it eight pixels so the color here choose orange by the way my orange is wrongly spelled but don't mind me choose this and what we are going to do is that you copied the property and paste the style paste the style to change this text you just click in the text and write whatever you want here so we can link this home to our homepage by clicking here click on the home i use icon list here that's the element i have used so click here go to home to the link click here and write home so this is the home page so you choose it we are done with that you can give color to these icons but let me link this test to our about page first so come here to the link come here and write about the about page will automatically pop out you can select it okay so you can choose the icon over here so to style this icon go to style select icon and give it a color you can increase it or decrease it to change here come here and change your location put your location here for this you can change this one too it is designed by me so what i can do is that i can give this a link to my website which is called that's my website website glow ga.com that's the link i want to open in a new tab and i will update so you can check the responsiveness of this footer it is very responsive looking good so we are going to publish it the condition it should show on the entire side save it it's looking good so when you click on it it takes you to my website so i'm going to exit to the dashboard the next thing we are going to do to create a blog so to create a blog you go to the post and add new you can have category in tax so the first category i'm going to talk about is delivery so the news concerning delivery will come here leave the slack add you can add as many as you want then come to add new so give it a heading so a way to go to blog let me pick the title of the blog i need some tests so you write about the blog whatever you want to write pertaining the topic choose your category you can give some tax anything that describes or you think people can type in order to arrive at this blog set a featured image choose the image in an image at all you will see news choose it publish add new the last blog add new so i am using dummy tests this featured image is this so you must always set your featured image so i'm done with my blog see if i come here and refresh the page and click on blog you see that the blog is there perfect publish and refresh the page supposed to be three so the next thing we are going to do is to design our pages because when we click on the home page there's nothing on it there's nothing on it you have header and footer there's nobody so we are going to click on pages you go to the home page and click on edit edit with elementor creating website with elementor is very easy you just pick an element you drop it in a column then you style it you give it a padding on imagine you are good to go okay assuming i want to add an image first choose a section are made of section so this is one section to here this is another section so i choose a section with four columns so in that columns i put these elements again so if we come here i choose another section with two columns so here is empty and i put here then i choose here the and i put it three columns and i shift it i give it negative margin and it come here looking so this one to the same column and i duplicated and i changed the elements then here another section with two columns so i put this counter here in this test year so you could see that websites uh yes made of sections and in the section we have columns and in that columns we have elements okay let me show you how it works but i'm going to give you for these pages okay so we just upload the templates they will style them okay so go to home for demonstration purposes you can click a section so we have a section with one column a section with two columns a section with three columns so if i choose a section with one column it will be like this so this is this we have one column in this this one show a column so i can style this section by clicking here and you can stretch the section so that it it touches the side of the screen so straight the section but we don't want the content also to stretch to the side okay this content we don't want it to this we don't want to detach here so you choose box another thing we can do before you go to style style is that you give a color you change your text fonts and other things okay advance is to give spaces and some css and responsiveness okay and some motion effects so let's go to layouts now we can give a height a minimum height okay so you can use this slider to slide or you give it a vertical height hvh okay that will give you a full screen okay so what we can do is that to give the background color you can either give a color so let me delete it i can give it a gradient the location i will choose radial or linear and i can choose the angle so i'm going to play it you can use a slider you can give it a video background so for you can give a picture so i can so the settings i can do is center center and i will come here no repeats and i'll do cover put a test on these you come here and put a heading so you can let you can start a heading so you can write whatever you want you can add color here test color you can increase the font here you can increase the width you can position it to center center but we can't see the test very well so we can add come here we can add what we call background overlay to black so that it will show very well we can go to advance and add animation you can make it to be slow to see to reveal more elements click here you can add a button write whatever you want same targets you can add you can make it to be medium and style it give it a background color of these you can give a hoover animation and hover color it is very easy to create a website using elementor but for now i'm going to give you a template so let's delete this so click here and come here click here and go to templates and import home so insert home so it's going to insert all the design everything we don't want this title to come here so we are going to click on this gear icon in high title the page is still loading so we are going to style this but before i do that let me deal with this this pc so let me deal with it so i'll go back to edit come to the sidebar i forgot to choose elementor full with then come to here and choose no sidebar container new title and hit on save come here and refresh the page i have fixed that problem so i'm going to i'm going to insert the background image so the color here is taking the theme color so i'm going to change it to click on the button link here to contact page go to style and choose the text color to white and then here to orange over color to white the text color to white and background to black these discover montana to services style i don't want a color background color so i put it on transparent the text should be white the hoover color the background should be orange the text color should still be white update if you see that you can't read the text because of the background you can add overlay by increasing here save it let's move come here style color to orange so i'm going to copy this and paste out paste out pastel click here go to and the border color i want to give it orange here click inside here and i'm going to give the color to black text color to black copy and paste the style paste style here column go to border and change the color to orange here click here and go to style go to fill the color to orange copy it and piece star paste star paste style come here go to style border change the color to orange border change the color to orange this go to color text color white background color orange sieve let's check how it will look on tablets devices so what i did was that the hero section this is hero section ik three i created one for pc one for mobile and one for tablet so this is the table version so put in an image this is the image that we are using and i'm going to use overlay increase it so that the test can be red change here so [Music] whites the test should be white and the background should be it is very easy to to design websites using elementor very very easy so you can link them i will not do that link them yourself so hover color the text should be white and the background should be orange very easy here the color should be orange so copy and paste the properties everything is looking see so we are done with the home page now let us look take a look at it looking very great so let us work on the about page which is empty so i'm going to delete this go to pages click on all pages click on edit about full width come back sidebar we don't need a sidebar container we need full width updates edit with elementor so let's import the templates this is about us click on the icon here for the column so i give a a border line here so use the go to border and change it quickly the color to orange change this color to orange copy here and click on paste style based on this town in case of any mistake come here to history and reset okay so if you want to reset come to history here and go back this icon is used for navigation if you want to pick the section the first section you need to go here you pick section okay and this is our responsive mode and this is the preview if i want to see what is going on we can preview the title has come and for some reason the color here is gone so i'm going to go here go to about us i'm going to select this here and go to about us use a chrome extension calazilla to pick the color and come here pick the section and go to style color and paste the color and save it and write green copy and paste now this style pistol down i will be making a video on how to create everything from scratch okay this video if i'm not fast it will be lengthy the color should be number color these are the numbers so this i use a counter orange so i'm just going to paste copy piece copy paste copy paste here go back to style and the background orange we are done so let's look at the responsiveness of this it's looking good for mobile version it's looking perfect perfect but this about this title we must remove it so to remove that edit about us elemental fluids and click on updates refresh the page now it will go it is gone so we are done with about so you can delete it let's go to services page services speech new sidebar with edit with elementor let us import our templates services templates inserts yes still this thing is still not working so change that later come here and go to style go to color pick gui style test color black copy it paste paste style peace down change the button color you can link the colors to wherever you want it to copy pastel pistol we are done let's check it on all devices for tablet is looking good for mobile it's also looking good an insertion of these we are going to deal with services ready services that title you want to remove this title over here so elementor fully published and refresh the page and it is gone we are going the last page we are going to create we will jump there this tracking page and go to this page contact page so i'm going to cancel this click on all pages edit contacts no sidebar full width edit with elementor so we are going to import our contacts page the contact form will not come because we have not we have not configured it okay so let me just work on this copy style pay style we are done so i'm going to work on the contact form and come back by updates let's check it on tab button on mobile they are looking good this thing is still here and for tablets the color is not showing the background color is not showing so great update for mobile everything is working perfectly an exception of this contact form so let us go and create the contact form go to forminator forms i have given you of the file so go back to the file i've given to you open you see formulator contact form open it and copy the code come to the website and paste the kodi import so this is the phone i have created you can view it you can preview it this is a simple form that i have designed i will be doing tutorial on how to design this phone okay using free plugin so edit the phone come to email notification this is admin email this is the email the admin will be receiving messages from okay click on it under email you can give it a title this is the title of giving global logistics the company's name and when these people submit a message this is how to show recipients you add the admin email advance here this is where you put the those will be contacting you the email okay the message from name who will send this message so i write goose ones and then the code here this is the code for for people that will send message to me and if i reply to go to them this is for the the goose owners when i send message to them when i reply them this is what you see so it will go to their email it will go to their email in advance who will send them their email is me so this is it and my name will show you they will reply to my email update it so go back to forms and click here copy code go back to elementor what i'm going to do is that i'm going to use um a shortcode so write shortcode paste the code that we have just copied so this is the contact form check it on tablets it's looking good check it on phone it is looking good update it so so far so good we are done editing our pages i think we are done with about page with the services page with the contact page so this contact page has an issue let it solve it go to pages click on contacts and you see change here to full width and updates let me refresh the page it is gone the block page is automatic we don't have to do anything it's looking good so we are left with this page because there's nothing on it but before we design that let's go to the shipping plugin and do the settings so hover on cargo wp cargo and go to settings first go to general so these are few settings that we are going to go through type of shipping so you can right here if you want to add more you do comma and add you can add these are the countries you can add more by adding comma this is the career you complete the payment method or mode you can add a logo so click here to add your logo images logo wp cargo logo the size should be 190 pieces by 60 pieces this is the code that we want the tracking code should start with hot you should start with my global logistic and as you end with global global logistic company the color that we are going to use so i'm going to use the choose the company color but this one i'll decrease this tomorrow should be a bit dark and paste the code the his code here see so another thing we are going to do is clients email so this is the code that you are going to use when you are writing the email to them domain email so i can choose this you see the code that they are using this code so if you want to write a message like this you use the code you are using html so you see the paragraph sign in nc the tag they are using brick line brick so you can customize your message here click on save the client email setting you can rewrite your email wp website teacher gmo c go to admin email this is the code that we are going to use you don't have to change anything here multi package settings you can add anything that you want to add map so you can show the movement of the goose on map but i will now go through this how to get it api key i will not talk about this today so the next thing we are going to do is to create our agents and users let's create our agents click on users add new give it a name alright and who is this person is an an agent so the application of this is that you have a shipping company and you have people who who dispatch goose to bias okay so you can have motor riders who dispatch goose to or packages to buyers so you can create them you can give them these particulars so that they can you can assign goods to them so that you can track their movements okay so add new i can add another one our clients he can be an employee so [Music] so we are done you can create for agents okay so go back to now we are done with the settings here so so it will pick the setting automatically so let's go to let's test this go to before that click here and copy this code give it a font size of 18. put here global logistics company save changes okay now hover on ship and click on all shipments add shipment this is where you are going to add the information of the goose the owner and everything so let's test it the shipper is our company the phone number add any phone number the address the email the receiver add the number address the email the departure time picks anytime ghana the pickup time i'll pick any time but pick the right time please buy land quantity 4 twitter flight 4. reference number so the reference number is the tracking number so add the tracking number here career reference number is a tracking number origin ghana pick up dates you need let's see next month fit and then we are expecting it this month this so you can add the quantity of packet for the type is so maybe we are talking about 3d so i will say palace you can add category and tax the location of which is in let's see accra the status let's see in transit time here and i'm going to publish this is the webview you can send it to him the invoice we can download the invoice this is the invoice you can print it we completely send it to him this is our company's information shipper and then the receiver go back we are going to copy the code so go to yeah setting click on general setting and copy this code this is the code we are going to put on the this page so click on pages again let's edit track packages you have elemental food foods you can also paste the code here under test but i'll be using elementor to design the page a color with three i'm going to take a section with three columns and i'm going to give stretch the section and give i'll give imagine top of 70 pieces and then give bottom of 100 pieces go to layout and give it a height increase the beat i think this one is okay then give it a color of white come here search for short code put it here and paste the code click on update you can check this one on check it on tablet and on mobile so go here i think here is too small so i'm going to increase i'm going to decrease this column to 15 pixels and this one to 15 and i'm going to duplicate all two times and i'm going to hide this one from tablet and mobile and i'm going to hide this one from desktop and mobile and i'm going to hide the last one from this and this save shift to tablet mode i'm going to delete this column and i'm going to delete this column pick here and give imagine of not top right 20 and left 20 pieces on phone i'm going to delete this i'm going to delete this i'm going to give here to the right 10 into the left thing see refrain the pagano so let's try it go to wp cargo or go to shipment and copy this code place the code here and track it's working so let us now log out we are done with the development of this website so this is the website i have designed and i've given you the template for free you can get this template anywhere so i've given it for free so please if you see this video useful subscribe to my channel to receive my latest videos

Channel: WP Website Teacher

Views: 67,410

Keywords: Courier Website, Logistic Website, WordPress, Wordpress website, How to design a courier website, How to design a logistic website, How to design courier website using free theme and plugins, Logistic website templates, Courier website templates, free logistic website, free courier website, free logistic website templates, free courier website templates, Logistics, Logistics website, free logistics website, how to design free logistics website, design logistics website free

Id: dD7dCE8FNeM

Length: 96min 24sec (5784 seconds)

Published: Sat Mar 05 2022