How to Create a Website 2021 with no plugins | Divi Theme tutorial

hey guys what's up we are going to create this amazing beautiful website which i normally sell for 5 000 to my clients we are going to create this beautiful website as you can see we have different hover elements right there if you scroll down a bit then we have interactive button elements right there and we have about scrolling amazing scroll effects i will teach you exactly how to build this if you scroll down this website is really professional we have a interactive map right there and we have even a newsletter sign up which we will actually create to get you started with your first free news letter of course we have different pages and i will show you exactly how we create this and how you can make it we have of course a new section or the aka blog website which you can use to create your own awesome blogs of course the contact page where people can actually contact you by using the form or simply using the folder with the call icon and the email button which which actually are links we will be making the entire website fully professional so you can actually change for example all the colors throughout the entire website with just three clicks if you don't like this golden layout we have created why not change it to well for example deep red now everything we have added in this website has been changed to deep red this way you can easily customize your entire website with no ease to any color you would like this is truly a professional built website we will be making full use of the best wordpress theme there is in the world and that also means that we will be using zero plugins yes you heard me right we are creating a professional website with zero plugins and that's a good thing because plugins tend to slow your system down but with this website installation you're off to a professional start with no plugins at all and because i build websites all day long for my profession i know you will not be finishing your website on the first day that's why we also create a coming soon page which all visitors will see when they visit your url before you're finished it has a countdown timer and of course they can even sign up for your email newsletter that we are creating together i will guide you through the process of setting up a domain name setting up your hosting creating your first email address installing wordpress installing world's best theme with 20 discount creating these awesome pages we're gonna create we even gonna create a free email marketing account to get you started i'll even provide you a link in the description of this video which you can download all the images the logo and the color codes we are using in this tutorial let's go on a fun journey together so are you ready to create your own professional website let's go so you just go to wpressdoctor.com get hosting and you press enter and now we are at namehero.com it is a amazing hosting company to host your website especially they're really fast you can see online all kinds of comparisons they have excellent support which they well if you email them or you open a ticket they will just almost reply instantly so that's awesome but what i also do like is the price the price is very low so if you are going to start with your own website for the very first time this is a perfect starting point i also started my website for a very low low low low price and i'm still happy i did it because it gives you just the opportunity to get to know wordpress to get to know the hosting to get to know the support tickets to get to know everything about websites so what do we what do we have here we have different plans which you can choose on you have to start a cloud plus cloud turbo and business if you're just starting out with one website you can of course choose this one it's only three dollars a month that is amazing just to know for you guys i have my own national hosting company in my country and i charge 25 euros a month for just one website so these prices are really really really low one website one gig of ram unlimited ssd storage free auto self free website free live speed which is very important if you just go to the plus cloud here you can see that just for two dollars a month more you can have seven websites and you have the double amount of ram and of course the unlimited ssd storage well it's not completely unlimited because you have 250 000 e-notes those are files or emails within your package but we'll be only using around 20 000 enos for our website so with 25 000 you could easily create seven website with a lot of emails my suggestion is you just choose the one that you want your starter cloud or your plus cloud it doesn't matter but if you can see we're gonna buy this one for approximately three years because you get the biggest discount so for three years you want to have some margin right here in your websites if you have 7 website trust me if you build this website right now with this video you definitely want to build more websites in maybe next month or maybe next year so let's go to order now so first we need to fill in our domain name so what are you going to call your website well i'm going to call it dvductor.com we press on search and now you can see congratulations dvductor.com is available and we get it completely free because it's normally 13 dollars for yearly billing cycle and free offer is available for two and three years so that is amazing so let's use this one press continue and here is where the biggest discount comes into play because after the first period your price will go up to thirteen dollars a month the most smart thing to do is to pick three years for five point eighteen dollars a month so this will not generate your high cost after one year now we're just gonna scroll down a bit and we need to configure packages if you like to have backups extra on your web hosting this is the place to be and you will be good with five gigabyte we're not gonna do this right now because you can also follow my tutorial about backups and you can just back up into the cloud of your google drive or your dropbox and it will be entirely free and it will work exactly the same would you like to add a dedicated ip address we don't need it for this website right now we are not gonna use malware scanning because we're gonna use a special security plugin which prevent us from this malware so we don't have to pay for it it's also free and of course we need this let's encrypt auto ssl because we want to see a padlock in our screen right there on top of it all right press after you're done press continue we don't need all of these options we can just press continue and look at this we have just saved ourselves 280 dollars with this three-year package yes it's amazing guys and just after the three years you can always switch to another account to another hosting company or whatever you want but this is the biggest savings that we get all right if we just scroll down here you can just enter all your personal information and after you've all filled this out don't forget to check this box i have to read and agree the terms of service and you can just press this checkout button right there so guys welcome to your name hero dashboard in your hosting dashboard you can see everything related to your domain here is what we just registered one cloud one domain uh we have zero unpaid invoices and we have one ticket because i had a support ticket because when i was registering my website i was flagged as fraud it is because of i'm using a vpn so that's why i had some trouble with registering however immediately i could test out their support system and it really amazed me because i sent an email and just within 30 seconds i received the mail back that from not an automated mail but actually from someone who was investigating my story and it was fixed really really really fast so i'm really happy with the support for now as you can see right now we have our active products this is our plus cloud that we just bought and if you go to my cloud right here you can go to my services and here you can see what you have just bought well i have still won this flag this fraud but you can just ignore that one you don't have that you will have this one here you can see your price which will go for the next due date in three years you will pay this amount so in a couple of years you will be making a lot of money with your website i suppose or so you can just change or whatever you want or stay here if you're happy so that's all good if you go to domains here you can see all your domains that we have registered and if you go to billing you can see your invoices that we have been paid and if you go to support this is the place where you can ask your questions until now it worked really fast so the first thing we're going to do is let's start a website because if i load my website this is what i see it's normal because this means nothing has been installed on our website so the next step you go back to your client area and you go to my cloud right there then you go to this one click on your web hosting plus cloud and we press login to cpanel now your control panel is the place where you can change anything from email addresses to ssl certificates to install wordpress so this is it welcome to your new hosting account alright we can press this one all done dismiss this here you can create email accounts and you can enter fours so for example let's create our first email account right now off the bat because we are still working on it we press this one on create and we're gonna create a email address at the first thing we're gonna do because it is very useful for wordpress later on so the first thing you need to do is create a username so i suggest you use your first name at your domain name or info at if you want to do that but i go with the dvductor.com all right just press this button generate and you will generate a secure password and we press on create right there congratulations now you have your first email address isn't that easy and awesome all right let's go back to cpanel right there on press on this button press home so the next thing we're going to do we are going to install wordpress we're going gonna scroll down all the way down to software right there and we're gonna click on wordpress manager by subtaculus click it and now we can just easy press this button install now the most important thing right here is that you click on this one and you go to https we need to install wordpress on our secure website all right the directory wp you can delete it or else you will have dv doctor dot com slash wp and then slash everything on your website that is bad for seo we're going to remove that right now here you can of course enter your site name and your site description so this will be our diffie doctor you can also change this later on but just fill it in right now wordpress tutorial 2021 divi theme we don't want to have multi-site on this installation and let's change the admin account this is not a good username we're going with the w press conductor and just generate a random password for your installation on wordpress press this little key icon here you go make sure you copy your password on a safe place and make sure your email address is just the address we have just created or you could also use your personal address but i like to keep all things website related to one email so you don't have all your website related stuff in your personal inbox we're gonna use the email address we just created within cpanel now this is very important the language of your website the language should be the language you create your website in so if you're from for example america you can use english if you're from london if you're from england you can also use english but if you're from europe and your target audience is for example german then you should use german if you are from italy you should use italian if you are for example from turkey then you should use then you should scroll down and use turkish this is important because also this in the backend will will tell google what language your website is and where it should rank your website so i'm going with the english installation right now don't worry you can also change the language of your wordpress interface in the backend of wordpress so google will see your website is for english people the language is english but your wordpress website will be another language it's all possible we're not going to use these plugins because we will do our security different the next thing is we're going to advanced options because we're going to build a pro website right so the database name will be this well this is generated and it is all right you can just leave it the same i would suggest you change the table prefix to something like some random numbers and letters because this is very important for your security we're gonna press this one because we don't want any notification emails for updates you just need to update your website automatically or regularly we're gonna use this so we don't need the update notification auto upgrade well we are going to build the website in such a secure and stable manner you can easily press this one upgrade to any latest version because we are going to build this thing so robust it will never break trust me on this i manage a lot of client website and they're all they're all 100 stable and safe we can also upgrade our plugins and we can auto upgrade our wordpress themes this is the safest way and if you don't install a lot of buggy plugins this will work perfectly let's get down right there we don't need to have a theme so just press 2021 and press select theme and we're gonna press no because we will not be using any of the images because we'll be building our website in another theme so what's also perfectly good is that you enter here your private email address so you will receive the details of your installation and also of course your passwords which is very useful to use later on and you press install congratulations the software was installed successfully this is awesome just click this url with your right tab and click on open link in new tab to see if wordpress has installed successfully so this means our website is successfully installed well done congratulations next step go back to your cpanel we're going to close this one and then you go back to control panel using this button all right we're going to scroll down a bit we go to software and we're going to press select php version you click on 7.3 current and you go to 7.4 don't go to 8.0 because a lot of wordpress plugins or themes are not just yet optimized fully for php8 but 7.4 is a lot faster than 7.3 so we're going to click on 7.4 and we're going to press set as current just wait a while all right we're going to click over here to options and we're going to change a little bit of things right here or else your website will not function properly trust me on this guys just go down a bit we're going to change the max execution time to 120 memory limit is alright both max size we're going to change this to 64. and last but not least very important your upload max file size this is the file that you can upload so if your image is for example bigger than 2 megabyte i don't recommend that you cannot upload it for example we're gonna upload our theme to the website it's also nine megabyte so we're gonna change this to 64 megabyte all right that's awesome it has been success it has been saved so we can close this right right now all right and now we are going to our wordpress website to make all the changes how are we going to do that just go to your newly created domain dvductor.com slash wp admin slash wp admin and press enter welcome to your wordpress dashboard get acquainted to it because this is going to be awesome if you want to know how everything works down here i have created a video about the backend of wordpress and i explain every little thing about wordpress if you want me to tell about all these different settings and all these things about your wordpress website just follow this video and you and i will take you by hand and show you everything there is to know about your wordpress installation but for now let's go and create our website and install our theme which we'll be using to build our website if you now go to for example your pages you can see your sample page if you press edit we just this is just the blog editor of wordpress which is pretty easy and it's pretty basic but you can do you can create a very simple website which is great but not so great if we want to build a pro website we're gonna use the most popular used wordpress theme out there and you're gonna get it using this way we open up a new tab and we go to wpressdoctor.com slash divi 2021 and with this deal i'm going to give you 20 discount of the dvd team so there are basically two plans with defeat you can pay yearly it's a 70 a year or you can pay just once to have lifetime accents which is the amazing 200 but this is just one time in your entire life that is mind-blowing let's see what you get for this price you get access to the divi theme you get access to the extra magazine and theme you get access to bloom is a plugin and monarch which is also a awesome signup plugin and you get also access to hundreds of websites backs well what does it mean let me show you divi is creating all these layout packs for you so within these layout packs you have entire websites that you can load into your divi website just like that we on this tutorial we're gonna create from scratch so it's gonna be unique and it's gonna be your style so that's amazing i will teach you how to change it you have seven websites with name hero so you can create all these websites just for free within your license for example if you want to go with a real estate website you have a about page a blog page a contact page a home page landing page real estate page and a team page and not only for this one but you have 213 layout packs and every single week you will have a new layout to choose from it is mind-blowing i really love divi because they have just done such a awesome job and if you see something you like for example hey i really like these images you can just use this template loading your website you will get all the images for free and you can use them as long as your license is working and that is a lifetime wow so this is divi i am so enthusiastic about divi it is the right choice for you what do we have we have lifetime updates which is very important because they're releasing new features almost every month so this is really great they are really cutting edge don't get me wrong there are more than 100 people working on diffie worldwide so it is a very big operation they do around 8 million dollars every year in their business these are not small guys they are these are the pro players in a wordpress world you get of course lifetime premium support how does it look like well if you just press this button you can just send us a message and my experience with this premium support is awesome i just asked questions and within a few minutes i have immediately response and they go very far to give you the best experience even if you don't know how to change something they just help you out with everything you need it is really great as i told you unlimited website usage you can use this license on unlimited websites there is a risk-free guarantee if you don't like it you can get your money back and it's just a one-time fee so my advice would be the no-brainer for 200 one time but i don't know your budget if you can only spare 70 right now then this is fine just use this one i used this one for almost three years and then i did some math and i thought well after three years i am already paying 210 dollars why not use the lifetime access then i use only 200 well you can just press this button sign up today we are going to fill in all these details so that's right you also have a 30 day money back guarantee if you don't like it within 30 days you can just send them an email and they will refund you gladly with no question asked so really guys this is just really awesome all right we're just gonna fill in all these things all right if you follow the link in the email or you press on the welcome to elegant themes you can press on your login button and here you can fill in your username and your password you've just created and this is where we are right now hello wpress doctor and what what are we going to do right here we want the dv theme the dv builder plugin is already integrated in your divi theme so just press this button download the diffie theme and that's it guys now we go back to our wordpress dashboard to install divi from here you go to appearance we go to themes click there and we're gonna press this button as new we're gonna press again this button upload theme and press browse and select your divi theme that you have just downloaded remember when we change the php settings for bigger upload well this is where you need that one right now and press install now we're just gonna wait right there and now if the theme is installed successfully press activate well done you have activated your dvt mining wordpress website so we don't need all the other teams right there so for security reasons we're gonna press theme details and we're gonna delete all of these all of these themes because we definitely don't need them let's press delete all right all right now we have our diffie theme right there awesome alright guys now we're going to create our pro website so the first thing we are going to do right now is we are going to create a temporary page because i know you will not be able to finish your website today so we are going to create a temporary page which shows people that we are building a website and people can also leave their email address so you can email them later on that your website is live what you gonna do we go to pages we're going to add new this is also the perfect way to get to know the divi builder and wordpress itself so this is the wordpress builder where you can add your pages your title will be coming soon all right the next button we will be pushing is this publish button right there and when it has been published you press use dv builder and we click on build from scratch we click on start building so when you create a first page this is what you see we're gonna click on this new row as you can see we have all kind of different rows because this is the way dv works you can create any layout you want it is amazing so we're gonna choose this left one click over here and we're gonna add a new module dv has a lot of modules you can choose from and all these modules are really useful i've created a five video series about every single module so if you want to know more about them go watch the other videos for now we are going to click on over here on the text module and we're going to enter the text company name or of course your real company name then we go to design you go to text and you're gonna change the text font to nito you can just type in here nunito and it will just use this font as you can see you can choose all the fonts from google and those are awful a lot of them so don't waste too much time by selecting the perfect font because you can always change it later and we're going to change the text size to 31 pixels now with everything we're going to do we're going to make it responsive so the first thing you do is you click on this button right there we're going to move to the tablet version to see how this looks that looks great and go to phone and also the 31 pixels is also working on your phone here you can select your own mobile so i'm going with the iphone x that's what i have and yes it is absolutely perfect the last thing we want to do is we're going to scroll down and we're going to place the text alignment in the center now we press on the save button and we go back to the desktop view just so you're going to press down here on the menu and we're going to press here desktop view next thing we're going to do is we are going to add another thing so hover your mouse over your just create a text module and we're going to use this plus icon it means add a new module and again we're going for the text module click this one and here we're gonna type new things coming soon then you select this entire thing and we're gonna create a heading one and now when you hover your mouse over this thing you will see a brush icon if you click it you will go to design h1 and here we can change everything to about this one well what are we gonna do for a font we're gonna use oswald which is pretty nice for now and we're going to align it in the center and we're gonna make it 67 pixels right that's awesome but how will this look on our mobile phones and our and our tablets let's see how this works press this button then you press on tablet well that's a little bit too big so we're gonna small we're gonna make it smaller to 60 pixels yeah that's awesome then we go to our phone and here we see oh well this is okay we can leave it this way or you can small you can make it smaller to like 30 if you want it but i like it to have it on two rows that's great let's make it 60. that's okay and the next thing we're going to do is we're going down we go to spacing because here we can create some space between the first item and the second one so the margin would be eight few white as you can see on mobile it doesn't move really far however when we go to the back to the tablet version you will see there's some spacing and if you go to the desktop you will see there is a lot more spacing and it's because we have used the view white instead of pixels we're gonna press the save button and the next thing we are going to create is i want people to be able to sign up to the email newsletter on your coming soon page why because well this is about the time you start telling everybody all your friends and family to hey i got a new company i'm starting my business and this and this is my website and it's new things are coming soon so make sure to sign up for my email list we're going to press this plus icon right here again and we're going to search for email opt-in module press this the first thing we're going to do we're going to remove this title and the button will be stay tuned for updates all right in this text we will be removing this entirely and now you scroll down and we go to fields and now you press your single name field right there this looks way more smaller because people are more likely to give you a name instead of their full front name and second name a first name and last name so this is almost always better then we go to success action and what will people see when they sign up they will see a message and the message will be success no the message will be thank you for your interest i will send you an email when we are live and then we go to sprint protection well i don't think we need it right now because of this form is just on our coming soon page so we can leave it like that we go to background and here we click on use background color we are going to change this to no why not well just a second i will show you last thing we do we go to design and we go to sizing and we're going to change the max wide to 50 and now we're going to change the alignment to the center why is that show you in a minute this will look way more better because it's now a little bit smaller all right we're going to save this right here save changes so i think you're a bit curious about where is this going well all right let me let let us first add a background image press on the icon right there on your section settings because this section this is the row and within the row we have the modules so we're going to change these settings we go to background and we go to this image button press this and now we're going to press this plus add background image button what you'll see right now is our media library of wordpress here all your files are being stored and you can change them and use them it's very useful however nothing has been found right there so what we need is a background image if you go to the description of this video you will find a link to a zip file folder which you can download and you can use write free images for your convenience you have there will be never be a liar on your head because of the images no they are completely free so we're going to select files and we're going to select the coming soon background just upload it make sure to copy the title to your alt text very important for the rest of your website we need to learn it right now and then you press upload an image right here all right now we have something more beautiful however i think it's a little bit too light so what are we going to do we go to this button over here add background gradient we're gonna press plus and we're going to click on select color right there and we are going to use a different kind of color so press on this zero zero zero black one and then you're gonna use this slider over here to make it a little bit transparent as you can see now we're going to change this value to 0 0.64 and press copy all right and then we go to this color and you're also gonna paste it in right here paste okay now you go down a little bit and now we're gonna pull the switch down here place gradient above background image now this is way better save this one and now you can see that these and these titles are a little bit dark so we're going to edit them press on the brush icon and make the text color text text color make it make it white again that looks way better now also if you scroll just a little bit down we can use this text shadow to give it a little bit of a glow back there that is awesome we're going to save this then we go to this title we're going gonna do the same we get to design or you can just press the brush icon click on the heading text color to make it white and we're also gonna add a little bit of a text shadow now i do think that this one is too close to this module so we are going to save changes and we go into the settings of this one because i want this settings to be full white how do we do that you go to design you go to sizing and you go to height and you type in 100 fh oh hold up fh now it will transform the the section to the full wide of your screen and if you see it now on a mobile device it is also full screen right there and this looks really great also on your tablet this looks awesome are we going to save this one and we go back to the desktop view now we go to this title and let's go to design and we go to spacing and we're going to also add a little bit of margin to the bottom how do you do that well if you want to keep them the same just press on this link icon and now it will copy them and keep them the same this looks really great press on save and we're going to add another module add new module and the last one will be a countdown timer all right let's put it on a month ahead of us well you can change it of course do anything you want right there i'm going to have it on 10 o'clock in the morning on the 7th of july 2021 all right we're going to remove this title and we go to background we're gonna remove the background color this looks pretty cool but it's too close to the other module so we go to design we go to spacing and we're gonna add five view white right there yes this is way better and we're going to save this now the first thing you will notice when you look at this countdown timer you will see 0 30 days i don't like this 0 over here so we're going to the settings of this page right here in the um below click on it go to advanced go to custom css now we're not going to write it all the way i just make it easy for you in the folder you've downloaded from the description of this video with all the images there's also a file called snippets and within these snippets you will find a piece of css that has been called countdown timer when you just copy it and paste it right here like this you will see that the first thing what will happen is this zero has been deleted that is awesome all right then we're just gonna press on this save button right there and now things are starting to look really great however there's one thing i still want to do i see this name in this email box that i don't like the color of it and i don't like these are two huge boxes so we're gonna press settings and we go to design we go to layouts and i'm gonna remove this name full white and this email full white there this looks way better don't you agree now we have a small box we're also gonna press this brush icon and we're gonna change the field text color to black this is way better now i don't like the spacing around so we're going to save this we go back to this module and we're going to design we go to spacing and we're going to make this 8 view white we're going to save it save changes 8 full white there now we have a beautiful coming soon page you can press save down here now your page has been saved uh you can now press exit visual builder what will happen when you press it your email opt-in box will disappear why is it well it is pretty logical press enable official builder again because it won't show it if it's not connected to a email profiler so let's do this real quick press on the gear icon and if you scroll down a bit you'll see email account your service provider is well you can choose anyone you have right now so if you do have one of these you can just use it if you don't have one well what better time to start an email list right now when building your website the money is in the list it is not a joke it has been proven very very useful to have a email list so you will use it anyway so we're gonna choose mailchimp and just open up a new tab in your browser and on the new tab we will go to mailchimp press enter and we're gonna press sign up free right there oh it's very easy and we will use it anyway so let's fire it up because we will need it and yeah and later on on the website when building our website you can use your email we have just created upon your new hosting company so everything around your business will be centered in this one mailbox it is awesome the ad divi inductor and we have to select a username so create anything you want i'm going with dvductor we're going to create a password and when it is secure it will say your password is secure and you're all set alright well i personally don't want to receive any updates because i know how the system works but if you want it you can uncheck this box press sign up oh i did it wrong we need to use our email address for our username well okay press sign up i don't want to receive it sign up we have to verify our email well on our new hosting we can just go to [Music] divvydoctoryourdomainname.com webmail and press enter and now we are going to our webmail from name hero so this is very useful just fill your email address in and log in the first time you open your webmail this is a screen you will see and you can just set it up on your device if you want this you can add a email address from your current device so that it will mill the settings you can open it and it will be configured for you it's really useful so you can do that right now um what you need to check is this one open my inbox when i log in this is most useful and press open right there and now we will see our inbox for maybe the first time and as you can see we have different mails from cpanel and you can activate your mailchimp account and that is exactly what we need to do right now so we're gonna press allow now we can see all the images and the links and we press activate account now when you go back to the miltion website we press i'm on a please wait and we will set up our account let's start with a free plan we can create two thousand contacts maximum like if you're growing bigger than that well you can choose a different plan or you can export all your contacts and go to another email provider it is completely up to you but we'll use mailchimp right now press next let's set up our account w doctor w press inductor add your new domain right there so divi doctor.com and we press continue right there so they need to know your address why well it is explained here we need their address to make sure that you are not a spammer they keep it safe so don't worry it's a very big brand this mailchimp and you can always remove it or you can just think something up when you're done press continue next thing is do we already have a list of contacts well i don't so press no and press continue do you sell products or services well yes or no i don't do you intend to sell it well i don't maybe you if you're not sure just press the skip button i'm gonna press continue i don't want any emails from them so i press continue so the next thing we're going to do is we're not going to send the email but i'll show you that in a different tutorial but we are going to connect it with our website so what we need is go all the way down there press on this you go to account and you go to extras and we go to api keys right there all right click on it and we just scroll down a little bit and we're gonna press create a key right here now we have a api key which we can copy so we're going to press here and press copy that's it and we go back to wordpress and we're going to press this button add you're going to add a account name it's the username we created so it's going to be the defeat doctor.com and paste in the api key we just copied paste and press submit now what it will do it will make a connection to mailchimp and to see if there is a list as you can see right now we have only one list which is fine just click on it and press save now when we save this page save it and we go to exit visual pillar now we can see that this main list is actually working so congratulations this is awesome you did a great job so what do you still see on this page is that we have a header and a footer which is really great but not on our coming soon page so how are we going to remove those well press exit visual builder and then you go to your website's dashboard right there and as you can see right now we have a update that's very interesting let's see what it is if the next version of divi i am going to show you in a second how we can update our divi theme but first we are going to diffie theme builder this is your dv theme builder it is an awesome place where you can build beautiful templates for different pages for different posts it is really powerful and i'm going to show you how we can use this for our coming soon page so first this is the default website template we'll be using this later on this video but first we'll be going to create a new template so we're going to click on this plus icon add a new template and then you can see where you want to use your template on it is very powerful as you can see we can use all pages only the home page specific pages all these specific categories of your posts specific posts archive pages author pages it is amazing already children of specific pages this is really powerful system we're going to use this a lot but first we're gonna use this template on a specific page our coming soon page so check this box right there and press create template down here then we're gonna add a custom header click on this one and click build custom header we have three options of course we are going to build from scratch we don't need this so just press this cross button and the first thing we will do is we're gonna hit this gear icon right there of this section we go to advanced we go to visibility and we're gonna disable this on phone tablet and desktop press save again you can press save down there or you can use ctrl s on your keyboard and now this template is saved right press this cross icon right there close it press save changes and we're going to add a custom footer the same way just build custom footer build from scratch press this cross icon go to your settings advanced visibility disable on your phone tablet and desktop and press save again press save on your keyboard or using the menu down there and we're gonna close this press save changes up here and now we go to pages all pages we're going to look at our coming soon page when you look at your pages always use private window or if you're using chrome it's in incognito screen always do this because then you are locked out and you will see how it looks for your visitors so we're gonna press it and this is now our beautiful coming soon page this looks great doesn't it we have no footer no header because we have just created a template for it and we have removed it so congratulations you have just created a awesome coming soon page but if i now go to my website without it coming soon like this i press enter this is what people will see when they visit your website because this is the standard way wordpress shows new websites we are going to change this so what we want to achieve is that you are not locked in your website people will see the coming soon page so that no one will see your work in progress or even it shows up in a google search result because that would be a little bit of a disaster well it's not a disaster but it's not nice before we can do that we need to create a child theme within the channel thing we can paste any snippets or codes or anything we want without breaking divi so follow my steps because this is a lot more easier than it sounds we go to plugins we're going to add new we're going to add a temporary plugin which is called look for child theme then we have the child theme configurator we press install now and then you press activate and now we can go to tools child themes right there you click on it we're gonna press we're gonna give the child theme a different name i like to do this with the name of your website for my example on this website it is dvductor just scroll down a bit and you go to click to edit child theme attribute and here you're gonna give the name of your child theme the name of your website diffidector in my example the theme website is https your title name the author is you so you can fill in your own name right here the w press doctor what is your website well if you have another website you can fill it in or else you can just use your own website from which we are creating right now i have another website wpressdoctor.com the theme description just a gel theme to store all our all our add-ons theme thanks my awesome website and this is the first version you're building i think so press this check this box and press create new child theme now this plugin will do all the heavy lifting for us so this is great all right it's checking it now and this theme is functioning correctly we can go back to plugins right now go to plugins installed plugins and we're going to deactivate the child team configurator because we don't need it anymore and press delete yes we want to delete the child theme configurator now the next thing we're going to do we go to appearance we go to themes now you can see that you have a new theme which is your child theme we're gonna press activate nothing really happens because a child theme is just empty right now but we're going to change it you go to appearance and you go to theme editor and now we are at our channel theme as you can see it's beautiful it's just empty go to this functions.php right there and go all the way down to rule25 press enter and paste in the code you can find in the folder you've downloaded in the description of this video with all the images and all the snippets and there is another snippet called redirect visitors to the coming soon page right there that's it you only have to copy it in right there and when you press this button update file it will check automatically if what you have entered will not break your entire website when it does it will not save it so you're always safe with this isn't that awesome i really love wordpress press update file it will check it and it's been edited successfully now what will happen go up here to your website and press open link in new private window and now you will always be redirected to this page isn't that awesome so if i just go to my home page for example no you're not logged in so you will go to this coming soon page do we have a home page no we will be redirected to our coming soon page this works great we're gonna close this window and congratulations you have now created a child theme and also successfully added your first custom php hey i'm proud of you isn't this awesome you are now really creating your own website doing it the pro way i'm so proud of you you know just go grab a drink or something i prefer water go grab a drink because you deserved it ah all right the next thing we're going to do is update divi because as you can see if i press this button up here the update you will see that we have a new version of divi when i try to select this and press update themes what you will see is a warning because before you can receive it you must first authenticate that you really bought divi how do we do that we go to diffie and we go to theme options you only have to do this once so go to updates and here you can you need to enter your username and your api key where you can where can you find these things of course on the elegant themes website let's go there right now all right you go to elegantthemes.com you fill in your credentials here and don't remember you have to use a username which you have generated buying in divi and you press login and then we go up there to account and we go to username and api keys then we go to api keys right there and if you now scroll down you can find all the api keys for all your websites and if you now scroll down you can find all your api keys for all different websites you have ever created with elegant themes as you can see i have been in this game for a very very very long time so what you will do is we're gonna press this button generate new api key press it add a label for reference and just use the name of your website we're creating dvductor.com so you know exactly what this api key was for just click on the api key and it will copy it to your clipboard and that's all you have to do right here we go back to wordpress copy your api key from your clipboard and also add your username in here and press save changes then it will give you a green check mark and we're all set and now we go to update our dvd theme we go up here and we're gonna select them and we're gonna press update themes and here you go now it will update your defeat theme on the fly and when it's all done we have the newest version of divi and you can always update diffie with full confidence as nothing is going to break why is that first of all they do a really good job in updating the divi theme i have never encountered sight breaking problems and that is a lot different than most of my clients when i when they come to me before they have divi so you can always safely update divi it will never break i have websites from 2014 built in dv and they're running on the latest version of diffie because nothing breaks it is awesome it is awesome now it's time to really start building our website we go to pages and all pages because we are going to create our first home page you see the privacy policy and example page we will be removing the sample page and if you want to create a a privacy policy later on you can still do that but let's press the trash button over here just for the sake of clarity and to see exactly what we're doing alright the first thing we are going to create is our home page and it's gonna be great so press add new right there to create a new page the title will be home because this is our home page and the url slug is also home that is really good now we're gonna press publish up there are you ready to publish yes we are we're gonna press publish and now you can press use diffie builder and we're going to create a website from scratch of course you can choose a pre-made layout and it makes you choose on 178 and almost 1600 layouts of website pages we are not going to do this in this tutorial because i want to teach you how to create your very own pro website so click on build from scratch and this is what we see a blank page the header and footer are still there we're gonna change that later on but first we're gonna create our beautiful homepage so the first thing we need to do is we need to add a row let's choose this row for this website all right and we're gonna add a text module add it in so leave this text as it is we gotta work on this later first we are going to the row settings press on this button and then the first thing we are going to do is we go to column settings right there then when you go to background and we go to image and we're going to add a background image now you need to upload your file from my folder and the file is called riding bike bg for background copy the title into your alt text always do that and press upload image alright now we have a background image as you can see press this green icon right there save changes and we go to here to design then you go to sizing we're going to use a custom gutter light of one what does this do well as you can see it moving it makes sure that there's no spacing between the two columns we're gonna press this equalize column heights also we're gonna make the white of your entire row 100 also the max white is 100 now things start to shake up then we go down to spacing and we're gonna zero out the padding that means zero right there and zero right there because i wanted to make it really smooth and nice all right press this save changes button right there and then we go to the section settings press this icon you go to design you go to spacing and we're gonna zero out this padding also top zero button zero this looks way better then we press save changes all right this is a good time to save your page so ctrl s on your keyboard or just down in the menu right there save it okay back to our text now you hover over your text and press this module settings we're gonna change this entire text to 360. then we go to background we're going to add a background color so click on this white right there then we're going to click on this gear icon we're going to make it a little bit transparent so let's keep this to 46. that's nice and then we go to design right here we go to text and we're going to first we're going to change the text font to let's say nunito if you have used it before it's here in your recent fonts if not just type in nu nito it's a very popular font so we're going to use this one and we're gonna change the color to white and and the text size to 175 well that's really big isn't it go to your text line height we're going to make it 0.2 something's about to happen and then we scroll down and we go to sizing in your watch we are going to change this to 60 so that it changes how it interacts with the background we're gonna align the module in the center and then we go to spacing right there because we need to give it some space on the top margin i would like to have 15 view white and on the padding i would like to have on the top three few white and on the left and right side i want to have five few white and we're going to press this icon and then it's centered in the middle now when developing a website you always want to make sure that your website looks good on mobile when you press this icon right here phone view it will switch to our phone view as you can see this 360 is way too big for a mobile phone so we're gonna press this brush icon and it goes immediately to design and text we're gonna press this icon right here to change the font on mobile devices because 175 pixels on mobile is just like this it's so we're gonna change this to let's say 100 pixels yeah that's awesome and also check on tablet how does it look well tablet is alright let's go back to desktop and we're gonna save this module right there all right so the next thing we're going to do we're going to add another text module enter in text the text will be repair by entrant 3 360 days a year and then we go to background we're going to add a white background and of course we want to have it transparent so 0.4 will be our color and then we go to design we go to text and here is where it becomes interesting we're going to change the text font to nunito because i like that font we're gonna use a different text color but i want you to be able to change the colors of your entire website in just one click so when you click on the global this is what you see but we're gonna add a color just press this and we are going to add the dark gray color which you can find in the snippets of the file i have also placed the color codes right there press okay and then we press this plus icon so now we're here we're also gonna add two other colors we will be using throughout the entire website it makes it possible for you to change all the colors in the entire website with just one global color this system is really really really awesome just press this plus icon enter your color code the gold one and press save now we have two colors and we're gonna add one more which is a broken white color let's call it that way and add it in and press save here you go all right so now we have the three colors we will be using a lot on this website and you will be able to change this really easy and we're going to select the dark gray color then we are going to change the text size to 40 pixels and of course the text line height to 1.2 then we scroll down and we of course going to change the sizing you guessed it we're gonna change it to 60 and we're gonna align the module in the center so that it looks this way this looks really really great but i want to change let's get back a bit and change nunito to oswalt yeah i think that's that's better all right let's go for let's go to spacing we're gonna add some margin 15 view white on the bottom so now we get a real awesome box right there let's also add three few white to the bottom so that we get a nice more spacing in there and also some left and right padding spacing of 5 view white this looks really great all right we can close this module by pressing save changes right there this is a good time to save your page again let's create the second column first of all we're going to add a background image so we're gonna see what we're doing we go to row settings right there we go to the settings of the second column press the gear icon we go to background and we go to this one background image we're gonna add a image the name is street bg we're gonna copy this and paste it in right here and we're gonna upload this image press the button down there now don't worry guys all these images are completely free and 100 copyright free you can do whatever with it what you want so you don't have to worry that these images will get you sued or anything no they're all from a safe place all right as you can see this is beautiful but what i want i want to have it more white on top and then i can place something above this one so we're going to the gradient backgrounds we're going to press this plus button and we're gonna select the color make it white and also of course transparent to make it 0.92 that is perfect press okay we're going to select this color and we're going to make it transparent then you scroll down a bit and you're gonna press this button place gradient above background image so now you'll see that the gradient has been placed on top and again press save now we're going to create the right side of the column so we're going to press this this plus icon we're going to create a text module the text content will be rent and we can go to design you go to text we're gonna change the text font to oswald right there we're gonna use the global text color that we just created the dark gray and we go to the text size and let's bump it real big to make it 52 scroll down when we go to text alignment we're going to center it and then we go to spacing right here we're going to give it some spacing three few wide there and on the bottom one view white all right we can just save this module now i will show you a trick that you can easily copy modules below them just press this icon right here duplicate module here you go press the gear icon now we have the identical module down there except we're gonna change it of course the text will be go with the rental bikes comfortably through new york as you can see it is way too big so press on the brush icon or go to design and go to text and we're going to change the text font to default why is that well i'm going to show you later on the text font white should be regular the text color would be the global color all these settings are from the other module so because we duplicated it so it's very useful to change this text size to 20 pixels this is nice then we go down and we go to spacing we're going to remove the top margin and the bottom margin also so now it really goes up to rent you can also make some spacing if you like to have more space and then you press save we go here we're going to create some awesome modules press this plus icon and now we're going to make use of a different module which is called the blurp module you can use it with icons with images it is really useful we're gonna remove the content right there and the title will be electric bikes go to the imaging icon and as i said you can use an icon here and you can choose all these items from elegant themes there are a lot of them but we're not going to use icons right now we're going to use a image so we're going to upload a file and the file you need to upload is called electric bike white copy the alt text upload the image and now we have our beautiful white bike and then we go to background and we're going to press the white color all right then we go to design we go to title text and then we're going to change the title text color into our global dark gray color that's it then we go to sizing and we're going to change the white to 50 percent and of course align the module in the center then we go down to spacing we're gonna create the margin on top of three few white because we need some spacing between the text above it and we want some padding on the sides of one view white over there and one a few white on the left and right and now it looks pretty nice let's go down to border are we gonna create a little detail we're gonna click on this icon to use only the bottom border we're gonna make the bottom border four pixels and we're gonna go to global colors we're gonna get our golden color right there this looks pretty awesome all right we're also gonna create a little f effect so when you hover your mouse over this image the image will actually change to another image because whatever you are doing with your website if you are selling or you're just blogging or anything you want to sell emotions so this is product pushing this is an electric bike you can buy it or rent it in this case you want to rent the emotion the feeling that people get when they rent a bike with you so we go back to content we go to image in icon and when you hover your mouse over your image you will see these icons let's click on this one which is the hover option on desktop it looks like this but when you hover it we can choose another image so click on the bike again we're going to upload electric bike blue this is it copy alt text again upload image and now when we have on desktop is this and when you hover over it it becomes this it it will trigger a emotional feeling because somebody is experiencing this bike it's pretty neat right save changes and now we have our first blurb module right there so let's create another one just below that if you want to do it really easy just press on this duplicate button right there and you will have exactly the same module below it it is that easy yes it is that is we're going to change a little bit so we're going to press this gear icon module settings and the title will be go dutch image and icon we're gonna change the desktop image we're gonna use the dutch bike of course dutch bike we actually use a lot of these bikes because they're pretty useful you can put anything on the front side as we will see with the hover image press on this one we're gonna upload dutch bike white copy alt text upload an image all right so now when you hover on it you get this and this looks really great right let's go to design and we're also gonna add three few white to the bottom so that we have a little bit more spacing on the right side of our module isn't this neat so this is your hero right now you can create anything you want but as you are playing around now with divi you know that there are limitless options to create anything you want but we are going even further we are going to create another section right there so scroll down a bit oh first we're going to save this page press ctrl s on your keyboard we're going to press the blue icon right there add new section press it we want a regular section and we want a normal row with just a single line all right in this row we want a text module and this text module will contain full service bike shop now this one needs to be ah one because we are telling google that we have a full service bike shop if you want to know more about seo you really have to watch my basic seo training i give to all my clients so make sure to watch that after we've created your website of course full service bike shop right there let's go to design this time you will need to go to heading text because it is a heading h1 also when you click on your brush icon you will go immediately to the heading text let's keep the heading font to default and you know what let's change it right now all the default headings so you go to your website your dashboard you go open link in new tab so we can return to this step in just a minute from here you go to divi and you go to theme customizer because those default fonts are really useful in the long run if you ever want to change your font this is the way to do it go to general settings go to typography go to your header font right there are we gonna change this to oswald so you have to scroll down to the o and select oswald and for the body font we will use nunito where you're at new neato and now we press publish right there that's it alright we can close this one and now we can go back to this page keep your heading font on default because when we save this page and we refresh it it will go to the font we have just selected because if i change it right here you have to if you want to change your fonts into your entire website you have to go back to every module and do it manually and this way you can do it with just three clicks you know what we can't actually see what the default font is right now so we're gonna save this save your page and after you've saved your page you can just refresh your page by pressing f5 on your keyboard and then it will load it up again and now you will see press don't restore and now you will see that the default font of this module have just changed to oswald because that's what we put into the theme customizer all right let's get back to designing we're gonna make the heading text side 50 pixels to make it really big let's give it a four pixels letter spacing and we're going to of course align it in the middle of our screen and we're going to save this one because this is okay all right next up we're going to add another text module text our store offers you a full surface for all types of bicycles and then we go to design and we click on text and then we're going to change the text size to 20 pixels as you can see already text font has been changed to nunito that is pretty useful for the text color we're going to use our our dark grey global color i did we do that on the other one let's check really quick if we changed this one to also the global color no we did not go to global and make it dark grid all right then we're gonna save it we go back to this one go back to designing text and we are going to align this one of course in the center and then we're going to save this one and close this module all right press ctrl s on your keyboard we are going to change this section so press on the gear icon you go to background and you go to your global colors and we're going to use this grayish broken white color press save now this is going to look awesome we're going to add a new row right there because now we want three different columns and we're going to add a text module enter it then we're going to type in by and this will be a h2 press enter on your keyboard the complete collection of big brands or custom bikes great then you go to background and we're going to make this white but when you hover on it i want it to be that golden color from the global so we're going to add golden alright then we go to design you go to text and we're gonna change the text color to our global dark gray but when you hover over it i want it to be just simple white let's change the text size to 18 pixels and then we scroll down and we go to heading text make sure to press on h2 because that is what this one is if you press the brush icon you will go immediately 82 h2 so the heading has already changed to oswald we're going to make the font style uppercase the text color is gonna be dark gray again but when we been on desktop but when we hover on it it is going to be white yes very good let's make this 40 pixels and scroll down and now we go to spacing because we need to give it a little bit of space so we're gonna add one few white also on the bottom and we're gonna add one a few white on the left side and one few white under your right side then one down to border because we want to give it a real nice effect as you can see we're still in hover mode but that's okay we'll change back when we press save changes then you go to border styles we're gonna add this button border of course again four pixels we're going to use the global golden color and then we press save changes alright now we go to the row settings we're going to spice things up a bit you go to the first column and we press this gear icon and then we go to background we're going to upload a background image called buy by shop copy it in again upload image all right you won't see anything now because it is behind the module so you go to design and you go to spacing and then we're going to add right there 300 pixels hey there is the beautiful image and on the left side just for the little detail 50 pixels right there now this looks pretty awesome we're going to save this you want to see a real cool trick i want to have three columns right there but i now don't want to design this whole thing with your hover modes so what you're going to do we're going to press this trash icon right there trash it again now we're going to duplicate this column and duplicate this column and now we have three exact the same columns and we only need to fine tune them one by one isn't that awesome i mean d3 makes your life as a website creator so much easier just go into the settings of this column we go to background and of course we going to change this background to something else we're going to upload a new file the file repair bike shop and press upload image wow we're going to save this one and we're going to the third column and we're going to change the background you see that all also all the titles here are changed to oswald bell okay upload files and we're going to upload the file rent bike shop upload image and here we are save this one save these row settings and now as you scroll down you can just easily change these text by hovering over it go to the settings and just change this to repair and this one too you have experience with all brands and all types save it this one you can just make it whatever you want let's make it rent solid bikes that are ready to go for your journey and we press save now save this page and now if you want to see if all these huffer things work just press exit visual builder right there and if you hover over it you will see another image that is just great and if you go to the other section we just created and if you hover over it it will turn to another color i think we have done a pretty good job so congratulations drink on that but we are not done yet so we scroll down we're gonna enable the official builder again we're gonna create a new section right there so click on add new section we're gonna use a regular section and we're gonna use this row with two columns click on it first module we are going to add is a text module and the text we're going to add is very simple why you go over to design you go to text and we are going to change the text font to oswald we are going to change the color to the global gold color the text size will be 80 pixels on desktop we're going to change it later on for mobile just hold on the lineup will be 1.3 and then we're gonna save this module press save changes so for the next module we are going to duplicate this module press duplicate and we're going to change this and we're gonna change the text to we do comma what we do all right then you go to design and we go to text and we're going to change the text color to our global dark gray color this looks great the text size is great detects line height well let's change this to 0.3 this looks really great we're going to save this one and then we're going to add another text module just press this plus button we're gonna add another text module down there and the text will be the enthusiasm for cycling any attention for detail this doing which is our banking shop all right you go to design we go to text we're going to change the text size to 20x pixels we're going to use the global dark gray color and as you can see it's a little bit too close to the other titles so we go down there we go to spacing we're gonna add five few white that's okay and when i'm seeing this i think this letters need to have a little bit more spacing so we go to design and this time we were working with the line height so we can just up this a little bit yes that's okay but now you see that the space between the letters from the golden letters and the dark gray letters is not the same so you scroll down a bit and you go to spacing we're gonna add a little bit of margin on the top let's say three few white i like this all right for our next thing we are going to do we are going to add a few pictures up there so people can really get to know us so we're gonna add a new module and we're gonna add a image module click on it and then we're gonna upload a file and you can use the file handsome mechanic number one all right so the alt text should be of course the name of this person but let's use handsome mechanic one this is one handsome mechanic then we go to design then you go to alignment and i want to align this one on the right side of the row that's beautiful and that's it we can close of this one right here we're gonna save it and then we're going to add another image add image and then we're gonna add of course the handsome mechanic number two there is a woman and we're gonna upload the image well let's get a little bit creative with these boxes in here we go to design then we go to spacing and we're going to change the margin because what i want is a little bit of overlapping a little bit of a bit playful design right here so then you add the minus sign and we're gonna add minus 75 pixels there you go now the image is on top of the other image this is great we're going to the left one of the margin we're gonna add minus 50 pixels and then we're going to save this one let's add another image just as the same as the handsome mechanic number one just press the plus icon add a new image of course you can also duplicate it and but then you need to change all the spacing again so this works sometimes faster and you click on the image we're gonna add handsome mechanic number three there you go upload it right there you go to design we go to alignment we're going to align it on the right side the same as with the handsome mechanic number one and then we go to spacing and what i want i want this image to go behind the mechanic number two like this minus 75 pixels all right then we're going to save this one however what you see right now happening is that this image is overlapping this image what i want is i want this image to go below mechanic number two how are we going to do that well now comes a little thing in place we call the set index how does it work just add go into the module settings of mechanic number three you go to advance you go to position and here you can see the set index this actually dictates the priority of the level where the modules will be according to each other we are going to give this guy a set index of 10 for example we're gonna save it it's still on top all right then we go to this image and we're going to change this position go to advanced position we're going to give her the set index of 15 and we press save now what you'll see is that the image with the high set index will go on top on top of the other one it's amazing it's really useful let's add another module to make things way more smoother scroll down a little bit and we're going to add the plus icon we're going to add a divider click on divider we don't want to show the divider so you can switch this off but then you go to design and we go to border click on that we're going to create a border from of 4 pixels and we're going to use the color our great golden color that's beautiful then you scroll up a little bit and then we go to spacing and then we're going to create a padding of 200 pixels and i want this to be on both sides as you can see right now we have a beautiful rectangle but now we are going to move this thing up behind and over the images it's going to look awesome but so how are we going to do that we go to advanced we go to position and we're going to change the position from relative to absolute i want this to be absolute alright as you can see now it is it is over mechanic number one but i want it to go in the middle so we're gonna pick this one right there and now it's beautiful in the middle that looks awesome and now what you can do is you can play with the z index to see what will happen if we go to set index of 10 it will go over mechanic number three and over mechanic number one but behind mechanic number two isn't that awesome so as you can see when i change this to a higher value i will go over mechanic number two but if i lower this one to a lower value well here we go now we are behind all of them because i have changed the z index to when i change it to 10 i will go on top of mechanic number three but behind mechanic number one well whatever i actually want i wanted to go behind mechanic number three but over mechanic number one and behind mechanic number two you get it so let's change the z index to nine because you got to be honest this looks really great we're going to save this one right there it looks great but what you can see right now is the text column has to be a bit lower to fit all the images because when we lower this side then it looks great if you want to lower an entire column you don't go and change the first module but you go into the settings of this row and we go to the first column right there and we're gonna press this gear icon here you go you go to design you go to spacing and you're gonna add a little bit of padding on the top so let's see how much we need well let's try six few white this comes really close let's change this to seven well i would say we use the the divider for our middle section and the the woman mechanic number two for our center line so we are going to i think eight view white is perfect let's save this save it again and now you have a beautiful section right there there's one thing we need to change though is i think the background looks better when it's not white but it is the the yeah the grayish broken white so we're gonna change the section settings we go to background and we go to global and we're gonna change it to this one yes this looks awesome so this is a good time to save your page i'm gonna show you another thing we can do because what we like to do is we have to like interaction with the user you're gonna go to mechanic number one we go to advanced and we go to scroll effects with the scroll effects you can do amazing things it's really awesome so what do i want with this image i want all these images to really slide in place when we scroll down and up so we need to use the horizontal motion click on it and press enable as you can see it starts moving right away so when i move up it goes this way and when i move down it goes this way and if you now look at the scrolling when i go down it goes further than the place we wanted to go that is because the ending offset is set to -4 let's change this to zero there you go back in your place mechanic number one and now when you scroll up it will come from this side go in and stay on the place where we want it to be that's great we're going to save this we're also going to use mechanic number two oh do you see what's happening there is a conflict between the set indexes of these two things because divi is not sure which one you want to select do you want to select your image or do you want to select this box the divider how can we work with that well i'm going to show you just open up the options down there if it wasn't open already go to this options right here and here you can customize the builder settings toolbar and we're going gonna press this one and this one and then we're gonna close it now you have two extra tools this is hover mode and this is click mode so when you press on click mode now when i hover my mouse over things i don't see the options right away see that but when i click on it so i click on this image then it will stay in place and i can hover everything and you can select the boxes you will want if also this doesn't work because when i want to go to the options it doesn't work it's like the other one there's another way if you go down here you have the wireframe view if you click on it now you will see how our website has been built up on the back end this is the section this is the row this is the text we created and these are the images and the divider that we created go to the image you want to change press the gear icon if you want to change all the labels you see here you can go to admin label and change this to mechanic number two and as you will see in the wireframe here the labels will also change is useful if you switch a lot between the wireframe view and the desktop view then the admin labels are really really really useful for your own convenience so what we wanted to do we while this box is open the options you can go back to the desktop view and now you will see that we can change mechanic number two while we are in desktop view we go to advanced we go to scroll effects we go to horizontal motion and we're going to enable this one and then i want the any offset again to be zero and i want this to come from the left side so i don't want it to come from the right side like mechanic number one no i wanted to come from the left side so our starting point should be minus two let's see if how that is they just slide into pre place well we can also change this to -4 and then when you scroll down you will see that it appears right there but i don't like that mechanic number two is sliding over our text so we're going to change this one to 0.3 minus 3 minus 2.5 i think minus 2.5 is awesome as you can see the text is still readable and there they go this is great what i also would like to see is that they fade out a bit so we go to fading in and out press this one and we're going to enable it right there and then you see the starting capacity is zero percent mid is 100 and ending at 100. let's see how that looks here you go and now our mechanic number two is completely gone and when we slide in they appear this is a beautiful effect we're going to save it because i like it you can change it of course any way you would like and i also want mechanic number one to fade so we're going to the options of mechanic number one we go to advanced scroll effects and we go to fading in and out press this one enable it and i think that's everything we need to do for this one we go up there he goes and when i scroll down there he is beautiful now if i want these scroll effects of mechanic number one to be copied to mechanic number three there is an easy way to do that just press on the options right here or press your right mouse button on the scroll effects and press copy copy your scroll effects it works exactly the same copy scroll effects save this go to your mechanic number three press on in we have a conflict right there so we go to the wireframe we go to and then you see the image right here which is mechanic number three you can change the label of course but now we press this module settings and we pressed paste scroll effect styles or you can just use your right mouse button on the module and press paste scroll effect styles paste it in and now when we switch to desktop view you will see that the image of mechanic number three does exactly the same as mechanic number one however there is a little bit of problem because from user experience when you scroll down where do you stop do you stop here do you stop here and you want to read the left side or do you scroll even further i think people will stop over here the problem is our mechanic number three is not in his right place and he is still a bit faded away so we are going to change that go into your wireframe go to your mechanic number three we're gonna press the gear icon switch back to well let's change the admin label first to mechanic number three or whatever all right then switch to your desktop view right there scroll down a bit and what we want to achieve is when the readers are here the image is already in position and not faded anymore because you always have to think from your visitor's point of view how will they see the website and how will they use it when i visit my own website it feels like this image has not come into place on the right time so it feels not professional well if there's one thing you don't want is that your website doesn't feel professional so we go to advanced we go to scroll effects first we're gonna change the horizontal motion to get in place a little bit more earlier so what you're going to do we're going to use this slider to slide to the right side until it is in its place right there so we're going to put it on 25 let's test it out when i scroll down now is it in place yes it also means that it slides a little bit quicker than the others that's okay let's go to fading in and out and we're also we're going to change this one to the same well let's stop the animation at 25 let's see how that works for us we go up we go down why we do what we do and here they come sliding into place stopping at the perfect time i really like this we're going to save this one and we're going to save this page first i'm going to switch back to hover mode because i like this more and now we're going to save this page right there because this home page is really starting to look awesome don't you think we have hover images we have hover colors right there we have smoothing images this is pretty awesome all right but we're not done yet of course not i still want to create two sections i want to expand this a little bit to have a little bit of introduction about our shop so we're going to add a new row right there and let's use this one we're going to use a image on the left side press image i'm going to upload the file called bike shop inside so now people can actually see the inside of the bike shop i don't think this is the most prettiest picture they could have made but we'll just use this one because it was it was not copyrighted and rise free so we're gonna use this one all right save this one because this is everything we need to do on this image press save then we go to the second column we're gonna add text and the text is just a little bit of text about when it was founded by the wordpress doctor etc etc then we go to design and we go to text and the only thing we are going to change is the color we're going to change it to our dark gray and the text size is going to be 20 pixels all right that's it for this one we're gonna press save changes i really like this rectangle right there so we're going to create another one below the image just press the add new module we're going to add a divider again you know what why don't we just copy that one and add it to there let's see if that works just scroll up a bit hover your mouse over this one it has a really big conflict so we go to wireframe we go down there we have mechanics we have our divider press on this duplicate button now the beautiful thing about diffies is so flexible you can just hold this one and just move it below the image and drop it go back to your desktop view and let's see what happens there is our beautiful divider up there well i don't like the way it starts right now so we go to these settings and we go to design we go to spacing and then we go to the padding bottom and we change it from 200 to 300 however because it's linked the other one changes also i don't want to be it's but it's not the same as the image so we're gonna unlock this one and we're gonna change this one back to 200. there there you go well let's change the margin a bit to make it a bit more playful let's go with minus 75 pixels that's a bit too much let's go to -20 but let's go on the left side to -50 that looks great well let's make it minus 75 yes this is what i want this looks this looks great then we go to advanced we go to position we're going to change the set index to 5 save it because what i want to achieve is this image i want it to be on top of the divider and now the divider is on top of the image i don't want that so we go to click modus i click on the image and change the image i go to advanced i go to position and i go to change the set index to 10. we can also change it to 6 but i always use steps of 5 because you can always if you have more modules you can always go to 987 for example let's save it now we have even more information about our store what i miss actually is just a call to action right here with a button which is let's learn more about us so we go to these hover modes again we go click click on the plus button add a new module and we go for buttons add a button in the button text will be more about us and you go to design let's go to button we're going to use custom styles for button hit that switch and then we go to the bottom text color we're gonna make it white then you go to the bottom background and you press on global and you use our beautiful color button now you can see we have our beautiful button with the golden style however what i don't like about this is the white border around the button so what are we going to do you scroll down a bit and you go to button border white and change this to 0 pixels now we don't have a button border i do want however to change the button font let's change this to nunito and our button is done right now so before we save this and go away i want to show you another thing when you now go to preset right there you can press it what i want to achieve is that when i add a button module this button shows up it will make our live as designers way more easier and when i save this button as a preset anytime in the future when i will change this preset all my buttons throughout my entire website will be changed not only the color but we can change everything the icons we can change the size of this thing everything will be changed in one go how awesome is that diffie makes your life so much easier so we are going to press this button update preset with current styles we press it and we get a warning are you sure this will affect all bottom modules using the button default preset that goes to your entire site do you wish to proceed yes sir we do press yes and now we're going to save this button we're going to save this page and now i show you what will happen when i just press this plus button and i will go with a button and as you can see right now the button style is immediately the same as we have created our main button isn't that awesome yes it is doctor i want to finish this page with a map i want to show visitors where our bike shop actually is so we're going to add a new section right here and we're going to use a full white section press on full white and what we will need you might think well we are going to a full wide map so the first thing you will see is this for development purposes only this page can load google maps correctly do you own this website because what you need is a api key creating a google maps api key is a bit of a hassle and also it is limited that means when you have a lot of visitors for example if you have more than a million visitors on your website then google says well that's okay but the more traffic you generate you have to pay per thousand views and it's gonna cost you a couple of cents but when you have million of views it really starts adding up so we're not gonna use the full wide map setting just close this delete the module again by pressing on the trash again and we're going to press this plus icon again what we are going to add is a full white code press on it and there's nothing here i'm going to show you how you add a maps module the easiest way open a new tab and go to google maps and on google maps we type in gizmo cycling and if you zoom out a little bit then you see that this is las vegas in the middle of the desert so but when i embed this map on our website though do people see exactly where we are well if you maybe if you live in las vegas but you still need to look at it and say oh there's whispering timbers there is walmart so what do you want to do and they have to think and you don't want people to think on your website trust me there has been written a book about it don't make me think it's an excellent book for online marketing zoom out on your on your map this is what i want to see on my website so people know exactly hey this is vegas and there is the bike shop that the website is on all right we press share right there we're gonna press embed a map and then you press copy html just click on it then we go back to our website and what do you do you just paste in the code we've just copied from google maps hubza this looks great uh but i want this map to be full white so what are we gonna do you go to white right there and we're gonna press change this to 100 there this looks really great the only thing we need to do right now is we're going to save it and we are going to save our page before we do anything else we need to check if this page is completely responsive okay for different devices so you go down there you click on this button and you go to the mobile view here we go and now we are going to assess this thing just put it on the phone that you have i have my iphone then so i'm gonna put it on there and then i can see that some things are not quite as nice as i want to because uh well i think this is pretty okay but then the rent is as you can see it is full over the other one so we're just going to open up this module and then you go to design you go to spacing and as you can see we've already changed this but let's go to the mobile version right there and we're gonna add a little bit more chop so let's say we're gonna use 50 pixels and at the bottom also 50 pixels now this is way better now we have more spacing so that is a very very nice all right this looks all great let's go down more this is also acceptable yes the buying things the repair and the rent this all looks pretty good so i'm happy with this one why we do what we do i like the size of this one is really in your face and on mobile this really looks great if you scroll down now we get all our images from all the different kinds of mechanics and what you will notice right here just this is perfect nothing is going wrong right here here we go there's something wrong here we have the image and we have the border around it which is way too big for our mobile devices so how do we fix that you go to your the settings of your divider right there we go to design and then we go to spacing and here you change the padding don't forget to click on the mobile icon and then we're gonna change the padding to 100 and 150. let's see how that looks this looks really great however on the left side you can still see that the border is completely gone you can leave it this way if you like it if you don't go to margin press the mobile icon and here we go we gotta make it from sift 75 to 25 that's it so we're going to save this one all right so this is so good the mobile is the mobile button is okay and the map right there works like a charm even on mobile let's quickly check our tablet device we go with a ipad and an ipad it just looks really great guys so we really don't have to change a lot about the ipad this looks awesome oh hey the rent text is too close again to the title below it so we go to rent go to the settings go to design you go to spacing and it's already on tablet mode because we have selected it down there and now we're gonna add to the bottom well let's say 50 pixels again and let's also give it a top margin of 50 pixels we're going to save this and now it also looks great on our tablet all right this page is now completely done so you can save it down there and now it is time i think to create a beautiful header and a footer because this websites really need a awesome header and a awesome footer so we're going to exit a visual builder and we go to dvductor we go to the dashboard of your website on your dashboard you know you can just change this around don't you well just a quick clip if you don't want to have all these things right there you go to screen options and here you can just close for example activity or a quick draft if you're never going to use this and at a glance well you can just change this all the way you want you can even have your analytics up there uh you have to follow another tutorial of mine to use a certain plugin which shows your analytics right here so the first thing we need to do to create it we go to diffie we go to theme builder in our theme builder you will see our custom header and custom footer for a specific page are coming soon page what you also can do to hide your header in your footer just press this icon hide it and hide it press save changes now if you go to the website in a private window you also don't have a header and a footer so there are two ways to accomplish what we just did all right let's build our global header press the add global header button right there and it's gonna say add from library specific page no we don't want to copy it we don't want to edit from a library we're going to build a global header so press that button and now we get of course the dv theme builder we're going to build it from scratch and we are going to add a normal row just edit and the module we will be adding is a menu module so add that one in there and click it in the first thing we'll do we will be adding a logo so press on the logo right there and we're gonna add a image and the file we'll be using is of course logo.png just upload it up there add the alt text mainly you always use your company name but that's okay right now and we upload it in well it's a beautiful logo but you can't see it so we're gonna save this menu then you go to the section settings right there click on it and you go to background and we're gonna change the background color to our global dark gray color here you go and while we're here we go to design we go to spacing we're just gonna give them a zero padding on top and bottom then you go to box shadow and i want to have this menu a awesome shadow like this as you can see it there is a very subtle shadow right there which will be great when you are looking at your website it just gives that really nice little detail so i suggest you edit them then we go down and we can just save this we go to the settings of this row because it's still too big for what what i want so press on the row settings go to design then you go to spacing and on the top and bottom you'll add 5 pixels and we're going to save this row here you go and then we go back in the menu module settings open them up first thing we do we go to background of course and we're going to delete this background and now you can see our logo wow it's awesome it's the w per bike dock well you know what i mean so you can edit your own logo of course okay then we go to design and we go to menu text the active link color is the link this is the color that will be shown when you're on a page and then that one on your menu will be become discolored we are going to change this of course to our beautiful golden color the menu font i want this to be nunito so we're going to change that and i want this to be bold and i also want the menu font to be uppercase because i like that any menu and the menu text color will be our global broken white color this looks really smooth but when you hover over it i want it to go to the golden color so the normal color is the broken white but when you hover over it it's gonna be the golden color text size of 15 pixels scroll down a bit and detect we change the text alignment to the center so we have more space up there it really feels great next thing we click on the drop down menu and here we can change all the colors of our menu those are a lot so let's get started i want the drop down menu background color to be dark gray i like that the drop down menu line color should be our golden global color the drop down menu text color should be our broken white on the dark gray it looks great active link color of course is gold and then we go to mobile menu background color that should be also dark gray any mobile menu menu text color should be the broken white let's go to the next one icons in your icons you can change all the icons to the golden color this is the search icon and this is the hamburger menu icon color if you want to appear the search icon in your menu just go to content go to elements and add your search icon and there it is uh i'm not going to use it on this website but you can you can always add it in if you want to let's go back to design go back to icons okay so that's basically it for the menu settings so we're going to press save changes right here uh let's add in another module i cannot see the plus icon right here so you know how to change it you go down there you go to wireframe you press on this plus icon and we're gonna add a social media follow click on it and then we switch back to our desktop view let's add a few social networks of our own i want to have facebook let's go to background immediately and change the background to our global golden color that looks really great don't worry about the icon we will change it in one go later on while we're in it go in and add your own facebook url and press save changes and we're going to add another social network just press on this copy button go into the settings change this to instagram right here and we go to background all right press save this one add your link in press save changes and we gotta add another one let's add a twitter icon in go to the background make it global golden and your link should be save it now i want this social media icons to be on the top right corner i really like that how are we going to do that well let's i'm going to teach you a trick how to place anything anywhere on your website just go to advanced you go to position and we change the position to fixed and then you're gonna press of this icon right here in the corner and as you can see now our module changes to the upper right corner that's exactly what we want then we go down and we're going to change the vertical offset to 30 pixels and we're going to change the horizontal offset to 2 view wide this looks really great to have it right there then we go back to design because i forgot to change the icons and i want the icons to be our global dark gray now that looks very nice you can also make it white but i like the dark gray with the dark gray and the gold this is awesome if you want to change the size of them just go and press this button and then you can just size them any way you want but i don't want that because i like this size it looks great press save changes so if you look at the header you will see that there is a lot of space going on on the lower at the bottom of our menu i don't want that so we're going to the settings of our menu go to design you go to spacing and the bottom margin watch what happens when you enter a zero and this looks great so our menu is done we're going to save it right here and this is a good time to to save your header right here but what i also want is that when we scroll our page our logo goes to the goes more to the left and becomes a little bit smaller that is what we want to achieve because i think it is more nicer you have more space when you're visiting and watching your pages looking at your page on your website how are we going to achieve that well we need a little bit of code of course the first thing we are going to do we need to copy this row so press duplicate row right there and now we have two rows right next thing you do we go to this module settings in here you go to design we go to sizing and we are going to change the logo max height to 50 pixels now i think it's still not far enough on the left side so what are we gonna do we're gonna save this module we go to the settings of this row we go to design we go to sizing and then we're going to change the white of this row to 90 and the max wide to 100 there you go now this looks pretty awesome now we go to spacing and we're gonna change the padding to zero pixels any button also to zero pixels so that it just becomes a little bit more smaller when we scroll down the page this is exactly how i like to see it while we are at this row we also go to advanced we go to css idn classes and we're going to add the class right here of headers dash 2. exactly that what we're going to need it later on when we enter in the code we're going to press save and then we're going to the settings of this row the upper row you press it you go to advanced go to css id and classes and enter the css class of header 1. you can find all these stacks also in the file you've downloaded which says which all the css classes and codes we need to use so this one is header one and we're going to save it right there all right this is starting to look very awesome however if we now look at the front side of our website you will notice that the social media icons are not completely in place why is that because we have removed some of the pixels from our menu so how are we going to fix that we go to wireframe view and you're gonna open the settings of the social media follow the second one so down there press it then you go to advanced you go to position and then we're gonna change the vertical offset to 20 pixels that is because we have taken off 10 pixels from the menu module get it save changes and if you now look at the front side you will see this change this is that is great but now we also want this menu to have it sticked on the top of your page right when you're scrolling the menu is always there you have to go to the section settings right here we go to advanced and we go to scroll effects and then you have this sticky position i want it to be sticked on top that's it just press the save and now we're going to add for the great phenol that we're going to add some coding so we're going to press this plus icon and we're going to add a code module and you can just copy and paste the code from the file that you know all right then we press save it and well what what can you do if you go to wireframe right now you will see that you have a code oh it has to be below the social media follow and then you press this button and you press lock now no one can edit it by accident or delete it or anything press save and we're gonna see how it looks on the front side we're going to close this one and very important press save changes again right there because when you add a new header you have to save it again and you go to open your link in a new tab and now as you see you look in your website you will see this where is our beautiful homepage well our homepage is right there we scroll down what happens whoops here we go so our header just just swipes into place it becomes smaller and it goes on the left side but the eye can stay on the same side this is a beautiful header i'm really happy with this one we're gonna fix another thing if you click on home your wordpress things this is your home well it's on our homepage so we're gonna fix that right now we go to the dashboard of our website then we go to settings and you go to reading click on it your homepage displays now is that your latest post no we want a static page and our home page is our home and we press save if you haven't already done so you have you can enter this discard search and from indexing but you won't need it because of our script no one can see your website not even in the box from google so now when we go to our website we press dashboard we press open link in a new tab and now this is our home page and this is the way we want to see it however we still don't have pages up there so we're going to create this menu later on first we are going to create a awesome footer to create our awesome footer we are going to the theme builder and we are going to add a global footer right there and click on build global footer then you click on build from scratch and we are going to create a row with four columns first we are going to close this one and we are going to change the color of this entire section so go to your section settings we go to background and we're going to give it the global dark gray color press saves changes and then we are going to add our modules so the first one is a text module just click on text module and we're gonna add contact us then go to design and we go to text we're gonna change the text font to oswald it's right there because we have already used it we are going to change the color to our global golden color the text size and change this to 30 pixels that's it press save changes now for the title you can just duplicate this row because i want to have three titles in a row so you can just duplicate this one like this that's also possible but what you can also do is go into the settings of your row just delete the other columns and just press copy copy now you can copy the entire column so that's also a way a quick way to copy your columns so you can create exactly the same everywhere it really is awesome we're gonna add another module down there so press add new module and the first one is a blurp let's add a blurp one so we're gonna delete the title and the content will be your address so let's let's use the other address we used in las vegas from the gizmo shop the gizmo cycling shop so that's okay go to imagine i can and we're gonna use a icon right there press pull the switch down to yes and for the address i would suggest we use a house right there in the middle and then we go to design image and icon and we're gonna give the icon the color gold uh image icon top placement well let's place it on the left side right like this and we're gonna pull this switch use the icon font size so we can control the size of the icon and we're going to change this one to 21 pixels that is great and then we go to body text or you can just hover your mouse over this one and press the brush icon you will go to body text immediately the only things we're gonna change are the color and size i want it to be 18 pixels right there and the color will be our broken white this looks pretty nice press save changes we're gonna duplicate this entire module with this button duplicate module we're going to change this one and the next one will be our telephone number so they can call us at the one two three four five six two thousand twenty one zero very nice number then you go to image and icon and we're going to change the icon to not the house but the call icon right there this looks great and this one is done so press save changes we're gonna duplicate this again and then we're going to add our email address change this to your email address from this website you go to the image icon and we are going to change the icon of course to a envelope so everybody knows this is the mail then we go to link and we're gonna change the module link to mail to and then the email address and press save and now you can actually click on this entire thing and it will open up email what i do want to do is to change the color because when you hover over it like this go to a hover we're going to make it gold when you hover over this one so everybody knows it's a link press save and we go back to the phone number because of course we also have a link for your phone numbers which is very useful when you are on your on your cell phone on your mobile on your smartphone so the module link will be tell and then the number one two three four five six two thousand twenty one zero and of course i also want the text to go gold when you hover over it so we go to body text color press on the hover icon and make it global golden when i hover over it and this is the normal color and this is when you hover over it okay great save it and for the last one of course maybe your business wants to show your text number you can add it in right there we go to imagine icon we're going to use another icon for example this suitcase don't forget to remove the link because we have duplicated a module from the top so we're going to remove the link and we're also going to remove the hover effect when you pre when you hover over it because there's no link so just click on this one and now hover effect is gone all right press save changes now we're quickly going to change this because i want all these modules to appear on the left side now you can of course drag and drop them all over but it's there is a faster way just go to the settings of your row then you drag and drop the second column on top here you go it's that easy all right we're gonna change the title of the second column and the title will be stay updated save this one and then we're going to add a new module and a module will be called email opt-in we're going to remove the title and the button will be keep me posted and then this content will be received once a month the latest bike news in the area and special offers then you scroll down you go to email accounts and we have already connected milsim to our website the only thing we need to do is we need to change the list so click here and press wordpress doctor or whatever your name is and then it is successfully connected with your mailchimp account it's so easy then you go to fields and we want a single name field of course and what happens on the success action well we're gonna show a message and the message will be thank you you are successfully added to our mailing list then of course we have the spam protection if you want to use this you can press yes and then you can use recaptcha i have created a video clip about how you can protect your website from spam so this is definitely useful if you want to use recaptcha version 3. we're not going to use it do this right now just go to design we go to layout are we gonna change the name full white no no no no not the email for white this is way better and then of course what else can we do we go to fields the fields background color is going to be our global our global broken white color and then our field text color will be of course dark gray and our field focus background color will well let's make it white so when people click on it this is what happens it goes white so it's really focused and the field focus text color should be also your dark gray so it's pretty good so it's very readable and then you scroll down this is all good we go to fill text alignment and we're gonna center it this looks even better we're gonna change the field text size to 18 pixels and then we scroll down and we go to the body text right here this is this text here we're going to change the body text color the color is of course our broken white the body text size will be 18 pixels and then we go to result message text and the color of this text will also be the broken white color and we're going to center the message right there and let's make the text side also 18 pixels and then we go down and we're gonna style the button of course we're gonna use custom styles yes the text color will be our broken white and the background color will be of course our beautiful golden color that's awesome what you still see is this this ugly blue so we go back to content we go to background and then you just press this use background color no and there it is our beautiful opt-in module is just looking awesome right there in our footer of our website so everyone can just receive once a month the latest bike news in the area and special offers that's great this is a great time to press ctrl s on your keyboard to save your beautiful footer then we're going to change this title to more because i want to have a place where we can add our landings pages so we have more internal links if you have no idea what i'm talking about you should really check out my video about seo the three timeless pillars of seo because it will really help you out we're just going to create a new text module and the first link will be rent a bike in vegas so when people look search for rent a bike vegas they will go to this page well that's the idea of course we're going to design we go to text we're going to change the text size to 18 and the color of course to the broken white alright and of course when we hover over it we want it to be gold because it is a link once you have created the landing pages the only thing you need to do is go to content go to link and create the module link url and it will be something like rent bike vegas for example this would be a typical landing space to get ranked when people search on rent bike vegas press save then we're just going to copy these links for all our landing pages we have on our website what do we have on this website we have renter bike we have bike repair in vegas and we have of course buy a bike in vegas we're gonna save it and later on we can always change the links behind it so you actually will go to the landing page all right for the last part right here we're going to remove this title and we're going to add a image and the image we are going to add is of course our logo upload an image right there it's beautiful just press save because this looks great then you're gonna going to duplicate this one we're gonna add another image because most websites most businesses you have certificates that will give the viewer immediately a sense of trust because of your business is certified and it is awesome it's strange so we're going to upload load a new picture just press upload and we're going to upload certificate pmbi so copy all text right there upload an image this looks great now we have also a professional mountain bike instructor association badge and now our footer looks pretty awesome if you want a little bit more spacing and you can go to the settings of this one go to design spacing and let's add another let's add a little bit of padding to one few white let's make it two we're gonna save it and now it looks completely beautiful there's one more thing we're going to do we are going to create a new row a new section right here because i also want to have a place with copyright stuff and who created your website we're going to add a new regular section and we're going to add a row with two parts the first one is of course a text module and we're the text we are going to add we're going to delete this text and we're going to press this button right here you see that use dynamic content so press it here you can use to fill it out automatically and why are we using this well i want to use the current date and then you go to date format and we're going to change it to custom because i don't want the entire date what i want is just the year now watch me watch me because we're gonna type before all text and images copyright space and then you go after your custom date there will be space w press dark point shop right there and now when i press save this is what you see you see this year will always be updated isn't that awesome so you will never get a visitor going to your website and see 2021 it is 2025. are they still alive are they still working on this website you see that is why this is so so so useful we're gonna press design we're going to text we're going to change this a bit the only thing we're going to change is the size 18 and of course the color it will be dark gray press save then we go to this one and we're going to add a new module it's going to be a text module also and this text module is only a ud creator you don't have to do this but i like to do this because this way everyone will see hey you create this awesome website i want also this awesome website created by this guy and so you can get more customers add in your personal name or whatever and then you're gonna add your website let's redirect them to wpressdoctor.com and make sure it's in a new window and press ok then we're going to change this one press the brush icon of course 18 and the color will be dark gray then you go to the link press the brush icon and also going to clear global we're going to make it dark but we're going to underline this so people know it's a link and we're going to press the link text size is also 18 but it's done automatically and then we press the save button down there this looks pretty great now we go to the settings of this section press it and go to background we're going to change this one to the global golden color wow however it is way too big for a folder so we go to design we go to spacing we're going to change the padding to zero top and zero bottom now this is how i like to see it we're going to press save and now we're almost done because the only thing i don't like is that this is just somewhere in the middle so we're going to change this we go to the brush icon again and we're going to all the way down we're going to change the text alignment to the right press save it press save again and now your footer is completed well done press on the cross icon and then you press save changes now we'll look at the front and how it look on our home page go to visit site open link a new tab we're going down and everything looks awesome on our website and as you can scroll down there is our beautiful footer it is right there people can stay updated with their email and they get added to your mailing list they can contact you you can actually press these buttons as you can see the color changes here are the landing pages and here are your logos and these certificates and it's created by you and the dynamic content of your year hey congratulations you have just created your global header in your global footer and this will stay the same on every single page on your website well done it's time to take a sip of your drink go and walk a little bit because we have been busy for a long time so get up your feet refresh and be proud of yourself because we are making really big progress right here so well done i am proud of you alright so the next thing we are going to create is the contact page now follow me you go up here and you go to your dashboard and you go to pages and we're going to press add new all right just press this cross icon and add your title is going to be contact and you're going to press use divi builder press build from scratch and the first row we are going to add is a row with two columns just add it in and the first module we are going to add right here is the post title click that one and then we go to elements and let's just disable this one and this one and after that we go to design we go to title text and then we go to the title text alignment we're going to align it in the center and the text color will be white the title text size will be 50 pixels and after that you scroll down and you go to sizing we're going to change the white of this thing to 400 pixels and align the module in the center well we can't see anything that's happening right now so we're going to save this for a while save changes and we go to the settings of this row and then we go to background and we go to the global colors and we're going to use this golden color for the background hey there is our post title awesome and then we go to design and we go to sizing and we're going to change the white to 100 and the max max white also to 100 then you go to spacing and we're going to change the padding to zero top and zero bottom padding and then press save changes and now we go into the section settings click that one and then we go to design and we go to spacing and then we go to zero top padding and zero bottom padding right here all right so this is the way we want to press save changes and now it looks very small but hold on let's get back into the module settings of this post title and then you go to design and you go to spacing and here we're going to change the padding to 50 pixels and the bottom also to 50 pixels then we go over to border and let's give it a nice round a a little bit of border for pixels and let's make it white again this looks great and we press save changes now we go to the second column we're going to add a image right here and the image you can upload is called the bike in a city 3. there you go this is beautiful press save changes but now that you can see is that our little post starter module is not in the center of this row how do we do that we go to the row settings and you go to design you go to sizing and you're gonna press this button equalize column heights and then we go to content you go to the first column the gear icon right here press it you go to advanced you go to custom css and then at the main element you type this margin is auto right there and we save it and now as you can see it will line out the first column exactly the same with the second column this is awesome all right i'm really happy with this one we're going to add another section right here we're going to make a regular section we're going to use this column layout and the first module we're going to add is a blurp here we go the title will be our team and the text will be all employees are available for servers around the wheel storage as well as for all questions regarding bicycle technology don't hesitate to ask us anything you get to point then you go to image and icon we're going to use a icon we're going to click on this icon yes and then we go to design we go to image and icon i'm going to change the icon color to our beautiful golden color and then we're going to image icon placement to make it a left alright we're going to switch this one use the icon font size so we can actually control the font size let's make this 120 pixels this looks great let's go to title text and we're gonna change the title font style to capsule the color to our beautiful golden color the text size will be 36 pixels and then we scroll down and we go to our body text in our body text we will have our body font let's change the body text color to our global dark gray color the body text size will be 18 pixels all right i think this looks pretty good we're going to save it and then we're going to duplicate this entire module by pressing this duplicate button all right and this the title of this one will be opening hours and it will be monday till friday nine to six and saturday and sunday ten to six and because of we created the blur before it's pretty easy to just duplicate your stuff all around all right let's change the background of these two columns we go to row settings we go into the first column here and we go to background and we're going to give it our global broken white color right there this looks great but i think the spacing is off so we go to design we go to spacing here we're going to add 50 pixels to the top and also 50 pixels to the bottom this looks pretty neat and we're going to save this one then we go to the second column right here we go to background also and let's give it our golden color to our second column and then we go also to design we go also to spacing and let's give it a also a 50 pixels top and a 50 pixels at the bottom and let's also give it a 50 pixels on the left side and 50 pixels on the right side and press save changes and press save changes again and after that let's add our last module in the left column it's going to be a image and we're going to upload a file called team of course this is our team and as you can see it is full white so but i don't like that one so what we're going to do is we're going to enter the settings of the image we go to design we go to sizing and we're going to make this percent we're gonna align it in the center and this is great press save changes and now we have our beautiful team on our contacts page of course the context page is nothing without a form so we're going to create a form in this second column press this plus icon add new module we're going to add a text module text module the content will be contact us and let's make it ah because this is our contact page and we want google to know that this is the contact us title let's go to design and then we need to go to heading text because this is a h1 the font is all good let's make the font style uppercase and align it in the center color will be white and the heading text size will be 36 pixels and that's it so we're going to save it and then we're going to add another module which is called the divider you remember it yes we already created one and this divider will be a white so you go to design and we go to the line we're going to make it white then of course we go to sizing and we want to make this four pixels thick and we want it to be 20 white like that and we're going to align it in the center this looks pretty great save it and we're going to add another module it's a text module press it and the text will be if you have any questions the fastest way to get in contact with us is using the phone but feel free to email this i email us using the form below of course so let's go to design let's go to text and i think the text should be 18 pixels right there this is way better and the text color should be our dark gray color all right that's it save this one also and then we're going to add our contact form so we're going to press the add module and we're going to add a contact form it is right there just edit we're going to style this a little bit name email message that looks pretty great and first we're going to fill in the success message thank you thank you very much for contacting us we will get back to you soon any submit button while you can add send or submit or whatever you like i like submit so we're going to leave it like there let's go to email and here you fill in the email address as which this form will be sent to so let's send it to the at www.com and the message pattern you can leave it empty or you can use all these different things but if you just leave it empty everything will be in it and that's the way we like it redirect after fill in i like this to do so to create a thank you page because you can measure it even better with google analytics or anything so you know how many people actually contacted you using your form so you can enable this one and redirect it to a thank you page like this one content think thank you for example you can use this one spam protection yes you can use basic captcha i use spam protection service which is a recaptcha and you can add it using your account but for now let's use basic captcha all right let's style this thing uh to be honest i never use this contact for module in my divi websites why i always use gravity forms i have created a awesome tutorial about that one so you can see exactly if it fits your needs and if you want gravity forms on your website however it's a paid plugin so i'm just going to include it in this tutorial because you have to pay even more and i think we've already paid enough for your website right now but if you do want to follow the tutorial and you will be very happy you did because it's a amazing plugin which gives you a lot of features first we go to design and we go to fields diffuse background color let's make it transparent the field text color should be white and i like it to be a little bit bigger so we're going to change this to 18 pixels then we scroll down and we go to our capture text and we're going to make it white also okay and then we go down again and we go to our button because this button is really ridiculous so let's press yes let's go to the button text color should be our global dark gray one and the button background well it's pretty awesome right now but let's just make it just in case make it gold the button border white is a bit too much so let's change it to one pixel and if you want to change the icon when you hover your mouse over it you can change it right here all right then i don't like it lit like this so we're going to change it a little bit more so we go to border right here and we're going to add a bottom border click on this icon and the bottom border should be one pixel and it should be white now this is way better that's basically it so we're gonna save these changes right here and as you can see now these two columns are not the same height remember how to fix that we go to the center row settings we go to design we go to sizing and we're going to equalize the column heights as you can see right now it jumps down so now we have the same height in both columns this looks way better all right that's basically it for our contact page pretty easy now right press publish and now our contact page has been saved let's exit the visual builder you can see how it looks right here this looks pretty nice and but now you can see in our menu that things aren't actually the way i like it so let's add a menu we go to dashboard we go to appearance we go to menus we're going to create a new menu name let's call it the main menu and the display location is a primary menu you don't actually need this in divi but it looks nice create menu and then we're going to add the the page contact let's add it to our menu the contact page if you press on view all you can also see that there is a home page let's add it also to our menu and you can also add custom links in right here we're not going to do that we're going to press save menu and now we need to activate this menu throughout theme builder so we're going to press theme builder and then we're going to change the global header press global header and then we go to this menu and we're going to change it to a main menu you already saw it change it back and then you press save changes and also let's do it with this one change it back to select the menu and then go to main menu and press save changes save the entire thing press the x on the top and press all changes saved and now we look at our website you will see that the menu has been updated to two menu items right here this is great all right let's create another page so you get the hang of it and can create your own pages following up let's go back to our dashboard if you now go to your pages i would like to duplicate this contact page we just created how to do that well press add new and we're gonna add a buy page and press use diffie builder now you can build from scratch but we can also do clone existing page click this one and then we can actually clone our contact page it's right here so click it and it's been duplicated right now and now it has been cloned but as you can see the title from contact has been changed to buy because we are using the post title module so every time you clone a page which has a different title it will become the title in the post title module isn't that easy yes it's awesome so the first thing we'll do we're going to change this image we're gonna use a image called showroom bikes press save it okay then we scroll down and then we have this layout well we are going to remove this entire row because we don't want it i want to create a new row so delete it gonna add a new row and the new row will have this column layout press this cross icon because we're not gonna add any module in right there we're going to add a background image so we're going to press the row settings again you go to the first column we go to background we go to image are we going to add a background image called tools bike by press save it and then we're going to design we go to sizing we're going to use custom gutter white and change this one to zero why as you can see the plus icon's moving now the the space between them will get smaller we're gonna press equalize column heights again and then you go to spacing and then we're going to change the top padding to zero and the bottom padding also to zero and the final thing we're going to do we go to box shadow we're gonna add a little shadow right there on the entire box it's gonna look beautiful let's save this one and let's go to add a new module and the first module will be a text module and the text will be custom bikes all right you go to design you go to text we're going to change the text font style to uppercase scroll down a bit let's make the color our gold color right here the text size will be 18 pixels here we go to align it in the center right there nice and then we scroll down a bit and we go to spacing we're going to add a top margin of well let's say 50 pixels all right press save it then we're going to create a new text module so add a new text module and the content will be individually configured right let's go to design we go to text we're going to change the text font to oswald and we're going to change the title font size to 35 and the text color to be our dark gray the text line height will be 1.4 and of course we want it to be uppercase i already typed it up okay as well that's okay scroll down and want the text alignment it hits center then we scroll down we go to spacing and we're going to add 25 pixels in the margin top margin this looks great all right let's save it and we're going to add a divider right here divider edit show divider yes we go to design we go to line let's make it gold we go to sizing and then we're going to change the divider y to 3 pixels and we're going to change the white to 25 percent well 25 yes change the module alignment to the center go to spacing and add too few white to the top and to view right to the bottom all right let's save this one and of course i want another module which is a easy simple text module and the text is fulfill your bicycle wish at w press by doc we will help you design your own individual bike we go to text we go to text size let's make it 16 pixels let's make the color of course our global dark gray and then we scroll down and we go to text alignment let's make it align it in the center and we go to sizing because i think it's way too big for the layout so we change it to 50 no 50 percent yes and align it in the center again this looks great go to spacing and then you go to your bottom padding and let's add well five few white yes this looks pretty cool that's it now we can actually clone this one and make it another one or well if you want spacing exactly the same just duplicate this entire section and now when you scroll down you will see this let's spice it up a little bit we go to this button and we're going to drag this column to there right see so now it is actually switched and that looks awesome so we're going to enter the second column go to the background we're going to change the background from the tools to one we've already uploaded of this woman dutch bike white upload image all right now you might get an idea where we're going to we just we only thing we need to do is we need to change this text to mid to fit our needs so we're going to change this one and make this text to complete offers yes we go to the second one and it will be on the set already go and then the text is something like this are you attached to your old frame what new technology let us advise you press save it after this you can press publish and we have another page with the subject by how to add this into a menu well press exit facial builder you go to your website press dashboard again you go to appearance you go to menus and here you can add your buy page to your menu right there let's change the let's change it up to there and let's save the menu you could also use this button automatically add new top level pages to this menu so if you create a new page it will automatically come in here which is pretty useful sometimes all right press save menu again and then we go to our website and then you can see that our buy page has been added in right there isn't that awesome and now if you want to create for example a repair page and a rant page it is exactly done the same thing you go back to your dashboard go back to your pages we're going to add a new page which is called repair we're going to use the divi builder and again we are going to clone existing page we are going to clone our existing page the buy page right it's that easy yes it is that easy and it's already called repair we're just gonna change the image to a repair image and we're gonna add this image we've used in the beginning upload image and like that and now we can just scroll down and change all the text we want we have experience with little bikes and all repairs we can even fix your bike while you wait easy and convenient press save it and scroll down a bit and you can of course change this also i'm not gonna do that but you get the point then you press publish again and now we have created just like that a new page and as i exit the visual builder now i will see that this repair page automatically will be added to our menu watch the magic happen press exit visual builder now as you can see our repair page has been added right here i don't like it because i want the contact page to always be on the far right option so we go to my dashboard i go to appearance i go to my menus and i just get the repair and just put it up right there and press save menu again all right now i want to show you one more thing let's go to all pages and now we go to our home page press edit with divi because on our home page we had some buttons that are about to buy and the repair and of course about your rent but let's go to buy any repair they buy any repair right there so what do you want to do i want people when you hover their mouse over the entire image i want them to be able to click it and go to the right page how do you do that well just go into the settings of this row right there and then you go to the column you want to change so this column the first one is the buy one so we're going to add this we're going to change the label to buy we're going to change the link also to slash by slash in the same window that's it press save and you can see this column is called the by column that's second column i'm gonna change this the admin label should be repaired and the link should be repair right that and press save buy and repair and it ran well we didn't create the page but now you know how you can do it press save press save this page and then we're going to exit official builder and see how it works exit visual builder all right if i now scroll down and i hover my mouse over this image you can see my mouse my my pointer is changing to this hand and i can actually click this and go to the page isn't it great let's test it out to go to repair right there here we are so it really works pretty easy but you just have to know how alright so there is only one more page i want to show you how we can build it and that is the blog post page if you want to have a blog or a new section on your website for example this website we're going to create a news page then hold on because we're going to create that right now so the news page is actually very easy just go and create a new page i'm going to add a title called news we press use dv builder press it again and then we're going to clone our existing page and let's clone our latest by page then we're going to change this image to a new image you can upload it it's called news it has this awesome adventure feeling to it so we're going to save it and then we scroll down and we don't need all this are we going to delete this entire section we're also going to delete this section and we're going to add a new one regular with a new row like this all right add it in and the module we're going to be using is the block module just press it and in the block module you can see all post types now we haven't create any blocks so the only thing you'll be seeing is this hello world by well your name should be here on the date you started and then you can change here the post counts so i want to have uh nine blocks right here and then they have to go to the next page i want to include all categories you can change this to any category you want to your blog post section the date format you can change it and let's go to the elements if you are the only author on your website just disable this option show author press no it's a little bit strange that if they see your name with every blog post so just disable this one show date that's fine the category if you use multiple categories keep this enabled and if you want comments then it would be nice if people can see their comments your cursor above this title you can press the brush icon i'm gonna change the title to the golden one we're going to center it and we're going to change the title text size to 36 pixels well let's align it to the left side because i like that more because we are going to change this entire thing to a grid module if you just scroll down you go to layout here we can choose full white or grid i like the grid mode more on this website this is the way it looks right now we're going to change this one to of course our global color dark gray and the text and the excerpt on the dark gray we're gonna change that one to 18 pixels and then we just scroll down we go to box shadow we're going to enable the shadow right here so now we have boxes with shadows on our blog post press save changes and we're gonna publish this page and now you'll see how it looks when you have different os if you now press exit visual builder again the news will be added to your menu but i want the contact on the right side so we're going to change that now if you go to posts or posts you can see that we have two posts let's style them a bit so you know what to accept press edit you don't need the dv editor within your post and i'm gonna show you why this is take your mountain biking to the next level and here is a bunch of text and then we're gonna press update this blog post now the one thing you want to do is you go to your post and you want to have a featured image with your posts so let's say let's say we're going to use this mountain biking very happy family we press update now if we now go to our pages we go to news you'll see that there is a post which says take your mountain biking to the next level i'm just gonna add a new one tip tips for cleaning your bike sure why not enter a image well let's get this one use default editor and we're gonna add another ipsum beautiful with these tips you can clean your bike in less than 10 minutes and we press publish publish again all right we go back to our news page we're going to refresh this one and you can see that now we have multiple blog posts in there and if i add more well you can see exactly how it goes however if i click one this is what you're going to see what where has my layout gone so this is the layout of the blog post well i'm going to teach you how you can change this because this doesn't look nice go to dashboard we go to divi we go to the theme builder and here we're going to add a new template press the new template we're going to use this on all posts click it and press create template all right it has used the global folder in our global header so we press save changes we're going to add a custom body press this one and we're going to build a custom body press it we're going to build from scratch press this one we've got to add a new row a normal row and the first one will be our post title press this one we're gonna save it and then we're gonna add a new module which is called our post content press this one and then we're going to save this and if you now close this one and we press save changes and now look at your blog post and we're going to refresh this page this is what happens things actually change when you add change your custom body you get the idea so of all the blog posts this if i go to this one you also see these similarities it is exactly the same as the other one so this system actually enables you to create any layout you want within the divi theme and all the posts will change in one go it is very useful so press edit again we're going to style this a little bit so you get a feeling of how you're going to do it first we're going to start with the dynamic post title we go into the elements and i actually don't want the featured image right there so i'm just going to delete it i don't want to have an author because i am the only author on this website but i do want to see all these things press this brush icon and we're going to change it to our global color and we're going to make the text size 36 and then we're going to change this one we're going to make it dark gray right there and then we're going to post content headings i want the headings to be also golden and let's make them 30 pixels that is awesome and you can change this for anything inside of your post so let's make the links we're gonna make them gold the heading number two is also golden number three of course also golden and this thing the block quote i also want the text color of the block quote border i want it also to be golden and actually i want the content to be dark gray right there that's way better and the images well they look great like this and you can also change heading four heading five heading six everything you want all right let's save this so save this and save this one save this page if you want to have a sidebar you have to change something else just go down a bit we're going to add a new row like well let's say this one and let's close it and then i want this entire module to be here no i wanted to eat there there you go and you can you can put anything into your sidebar if whatever you want so let's you can add some text with something like links and you can just style this one to golden color thank you 36 pixels make it asphalt and we're going to line it up on the right side all right if i want to border on my sidebar i just go to the settings of my row i go to first column go to design i go to border and i'm going to create a right border let's make it for pixels and let's make it our golden color well for us a bit extreme let's make it two pixels that's great and then we're going to save it save changes and then we're gonna save this page and now when you go to your news page and you refresh it you will see that you will have a sidebar right there and of course you can style the border to make it more to the right and you can change anything and also you can add your featured image anywhere you want on your page so yeah this is actually pretty easy how to create your news page one thing i noticed was scrolling my website i want to press the logo to go to my home but i can't how do we going to fix that well quick thing go to your divi go to your theme builder and on your theme builder you go to your global header in your global header you will go to your menu press this one and you go to your link the logo link url should be a slash press save also on this one we go to link logo link url should be a slash and press save changes also save this one and now you can press your logo to go back to your home as you can see this now works perfectly so one thing i want to show you that i promised in the introduction is how can you change all these colors in one click on your entire website it's pretty easy let's go to this module right here go to design we go to border because we have changed the bottom border with this color right click on this color right here now you can change the color the way you want it so for example let's go with orange and let's make it a bright orange like that and now when i press save changes it will says this are you sure you have made changes to this global color this will affect all instances of this global color across your entire site do you wish to proceed and then you press yes and watch what happens when i save this one now when i scroll down you will see that all the accents we have been using with the golden color are now orange as you can see the borders the names everything is now orange when i save this page and when i now go exit my visual builder you will also see that the header and the footer are also instantly updated as you can see right there the icons and in the footer these are all the golden colors that we've used they are now updated to orange and not only that one but all the pages we have created are now the orange color isn't that awesome i think this is one of the best features in divi and this is just such a powerful feature we can use so now you know how to do it there's one more thing i want to show you if you want to release your website without coming soon page let's go to your dashboard go through appearance and theme editor go to functions.php and what you can just do you can just select this entire redirect thing and press delete and now when we have updated it your website will be open for everyone to see also to google now just two more things i would i always like to add to my website are the login logo and a duplicate page function when you look into the file uh that you download there you will see two extra snippets and just paste in this code right there as you can see change login logo in url here you can change your logo so you go to media library then you just select your logo or the one we're using copy url to clipboard then we paste in right here the url of the logo and we press update file now what has happened right now i will show you when you try to log in to your wordpress website you will now not see the wordpress logo here but your own logo and when you click on this one you will go to your own website instead of the website of wordpress.org just a small thing i like to add because when i log into my website i would like to see my own professional logo instead of wordpress one more thing that i also add to my functions.php is a snippet which you can find also in that file and it is the snippet of duplicating your pages and posts you just scroll all the way down press a couple of times enter and just enter the code snippet you find in the file press update file and what does this do thing actually do well i have shown you if you go to pages and you want to clone a page you have to add a new one and then you have to import it but there's a faster way but now when you hover over your page you will see a new button which says duplicate and when i press it this page will be duplicated instantly but this will save you a lot of clicks because when i press duplicate this is what happens i am immediately in a new duplicated page and i can change my title to a new page and then i can just publish it or edit it with divi builder i can change everything he wants if you're going to duplicate a lot of pages this is really useful alright guys that's it i really hope you enjoyed this video with and that you have learned a lot of new things in this tutorial if you did hit that like button so i know we were on the right track if you have any questions about the website we've created put them in the comments and i will be glad to answer all of them now it's time to finish your website create more pages be sure to follow my seo tutorial because you need to install a seo plugin and a security plugin to really make sure your website is unhackable and it will be found awesome in the search engines alright i'll see you in the next video and have a awesome day [Music] you

Channel: WPress Doctor

Views: 2,040

Keywords: wordpress doctor, wordpress, wordpress toturial, toturial, how to, websites, wordpress expert, create a website, create a professional website, professional website, divi theme, professional wordpress website, step by step, create a complete website

Id: nH-zE9P59hw

Length: 181min 45sec (10905 seconds)

Published: Tue Aug 31 2021