How To Make A WordPress Website 2021✅ Step By Step For Beginners

welcome back party people my name is daryl wilson and today i'll be showing you how to make a modern and professional website using wordpress and brizzy wordpress controls more than one third of the internet it is the most popular cms out there because it's super easy to use so by the end of this video you'll be a wordpress expert and you'll even be able to start your own web design business yep that's right and trust me wordpress is great to have on your resume because today most businesses use wordpress because it's popular it's easy to use and it even powers more than half a billion websites and don't panic we will be using a simple drag-and-drop builder that allows you to customize every part of the website with no restrictions so go get a drink beer wine whatever you drink pull up a chair and let me show you the website that you're gonna make today in this video so today i'll be showing you step by step on how to build and customize your own personal wordpress website that will look really modern and super professional and the great part about this video is that you don't need to know any sort of code or have any experience because everything is done with a drag and drop builder that makes it super easy to build your wordpress website you'll have access to over 500 beautifully designed blocks that include the images and the colors you can simply click on a block and insert it onto your website then you can make any changes you want to your website like changing the color changing the font adding your own images and that's it you're all set you can add as many blocks as you want to your website customize them and within a few minutes you will have a complete wordpress website that you can fully customize and looks great with this drag and drop builder you can simply drag in elements and build your website from the front end so you can visibly build your website from the ground up plus with over 500 blocks to choose from that come in a light scheme and a dark scheme it'll be really easy for you to get ideas and inspiration to build your wordpress websites also in this tutorial you'll have access to hundreds of templates to choose from you can simply import a templates make any changes you want to your website then save the changes and your website is live on the internet it's that easy you will also get this template for free in this video just for following along today in this wordpress tutorial you want to see something cool these websites are from my viewers who had no experience watching one of my videos and then created their own websites so if they can do it you can do it i have time stamped in the description of this video so feel free to jump to any section at any time you can control the speed of this video by clicking on the icon at the bottom right so if i'm going too fast or too slow you can always adjust the speed as needed okay so this is the website i'll be showing you how to make today so we have this beautiful headline in the front that just says like you know something about your business at the top we have this menu and when i hover over it you can see how it hovers over red then if you have a logo for your business you can go ahead and incorporate your logo on your website at the top right we have this really creative get started button and when i hover over it you see how it turns red so i'll show you all how to create a landing page that looks really nice and really professional scrolling down here we have our next section notice how this just looks really elegant it looks really modern so we have some text about our company we have some more text and then we have this about right here like in the back just to give it some you know design and decor to our website so scrolling down here we have some images so i'll be showing you how you can add some images to your website so we have our offices and then i just added some images just to give the website some style scrolling down here we just have some more you know just some more graphics you know like things they can click on maybe you want to talk about your features of your business such as you know graphic design copywriting or whatever is that you do so i'll show you how to add this section to your website and then scroll down right here we have some testimonials so if you have customers or someone that wants to give you a referral or a testimonial you can go ahead and add it to your websites and then below that we just have some other icons letting people know who we worked with and then we finished it off with a really clean footer at here at the bottom so i'll show you all how to make this home page it's really easy i have all the images for you all so making it will be really simple so let's go ahead and check out the about us page so this is our about us page we have some other texts and we just have some general design in the back you know just to give it some design and decor to our websites we have these icons and this can be something like you know your clients you work with your projects or your number of staff and then scrolling down here we have this split screen section so i'll show you how to create this really nice split screen section where we have this image to the left and then we also have this our text and we have this button right here it's really creative it's really nice i like the style of this it looks good and then we have our staff so people that you work with so right here i just put some you know just some demo names you know and you can add in your team right here and then scrolling down we want to finish it off with some more testimonials so you can add some testimonials about your business and then we added some little icons here of people who we work with and then we also finish it off with our footer again at the bottom so that is our about us page let's take a quick look at the services page okay so this is our services page now we want to go ahead and tell people what we do so what are our services what are we known for so here i just put digital design graphic design and of course you can put your own business like whatever it is that you do and then i'll scroll down here you'll notice on the left side how we have the services and it's a really modern trend to have vertical text on your website so it kind of follows your visitors it's really creative and it just looks really good and then on the bottom here we have some more texts letting people know about our business and we also have this little like a help so if they need help they can just go ahead and contact you guys and we added some more of this design in the back and then scrolling down we have some partners and clients so you can see that uh it's testimonials of people who we work with and also you know just companies that you might be associated with and all that stuff and then again we finish it off with a footer at the bottom so looking good right so let's go ahead now and check out the last page which is the contact us page so this is the contact us page and what we did was we just provided some information about our company now if you want to also incorporate a map i'll show you how to incorporate a map onto your wordpress website and then on the bottom here we have this contact form so people can go ahead and put in their their name their email and their phone and a message and this will go directly to your email inbox from your wordpress websites and then also we just go ahead and finish off the website with our footer again at the bottom of the website so after watching this video today you'll have enough knowledge and experience to even start your own web design business tomorrow so if you're a guy you can open up your own web business tomorrow you can go impress ladies saying hey i know how to build websites and if you're a girl you can go to your boyfriend and tell him that you know how to build websites and i bet you he will be very impressed so with all that said let's go ahead and get started today with this wordpress tutorial okay so we're gonna build your new wordpress website in four simple steps step one we will get your domain and hosting so this is where your website lives and breathe so for example my new amazingwordpresswebsite.com step two we'll create some pages i'll show you how to make a menu we'll download the page builder and then we'll start designing your website with brizzy step three i'll introduce you all to premium features that come with the page builder that will really push the design limits for your new wordpress website and step four you'll be on your way and you will have a fully completed wordpress website by the end of this video now there is a link in the description of this video it'll take you to a page to purchase discounted web hosting and this is name hero.com now namehero.com performed as one of the fastest web hosting companies and also one of the most reliable now how do i know that well i actually tested name hero against 22 other web hosting companies for 90 days a name here performed as one of the fastest and one of the most reliable web hosting companies out there so you can be searching that your website will be fast and it'll be very reliable so through my link exclusively you guys will get 70 off all of your plans if you go to the website normally you're gonna pay a little bit more because the discounts only 52 percent so uh through my link you guys do get a special discount and the company gave me this discounts just for my viewers so we have four different packages and personally i recommend the plus cloud i think that's suitable for people getting started out with their website you also do get a lot of space a lot of bandwidth and you do get a free ssl with your package so you'll scroll down and you'll see order now so you can select any package that you want but if you guys get longer than one year you do save a little bit more money so one year is 449 a month two years is 419 and three years is 389. so go ahead and select the year i'll just put one year just for this tutorial now go ahead and register a new domain name so this is going to be your new web address so for example mynewamazingwebsite.com i'll just do tutorialdomain.com so you can do something like you know my drone ecommerce website or whatever you want to do and once you make your decision you will click on the continue button next we will scroll down and they do have some add-ons that we can add to our plan personally i don't really think you need these but it's up to you if you want to grab them but i'm not going to because this is just for tutorial purposes so i will click on continue now this is something i do recommend so we have three different options and i highly recommend the id protection the id protection will protect your personal information from spammers and people who are trying to get your personal info so that is pretty important so select the id protection and then click on continue so look at that for the entire year of hosting you're only going to pay 70 for the entire year which is it's a very good deal i got to be honest so once you uh go through and you review your checkouts you will click on checkout so this is the checkout page so you'll go ahead and put in your personal information your billing address and also your support pin you will need that in case there is a problem so for example if you get a technical problem they might require that you have a pin to verify that it's actually you you'll make your password and i'm sure you guys have seen this page before right on various other websites you can even pay with bitcoin how cool is that i thought that was dead apparently not so you'll go ahead and select your method of payments and you can click on i have read to the terms of service and payment policy and you can read through those i'm sure you all will and once you're done with that you'll click on complete order and i'll meet you all on the very next page okay so once you make the order you will get an order confirmation you can also give them a review saying hey this was a very easy experience or whatever you want to do once you do that you'll click on continue to client area [Music] next it'll bring you to your client area so it'll show you your domain it'll show you your web hosting packages now this company has great support so if you have a problem with something you can just go to their tickets you can submit a tickets also you can click right here on get in touch with a superhero and you can go ahead and ask them anything that you need so i just had an issue one time with my domain and they got it fixed in like literally like 20 seconds so it's an amazing company and their support is really really good so now that we have the domain and we have our web hosting package let's now install wordpress onto our domain so you'll click on the client area and then you'll click on cloud web hosting next we have our products and services so we have the plus cloud package with the domain so right here where it says active go ahead and click on that click on active next on the left side you'll see login to cpanel okay and this is where we're going to install wordpress i'm sure you've all heard of wordpress before in fact if you are young and you are in college wordpress is great to have on your resume because a lot of businesses today use wordpress you know i don't even think universities even teach wordpress in schools which is pretty sad i mean my college experience i felt was wasted because i just learned a bunch of like just stuff i didn't need like corporate theory of marketing and just i don't know i feel like it's all outdated anyways uh once you scroll down you'll see software and you'll see wordpress manager by softaculous click on wordpress manager by softaculous next on the right side you will see install now so click on install now and we have the version of wordpress so make sure that's default we have the current domain which you set up now right here it says in directory make sure nothing is there okay i don't know why there's something there by default but make sure nothing is there also on this left side you'll see http make sure you select https uh we are going to select and set up our ssl on our domain to make sure that it is secure so uh right here we have site settings you can give your site a name and don't worry you can change all this later so you can just put something like ecommerce websites my new websites and here we have the account the admin account so make sure you write all this information down you will need this when you log into wordpress every time you want to log in and make changes to your ecommerce website so i'll put admin and uh we'll do paddywhack and on your admin email make sure you have an email that you have access to because what's going to happen is if you forget your password it's going to send your password to this specific email that you put on file next you can select a language so if you speak arabic or albanian or bulgarian you can select any of these languages i select english of course so i'm going to leave it as english and you'll keep scrolling down and we're going to ignore all these ugly templates actually they're not that bad but we'll make our site look a lot better so once you have select everything and you select your password and email you will click on install so now it's installing wordpress onto our domain and just like that wordpress has been installed onto our domain so right here it says administrative url you can click on this link and ta-da we are now in wordpress and this is your new wordpress website so getting your website set up with wordpress is really fast and easy so uh on the top left you see my website and you can click on visit websites and this is now your new current wordpress website so it is live on the internet and we also have that green padlock and that was included in the web hosting package because we got a free ssl so that is pretty cool now before we go ahead and start building the website we need to make some small changes so congratulations you now have a website live on the internet it's pretty simple stuff so in this next section we will mess around with the general settings we will also download the page builder which we use to design the website and i'll also touch base on what wordpress themes are let's go back to the video okay so first let's go ahead and change some general settings so on the left side you'll see users and you'll see profile go ahead and click on that now in the future whenever you want to change your interface like for example we can change this to modern or uh midnight or ocean you're gonna do all this from the profile section so i think i'll do modern i think modern looks pretty cool and if we scroll down this is where you're going to change your email so in the future if you ever want to change your email you're going to put your email here and you will need this so let's say for you forgot your password or something like that that's a pretty important uh you know email to puts also if you want to change your password or add a profile picture you can go ahead and do that here so for example if you want to generate a new password you can do that and then put in your new password and then you'll just uh yeah put in whatever password you want obviously so you probably use the same password for like all the websites right i think everyone does that so once you are done you'll click on update profile all right cool next you'll go ahead and go to settings and go to permalinks now under permalink settings you want to change this to post name and the reason why we do this is because you want to see your domain at yourwebsite.com about us right or slash contact us not 202 all this junk so with this permalink it actually looks a lot cleaner and it's actually better for seo so go ahead and change it to post name and then go to save changes and that's it so here i'll click on dashboard so now that we've adjusted some of the basic general settings in wordpress now let's go ahead and download the page builder so there is a link in the description of this video to purchase the brizy pro page builder you can also get there by going to darylwilson.com brizzy so this is the page builder that we're going to use for this video now brizzy does have a free version but for this specific tutorial we're going to be using the pro version because with the pro version we'll have access to a lot of different features like more elements the theme builder and a lot of other stuff that we're going to talk about in this video so we have three plans we have the personal we have the studio and we have the lifetime now i don't know how long they're going to have the lifetime for i'm not sure about that but i think you'll be fine with just the studio package because with the studio package you'll pay a hundred dollars for the entire year and you get unlimited websites and you also get support and updates so i would say the best value here is definitely the studio because with the personal plan you can only have the page builder on three websites so that's kind of limited there now i already have this page builder so i actually have the lifetime so i just went ahead and bought the lifetime but once you're here you'll go down and you'll click on buy now now this is the only thing that you'll have to purchase in this whole entire video so everything else is just going to be a bunch of free plug-ins and a bunch of free stuff and you know it's all going to be danny from there so once you actually purchase the actual page builder i'll go ahead and meet you in your account page so i'll go ahead and log into my current accounts and look at that we have to do this little test here we're gonna i'm gonna do this with you guys here motorcycles is that good okay good my first try how about that so this is the actual brizzy pro plugin and you'll just go ahead and download it so you'll just click on download brizzy pro and then we will click on ok and save it all right and also this is where you can get support your account all your you know all your stuff that you want that you uh you know you guys know so yeah this is your options menu and stuff also when you want to register your page builder you'll click on wordpress licenses and you'll go ahead and click on generate a new license key and then you will go ahead and copy and paste this but we'll we'll do that in the next step so first things first let's go ahead and upload the actual page builder to our website so this is a plugin so under the left side you'll see plugins and go to add new now what plugins are essentially is plugins are basically applications for your website so on your iphone you have or for those people who use android you know actually i don't know i might change i was you know i should have put android down but uh yeah so these are just applications so essentially everything does something different you know so for example i'll just go to popular here uh contact form seven this is a contact form this is an seo plugin this is a classic editor woocommerce allows you to sell on your website so there's a bunch of different plugins for you know there's 51 000 plugins out there so there is a plug-in for virtually everything and we'll touch base more on plug-ins a little bit later in this video so don't worry i'll show you the good ones i'll show you the really really good ones so on the top left you'll see upload plug-in and then you'll click on browse and you'll go ahead and find the zip file that you downloaded from the brizzy so here is the brizzy pro and then i will click on open and i will click on install now so just give it like two seconds and there you go so the plugin installed successfully now on the left side you'll see activate plug-in all right cool so we have now activated the brizzy pro plug-in now this gives us again the ability for us to decorate and change our website now there is another thing that we need to add on our website which is the theme so under appearance you'll see themes so these are the like the ugly default ones so just go ahead and click on add new and here i'll just click on popular so what themes are essentially is the is the outside of your website so you see here how like it looks different on the outside uh every theme has different theme styles and theme options like one might make your blog look different one might have different options for your menu however a lot of these themes today are becoming less relevant because the page builder does all the work so the page builder can do all of the stuff within the actual theme so what i want to do is i want to install a theme that's designed specifically for brizzy which is called guten x now you can change themes at your own discretion so don't think that once you go with one theme you can't change no you can use astra after astra if you don't like it you can go to oceanwp if you don't like it you can go to neve all of these themes are designed specifically for page builders but i'm going to go ahead and type in gutenex i like goognex it's a free one and i just feel like this is one of the best themes for brizzy so here i'll click on details and preview and it gives you a demonstration of what it looks by default but this is actually not true it's weird but uh you can click on install so click on install and then you'll click on activate all right cool so now we install the guten x theme onto our website and if you want to see how your website looks like you can go to my website and click on visit sites and now you'll see how it's started to slowly change a little bit so we have this menu and we also have this drop shadow we have the hello world and then we also have posts and all this other stuff and a footer at the bottom all right we're cruising pretty simple so in this next section i'm gonna show you all how to add pages and also how to make menus for your website let's go back to the video so now that we've done that so next let's go ahead and make some pages and make a menu so for example we need to make our home page right and the about us page and the contact page so so what you can do at the top you'll see plus new you can click on page or you can do it through your dashboard so you can go to your dashboard go to pages and go to add new it's the same thing it brings you to the same place that's just a shortcut the little plus new at the top is just a little shortcut you do get this little notification we can close this and under the title this is our oh go what is that here so here we have the home page and then we'll click on publish and publish all right now there's nothing on this page it's a blank page so we're just going to use the theme builder i'm sorry the brizzy builder to design everything so you guys are starting to get it now so we made the home page now let's make the about us page so plus new page and then we'll do the about us and on the right side you'll see publish and publish and then we'll do one more so again oh no that's the wrong one so go to view pages and then plus new and click on page so now we're making a third page so this will be contact us and then click on publish and publish all right so we made those pages right but since we made those pages we haven't really assigned it to our menu so here's our current pages so we have the home the about the contact and we have the sample page and this privacy policy page now these are created by default when you install the wordpress so let's just say you know what i don't want these pages so let's just delete them i'll go ahead and double click on the little check boxes under bulk actions i'll move to trash and apply so that's how you can kind of clean up everything and get rid of all of your pages so now that we've done that let's go ahead and add this as our menu so we don't have a menu so if i go back to my website here you'll see visit sites we don't have a menu anywhere so let's assign a menu so what i'll do is go to dashboard and under appearance you'll see menus right here so go ahead and click on menus so we have a menu name and this will just be the main menu for websites and this will be my main menu and i'll go ahead and create this menu right so we have a menu now what pages do you want to be on the menu so we have the home the about and the contact us that we created right so i'll click on those three and then i'll click on add to the menu alright so we need to arrange this you know i want the home page at the top and the contact at the bottom and then i'll click on save menu all right and then let's go back to our websites and click on visit site so now you'll see that we have a home page right we have the about us page and then we have the actual contact us page so it's pretty cool so the sites kind of come along here now there is one more thing that we want to change before we do all this which is assigning a home page so when someone comes to your website you see how it comes to our websites or they go to our websites and then they're brought to this page i want to assign the home page as the first page that people are brought to when they come to my website so it's really simple just go ahead and click on customize so this is the theme customizer but not to worry guys we're going to come back to the theme customizer a little bit later in this video and we'll talk about all these options but uh the only thing that you'll need to do here is under home page settings you'll click on that and a home page displays i want a static page and i want to select the home page as the home page all right and then click on publish and we are all done so when i click on x now the home page is our current home page so pretty cool all right so now that we have our pages i think we're ready to use the actual page builder so let's go back to our website under dashboard and under plugins we'll go to add new so we need to add the base version of the actual pro version of brizzy in order for the page builder to work don't worry about this notice we will go ahead and activate this plugin a little bit later in the video but under search plugins we will type in brizzy and here it is so brizzy page builder go ahead and click on install now and then click on activate all right cool so let's go ahead and enter in our license code in the brizzy tab just to make sure that our pro version is working correctly so under the brizzy option right here we'll go to settings and under the license tab we can click on license and this is the license key so what we're going to do is i'm going to go ahead and copy and paste this license key now remember when you want to see this key just click on full key and then you'll get a display of your entire license key you'll go ahead and copy that license key into your wordpress website alright awesome so now the brizzy pro version is working and everything's functional and ready to go so let's go ahead and design our home page so under the pages we'll click on pages and here's our pages and just go ahead and click on your home page and now you see we have this edit with brizzy right here so we can click on edit with brizzy okay so i think we are all ready to go so we have our website right we have pages we have our menus doing this next section i'm going to show you all how to design your website using the drag and drop page builder called brizzy so this will give it some color this will give it some text and the images and all that good stuff so with that said let's go back to the tutorial go ahead and click on edit with brizzy and now we're going to start designing our website with the page builder so exciting stuff all right so you party people ready to do this you're ready to build your website let's go so the first thing that we'll do before we start adding anything is i want to change the page template so on the bottom left you'll see this little piece of paper or whatever so you see this page template now a brizzy template means the page blur will do everything so that means i don't want the theme to be involved whatsoever however for this part of the video i want to use the theme just to give us some structure so here we have the full width page template which i like so what that's going to do is that it's going to have the the header at the top and also the footer at the bottom and then we can build the website within the actual theme so that looks pretty cool there are other ones like canvas canvas is basically brizzy templates and default is using the default theme settings so we will talk more about the theme settings when we talk about the theme customizer so i'll go ahead and leave it as full width for now all right and here it says start building your page so just click on the big plus very simple so you'll notice right away how we have these blocks so how the blocks work is essentially you can add these blocks to your website and you can modify them you can change them and you can make them look however you want now since we have the pro version we have different block kits so we have kit 1 and we also have kit 2. so here's just a list of all the blocks that you can use i mean there's tons of them and they come in a light scheme and also a dark scheme so if your website has a more of a darker approach or just a dim approach so the dark scheme again it just adds a little bit of dim approach to your websites like a darker uh feel to it and that's good for you know pretty much any kind of website just depends on how you design it and then again we have the kit 2 so kit 2 also has a light and a dark scheme also for each specific kit there are categories so let's say for example let's go to kit number two it is click on lights and we have this hero so what a hero is basically that's your landing page so a hero is basically um your landing page the same thing guys they just call it hero because they want to sound super smart and it's just i don't know i don't know why they did it so let's just say for example we scroll down and we see a bunch of these landing pages that we might like all you need to do is just go ahead and click on one and there you go so what it does is that it imports the images for you it imports the style design of everything so we have this actual um you know this block and uh we can go ahead and modify it so what i can do is just you know double click and type in whatever i want once right here now for every single element there's going to be different designs so here you have text right so what the text is going to do is that that's going to change the topography of the actual uh letters so we can change this to uh you know what is this right here oswald you know you guys get it you know so you can go through this and just you know just have fun and and type in anything and then enter and change this font to anything you want yeah pretty simple so also we have the color so if you want to change the color of the fonts you'll click on this obviously and then you can go ahead and change the color of the specific fonts to anything that you want we also have a shadow so what the shadow will do is that it'll add a drop shadow between any sort of text so you can kind of like customize this you can get a little crazy and you can kind of see how that works out for you so um you know shadows are unique but i would not get too close to them because once you implement a shadow you have to kind of carry that throughout your website and that can be kind of a you know kind of a hassle also we have the actual where you want it to be displayed so we have justified centered to the right or you know align now here we have these little buttons and what this is going to do is that it's going to change it to a numbered column this is to a dotted column and then this is just back to normal we can bold it we can italicize it we can also add a link so for example if i want to link this to a specific part of another websites i can link this to my website so if they click on this link they will go to my website now this option opened in a new tab so if they click on this then it'll open my browser in a new tab and then it'll bring me to where i'm supposed to go make it a no follow so if you don't want this to give link juice to another part of a video or i'm sorry websites you can just put nofollow for most of you i i don't really think it matters too much a lot of you guys are probably not big seo bloggers so it won't really matter too much and then also we have like file where you can upload a file here if they click on it and also pop-ups but we'll talk more about pop-ups a little bit later in this video now if you want to go ahead and clone this you can click on duplicates and it will clone everything and if you don't like what i just did you can go ahead and click on this undo option on the bottom right and that will undo basically anything that you did so if you made a really big mistake don't panic you can always undo whatever you did and then if i right click on it i can delete it also i can click on the trash can and that will go ahead and just delete everything like that now again maybe i didn't want to delete that so i can just undo that and you know no harm no foul so those are basically all the options for you know specific modules now there is another thing that we need to do before we you know talk about the next module is the gear icon so the gear icon it allows us to add margin and padding to pretty much any sort of element so for example let's just say you know what's i want some more space in between here we can add a gap below it like that something like that or here put it there and then gear icon gap below that you see that now under the more settings we can also apply padding and margin so let's say for example well first padding is basically just space so that's what padding means so let's say for example you want padding below it you see how we have this little blue highlighted part so that means i want more space on the bottom like that do you see that let's say i want more space on the top we can add more space on the top so if you want your words to be kind of scrunched you can just reduce the space margin we'll talk about margin a little bit later but margin is essentially where you want the module to start from so now that i did this we can you know modify these elements we can click on any elements and you can adjust it so for example we can adjust the color so one thing to note is that when you click on a module you'll see these options of background text border and shadow so the background is the actual background color of it right the text is the actual text color of the text in the module and then we have border so you can give this a specific color for a border see how now it's that specific color you can do that as well and then also we can give this a shadow so i can give it like a black shadow now you see how the button kind of has that pop-up feel and again if you want to you know change anything that you did you can just click on the undo and it'll undo it now you might notice how the button actually changes color when i hover over it you see that so if you want to adjust the hover settings on the left side you'll click on this and this this means hovered so let's say i wanted to turn purple when i hover over the specific button there we go that's pretty cool now you can also change this to a gradient so if you want to have like a gradient color like that you can just have a gradient and then you can go ahead and say i want this color and this color and you know see how that works out you know you guys can you guys get it right you guys can have fun also the linear and the radial so a radial means like a circular style gradient see how the color starts from the circle and then you can adjust this you know you can adjust the actual um you know the the degrees of it so that's the difference between linear and also radial so for example you'll see how it how it kind of changes there yeah so you guys get the point i don't want to waste too much time on this stuff here so now that we actually uh you know we know how to fix the elements within the block how do we actually change the elements outside of the block so you'll notice how we have these little blue highlighted space right here so i'll click on this and i'll drag this up the same thing on the bottom i can go ahead and click this and i want to drag it up so i want to reduce the space there so that's how you can actually add space within the top and the bottom now you might see this top right control so this is going to control the entire section now guys once you understand this one part you'll understand it for all of the elements because every element has the same exact options so this part might you know drag on for a little bit but once you become pro at this you become pro at the page builder so for example we have these options we have this block icon right here so here we have make it a slider so if i want to make this a slider where people can slide it like that we can have that option of making a slider if you want to take that off just take it off and there you go if you want to add it back you can do make a slider and let's say for example you want a different slide so you'll click on this black icon and then you can start customizing this second slide so you can have a different looking slide you know obviously this isn't going to be the same one so i can change the background for this and i can add it you know i can re-modify it you'll see how this is modified and then this looks different so yeah so if you want to you know have a second slider you can go ahead and do that however this other option right here so backgrounds and filters so if you want to have a specific image for your background this is where you're going to add it now in the description of this video i did give you guys demo images to use so uh let's just say for instance i want to go ahead and delete this image i don't want this image what i can do is upload my own images so i'll click on image upload files and select files so now i can go ahead and upload any images i want to my wordpress website so i'll just go ahead and upload these three images which is my logo we have some abstract backgrounds and we also have this red and black background so i'll go ahead and click on this image and click on select all right so now you'll see how the website has some design you know add some decor to it and i can kind of move this around a little bit so you know it just adds a little bit of design and decor instead of all that white space so that's what you can do if you want to add a specific background to your websites now there are some websites like freepik.com so for example there's freepik.com and there's also pixabay.com so these websites you can go ahead and download some free images so let's say you want to uh i don't know like night sky or something you want to have like a sky background um you can go ahead and download some of these images of night skies same thing with pixabay we can do like or you know gradient backgrounds something like that so really depends on what you want to download so you can go ahead and download some of these and apply it to be your background for your wordpress website now let's just say okay i don't want the image i want to change something so i can go ahead and delete that and now we actually have a video so if you want to add a video background you can go ahead and do that as well so what you can do is you can go to youtube and you can type in something like 4k skies or 4k you know 4k video animations and you'll get these videos where people just kind of you know they just film stuff and you know their 4k background so what i'll do is i'll go ahead and copy and paste this link and i'll go back to my websites and i will paste it in there like that and we can start this at a specific time we can also loop this so if you want to be continually looped you can do that as well and then maybe you want to change this text to white right so here i'll change this to white so it's a little bit more visible you know for the human eye and voila so now you have a beautiful landing page and it looks great you know we can you know adjust this and change it but yeah that's how you can add a video background to your website but uh personally guys i would not use video backgrounds too much because they don't play well with mobile devices so that's just my experience with video backgrounds so i will go ahead and delete that now the last option is a map so this is a map for a background so you can go ahead and put in your address and this can be a specific map for you know wherever you want and yeah so that's interesting but i'm not going to use that because i just don't want to use that and then for the color now you'll see how the color is actually kind of interfering so this is how we can add it's called an overlay so what i can do is i'll reduce the transparency of this and there you go so this right side is the transparency and yeah that basically adds a overlay so if you want like an overlay of a specific color you can go ahead and do it like that so it just adds a tint of color so going back to the actual the filters so with the filters again it just adds a different kind of color scheme in the background so you'll see here how any image with a specific color will be changed because we're adding a different kind of filter and there's a lot of different filters guys and uh the best way to learn how to use these filters is just to mess around with them they work better with like full images but that's just an example of filters they just kind of adjust the image to whatever liking that you have so okay so now that we know how to use the filter section also we have a little save where you can go ahead and save this to the brizy cloud we will mess around with this a little bit later in the video but basically you can go ahead and save your sections in the bridget cloud and you can use them to pretty much anywhere you want on your website so next again we have the gear icon and we can change the width of this so we can add this as a full or a box and we can even change the width of this like that and then we also have the duplicate option so we can duplicate this entire section again or we can go ahead and delete it by clicking on delete and that'll be the end of it so yeah that's just a quick rundown of how you can add specific elements to your website and adjust them so now let's go ahead and do that one more time so what i'll do is go to blocks and i'll add that block again that i just deleted by clicking on the block so now that we know how to modify the elements let's just say okay well how do i create this from scratch right so let's create this element from scratch not using the blocks let's just teach you how to use the actual page builder because the templates are very helpful but i also want to teach you how to actually use the actual block section so first let's click on add a new block and i want to create my own now looking at this specific column we can tell there's text text text and button right so on the top left you see this plus icon these are the current elements that we can use in order to build our website so we have the text we have you know all these little gadgets and widgets we also have row column we have social media we can put like facebook stuff and then we also have the default elements that come with wordpress so for the row i'll go ahead and take the row and drop it in there so now we have this two row right here so we have one row and we have two rows so what i can do is i can drop elements within that specific row so i'll take the text and i'll drop it in there and there it is so i'll do that again click on the plus i'll take the text now you'll notice how the gray bar displays so when the gray bar displays that's where it's telling us where we can drop the text so i'll drop the text in there like that and then i'll do it one more time so so we added the text in there right now let's add a button so go ahead and find the button here there it is button at the top and i'll take it and i'll drag it there now a very weird option that brizzy has i'm not really sure when you're going to use this option but if you click on edit at the top you can actually hide specific elements like let's just say for example you never use the map one or you never use the uh the audio widgets you can actually hide them from yourself click on done and then they're gone forever to get them back just click on edits and then add them back i don't know why they did that i i just don't know i mean that's just their thing so it's their page builder so yeah so now that we actually have this section we can turn it into this so it's pretty simple so for example innovative design all right and then this part binary watch face smart watch because why not okay i don't even know what that means so um daryl wilson watch binary watch why not something like that and then we have this section here so i'll just leave that as blank you know i think that's good enough now also we have this button so i want to move the button to the left side so i'm going to take this little button and then under this little section i'll adjust it to the left side so at this point we need we just need to adjust the text so that's the only thing that we need to do so for example i'll click on this text and we will make this bigger so under the text section under the size we can increase the size like that right and then we can change the line height so the line height is how much space is in between the lines right and also the letter spacing now the letter spacing is important it gives it that elegant feel and we're going to add letter spacing to the one above our current one and then we have weights so we can give it like a semi-bold or just a bold style now also we have fonts now i personally like the pop-ins fonts and i don't think they have pop-ins here by default so if there's a font that you want that they don't have you can click on add a new font and go to google fonts and then simply just type in the name of the font so i want pop-ins and click on pop-ins and click on continue and that's it it's done so the great part about brizzy is that it's integrated with google fonts and that's included in the pro version so pretty cool and then we have fonts right here so you can go ahead and just see what fonts you already have but i like pop-ins so whatever font you like you guys can go ahead and go crazy and use that but i'll go back to the text and now we have pop-ins so this is the font that i like i just feel like it's very friendly on the eye now for innovative design i want to actually add some letter spacing to this you know i wanted to give it that that elegant design you know that they have there and then for this section we just need to add one one more line and now we need to just add a background image so to do that we'll click on that little icon i guess you want to call it i don't know what should we call this for the video just i don't even know just the the the white dots the white dots all right that's what we're calling it and then we'll go to the image and then we have this image in our library and we'll select it and there you go now the only thing that we might need to do is we need to adjust the padding so i want to add more space so to do that we can go ahead and add some padding like that and also like this so now our page looks a lot better so now you can see why we use these things at the top so now we actually have our section and it looks great so we basically replicated this whole section just by messing around with it now the only thing that we probably need to do is we need to reduce the the line spacing here to bring them a little bit closer so to do that we have the line heights remember the line heights like let's see how let's see let's see how we get 1.5 there we go 1.5 so the line height just brings it a little closer so it's not so far so you can see here how it's a little bit closer so that's why we'd want to implement line height so that's just how you guys can replicate sections now also i get a big question how did i do this because if we actually try to incorporate another button it won't let us bring it into the actual column so to add a button in the same specific column which you might want to do is just right click and duplicate how easy is that so here i will delete this now um again if you want to link this to a different part of your website you'll click on the link and then this will be like you know contact us right or contact page or something you know this will go to your contact us page but not to worry we'll do that all a little bit later so that's how you can just use the actual page builder to design your website and there's a lot of different elements you know there's a rating elements and every specific element has a specific design feature so here you'll just go ahead and say you know do you like that style this style you can change the spacing and so on and so forth so now you can see how the options are pretty much the same for every single element so at that point you guys have some sort of understanding of how to use these elements and it's just trial and error guys i mean it's just really trying out the um you know the actual elements seeing what you can do so for example the lottie the lottie is a new feature which adds lottie animations to your website so we have the thought animation and there's actually a website where we can go to where we can get more different lottie animations so this is the website is called lottiefiles.com and if you want to add these animations to your website a lot of these people they just make animations and you can add them to your website now the big pro about doing this is that it doesn't load a lot of javascript onto your website javascript slows down your website so i know that's a little techie term but uh this stuff it's being rendered from their website so it does save you a lot of space on your server so what you'll do is just you'll go ahead and copy you know a url you'll go back to your website click on the little f icon and under the lottie link we'll just paste it in there and there you go so now we actually have this girl there instead maybe we can even get rid of this background because it's not really appropriate for uh you know for this girl so we can close that and then maybe we can even add in like some sort of gradient background or you can even add in the um the abstract designs i gave you so uh let's see there it goes yeah so something like that so and then we can change this button to here we go i'm gonna change this to block let me give you guys my skill here goes my skills and there we go so this now is a landing page i mean this can be a landing page for your website it looks great you know it has the red decor it has this girl and it makes sense so now you can see how fast it is to make a landing page but then again i'm a pro so i can make these things with my eyes closed so that's just an example of the elements and everything else that you can you know add to your website so just go ahead and take the time to mess around with each of these like the you know the tabs the countdown and everything this part of the video guys is really up to you you know but again i'm giving you all the tools to you know do it with so now that we know a little bit about elements and we know how to kind of modify everything we can go ahead and add more sections to the website so we click on add a block and um yeah so if you saved a block they'll be right here so you'll see i saved those blocks earlier they're there and uh the blocks that we have we can just go ahead and click on one here let's see features and put it there right features and then add a block and then we can have some fun here finally no more technical stuff here we go we can add in this and then we can change this to like you know our features or whatever change this to whites and then add a new block and then we need like some sort of call to action nearing the bottom so like this will be sign up for our weekly newsletter and then we can just go ahead and end the website and that'll be it or testimonials i think go to the bottom right so yeah something like you know airbnb now a quick tip of advice guys is when you're designing your website you want to go ahead and implement a background color for each specific section to sort of introduce the new section so for example um i'll go ahead and just add in a a very hint a very hints color of like you see how we added this little red bar so i'm kind of carrying this black and red design and when you introduce a new section on your website you typically want to have a different background image or you want to have a different color so that's just kind of how it works and you might want to do you know white backgrounds color image color so you want to make sure that we can distinct each each like uh you know part from each other so for example this part you can add in you know like you know you'd want to carry obviously the same color design and everything but this isn't design course this is just like a course you know how to use the builder but you get it so let's just say i'm a new guy to the website and i can navigate it saying okay i understand and then when i scroll down i kind of know the website's ending you know i kind of know already oh the website's going to end soon and then maybe at the the bottom we can add in a footer and then we'll just put in the footer and then that'll be like the bottom of the websites and then we can give this again like a great color scheme just a little tint you know just to give it some you know just to give it some decor so we know it's ending so that's just a quick rundown guys on the actual design aspect of websites so if you guys check out my other videos i do have a lot of other videos talking about design so but yeah that's just a good crash course on how to use this page builder so i'll go ahead and delete all these you know i don't want to use any of these anymore i'm tired you know i'm fed up i'm fed up with all these these designs and i'm going to get rid of all these blocks here we go now when you purchase brizzy pro you also get templates so if you click on the plus icon you'll see layouts so let's just say for example you don't want to use their blocks but they're blocks to be honest guys are amazing so remember you have kit 1 and kit 2 and you can go ahead and you know go get a beer go get some wine and mess around these blocks all day long you'll have a lot of fun trust me they're they're amazing blocks but you'll click on the layouts tab and brizzy also has custom layouts for you for your specific website so for example since we purchased the pro version we have access to all of the layouts so if you didn't purchase br the brizzy pro you will not have access to any of these so that's a good reason to get it you know now they do have one page websites so they tell you right here it says one page or one layouts so if you're just looking for like a one page layout maybe you're like you're a crypto gambler or you are a copywriter which i you know i run into a lot of copywriters this would be a good page so you just click on the page and import this layouts all right cool so now you'll see that the page has uploaded and it looks great so you can go ahead and design this and modify it to any which way you want now since you actually purchased the pro version we get a new element that we can use and this is the actual global styles so if you click on this little paint icon you'll see styling so here we have a current style so let's just say for example you guys suck at designing you know i suck too you know we all we all suck at designing we all started somewhere what you can do is click on one of these current styles and it'll change the entire website with a specific font and color to help represent what you are trying to build so for example i'll click on the paint brush and so this is the magazine style but we also have graceful so this is the graceful style and you'll see how it's changed the background it changed the font it changed the colors throughout your entire website so it's almost like the closest thing to ui is possible with like web design you know it just it just kind of i'm sorry ai is possible right so uh here we have the current style and let's just do one more supreme huh i actually think this works better you know so you'll see how everything's changed you know so you can go ahead and adjust the actual style to any which way you want or use the brizzy default but uh yeah it was ugly but i'll exquisite i want that one wait no no that wouldn't work no that didn't work here we go we'll do uh droid that's weird i don't like that one i think i like the uh i like the magazine one the best i don't know what you guys think let me know let me know in the comments which one you guys like the best i think magazine works pretty well uh because blue equals copywriting you know to me and this might be a girl writing it or you know boy but a girl you can have a pink color you guys get the point right so so yeah now that we have that um so we added that section now let's say for example we want to reorder our website so we have this reorder blocks so what this is going to do is that we can just drag and drop something to reorder it so instead of actually having to manually change everything we can do it right here so it's like you know what i want my home page to be uh this section right and then i want this to be down here and so on and so forth so this is really helpful to customize your website it makes the process a lot faster than you know let me go ahead and drag it down you know fall asleep you know so yeah so i want this up here and uh you know i'll put that i'll put this one down there and uh yeah i think that's uh or this one up here and that's good so yeah that's how you can basically reorder blocks on your current wordpress website to speed up the design process okay so next let me just quickly go over the actual fonts so if you click on this paint brush right here you'll see this you know these h1 tags h2 tag so what this means is having presets for your font so for example we have this brand identity here right so i want this to be something like heading three okay so heading three now if we go back to our little paint brush we'll go to heading three so now you can have basically any text under heading three and you can set presets for that specific uh you know text so for example we'll do overpass or we'll do something that's recognizable here we'll do a blinker someone what's that oh here we go this one's this is an ugly one right here but this is like a girl brand or i don't even know what kind of font that is it's weird so uh you know i'll change this to you know uh 32 and we'll make this uh we'll just leave it as normal so basically now we have this heading three so if i change this to heading three it's going to change that to this so if i click on the text and select heading 3 you'll see how it changes it so what those are essentially is their presets so instead of having to design everything all over again for each specific section which you can do is just saying i want all my heading text to have that design so here i'll just change this to h3 and there you go and you can do this for pretty much any text okay so now let's talk about the header and the footers so you'll notice how we have this header at the top of the website we've had it this whole time and we also have this header through the page builder so you'll have the option to either have a custom header that you can build with the page builder in design or we can use the current theme so that's just the difference so remember this is being made with the page builder and this is being made with the actual theme so let's just say i want to disable the theme heading and i want to only have the page builder heading so first let's click on update just to make sure my progress is saved and on the bottom right we'll go back to that little page and under page templates i'll change this to brizzy templates so what this is going to do is that it's going to disable the theme so now you'll see how we have this header and this is just made with the brizzy page builder so we have this little menu right here but this is actually just not real so this is just text and uh you know this is not a real header so what we can do is go back to the plus icon and we'll type in menu and i'll go ahead and drag this and put it in there and i'll delete this all right so we don't need this section here i'll just go ahead and right click delete deletes and there you go and then we can go ahead and adjust this uh menu however you want so you can change the topography of this so we can do you know i don't know there we go that style or this style now we also have some other options like an icon you can add a specific icon to this so if you want to have a little icon you know to your menu you can do it like that or you know whatever you want to do and you can adjust the size of this so that's pretty cool you know i do like that how you can add icons everywhere also here we have the manga menu now we'll be talking more about the mega menu when we talk about the advanced features however the mega menu in a crash course gives you the ability to have a big mega menu so you can have like a image here and a bunch of cool stuff so we'll talk more about the mega menu a little bit later now let's just say you want to adjust this menu so we have this little gray icon here you can go ahead and adjust this however you want so we can make this a hamburger menu to look like that we can make the size bigger if you want to adjust this to a different position we can align it to the right or to the left under the settings icon you can go ahead and adjust this just the way like we did with any other elements so if i click on update but if i click on the about us it'll take us through the about us page the contact us page and then the home page so you'll notice how on these pages we still actually have the theme because we haven't disabled the theme remember so you'll need to go to each page and design it so that's just how you can use the actual um the header and the footer to be used on the specific page instead of the theme we can go ahead and add a footer to this website as well so here i'll just click on edit page page with brizzy and this will turn on the builder for us so i can go ahead and scroll down to the bottom and add a new block and we can go ahead and add in a footer to the website so what i'll do is just i don't even know what footer should we add here let's try this one i'll go ahead and delete this because i just don't think that works out for us select a menu from the elements options so what i'll do is i'll click on this icon click on this little tab and under menu i want to have the menu that we created so now it's linking all the pages so the home the about and the contacts and we can change the orientation we can change this and you can customize this any which way you want you know i probably should have another course on how to do design for this builder because it's so dynamic you can do a lot with this builder so once that's done i'll click on updates and now you have a page that we've basically already created and everything's ready to go now if you are a freelancer congratulations you just have a front page website and everything's ready to go so tell you what let's go ahead and go back to the about us page so i'll click on this and click on go to dashboard we'll go back and click on the little w icon hopefully later they add a easier way to navigate everything also make sure to give these guys a five star review so you can go ahead and say i deserve it or you deserve it and then you can give them a five star review saying this page builder is amazing so anyways you'll go to the about us right and click on view click on edit page so this is how you can design every specific page so what i'll do is i'll go to edit with brizzy and then we can do the same thing guys so now we'll just do the same exact thing we did before so i'll just go to start building your page and then so on and so forth so we can just you know build a new page from scratch and uh you know everything is all good to go so now you know how to design the website you know how to add headers now let's talk about some quick shortcuts that you can do to make the design process a little easier so we have this about us page right but we don't really have a menu and a footer and i don't really feel like designing everything all over again because that's just going to take a long time so what i'll do is click on update for now so this is our about us page what i'm going to do is i'll go back to our home page so i went back to my home page and now i edited brizzy so i want to take this menu and i want to apply it to other parts of the websites so i'll click on the little dots right here the white dots right that's what we're calling it and then we'll click on the gear icon and i want to make this global so what that means is i want this to basically being applied on the website so now that we have it on a global we can select a display condition and i want to display this on all of the pages so what that means is i want this header to be applied to all of the pages so let's do that and we should do the same thing for the footer right so this will actually save a lot of time so let's just make sure that's saved okay i'll close it and then we'll go to the bottom of the website on the home page and do the same thing so we have the actual footer make it global and under the display the conditions this play conditions will do all as well and then i'll click on save so now that we've done that i'll click on updates so what i just did is i'm now saying i want this to be on every single page by default instead of having to recreate everything all over again so let's go ahead and test it out to see if that's worked so here we have our home page right and i'll go ahead now and click on the about us page so now you'll see that we have the header and we also have the footer being applied to every single page so look at that that is awesome so now we have the menu on the about us page by default and also we have the footer on the about us page by default so it will be applied to all of your pages however if we click on the contact us section you will still notice that it is not there and that's because we have not edited the page yet with brizzy so if you have global conditions you need to make sure that you have edited the page with brizzy because then it's kind of conflicting at that point so just go ahead and click on edit with brizzy for the contact us page and now you'll see since we edit it with brizzy now it's recognizing it and it's applying the header and the footer by default so that just saves us a lot of work guys you know makes it everything a lot easier so under a new block what i'll do is i'll click on contacts and just put in a contact form and i will take this see if we can here we go take this and put it in the middle like that there we go here we go oh oh oh okay we got it we got it to work so look at that we just made a contact page in a matter of seconds so let's go ahead now and connect our email so people can send us emails directly from our website so you'll go ahead and click on the button and you'll click on this little plug icon now there's also applications that you can integrate this with so there's mailchimp there's convertkits there's all sorts of integrations now if you are in email marketing i do have a full video on mailchimp and that goes from beginners to pros and i'll leave that in the description below but uh just go ahead and click on email and you'll use wordpress so we want wordpress to go ahead and send the actual email so what i'm gonna do is put in my current email here now for subject what do you want this to say once it hits your email so i'm gonna say uh from a demo website and then what i'll do is i'll just go to continue and we're all done so i'll click on done and i'll click on update so now let's go ahead and test the contact form to see if it's working paddywhack aol.com and i'll just select something here and then hey thank you for the video and then this is actually built with the contact form so you can build the contact form any which way you want so you'll see here how it just offers something that the template came with and then i'll click on submit so you'll see your email was sent successfully so let's go ahead and check the email to see if the message was reached to my inbox and here it is so now you'll see we have the message we have the email address the name the email the project and the message so that's how you can connect your email with your wordpress website okay so now that you guys have a full understanding of the website let's go ahead and modify templates so now you have some skill and you have some sort of knowledge of the page builder so what we're going to do is go to dashboard and now you see this install guten x wizard now we'll go ahead and click on this so we'll click on install go to next wizard and this is the plugin so it is the guten x wizard and i will click on install so to get that notification all you'll need to do is you'll need to go ahead and activate the theme on your website so go to next wizard i will click on continue alright return to dashboard so there's different themes and all these different themes they have templates that work for the brizzy page builder which is pretty cool so i want to use the guten x free version so now it's asking us if we want to install a child theme and we're not going to install child theme so we're just going to go ahead and click on that and click on continue so now what it's going to do is that it's going to offer us templates that we can use on our website so we have gutenberg we have another page builder called elementor and then we also have the brizzy builder now what we're going to do is that we're going to install a free template on the website and then we're just going to tweak it a little bit and that's a modification so this is the one that i used and you guys can see it looks a little similar however i did make some modifications to it so let's click on install so the plug-in installation you'll see how it says required plug-ins and recommended plug-ins but we don't need to have the recommended plug-ins but if you want to have another contact form on your website you can do that all right so essentially what we're doing right now guys is we are just overriding our website and using templates from the theme so let's go ahead and click on continue here and it's asking us do you want to replace or do you want to add this to your current existing content so i'm going to go ahead and replace this so replace and now they're saying look this is a very serious thing you need to enter in your password just so we know that it's going to remove all the content on your website and replace it with ours so i'll go ahead and click on validates and now it's importing our template for us okay so our sample data was imported next i'll go ahead and click on continue next it's regenerating our thumbnails so it's basically making sure our images are optimized for the placeholders and just like that the installation is complete so let's click on view your websites and there you go now this is your new wordpress website so this is the actual website and you can tell it looks very similar to the demo website however i did make some modifications and i added some style elements and i'll go ahead and talk about that in this section of the video so this part of the video is practice i just want you guys to understand how to modify pretty much any temple that you might come across using the brizzy builder so first off we don't need this background so remember how to change the background we'll go ahead and say all right the backgrounds i want to take this off and i want to add in my background so right away you'll notice that we have all these demo images from the template so the template actually gives us a lot of the demo images however it got rid of mine so what i'm going to do is i'll click on upload files and i'll re-upload those again so here i'll go ahead and re-upload those and click on open and i'll also go ahead and upload my logo so the logo is available in the folder that i gave you guys so you guys can use this logo we will use this a little bit later but uh no close that so for the image i will use this one and click on select so we have this uh background here so what i'll do now is i'll change this to black so now we can actually see what we're working with so also on the top we have this little uh text here so we'll change this also to black however i want to add a button you know i feel like we need to add something here to kind of encourage people to click on our website or navigate through our website so what i'll do is i'll just add a button like that and i can go ahead and take this button and i'll align it there and change this to something like black now also do you guys remember how to create two buttons if you don't i hope you do you just go ahead right click and click on duplicate and now i'll change this to something like red so my whole design aspect here is i'm just trying to incorporate this black red and white color scheme kind of like my website so i just want to introduce you all to how to you know design everything and quickly change it so we'll change this menu later don't worry when we talk about the theme customizer it's really tacky and ugly but don't worry we will change the actual menu color so now that we have that section what we'll do is we'll go ahead and say you know what's i don't like this yellow section so what we can do is i'll go ahead and take this out we're incorporating this other style so i'll go ahead and close this and i'll upload another image now i did add more images inside of my folder so under the image folder you will see this image and you will also see this image so this image is the same it's just a little dim than the then the landing page because we don't really want to carry that bright color everywhere on the website we can have like a dim color but this is the actual image that you'll need right here so i'll click on select all right so now we have this image here and i think that image looks pretty good however it's too bright and it's taking away too much context away from our text so what i'll do is i'll just add an overlay so i'll just go ahead and select a white overlay here and i'll just kind of fade it out you see i'm kind of fading it out so i want to make sure it's still there but i just want to go ahead and fade it out a little bit so we have this also this text and we're using a white and black and red color scheme so we'll need to change this now we can change this to black and also we can leave this as black but i want to change this divider right here to a red so you'll notice we have this text here as well so this text is blocking this now i'm going to give you guys a little quick shortcut on how to do this and we will also talk about what i'm going to do in the next section but you'll go ahead and click on this about and click on the gear icon click on more settings and under position you will click absolutes don't panic all right it's just moved it around for us that's all so now we can actually adjust this little bar right here so i want this to be a red bar like that now i'll go ahead and click on this text again and i'll click on the gear icon and i'll go to more settings and i'll change this position to none so essentially what that is is that you can actually drag this anywhere you want we will implement this on the next page so don't panic and i want to give this about just a slight little color so people can faintly see it you know something like that so now you'll see how it's adding style and decor to our website all right cool so i think the section looks pretty good so let's go ahead and scroll down to this section now this section i just don't want it i these colors just they don't go well with the website so let's just delete it so to delete a section i'll click on that and click on delete so we deleted that section however i want to add something in between because this just doesn't look good we have too much going on right here so what i'll do is i'll incorporate images in between this to kind of break up all of this color and stuff that's too close to each other so i'll click on this plus icon and under kit 1 i'll go ahead and insert a block so the block that i use it just adds a little bit of design emphasis and kind of takes away from all of this scrunch section is down here i think i passed it did i pass it let's see here i'll keep scrolling there it is so it's this section right here so it says our office and then there's three little images so what i'll do is i'll just go ahead and insert that and there you go now i might want to change this because remember we're using a black red and white color scheme so to adjust the background i'll just click on this and i'll change this to something like black actually let's see here there we go and then this section we'll need to change this to something like a white so for this section for the text only i'll change it to white so now you'll see how it has that you know it's following a specific design so i do like that i think it looks good and solid now these images you can always swap them so you can just go ahead and put any demo images that you want so what we did here or what the designers did is they actually set the image as the actual background and they did not use an image module they did that because it forces the image to display all the way so if i click on this gear icon here and i click on the actual uh background you'll see how they just added a background image to the background so they didn't actually use an image module so that's just a way on how you can kind of manipulate it now remember guys there is no right or wrong way to build the website however you can get it to work that's that's what wins okay so it's all about winning so if you can make it look however you want that's all that matters so you'll see how we just have you know image image and image and then in my demo video i just added a lottie file here so i just added a plus and i added a lottie file so i'll find the lottie and then i'll just insert the lottie and yeah you know i just did it just to add some design to the core to the website but yeah i'll just you know i'll delete it it was just for show you know i'm all talk now one thing to note guys is that if your pro version deactivated when i imported this template for some strange reason my pro license key deactivated so if that happens to you and you lose the pro elements just go back to your settings under license and reactivate your license i'm not really sure why but my license deactivated when i imported a template so pretty strange so next we'll go ahead and scroll down and we'll fix this section so we want to carry a black red and white right but this is too much there's too much going on here we can't use this so what i'll do is i'll go ahead and go to the background i'll delete that and under the image i added another image here so i added this one however it's a lot lighter and it just it's not too much red and black so i'll go ahead and insert that and now you'll see how it incorporates this little design right here so it just adds a little bit of design not too much so now you'll see that these are actually invisible and we can't see it so that's kind of frustrating so what we'll need to do is just go ahead and double click on the elements and then change it to black and then also for this one i'll change this to red and then for this one right here i'll change this to black as well just to give it some feel sometimes you have to work in the dark you know it's just uh it's just how it goes so here we go we have and then we have there we go now now we can see it so for this button i just want the text to be black i don't want the actual background so for the background we'll leave it as transparent but for the text i'll change it to black so again guys sometimes you'll have to work in the dark so if that happens to you you know i do apologize but that's just how it is sometimes uh so what we'll do here is um i want to go ahead and add in another section but i don't want to do it again like this you know i want to kind of mix it up so just like my demo website you guys saw i added a background so what i'll do is for this section i'll just add in a black background like that oh there we go a black background there we go so black make sure that this is a black and even under the hover keep it as black so something like that so remember when you're editing these columns you need to make sure that the hover is also black so here i'll just change that up to 100 there you go so now it doesn't disappear and we hover over it and then this i'll change it to red right now we are we do have a column there we do have an element there so we need to actually change this to black there we go okay cool and then we'll just go ahead and mimic that so the same thing here so this looks a lot better so now you'll see how this design comes into play and this last section this is actually an image now what we can do is we can just use a filter to change the color so i don't want i don't have this image but i want it to kind of match the website so what i'll do is i'll just add in a filter here to kind of change it to this red or we can even change it to a black you know we can we can just find out which filter makes it black here we go we'll just here we go let's see will this make it black so guys i am not a filter expert as you can tell so i'm just going to you know you get it we can we can change this to there we go that's the closest we'll get so that's as close as we're going to get so that's good and then for the art director i'll change this to black so now you guys are getting it right now you understand how this works and this contact us section i don't need it so what i'll do is i'll just go ahead and say you know what i don't want this contact us section so that's pretty much it so now we have this bottom section now we can add a footer again if you want to do that um we can just go ahead and go to the bottom and add a footer however i'm not going to do that because i've already shown you guys how to add a custom footer to your website so we will be using the theme customizer in just a little bit but look at that we made a professional beautiful homepage and it looks great so congratulations this is your new homepage all right party people so that is pretty much it for the web design process of this video so what i'm going to do is i'm going to leave this domain in the description of this video and you guys all have homework so i want you guys to kind of look at what i've done with the website and understand you know how i change the colors and how i did everything now there is one little uh you know obstacle you guys might have is under the services page you can see i had this really unique style so i added the services and it kind of goes all the way down and then we have this help section so what i did here is i just added the absolute positioning and i just made the column really small so it forces the text to kind of go down like that and just gives it that really elegant professional look so yeah you guys can go ahead and take a look at this domain it's in the description of this video so you can always reference back to it so that's pretty much it for the web design process now let's go ahead and move on to the next section of this tutorial alright so now you know how to design the website using the drag and drop builder you know there's so many ways on how you can approach it you can use the blocks you can modify the templates you can mix and match you can do anything that you can possibly think of so now that you know how to design the website with the drag and drop page builder let's talk about the theme customizer so the theme customizer controls the outside of the website that the page builder normally does not so it controls like parts of your blog it controls the header and the footer and it just adds like general options so let's just go ahead and touch base on the theme customizer alright welcome to the theme customizer section so in this part of the video i'll be talking about wordpress themes the customizer settings for wordpress themes and i'll also touch base on what plugins are so to access your theme customizer of whatever theme that you're using on the top of your bar you'll see this customize button so go ahead and click on that and then you'll get these little uh you know you'll get all this stuff on the left side now notice at the top here how my bar has already changed and this is all done with the theme customizer so remember the theme customizer controls parts of the website that the page builder does not so one little quick shortcut if you guys see these little pencils on your bars or on your footer or your header if you click on that it'll just take you to that specific section to decorate it so here you'll see i can you know change the background color to you know something else like uh like that and there you go but that's just you know that's just a you know if you see those pencils that's what they're referring to but anyways so let's just go back so first we have some options so we have site identity so this is the site title of your name so i'll put darryl wilson and then brizzy tutorial now this will only display uh depending if you want it so we can have this being displayed or we can just have the logo only so see here how it says bridges tutorial however if you don't want it to display in just your logo you can just go ahead and uncheck that and you are all good to go now we also have font family so uh every theme has different fonts so uh you know let's see if they have poppins here do they have poppins i'm there we go they got poppins awesome so poppins will be the default fonts for your menu so over here you'll see that these are the current fonts so just because we're using the specific menu that's why we can't see it but we'll change that a little bit but at this point you guys can go through this and mess around with the fonts and the font size the line height so these options are very similar to the page builder except it's just decorating the header so uh we have site identity and then let's go to general settings so general settings this is like the page layout so by default the page is full width however if you want it like box with no sidebar you can do that as well uh full width left sidebar now some of these settings might conflict with one another because we set the page templates for brizzy to be full width so if you want to go ahead and enable these settings then you'll need to go to the page and then enable the default theme settings you understand so remember the page setting that we set earlier is a brizzy template and if you want to use the theme customizer instead then you'll have to enable the default theme template for the page settings so you can see how the theme customizer and the page builder they kind of like go at it you know they kind of like push and tug at each other so you just have to figure out which one you want and what's good for your website so next we have the page title and we disable the page title by default when we enable the brizzy templates however if you show the page title then you'll need to go into the page setting and then you'll have to enable the theme settings so remember these options will only be applied if you enabled the actual theme settings so and then they have like mobile browsers where someone comes to your website on mobile how will this look so this will have a black bar and a preloader so this theme offers a preloader and that's essentially just like a little preloader like that and it's just with your logo so you can have it as default or you can enable it so it's just up to you but i'm going to disable that that's pretty much for slow websites for people who just you know who have slow websites so uh here's our header so this is actually important so the header and the footers are probably the most useful part of the theme customizer so this is a show top panel oh that's cool so now you have this top panel you can also set like a social menu like your social links and stuff like that then you can put something here and show menu what's that okay oh we got another menu up there so uh yeah i don't really know every single theme and every single theme option i don't think anyone in the world does and if they do they're probably a bunch of losers who sit at home all day but you just have to go and fiddle with these options and see what the theme offers i chose this specific theme because it has templates and it has a really cool uh layout for the menu so this is the actual menu the header bar so the layout we have layout one now you'll see how we have the um you know we have the font over there we have style two style three there we go and then style four it looks looks looks similar you know they look similar but it's probably just positioned differently so style five it's in the middle let's check it let's give her that ugly background dear god there there we go you know and then for the link color we probably would want to change this you know so maybe uh you know change this to like a white oops whoops and also the link cover that means when i hover over it it should turn white now if these changes don't apply when you're messing around with the theme customizer you'll probably have to publish this and then close it and then view it sometimes when you're making changes through the theme customizer sometimes it doesn't apply all the time then we have vertical padding huh so vertical padding again you'd probably want to save this and then go ahead and check out the theme customizer but i think we can see the the space there being yeah being applied there so yeah let's go put that back and then we also have uh show social links so you can show social links up there and so on and so forth so um yeah at this point guys you just go through all these options and seeing what works out for you the logo and favicon yeah so for the logo and favicon this is where you'd want to go ahead and upload your logo now you guys can use my logo temporarily just you know just to just have like a place filler but you'll see also that we have this section and this is actually the favicon so when you visit the website you see the top left here how we have this actual logo so you would put your logo there and that would display when people visit your website so that is pretty cool so that is basically a quick rundown of the actual like the header and some of the actual theme customizer options also we have home page settings and once we have a blog this is where you're going to go ahead and put your blog page so you would assign the post page as your blog page and then whenever you make your post they will be displayed right here so i'm just going to click on publish there and just save that for now so let's talk about plugins and then we'll also touch base on themes and i'll give you guys a little bonus for watching this video in just a bit also make sure to give brizzy a five-star review i think this page builder uh it's a great page builder you know they added a lot stuff like in the past year so yeah be sure to give them a five star positive review so we'll go to plugins and go to add new so i'll click on popular so plugins are basically again applications for your website and plugins i recommend is like yoast yoast is an amazing plugin so what yoast does is that it'll actually display your your website in the search engine the way you want it to look for example i'll just go to google right here and i'll type in best protein breast breast protein powders something like that so you'll see we have a list of all this stuff so you see how we have the text and then we have this actual description so that's what the yoast plugin does it displays the website the way you want it to look so if you want your website to have a you know a nice presence in the search engine you'll go ahead and install this plugin and then you can actually mess around with it and you know i have a full tutorial on it i'll leave that in the description below also woocommerce so this turns your website into an ecommerce website and it's a hundred percent free it's an amazing plug-in and then we also have like really simple ssl this is basically when your ssl does not appear it will force it to display because sometimes weird things happen and it just doesn't work and then we have word word fence security firewall and malware scan so this is just a security plug-in i don't like it actually i think it slowed down the website and that's just my preference i just don't like it i'd rather use a curry and that's what i'm using on my website so again these are just basically plugins that will help you with your website plugins are good however do not have too many so the limit i would say is do not have more than 10 plugins on your website if you have more than 10 plugins on your website the website will be slow so i would just kind of try to avoid having a lot of plugins and that's just my you know that's just my opinion so now that i've introduced you all to plugins and you have a general understanding of what plugins are let's talk about different themes so if you're watching this video and you don't like the guten x theme no problem you're like you know what daryl i don't like good next i just feel like it's not for me you can switch your themes back and forth and you will not lose your your page so let's just go ahead and say all right let's just go to popular and we'll install the astra theme the astra theme is also a very popular wordpress theme and i actually uh i have a full video on astra and i even have a discount code and i'll leave that code in the description if you guys want to but uh yeah so what i'll do is go ahead and visit the site now and you'll notice how the site looks a little distorted and this is going to happen guys with every theme and the reason why it looks like that is because we haven't set the actual page template for the builder so it's simple just like we did before i'll click on edit page and every theme again has different theme options so here we have the sidebar so i don't want a sidebar and i want this full width and i don't want a title and that's it and i'll click on updates and now let's click on view the page and there you go so now we have the same website everything is 100 intact everything's the same except now we have the customize option and now this theme offers different options for our theme so that's pretty cool so they have a bunch of like uh you know they have a transparent a transparent header so they have a bunch of really cool options and yeah so now that you understand a little bit about the wordpress themes there are specific themes that will give you templates for brizzy so i'll go ahead and go to the appearance and theme section and just kind of show you which ones do so i'll go ahead and also put these in the description of this video in case you want free templates so astra does offer free templates for brizzy also nev or neve neve also offers free templates for brizzy and there's another theme called zakra and here i'll just type them in for you zakra so this theme also offers free templates for brizzy and there is also i think it's suki yes suki this theme also offers free templates for brizzy so what i'll do is just click on the astra options and give you an example so this is the astro theme now what i'll do is i will install the importer plugin and now it's asking me to select the page builder now every theme that has a starter templates they will have a plugin that allows you to have more templates uh specifically for brizzy so i'll click on brizzy here and these are the lists of the themes that are i'm sorry the templates that we can use for astra so there is quite a lot of different templates that we can use for brizzy and if you want to see the free ones just click on free and these are all the free templates that we can use so every theme has starter templates and they can really help you out especially if you're just getting started out with wordpress now if you want to see the paid ones you can click on agency and these are a list of the premium ones so the images are a little bit more in detail and it just looks a little bit nicer so if you guys want to have access to this pro version i'll leave a coupon code i believe the code daryl 10 will give you like 10 off the astra pro so you can have access to all of the starter templates so again when you are using wordpress feel free to go to different themes and as long as you're using brizzy you can switch between themes and you will not have a problem with losing your content so what i'll do is i'll just go ahead and activate goog next again and then i'll go ahead and click on visit sites and there you go we're right back to where we started so that's just a way on how you can kind of see we have to probably mess around with the theme options sometimes when you switch between themes there might be some small themed customizer differences but uh yeah in a nutshell that's themes that is the theme customizer and also that's plugins so feel free to go ahead and check out the other themes maybe you might want to see what's better off for you and your website and also i'll go ahead and put all of those themes that offer free templates for brizzy in the description below of this video so that's it for the actual theme customizer settings and this all sectioned with themes and plugins uh i hope i was very clear and transparent if you guys have any questions for me put them in the comments below and with that said let's go on to the next section guys alright so now that you're becoming a professional let's go ahead and talk about the advanced features so brizzy by default looks simple but it does offer some very unique and dynamic features that we didn't really talk about in the tutorial so let's go ahead and go through each of them and i'll cover each one step by step to make sure that you get everything out of this page builder because you did buy the pro version so i just want to make sure that you actually get everything out of this page boiler so with that said let's go back to the video right party people welcome to the features section so in this part of the video i'll be talking about all the features that comes with brizzy now there's quite a few options that brizzy has to offer that you probably can't find on your own so i'll be covering all of those features in this part of the video number one is white labeling now for those of you who don't know what white labeling is it's generally a term used in the web design industry and it kind of basically hides what you're using from your clients so for example we have this brizzy section and the reason why you want to hide this is because maybe people don't know about brizzy and maybe your clients are oh what's brizzy let's go ahead and google brizzy and then you know they start you know doing research on it maybe they start watching videos and then you just lost your client now they want to learn how to use it on their own the whole purpose of this is to hide what you're doing and just say you know what's um i'm just using a builder they don't have to know which one right so let's go ahead and incorporate white labeling onto your website so to enable white labeling on your website all you need to do is you'll need to log into your website and then once you do that you'll go ahead and type in let's see dash question mark brizzy enable whitelist equals true you'll type that in i'll move my mouse and then you'll press enter once you do that you'll go back to your dashboard it might kick you out or put you somewhere else under brizzy you will then see white label options so go ahead and click on white label all right so company name you know so maybe you don't want people to know that you're using brizzy you know so you can put your company name so let's just say my company's name is patty you know patty so i'll just go ahead and put patty here oh no no no whoa whoa whoa whoa whoa there there we go patty so for the company logo what you'll need to do is you'll need to access your media so what i'll do is go to this other dashboard and i'll go to media and then so you're gonna find your logo and let's just say you have a logo here now your logo must be 20 by 20 pixels so it has to be pretty small so what i'll do is i'll edit this image and i'll try to make this 20 let's see this if we do 19 by 20. there we go so i'll go ahead and scale this and that's my new logo so what i'll do is i'll say okay this is the logo this is what i want i'll go ahead and close this and i'll go back and what i'll do is i'll take this file uh file url and copy it i'll go back over here and i'll paste this in there so i'll paste it in there like that and i'll change it once i change it i'll click on save changes also you want to do the same thing here but just have it 40 by 40 and then change your support url to your website and also your about url to whatever website you want and click on save changes now you'll see on the left side how we have patty here and it has the little my logo so the reason why we do this is again we just want to kind of hide the builder we just want them to not really know what we're using so that's white labeling in a nutshell so yeah it's just helpful it just makes sure that your clients don't get nosy and start looking at what you're building and start saying i don't like that and you know they get really annoying so that's how you would enable white labeling on your website the next thing we'll do is we'll go ahead and enable pop-ups on your websites so let's go to we've got the patty builder now so patty and we'll go to pop-ups so let's go ahead and add in a new pop-up so essentially what a pop-up is is just enabling some sort of pop-up on your website so i'll just do home page popup and i'll click on publish then i will edit with patty so see how it's saying patty now that's pretty cool right it doesn't have to give all the information out to everybody so let's go ahead and click on the um you know add a pop-up and uh you know they have a lot of pop-ups by default for us so that's pretty cool uh what i'll do is just say uh you know i don't know here we got this one right here we'll just this is a pop-up builder and now you can just build the the pop-up just like you do with the normal page builder so you can just go ahead and access the elements and then you can build this according to what you want to do so i will click on update now on the builder on the top left we have this little pop icon so scroll page behind we have display conditions so this is probably where you want to display it now you can also have these trigger when someone clicks on a specific button as well so for example we have on page load we have like uh you know three seconds when the page loads and i only want to trigger this pop-up only once so i'll go ahead and enable that and click on save and that's it we're done so now what i'm saying is when i visit the website this should load three seconds after they visit and there's other uh you know there's other conditions so you can go ahead and mess around with these like after an activity so if they're not doing anything and so on and so forth so i will go ahead and click on update so there is our um there's our pop-up right so three seconds and it popped up uh no thank you i don't want to do that but let's click on edit page with paddy i like that i like the paddy builder that's a good one you know i should make my own builder i should uh you know stop promoting companies and make my own builder so uh here we have the button you know and what i'll do is i'll click on this link so now you'll see we have pop-up so now i'll click on this little um this little icon right here and now you'll see these beautiful list of pop-ups that we can use so i'll just say i want to have maybe you know maybe you have a click here to get 25 or click here to watch the youtube video or so on and so forth so i'll click on updates all right so now when i click on this button here what it's going to do is that it's going to bring up that pop-up so click on button and there you go now we have this youtube video of this guy you know he's recording in like look at this he's recording in like 10 fps like how laggy he is so but yeah that's just an example of how you can have pop-ups on your website and also how you can have click pop-ups anywhere you want on your wordpress website so let's move on to the mega menu builder so first i'll go ahead and i'll just go ahead and say edit this page with patty i'll close these other browsers i don't think i need them at this point so what i'll do first is i'll go ahead and add in the header so simple add in a header and we'll just grab in let's see uh i don't know we'll just grab in this one here just something simple and the next thing i'll do is i'll take that and i'll put it to the top okay so now i'll select the menu from the element options so go ahead and select the menu oh wrong one let's close that okay yeah sometimes you got to work our way around that stuff guys so yeah so here is my main menu right so now that we have this what i can do is you know what's i want to make this a mega menu so what i'll do is i'll just go ahead and click on the page and i'll click on the menu menu and now you'll see the mega menu option be displayed and i'll just click on it so now what you can do is we can actually have a specific mega menu for this specific menu so just like we built the other pages we can go ahead and design the mega menu so what i'll do is i'll first add in a row right and i think that's good so we'll add in an image here and then we'll add in a text and then i'll throw in a button under this text like that right and then i can align this so this is a really cool feature i really really like this option so now we can kind of you know we can customize stuff and we can make it look cool see that works and then i'll change this to something like white and then i will see we can duplicate this and there you go so now we have this really cool unique style mega menu so when they click on it it brings down this drop down menu and then they can click on this and then again you can link this to somewhere else on your website like my website www.darrellwilson.com give me some free traffic guys and open this in a new tab and then i'll click on update so let's test the mega menu so what i'll do is i'll go ahead and just hover over this and now you'll see how we have this really cool mega menu being displayed under the menu so that's a really cool option if you guys want to have that you can have a mega menu for your websites all right party people this is a very easy part of the tutorial but it's also very important so we're going to talk all about mobile optimization and we're going to run your website through the mobile friendly test by google to make sure that it is mobile responsive and mobile friendly now my audio in this part of the video might not be the best guys because i'm actually recording this right now from my hotel room i'm actually in quarantine for two weeks in bangkok because i recently came to thailand and this is my hotel and i'm i'm actually way up there i'm actually in this room right here but this is the hotel i'm at it's really nice it's really cool but i have to stay here for two weeks because that's the part of the rules of going to thailand right now you have to be quarantined for two weeks so yeah yeah that's my hotel pretty cool yeah they got a nice big pool but uh you can't swim in it so yep that's that so let's talk about mobile optimization now on the bottom left of your screen you'll see this computer icon so you can click on mobile view and you'll see three options you'll see desktop tablet and mobile so first i'll go ahead and click on tablet so now when you are looking at your website from a tablet point of view you can edit it and design it just like you normally would on the desktop version however everything here will be only applied to people visiting your website on a tablet device so let's say for instance you're like you know what's i want this to be a little bit more centered for my tablet users you know i just want to you know change the style of this a little bit you can go ahead and design this accordingly to make sure that's you know it looks good for people coming to your website on a tablet so let's just say i want to go ahead and click on these and say you know what's put those in the center and i think that looks a little bit more cleaner and nicer for tablet users and we can kind of scrunch it up and just make it look a lot nicer so i think this approach looks really really nice and then again you can change the text size of anything so you can go ahead and click on the text and say you know what guys i think for this section we're going to make the text look a little smaller you know 13 pixels also this section we can go ahead and adjust it there as well so um yeah you can go ahead and go to your website and adjust it now for mobile users and mobile responsiveness you'll just have to use common sense there's really no way to explain it you just have to kind of look at the website and say does this look correct and after you're done editing your website you can run it through the mobile friendly test by google to determine if your website is mobile responsive so let's just say for instance when you're editing on you know specific devices you're going to come across elements that just don't look good or don't need to be added on tablet users or for you know people visiting your website on mobile or tablet like these two images like what's the what's the purpose of these two images i can't even tell what they are so let's just get rid of them so to get rid of a specific image only for a specific device you'll go ahead and just click on the icon and click on the eye icon and that's it it's gone so you'll go ahead and click on that and you'll see now it disappeared so this is now the new way um tablet users will see your websites now let's just say okay you forgot what you deleted it's like oh what did i get rid of you can click on this eye icon at the bottom right and it'll actually show you where these are at so you'll see how these are blurred out my internet connection is a little slow guys so but you'll see anything that's um invisible will be displayed here now remember these are not deleted they are just invisible for tablet users so i'll go ahead and click on the icon and there we go so you'll just you know go ahead and take a look and does this look good i think this looks good for tablet users so after you're done you click on updates and now you have just made the changes for your tablet users so a more important one probably is mobile devices so you want to make sure your website is mobile responsive and google will actually rank your website better if it's more mobile responsive so let's click on mobile so there are a few things i would change with this you know for example i don't know if we need this this little like sign in and get started thing right here maybe we can even take this off so i'll just say you know what's put that invisible and maybe for this whole menu right here we can center it you know i just want to center it because i think it's just it looks better you know centered so we can do that for all of them like that so that makes a little bit more sense and then just like we did before we can make this text smaller or bigger maybe you don't even need to have all this text so you know what let's just make that invisible because i think this looks a little bit more cleaner and we can keep scrolling right away i can tell we don't need these images right here i mean they're just unnecessary images so we'll go ahead and hide these for mobile users and then we will you know center align all this stuff because this stuff it just needs to be center line because you know it just doesn't look uh you know it doesn't look good when it's like all like scrums to the left so again remember for mobile responsiveness you'll just have to use general common sense you know does this look good you know do you think this is uh suitable for mobile users and if it's not just go ahead and change it by just clicking on you know whatever icon it is to adjust it you know vice versa now also on the right side you'll see padding and you can also adjust the margin and everything so let's say for example like we have this icon here i'll change this really quick let's just say right here we have all this space and we want to adjust the padding you can go ahead and adjust the padding for specific devices so if you want to add padding or margin or an interest animation or anything right here you can go ahead and adjust this as needed for any specific device so i think that's pretty much it for our page right here so now that we've actually you know optimized it what we can do is maybe i'll drag that up a little bit there we go it looks a lot better like that yeah there we go there we go so now that i've done that i will go ahead and click on updates okay so now that we've optimized our website for mobile users let's go ahead and run it through google's mobile friendly tester to see how it works out so i'll go ahead and enter my domain and i'll press on enter and here we go so our page is mobile friendly and you'll see how it looks like from google's perspective so the website looks really nice and everything looks really clean so that's pretty much it for the mobile responsiveness sections also for those of you who are using presets such as the h2 h3h4 and everything else what you can do is you can click on a specific heading and you can pre-optimize specific headings for specific devices so let's say you have heading one and heading one you want it to look like a specific way for you know tablet users and then for mobile you can change the heading one for whatever it is that you set for heading one so if you do use presets just know that you can go ahead and add in your tablets and also your mobile presets for whatever heading that you're using so guys that's pretty much it for the mobile responses section let's go ahead and move on to the next section so next we're going to talk about the theme builder the theme builder is probably the number one most popular advanced feature out there so it allows you to kind of override the theme settings so if you don't want to use your theme settings you can actually use the page builder to override those settings and act as the header and footer or other various parts of the website so let's go ahead and jump into the theme builder so let's say for example you go to your website right and uh we type in dash uh this right here and we're brought to this page so uh basically i want brizzy to design this page i don't want the theme to design this page because by default now we have the theme actually uh building this page so what we'll do is we'll use the theme builder so let's go to our dashboard we'll go to paddy and we'll click on the templates tab so the templates tab is essentially where you can have your theme builder so that's basically where other parts of your website that normally aren't accessible with the builder how you can now access them with the builder so for example i'll click on add new and this will be the 404 page 404 page and then we have the conditions so we have the 404 page in fact you'll have all your pages so if you click on archives you'll see all the pages that are available on your website so i'll click on single and i will have this on the 404 page and that's it i'll click on add and then i will click on publish i also probably want to put templates and click under actually no we'll leave it under default template that's fine so now that we've done that i'll click on edit with paddy and then i will build the page so i'll go ahead and just grab something really quick i'll just uh i'm looking for like a one button uh little template that just you know it's just one little button because it'll just redirect them so i'll click on this guy here so i'll just be like lost and then i'll change this to whites you know and i will make this a lot bigger you know just to kind of really you know emphasize like oh hey were you where are you going you know just just to help them you know just let them know that this page does not exist i will delete all this stuff on the bottom and this will be something like uh i don't know go back to home you know home page so this will be like you know go back to home and under this little link here i'll just put my home address so demo tutorial domain.com and that's it so you can of course design this and everything but i'm just going to update this and this is now my new 404 page so now when someone enters in a incorrect url they should be brought to this page so let's test it out okay so let's just say for example someone goes to your website and they're lost and they type in something it should take them to that 404 page that we created so pretty cool and then if i click on go to home page it'll take them to whatever page you want them to go to now in this specific case it's going to take them to my websites so that's just a way on how you can navigate them to go back to your website all right so next let me talk about the blog so let's incorporate a blog on our website using the brizzy page builder so first what i'll do is i'll create a page for the blog so i'll go to plus new and click on page you guys can tell i'm just messing around my you know my website while i'm editing i'm just like adding stuff and you know so anyways blog page and click on publish and publish now i have already pre-made some posts so if you need to make some posts you'll go to post and then under all posts you can click on add new and then you can go ahead and make your post so like uh amazing things for girls and then you can put some content here of course and then all as always you'd want to put your featured image here like uh you know whatever and then that would be the uh post but uh yeah i'm not gonna go into posts because that involves going into gutenberg and other stuff i'll probably have another video on all of the the different styles of bloggings and posts and stuff because um we can spend another two hours on blog posts and you know archive posts for uh categories and all sorts of stuff so anyways i made the page now since i made the page i want to assign it to the menu so under appearance i'll click on menus and we have the blog page and i'll add that to the menu so i'll just put it right there and click on save next i'll go ahead and visit the websites and just make sure that the page is on the menu alright cool so there's the blog page i'll click on blog and this is the current blog page so i'm going to edit this with brizzy so i'll click on edit page and i will edit this with brizzy and for page attributes i'll make sure that's full width and then i will edit with brizzy all right so now let's design the blog page so what i'll do is first i'll just add a new block and i want to add some style to the blog you know i want to give it some decor a little bit so what you can do is just kind of find a page or style that you think might fit your blog and of course don't worry as always we can edit everything so i'll just uh i'll grab this one here the next thing i'll do is click on the plus icon and i will scroll down to find posts so you'll see how this says wordpress and this says posts so what i'll do is i'll just drag and drop it right there and this other stuff here i don't really need this so i'll just go ahead and delete all this other junk just because i just wanted to use part of the templates but it's not all of it so i'm lazy guys remember i'm super lazy so i'll go ahead and delete all this stuff and then yeah so this will be basically the blog post now you can go ahead and design the content style so you can have a specific font a specific color so just like we did before you can go ahead and style everything now this is called dynamic content so what this is going to do is that it's going to automatically pull the images from your posts and also the post excerpt which is the uh content that was written in the blog and it'll display it right here now there are other elements that you can use to kind of add stuff like breadcrumbs or post info or post navigation and you can go ahead and just like drag and drop elements in there like for example so now it has like the previous and the next post so yeah you'd have to go through those and mess around with those and you know that could take some time obviously so but yeah so what i'll do now is click on update and i will preview our beautiful blog page so here are my current blog posts so the best things 10 tips for your website and things to add to your websites and then if you have more obviously we can go to previous or go to next if there's more posts but since i only have three uh there's no other option so let's say someone you know they're at your blog and they want to go ahead and read this they just click on read more and it takes them to the blog post so that's it so that's a really cool one how to style and design your blog using brizzy now for the posts you can also use brizzy to design your posts but i think i'll be saving that for another video because i can easily again guys talk about blog posts for another hour two hours and some people might not even be using blogs on their website so but that's how you can incorporate a blog post and remember these blogs it's pulled dynamically from your website so if i go to my dashboard and i go to my posts these are the posts that will display automatically so for example if i click on edits things to add to your website you'll see the featured image right here and then you'll see the content and all that cool stuff so that's how you can add a blog to your website using brizzy and again i'm not going to go into details blog so i think i'll save that for another video and if i do decide to make that i'll leave that in the description below of this video but now that you guys know about blogs and all that fun stuff let's go ahead and move on to the next section all right congratulations so now that we know the fundamentals of building websites let's go ahead and talk about the brizzy cloud now the brizzy cloud is probably the most popular feature that brizzy offers essentially what it allows you to do is work on your website and other websites from one location when you work on your website it'll automatically sync onto the website that you're working on from the brz cloud so it's a very unique and popular platform so let's go ahead and dive into it okay so in this last section i'm going to introduce you all to the brizzy cloud now the brizzy cloud is a very innovative feature it allows you to work and modify all of your websites from one location now your websites can be hosted on your server or they can also be hosted on the brizzy cloud server so in this tutorial i'll show you how to use it for both your server and their server so just to give you an idea of what i'm talking about maybe you're kind of new to this and you don't understand let's say for instance we have this domain right here so what you can do is you can make a new project and then i can go ahead and edit the project so now we can go ahead and build the website as normal you can go ahead and just you know make any changes you want to the website so i have this is a great looking website but instead i'll change this to just brizzy and i'll make the text uh here bold and italicized and wait there we go and then i'll just change this to something like white so brizzy and then i'll update it now on the current website you'll see that uh for this domain we have this is a great looking website now since i you know made the changes on the brizzy cloud it'll then go ahead and affect the current domain that it's on so i'll go ahead and just wait a few minutes i'll refresh this page all right and i waited about three to four minutes and you'll see how the website changed to what i put in the brizy cloud so i'll go ahead and walk you through how to do this to your website so in this part of the video we will do the actual uh server sync which is this one and then we'll also do the custom domain so let's say for example you want to buy like a dollar domain from some website and then you want brizzy to host it you can go ahead and do that so i'll walk you through on how to do both so i'll let you uh you know let you decide so the first thing that we'll do obviously is we'll create a new project so you'll click on create a new project and then just click on create so now you're just going to go ahead and just build a normal website so you'll see how i created it here is the project and i'll click on edit project okay so then just go ahead and build your website normally so i'll just add a new you know i'll just add a pre-made layouts and uh let's see here we'll just do uh see what we got going on here we'll just grab we'll grab this one we'll grab a creed and then i will import this layouts to the website so here is the layouts i'll go ahead and save this as drafts so we don't really have to publish it yet because we have to adjust some server settings so let's go ahead and do that next so let's go ahead and just go over here and go back to our dashboard so this is the current project and i'll just do the demo website just to make sure you guys understand which one i'm working on because i have so many and then on these little dots i will click on publish and i will click on the download under server sync okay so once you click on download on the bottom left of your screen you will see you get a zip file so what i'm going to do is i'm going to take that zip file and i'm going to drag it to my desktop like that there we go so before we do anything we need to actually make one small modification to a file inside of the zip file yes i know it's it's fun time so let's go ahead and double click on the zip and you have this folder now all right double click on that now you need to find the htt access file so this is the file that you need now this might be invisible so if you are on a mac you're going to hold ctrl shift and period and that will actually make the file appear so this is an invisible file so again you will hold the command shift and press the period and that will basically bring it on and off see that so i'm just kind of like hiding it and unhiding it so what you'll do is you will double click and open this file so we need to make some small changes to this file so you see how we have this little number sign delete that one delete that one over here delete this one and delete this one now you'll go ahead and put in the domain that you want to host so let's say for example you want to host a specific website here you're going to put that domain in right there so now under the yourdomain.com i'll go ahead and put the one i want which is yolks.com y o k k s dot com and then the same thing right here so just go ahead and put in your website yolks.com now the main reason why we're doing this is because we want people to know that we're using www dots you know our website and also for those of you who have ssl which everyone should we want to make sure it gets redirected to the correct domain so that's why we're doing this now once you have done this you will actually save this file all right so we saved it and i'll close it now under that file i'll go ahead and recompress it so i'll go ahead and compress the file again and there you go okay so once we have the file let's go to our cpanel so if you are using siteground you can go ahead and log into your cpanel now in everyone's cpanel doesn't matter what hosting company you're using you will see the file manager so go ahead and find the file manager for your you know in your hosting company or whoever you use and you have these options and this might be scary at first but it's really not you'll go ahead and just find the domain that you're using so i'm using yolks.com right now if we are going to use the brizzy cloud we need to have nothing in this folder so unfortunately make sure that this is a starter domain with nothing on it so we're going to delete the files on that domain so if you have a website on there already it will be deleted so you want to make sure you have a backup of it but if you want to use the brizzy cloud you will have to start over from scratch so i'm going to go ahead and say all right you know what i want to you know start from scratch so i'll go ahead and delete all these files so nothing is in this folder nothing so let's go ahead now and upload that zip file so uh for name here exclusively you have to actually upload the zip uh for some servers you can just drag and drop the actual folder but specifically for name hero they don't allow that so you know every hosting company is different so let's go ahead and click on upload make sure you are you know you click your domain and then click on upload and then i will go ahead and drag and drop the zip file all right cool so it's 100 done and i'll go ahead and go back to the current cpanel so now we have the zip file so what we need to do next is we need to actually take those files out of the zip file so i'll go ahead and click on the file right click and go to extract so i want to go ahead and extract all these files so i'll just click on extract files and there you go so now we have the brizzy file and we only need here is the brizzy file we don't need anything else so i'm going to go ahead and delete these files so delete the zip and also i'm going to delete this one i don't really need this either so let's just go ahead and delete that so we just have this one folder inside of our file manager so now let's go ahead and move the files so i'm going to click on this and i'll double click next we will take all these files hold shift and select them all and click on the move there we go so basically now it's saying okay so where do you want these files to be at now we just want it to be at yolks.com or your current website dot com and that's it so click on move file and that's it you're pretty much done so uh now it's basically synced up with your website now the brizzy file that you have in there you can delete that you don't need that no more so the brizzy file that we originally used that has the files we can just delete it and there you go so now we have all the files in there and now it is synced up with our server so let's go ahead and go back to our brzee cloud all right so now we're back at the brizzy cloud and we have our demo website so let's go ahead and click on edit project i should probably change that to yolks.com right so yeah i had another one but i deleted it just because i don't want to cause confusion so now we'll go ahead and publish this page and that's it we're done so let's just go ahead and go back to our dashboard and i might want to change this to you know my domain now so this was the yolks.com right just to make sure that we know we know where it's going let's say for instance you bought a domain somewhere you know and you want the brizzy cloud to host it now the really cool thing about the brizzy cloud is that you can host a lot of domains on the brizy cloud so let's go ahead and walk you through on how to host other domains to the brizzy cloud okay so before we go to the brizzy cloud i just want to show you that domain yokes.com it took around five minutes to sync up so it just really depends guys on the server you know it's really hard for me to give everyone exact answer of when it's going to sync up so um again mine took around five minutes yours can take an hour it can take two hours it can take 24 hours so i you know best of luck to you all best of luck so now let's say you want to sneak it up to the brizzy cloud server so again you will go ahead and create a new project and then you'll get the new project once you create the new project you'll do the same thing you'll just go ahead and click on these little dots and click on publish then you have the custom domain option so i'll click on choose now my current information is already synced up with the server so you'll see my current data is already done everything's green and good to go so let's go ahead and just say all right let's just imagine that breezy tutorial is not synced up let's go ahead and just sync it up anyway so i'll go ahead and click on publish and then choose and it's going to want you to type in your domain name so go ahead and type in your domain name once you type in your domain name you will get this required data so you'll see the cnames and you'll also get the a records so all you need to do is just go ahead and plug that into your current server and you're pretty much all set so let's go ahead and go back to our server now uh sadly guys for name hero x i think exclusively the service costs like a dollar or two dollars or something like that so if you want to go ahead and do this it is a paid service with name hero however with companies like siteground and other companies it is not a paid service it's free but it's only like a dollar or two dollars it's really really really cheap so just make sure after this part of the video you contact the hosting and say hey guys can you charge me for it whatever and they should be able to bill you it's it's pretty simple so yeah anyways so let's go ahead and just say all right so the first thing that we'll do is we'll go change our dns so you can get there by going to the search and typing in dns and you'll see zone editor i'm not sure where the zone editor is on here we can go ahead and find it there it is zone editor wow that was that was pretty easy right so just click on the zone editor now if you're using siteground this could be called like the advanced zone editor it could be called it could be called a lot of different names but essentially you want to change the dns records the cname and the a records so i have the um the domain bridges tutorial.com so what i'll do is i'll click on manage okay so we have all this information now what you're going to do is find the current domain so we have the domain rates and we have the type which is the a record and see here we have the actual record so you'll go back to the breezy cloud all right and now we see this little uh ip address so for the a record i'll click on edits and i'll make sure that we paste it in there like that now make sure there's no space guys all right that can ruin everything one little one little dot or one little space can ruin everything and it'll make your life a lot hill you'll be you know on the support chat with them for days so just make sure that there's no space all right there we go so once you do that that's finished the a record is saved everything's done next we need to change the c the c name record so you'll see we have the bridge tutorial.com now this has the www in front of it that's the main difference and i'll click on edits and it's so simple guys all you need to do is just go ahead and copy this like that and then go ahead and paste it in there and then save the record and then you're all done and that's it so you can do this for virtually any server you can do this for any hosting company now what you might want to do is find a website with really really really cheap domains like maybe like three five dollars you can buy like 100 domains and then you can host them all on the brizy cloud so this way you know it's a lot cheaper and you can host a lot of different domains on the brizy cloud so if you want to go that route you can go ahead and go that route to save more money but ultimately that's pretty much it you are all set and done okay so if you guys want to actually use the service with name hero under domains you'll click on my domains and then you'll just go ahead and find like the domain that you want to host or that you want to connect with the brizzy cloud you'll go ahead and click on it and then under the add-on section you'll click on add-ons and this is what you'll need to purchase right here so what this will allow you to do is allow you to change the dns records to other servers and stuff like that so that's what you'll need to purchase for name hero so personally i would not recommend doing that just because you know um it might cost you a lot of money you might want to find a cheaper registrar that only sells the domains and not the hosting to make sure that you can kind of maximize you know your discount and you know try to save as much money as possible so if you just want to buy the domains only you guys can go to domain.com uh you can probably get domains for like 10 bucks there and then you can buy a bunch of domains and then you can point them at the brizzy cloud also you can buy them at namecheap you can buy them for you know around nine dollars and then you can go ahead and you know buy all those domains and then point them at the brizzy cloud so that's pretty much it for the brizzy cloud section if you guys have any questions for me about it feel free to let me know in the description below i do get a lot of comments about the brizzy cloud because you know when you're dealing with servers guys you get a lot of errors you just get wacky servers you just get you know unknown errors that happen all the time but that's how you use the brizzy cloud i myself had issues with it at first but after the company gave me like a walk-through i was like okay now i get it so it was a lot easier once i had step-by-step directions so yeah go ahead and just uh you know if you want to use the brizzy cloud feel free to use it it's a free service for brizzy pro users for the first thing it's like two years and then after that i think they charge like 150 bucks per year uh for the service and that can always change in the future so that's pretty much it for the brizzy cloud and also the video so congratulations on your website you guys are now brizzy experts congratulations so congratulations i told you guys this was easy so if you guys have any questions for me about brizzy or the theme that we use let me know in the comments below also let me know how i did you know was this a easy learning experience was it not easy uh feedback is always appreciated so uh yeah go ahead and let me know but again guys congrats on your websites a lot of people don't make it this far so if you did kudos to you so until then guys i will see you all in the next video guys take it easy

Channel: Darrel Wilson

Views: 28,530

Keywords: how to make a website, create a website, wordpress, how to make a wordpress website, make a website, brizy, brizy page builder, darrel wilson, wordpress tutorial, how to create a website, how to build a website, how to make wordpress website for beginners, how to make a website on wordpress, brizy page builder tutorial

Id: DMoQCvcQ81Q

Length: 136min 35sec (8195 seconds)

Published: Sat Nov 14 2020