Transcript for:
Creating a Dynamic School Website Guide

hello everyone welcome back to the Jason King Channel today I'm bringing you another tutorial on education showing you how to build a feature packed School website with school management capabilities and the best part is all of this is going to be for free using Wordpress and the school management plugin called WP School press so whether you're a school administrator or someone passionate about education or a teacher looking to expand your online reach this video is for you I'm going to walk you through the entire process step by step so you can have a professional and functional School website up and running in no time but before we dive in if you haven't already make sure to hit that subscribe button R the notification Bell so you never miss out on my latest tutorials and leave a like if this video helps you and let me take you to the website first things first so looking on it we have a top bar here with uh the school's phone number and then the school's um email and I Nam the school Jason school with a nice S logo then we have the page links or the menu whom about contact gallery and then the dashboard and the first block is basically an image as you can see our menu is transparent so the first block is an image with a heading a little bit of text and a button and then some three features on the you know the blog and then the second is like an about blog saying welcome to the school so heading um some dumy text a picture and then Mission Vision Focus so icon boxes right and then we have this blog with a paralax image or a fixed image at the back that means the image doesn't move when you are scrolling and we have some a title on it a divider some text and then two buttons and then over here we have um heading over here and some icon boxes which are seeing what they offer for your children so here we have what makes us different from others or heading and some image boxes with this cool images which I'm going to show you how to get in this video and over here we have a block which choose all or some of the teachers so Jason Ken so after this blog we have here which says call now to enoll your child then a button that links you to the contact page then here we have a heading and then some counters if I was to refresh the page right now you see that they move from zero to numbers where they are right now and you can change the text maybe from Happy parent or successful case to any other thing that's you to and then over here we have a gallery or some images and then we have our footer with our school name in some description a button some page links a map and then contact info so now let's go back to the next page which is the about page so over on the about page we have an image at the back and then we have this welcome to blog very similar to what we had on the homepage and then over here we have the cor how to en your child same to what we have on the homage then we have meet at team so this is maybe you can make this a principal Headmaster and maybe I don't know head mistress or something assistant head and then we have the same um image um box that we had on the homage so let's move over to the contact page and over on the contact act page um we have an image at the back with contact as written on it then we have a map and then a form some contact e a little appreciation speech for the teachers and then a footer if you want to learn how to build a contact form like this or a beautiful form which allows you to send and receive emails on website I have a video about that on my channel over here so don't forget to check that out and let's go back to it so this is the contact page and then let's go over to the gallery so over on the gallery page we have a image at the background with our Gallery then Gallery over here some dumy text and then categories for all classroom graduation so if I go to all it shows all the image classroom shows the images categorized under the classroom and graduation show the image categorized under the graduation and we have a contact as button so I'm going to show you how to create all of this in this video so over on the dashboard the dashboard is where um the whole school management thing starts so the school management plugin that will be using in this video is called the wp School press That's the plugin that I will be using so if you want to transform your school's online presence you can use the wp School press it's the ultimate solution for seamless School management within WordPress and it's a powerful plugin which empowers Educators administrators and institutions to create a dynamic and interactive digital learning environment over here teachers can log in parents can log in and students can even log in as well so um when teachers log there are some things that they will see or there are some things that when teachers log they see that when parents log they not see or when students log they not see some things that teachers can do that when parents Ling they can't do so for example let's say I'm a teacher if I log in I'll be able to update and delete student information add and update student marks send email notifications to all users update parent information add an update class event and manage subject attendance exams and classes if I was let's say maybe a parent and I logged in I'll be able to view a teacher's profile view some subject details view marks and attendance view class routines View School transportations View School events in calendars and send feedback message to the administration or to the teachers if I was a student and I logged in you can I can view a teacher profile I can view student marks and other you know comments I can view students class routine I can view school transportation and routes I can view calendar events I can send messages to teachers see overall performance of all of the students in class and manage my own profile so you can create different accounts for parent different account for teachers and um for the um children as well or the student as well you have to give them these informations maybe they using name and password to allow them to log you as the administrator when you log in you'll be able to control everything and do everything your um the things you can do on the management platform are Limitless as compared to the teacher students and parents which are limited so this is basically the website that we are going to be building today um before we get into the building don't forget to subscribe to the channel leave a like and comment and also share the video to your friends and without with any time let's get started so I always go through this in all the videos that I do whenever we come to start building a website there are some things that you're going to need one a computer two an internet connection three a domain um maybe your school name.com you going to need a hosting platform like hosting J blue host or side ground and after that you're also going to need a fresh WordPress installation so I forgot to mention this when I click dashboard right now it's going to take me over here where I can log in as the administrator and enter the wp School press or the school management dashboard I can if I was a parent I'll enter my details it will take me in a student enter my details take me in or a teacher same thing is going to happen so before we get to the building you guys don't forget to like share and subscribe um leave a like and also comment if the video helped you or if you have any other questions just comment below and let's get to the building okay so once you have WordPress freshly installed it's going to look something like like this on your screen so let um the first which I want us to do is I want us to clear everything that's over here so that to make everything look more clean and it won't look too confusing to you so to do that first things first click dismiss and then over here to clear these things click on screen options and then uncheck all of these boxes and then just bring it back so that the dashboard is going to look clear so let's let's make some settings go to settings and move to General and the first thing first is we we are going to change the side title so the side title is basically this here Jason school so the side title I'm just going to type in Jason school as you can see changes over here while we type so the tagline the tagline is what's beside um the Jason school education at its best so the tag line is what you see beside it so let me just type it in education at its best now let me scroll down um for the time zone choose your local time zone so I'm in Africa Ghana and Acra so I'll choose Acra and then over here the week start on Sunday so I'll save changes we are done with the general settings now go over to Pema links when we are PMA links change the custom structure to post name why are you doing this let's say um I go to all pages right and then let's say sample page I click I I view it in a new tab if I don't change the pink structure to post name this what's going to look like but when you change it to post post name is going to use the name that you gave the page to form the link so if I refresh right now it's going to be/ sample page so let me refresh hold on I didn't save changes let me save changes here now if I go back and refresh it's going to be SL sample page and that's how we want it so now that we have this set up go to appearance and go to teams let's get a team a team is what's going to decide how our website looks like and what's going to structure everything for our website to look beautiful so we have these two unnecessary things which we don't need so let's get rid of them I'll click on this one and click delete click okay that's how you delete a team just click on it click delete and click okay and automatically the team goes we are only going to leave one then over here click on add new team and the team we are going to be using in this video is bloody so let me just search for bloody over here and this is the team so I'll just click install and then once it's done I'll just click activate and now we have BL key installed so once um you install the blocky team they're going to bring you this message thanking you for installing it and they are going to ask you to install blocky companion and most teams have this they have this little companion that um you need to install once you install the team for example ocean WP has ocean extra and they allow you to use the team um more they allow you to you know make the team do what you want you know make it more flexible Etc so if I so let me click install BL companion and now it has installed and activated the BL companion for us so now now that we have our team let's go and get our plugins go to plugins click on install plugins and then select these two and we don't need them so I'm just going to click on B actions and then click on delete and then delete the plugins that's how you delete plugins on WordPress so here let me just click on add new plugin and let's install the plugins so if I go over here the first plugin which we are going to be installing is Elemental that's the page build that I will be using in this website here so let me just search for Elemental and this is a free version we are not using any pro features in this video so you don't have to worry I'll just click install now and then right by Elemental you're going to see premium addons for Elemental another plugin which will be using so just click install now then over here Elemental hi footer Builder we need that as well so I'll just click install now then over here elements SK Elemental addons we use that as well so just click install now and once we have this plugin sorted out let's get the next one we need met form to build our contact form and like I said before I have a full video stressing on that over here so if you're interested just check that video out so I'll just click install now to install met form and then that's basically it so let me move over to installed plugins and as you can see these are all the plugins that we are going to get from the WordPress repository that you know we need so let me just go to B actions click activate and then click apply and that's how we can activate all of them at go instead of activating them one by one so now we going to need some other plugins which are not on the we press repository they're not here we need to get them from the plugins website and to get the open a new tab and then the first plugin which you'll be getting is a security plugin called WP server so to get that plugin just go to wp.com I have a full video going through the WP security plugin why is the best settings you need to touch and not touch and everything about the plugin so if you're interested in that video and want to know more about it just move over to my channel Jason Kenya and then check out this video protect your website in minutes the best free plugin so this is it this is the video so over here once we at the wp server um website just click download and and then over here just click download the latest version of WP from my website or computer using this link so click on it and then just choose your install location so I'll save it to download and click save and as you can see WP server has just finished um installing onto our computer so let's go back to plugins and then click on add new plugin then click on upload plug-in then click choose file the reason why my WP you see to is because I already have it installed on my computer so I'll just click the plugin click open and then click install now and then once it's done I'll click activate plugin and now we have our security plugin ready to the last plugin which we need to get is the school management plugin which is WP School press and to get that plugin just go to a new tab and type in WP school press.com to WP school press.com and then HCK the enter key and then once the website loads up just click free download over here and they are going to need to type in your details so type in your first name last name email type in what you needed for whether it's School web agency student and then type in your WhatsApp number and then type in your country click submit and they are going to automatically let you download the plugin I've already done this and I already have the plugin installed on my machine so I'll just go back click add new plugin again and then I will click upload plugin click choose file then I'll go over to my um location for the plugin so this is a WP sco press 2.2.7 That's the latest version so here click install now and now click activate plugin and then now we have our WP School press plugin installed on our website as you can see showing dasboard messages students so many categories and I'm going to show you how to go through all of them in the next portion of this video so let's get to it all right so now let's go to the wp School press plugin just scroll down over here and then hover on WP scoop press and click on dashboard click on dashboard now this what it going to look like on the load tab you're going to see your user name you're going to see your dashboard and you're going to see the number of students teachers parents classes and then over here you know you're going to see the um the calendar right so we don't have any students we don't have any teachers any parents or classes or anything like that so as you can see it's showing 0 0 so the first I want us to do is let's go to general settings and go to settings and then over here you can enter the name of your school in the wp School PR School management so let's say you have a logo logo for your school you can you can put that over here so let me just change the school name to Jason school and I'm going to enter any random numbers that I came up with and then let's say the school's email address I'll do info@ Jason school.com and you can enter your address the school's address so here is it's in Ghana TMA let's say community 5 something like this then the city Tim State great arra country country select the country that you in so I'm going to select Ghana cuz that's where I am right now so I I select Ghana over here this is not necessary but if you have you can enter a max type you can leave that as number here you can enter your day format and if you have a website for your school which you clearly do cuz you can't store it without that just copy your website link and then paste it over here and then this is basically how you set up so set up the you know WP School press that's the first step changing the data for your school SMS is a premium addon which is also a notification feature I'm going to show you more about it in just a second and licing is also about more premium addons that you can buy so now let's go back to the dashboard now the first thing that we are going to do is we have to create a class so hover on classes and click on classes here and then here just click create new and then the class name you're going to name it let's say grade one Michael the class number will make it um let's say 15 maybe it's a 15th class when you're Accounting in the school class capacity can take let's say 40 student select teacher we've not created Any teacher yet so we can't add any teacher um in charge of the grade one micro class right now so the class is starting on let's say maybe the um the whole time begins on December 4th so let's say December 4th right and the class ends on let's say maybe January 17th so you can select the date that you know you have and let's say the class location say it's on the first floor the second floor so I can make mine first floor something like this and then the Class Type we don't have any class fees because it's a school so it's free you know the fee will be the school fees and that's paid you know with other means so you just click submit and as you can see we have created our first class so we have it here good one Michael if you wanted to create another class just click create new and go to the same steps so the next thing which you're going to create is a teacher click on teachers then click on create new over here and then over here we are going to change the genda to whatever teacher that entering so let's say I'm entering a female teacher so click female and for the first name enter any name she has a middle name enter as well or a last name enter as well so she has a first name and a last name and then you can enter the date of here so let's say she was born in 1985 I'll click this click on the year and click on this to move yeah I'll find 1985 let's say she was born on June 6th right and you can select the blood group that they have so in this case it's just a dummy teacher so I'll just select anyone and the qualification let's say master's degree right teacher over here so so now let's go back to classes real quick go to classes and now that we've created a teacher we can put her in charge of this class so if I click um that green pencil edit right now the class teacher over here select teacher I can select do as a qu and click update and as you can see we have a teacher handling you know this class so if I go back to teachers I forgot to show you how to add an image for the teacher so let me see let me click on the edit button then over here if I click this I can just choose maybe any image for the teacher so let's say this woman right so I'll select and click open hold on let me let me use this one rather as you can see we've gotten the image in so I'll just click update and now we have our teachers profile ready so now that we are done creating a teacher we should create a student next so move over to students and then here click create new and when you at the student section let's say it's a m right so the student first name is Jason the last name is King I'll use my name and let's see the birth day so let me select the year so 2008 November and then 20th and then blood group let me select any blood group and then and then curent now here you can create parents over here or why are creating the student you can also create their appearent at the bottom right so let's say the parents we using the father so first name um last name this name and if they have a middle name you can enter that as well let's see the username remember this also very important cuz when the parents wants to log in this is the username and password that they use whenever you type it make sure to send it to the parent or to remember it for them so let me just type in a random password for him and then let me just confirm the password select any blood group if you have or it's not actually compulsory so now let's add the email address the phone number the education and then the profession and then you can add an image for the student in case you want to change that so let's say this is the student um and then let's add in one for the parent as well hold on let me go and find um an image for the okay school so let's say this the parents the the pictures kind of take a while to load so you don't have to worry about that let's add the parents um let's say this one so I'll click open and it's going to add very soon so now that we are done with the um parent and then the student you have to come over here to the account information over here is where you create um as you can see we already did the username and password for the parent but we must also do it for the students because like I said students can also log in the joining date let's say let's say this student join somewhere 2009 so let's say 2009 in July 9th somewhere and then let's say he's in grade one Michael so once you've created many students and you've created the classes as well at the school details you can select their class so let's say he in grade one Michael right and the room number let's see give a ROM number like 731 so here I'll click submit and as you can see we've successfully created our first student so after the have been created the next thing we should create is subjects right so to create hold on this not important so to create subject click on classes and then click on subjects and then to create a new subject just click create new and then select the class so grade one Michael right and then the subject name the first one will be mathematics and the subject code will be Mark and we can make the teacher so if you have different subject teachers or lesson teachers and youve created them you can choose different subjects for all of these you know different subject teachers for all of these subjects so let's say the um the textbook or the book name will be math mathematics textbook so the subject name let's say geography the second one so subject code will be go let's select the same teacher and then geography textbook and then let's say the thir subject should be French so the subject code will be F select the teacher and then maybe friend textbook the four subjects can be Computing Maybe Computing and then the subject code will be ICT so teacher the same teacher and then the book name maybe you can make it Computing textbook I hope you getting what we are doing here hold on sorry Computing and then the last subjects can be maybe social studies or citizenship and then the subject code will be SS o and then the teacher we can select the same teacher and then the book name will be social studies text book all right so now that that's done we can go over here and then click submit but because of the Tim table that we are going to be creating in this video we need to add one more subject so I'll just click create new to add the last one so let's add in the last subject select class and then the last subject will be maybe um let's see English so English subject code will be e NG and then the teacher will be the same teacher that I've been using all this while so and then the book name will be let's say English textbook right so I'll just type in textbook then I'll scroll down and then click submit and as you can see data save successfully so we have created the last subject that we need so now that we've created our subject you will think that okay now we need a time table to group all these subjects right to do that we have to create working hours to go to General set and go to working hours and I'm going to be creating the working hours based on how it was like on my scho to the class hour let's say subject one the first subject is from let's let's see the first subject will be from um 8 so 8:00 is when the lesson begins and then let's say the lesson ends at um 9 so we are going to set this to 9 and then set this to 0 0 and set it to teaching and then click add R so that's for the first subject so now let's create another subject called subject two class our name subject two right we are going to make it start from this time um the S subject in my school started from 9 to 10 I think so we going to make this 10:00 and make it teaching and then click on ADD R then we had our first break which was called our snack break so I'm going to name this snack break and then that was from 10:00 to 1020 and then it ended sorry that was from 10:00 let me make this to 10:00 10:00 to 10:20 so 10 um 20 then I'll make the type break then I'll click add R so now we have our snack break right so now the we had another after snack break that'll be subject um let's make it subject three and that will be from um um 10:20 to 11:20 so from 10:20 20 to 11 20 sorry and that was a teaching um are so the next subject will be subject 4 right so subject 4 and that will be from 11:20 to 1220 so set this to 1120 then we are going to make um the 2 1220 so let me set it to 12 um 20 and that was also for for teaching so now that we have the subject 4 we had another break after our first subject called the lunch break so I'm going to type in lunch break here and that was from 1220 to 1:00 so 1220 to 1:00 let me set that to 13 0 so to 1:00 and that so I'm going to set this to break that was our lunch break then we had two more subject before we close we will make the next subject subject 5 and then that was from 1:00 to um 2 that was from 1:00 to 2 so I set this to two that's 14 0 0 and that was our fifth subject now come to add in our last subject which was subject um six subject six right so that was from 2 to I think three so I'm going to set this to 14 and and set this to 0 0 and then set this to 15 sorry 15 and then set this to 0 0 and then click add add so now as you can see we have been able to add in all of the subject and all of the break times so as you can see it's eight out of eight entries so you need to keep the number of everything all the subjects plus the breaks we have six subjects and then two breaks making eight so you have to keep that number in your head so once once you've created a working hours then you can now create a Tim table so let me show you how to do that click classes and click timetable and then over on timable just click on create new and then select a class so I'll choose a grade one Mel and new template we are going to um make the number of sessions eight that's the number I wanted you to keep in your head you're going to make it eight now the session One 8 to 9 is all right session 2 9 to 10 session 3 10 to 1020 session 4 10 20 to 112 Session 5 112 12 20 session 6 1222 1 um session 7 1 to 2 Session 8 2 to 3 that's how we want it so now as you can see a cool Tim table has now been structured for us to just drag in a subject inside so you can shuffle them anyhow you like let's say um let me put all the subjects here hold on sorry I'll drag French maybe drag social studies somewhere here right and then I'll maybe do a reverse of it over here and just to the bottom let me start with French so now according to what your school does just drag in the subjects to the bottom and then you'll be able to create a timetable for you know all the days just drag what your school does you know particularly on each day and then create a subject create a Time create a working hours then just drag in what your school does on all the days and you able to create the timetable that's how that's how that's how it works physically so let me just go ahead and create this timetable for you to see just drag in the subject to the designated um time zones that you want them to be in that's that that's basic that's all you have to do that's basically how it works so hold on last one here will be mathematics and geography so here then now now that I saved we can just go back to the timetable section it automatically Sav so you don't have to worry and if I select grade one Michel right now as you can see they've brought us the timeable for the class it seems I forgot to fill this part but like that's just basically the concept that's how you know we going to be able to create the timetable so the next thing we should do is I have to show you how to create exam so let me click on on exams and over here this this section shows all the exams that you have as you can see we've not created any exams yet so you just click on create new and then the class I'll Select Grade one Michel then the exam name let's call it let's say end of term examination right then the exam start date um let's make it the DAT that they resume and the exam end date let's make it like 19th December and and then if you want specific subjects you can select for geography and French or you can select for only geography but in this case we want all the subjects so I just select all and then here I'll click submit and then now as you can see we have our first examination created end of 10 so after that after you created exam examination you as a teacher you can enter marks and then you can enter Mark for the subject marks field now let me show you what the subject marks field are normally some exams we have section A and section B part A Part B um things like that we have the objectives and we have the practicals right so to you can also create that here to create subject math just click on create new select a class select the subject select say mathematics right so the first field will be let's see objectives and I click submit and let's say I want to create another one called subjectives so I'll just click create new same fashion select the class select the subject and then the field maybe I'll type in subjectives and then click submit and then as you can see now we have the mark field for both objectives and subjectives so if I go to classes and I go to Marks right now let's say I'm a teacher and I wanted to enter the marks right if I click grade one Michel I select this exam and let's say the subject is M and I click add update the student is Jason Kenya so no matter how many students that you've created for a particular class when you do it like this all the students are going to show up here if you had more student they will show up so let's say the max let's say you got um 95 out of 100 yes cuz you know I was so smart back in school the remarks were very good or you can make it average or credit or distinguished or something let's say the objectives um I don't know let's say you got 40 right and then the subjectives let's say maybe 55 sorry 55 and then let me click save marks so let me just close it now if you select grade one Michael and you click view marks you're going to see that Jason Ken was here he had 95 he had objective 40 subjective 55 and the REM marks was very good so that's how you can create an exam and enter the marks for it so now I'm going to show you the attendance let's go to attendance click on student attendance so I can select a class right so I'll just click here click on the class that we created G one Michael then we have to select the date and the date should be when the start so that'll be December 4th and I'll just click on ADD update and then over here um if that let's see maybe um the student is absent right sorry I already entered some attendance earlier that's why it says this so I'll justbe select absent and the reason let's say maybe you had a stomach ache right so I'll just click submit and it brings a success message so now that's done as you can see Jason Ken ABS so if the other you want to enter some more attendance just select the next day and if you was present just select all present click submit and it will show at the bottom and that's how you create it for the student attendance now let's do the teachers attendance I'll move over to teachers attendance and the only teacher which we have is Dr s and it doesn't necessarily have to be the day the time starts right so I can click add right now and then as you can see we have the teacher here so if she's absent I'll just select absent and then type in the reason and then you know it's going to pop up but if she's present I can just select all present and click on submit and then just like that her name should pop up somewhere so as you can see her name is here her code her attendance and doesn't have to be any comment so that's how you add in the teachers attendance so so now that we've gone through um all the attendance settings the next thing we need to go through is um how to add events right how to add event so I'll just click on events right now and then if you wanted to add an event for any day so let's say I wanted to add an event for hold on let me go to December 2023 um let's maybe the 13th of the of December right so let's say the start time will be 8 and the end time will be um maybe four right so the title is let's say an excussion let's say it's an EXC so over here and then description let's say um let's just type maybe come and join us to the zoo or something like this so maybe this is the description right and you can decide whether to show it to only the teachers or show it to everybody who logs in so if I click save right now if I click save right now if I go to December as you can see theing date is highlighted so if I click on it as you can see we have um the start the end and the times and then we have the description sorry about the typing error so as you can see this is how you can create event so if you wanted to create another event for any other day just select the day and then you can create the event so now let's go to the notify section over here just click on create new and then now let's see um they let's let's let's make it the same exucation so I click on exucation right and the receiver they going to make it all students all parents as well and all teachers so now all of these people we are they're going to get the notification now how to notify it can be through email or it can be through all or it can be through SMS but SMS is pro and that was said initially when I was talking about the um the wp School press the SMS is a pro I don't was send them the notification through you know SMS on their phones but we not using anything Pro so I just going to select all here and the description is come and join us for this um exciting event right so something like this and I'll just click submit and then this is how one of the notifications is created so now all the parent emails that we typed in is going to be sent to them now the last tab which will be checking is the transport tab right so over on the transport tab I can just click create new and here I can create a school bus so in case your school has one school bus or many buses you can create a you know you can create a transport over here so I'll just maybe make it school bar one and I'll make the vehicle number one 2 3 and the driver name Mr Johnson and the driver's phone let's select this random number and the root fees maybe for the bus fees is 25 and now for the vehicle route you can maybe select maybe you can just type in from Community 2 to community 25 or whatever B through that you have and then you can just click submit here so this also one of the tabs which when a parent or a student LS in they are going to be able to see so as you can see we have the B Roots one last thing which I forgot to show you is um the how you can change the wp School press logo that see over here so to change that just go to settings and they are going to see their logo here so just select this and if you have any logo of your own for example this one that I'm using I'll just click open and I'll click save and as you can see now the logo is changed and everything is okay so this is basically The Round Up of the wp SCH press plugin and everything if I come back to the dashboard let's say I move to that time and I click on 13th okay it doesn't show here but as you can see we have an exam over here we have the student the teachers the parents the classes and then everything so this is basically how it is this is everything that you need to know about the wp School press so now let's go over to build the main website so this was just the review of the school management plugin so to go back just click on the username and then click on back to wp-admin and then we can start building the website okay so to start we have to create a hom page first to go to pages and click on all pages and then you're going to see that there are these two pages which you don't need so just select these two right here and then over on B acction select move to trash and click apply I'm going to close these two pages because we don't need them again and this one as well and not for this one all right so now we have just the dashboard left so let's create a home page on pages click on add new page and then just close this and then for the page title just type in home and move over to template and at the default template select Elemental full WID click publ and then now your homepage is ready so if you want to view how it looks like you can just click on view page and it's going to take you to see your hom page so let me go back to the um to this let me go back to the to this section and I'll just click edit with elemental cuz that's the page build I'll will be using to you know build the whole website if you're interested in learning how to build a website in 30 minutes or how to build a standing website with no code I have this video here my latest video how to create a simple 30 minutes and I also have one on creating a standing website no coding required so if you interested in those just go to the channel and then check those videos out so when Elemental loots up first time just click continue over here and then the page we are going to start building is this one this home page that we see here so now um hold on let me just clear this from here this is basically what element looks like for the first time so I'll just click the plus button to add a new container and then click the vertical container then we are going to increase the height of that container to like let's see 500 640 like this we're going to go to style and background type select classic and here is where we add the background image just click on the plus button here then at your media library just click on upload files select files and I'm going to go to the place where I've stored all of the images so I've stored them here if you're interested in using all of the images that I used use um there's this is the images ra I'm going to leave a link in the description leading you to my website Jason k.com which to be able to download all of these images if you interested so to select all the images so that we don't have to app them one by one I'll just click on the first image hold shift and click on the last image and I'll just press control to deselect this file then I'll click open and now it's going to upload all of my images onto the um onto the media library as you can see okay so now all the images are done they are all uploaded and if I go back here you can see that this is the image that we use at the background so that image is this one so I just click select then um position we going to make this Center Center then we going to make this no repeat and the display size will make it cover so that it look like this then we'll go to background overlay then select the background type a classic and then the color you want to give it some sort of dark um blue dark blue color right so I'm going to drag this down to the dark side to the darker side let me see maybe maybe it needs to be darker than this let me drag this here like this something like this the one we have here it's a little bit darker though okay let me use my Color Picker to get um to get the color a Color Picker is like some sort of extension that many browsers have so this is the color code for the color I'll just select that come back here then I'll type in the hash and then we've gotten our color now all we have to do is increase the opacity to like 0.7 um 0.79 and now we have our background image so um the next that we have on it is this we ensure better this heading this heading basically so I drag the heading in and then I'm going to copy was here in most of my past videos if you have your own descriptions you can put them there but let's say you you're having trouble coming up with your own you can just go to char GPT or any other a you have and ask it to generate it for you so um what I'm going to do is at the at the education I'm just going to put a break over there so to put a break it's an atml code which will make part of the test go to the bottom so I'll just um put in this signs and then this is how you type in your break tag so now that that's done I'll go to the main um container go to layout and then justify all the content to Center then I'll go to style looking at this we used open sounds for the font so I'm going to make the text color white so I go to title click on text color make it white then the font should be open S so let's change that open S and then let's see the size change that to 27 too small 35 okay let's increase it a little to like 309 or 40 then increase let's increase the line height a little bit to 38 and now we have it looking good so the next thing is this um description right so I'll go back drag in a text editor below this and then I'll just copy the description here I can use this come back select everything and then paste it in so now we have our description here let me just get rid of these spaces now go to style test color we have to make it some sort of like light as so something like this this color and looking here the font is moner right so go to typography go to font family and then change the color to Mont s something like this and then the size of it let's see 15 o sorry 15 this is perfect so now we have the second block now let's get our button right we go back um we're going to look for button we drag it below this and then inside the button there's get started so we going to change the text here to get started then we go to style looking at the font the font is Popp so we go to typography go to font family change this to poppings and then um the size the size is okay we don't have to change that we'll go to the text color the text color white we can leave that as it is now for the button color is like this orange color that we have so me look for orange and then put it there something like this but it's a little bit lighter so let's see what can we do about it something like this color yes this is a perfect color to use so what I'm going to do we're going to be using this color a lot more in the video so I'll just click plus and then make a new Global color called orange I should have probably done that for the blue so I'll click create and now we have um our color here so you know let me do that for the blue as well remember that we use blue as an overlay color the blue this one here so I'm going to copy it and I'll um I'll click on this and then the new gr color let's type in dark blue and then we click create now we go back here to the button then go to hover and the hover color over here the hover background color let's make it our dark glue so if you hover is going to look like this we can click update and we are basically done building our first block so so we have to build this second one to let it come up on the header or on this image with the rest of them so to do that go back to the main elements and scroll down and click on this plus button and choose a horizontal container now click on this to go back to where all the elements are drag in a container and duplicate it twice so that we have three different containers right then go back to the main element and then search for icon box we using The Element kit icon box in this one so we drag it here and then first things first let's change the icon looking here it's user so we search for user and then we are going to use this one this icon right here so click insert we are going to clear you know the description cuz we don't want that then go to read more and then enable button and then disable icon then go to settings and then the icon position just make it left that's basically all we have to do here so go to first things first we are going to release this and then we're going to set this to um let's see 22 make this 24 make this 15 and then make this 24 as well so that it look something like this then um The Border type just select none we don't want any border and you can leave the Border radius as it is then we'll go over to content then the vertical alignment set it to top now the margin let's see the margin we have to give it a bottom looking at there's some space between you know all of this so the bottom Marg you have to give it some spacing right so go to bottom and then give it a bottom margin of 10 okay let's say 30 so something like this if it's too much we're going to reduce it as we go on so I I forgot real quick we're going to change this toward what this so best industry laders like is then we'll go back to the um style and then we are going to go over to content and I feel like we've done everything that we need to do here but let's just reduce this a little to 25 now um the title color the title color over here is white so let's leave it as black for now cuz we've not brought it here yet and then um does it have a hover color it does not so we don't need to do anything for the description cuz there is no description right so the title go to typography and then change the font um family to Poppins and then change the font size to 15 okay too small let's make that 23 and then go to the line height and then we we increase that gradually so hold on to 26 now that that's done um we're going to go over to Icon and then we have to give it some spacing right so let's see left from the left to is okay let's see right so we are going to increase the right spacing to um like 23 then increase the size of the icon a little to 50 let make it 55 and then um the icon color should be orange and um yeah I think that's all we need to do for the icon so let's go to button then the button looking here um the font is like it's not to sound so go to typ graphy they are going to make this um Noto s correct sorry go back to the button and we going the typography um the font family for the button should be no two s let's let's make that two s like this then the size 15 uh okay let's make that 14 right there now um the button the back the background typ is classic and then um make the text color are orange and then um the background color um should be um transparent so I'm going to make this completely transparent like this now we're going to go back here um let's increase the size a bit more to 16 and then increase the weight to like 600 or let's see 700 right now um the button okay let's go back go to the set go go to um read more and then let's change this to all capital so it's learn more okay learn more then we'll go back to style and then we'll go back to the button itself and then let's see we have to bring the button back so once you release the pattern the button is brought back so um it has this um greater than sign right to add that we go back the read more and then we are just going to add this sign and then it will look like this so um okay hold on there's a space so let's go back to the content go to read more and then put a space between these two like this now go back to the style and then go to content and then decrease the bottom um the bottom margin of this now let's move over to the main um container and then we just going to decrease the bottom pading till it reaches the top right so that's what we'll be doing now so let's just decrease the W ping to to let's say 100 okay 100 to small let's make it 200 sorry let's make it that 200 so something like this right so now go to the main icon box again and then at the icon box container um the background color background color has to be classic and they going to make the this black but very very very transparent so something like this and then the hover color makes it completely black so we click on Hover and background type then we'll make that um yeah completely black so like this and so when hover it becomes like that sorry completely black like this now we have to go back to content and then make the color um of the title white so color go here we're just going to make that white and then the hover color too should be white as well and then we'll decrease the weight of this to let's see 600 600 l scol so this is how we build that block so now we just going to copy words here paste it inside here and then paste it inside here again then we'll go to the main container then will increase the minimum height a little bit so that there will be some spacing between what's here and what's Here and Now what we have to do is change the text inside and I've shown you how to do that so we're just going to change here to learn courses online and the last one is going to be um admission in progress so let's change that to admission in progress like this and now we are done building our first block so just click update and let's move on to the second one which is this one so to build it just click on the plus button click on vertical container go back here sorry go to this one go to Advan and release the margin and give it a top margin of 100 now go back and then go to the sech widget and type in heading and we are going to use um this heading here so just drag it inside here and then we have welcome to Jason school right so outside of the Kelly brackets we just going to type in welcome to then inside the brackets we going to type in Json School the brackets should um tell Elementary which color to change so if you want um a certain text to be in a different color just put two k brackets around it and that's how it's going to work so now um let's go to um we don't need to do anything here but let's go to separator and we have to get rid of that cuz we don't want any line under it we can leave everything the way it is now we go to style align it to the center now looking over here the font is poppings for both so go to title and then we going to change the main color to um the dark blue the color of the first title not the focus title to the dark blue then will increase it to make it become a little bit light so like this color right so I'm going to add a new Global color in and call it light blue then we click create so now that that's there it doesn't need to have a hover color so we go to typography we are going to make this poppings then the size 35 and then the WID should be 600 so like this and then we are going to go to the focus title and we are going to change the color to our Orange um this should also be our orange as well the hover color they are going to the typography font form we are going to make that Poppins the size 35 and the weight 6 100 just like the first one now we have this ready we should get in this um description right so go back and then drag in a text editor below the um below the title so move over to the text editor and then if you don't have any text you can just ask Char gbt or any other AI you have to develop it for you but if you have you can use that so I'll just copy what here I can use what here right so I'll select from here all the way to here right click click copy come back select everything and then paste it in and then I'll go to style and I'll Center align everything and sorry go back the font family is monat so I'm going to change the go to typography go to font family we going to make that monat like this then the size you're going to make it 15 and the weight should be 500 yes now we are going to go to the um text color let's try and make it a little bit as some ash like color so something like this and then when that is done we have to create these two so go to the main container and go to layout and then the gaps just release this and yeah now go to the text editor go to advance the margin I have to give it a negative margin so that to go closer so negative margin of 14 will send it close to this and okay maybe 15 rather or 16 and it should look like this so now the next block we have to create a two container type block so click on the pl button and then click on this type of block then we go here go to style and background type classic and the image is this one over here so in the files this is the image so we just select it and then the position should be Center Center repeat no repeat and then the display size cover and then we'll go to layout then we increase the minimum height of this so increase it to like 461 now we have to create these icon boxes so go back here search icon box wait hold on go back we have to actually add in containers for the icon boxes first so put in our first container duplicate it and duplicate it one last time till we get three then we are going to come back and then search for the icon boxes so search for icon box drag this one in here first things first you have to change the icon right so the icon there is a user click on icon it will bring you here the search for the user so this is it click insert is it the same thing no it's not it's not the same thing hold on user um the icon used there is okay you know what let's let's just use this icon for now so we click insert and this is our icon we are going to type in our mission over here and then for the description we'll copy what's here and then come and paste it here then I'll go to style send the icon position to the left go to Icon now the icon color is our orange so we going to select um the orange color and then we'll decrease the size of the icon to like 29 and then decrease the spacing as well to 10 then go to content now decrease the spacing of this make just make it one right then go to the color of the um heading so the color here is our blue so I just going to make this um where is lights blue the lights blue color then the font family is popping or the yeah the font family is popping so we go here we type in popins and then um we are going to decrease the size to like 18 now um we should change the we should change the description so I'm looking at it closer I think it is um I think it's open S for the description so we go to the typography for the description we're going to make this open S right and then the size let's see 15 okay 16 then will increase the we to like 500 okay hold on 400 right 400 was good and um doesn't look similar okay hold on let's go back increase the weight to 500 and then decrease the size to 15 perfect effect so now that that's done you're just going to right click copy this paste it here and then paste it here as well and we'll go back to this container and we'll decrease the height to match the icon boxes so like this now we go here go to um the main website then we going to just copy the um the icon and then the title right so the second one the icon is um let's see TV yep so it's a TV we will insert that in and then we just type in our vision like this and the last one is our Focus right so we just going to type in um focus over here then the icon will click um you click the icon and then the icon name I think is search so it's this one we just insert it in and then now if you look closely they have these lines like separating them like those Border Lines to create those click on this container go to style and then look for border and then the Border type make is solid and then release this and give it a bottom border of one now make the Border color orange and make the Border type um dashed and click updates now let's um let's preview what it looks like so to preview just click on preview changes and then this is what is looking like now so all we have to do is right click on the container click copy right click on this container and then click paste to and then we have that style there so now go to this main container and then um the gaps are released already so you're going to send the column gaps like um 15 and then we'll click update so now when we go back here there will be some space between what's here and what's here so guys we are done building the second block let's move on to the next which is this block over here very simple block to build so go back click on this make this a vertical container give it a top margin of um 70 70 then we go to style then the background type classic the image will'll be using the image over there is this one if I'm correct yes is that one so select this image and then the position as usual Center Center repeat no repeat display size cover and then go to layout and we are going to increase the minimum height of this block to about 500 and um let's make is 540 now go to style and then um we have to give it a background overlay so go to background overlay um the background I make it classic and the color we are going to make that black and the opacity slider just drag it till you reach 0.79 that's where you want it to be 0.79 that's the sweet sport if you ask me so now that we have that let's um let's get in the heading so drag a heading here and then is the we are the best for your school so we going to paste this here for your child sorry and we going to Center align it then um looking at it the font family is poppings so let's just make the color white click on this and drag it to make the color white and for the font family click on typography click on family and they are going to make the poppings now the next thing is we have to decrease the weight so 500 okay 600 right and the going to make the size 35 and now that that's done select the main container go to layout and then at the justifi content we're going to click on Center now go back we have a divider there so go back here and then drag in a divider below this and then we going to Center Line the divider first off we going to make the weight 13 okay let's reduce that to n and they going to sty give it a weight of two and then give it a color so um hold on let's decrease the this a little to seven so I made that seven now let's go back and you have to get this description there so to do that drag in a text editor below this and I'm just going to copy the description we have here come back and then paste it s is not real text like I said if you want um to if you don't have your text and then you want an AI to generate it for you you can just use shbt but if you have your own no problem so go to style Center align this and then we're going to make the color um let's see here is white completely white so this what we want now we go to typography font form we going to make the monat that's what it is then we make the size 15 and then the weight 500 so now the next thing is these two buttons we have to get these two buttons If you go back to the top this button is very similar to what we have there so what we have to do is we click on this drag a container right below this going to make it a horizontal container so the direction make it horizontal then we going to right click on this button copy it right click here paste then we're going to right click on the button and then duplicate it and over here we have learn more so once we hover on it you see this is the color that comes so we have to create the reverse over here so I'm going to make this L more then we'll go to style sorry then more and we go to style and then for the background um type normal we make that a dark blue R then on Hover we going to make it the orange then go back to the container and then justy all the content to the center now come to the main container release the gaps first of all and then give it a row gap of 10 like this perfect then just click update and we are done building this block so let's move over to the next one this block so to build it click on this and then click on a vertical container now give you a top margin of um 70 like as usual I'm going to copy this heading here cuz it's very similar to what we have there then we'll paste it in then over here is what we offer for your child so just going to paste it in then we are going to go back style I'm looking closely um it's open sounds that the font so I'm going to go to typography and I'm going to um make it open sounds that's the font and then go back to the test color and make it our light blue now I'm we have to increase the weight so we going to make that 700 Bard correct now that that's done click on this and then click on this container type now go back and we have to use an icon box over here to do that we'll go back set for um hold on we have to get Contin inside this containers first so drag in a container inside the main container then we duplicate it so we get three hold on sorry right click duplicate to we get three now we can just simply delete this container then duplicate this one to get the same structure over here so we don't have to go through all of it again so now we go back and then search for icon box drag this one in and then The View change this to Stacked and then the icon um let's see this is I think a shield so let's search for shield um perfect this is it so we insert it in and then the heading is safety first so let's change that safety first and then the description I'll just copy this all of most of the descriptions that you see inside I use CH GPT to develop them it's such a flexible AI so if you're having trouble coming up with your descriptions you can use that so we go to style make the icon position left and then um go to the icon now we have to we have to make it um the primary color should be the orange perfect now we have to decrease the size of the icon to um 24 then the padding we have to increase that gradually to like let's say 12 12 looks cool but we have to increase the size a little so hold on let me see here mm t 29 looks good so now that that's done we have to um let's see the spacing we just decrease that a little to 10 now we go to content decrease the spacing make it one and then looking closely the front family is um is open sounds as well so go to typography oh no go to the color first things first make the lights blue then go to typography go to font family and then make a open SCE like this then the size let's see 25 looks good and then we have to change it for the description as well so the font um the color we have to make it Ash some sort of like ash dark ash color so like this and then go to typography then go to family and we going to make the monats then the size should be 15 and then the weight 500 perfect let's increase the size one more to 16 this is perfect so what we'll do is we right click copy right click paste it in right click paste it in do the same for here paste it in right click paste it in right click and then paste it in I'm going to change all the descriptions of camera but I've already told you how to do that in case you forgot I'll go here and do it one more time we go back certify teachers is the heading here so I can just copy it come here and then paste it in the title and then um we just copy the description here and then paste in the description that's how I CH the title and description to and to change the icon go to Icon and then just um type in the icon that I want to use or search for it so here we want to use a user icon right so let me just um let's see this one this is the perfect icon I wonder why I couldn't find it the first time so we just insert it here so we can go back here and change it though because we found it I'll just search for user again scroll up this the icon so I click insert and that's the one that we want to use so now that's how you can I'm going to change all of the descriptions of camera then we'll resume building our website okay guys so as you can see I've changed everything off camera if you're interested the icon I use here is book the icon I use here is school the icon I use here is users and the icon I used here is um football so now we are done building this block and the next block we have to build is this one so to build it we'll go back here and then select this type of container the vertical container then um sorry we have to give that a top margin so we go to advance and give it a top margin of 70 then um we have to make it we have to go back and then we have to get this heading so to do that we just right click copy this come here and paste it in then we go back and we'll copy the description here and then come back and then paste it in what makes us different from others then I'll go back here and then I will click on this and then click on a horizontal container then we drag a container inside it and then duplicate it twice to we get three and then once that's done we'll go back here and then look for the image box um Wiig so this one so drag it in click on choose image and the one we have here is this one so this is it if you interested in where I got these images from I got it from a site called Flat icon.com let me go there real quick and show you flat icon .c it's where I get most of the cool complex icons that I use for my website so if you need to sear any kind of Icon maybe book or something just type it in in the search box and I'll just search book and then as you can see they will bring me many many book icons that I can choose from so this is one of the main places that I used to put my website if I interested in where I got those images from you can get them all from here so I'll go back and then I'll change the heading to better education so hold on better education like this then go back copy this description which is you know literally the same thing and I'll paste it in go to style and then um go to image yes and then decrease the weight of the image to 19 and then the decrease the spacing as well to 10 now um we go to content then um decre the spacing at this to one sorry make this one then go to color and make it orange then go to typography and then change the font size to poins yes change the font size to poins and then change the font family to poping sorry and then change the font size to 18 now we have to change the the um um the font family for the description so to do that we go to the description make the color um complete block okay Ash a little bit so something like this then go to typography and then change the font family to monat like this and then we are going to go to um the size make it 15 and then increase the weight to 500 so it's going to look like this so we just right click copy it and then paste it in all these containers so that we don't have to create it all over again and um so we we just have to change the descriptions towards here latest resources and better education so we come back here the icon used here is this one so I'm just going to change this text here to latest resources and I'm going to change this here to um better it's already there so we just change this to school and then that's that's it that's what that's what we have to do for this block so we are basically done building this block the next block is this um block showing up the teachers of the school so to build it we go back click on this click on the vertical container then right click copy this heading and then paste it in here then click on the um main container over here and give it a top margin of 70 like this then go back um sorry we have to change the heading so click on the heading and then we going to change it to certified teachers so I just P that in now what we have to look for is the um the team block but first let's add a container below this go back here and then look for search for team type in team and team members PA drag it at the bottom then enable the multiple member setting then make this St sorry two like this now um the content alignment make it Center cuz that's how it is here and then go to um go to the multiple member settings get rid of these two first then go here and then we can Chas we can switch up the image so we're just going to make that this woman then we call here Amanda Smith like this and um description let's just make that teacher so teacher and then um I'll just copy the description that we have here and then paste it in she doesn't have any socials we don't put any socials on here so to get rid of those just disable the social icons like so and then all we have to do now is duplicate this three times then we get the images so now we can change them the second image the second name is Jason Kenya MO so let's change that real quick to Jason Kenya and then we change the image of the woman to this man here then that's not how I look like in real life though so now we go back and then for the last one we'll change it to this woman so name name Olivia hiden right so we P image here then we change the name to Olivia hayen and then now we are basically done so what we have to do next is go to the main container right and then increase the weight a little to like 1 two 3 then come back to the um to the um Team block and then we have to increase the height so let me do it there step by step we increase the height to let's see 43 this looks perfect so we just go to style and all we have to do is change the how the name and rest of the descriptions look like so the font the color is lights blue right so I'm going to change that to light blue and the font family is open S you're going to use that and then the size the size 27 let's see yep that looks very similar to what we have there so now we'll go to the job title now going to make that the orange color then typography the font family is poins then we change the size to 18 perfect now um let's see the um the margin of that we have to um increase or decrease the increase the bottom margin to like um seven perfect then we go to the description then we have to um change the size sorry change the color first things first so I'm going to make that some dark ash color like this then we'll make the font family of that monat and then the size 15 the weight 500 okay size 16 rather and the weight 500 now we are done building this teachers block so the next block below that is this one called to en Your Child So to build that we'll just click on this and um we'll click on the vertical container go to um increase the height a little bit to like 238 go to style and um click on background type click on image we are going to change the image to this one here then position as usual Center Center repeat no repeat display size cover and the size here is a little bit longer than what we have so we're going to increase the minimum height to something like this 43 now go to style and and then um we have to give it an overlay right so go to background overlay click classic and then make this the dark blue then we increase this to 0.7 9 like this then we go back here and this what we have to build over here as you can see looks very similar to what we have here so we can just copy this and then paste it below and then copy the divider as well and then paste it below then we can go and copy the description because there's a description there and then paste it below then um we we can go back here drag in a container below this um justify the containers content to Center then we can right click copy this button scroll down and then paste it over here then we just Center align the button perfect so go to the main container go to layout and then just justify all the content to Center and then make the rule the gaps for the rule 10 now go to this and let's change this to what we have here so call now to your child so we going to change that up then we going to change the description description is the same thing so we don't have to change it and we have to give it some spacing at the top so a top margin of 50 will be good for the this one and now we are done building this block just like that very fast now we have to build this one so to build it click on this click on a vertical container give it a top margin of 70 then we right click copy this and then come and paste it in here we are going to call this to 20 years of experience so I'll just paste it in here 20 years of experience then I will click on this and and then click on a horizontal container and then we need to get in a counter right to get that we type in counter here and we drag one in now let's start that one let's start that container first of all so we make the ending number 87 then the text there is certified teachers so copy it and then P it in then the animation duration should be th000 like so now go back back and the color is orange the typography will be the font form will be open S and we can leave that as it is then we have to change the um the title right so we go here and then we'll make it a regular light blue then we'll make the font family Noto s right then we'll make the size let's see um 27 that's way too big so 21 then we make the weight 500 okay maybe 600 and then we'll decrease the size a little to 20 so this is perfect so we duplicate this five times right so duplicate D sorry four times so we get five and then we duplicate it again now go back to the um container the main container this one and then release the gaps and then increase the column gaps to let's see 20 to small 50 um let's make that 55 perfect now go to this one and we I'm going to change all I want to change all of them off camera but there's something I have to show you so let's make this 790 that's what we have there 790 and then we are going to make this successful kits right so I'll just copy what's here okay and then paste it in then the next one is 594 happy parent so we going to make the number 5 94 and change the title to happy parent then we'll come back here and that one is 300 so we change the number to 300 based on your achievement you can change that how you like I'm going to make a Awards One sorry one then we'll go to the last one and then is 59 then batches so I'm going to make this 59 and we are going to make the text here batches this shows you that we need to increase the gaps quite a bit more to make that the column gaps 80 rather still too small 110 that's perfect so we click update and we are done building this block so the last block for the homepage is this sort of like Gallery block over here before the footer so click on this then we click on this container I think is that container here go to advance go to margin give a top margin of 70 then click on this then go to sech project and look for media grid this one and then drag it in now the The Columns we don't want any categories to be so disable the um the categories so disable category disable filter tabs now let's um let's give it one Image First Things First so that we can see how many columns we need so the first image there is this one so I'm going to put it in like so then I'm going to duplicate this image and then duplicate it again and then this brings the third image below so as you can see we have four large images here so go to layout and then make it four columns perfectly then go to um the images videos again and then just get rid of the titles the images so I can get rid of these two and then duplicate this one again so we have to duplicate it till we get four perfect four now go over here and then we are going to go to this and we going to make this full width good now we are going to go back to the um we're going to go here and then release all the paddings then come over to this place then go to the images videos now let's change the images for all of them the image here is this one so we're going to change it up to um let me see this one then um the next image is um this image so we going to change it to this one and then the last one is this one so I'm going to change it up to um this one so we just click select now that that's done just move over to display options and then just make the image Gap zero or one okay now we should make that zero completely zero then we just click update now go to layout let's see can we do anything about the heights yes we can so let's make that let's see 96 that's way too small 200 200 um kind of this SC but I'm thinking let's make it to2 rather then we'll click update and then that's it we are basically down building our homepage now so let me go back to the homepage once it finishes um refreshing hold on okay it's done refreshing so this is basically our homepage we are done building the first page of our website or the main page that we want people to see when they come our home page looking very similar to you know what we have here so the next page we have to build is the about page right to build it just go over on this um hold on just click the WordPress icon over here sorry click J click um Jason School rather good now we are at the dashboard so now we going to go to Pages go to all pages then we are going to click on add new page then um we going to name the page about so we going to name the page here about at the page title then at the template we going to make it Elemental full width click publish click publish and now as you can see about it's live so it's done and then we just overover here and now we can start editing with elemental so just click on edit with elemental and now element has loaded up so if I go back to the side which we trying to build and I go to the about page this is what it looks like so this what we going to be building so let me go back here click on this click on the vertical container and then increase the height to something like this 424 go to style background type classic then the image there is this one so I'm going to choose an image um the image is this one so um this the image so click select and then the position asual center Center repeat no repeat and display size cover then we go to background over then background type will click classic and the background color will be the dark blue then we make the opacity 079 now we go back and then we going to bring in this about as text in so looking at the font it's it's open sounds so I'm just going to type in about as over here now Center align go to style and you're going to make the color white the text color should be white and go to typography and change the font family to open um sorry open sounds and then change the size to 35 now go back click on the main container and then go to layout and then justy all the content to Center so it will look like this now the next block is this one and we already built this on the homepage so all we have to do is go back to the homepage and then copy this like about blog so we just right click copy it come back back to the about page right click and then click paste and as you can see we have the first part of that blocking so we have to copy this one as well so right click copy come back right click and then paste now we have the second part of the Block in so the next is this one which you also already built so to get it we just scroll down this is the block we right click copy come back to the about page right click and and then paste now we have this in so the next block is this um meet our team or this sort of like um block which shows of the people who came together to start the school or something like that so to build it um go back to the about page right then um what we can do is we can go to the homepage and copy one of the headings so I'll click here then I will click um a vertical container then I will paste it in and then inside I'm going to type meet uh Team now move over to the top or click on the main container go to advance release the margins and give you a top margin of 70 now create another container in it and then this is um this is uh this is a team element so go back to all the elements are search for team and then drag in team members inside it so this how it looks like okay so the style the sty we should make this multiple member like this and then um the height we have to increase the height of these images so like this something like this then go to this container they make container and then increase the width to like some to 1,237 then come back to the images go to the multiple member settings and just delete these two right so if you look at the side we only have the um the name of the person and the RO there so we can um get rid of this description then we have to get that woman's image so I'll just click on the image to bring me to my media library then over here I'll select this woman image click select and then I'm going to change her name to what we have here so the name here is Patricia mansley right so I'll go back and then I'll paste here the name inside now duplicate this and then duplicate it again then I'll go over here we have to change um we have to change the name here right so the name of the person okay we can change it to something else so let's send it to maybe John Smith or something then let's choose His Image which is this one so we'll click select and then we have to go to the last one we name here um um J me holiday or something they will go here and then they will choose this image so now this image let's let's change up the rules first of all um um this one she should be the maybe the principal and then no that should be an all cups this one should be the principal and then this one should be maybe the Headmaster o sorry this one should be the head master and then the justment holiday should be maybe the assistant head mistress something like this and then once that's done um the images are going to load but my my my network is a little bit slow right now that's why they aren't so we'll go to style as you can see they've loaded so we go back to content um what we have to do is we have to increase the height of the images a little bit more so to like 4 um 30 okay so when that's done let's go to sty first first we have to align all the content to Center so content alignment over here we're going to click Center then um we don't want any social icons I forgot to get rid of that sorry click on the person and then disable the social icons click on the person um disable the social icons and then click on the person then just disable the social icons like that so now we'll go back to the style section and over here hover the name is white but the the that job is the job title is our orange so I'm going to change the job title to our orange real quick and then um I think it's Popin if I'm correct yeah it's Popin Popin and then the size will be 18 if I'm right 18 like this correct now the name looking at the names here it is open t that's it we going to go we going to go to typography we are going to go to font family and we are going to make the font family open S like this and then um let's see let's see about the size 27 we increase it to 30 like this now we have to go and change the background to go to content then um the background color we have to make it some transparent like black hold on this should be black and then drag this sler to make it a t more transparent so it to look something like this then go to job title and then um sorry go to name and then change the color of the name to White now go to content and let's release the patterns now give you a top pattern of 30 and a bottom pattern of 20 and this looks perfect this B this is how we want it to look like so this is basically how our team blocks look like one thing which we should reduce is the weight I think we should reduce that a little bit more so the weight of the main container right so select the main container and over on layer just decrease the weight a little like this then just click update now the last block in the about page is this block and we already buil that on the hom page right so is this block here so we just right click copy this um heading container right click here and then paste it now I'll go back copy this container with the image boxes in them so I'll just click copy come back here right click and then paste it now what I'm going to do is I'm going to select this container here this one then we'll go to advanc release the margin and then give it a the bottom um margin of 50 and then click update and that's it so now let's just click preview to see how our about PCH looks like and as you can see we are done building our about page looking very beautiful over here and now we can move on to the contact page but before we move on to the contact page there's one thing which I have to show you guys that I didn't show you we have to go click on exit go back and then go over to settings here and then go over to reading we're supposed to do this at the initial part of the video but we didn't so your hom page displays we want you to display a page that we' created called home not our latest post cuz right now if I go to a new tab right and I type Maybe my school. Jason kenya.com like this and I um click enter it's going to um display my latest post we don't want it to display that I want you to display this homepage to do that we change that at the reading settings your homage displays select a static page and then here select home and then click save changes then if I go back here and I refresh the page now it should bring me straight to the hom page and as you can see that's exactly what it does so this what we want so now let's go and create a contact page go to Pages um go to all pages then over here click on add new page then at the add title just type in contact and then go to template and then make a Elemental for with click publish click publish and then here click edit with elemental now let's go and check out how the contact P that we want to build looks like so if I click on contact right now this is the contact page this is what it looks like so there's this blog there's a map then there's our contact form so we have to build this right to build him go back here and once our element has loaded I'll just click this plot button make a vertical container then now increase the minimum height to to 430 then go to style go to background type and then make the image um this one then we'll click select then as usual position center Center repeat no repeat and then the display size we're going to make that cover so now go to background overlay and then the background type make a classic then select our dark blue color and then make the opacity 0.7 um 9 like this so after that you can click update then um in the text here we have contact us so I'm going to drag in a heading and inside a heading we going to type in contact us we are going to Center align this go to style we going to make the color text color white go to typography click on font family and we going to make the open S with a size of 35 then click on the main container go to layout and then just justify all the contact to center now the next thing to do is click on this click on vertical container go to advance and then make the top margin 70 now go back here and then at the SE widget section just look for map and then drag in Google map over here now you can make this any location you want I'm going to make my fash but any location which you have that's on the Google Map you can use that so I'm going to increase the zoom a bit to get rid of the um the image of the C here so let me make it to let me make it 15 and then we going to increase the height of this as well to um let's go a little bit more to like 600 and let's just make that 600 straight up so 600 then we'll click update so now that the map is done we have to create um um this this this block the contact form and then the these two blocks over here to build those click on this and then click um the the double container now go here go to Advan and release the margin and then give you a top margin of 70 as usual then drag in um at the set section look for met form and then drag it in here now go back and then drag in a container over over here and then duplicate it to you get to so two like this now if you I've already done a tutorial on my Channel about met form and how you can integrate it with WP ma SMTP so that you can send and receive mails on your site if you're interested in that the video is right here on my channel this video so don't forget to check that out and don't forget to like share and subscribe as well so let me come back to the contact page here we just click edit form and once this loads up we just call it form one at the form name section name it form one and then I'll click simple contact form this template that's what we are going to be using in this video so I'll just click on it all right guys so now it hased so first thing we going to be changing this here I'm going to um change it to we would love to hear from you now we'll go over to style and they are going to change the font family to purpose so click on typography and then change the phone to Pops and we decrease the we to 600 now come to this um the first name come to this one then um we going to get rid of the text in the placeholder then um what we'll do is we'll go to style then go to typography then we are going to change the font family to popins as well we can leave the size and everything else the way it is then um at the input section let's say I want to type my name Jon right this is the input so um if I go to typography over um over here I'm going to change the font of the input to monat like this then I'll change the size to 15 and I'll change the weight to 500 perfect so now the next thing I'll do is I'll copy this and then paste the style on all of them so here will past past and will past as well now come over to the last name get rid of the text in the placeholder same for the email address get rid of the text same for subject get rid of the text and over here what will change we'll get rid of the comment here then we'll change the label to your message here instead of what was there originally and here we just click update and this is like a very simple way to create a contact form now we don't want this recapture so we just right click and click delete and then um at the button go to advance and give it a top margin of 10 now um go to content and then change the button text to send only just send like that and then um let me look here okay so um change the font of the button to Poppins so we are going to change it to Poppins and I'm going to increase the size to 15 now what we going to do is the background type the normal color will make it our sorry our light blue then we'll make a hover color the hover background color are dark Blues which will be like this then we'll click update then here we'll click update and close and as you can see we have our contact form inside there like so so the next thing we should be doing is we should be creating these two blocks but there's one more thing which I want to do for the contact form that I want to show you so let's click edit form real quick now that loaded up go to this one go to style go topography and increase the size of this to like to 17 and then I'll just right click copy and then paste the style hold on copy paste the style paste the sty here as well paste the sty here and then paste the sty again then go to the subject one go to settings and then turn the required off um this place literally means that if the person does not fill this section the form they can't send the form so that makes it required and we don't want the subject or the message to be required so we'll just go to settings and then just tole this off click update and that should do everything so yeah we just click update and close and we are cool to go so what I'll do right now is I I'll pull my my ker here right then I'll increase the width of this contact form something like this or increase the weight of this container sorry so now I'm going to come here first things first we have to get this block right so to do that we come back click on the container go to style and go to background type classic and make it uh this color this orange then we're going to increase the minimum height now we'll move over to um this one and then we are going to go to style we are going to make the color let's see here let's see if it I think we should make this our light blue we going to make this light blue like so okay let's make it a dark blue so our dark blue correct now go to layout we are going to increase the height of this as well so um this one seems a little bit too long so we going to decrease the height a little bit now now what we have to do is we have to handle the um the weight of this column so click on the column and then increase the weight to this this perfect this how we want it to look like now that we've handled that let's come back here and then create the blogs that we want so um we have to go back here and then the first thing inside this is a heading with some contact info so to create that all we have to do is drag a heading inside it and then we are going to call it contact info so let's call it contact info like this we Center align it um the font is poppings so make the color the text color white go to typography make the font family poppings and then are going to make the size um we're going to make the size 25 and then let's make the weight let's see 600 okay so let's make it 500 right now come to this main container here and justify the content to Center sorry this main container here rather sorry and justify the content to center now go back here set wiget search for an icon box now drag that below this like this and then um we want the icon to be a phone icon so like this and then next step is I'm just going to copy the number that I created here this number that's what we'll use so I'll copy this and then I will paste it in now get rid of this cuz we don't need it now go to sty icon position should be on the left and then um we are going to Center align this and go to Icon and we going to make the icon color white and then we are going to decrease the size decrease the size to um 29 then we going to go to content and then um we going to change the font to popins as well so the color let's make the color white face to make this white put typography and then change it to poins then change the weight to 500 then the size as well we have to reduce that so 16 okay hold on 18 looks pretty good so now that we've changed all of that go to box and um align everything to the left then go to Advanced go to margin let's see right margin so no we have to give it a left margin so we give it a left margin of 80 okay to small 120 so let's decrease that a little to like 115 or 111 this is perfect so now the next thing which will do is go back to the icon box here and then go to icon and then just decrease the spacing to like six then duplicate this once and duplicate it again so you get three then um go to The Container here and then just increase the height a little bit more now we have to change the next one so the next one is um the name of the place right so I'm going to call it Jason school and then I'll give it a map icon so search for map and um let's use this one so I insert it in then the last one is um the email so I'm going to change that to info@ Json school.com like this and then we'll go over here and then look for envelope like this and we are going to use this so I inser it in now go over to this container and then release the gaps and make the row gaps like 10 to small 15 so something like this now that that's done we are basically done building the first portion or this blook and the next block is this one so um I'm going to go back here I'll copy this and I'll paste it in here and I'll name it our teachers perfectly our teachers then what I'm going to do next is I'm going to justify the content of this container to Center then I'll go back here and then drag in a text editor right below the heading then um I'll just copy the dumy text we have here then I'll come back here and I'll paste it in let me get rid of these PES now that um that's done um hold on that seems the space is too much so what we'll do is we'll just copy this and then paste it again perfect then go to style Center align everything and then make the color white actually it looks like it's too plenty so let's just get rid of this portion of the dummy text like this perfect then go to style go typography we going to make the font family mon setup like this and then the size should be what like 15 okay let's make it let's make that 14 right and yep that's basically it for this block so let's just increase the height of this block just a little bit more like 255 you can update and we are done building this block for the contact spe so if I go back here um and this those are those are literally the last blocks but the last thing I would like to do is I would like to decrease the size of the icons decrease the size of the icons to like 24 so I'll go here to go to style go to Icon decrease the size to 24 do the same for the last one and then decrease the size to 24 and then I'll go to the main container here go to Advanced and give it a bottom margin of 50 and then click update and we are now done building the contact page so now the last page to build is the gallery but before we do that if you want to see how the contact page looks like just click on this preview changes icon and then you're going to see your contact page over here looking very beautiful like so so now that that's done we have to build the last which is the gallery so to build that just click on this let me go to the gallery page and show you what it looks like before so basically this is the gallery right we're going to be creating this page and to do that we go back um to the dashboard then go to pages and then click on all pages then here click on add new page we are going to at the add title section we just type in Galler and then go to template and we going to make it Elemental full width click publish and then here click edit with element now looking at the gallery p we can see that we have this block right and it looks very similar to this one so what I'll do is I'll um let me go to my navigator go to this main container here right click and then click copy go back to the gallery right click and hit paste and now we have this block in so I'm going to name it Gallery change the text to Gallery click on it to change the tit over here then I'll go back to the main container we have to change the image at the background to this one so click select and there we go we have our image in so now the next thing is we have to get um okay we can't get it from here let's go to the homepage and see so I'll copy this text I'll come back here create a new vertical container give it a top margin of 50 and then paste it in and I'm going to type in gallery now below it we have to create this um Gallery over here but first of all we need that description so to get it I'll just pting a text editor over here I'll copy the text that's in it past it one more time and then get rid of this pieace by putting my casa here and then hitting the backspace key and I'll go back Center align it then um go to typography change the phone family to month satat and then change the size like 15 okay 16 then increase the weight to 500 like this then the next thing we have to do is get a media grid right so to create that go back here and then search for media grade and drag that below this now we have to change the columns to three columns right and then go to categories and then um we have to get rid of these two categories get rid of them so the first one we are going to call it classroom the first we going to call it classroom then the next one we going to call it graduation so I'll just duplicate this click on it and we are going to call it graduation so I'll just type in graduation over here like this then I'll go um over to the images and videos then now get rid of this first one now the first image that we have there is um this one right so I'm going to show you how to do like two and I'll do the rest off camera cuz we don't want the video to be too long so at the image this first one I just click on upload image and then I'm going to choose this one here and I'll click select now that that image is here all I have to do is get rid of the image title cuz we don't want that now um go to light box and then disable the light box that's important then go back to the images and videos and then we are going to at the category section type in exactly what you type for the category so we just type class room for the first one now I'm going to duplicate this then the next image here is this one so we click on this get the image click select and then we are going to change the category to graduation so this is how you add the images and other categories basically so let me create one more for you guys so that you can do the so I can do the rest of C I don't want the video to be too long the next image is this one right so I'll click this I will select this image change the category to class um room so right now if I was to click on classroom right now it's going to bring these images that have put under the classroom if I was to click on graduation it's going to put this images that I put under graduation right so I'll just click update and I'm going to do the rest off camera cuz I don't want the video to be too long all right so now as you can see I've added all the images off camera and this is what it looks like right now you should be able to do it very simply because of how it went through the three so now we have to change how these look like so if I look here um this how they look like when you click they change to this orange when you click change the orange so to do that um go to style and then look for filter here then go to typography you want to change that to Poppins first things first so we change the font family to Poppins then we change the size of the text to 15 okay let's make that 16 right perfect now go back to filter and then now the text color on normal should be black like this then um the test color on Hover should be black as well okay hold on let me see yeah on normal on Hover should be black as well then on active active it should be white on active it should be white so we going to make that white then the background color on active should be orange like this perfect then we go to on normal now the background color should be Ash on normal but a very very very transparent Ash so something like this is perfect something like this so once you click it will switch all the colors just like that and that's how you do that very simple so once that's done next thing we have to do is add in that button that we saw so what I can do I can go to the hom page right click copy this gu button come back to the gallery and then paste it in the container okay hold I didn't I didn't copy it I'll go back to the homepage right click and copy this button go back to the gallery then right click and then paste the button in good then I will Center align it and then release it and give it a top margin of 10 and they will give it a bottom margin of 50 then we'll click update and that's it we are done building the very very last page for our website so if I click preview changes right now we can see our beautiful Gallery created here so now we are done creating all the pages for our website so the next thing we have to do is we have to create the menu and we have to create the footer so to do those things go to the dashboard first of all this is the first thing we have to create so let me go back and show you the menu here and if you go to the bottom the the footer here this what we have to create right so to do that go back to the dashboard go to appearance and then click on menus the first thing we have to do is create an actual menu and to do that we have to give our menu a name first we just call a main men and then we'll click create menu then we'll go to um view all then we'll add in the home pH the about second contact gallery and then dashboard so I'll click add to menu so I'll drag the gallery on top of the dashboard so that the dashboard is the last thing that appears perfect now click save menu so let so this is how our menu looks like right now but this is the main menu that we want so now that this created go to appearance again and then click on customize now over on customized first things first click on these three um this three icon that show up here when you get near the menu then at the select menu make it our main M right then go to design and um if I look closely here at the website that we are um make trying to make there's no search button so we have to get rid of that right so just click on the x button to get rid of the search button over here then go back to the to this place and then just increase the item spacing a bit more to like 36 then go to design looking closely the font here is Poppins so we have to create that right so we going to change the font family to poins like this right here poins then just click understand don't show this notification again and click continue then we're going to decrease the weight to six semi bolt 600 then the size are this we going to increase it to 13 perfect now now that done um if I look closely that's the only thing on the menu so what we have to do is select the main row and then decrease the row minimum height decrease it to like 89 then um go back and then click on headers click on global header and then enable the transparent functionality perfect now come back here and then go to design Now the default state is White H is orange and active is white as well the default State we're going to make that white color it however should be the orange and we don't have it saved here so to get it we can just go to one of the pages get like maybe we can choose this button here then we can go to style and then the color we can just copy the code over here so we copy it with contr C go back and then paste it in for the hover then we'll go over to the act the the active and we are going to make that white now that that's done we'll come over here we have to add in that LE icon right so logo will click select logo and then we you know add the Lea icon and then um we we can decrease the height just a little bit doesn't have to be like that so the logo image position here select left perfect then go to design then the font family for that one is open S to go here and then type in open S as the font and then um let's change the color after that let me change the color first so select color is that's white and then hover two should be the same white then over here now we can go ahead and select open S so I can see the changes so I'll just click open SS here and now it already looks perfect you don't have to change anything much so now go to the top R select this top r that you see now go to um design and then um the background color we have to change it to the blue so to do that we go to the hover version of the button and then copy our blue color code then go back to customize and then we are going to paste that in so now we've gotten the background color for the top bar now in order for that to show we have to add an element to the top bar so let me add social house over here and then um what I'm going to add here is maybe HTML perfect now we'll come back to the top row here go to design we'll copy this color again we'll come back to the transparent State and then we paste that color in now we have it looking like this so go to General and then just decrease the ru height a little to like um 40 now we can let's change this first so we don't want um okay yeah actually these three icons are actually very cool so what we'll do is we'll go to um design and then the icon Thea stage they should be white and then the hover they should be the orange color so we have to and get that orange color let me go back here go to design and then copy it from here and I'll go back to the social icons design then the hover color will paste it in like that perfect so that when you hover it becomes the orange now here we can um we have to go and change this also so now I'm just going to copy the description that I have here I'll copy it come back to customize and then um we're going to paste that into right click and click paste hold on I think how it is I have to type it in myself let me just um type it in myself so I click plus I'll type in plus the fake number that I created then I'm going to space that out and then type in the email of the school so this perfect then we go to design then um we have to change the font to um let's see not s right so go to customize go to font family and then change it to to S perfect then we are going to um change the color yes the color should be white hover color should be white and Link hover should be white as well perfect then um the size of the text we should reduce that a little to to like 14 and then the weight regular is okay so now we are done building our um our our menu we are done buing it so here we can just click public and now we have to optimize it to look good on mobile cuz right now we're only making it look um good on PC and we have to make it look on mobile so to do that just select the mobile icon over here then here click on trigger and then make the style solid then go to design and then um what we are going to do is Let's see we are going to make the let's check the we going to make that um white we are going to to is we have to change the background color yes the background color to Black something like this so let's make the default State some orangish color like this so orange perfect then um we just click publish so now if I um if I click on this everything here looks okay we don't really have to change much so I'll just close it and this is how your menu is going to look on mobile that's how you design it so when that's done we are going to go to logo and then what we have to do we have to decrease the size of it because we want it to look a bit smaller on mobile phones so reduce it from 25 pixels to like 20 pixels then we'll click publish and then that's basically how we have to edit it for mobile so if you want to go back to how it looks on PC just click on this and we are back so now that that's done the next thing we have to create is the footer to create that just click publish one more time and let's go back to our dashboard then over here we are going to go to elements kit header and footer so click on header and footer then here just go through the setup so here will click Next Step here will click Next Step here click Next Step here click next step and then here will click save changes and then here we click on header and footer and here we'll click add new and at the tit we going to call it foot one and change the type to footer and change the conditions into entire site and activate it and click save changes so now we click on edit again and here we click edit content all right now it has loaded up as element if I go back to the side this is the fot that we are trying to build right to build this um we go back here let me look at it closely okay we go back okay select the for structured container and then um we'll increase the height of it so to something like this okay no hold on let's leave the height the way it is then we'll go to style and then we go to background type and then make it our light blue then click on this click on vertical container then go decrease the height of it decrease the height of it to like 30 one then go to style and then go to background type and change the color to the dark blue perfect now go back here and I want to us to create the last one first so we search for copyright then we'll bring it inside here then we'll Center align it and um let me see so we going to change it to powered by Jason school okay without change anything so I'm going to change the color of the text to complete white we are going to change the font of the text to open S sorry open SS like this and then the size of the text should be 15 perfect so now we have to create these blocks how do we do this we go back drag in a heading then um the text there is Jason school so I'll go back here and I'll change the title to Json school now we go to the style change the color to white good typography change the font family to open S we going to change the size of this to 27 or 25 then we'll copy this and then paste it in here paste it in here and then paste it in here as well then we'll come back here now the next thing to do is we have to get this description in so to do that go back here drag in a text editor below this and then go to sty looking at it is monat so change the color to white and then go typography change the font family to monat then we are going to make the size 14 now go back right click copy this button come here right click past the button in then left align it go to advance get rid of the top margin and get rid of the bottom margin that we gave it perfect then now the next block is has to do with page links right so go back here click on this type in page links now go back we drag in a heading now the first page link will make it home so you're going to make that white go to typography go to font family change it to Poppins change the size to f um 18 change your weight to 500 then go to content go to link in the link section type in home and it will bring you your homage so I'll just duplicate this like four times perfect now the next one we're going to call it about so we'll type in about then we call copy it and then we'll paste it in here and it will bring us our about page to link it to to the next page we type in will be gallery and then I'll copy that paste it in here bring me the gallery in the next page will type in will be um sorry which will be the dash board so I'll copy it paste it in here and they brought a dashboard then the last one that we have to change this one so we going to type in contact and then go to link and then type in contact as well and then that's the contact page so we are done with the page links block so go back and we have to get this map in so to do that click on this search for Google Maps then drag this to the bottom here now the height is what you have to adjust first of all so like this then you done building that block click update and go back here and the last one is this like lot of contact info block and to build that it's not the last per but you know so we'll go back to the contact page and if you look closely you'll see that this one sort of like is similar so right click copy it how to the footer and then paste it in here you are going to get rid of the left margin that's important now go to style go to Icon decrease the size of the icon a bit more and then decrease the size of the text as well then we'll just right click duplicate right click duplicate and go back here and search for social icons drag this to the bottom of this then um okay so just get rid of these two first then click on the Facebook one then what we going to do is we are going to make the color the normal color like this and the background color like orange and the hover um the hover background color should be a dark blue and the hover normal color should be our white so like this now we'll go back to we go back here and then we'll duplicate this three times so like this three times I'm going to left align everything now we have to change all the icons we have Twitter Youtube and Instagram right so we have to change this one to Twitter if you have a Twitter account or an X account you can paste the account um link over here so I'll change this to Twitter and I'll go back here here I'll type in YouTube which reminds me you guys should know forget to subscribe to my YouTube channel like the videos that are there and and um leave a comment leave likes and then share them to your friends as well and then we go here and we're going to change the icon to Instagram so we select this one click insert and then change the label to Instagram remember if you have accounts you can enter them in the link over here so now um we go to the main container and go to Advanced and then give it a top margin of 50 and then sorry sorry go to padding rather give it a top padding of 50 and a bottom pattern of 30 then go to this home heading go to typography and then decrease the size like 17 then right click copy paste out paste out P I don't think you you copyed hold on I'll copy it P the sty past style P sty and then P sty again then the next thing we have to change and possibly um the last but one things um are this so we go to content we have to change what here so I'm going to make it look for map put this in and then here I'll type in Json scoop and the last one go here SE for envelope this one we are going to change this to info at Json school.com perfect now that that's done we're going to change this to locate as we are going to change what here to um we should change that to contact info perfect now we can click update and we are done building our f footer but the next thing which we have to do is we have to optimize it to look mobile responsive right so I'll click on mobile resp um responsive mode and then I'll select mobile now this should be very simple I'll go here then I'll decrease the size of it sorry go to typography then we um decrease the size of this thing to like 20 then I'll go to content Center align it I'll copy this sorry I'll right click copy this right click paste sty right click past style and then this one too we past the style now what we have to change up is the button we have to go to here and make it extra small then we Center align it perfect go to this one Center align it as well the text editor then come back here then Center align this as you can see it has this mobile portrait icon that mean that the changes that you make with all those icons by them only affect the mobile version so we are going to do that for all of them here and then here as well over on the map side of things we don't really have to change anything for the map um so we'll go over here then go to style and then um let's see the icon position we change that to left we do the same for this one as well change that to left do the same for this one change it to left then the we go to the social icons here then Center align them then go over here go to Advanced we going to give it a negative left margin so let's see 11 one too much little bit too much so like 92 should be cool for each of them so go to advance left margin 92 this one which is the last one left margin 92 okay that's too much for this one so let's decrease it to about 71 here we click update now select this container and give it a top margin of 20 do the same for this one you can have your phone by you to be checking the changes in real time so give it a top margin of 20 go to this one give it a top margin of 20 as well then go to this um container and give it a top margin of 20 then here we click sorry the last one we can leave it the way it is here we click update and now we are done doing the mobile version and the actual footer itself so let's see what the whole website looks like if I go here and I click visit S right now and I scroll to as you can see we have our menu there and if I scroll down down you see that we have our footer here as well looking beautiful so now the next and the last thing which we have to do is optimize all the pages for mobile responsiveness we have to make all the pages the home about contact and gallery all of them look responsive on mobile and to do that go to your dashboard and then the first page that we are going to tackle is the hom page so click on pages and go over to all pages and then the home page is over here so we just click edit with elemental all right guys so as you can see element loaded up and now we have to view how it's going to look like on a mobile phone so to do that click this icon responsive mode over here and then here select mobile portrait now we have a good view of what is going to look like on mobile so first things first let's edit this we going to edit this block data or the last point it's going to be the most difficult one so let's come to this blog first go to style and go typography and then change the phone size to 25 that's the first thing then Center align everything and then um you can leave that the way it is now come to the text editor and go to style Center align everything and then make the size 14 now come over to the button Center align it and the size make it um extra small yes now um select this main container for for this three then go to Advanced then go over to responsive and then click hide on Mile portrait now go over here and go to style go to title and then change the main title um size 25 and then the focus title to do the same thing we have to change that to 25 as well so like this now come over here and go to style Center L already Center centered and then just make the size of this 14 now click on this and then just decrease the minimum height a little to 290 and then um go to The Container go to advance and then give it a top margin of um 30 this icon here shows that only um if you change it's not going to affect what's happening on the desktop it's going to affect what's happening on mobile phones and that's very good so over here I think we can leave this three the way they are we don't have to change anything here come here go to sty typography change the size to 25 then click on the divider and we're going to make the weight like 20 like 20 perfect then click on this the text editor go to style click on typography change the size to 14 and then click on the face button and then make it extra small click on the um second Button as well and then make it extra small and then this is cool this is good to go so just click update now come over here click on this heading go to to style typography change the size to 25 now come over here go to style go to content change the size of the main heading to 25 let's see so let's reduce that to um 23 then click on the typography for the description and then change the size to 14 now what we'll do here is we'll copy this then we paste the style to all of the icon boxes that we see so right click paste style right click past sty right click P sty and the last one right click past sty now come over here and then go to style change the um the size of the text to 25 like this then um these images here we don't have to change anything here okay we have to go to style go to content and um the title yes the the sorry the description make it 14 because it's too big for mobile so you can have a mobile phone by you when you are doing this so to see if all the changes are applying in real time so just P the sty for the last two then go over to this one certifi teachers go to style and then change the size of it to 25 then select the um team members block right then decrease the height of this block decrease it to 318 then go to style and go to name the name first let's change the size of the name to 25 okay 23 and then let's change the size of the job title as as well from 18 to 16 then let's change the size of the description to 14 like this 14 perfect now that these three are done we can come over to this one so this one the first thing to do is click on the um the heading go to style click on typography and give you a size of 25 then um increase the weight of the divider to 20 then um go to the text editor go to typography and then make the size 14 click on the button and then make the size extra small now select um the main container here and then release the gaps and and then um yeah and then go to the main container click on advance and then the top margin should remain 50 should 50 but the padding the top padding should be like 30 bottom 30 like this we just click update then let's just click on this and then go to style and then go to typography and then make the size tw5 so 25 and then come over here now first things first click on this one and then go to style and go to typography and then let's make the size 20 um 25 okay two small maybe um 30 30 rather so make it 30 and it increase that so 35 like this then go to the title and then the title will change the size to um 20 let's decrease it by 1 to 19 then what we'll do is we'll copy paste past style paste style and then we'll paste the style for this one as well then we click on the main container and release all the gaps the column gaps it will increase it gradually so let's try 50 okay 60 um 100 120 okay what we have to do is we have to increase the height of this container so select the container and then just increase the minimum height like this now come back here come back to um the container and we are just going to make the column the G the column Gap um let's make it 150 let's make 150 for like this perfect then let's see we justify all the content to center now this is good so just click update we are done with this block so now we can leave the gallery the way it is now let's go and start editing um the block which I said we do we save for the last this one click on this to create a new Blog then select the plus button and then click the vertical container now go back and then drag in a container and then duplicate it till you get three of them so this how do right click duplicate and you got 3 now go back here we are going to search for icon box they will drag this icon box in then we'll do the same changes that we did to the first one we type in um user and we'll use this one here then we are going to change the title to best industry leaders then we'll get rid of this description over here then we'll go to settings and then going to make the icon position left and then the content alignment to left and go to read more and then enable the button and disable the add icon now we go to style and then we'll go to content first of all go to the typography and then we are going to make the font family poppings like this then we're going to change the size to 25 okay let's decrease that to 20 perfect then um we are going to um release the margin and give you a bottom margin of 15 and then we give you a left margin of 18 now um let's move over to the icon and for the icon color we going to make it are orange perfect then we have to go and edit the button so click on button and then um hold on let's go back and go to settings first things first we have to um go to to read more we have to make this Capital so I'll just type in learn more all in caps there's another way of doing that to you can go to button and then at the typography um transform you can just select cap um uppercase and it will make everything upper case that's just another way so what we have to do here is we going to change the text color of the button I'm going to make that black and then the background type should be classic and then it should be transparent transparent like this um then we are going to border type make that solid then we are going to make give a border radius of two border weight of two and then change the Border color to our orange like this perfect then click on typography and we have to change the font family of the button to Popp pins as well and then the size of the button maybe 14 and then the weight should be 500 okay let's see 600 600 is better now we release the margin the padding sorry then we give it each a padding of 14 like this then we click update and now we go over to Icon boss container then release all the paddings in now we start gradually give it a top pattern of of um sorry we have to release all the patterns so give a top pattern of 30 bottom 30 and then right okay no we don't have to worry about right let's give it a left pattern of 18 so increase that a bit more to like 25 now that that's done all we have to do is right click copy and then paste it in here and then paste it in here as well then we have to show here is learn courses online and AD mission in progress to change that come back come over here and we are going to type in learn courses online then we'll come to the last one and we are going to change it to admission in progress like this then we click update and we are done optimizing the um the the homepage for mobile but one last thing we have to do is select the Navigator here and select the very first container now go to Advanced and release the margin and then just give it a top margin of like 30 sorry not the margins the padding s go to padding and then just give you a top pattern of like 30 then click update if I go back and I preview we have it looking like this very beautiful our homepage optimized for mobile so you can get your mobile phone and actually check it on it to see if it looks similar so now go back here select the main container go to layout and then we are just going to decrease the height of this a little bit more so let's just decrease this and this is good so we click update and we are done building all Optimum izing the homepage to look mobile responsive so now let's go back to our dashboard click on these three lines click exit and then we have to start editing the about page so go to pages and then over on the about P just click on edit with Elementor then once element has loaded up I'll just select the main container so I'll click Navigator the first container select responsive mode and then make that mobile portrait perfect now this looks pretty good so we come here go to style go to title um select typography and then make the size 25 do the same for the focus title select typography and then make the size 25 and then we select the text editor which typography and then make the size other 14 then we go to The Container here and decrease the height to two now we can leave the icons the way they are now this block here um I'll select we we we literally have a very similar on the hom page but I want to build it from scratch so I will go to sty typography make the size of this 25 and then make this width of the divider 20 then make the size of the text editor click on text editor go to style typography and then make a 14 and click on the button and then make it extra small now what we have to do next is select the main container then release the gaps go to advance release the paddings give a top pattern of 30 bottom 20 then click update and we are good to go so now this is the block you have to change next so click on the heading go to style go typography make the size 25 then select the team members and then give it a custom height so we have to decrease the height of this so we going to make it 300 65 perfect then we go to style then for the name the name I'm going to change the size of it to 25 then the job title we're going to make that 16 you click update now come back here go to style make the size of this 25 then select the image box go to content make the size of the heading 16 and then go to description typography and make the size 14 now we right click copy come here paste out right click paste out click update and we are done optimizing our about page to look responsive on mobile so the next page will be the um let's do the gallery for the next page so I'll click responsive mode and select a mobile phone or mobile portrait then here all we have to do do literally is change the um the size of the gallery so we going to make that 25 go over here go to style typography change the size of the text editor to 14 then we select the the main um the media grid right then we go to filter go to filter then typography change the size of this two 14 then click update then select the button right then um go to content and we are going to make the button extra small like this then we'll click update and we are done optimizing our Gallery page for mobile now the last page we have to do is contact so select responsive mode select the mobile portrait and then um first thing I think we should do is we should decrease the height of this so we are going to make that like 318 then um the contact form everything pretty much look good on but we edit some things so let me click on this first um click on the heading go Stog graphy and change the size to 20 then select this go to Advanced and then release this go to style and then make this left and then select the container and justify okay the container Justified to Center so go back to the icon box you are going to increase the left margin gradually it gets to the center so this is good so right click copy right click here paste St let's click here paste St now that is done we come over here go here change the size of this to 20 and change the size of this to 14 okay it's already 14 then that's good enough so the last thing we have to edit is the contact form I think the contact form actually looks okay but there are some things we can do so hold on click let me let's click on the form and click edit form here we click edit form again and then once element is loaded we'll click on responsive mode and select the mobile portrait then we'll click on the heading and then make it Center go to style typography make the size 20 now go here and click on style and in the label the label you're going to change the size of the label to 15 we right click copy hit paste out click paste out click paste down right click and then past out then we'll click on the button then we make the button Center aligned then we'll click update sometimes it that's this but in real time it's actually Center aligned if you check on your phone it's going to be Center aligned so now that that's done what we have to do is just click on update and close and now we have our contact for ready to go so we are basically down building the whole website now so now we should go and see how it looks like right so what I'll do is I'll select this page and I'll click on home and this is it guys we are done building our website so as you can see we have our first block oh there's one thing which we forgot to do hold on I'll click edit with element here for the hom page and once element has loaded up what we'll do is we select this container here then we'll click on advanced then we'll go to responsive and then we'll click hide on desktop then we choose update click updates then once we preview our changes again it shouldn't be there so guys we are done building our websit as you can see we have our top bar just like we have here with our um menu logo um and everything everything literally looks the same as we had it on the past website so I um I like to thank you all very very much for watching if you worried about the images that I use don't worry I'm going to put them all in a ra file and I'm going to put them all in my website so once again I'd like to thank you guys all for watching this video um don't forget to like share and subscribe all the views that I get on this video really help me push and do more of them if you guys want any other specific website tutorial just let me know in the comments and I will try my best to do that for you don't forget to check out my channel and all my other videos don't forget to like share and subscribe I love you all and I'll see you in the next one