Avada Theme | How To Make A WordPress Driving School Website With Avada Theme & Fusion Builder 2020

hi everyone this is Imran here and welcome to my youtube channel in today's video we are gonna learn how to make this beautiful car driving school website using avada theme we are gonna learn how to make this what fresh website really from the beginning you are gonna learn more details about the fusion will delight the latest version of Fusion builder and in this version you can build any website like just it's a Ponton builder so it's stay with me and please consider subscribing to my youtube chanel and before we start making this video let's have a look at the design if I scroll down the top part goes away that means it's a sticky header that means it's a sticky header and here goes the banner and scroll down just take the sections parralox image all the sections you need for our driving school website and if you click here it will you it will bring you to the top okay the design is fully responsive and it will show well on other devices also we should start designing this website as we are going to make this website live on the internet we will have to purchase our domain name and our hosting package here you can see every dot IO it's a domain name and there's piles are hosted in a hosting account okay say for example youtube.com it's also our domain name and this content are hosted in a hosting server so for domain and hosting I recommend SiteGround I used their service and well here I am on side round calm and if you hover over hosting and you will see our fresh hosting click on it and here you will find they are popular three packages if you have only one domain you can start with a start up but but this package using this package you can host unlimited websites here you can see unlimited website well you will give some extra features for this package and this package also just decide yourself of any package and hit this button get plan well friends here goes the step number two and here you will register for a domain name if you have a domain name then you will go for the second option I already have a domain but if you don't have I mean if you want to register a domain name then you should consider your brand then your domain names should represent your brand below okay I'm just going to try a demo domain here bada team dot M I just Avada dev calm congratulation the domain Avada dev come is available now here you will add your account information client information payment information parses information you can change your plan here you can change the data center and finally take these two boxes and hit pay now button okay once you have successfully purchased this package then just try to come here on top Heath login button okay and also you will get several emails from side ground and they will provide you the name servers and etc okay just hit login I have already added my email address and password so hit login well once you have successfully locked into your set ground comm account and you will be sent here this is the first landing page here you can see home websites Arby's billing referral marketplace etc and lots of things Ballu but now let's install wordpress and what i'm going to do just click on websites and here you will see website details and from here you will click on side tools then here you can see site security speed what fresh domain etc okay I'm going to click on WordPress and here you can see install and menace in is tell me what pressure just select hot fish we are not going to in estill water pressure newcomers just select it and here you can see application setup you will have to choose a domain name I'm going to search for my sub domain okay I have selected my sub domain and installation path just keep it default and language will be English and unset this I don't need a starter and admin info here you will choose an username the username will be used to access the dashboard or Portrush and I'm just going to use a dummy username for this time being you just what wrote I say admin test okay and email address you and password you can add any password but just click on this inherit bottom to inherit password you can also see the password and if you are not happy with this password you can change it or regenerate just click on this button to regenerate it anytime okay and here you can see an atom in asteroid push multi side but we are not going to invest in any multi site right now what I'm going to do I'm looking to copy this password and hit install now bottom and you can see it's going to be installed well you can see what wish has been installed on that domain obadah dot themes code dotnet now you can see Justin visit the site or you can access that min panel okay here or here it will be here you'll see the list of the website you have installed just I'm going to or he'll just I'm going to access that min panel and again I'm going to visit the site here it is so now we have successfully installed what where CMS using side ground hosting interface okay and you can just anytime log out of this website and again if you want to log in what you will have to do after the domain name say for example this is your website and this is the domain and after the domain name you will type forward slash and WP - admin and hit enter then now you will use the username I have used to the username admin - test and I'm going to use the password hit login okay so by this time if you have followed the step I showed you I hope you could in estill odd fish but you might be on cPanel based wave fasting interface or you might be working on any local host but the process will be same if you are working on any local host environment just skip this step and now you will see the same process for both live server and local host okay now what I'm going to do let's install the theme about a theme here I'm on themeforest.net and here is there ever a theme landing page I have provided the link in the video description if you click on that link you will be sent here and just click on this by now bottom and you will be able to purchase this theme just if I click on buy now here you can see the option to create an account use your name first name last name email address and trap ADA make the payment okay I'm going to sign in to my account and once you have successfully purchased this avada theme then you will see this link download okay and click on download and the theme will be automatically downloaded but I have already downloaded so I'm not going to do this so I'm not going to do this again okay I'm going to browse my hard disk and here you can see that theme I have downloaded and if you unzip this file then you will see this about a full package and just get into it here you will see about a theme just about a dodgy pile okay this is the theme pile so we will install this theme file now just get back to the dashboard and under appearance you can see themes just click on themes as we are going to install the theme from an external source what we'll have to do will have to click on add new and then click on upload theme then click on choose file click on ever a theme and click on Nevada Dodge Jeep heating is done now now the theme has been installed now click on this button to activate it okay by this time we have successfully installed a ibadah theme now what else have to do in estill and update the require plug-in needed and to install any required plug-in will have to register the theme so first step is welcome and second tab is registration ok here you will have to enter the inverter token to complete the registration where you will get the token as we have purchased that theme we will get a purchase code and if you click on this link generate a personal token you will be able to generate our token what you will do you just follow the steps okay once you have successfully generated a token just fished the the just paste the token here okay I have added the inverter token just hit submit now you can see thank you for choosing ibadah congratulation thank you for registering your product okay now what we are going to do we are going to install the required plugins just go to - plugins just click on this button well for this tutorial we will install the required plug-in and this plugin contact Paul Simon okay just install this on and return to the required plug-in in Estela it in estill again and this one [Music] now I have successfully installed the required plugins let's see the website now by now our website look like this but our expected design is that you will design our website like this one ok so what you can do you can also import any demo website if you purchase this theme you will get if you purchase this theme you will be able to install any of this premium quality demos ok just click on preview here you will see all the demos ok you can say any of there but what I'm going to do I'm not going to install any or input any demo data or demo site because I would like to show how to create this website from the beginning and step by step so what I'm going to do I'm going to start designing the website like this one well friends before we start designing let's download the images I have used in the demo website so you will be able to easily follow up the tutorial come to my website in brogni moo.com and here you will see a menu called freebie just click on it and here you will find this step free images for every web design tutorial on yes this is the first tutorial on ever down my channel so this one is the number one just click on free parcels and check out and just use your details to give this image ok once you have successfully got it then you can again come here on Parsis history to get these images and you will be sent several and you will also be sent an email with the piles well I have already got the file here and and I'm just going to unzip it and inside I'll see the images okay so I'm going to get back to the dashboard of the website and click on media here you can see media and click on add new and select files and select all the files so it will be uploaded once and here you can see this files are uploading ok it's done so now if I hover over the library then here you can see I have all the images that I used in the demo website so now I won't have to spend a lot of time to insta upload the images again and again and now let's create some pages as it is the home page ok just click on pages and click on all pages and I have just two default pages but how they start getting a new phase hi everyone by this time we have successfully imported all the media files like images that we will need to design this website and now I would like to show you the menu items we have got after installing the avada theme here you can see the new menu item Avada and fusion builder fusion slider and here elastic slider if we uninstall the avada theme then you won't see this menu items we see this because of avada theme and if I hover over over up then here you can see Fusion better theme option Tim Stratos bla bla just click on Avada and here you can see plugins etc okay I will have to click on fusion pets are fast ok path means some technical updates ok some updates has been some it can be any bug fix or anything else that we should apply every time here you can see pest number these and I'm going to heat up like that apply apply whenever you login to your dashboard then you will check is there any new pet and it available then just hit apply ok now it's all then what I'll have to do I'll have to set the theme options because it's necessary to do before we start designing then click on theme options here is the logo of the fusion and ever daft six point to the current version and if I scroll down here you can see the group of options layout responsive color if I click on color header and header has some submenu and under is of this menu item you will see a lots of setting options but what I'm going to show you just up outlet start from the beginning just layout and I'm going to access the dashboard of this demo site and that is here ok obadah dot IO the domain name every dot IO is for just the demo website and if I come here under layout here you can see layout layout is white not boxed so what I'm going to do just going to shake it and it's also white and side which will be 1200 pixel and paste content padding here on the demo site we have set it to zero because we don't want any padding to the content section or container here it is a container or section I don't see any padding here so we are going to make the content padding:0 okay don't skip this part because if you don't take care of this then sometimes you might say that you are following my tutorial but the result is different and 100% with padding what I sit here hundred percent with bearing zero I don't need any padding so go to go for it zero okay single sidebar with and just keep it default I set it default okay then hit Save Changes now go to the responsive tab and here you will see responsive design is on and gives responsive breakpoint hit a responsive breakpoint site content responsive breakpoint I just lived all the things default if I take the demo site everything is default okay and the next setting is color primary color this is the default primary color but let's see our design click on it here is the primary color and on the demo site you can see the primary color is here so I'm going to give the color code and for your tutorial for your practice purpose here you can see the color code is hash 2165 d2 so I'm going to back here set it here and preferred theme scheme preferred theme is skin should be light okay and preferred color scheme okay something is wrong I'm just going to edit this here the color here okay and here you can see predefined color scheme I will have to add my preferred color here so what I'm going to do click on any color just we don't need these just click on it sorry cancel it I don't click any of this color scheme I just made a mistake so what I'm going to do I'm going to add my color to this color palette so that I can get this color code when I will use okay just I'm going to edit this color then replace it okay here you can see our preferred color has been added and the next color and here is the next color these warrants color I'm going to get the color code and I'm going it back here just I'm going to edit e or add the color code here okay here it is just heat Save Changes okay let's see the next of Shawn header just click on header or hover over header and you will see these options just header and the first option is hid our content header position why does you like to position the header as you can see on the demo site the header is on top so I would like to position the header just click on header on top and select header layout you will see how many one two three four five six seven eight almost eight types of header layout but we used this on okay this one just one is selected already and slide your position we didn't use any slider here so don't worry about the slider position and hit our content we have used the information on fast and social icon on last so firstly would contact info then this is the second for content type so really we give here social icon and phone number okay what is the phone numbers default number by default I have added this you can have this call us today and email just add your email address here then now successfully we have completed our header content and hid our background image in my design demo design we didn't use any header background image as you can see so leave it default let me show you here it is we didn't use any just go to the header styling now and here you can see hit our padding just leave it 0 hid our styling hit our padding:0 hit our shadow if you turn on the shadow just let me show you if I turn on the shadow and hit Save Changes just come over here well I didn't see any significant change here but it might be applicable for any other hidden layout type but I'm going to turn it off again and hit our background color okay so come here and just hit our background color make it white and archive hittable archive hit our background color white hitter border color should be white and he ducked top background color hit our top and this is called header top so we are going to say in the header top color to this one and just few minutes back we added this color to the color palette just click on it and he Save Changes now we are going to take our live site yeah but a dot theme score dotted here you can see the scenes okay hello at the root umbrella more.com okay next on is sticky header just click on a sticky header and here you can see if I scroll down the top bar disappears and the logo gets smaller okay the main you get is smaller this is called streaky hitter so what I'm going to do just going to that demo site okay one thing that I would like to say you don't get confused here one here what are you it's the demo site and here about themes got dotnet is for like tutorial I'm going to sake here what I used because it's impossible to remember everything it's a huge thing the silicon is together okay here you can see firstly I turned the sticky header on and sticky header animation sticky header on color everything so we are going to just turn on the sticky heydo sticky header on tablet okay we can use this together on tablet okay just to make aw and a sticky header on mobile no I still hit up on mobile it should be op sticky header animation on sticky share I had Oh on a sticky header background color okay font color just you can change the font color if you need a sticky header item padding 35 by default and font size 14 or 16 okay hit Save Changes okay if I scroll down here you can see the is together by this time we have completed up to header and now me know okay and the problem is we didn't add any item to the menu now so we are not going to task this options now just we are going to jump to the typography because we will start designing and it will be important for us we are going to jump to the typography and also I will come back to this page again to just work with other options just going to get back to the typography just click on it and here on the typography I have used oxygen font family oxygen then under typography select the font family to oxygen and backup one family will be Arial it's a Google font but if something goes wrong with the Google then this backup font will backup your website Arial block okay font weight and height normal and font size 16 light height 1.8 and font color this color will be used for font color but I am going to add this color to the color palette so I am going to access the color again and here I'm going to say in this color because I won't need this color oh sorry here I'm going to go to the color and it is this color okay now hit Save Changes again coming into the typography body typography oxygen and since the font color what I'll have to do is just reload this phase again just hit Save Changes reload this phase okay here just this color is selected and link color for link color I'll use this color this one okay it's safe senses so here goes all the pages I have created the three pages about us contact and home and I'm just going to edit home page okay and before we start designing this website with infusion builder life let me show you the settings we have under layout here you can see the layout will be wide as our demo site as here on the demo site it is 100% width template so the page template will be 100% width or white and background color for phase will be white okay and background image for phase no image just go to the header display header and header will be 100% width okay background color all the settings bass title bar we don't need any place title one there so so heat update now I'm going to click on this button fusion builder like okay if this is the first time to fusion builder life and here you will see some changes for bubbly and on top and this is the toolbar and here is the panel penny loves theme options based setting and elements okay you will learn on by on just working with this so on the right here you will see the option to edit any element here you can see the pay's option page header what i can do i can create a or add a container everything you see in any section is a container and the element title text and button goes inside the container okay just I'm going to click Add container and and this container is on column container so just click on it and very beginning we will just add the background image and gradient just click on the container option on the right one thing there is one thing that I would like to say that if you hover over the container you will see the setting options on the Left will be column options and on the right will be container options and on the middle you will be able to add element so yes I am going to add a background image on the container so what I'm going to do I'm going to hover over on the right side and here you can see container options tool tip and I'm going to click on this pencil icon if you want to delete you can keep the you can click on this bin button you can save here you can just cologne container okay and you can add another container also what I'm going to do click on this pencil icon or pen icon and here on the right side here on the up and here on the left side you can see the setting panel first of all you can rename the container it's a hero image section so I'm going to name it hero section once you are done just click on the Save button and firstly I'm going to access the design tab and here you can see container link color container Hvar color margin and padding I'm not going to add any marsan just I'm going to add a little padding padding of 15% and bottom padding 15% okay and just navigate to the next tab is busy busy for background color just click on it and here we can see background options you can add any solid color you can add gradient you can add image you can add video okay if you want you can add background background just click here to add any background color okay it's easy I'm going to click here to reset it and never get to the third option image just click on image and I'm going to add a background image we have added all the necessary images so you can do so if you missed the part of the video just come to my website umbrella mode come and go to this link freebies and you can download the image from here here it is free image forever our design tutorial pattern number on now what I'm going to do just going to select the image here it is and scroll down from here you will choose the size I made a mistake when I started creating a website with ibadah that time it was the image was so blurry it took probably these image size and I realized that here I'll have to select the image size so full width or full size now finally click here insert into post and now you can see the image just hit save click on the I icon and here you can see the image okay again click here and go to the general design background okay now here you can see some padding on left some padding on right but just don't go to the page edit and here you can see layout and content 100% with content pigzilla will be zero content padding:0 fixture content padding:0 freezer [Music] hundred-person background image yes background-repeat:no-repeat okay hit publish or hit update now visit this pace okay friends now I have got the solution probably for to remove this padding from the left and from the right just come over here on the pace sitting and just click on template and Sue's 100% width and hit update okay and here just reload this page again and now here you can see it's 100% weight so we could fix the problem and now what I'm going to do just going to add these gradient okay so again come here on the right side and click on the container options as I reloaded this space so I lost it so don't worry if you just or should I say see it's gone again you can click on this pencil icon or pen icon and you will see it again so go to the desire background color and click under background options these aren't gradient and select this color okay this color and chose the second color this pinkish color okay and for the angle I'm going to choose 140 just hit save now here you can see if you want you can just reduce the opacity so come again just reduce the opacity so that you can see through the images also right now it's our time to add this title best driving school to learn best driving skills so as I mentioned earlier if you click on the medial then you will find this button to add element okay and just [Music] here you can see if I hover over on the middle it shows yet element just click on it and here you can see the element phenol wheelers element library 11 and nested element sorry nested columns so builder Elevens I'm going to search for title here you can see titles and the title element finally will open up here you will see the option to add title okay here goes the text so what I'm going to do I'm going to click on the design tab and bring it to center okay left and stem elder font size is the selector form size 46 okay and under design you can see well here under the design tab here you can see title alignment is left aligned and HTML heading size will be ace on if I select - ace - then here you can see color changes and pawn size is 46 horn family we have Susan are selected from family to oxygen so I don't need to change the font family here but if you want you can manage it then margine font color separator I don't like any supporters so click on none okay he'd save oil friends now let's add another element that is text element here you can see so what I'm going to do click here on the medial and here you can see add element below if I click on the plus sign I'll be able to add element below this title ok at 11 below and this element just what is it called panel will open up and you will have to choose an element from here so here you can see text block I'm just going to click on it so here you see the text I have used some dummy text lorem ipsum I'm going first here the text okay and once you have pissed any tips last what they will do just select all the text and here you will see in line editing option for the text only just click on the font color and you can change the font okay and you can add the font family font I fog Rafi font family oxygen is selected by default okay if you need more options more customization just click here here you will see the options okay and click Add element you can add drop gap highlight Papa VAR tooltip okay so just click here and now let's see this two buttons just click here add element below I'm going to do as there are two buttons so I'm going to add to column just add column to row column okay and I'm going to click here to change the column size to on six and column size to on six so here you can see I have two small columns and in each column I will add buttons so as per usual click on this plus sign and scroll down here you can see Bart on just I'm going to search for bottom here you can see bottom so bottom text is here and again here but on OK button text I'm going to hover over here to add or edit the button options firstly bottom text here you can see so in a class so I'm going to change the bottom text enjoy in a class okay and all eyes choose uppercase and alignment will be Center go for design button style custom but on this color but you can just select any other red or go or custom now says the color this color this color okay the color is the car ah to default and here you can see bottom border size or water radius select 50 to make it round that's fine and get back to the general again and here you will add the link say for example if any visitor click on this button so in our class then you will send the visitor to our registration page okay so say for example any registration page then what you will do just you will just get the URL of that page and add here okay and here's you will find off shown and but on target it's important you lose blank then this will open in a new tab okay and hit save again go to the next bottom and click on this pencil icon edit button go to the design click on custom since the color to this color this color yes okay I missed the icon but I'll have to do I'll have to add the icon from here so contact us in the love okay here you can see when I added the icon for the button then the text goes down and if I add more text just say for example contact us then it becomes okay but if I click on upper case then it breaks again so what I'll have to do just click on e here and make it two on four okay just hit update again add the button link here just at the contact page URL here say for example this is the contact page so you will add the link to the bottom else I forgot to add an icon to this bottom so just again click on these button option is scroll down go to design here you can see Zion button unfortunately I don't see the button comes off just I'm going to add this icon for example and Issa and again I'm going to change the column size to on four that's fine and alignment I'm going to change their line meant go to the scenario and alignment center to make it left okay again click here on the bottom option go to the alignment and left just hit Save Changes and I found it very easy to create this section hello guys let's start designing this sections okay already I have created this on so what I'm going to do just hover over here and here you can see at container just click on it and you will see a new container option will be open up and yes it's that two column container so just click on here to and here you can see the option okay and we don't have any background image but I'm going to start designing it firstly we will just take care of the container of runs so click here and here you'll see container option and its site width in this container is site with not 100% width and say it column two actual height etc and go to design and scroll down let's add some padding for top we are going to add 60 fields l4 bottom we are going to add six sixty six seven or 45 sell as much as you want okay now on that left here you can see text and on the right here you can see a mess so I'm going to start with the right on just click here and you can see a dillamond just click on the plus sign and here I'm going to search or Remus oh here's this a mess just click on it and here you can see on the right image element option panel and under Xin error here you can see you can add the image just click on it we are going to add these emails this on and select the size from here full width as it's here so we don't need the full width so what I'm going to do I'm going to use the Sun hand it to a 120 for insert into post here it is and on the right and on the right firstly there is a title we'll come to about a drive in school so click here add 11th and add title so it's scroll down click on this text option yes here we'll come to a what a drive nesco ok now click on the design tab and by default it is selected Ehsan we used a Sun only here but for the rest of the headings will use a Stu I'm going to use a Stu font size is okay but I think there might be something wrong with the off from just go to the typography shading and hid our typography for race to 4 is to oxygen font family font weight should be bold hit Save Changes now here you can see font size let's create 36 font family line height line spacing say for it none okay let's move to the design I'm going to click on save and again just click on text block again click here to add 11 below and I'm going to add text block and here you will see the option to add text just go text here it is and I took the default style but here you can see our drop cap so I'm going to select this P and come here to make it drop gap okay design since the color okay beautiful now on the below here you can see some list items so I'm going to click here on this plus sign and here you can see at 11 below okay here you can see set list nice now here you can see setlist 11th and children this elements are called Sylvan if you sorry if you add more item you will see more silver just I'm going to source one two three four five six and go to the general here you can see sake list icon circle color and from here I'm going to change the color okay now divider you can have divider but I don't like divider okay anyway I'm just going to make this color a bit transparent I with transparent and make this icon color to this so it looks cool now and go to the children and here you can see setlist options just click on it now you can see the individual item or should I say editing option just if I click on it and here you can see I can change the of content also so I'm going to change it to based cars available here you can see it changes and um Kay contains here expert trainers you can change it now I'm going to get back and going to six children Oh difference here you can see it has to koala but unfortunately here you can see only one so something might be wrong I'm going to hit save and get back to the theme option again and here you can see under avada theme options and here you can see fusion builder elements just click on it and here you can see setlist I'm going to check the setting of runs okay friends to solve the issue to make it to column what you will have to do you will have to just create a nested column just if I hover over any part then you can see add 11 below just killing here and you see add 11 below just click on it and here you can see nested column the silicon nested column and click here and here I have added two different nested relevant or nested column so add element I'm going to click on set list and just add 11th okay there so and again add relevant set list okay then just hit say finished and that was the way actually okay in this way you can just air to column and if you want to edit just click on this pencil icon again and open the nested element list element off Shawn just go to the Zener I'll change the color okay again come here set list general since the color if you want you can also change the font family here you will find the font family item size item size 14 okay again go here checklist general and here you will see item size set it to 14 and again here you can see finished just click on it and hit save so finally we could edit this section now we are going to create this parralox section schedule your driving lessons okay now as per usual we are going to air our content to create this section it's a call to action section schedule your driving lessons okay just click here and add container and now here you can see we can choose any of the columnist style but here you can see one five three five on five design but we are going to add in the middle we will leave this true block and we will add element in the middle on like this sunburst but okay so firstly we are going to change the background image okay on the right if I hover over you can see container options just click on it and directly go to the background color busy and directly go to the image add image I'm going to have this image and this time I'll use these full-size in certain to post okay and back to the design here you can see pairing I'm going to add 15% top bottom fifteen percent or ten percent okay so here I'm going to click add element so we have successfully added the background image but still we need to add the gradient here you can see that gradient okay we are going to make it quickly just again get back to the background image and here you can see gradient and karidian collar in their school click here add element and act I tell what is the title schedule your driving license go to the text tab and fist here go to the design select the s2 and here goes some text and again click here to add element I am going to add text block so go to the text drive I have added text here and finally a button then click add 11 below and Bartram the design custom button color this color let's see the bottom text go to the general and since the bottom text and just link go to the design and here I had icon there so now what you can see the nice background color border ideas so here you can see at column and on the right column option here you can see column city editing option just go to the busy and click on background color I'm going to save the color and here it is and go to the general go to design at and you can add padding 65 0 bottom 60 fix their own right 30 fields L on left 30 pizza and here you can see what our size 0 and border radius 40 pixel or 20 20 pages L 20 fizzle 2502 Entwhistle perfect just hit save now click here and here goes it but the background isn't perfectly parralox so what I'm going to do just click here and go to the container of Sean with the background background the MAS and here you can see background position centers and Tom no-repeat and here you can see background parralox select fixed ok then hit save now come here and here you can see background is fixed and it create and it creates nice effect that's cool let's build the next one the Sun stop waiting start running so once again what we are going to do we are going to click here we are going to click here to add our new container ok new container and to column this one to column container and go to the Zener I've and it's 100% with container because hundred percent width and just put the D [Music] okay on the left here you can see the emails and on the right the text so I'm going to click here at 11th and here you can see image and I'm going to click on image I'm going to add this image and from here I'm going to choose the size full size in certain to post okay here it is and on the right this text element on the right click here to add element just click here to add element okay search for title here it is and go to the design since the heading says to to okay now infobox this are infobox okay so click here to add 11 below and I am going to add content boxes the first box will be unlimited support search for I can support health the content now I'm going to change the icon color just scroll up icon color white no here I concur with this and I can color background I can border okay their soul okay that's fine now get back to the content box sitting gillikins in RL and here you can see number of column one is default but change it to two and I'm going to get back to the cildren I'm going to delete the Sun and I'm going to clone and how many we have only four okay now it starts changing the title reasonable fee the second one is reasonable fee and I'm going to change the icon to dollar currency here this in the same way you can change bring change to other content boxes just come here flexible time and another one is standard vehicle just hit save is here now here it is okay but here you can see on the right there is some space okay okay what I'll do have once I have clicked on container of shunts then here you will see that drag and drop off from just drag it go to the design hearin can see on left 28 but make it 2-0 okay just hit save alarm options design oil friends here you can see once I have clicked on the container of shrooms somehow I selected hundred percent width at the beginning but it's still side to it so click on hundred percent weight and hit save now the issue is solved there's fine now it would make something like this okay now let's see how to create this um you hi guys let's see how to create this section here you can see up form and on the right here you can see courses driving courses we offer ok this form is built with contact form 7 plugin if you have any working experience with contact form then you will find it easy and nothing to do it about it's a pretty simple plugin here you can see contact form 7 and yes I think you can remember at the very beginning of this series we installed the contact form 7 plugin ok so I'm going to get back up the dashboard here I'm on the dashboard mmm ok come on here I'm on the dashboard and here you can see contact form 7 plugin ok so and here you can see under forms here goes the shortcode that I have used from the avada demo and just hit save their stuff now I'm going to scroll down and here you can see at container I'm going to click on that container and also this loud 1 3 or 2 3 ok or anything else okay for this time being I'm going to start with the Sun so on left I'll add the form okay and let's see is there any background color or background image yes there is an image on the background so I'm going to add the background image past just I'm going to click here on the right container options just click on container options and here you will see design and scroll down at padding of 66 0 bottom 60 fix 0 and click on busy I'm in background color and click on this image and click on add image and here goes the US highway dot jpg and scroll down here you can see full size now click on insert into post now the image has been added and scrolled on background position is Center center back there and rivet is no repeat and background frolics is fixed it's safe okay now we are going to add the content firstly this form firstly this title actually choose a course click here add title go to the design and select s to chose our course and this text add a textblock event now we are going to add this form okay click here get 11 below and contact form 7 from here I'm going to select on ok request of callback now here you can see there is white background so we are going to come here and edit column options go to design and add padding on top 65 0 bottom 60 fizzle right 20 pixels left 20 pixel okay and for margin as I would like to push this more for mop so I will have to add negative margins or negative margin of 180 for this thing okay so it goes up and go to the busy I'm in background color add background color so I'm going to add white white background Farah okay and get back to the design again we will have to add box shadow yes box shadow and Bella and blur radius 9 and color will be this color it's safe going to click on preview bottom and here you can see it nice so again okay I'm going to add the course titles here so firstly title driving courses we offer so just click here click here add title to the design and the text select the text and says the color okay now kill it here add element below so what we're going to do we are going to add content box okay let's add some image okay hello well let's add this courses so what I'm going to do I'm going to come over here and add columns just click on add columns I'm going to add here you can see our column structure is two three okay so click on add column and two three here it is two three well the solution I have found to display this course images is just in line in the columns just click here and here you can see nested columns and click on this on ok so firstly I'm going to add element emails then I'm going to add lament our title ok then add the image this for women driving I'm going to sense the title go to the design since font learn more button again at element bottom go to the design sorry general learn more alignment Center go to the design and say is the color okay I'm going to choose this default color and what I'm going to do just along this column clone this column along this and again since this image and select this all and the title is adult driving change the title well there's all so you could learn how to clear this section it's safe now let's see how to create in this section our cars hi guys I have already completed this section I mean our courses I have created a forum on here and I listed the courses here and let's see what we are going to create now ok on the demo site after this section we have our cars it's a gallery and you see is a fully gallery if I click on the images then here you can see our nice gallery ok so without wasting any time let's get to be started and as per usual we are going to create our new container on the right side if I hover over here and you will see this option at container edit container or container options : container safe container delete container and you can drag and drop this container okay now click here and add container so I'm going to click on it and it will ask me the column options how many columns would you like to add to the container I'm going to add on the on column here you can see ok just click on on column and once you have successfully created the container firstly let's jump into the up container setting options ok on the right if you hover over and you can see container options just click on this pen icon and here you can see container setting options you can name the container here just in gallery gallery container okay and the setting options has several tabs general design background extra so under general here you can see interior content week as it is up Hulu it in gallery so I'm going to click on 100% width okay and hundred percent hide don't necessarily see it column true equal height that's all now what I'm going to do I'm going to get back here and firstly I'm going to add this and here you okay now listen get to the demo and here you can see some empty space here above the title so there's padding so what I'm going to do never get to the design tab and if you scroll down here you will see the option to add padding I'm just going to add sixty pixel on top I'm going to add sixty pixel on top sorry 60 pixel on top and bottom sixty fixes also and it's safe if you want you can change the background you can add any background image as this design doesn't require any background image okay now I'm going to start adding the element so past element will be the title or curse just click here and add title okay and never get to design and here since the HTML headings high-school-aged - okay and bring it to center fine and if you need you can add some padding or margin but I don't need now okay so it's safe and here you can see the text so I'm going to add our text block I am going to click below sorry I'm going to click here to add element below and this time I'll add text block okay I have added this text and [Applause] you okay just click here to text block off Shawn and I'm going to go to the visuals mode and bring it to Center okay here it is now he'd say and finally we are going to add this element gallery so click here on the plus sign and search for gallery here it is and I'm going to click on it on the right here you can see I have added the gallery element so here goes the child option and on the right here goes in RL and you will see the options to design the gallery so first thing so firstly I'm going to add Remus so here you can see the add image button and here already our default button so I'm going to click on it I'm going to source anywhere and here you can see our cars here it is and you can add image link here and set the target go back and add another image just add he means you can add the image here and you will see the same sitting options so I'm going to add images very quickly just I'm going to copy or clone it okay just going to st. images well friends you can see I have added six images in the gallery so I'm going to hit a Save button and I'm going to click on the preview button now here you can see it has some issue here you can see separator but you can remove the separator and but the main issue is but the main issue is here you can see column gap but on the demo we don't have any gap so what we can do just go to the editing mode again and click on the general so here you can see default layout isn't great and it's a great actually and here you can see picture size will be fixed or auto ok I'm going to click on default for now and here you can see number of column three and here you can see also number of column three and column is spacing I'm going to remove the column spacing and now here you can see no gap and Hobart drive will be zooming and image lightbox lightbox content default okay that's cool now I'm going to hit save again click here okay it's fine but here you can see on the left there is a small gap on the right there is a small gap but I'm going to get back to the container setting option again okay just container options and general go to the design now the issue is solved what I did I added zero padding on the right and on the left let me show you again here you can see I accessed the container or sitting option and I added zero padding for right and zero padding for left so this is it and I'm going to take it again if I click on it here you can see the gallery option okay that's all we could successfully created this option now we are going to build the next option meet our instructors very soon now I'm going to show you how to create this section meet our instructors okay you can say team members well I'm getting back to he here well I am back here and just click this uncheck this preview and now what I'm going to hover over here on right and click on add container and this time what I'll do okay and this time I'm going to choose this column layout one four on four and here this okay and I'm going to hover over here on right to add a container and firstly I'll start with one by one and I'll put the title and description here meet our instructors at title just click element source for title I'm going to paste the title here and go to the design I'm going to select a stew and I'm going to align it to Center and here you can see separator if you don't want just scroll down and here you'll see several select none okay now I'm going to hover over here and add element below I'm going to search for text block and here you can see the text it's a dummy text I'm going to click here okay now I'm going to click here on this bottom to align the text center here it is it's not on center I'm just hoping to select this text and click here now it's Center okay so heat update again here you can add column just click on it at column and now click here okay here you can see column on bottom and on each column we will add team members just click on here add element and I'm going to add person here it is person 11th and here okay see you can add image name title etc so pretty easy I'm just going to click here to edit person and here you can see at picture I have already added the pictures here you can see the picture and the name say for example Imran evo and title what should be wave developer okay and description I'm going to add this text again okay here it is now if I scroll down here you can see I can add link to this image so just I'm going to add a link just this link for example okay and target blank and fix that as Tyler will be glow or anything else you want drop shadow bottom shadow only okay so picture style color fixer border size will be five pigs L and border color suppose these color border yes 20 pixel or 10 pizza how about dive zooming background color you can add background color okay but it doesn't look cool content alignment center social icon social icon position on top bottom social icon style yes and social icon color brown color tilted position top and here you can see several social media link just your Facebook link say for example facebook.com slash Imran dot emo dot eight eight here you can see the link okay now just get the link and paste RIA so in the same way you can add link for Flickr if you have Flickr link you can add LinkedIn URL you can add a lots of social media handle are here Pinterest Twitter link okay sorry it's not Twitter here is the Twitter link beguiling well so I think I could show you how to customize this and once you are done what you will do just I'm going to show you how to duplicate this just duplicate these four times you will also have several columns here unused but to delete this delete this unused columns okay here you can see now what you'll do it will just change the image of each column just click on here click on here and things the image this image in the same way you can send the name description' social media link everything just click here you can send it to these and you can hear and you can sense the emails you can sense the text very nice so hit save and this is the end of this section I think in I believe you enjoyed this section I believe you enjoyed creating this section thank you and next we will create this section are driving packages okay hi guys let's create this section or driving packages it's a pricing table so let's get to restore it here I'm on the demo website and if I hover over here you can see add container and click on add container and I'll go it on column container just click on it okay if in our design we have any background image or background color then we will work with the container background first so just click on here and here you can see container off from just click on container option and on the left here you can see the options firstly maybe get to design and I'm going to add some padding on top I'm going to add 60 fix 0 on bottom I'm going to add 60 fix 0 ok so and never get to be is busy and never get too busy it means background color so here you can see image just click on it to add image just click here [Music] this image add this image and click insert into post okay now have our on left ingredient click on it just click to choose a color to add gradient okay gradient angle I like on for the angle that's cool [Music] okay I'm going to start adding the text so let's give this title and on the middle here you can see at element and click on the plus sign add element and source for title sorry get to the text tab okay here it is but I am going to get to the design and so's is - no no no is on and bring it to center and I don't need separator so just none and if you want you can change the font size to 46 okay that's good and I have some text here so just hit the text again click on the middle to add element below this time I will add text block [Music] well select this text mode and paste to the text here again go to the visual mode and click on center here this now I'm going to select the whole text and here you will see inline editing option just I'm going to change the color sorry that's fine now what I'm going to do I'm going to add this packages basic standard professional and business okay now what I'm going to do I'm going to add four columns okay so just here you can see the option to add columns just click here and this time I'll add on four because I'll have to hold four columns here okay and click here on this plus sign to add 11 and here you will find pricing just search for pricing here it is pricing table okay just click here and here it is first of all the title is basic so you can see pair pricing table and here you can see table option but I'm going to add the content first just at pricing column okay and here you can see a lead item so I'm going to say the title basic and the currency symbol is dollar and currency position before you can bring it to left or right and the price time period okay and here you can see the options to add features okay and here you can see on the bottom is order but what I'm going to do I'm going to add any element from fusion 11 let's click here and click on button and button text will be booked now sorry button URL any URL just say for example I'm going to use this URL and button text book now it insert okay but here you can see the color is different because I select the default color for this design blue okay if you want to change you can change it from the element of runs in the dashboard okay now here you can see the table option is tile on background color white have our color white border color highlighting color where is the highlighting color here it is it should be this color body text color etc and table option and here you can see saying the price color just click here get back table of shown here you can see pricing text color now you can see it changes so it's easy and now what I'm going to do I'm going to never get to settings sorry okay now I'm here I'm going to click on pricing table option okay and here you can see the options but I have three other packages also so it will be easy just click on here and click column column click clone column clone column so that's not now just hover over here and since the title standard things here and here you can see it's changes click here on the - he did the pricing table of shun click here again in the same way I am going to sense for the last one that's all so I'm going to hit save and I'm going to preview it okay that's fine now I'm going to show you how to add this section this testimonial is the most easiest section of this training so I'm going to build this section testimonial okay what I'm going to do I'm back on my website and from here okay I'm going to you know disable the preview here I'm going to click on add container and this time I'll start with this one but here you can see on the medial column is bigger so I will make it two one two and I don't need this just delete this one okay here it is and on the middle here you can see testimonials so firstly what I'm going to do just get some space on this container just click on continue option go to the design or backgrounds for a design and how about over here at padding top 60 philsie air whirring bottom 60 pixel if you want you can add any background image it's up to you okay and now click on the middle to add element and source for testimonial and here see just in brownie more click on here your content goes here company Tim's code link you can add any link okay testimonial I am fully happy I'm so happy [Music] [Music] okay that's fine so now what I'm going to do I'm going to use avatar and emails so click on here and use this on get back and go for general and here it is and now show navigation you can manage the testimonial speed background color just remove the background color if you don't want okay or you can add any background color I'm going to add solid white okay and text color this color okay there so what I'm going to do just again click here for children and clone it and since the image since the text name cherlene etc just hit save that's all just review here it is okay very soon we will start designing this footer okay we'll design the footer like this I hope you could follow every steps I showed you and now we are here I have completed this urn and these are now we are going to show you now let's see how to build this footer and this header I'll just create or solve it very quickly okay so here you can see already a footer but this put our content is maintained by wizard here you can see the footer is default footer and if you want to disable or enable any footer what you will have to do you will have chose us to disable it from the page sitting here we are working on the home page okay so if I just try to access this home page back end what I'm going to do click on this icon edit pace when you create any pace you will see this type of setting options with avada theme on the bottom fusion pace options okay here you can see header if you don't like you can disable header ok if you don't like you can disable footer ok but if you would like to manage the content of the footer you will have to back to the wizard and under appearance themes customize and you will find wizards so click on users and here you will see footer widget on currently it has meta wizard area archive ok delete as I have removed all of these things from here so if you visit this page again you will see nothing here you can see I removed it so if you add any content here that will be displayed here on the footer so on my demo site here you can see the logo and text so what I'm going to add here a dream is okay I'm going to see the back end here on the footer widget on I used image and text so I'm going to show you to do that just from here add emails on photo is it on just add emails this image is our logo actually so if you reload here okay I didn't save it just hit save okay here it is now if you want to add text just add a text block here here it is and I'm going to add in this text that should say and if you reload you will see here now here you can see different color it's not a big issue you just go to header I'm sorry go to ever doubt and here you see theme options and from header footer from footer just click on footer the styling and here you can see footer background color just since the color to this color just pretty easy and free load it again here you can see the color changed o.k and for footer widget to we are going to add some random just footer widget to list custom HTML okay on footer is it true we are going to add custom HTML here this custom HTML if you have solid knowledge of HTML then it will be easy just I have added this HTML code hit save and on the right on the bottom here you can see the links but this are not beautifully designed vertically so what I'm going to do I'm going to show you the CSS code I have added just to go to the theme of shows [Music] custom.css here goes it and here i'm going to add the CSS hit Save Changes now reload the space and here it is and you just write the title important links it's a reload okay in the same way I hope you will be able to create this puta okay and I'm going to show you the footer bottom theme option go to the footer footer content and here you can see under footer content you can say is everything you want so just remove it first I am going to show you what I used footer content and here you can see ctrl-c ctrl-v a street hit Save Changes okay now let's see how to build these beautiful navigation here it is [Music] okay we are going to add the middle or pages here so I'm on the back end just under themes under appearance you will see menos firstly you will have to create camino here menu name so I'm going to name it main menu just click here create menu and you will have to add items to the main what can be the items the pays post custom links categories these are the items that you can add to the main menu or any kind of medalist I'm going to select and click Add to menu hit save menu and now reload it sorry I have something to do just go to the manage location and here you can see main navigation just select the menu main menu we have created earlier hit Save Changes and reload this page again now you can see the content here okay I'm just going to reorder just edit menu I'm going to being the hair home on top reload it okay here you can see our a logo but we should add our own logo okay just go to the theme of shown in just under Avada go to theme options and here you can see logo just add your own logo default logo I'll use the same image for all type of logos just hit Save Changes now reload it here it is and now from the theme of Shawn Liske come here okay and finally I'm going to just remove the margin of the logo understa 10/10 it's safe changes it reload it oh yeah it's cool though still I should decrease the margin to eight eight its Save Changes now let's see me know click on menu and here you can see the options menu height you can make it to 100 why would you like to where would you like to show the menu and the size color typography and the pawn family will be oxygen 14 pixel color this color active my new color what is the active my new color here blue this one is the active color just hit Save Changes reload the page again go to the theme of reneging okay let's see hit her and hit her content top and header style is selected is okay this on and hit her position above it our content it's okay now see hit our styling well actually this if you add more paces or items on the menu then they will get back here they will just be here okay so now what I'm going to show you how we can set the pace to our landing pace if I visit our site now say for example Avada dot seems good dotnet then we see this default page but we have to just navigate to slash forward slash home okay but we need to assign this home page to the landing page of our site okay so we get back to the dashboard and here you can see sitting and go for reading and here you can see reading settings your homepage display and click here and select the home page the home page and hit Save Changes now if we reload the page this home page will be used as the default face okay there Saul okay friends I tried to make it simple but I know what you I don't know but I don't know what you think please let me know through the video comment box I would love to see your comment thank you for watching hope to see you again in the next video

Channel: themesCode

Views: 9,382

Keywords: website, make a wordpress website, avada theme, make a website, how to make a website, create a wordpress website, wordpress website, how to create a website, wordpress, how to build a website, build a wordpress website, how to create a wordpress website, avada, avada tutorial, avada theme tutorial, avada theme review, avada fusion builder, avada fusion builder tutorial, avada fusion, the avada theme, avada theme fusion, make money, avada 6.0 tutorial, driving school website

Id: OaCkqmBcLd0

Length: 164min 0sec (9840 seconds)

Published: Fri Feb 21 2020