How To Build A Business Website From Scratch - Divi Theme

hello everyone and welcome in today's video i'm going to do a step-by-step process of how you build a real website for a small business we are going to be following a design brief a brief is very important because it gives us guidelines that we need to work with as we're designing our website we need to have affordable hosting and a backup system for security we also need to have a website that is easier to edit for the client and also very easy to use so what is important here is a way to capture leads and send emails we also need to be able to sell products or services the website has to be fast and has a corporate feel and most importantly the website should be done in a time frame of three days so this is a crazy brief but i guarantee you that we'll be able to achieve this brief in this tutorial so by the end of this tutorial you're going to have the knowledge to build fast websites with a clear design process the process i'm going to show you is going to be very important because it's going to allow you to design websites super fast you're also going to gain some skills which you can use to design websites for others or even for your own business now let me show you the website we're going to be building so this is our main home page it has a call to action and this is going to take us to our payment page which by the way also works so i'm going to scroll down here we also have this area here which has the features of this service and then over here we also have some background of the company and then finally we have some testimonials now let's move on to the team page we have our pages here with the title here's the team and when i scroll further down here there's some text or some information about the journey to success on the bottom here we also have this form which will help us generate our leads so here we have a beautiful blog page we can cycle through the latest posts here and when i scroll down we can see them neatly laid out finally we have our contact us page and again we have our address and our form so if someone comes over here to our landing page and they click on make a payment it's going to take us to a page where they can add their name email address make a payment and all this information here will be added onto the system now let me show you where it's going to be added so if i come over here we've built an automated system which captures the new customer sends them in a welcome email or automatically so this is a proper system that works for a small business you may be wondering can i use this for any type of business website absolutely you could be a coach you could be a consultant this website can fit pretty much any business model now when someone adds their email address here and signs up they're going to be added onto the mailing list and this is great because you can see all the subscribers here on this graph and when you come over here to the contacts and click on all contacts you'll be able to see the list of all the subscribers and it's going to be easy for you to go in and create a campaign and send them emails so to achieve this design we're going to be using some products which are lists in the video description below we're going to be using siteground for our hosting we're going to be using divi as our page builder and if you purchase any of these using my affiliate link i have some bonuses for you the templates that i'm going to be using here you'll get them absolutely free and i'll give you my full course on how to design websites professionally the course is called web design formula it costs 497 but you get it for free if you either purchase divi or siteground links to all of that in the video description below let's get started all right so the process of designing our website is going to start with domain registration so the domain name is the name that represents you on the internet for example i have funnels to income dot com so if anyone goes to funnels to income dot com i've actually registered that domain name and they're going to come to my website and see that website so you need to register your domain name so the website i use is instant domain search so this is ideal because i can quickly see which domains are available so for example if i type in mac.com i know this one is taken so you can see here that it's in this color and over here as well it is it shows that it is not available but let's say i search for design with mac again i can see here that it's taken so it has to be green so let's go ahead and add funnel there we go so funnel design with mac is available but do not buy it here so this is just a reference just to see that your domain is available or not so once you see that it's available all you have to do is copy here okay copy the domain name so i've just copied it and then now you want to go to siteground now siteground for hosting is fantastic because it's full of features and the page builder we are going to be using in this tutorial is optimized to work with a siteground to give you amazing speeds and also the pricing is fantastic so that's why i highly recommend this it also comes with bonuses if you purchase your hosting through siteground you can just drop me an email and i'll give you some bonuses all the tools that i'll be using in this tutorial and a web design formula course will be absolutely yours if you use this affiliate link but i will be mentioning this as we go throughout the course okay so here we are on siteground so if you use the link that i've provided in the video description below it's going to give you 75 off okay so this is a special link now what we need here is wordpress hosting so i'm going to click here on view plans so we have three plans here we have this one here and you can see our discount has been applied we have three plans 2.99 per month 4.99 per month 7.49 per month so the difference here mainly is this uh the number of websites so over here we have one website for 299. if you add a little bit more you have unlimited websites for 4.99 so as you can see this is a better plan but if you're ambitious and you want to go for a bigger plan this is where you come for this one here the 40 gig of web space and we also have a hundred thousand web visits monthly but all these i mean if especially these two they come with a lot more features and as you can see here if we go to the bottom here we also have an on-demand backup copies ultrafast php staging and git and so on so this one here has all these features but if you really look at this 749 is not too bad per month if you're going to be designing websites for other for others or even just designing your own website which in turn is going to give you some money so if you decide on which plan to go with so in this case i will just go for this one here i'm going to click on get plan right so we have two options here the first option is when you have a domain name and this and the other option here is if you don't have a domain name so right now it's saying register a new domain so this is where you enter the name that we found that was available here so we just want to keep everything under a siteground so this is where you would add this and then make sure you choose the right extension it's a dot-com like that now there are cases where sometimes the dot-com is taken so you could try and use the extension of your country but be careful because you want to make sure that the website you're trying to register does not have a website which has a competing product otherwise you may get into a bit of a problem there okay so now that i've added it here the next step now is to proceed okay but if you already have a domain name just select this one here enter your domain name and then proceed okay so let's say i leave it like that now for domain registration it costs 2.99 per year so i'm going to proceed now and just so you know the domain registration and the hosting are two different things so that is why it is different so once you do that the next step now is to enter your email address so you can just enter your email address here enter your password so the password here that i'm entering is a password for the siteground admin area okay so this is for the siteground admin area so here you can confirm the password and then you move on you enter your first name you enter your last name if you have a tax id you can add it over here but if you don't that is absolutely fine so you enter your name street zip code phone number and so on and then over here you want to add your card number your bank card details your expiration date your code and you also need to add your your name over here now this is a summary of what you are going to purchase so here we have the 12 months and you can see with our discount here it's coming down to 89.88 and this was meant to be 29.99 but it's gone down to 749 per month all right great now moving on here are some extras so we have domain privacy here we also have sg site scanner now i'm not gonna add these because we can always add these later on in our control panel so i'm gonna leave everything as it is right now so all i have is domain registration now when i go further down here this is the total now right now it's showing in um british pounds that is because i'm based in the in the uk but in your case this will be in your own currency now once you're happy with this just click here on i confirm and um you can choose whether you want to receive siteground news and special offers by email and then once you click on pay now you are going to get an email with all your details your login details and all the information that you need about siteground okay so let's say you've got all your information the next step now is to log into siteground okay so that's what we're going to do now so here i am i've clicked login and this is my login page so i'm going to go into my account okay so this is what it looks like i'm just going to give you a quick rundown just to show you where things are because by default it's asking me to install wordpress so here on our dashboard this is basically our main tools that we may need to use we have our file manager our site scanner email accounts and so on i'm not going to go into any of these right now next this is going to show us our website file manager so if you wanted to upload files manually this is where you would do that now over here on security this is where we start to get our features so right now we have our backups and you can see here i have backups pretty much every day so if i click here on these three little buttons i can restore files i can restore the database and this may not sound very important right now but it also answers our brief because in our brief we need to have a website which is secure so if you get hacked and something happens you need to be able to bring your website up and running quickly and we have automatic backups over here which is brilliant okay we also have a site scanner so if you want to scan your website for any vulnerabilities this is where you would do that now over here on speed we have some tools to make our website fast so we have dynamic cache which is right here so you can flush the cache here like that we also have a cdn and you can connect and activate it here and finally we have our in fact you know if you want to see your statistics you can just come over here take a look at your traffic you can go and show which period you want to show here so let's go to september and you can see here i have a bit of traffic going on but anyways i don't want to spend too much time on this siteground dashboard but pretty much this is what it looks like the next step now is to install wordpress so to install wordpress just come over here click on install and manage now there's two options you want to choose wordpress or wordpress plus woocommerce so if you know if you know for sure you're going to be using woocommerce then this is what you want to select okay now you want to click on select and this is where your domain is going to show now remember this is the domain that we registered earlier on and it's showing here leave that as main folder this is where you need to enter your username and your password so the username and password you're going to enter here is the username and password for your wordpress admin dashboard okay and then you just want to make sure install with wordpress starter is selected and then click on install now once you do that if you now click on your website which is web design with mac.com here's what happens you can just click it here as well or just copy the url here so we don't need this anymore if you come to our site web design with mac you can see here on the top this is my domain this is a basic wordpress install so there's nothing here on this website now it's time to log in do some quick setups and get our website up and running so we can start designing it so to log into your wordpress admin dashboard you want to add forward slash wp hyphen admin like that i'm going to enter my username and password so i think it's mac admin and i'm going to enter my password i'm going to say remember me as well and log in now at any point if you forget your password you can always reset it okay so now it's saying welcome uh to our wordpress website blah blah blah i'm gonna click on start in fact you know what i'm gonna exit this i don't really need this okay great so now we are on our dashboard so there's a few things that you're going to notice which are different this is a dashboard which siteground has designed for us so this is what it looks like it also has the tools for us to make our website faster and secure it so sg optimizer the siteground optimizer if you come over here we can enable font optimization and dynamic caching is on so what i'm going to do for now is i'm going to disable this because as you're designing your website sometimes it doesn't work really well because everything is being cached but for the sake of this tutorial i'm just going to disable that and then enable it once we get to the end of our website design process okay so here we also have environment optimization you can enable https so this is great if you want to accept payments on your site and just generally having it on is very secure so you can just activate it like that so i need to log back in not sure why that's the case okay there we go i'm now back in so if i check here i can see https is now enabled now there's also the hot bit optimization i'm not going to worry too much about this for now okay so you can also do a speed test over here as well so you can just analyze and see how fast your website is okay so now that we have wordpress installed the next step now is to add all our pages and create our menu so what i'm going to do while i'm designing my site here i'm going to open my website in a new tab so you can see i can switch between these two so you can see what i'm doing so over here now on this side you can see we don't have any pages we don't even have a menu so that's what we need to do next so i'm going to come over here and we're going to start adding our pages so i'm going to say all pages because i actually have an idea of what pages i have so this sample page needs to go so i'm going to trash that okay so let's add our first page so our first page here is going to be our home page so i'm just going to name it home i am going to publish it now sorry if you didn't see the button here this is the publish button so on the bottom here it says always pre-published checks i'm going to remove that and then click on publish because i don't want this to show twice every time i need to add something okay so i've got my home page i'm going to come back here so i'm going to say add new to add another page so this is going to be and our team i'm going to publish that i'm going to go back on this w here now you can see our pages are being added here which is great so i'm going to add another one so this one is going to be a contact us i'm going to publish that go back and i'm also going to add another page and i'm going to say buy now or make a payment okay so this is going to be for our product that we're going to be selling on our website so i'm going to publish this okay great so i have a few pages now at any stage i can always come over here and add more pages if i need to all right so everything is looking good so far but when i come here on my site and refresh you can see that we still don't have a menu so we want a menu so that when people come over here they can click and go to different pages on our website so let's go and fix that so to fix that back over here you want to come over here to appearance menus next you want to create your menu so i'm going to give it a name i'm going to call this mac menu okay we are going to assign our menu to our primary menu which is the main one and then i'm going to click here on create menu okay great so our menu has been created all we need to do now is to add all our pages that we've just created onto our menu and to add our pages you just click on view all just to make sure you can see all the pages select all the pages like that and add to menu now i'm not sure why we have two home pages here but anyway if you want to get rid of any of these you can just click on this drop down and then click on remove okay great and now we can rearrange these the way we want so i want home to be the first one and then the contact to be the last one now this make a payment page i don't really want this to be on the main menu so what i'm going to do is i'm going to click here on this drop down and remove it now if i remove it from the menu it doesn't mean that it is deleted the page still exists but it just won't show over here on the menu okay so now that i have all this set i'm going to say save menu great so now when i come to my website and refresh notice what happens i can cycle between my pages so if i want to go to contact us i can just click over here and you can see my page has shown up our team is here home is there okay so our menu now is working the next step now is to head over here now in fact you know let me just show you quickly when i come over here on my main page which is the home page it is showing as forward slash home but we want that when people go to web design with mac.com they see a home page so there's a way to set it up and that's what i'm going to show you now because by default it's set to show blog posts so over here now i'm going to go to settings reading so you can see our home page displays latest blog posts we want a static page and we want the page to be the home page great so i can save this next i'm just going to do a refresh here and see what happens and there we go so that is working now our team is showing contacts it's showing all right great so so far so good i'm just going to save that so our design brief states that the website we're going to build needs to be easy to manage and it also needs to be uh easy to use so there are a few options where we can choose what page builder we need to use so what a page builder is is a tool or in this case like a software that enables you to design beautiful websites fast there is two main ones out there which are divi and elementor now there's also breezy there's also what's the other one the other one is called beaver builder so we are going to focus mainly on the two most popular ones which are divi and elementor but there's something very important i need to show you here so when i come over here to elegantthemes.com this these are the makers of divi so here if we take a look at the pricing of dv itself which is the page builder we notice that they have two prices eighty nine dollars per year you can design unlimited websites unlimited usage you can use it on as many websites as you want just for one price and this is what you need to pay every year over here same thing unlimited you can have as many updates as you want you don't need to pay any extra and this is a lifetime license you only paid once and that's it so you may be thinking well mac why are you showing me this so over here this is just to help you make a decision okay so over here on elementor we have 49 per year for just one website now if you want to have a bit more three websites are going to cost 99 per year so back over here we can see already the three websites are way more expensive than this 89 because elementary is giving you three websites for 99 and divi is saying 89 for as many websites as you want to design you see what i mean so already this now is really losing the fight when it comes to the pricing and then it goes on 25 websites it's 199 per year and then for a hundred pro websites it's 499 per year so still there is no lifetime deal here so over here with divi for 249 you have a lifetime deal and there's plenty of support and even in my case i have a lot of courses that teach you how to be efficient and and how to design professional looking websites with divi so in this case i am going to choose divi because number one it is very easy to use number two the pricing structure is fantastic because what you can do is you can buy this license whether you want to go for the yearly one 89 or lifetime personally i'll go with lifetime because if i need to make my money back all i have to do is to design one website for a client or even a friend or family and i've got my money back and i still have the license and you can still design unlimited websites so i also have a special link in the video description below it's going to give you 10 off and you also get my bonuses which is a free course for you the course costs 497 but you're gonna get it for free and i'm also going to throw in my templates which i'll be showing you how to use in this uh tutorial okay so enough about that now let's install divi so i've already gone ahead and purchased my account so all i have to do is to log into my account now by coming over here and clicking on log in so this is my account area i just need to click here to download the theme and then i need to come over here to my account and copy my api key so i'm going to scroll down come over here to api keys and here we go so this is my api key i'm going to click here to copy so once my api key is copied i'm now going to come over here to my website to install divi come over here to appearance so we have all these themes here we want to add our one so i'm going to click on add new upload theme i'm going to drag and drop it here click on install now okay so my theme has been installed and it's confirmed i'm going to click on activate okay so dv has been activated now so when i come back over here so this is the default template so when i refresh now you're going to notice that this is now different so divi is now running this website all right fantastic so now that divi is running our website the next step now is to start designing our website and make it look really really nice so when we take a look here we notice that our header here is not really designed our footer here is not designed and let's say i need to search for something on on this website so let's say i want to search for something like say mac right we notice that it says make a payment oh that's because it picked up the first three words okay so let's just add some gibberish there okay if i search you notice that the page is just saying no results found okay there's no style to it it doesn't really look very very exciting now before we continue i just want to do something very quickly which is something i forgot now remember that api key that i copied from my dashboard over here i've copied it in fact let me do it one more time just to make sure so back over here i need to come to divi and then go to theme options so here on theme options i need to go to updates enter my username and then enter my api key in here by pasting it and then i'm gonna hit save changes now it's important that we save our api key because this is how we get automatic updates and we can also get support okay great so now that i have this all set over here on our site we can see that our footer here doesn't look great we don't even have a header and a lot of the the structure of our website is not really there so what are we going to do now is i'm going to now install a template because i don't want to uh spend so much time creating the footer creating the header and you know creating all these areas is going to take hours and hours and hours so i want to show you a quick way using one of my tools and what i'm going to show you is my divi ultimate template so this is my product and then over here it costs a foot i mean in fact it's 97 because the offer now is gone but you get it absolutely free if you purchase divi using my affiliate link i will give you this as a bonus as well because this is going to save you time so if we come over here to the description the divi ultimate template is a time and money saver because it has everything you need to get you up and running fast now this includes your headers your footers your 404 pages your blog pages your search results page all that is designed for you so this is how powerful this is going to save us a lot of time here when it comes to designing our website now if you want to further customize this and know how to use it i also have a mini course that comes with it and it also comes with a color palette okay you can use this on unlimited websites and all that good stuff the next step now is let us go and install this now in your case you're going to get an email with a folder that has all these files so the folder is going to look something like this so here's the dv ultimate template you need to double click on it okay so the file now i mean the file now has been opened you want to double you want to double click on divi ultimate template and these are the two files that we need to use and let me show you how to install them so back over here on our website we need to go to theme builder so if you're on the dashboard just make sure you come all the way down here to divi just hover over it or you can click on it and then click on theme builder so this here is where our templates go so right now we don't have any templates so you want to click on these two arrows here so i'm going to click on these two arrows click on import and it's time now to import our template so to import it you can just either click here where it says no file selected and then you can search for this manually or just drag and drop it so what we need here is the dv ultimate template so there we go drag and drop it here and then click on import theme builder templates so this now has saved us so much time in designing our 404 page our blog pages and so on so you can see all these are designed for us okay just to show you what happens if i try to go to a page that doesn't exist so i know a page called mksd does not exist so if i hit enter you see it just says no results found and the layout here doesn't even look great but now that i've installed this template if i hit save changes notice what happens i'm going to come back and refresh the page boom this is our error page now look at that just by installing it i've totally transformed my website so i can click on go home it's going to take us to our home page and now we have a header area you can see it changes color when i start scrolling and over here we now have a beautiful footer which you can go in and customize by the way we also have an email opt-in and this is one of our requirements for our brief and i'll show you how to set it all up and we also have our social media icons here as well when i go to our team notice what happens we have this area here designed for us our page title is going to show and this is going to happen on all our pages and this is happening automatically so this has saved us so much time now notice what happens now remember when i tried to search something the page did not look great so when i search now notice what happens we now have a nice beautiful page which has our search results now if our results were found they would be displayed over here so this is fantastic it's looking great now what we also need to do here is to go back over here to theme options because the next file we need to install is our color palette so to install our color palettes click here in fact by the way this is our color palette you can go and manually add your own colors in here so the tool that i would use for that is coolers dot co this is a fantastic color generator so let me just close out of here and start the generator so if you struggle to uh add your colors and that match and work well together this will do the job for you so what i normally do is i just click on this plus button and make sure i have seven colors so is this seven one two three four five six seven okay seven because over here i have one two three four five six seven oh i need eight actually so let's add one more color here okay so that's eight colors so all you have to do is to click here on the space bar on your computer and this is going to start to generate colors for you and these are colors that work well together so the technique here when it comes to uh generating your colors is when you found a color palette like for example this one here you want to play around with your colors and make sure you have really dark ones and a really light one because you want to have great contrast as you're designing your site so in this case what i would do is i would go into this color right here and push it up a bit to this really dark color this dark purple i also need a complementing color and by the way you can move these colors around like that you can put them side by side and see how they look so this is the color here i want to use as my text color or the light sorry the light color so i'm going to go in and really bring it down like that okay great so the rest of the colors here i can just tweak them so i may want to use this one here because this i think really complements very well with this one so i'm going to go in and bump it bump it up a little bit like that maybe even a bit more so it's more prominent okay and then the rest of the colors here as we can see they're very very close together so i'm just going to go in and just brighten them up a little bit and do the same over here just brighten brushing them up so let's go and do that they're a bit dull but now i think they look a bit better okay so here is the final one um maybe we can go like that maybe even lighter okay let's go with lighter so this process here is a bit fun because you can play around and see how these colors work but at least you have a guide to show you how you can create your colors so i have gone through the process of creating a color palette for you but if you want to use let's say this color palette and you're happy with what you've designed to add your colors just click here on copy hex come back over here to your theme options click on the first color here and paste your hexadecimal value like that move on to the next one so this one here will be our next color i'm going to copy that come over here click so this is the second color paste that so basically we are overriding these colors with these colors that's basically what we're doing but i have created the colors already for you so what i'm going to do now is to click on portability here click on import and now i need to find that file that we opened earlier on which is this one right here so the first file we installed was the dv ultimate template now we're adding the dv ultimate template colors okay so i'm going to drag and drop it here and then i'm going to click on import dvd options so my color palette now has been added so you can see my color palette has been added i'm really happy with that now i'm going to hit save and my colors are saved if you want to add your logo this is where you would add it so i'm just going to hit reset here but this is where you'd upload your logo you can just click here so let's say i want to use funnels to income as my logo i can just click there set as logo and then hit save changes okay now that's saved if i come back to my site and refresh boom my logo is now up there and we are off to go okay so there is one page that that's missing here because usually when you design a website it's highly recommended that you have a blog on your website because that's how we're going to generate our leads as well so back over here i'm going to create another page and this time it's going to be new page and we're going to call this blog okay so i'm just going to publish it i'm not going to add anything here just publish it and then i need to set it up correctly so to set it up correctly you want to come over here to settings reading so our post page which is our blog page needs to be assigned and i'm going to say blog save changes okay we're good to go right so at this stage we can now start adding content onto our website so the very first type of contents you want to add are your images for your website so this is very important it just saves you a lot of time as you're designing your website so we need to add our images so the services that i use are pexels.com so let's head over here to pixels.com there we go you can also use unsplash.com so these are royalty free images you can use these as many times as you want as long as you specify where you got them from you should be fine so you can use this commercially you can use them on your website and so on so what i do here is let's say i'm designing a website and maybe they sell drones or something i can just search for drones or drone and there we go so here we have some drones so this is where i would start downloading my images and you can also set the orient orientation so if you want a horizontal images you can just select horizontal here if you want uh vertical you can just select vertical so let's go with horizontal so already i can use say this one here this mavic 2 and then when you download make sure you don't exceed 1920 by 1280 for your main hero images so i will select that download it and download all the images that i need until i have all of them on my computer now once i'm happy with all my images all i have to do is to add those images to my website so let me show you where my images are because i've already gone ahead and downloaded them so they're here on my desktop okay so website images here they are i'm double click that folder and these are all my images that i'm going to be using so all i have to do now is to add them to my website so i'm going to come over here click on media and this is now going to open our library so all you do is you highlight all your images like that and then just drag and drop them here it might take a while to add them on to your site so you can see all my images are now being added that means when i start designing my website it is going to be easy for me to design my website okay so we've added all our images into our library so you might be thinking now well is it time to build our website and the answer is not so fast and i'll tell you why when you use divi it has its own uh default styles so when you create a button it has a generic in fact you know what let me show you so let's say we are building a brand new page here so i'm going to come over here and let's go to all pages because we did create some pages without any content on them so what i'm going to show you here is what's going to really help you speed up your design process so i'm going to choose this page here as an example i'm going to click on edit we're going to uh use the div ability to edit this page and then here because this is the first time it's going to ask us to either take a tour or start building so i'm going to start building okay so we're going to build this page from scratch like that so let's say i want to add a button or even some text on my site so i'm going to go in and search for my text module which is right here i'm going to select that now the way i prefer working is when this is snapped over to the left so i can see what i'm doing here so as you can see here the challenge is every time i'm going to be adding some text i need to go in and customize it so for example let's say i want a specific font to this i'll come over here to design click on text and then i'll choose my font here so let's say i want to go with monsterat here's my font you can see it's updated here i need to update the size maybe a little bit of the line height let's just add a bit more okay so let's say that's the size next i may need to add a button so i'm going to click on this plus button here search for my button module and here it is i want to select it and again it has this default look to it maybe i want to have a solid color so if i need to do that i'll come over here to design click on button and then i'll activate use custom styles for button and i'll start customizing it so let's say my background color is going to be this color here i'm going to add my border as well and my text color now needs to be easier to read so i'm going to set white to that and maybe i need to change the font i'll come over here go to my font and let's choose monster at there we go i'm going to select that so you can see all the steps that i'm going through and let's say i'm happy with that i'll save right so let's say i'm designing designing designing and i need to add more content right so i'll click here on this plus button maybe this time i'm going to add two columns and in this column here i'm gonna add some text so i'm gonna select my text module now notice that i've just gone through the whole process of customizing this text but now it comes in as the dv standard over and over and over again now this is going to take you a long time to complete your website because you'd have to go in and re-add all the settings over here same thing when it comes to the button if i add my my button here i'm gonna select it okay so you see that it comes with the dv default so we don't want to do that so thankfully i've created a style guide for you so these are all the presets done for you the button presets they have text presets heading presets all that stuff designed for you let me show you how to install it but before i do that let me show you the product first because it is a paid product but you get it for free if you purchase div using my affiliate link so let me show you so this product is called the divi style guide pro so you can build professional website super fast because i've designed all the modules for you so if i scroll down here again my offer is ended but it goes for 97 you'll get it absolutely free as i mentioned if you buy divi or the hosting using my affiliate link okay so i've gone ahead and downloaded it so it's time now to install it onto our website and let me show you how you do it okay so back over here i mean we're not going to save any of this stuff that we've done so i'm just going to delete this and go back to wordpress dashboard okay right so we're back to our dashboard so to install it all you have to do is to start off by creating a brand new page so i'm going to come over here click on add new i'm going to call this page style guide so name that style guide i'm gonna use the divi builder and build from scratch okay so what i'm gonna do now is i'm gonna find that file it's on my computer so in your case you will download it i will give you access to that and here it is dv style guide pro double click on that okay now it's open this is what we're interested in the dv style guide pro double click again and we have two files now we have already gone ahead and installed the color palette so we don't need the color palette here all we need now is the divi style guide pro so all you do is to drag and drop it here now this step is very very important if you miss this this will not work you need to click here where it says import presets okay go ahead click on that and then import dv builder layout excellent so now we have all our styles so i'm going to save this page in fact i'm going to publish it it's very important we publish it but this page should only be used for reference okay don't add it onto the menu here it doesn't belong there this is just for our reference so what i'm going to do now is i'm going to open my website in a new tab and then start designing okay so i am going to exit the visual builder here and then leave this open okay so why do we need to leave it open i can reference this and say okay so this is the hero style this one here is hero 2. so these are the styles we have so you can choose any one of these so this is our heading 1 heading 2 heading 3. this is our notices this is our testimonial so if you at any point you want to add testimonials this is what it's going to look like so you can just have an idea look at all these buttons here already designed for you now it's time to build our website so let's start with the home page so to build our home page we are going to come over here to all pages and i'm going to come to the home page right here click on edit with divi and i'm going to build this from scratch okay so first things first we are going to design our hero area so i'm going to click here on this plus button go to full width and what i need here is a full width header so i'm going to select that i'm going to snap this over to the left so i can see what i'm designing so as you can see this is the default content that comes with this full width header now remember we have our style guide so i'm going to come back over here and just take a look at our headers and see which one i'm gonna go with so i'm gonna go with number two okay so back over here i'm gonna click on this drop down now you see our heroes hero 1 hero 2 and hero 3. so i'm going to select that and look it has my design here for me all i have to do now is to go in and update this text so i'm going to use a bunch of lorem ipsum text so i'm going to copy this and use as my main title so i'm going to copy that come over here to my site and just replace the text like that now in your case this is where you'd like to add your title for your website what your website is about and then over here is where you want to add your description okay so i'm going to add my description here i'm just going to grab a paragraph like that copy that come over here and i'm just going to paste it over here like that so now that's my description my button here is already designed for me and you can see here that it is pretty cool all right so we're not done yet because we need to add an image to this so i'm going to come over here to images click on this plus button to add our header image so the image i'm going to add here is going to be let's have a look so we're going to try different images here and see which one works so i'm going to try this one here upload image and there we go so our image has been added now you may want to reduce the size a little bit uh if it's a bit too big for you and let me show you how to do that all you have to do is to click on this paint brush icon and first of all let's reduce our line height it's a bit too much okay and then we're going to reduce the size as well so let's go with 58 i think that looks great i'm gonna save that and we have this section here on the top we don't need that so we can just delete it excellent so now we have our main hero area and notice that we didn't we didn't spend too much time because all our presets are there for us already okay so this is where the fun begins i'm going to click here on this plus button we're going to add another regular section now this time it's going to be a single row and in this row i'm going to add some text like that now we have a preset so i want um this text to represent the title for this section itself so i'm going to come back over here i'm going to copy some dummy text okay so this is going to act as my section title so okay so what we're going to do next is i'm going to highlight this and i'm going to make this some heading text maybe heading 2 so i have a preset for this so i'm going to come over here on this drop down and i'm going to go for section description look at that just like that my section description has been added and it looks really nice i didn't even need to do much because i already have my presets done okay so i'm going to save that because that's ready to go now there's a few things that i also need to do here and that is every time i add a section i want to add my my padding so i'm going to click here on my section settings i'm going to come over here on the drop down and you can see it says 10 padding i'm going to make sure this is what happens every time so i'm going to assign this as a default so i'm going to select that i'm going to say yes great so now you can see i've added my padding so that's going to be 10 i'm going to save that so the same thing is going to apply to my rows so i'm going to come over here to my row settings click on the drop down and i have my row here at 70 full width again i'm going to make this the default save that save one more time and that's looking great already next i'm going to add my services so i'm going to click here on these three columns and what we're going to add in here are blurbs so i'm going to search for my blurb like that okay great you can see here it comes in as a standard when i click down on this drop down you see here we have preset one two three four blah blah blah blah and this is why we need to have this guide because this guide will tell us what these blurbs look like so i'm gonna keep going keep going keep going until i get to my blurbs which are right here so this is now a style one style two style three four and so on so the one i'm going to need here is something very basic okay so i'm going to go with um let's go with this style here so this is a standard blurb so i'm going to come over here and i'm going to make the standard blurb as a default preset by clicking here on the star i'm going to say yes and there we go we have it so let's add our content so i'm going to copy a bunch of text from here come back replace my text here like that great now i need to add my title i'm just going to replace this like that so right now we have image and icon we don't want this image here we want to add an icon so i'm going to come in here click on use icon and i can start adding my icons now so i'm going to start with let's go with this one here and if i need to customize it i can always click here on this paint brush icon i can change my colors and so on but i want to leave that as it is i like the style i'm going to save that and i already have my style so if i want to further customize this i can also go in like that and add a border around it so or even a drop shadow so i'm going to come over here to design let's go to box shadow okay so these are the different shadows look at that so just by clicking that i have my shadows so this could be maybe the style you want to go with but you know what the strength here is a bit too much so let's bring it down a little bit like that and and let's just spread it a little bit and then bring the blur down okay let's bring it up and reduce it like that okay so you just have to play around with the settings here until you're happy with uh what it looks like so i want to i want this very very subtle okay like that so what i can do now is i can save this like that and that's how it looks so i know i'm gonna have two identical ones to this so to save me time i'm just gonna duplicate this twice drag and drop and then we're gonna do the same drag and drop there we go so here are our services i'm gonna go in now and change the icon so image and icon let's change this one to maybe this chat save that come over here click on the gear icon i'm going to change this one as well image and icon and let's go with this download thingy and save great so now we have our features and that's looking great let's save this page just in case something happens and we lose all our settings i'm going to save that okay so we have our section designed here we need to create another one so you can see the colors i'm using here from my color palette also answers our design brief which is to have this website look uh corporate all right so let's move on i'm gonna come over here again and click on this plus button here to add my new section it's gonna be a regular section and i'm going to have two equal okay two equal columns and on the left column i'm gonna have some text so i'm gonna search for my text module here and let's go ahead and change this to uh normal text so we're gonna go to paragraph text and again i'm gonna make this the default because i don't wanna keep um changing it as i as i come over here let's add our text so i'm going to copy a bunch of text from here and this is going to serve as our dummy text i'm also going to add a title to this so i'm just going to grab a bunch of text here back on my site i'm just going to hit enter and set this to heading two so i'm gonna highlight it click on the drop-down set this to heading two and then on the top here i'm also going to choose heading two so now this is looking great so i'm going to save that now i'm going to do something different here i'm going to change the background of this section so i'm going to come over here and let's choose a color so the color i'm going to go with is perhaps this one here okay so i'm gonna go with that for uh this background all right great or should i go with that all right let's try this one that's the beauty of having a color palette you can play around with these colors and see what you prefer so i'm gonna save that and then i'm just going to come back and just adjust my colors here so we can have great contrast so i'm going to click on this pencil icon and let's add this color here as our main heading and i'm also going to do the same here set this to white and i think that's great i'm going to save that over here on the right i need to add a video okay so i'm going to search for my video module and here it is so to add a video you would come over here to add video click on insert from url and this is where you would paste your url if it's youtube you just paste it here and that's how you add your video but in in this example i'm not going to do that i want to add something even more important and that is our overlay image so i'm going to click on this plus button here and add our overlay image so i'm going to go with this one here and will that work or should we try something like this there's so much to choose from it's crazy all right we're gonna go with this one here okay so that's gonna be our overlay image because we don't want that youtube icon it doesn't look great and over here i also have some presets i'm gonna click on the drop down and then i'm gonna choose this video preset i'm going to make this the default just in case i may want to use this again so that's going to be my icon color i'm going to save that and pretty much my section is done next let's add one more and this section here is going to have our testimonials okay so let me choose regular and i'm going to have a single column here and i'm just going to close this so i want to work really fast here so what i'm going to do is i'm going to copy this section here i'm in this row so i'm going to right click i'm going to copy row scroll down [Music] and i'm going to right click and paste the row where it's pasted oh there it is right at the bottom there we go and then i'm just going to drag this to the bottom like that great all right so we're getting there slowly uh you may want to change this text as well because it's going to be the same as this text right here all right so what we're going to do now is we're going to go in and add our testimonial so i'm going to search for testimonial and here it is select that now we have presets remember everything is designed for you so let's take a look at our testimonials here and see which one we are going to use so let's just go back i think it's up here okay there we go so these are the testimonials so you know what i'm going to go with this one right here so let's come back and click on this drop down so let's go with testimonial i think it's let's go with three actually that works or maybe four yeah let's go with four i think this just follows the style that we have all right so all i have to do now is to go in and customize this so first of all i need to paste my dummy text for my testimonial come back over here i'm gonna replace this [Music] like that name uh okay this is going to be jane doe okay and i just i also need to add an image here so okay let's add the company okay let's just call this mac dot co um okay teacher would that work nah okay let's leave the title that should be fine now we need to add an image so i'm gonna come over here click on uh anywhere here and let's choose our image so the image i'm going to go with is okay let's go with this one here upload image and boom we have our image i am going to now save changes now let me show you a quick way of going in and adding more testimonials so you want to click here on this gear icon on your row settings and then just add more columns by just duplicating it like that look at that boom so now i have four columns that i've just duplicated which is fantastic so now i can save this and then go into each individual one here and change the name and change the image so i'm going to go in i'm going to go to image click here and let's add a lady this time okay let's go with this one upload image boom we have our image there we can change the name so let's come over here to text oh i said jane doe for this one all right let's change that okay let's go back in here that can be jane doe and this could be mr mac save that so as you can see you can just pretty much go into uh each each and every one of these and just change the information okay so this one here is going to be susan doe i'll just leave the companies in fact let's just get get rid of the company here all right now we need to change the image so i'm going to click here and it's going to be this one here upload image there we go save that okay finally this could be a mic let's change the image click on here and this is mike excellent so these are the testimonials for our page and that's looking great already i'm going to save this oh in fact before i save i would like to add a bit more space here let's set this to about 80 percent so i'm going to come over here to sizing and we're going to set this to 80 i want it slightly bigger okay let's do the maximum width as well great so i think that looks that's looking nice i'm going to save that we're going to save this one more time so that is our homepage great so our homepage has been designed we have our um we have this area here which shows our features a bit of a story here we have a video we also have our testimonials right great so while we're here let me save this because we don't want to mess things up here okay so let's answer one of the requirements and that is to grow an a mailing list so what we're going to do now we're going to go in and in fact you know what before we do the mailing list what we need to do is to make sure that we set up our call to action button here so let's go back to our page or to our pages so i'm going to open up my dashboard in a new tab so remember we created a page uh where is it so over here on all pages it is make a payment okay so this is the page that i'm interested in i'm going to say view so this page here is the page where we're going to add our payment information and for our consultancy business someone can just click on the home page and then go to the payment page so i've just copied this url okay let's just make sure it's copied copy and then back over here we want to come over here and add that link okay so instead of saying click here i'm going to say make a payment okay and we also need to add the url so i'm going to come over here to link so i think this is button one is that it yes this is button one so let's add a link to button one i'm gonna save that save one more time okay so if someone lands on this page and they want to uh take on the consultancy uh that's on offer here they can just click on make a payment and that will take them to this page to make the payment but we haven't created the page yet so we are going to be creating it very soon so let's save this and we're now going to create the other pages so we need to move fast now and create the rest of the pages so when i come back over here we have our team and contact okay so let's create our team page so i'm going to come over here we need to exit the visual builder first it's very important so now we can go to in fact let's just scroll through and take a look at this page look at that it's simple it's clean and it will do the job all right so i'm going to go to our team so let's enable the visual builder here i'm going to build this from scratch and uh for the team let's have three members so first of all let's add our description here so i'm gonna add my text module like that let's add our description okay so i'm going to paste my description in here then i'm just going to say the dream team i'm going to highlight this set this to heading 2 and then we're going to choose our preset here and this is our section description boom that's done save that i'm going to add the team and a bunch of texts so i'm going to come over here add new row so let's add three guys here so now i'm going to add a blurb so i'm going to search for it there we go and this time we're just going to have a name so i'm going to come over here and let's add our name so the dream team is comprised of let's call this joseph okay now we're going to stylize this even further by coming over here to the background and let's add a background color now let's add our image so i'm going to come over here to image and icon this time we're not going to use an icon so i'm going to click here and choose my image here so i'm going to go with this one that's not joseph right let's change this to jane okay so that's our image right there what we could also do here is if you want to get rid of this border here we can do that in fact i really like this border let's leave it as it is let's just change the name so i'm going to click here and let's change the name make it much easier to read i'm going to save that right so let's duplicate this and have a few more so i'm going to duplicate like that drag it over here duplicate again drag it over here right so i'm going to go in now by clicking this gear icon let's change our image so this time i'm going to go with this one upload image fantastic all right so let's change the background this time so we're gonna go with something a bit darker yep i think i like that in fact you know what yeah it's okay let's go with that let's change the name okay so this could be peter save that okay we've got one more i'm gonna go in let's change the background and this time we're gonna go with uh let's go with that so those are colors let's change our image okay we're going to come over here and this time we're going to go with this one here okay great and let's change the name i'm running out of names now so this is going to be nathan how about that all right so i'm going to save that so that's the dream team dream team this is the information here now let's add another section so let's add it as a regular section so this time we're going to have a two-thirds one-third so let's go with um okay let's go with this okay great so on the left side i'm going to add an image i'm gonna select it click anywhere here and the image i'm gonna go with is going to be let's have a look okay let's go with this image right here okay i'm gonna save that so this is going to have a bit of a backstory so i'm going to add my text module here like that so we may need to swap this because i have it the other way around anyway let's first add our content i'm going to copy these paragraphs here like that okay let's go to our team we're going to paste great now we need the title and let's just see how we got started oh let's just call this the journey okay so the journey to success let's highlight this and set this to heading two oops click on this drop down heading two and let's choose heading two boom okay so that's looking great i'm gonna save that and maybe we may want to add a color here in the background let's see what we have yeah i think that works okay we're gonna go with that save that so let's have a look so this image here might be a bit too big so we can also play around with our settings here and switch it a bit around and yes i think this looks much better now look at that fantastic so this is the our team okay we're gonna save that okay i like that brilliant okay so let's exit the visual builder now we need to go to the contact page click on contact us and let's enable the visual builder okay so let's build this from scratch so this page is going to be very basic because all i'm going to need is a form and the address and phone numbers so i'm going to click here on two equal columns so on the left side we're going to have a text module and then i'm just going to say address hit enter and then i'm just going to paste the information okay so i've just added my address here let's set this to heading two and then we're going to come over here and set heading two okay so that's our address but you know what i don't like how this looks because the spacing between that is a bit too much so i'm going to come to that tab reduce that a little bit not sure why that happened there we go that looks much better now so i'm going to save that now we are going to add another module so i'm going to click here on this plus button this time the module is going to be a blurb so i'm going to search for blurb there it is so what we're going to add is a bit different i'm going to come over here to my style guide and let's look for our blurbs and see what cells we have so i'm going to keep going down until i find my blurbs which are right here so this is what i'm looking for blurb style number four okay that's what i'm looking for i'm gonna come back and we're gonna choose number four so i think this shows our information better so we need a phone number here so i'm gonna add plus four four seven eight nine five three three nine eight i don't try and call the number because it doesn't exist okay so now we need to add our icon so i'm gonna come to image and icon activate that and i'm just gonna look for a phone icon here it is boom i've got my phone icon and i also need to change this number and let's make it bold we really wanted to stand out okay right so that looking that's looking great i'm going to save that we're going to duplicate this because we're also going to need maybe an email so let's add our email here right so that's my email there and i also need to change the icon so i'm going to come to image and icon and this time we need the email icon so let's look for it and here it is boom right so that's looking great i'm going to save that now over here we need a form so i'm going to search for form add my contact form now this is the generic one so when i come back to my style guide i can scroll all the way down here and see what our forms look like so the cell i'm gonna go with is which style should i go with okay let's go with contact form one the number one style so i'm gonna click on the drop down there we go boom that's the one i want i'm going to save that and then i'm going to duplicate oh i can't do that so let me add another module here and this is going to be a text module i'm going to select that so i'm going to say send and email i want to highlight it set this to heading 2 and over here make sure it's set to heading two we're gonna save that right so that's looking great i'm just gonna drag this to the top like that and this is looking great okay so let me just make sure everything is close together here by coming over here to design and no you know what let's leave it as it is i'm going to save that and that's our contact page nice and simple we're not going to make it complicated right so pretty much we have all our pages designed we're now going to add our email opt-in because in our brief we are supposed to be able to collect leads okay so collecting leads is going to be very very important so let's do that so what we're going to do now is we're going to uh install a software called fluentcrm the link is going to be in the description below there's a 20 discount if you use that link and it also comes with a mini course that shows you uh how to use it if you want to extend its features okay so fluid crm we need to download it and install it so first of all i'm going to come over here to my dashboard and we're going to come to plugins click on add new i'm going to click on search i'm going to search for fluent crm search for it and here it is click install we're going to activate it great now there's also another another plugin that we need which is going to allow us to take the payments it's called affluent forms so i'm going to search for it here it is it's this one right here click on install we're going to activate it okay now it's time to uh install the pro versions of these two plugins that i've just installed because these ones here are lacking in the functionality that we're going to need okay so for fluent forms i've already gone ahead and purchased it so i'm going to now download it so i'm going to come over here to view details and downloads so i'm going to download the two plugins fluent crm which is going to control our emails and fluent forms which is going to enable us to do our payments okay great so right now i'm going to scroll down and here's fluence crm pro so i'm going to copy my license key because i'm going to need this and then i'm going to come over here on the bottom and this is fluent crm i'm going to click here to download it okay now back on my site i'm now going to upload the plugin by coming over here and then i'm going to drag and drop the plugin over here like that install now click install is it installing yes i'm going to click on activate oops we need to activate it okay i'm going to come over here to install plugins here it is i'm going to click on activate right so now that it's activated i need to enter my license key so here's the entry of fluent crm come over here to settings and it's asking me to do a few things here and that is to create a tag to create uh add my business info why don't we do that just to get this out of the way okay so let's go right so this is a mac co so you need you need to add your own company details here all right and then full address i'm just going to say 44 birmingham road i'm not going to bother with the logo and go next and now we need to add a list and the lists here are very important because we want two lists one of them is for list building so we want uh people to sign up for our freebie and then the other one is for customers that sign up for our service okay so just remember that so this one here is going to be customers and this one here is going to be subscribers or leads let's call this leads there we go that's great if you have more you can add more here but we're good right now i'm going to go next we also need to add our tags so i'm going to need leads as a tag or lead and customer now the reason why we're going to need this is we are going to automate our emails at a later stage throughout this tutorial so it's going to be very important that we have these two tags because our automation is going to be based on tags so i'm going to go to next and pretty much i'm complete i'm happy with that i'm not going to add my email address i'm just going to say complete installation here now i can go to my crm if you need to import contacts from another email service you can go ahead and do that but you know what we're pretty much good to go here fluent crm is going to control our email system that is installed thumbs up now let's move on to the form so i'm going to come over here and we need to download the form so let's have a look here so fluent forms pro add-on so this is what i want i'm going to copy this like that and fluent forms here it is i'm going to click here to download it there we go it's downloading back to our dashboard let's go to plugins click on add new when we need to upload it so i'm going to click upload plugin and then i'm just going to drag and drop it here and install i'm going to activate the plugin now i'm not sure if i need to add my license oh yeah yeah yeah look at that i need to add my licenses so fluent forms i'm gonna activate the license i'm gonna paste it in here i'm gonna activate okay great i need to go back and copy my fluent form my fluent crm license and then back over here i'm going to go to my dashboard in fact you know what let me go to my settings for fluent crm license management then i'm going to paste my license key in here and verify the license all right great so everything is all set up now let's connect our form and also create our payment page right okay so to uh capture our leads we're going to uh do that on this form right here okay this is where we're going to capture our leads so we need to connect this with fluency rm so i'm going to come over here and we are now going to come all the way down here to divi and then go to theme builder we're going to go into our footer and then we want to go into this module here so i'm going to click on this gear icon to go into the module and what i'm going to do now is to scroll further down by the way you can go in and change the title change what this says on the button and we can change all this okay but i'm going to leave it as it is for now so i'm going to come over here to email account this is the most important part okay so by default mailchimp is selected we want to click on this drop down and choose fluent crm next we need to select our list now remember we created a list before so i'm going to click here on add so i'm going to give my account name i'm just going to call it mac and hit submit select my list and my list for this one here is going to be for leads okay so make sure the list is leads fantastic so now i can hit add i want to save that so that's connected i will prove that it's working i'm going to save that all right great so this now is going to collect all our leads for all from all our pages on our site i'm going to close out of here i'm going to save so next we are going to test this to see if it's working okay so be patient next we are going to now uh go into our payment page right here and add our form okay so to create our form i am going to uh come over here to fluent forms pro we're going to add a new in fact you know what before we add a new form uh what we need to do is to come over here to integrations and we need to make sure that fluent crm here is activated which is uh done by default and that is great okay so the next step now is to connect this so i'm going to go to global settings and we're going to go to our payment settings because we want this to connect with paypal and stripe so i'm going to come over here to enable forms payment module and we're going to come now to business name so let's give this mac dot co okay uh i won't bother with the email address i mean with the business address here i'll leave that as it is okay the currency we can set this to us dollar you know there's different ways to set it up but i'm going to leave that as it is and pages and subscription i'm going to leave that as a as it is as well next over here on the payment methods there's a few that we can choose from this one here is stripe so if i click on that i can leave stripe here as test mode but you know what we're not going to deal with stripe so i'm going to remove that i'm going to go with paypal and i'm going to enable paypal add my paypal email address okay so that's my paypal email address i'm going to save paypal settings but this i'm just doing very quick you need you also need to make sure you have either a paypal account or stripe or even both okay so we've set this up we're good to go now i'm going to go to my forms so we need to create our payment form now so i'm gonna create a brand new one okay so i'm gonna click on create new form so i'm gonna need to collect the first name and last name email address okay so let's collect uh first name email address we're also going to now add our payment fields and for our payment fields we are going to uh go with this one right here which which has the price so the price for our service uh so let's just call this 90 minute session okay so 90 minute session and the price is going to be 99 dollars okay so that's great now we also need to make these mandatory so i'm going to go into email here make sure it's mandatory and then i'm going to do the same here for the first name and last name in fact this i think is mandatory by default okay so that's the price let's add another field oops come over here to our input fields we also want a payment summary okay that's going to show up here and we don't need the subscription field so that's fine item quantity we don't need that and this is a custom payment um amount we don't need that too so i'm just going to save this now okay and on the on the button here i'm just going to say pay now or make a payment great so i'm going to make the payments everything looks great now i'm going to save the form and here's what we're going to do i'm going to copy this short code that's all i'm going to need i'm going to copy it by clicking here now let's go to our make a payment page right i'm going to enable the visual builder and i'm going to go in and add this shortcode so i'm going to go to build from scratch i'm going to select single column and we need a text module and now i'm going to paste like that okay so that's my form which i've just created it has all our payment information you can see here payment session blah blah blah make a payment great now you see how easy it is to add this payment module and this also answers our brief because our customer needs to be able to sell products okay so i'm going to add a background here just to spice things up a little bit make this look much better so i'm going to go with this and in fact let's go with let's go with this one here okay so we're gonna customize it by just adding a lot of transparency all the way down all the way down maybe just about there okay just about there all right next i'm going to come over here to design spacing so i'm going to give this about three percent all around just to give this some breathing space okay three percent all around all right great i'm also going to go in and give this a border one pixel and let's choose our border color so we're gonna go with this gray but it's a bit too much so i'm going to click on this little icon drag this down because we don't want it a bit too much so that should work just like that okay let's increase this to about two all right i think i'll go with two and i'm gonna add my rounded corners here go with something like five and that looks much better i'm gonna save that so that's our form right and i am going to save this page and pretty much we are almost done exit the visual builder and look at that this is our payment page our button is in place you can add your first name last name email address it tells you what it is it's the 90 minute session and the price is 99 there's the summary there make a payment boom and now we can accept payments on our website isn't that cool now let me show you something quickly now remember we linked this make a payments page with this button here so if i click that it's going to take us to make a payment now i know we have a bit of a space here let's get rid of that it's a bit too much because the form is pushed way way down okay that's that's not looking good so we're going to reduce now this padding to about let's bring it down to about three percent and that's only going to be for this page now what we can also do on this page is we can go in and add testimonials if you want if we need to do to do that but you don't really have to and we can also adjust the size of this by coming over here to design if it's a bit too big so let's bring this down to about 60 and also here great i'm gonna save that and the form is much better it was a bit too wide all right so that's looking great i'm gonna exit the visual builder now we have some pages or a page which is very important and that is the blog page so it's not here so let me show you how to add the blog page so i'm going to go to appearance click on menus okay so on our menus here we are going to view all and we're going to add our blog page to the menu now this blog page has been designed already for us i'm gonna save so now when i come over here and refresh the blog page has been added to our menu so when i click on that it's not gonna show anything because we don't have any blogs okay but i want you to notice what happens because i'm going to add some blog posts quickly then show you how easy it is to add our blog post and how this page is going to be transformed so back over here i'm going to go to posts okay all posts and you can see there's nothing here so i'm gonna say add new so i'm gonna say post one of course you need to be creative with your with your blog post names so i'm gonna say post one and for this we need to use the default editor because that's where we're just going to add our text so i'm going to come over here copy a bunch of text like that and then paste it in here so for this just make sure you don't use divi okay so let's have a title uh and let's have a look so we're going to set this to heading 1 so i'm going to click on this paragraph item add this as a heading so that should be fine anyway as a heading but the most important thing here is to click on post in fact let me get rid of my video here click on post and we need to add a featured image it's important that we add a featured image for this because it's going to look great so this is the image we're going to go with set featured image and then i am going to publish it but before i do that i just want to copy this because i need to create a few of these blog posts okay so let's go back in fact you know what now that i have content it's going to show over here so i'm going to refresh this boom there we go that's our post one look how beautiful that is all designed for you there we go look at that all designed for you isn't that amazing you did not even need to go in and start designing this and when i click on this one here look at that i mean the title here has been created for you we have this image in the background and when i scroll down everything is all set up for us here we have our social media icons we also have this email sign up for the newsletter which also generate our generates our leads our comments area here has been set and everything is looking amazing okay so all our blog posts are going to have the same structure okay so i'm going to add two more blog posts so that our design here is going to be complete so this is what our post looks like so i can cycle through this if i wanted to by clicking on this little dot or even this arrow so you can see here this is a beautiful layout and when i scroll down here these are our three posts all styled and designed for you you can actually go in and make a few changes to this if you're not happy with that okay so now that we have this all set it's time now to test and see if this is really working so remember in our brief we the client wanted a way of collecting leads so let's do that we can collect leads from this blog page or we can just do this from a normal page so i'm going to go to this our team but you know this works pretty much everywhere okay so if i scroll all the way down here and add my email and then click for click on sign me up it's now telling me it's successful so is it really successful uh let's head over here to our website we're gonna go to fluent crm and you can see here i have a lead which is brilliant it shows here how many people are signing up and these are going to be my leads and i can actually go to the actual contact by coming over here to all contacts there we go that's my name and it is brilliant now let's see what happens when i try to purchase a product in fact i won't even have to go through this because i i don't want to go through paypal and make that payment but i can just show you how it works so if i come over here to make a payment i could enter my first name last name email address and make the payments okay so i'm going to now connect this form in such a way that when a payment is made an automatic email is sent out and this is why the power fluid crm is amazing so i want to come over here now to automations okay i'm going to create a brand new automation and this automation is going to be tag applied so when you purchase a product on this website or the service a tag is going to be applied so i'm going to say new customer tag applied continue so i'm going to select the tag and the tag is customer so this is going to run when a contact is added save and now i can say all right so once this starts when the tag is added click here on this plus button i'm going to add a custom email in that custom email it's going to be a welcome email so i'm going to say welcome and let's add a smiley thingy here and then i can start typing my contents so i'm going to paste my text here if there's a call to action i can add my buttons here and so on but we're not going to go and do all that so i'm going to hit save settings and once we are ready i can now just click here change this to published so every time someone makes a purchase on the site and signs up for the service they're going to get a custom email sent out automatically now i want to keep this basic because i could go further and make this even more and more and more advanced but let's keep things simple but this is a fully functioning website that answers the brief so this is how you design a professional website that really really works all right guys comments box below let me know what you think if there's any other tutorials you want me to create please let me know and i will do that all right thanks for watching and i'll see you in the next one

Channel: MAK

Views: 3,432

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: KG70ejtT3e4

Length: 91min 29sec (5489 seconds)

Published: Fri Oct 08 2021