Create a Full Website with Brizy Cloud

in this video we're going to create a full website with breezy cloud hi my name is tratos and i'm constantly producing the tutorials about wordpress please subscribe to my channel for more videos like this also please take a moment give me thumbs up and help me grow my channel now i know that this is not a wordpress tutorial because brizzy cloud is not based in wordpress but it's a product that it's coming from wordpress it's a known breezy it's a known builder for wordpress and we're going to create something with that if you want to follow along you will find the pictures that i'm going to use in the description so you can also download those and follow along with me and create your website so let's start first from the brizy cloud website the link will be in the description below keep in mind that it's not an affiliate link so with brizi cloud you can create everything that brizypro lets you create you can create the header you can create the footer and you can create the contents and use the pro features of breezy you can also create archive and single templates and pages and if we go down here we will see the prices of course at this moment the prices are reduced because the ltd for the wordpress is still going on but the moment the video is published the prices will go up so if we go here we will see that the prices that we will have and this is accordingly to breezy post and we will have the agency plan with 100 hosted sites and this is almost 500 a year we have the freelancer which is 20 hosted site plan with almost 300 a year and we have the personal for one hosted site for 49.79 bucks sorry and let's go to breezy cloud now this is my account page and here i'm going to click create a new project once i do that i must select the website and adding page let's click create here and the new project is created the name is project 2 and i'm going here to put another name let's go for test this is just a name for me to understand which project is which it's not something that has to do with the visitors or the website if you go over here and you hover over and you click this is the preview of the project so you can see how it looks in the front end and if you go into the three dots that has here you can publish you can see the leads or delete the project and here you can click edit project and it will open up the cms for the project keep in mind that once you click this it will automatically create a homepage and it will open in the builder now since we're here we're going to see first the layout and to where is everything so let's start by the three lines up here and once you click it you can go into the cms so first we have the pages as we can see here we have one page here and the name is home and here we can use this search to search the pages we don't have any feature to order those pages based on the name or the date we just have the search here we have a circle which is orange and this means that this page is not published yet once it published it will turn green and here we have the link after that we have two icons here so we can delete the page and we can edit the page with the builder if we click the home page it will go into three tabs and the one is the content here is the page title so we can change the page title if we want we can add the description this is only for us and we can also change the url this lag after that we can edit the seo so we can have the seo title and description this is the preview and how it will look and then we have the social which is here we can add an alternative sharing image let's uh go back but first as you can see we can update those changes or cancel if we don't want to save those let's go back here in the link you can click and preview the page and here of course for the actions you can edit that if you want to add a new page you can click add a new page and start building the page from the beginning let's go to the blog and here we will find all posts and categories for all posts we can add a new post and we will have all the same settings that we find in the page we found in the page after that we can see here a gear icon so if we click it we will see that here we can edit the settings for the posts so uh think it as a custom post type and thinking that you can add fields and change things so we have the post name we have the post which is in plural this is the url which is blog and this is the asset type which basically it means that it's a single and not an archive for the whole blog after that we can select an icon if we want and if we scroll down we can see the fields that we have currently inside so we have the featured image we have the expert and here we can add the text that we can find then in the archive page and then we have the categories if we want we can add other fields that we will find later on in the single editor and we can add text reads text email link select image number reference and multi-reference and of course you can add as many fields as you want after that you can click save and finish and it will save the changes so let's go to the categories and here we will find the categories for the blog and you can add some categories if you want if you click inside the blog you will see that it has the same settings as the page and here we can preview and of course we can edit the archive template and we can delete it here you can create a new category if we go into the gear here we will find that we have the same settings for the archive page and here the asset type is the archive there's no need for me to explain everything inside here after that we have the stories of course every time we have the button here to add new story and this is the pop-up and alerts and we can add a new pop-up create web hooks and here we can connect the website that we're building the project with the web hook and then we can go into the system pages here we will find the coming soon page if we want the maintenance page the 404 page and the project pro the protected project which means that it will add a password inside here so here i'm going to click and enable the 404 page because i want to have something once someone comes and doesn't find the page and if we go here that says edit page you can see how it looks so this is the 404 page it's not the best for the ux because it has an animation here and i'm sure that the visitor the first time he will go inside he will look at this and he will say what is a 404 if he doesn't know what it is so this is the message that we want to show to the visitor that this page seems to be missing because something was misspelled or is deleted but it's not an ugly page so let's go back and we're going to click here and let's go to the system page again so i'm going to leave it as enabled because i do want to have that and then here you can create custom assets which means you can create custom blog types so if you want to add recipes if you want to add books or you want to create another custom post type you can do it by here and you can create of course the single and the archive pages after that we have the project settings and here we have the menu to create some menus and we can add everything from here keep in mind that the pages must be published before you can add those into the menu and then we have the settings so we have the site title the site description and the five icon icon after that we have the social sharing and these are the default information about the sharing of the whole project then we have custom css and here we can add css we have code injection and here we can add code in the head and the footer so if you have google analytics or if you have another code that you want to add this is the place and then we have the redirects so we have the redirect rules since we are here let's go to the site settings and here we're going to add logistics and we're going to leave it as it is for the favicon i'm going to select here to click select and let's go into my assets so i will search for the logo and we'll open that and then i will hit save changes now keep in mind that brizi cloud doesn't have any library features so you cannot add images and find them later you have to select every time the image that you want if you want to select the same image twice in two different pages you have to select it again from your computer i would like to see a library feature inside the breezy cloud let's hit save changes again and let's close that and let's go now to the pages and let's edit the home page and here we will find the plus icon where we can add the elements we have all the elements as we have in the pro feature here we will find the blocks and we can change the order and here we have the styling these are the global settings so here as you can see we have the style and you can choose the style that you want and these are pre-made styles from brizzy and here we have the colors so let's go and change the default colors that we're going to use let's go for a blue here i'm going to grab the code of the blue and i'm going here i'm going to leave the black as this and let's go and paste the blue here and i'm going for a little bit darker okay and then let's go let's see no this is not exactly black so let's put that in black and i'm going to use that as an off-white and so let's put that a little bit up okay somewhere around here and here you can change the paragraph font and text so here we have the size which is 16 i'm going to put 17 and the line height i'm going to put 1.7 the height is normal and all the spacing is zero and it's okay for that and here we can select the phone that we want so i'm going to change the phone and i'm going to add a new phone here and here you can of course upload your phones that you want or use the google fonts first i'm going into fonts and i'm going to delete everything except of course from the latto that it's the one that you're gonna delete everything else can be deleted here so i'm going to remove everything okay and i have the robota here and i didn't see if i had already the ubuntu that i uploaded in a previous test so now i can go to add new i can select the google fonts and i can go and search for the ubuntu okay and after that i can click continue and then done now i don't like that the font disappears when you click done because if you want to also select some other fonts you have to do the process all over again so i would like that to be easier after that i can go into the paragraph and i can select the ubuntu for the broad graph subtitle ubuntu above title ubuntu and every time i select ubuntu you can see that this sample text changes 1 is roboto heading 2 is roboto heading 3 roboto heading 4 roboto heading 5 roboto heading 6 roboto and for the button i'm going to select the ubuntu okay i'm going to leave those as they are now and if you go here and click here you can see that this is the desktop tablet and mobile view and after that we have an icon here that we can select to go back to the dashboard where all the projects are go and see the shortcuts that we can use these are the same shortcuts that we have in the breezy wordpress and of course we also have the support and about us page okay so now that we are here we can start building the website we're going to start from the header so we're going to create our own and let's now click here in the plus or you can click in this plus button and i can add here a column element so in here i can add an image and in here i can add a menu let's click the image and i'm going to select for the image the logo which is here and let's go here select 100 for the height and the width i'm going to put us pixels and i'm going to put 150 okay after that i'm going to put that in the left and now let's going to remove the margins here now since i cannot change that to less than 15 i have to go here into the settings i have to click here in the gear icon and i have to select more settings after that i can select here 0 and 0. now another thing that i didn't like here is when you switch to another view you notice that i don't have any margin up from the elements that are in here and when i switch to the tablet i will have here some margin which is 50 now so i will have to do also the same thing i have to go and put here 0 and 0. i wish i could have something different here if i want to set a 0 for the mobile view for the desktop view it should grab all those settings on the mobile and the uh tablet view as well so i don't have to go every time and change that and guess what once you go into the mobile as well you will have the same margin the 50 pixels so you will have to go and remove it from the mobile as well you have some pixels here 25 not 50. okay and you have to remove it and since i cannot see the settings here for the mobile view i cannot make that zero i will always have 15 pixels here okay let's go back to the desktop since i don't have now a menu i'm not going to do anything for that and i'm going to select here the column and i'm going to select the settings and put that content in the middle after that i'm going here and i'm going to make that a global block and i'm going to click again select here and display conditions and i want to display everywhere so i'm going to select all and save that so that is all for the header now keep in mind that i don't have any html tags so i cannot set an a header tag for the code i do not have also something to set that this is a navigation element so basically when you see the code in the back end you will not see any of those tags i would like to have those tags to be able to access those so after that we're going to add a new block and of course create your own let's add first the background and let's select the image and for the image i'm going to select let's see where is the home logistics hero this is the one okay and now i'm going to add a little bit of margin on top uh this is the padding i think the the padding of this blog and not the margin okay so let's go for 200 and let's go here for 200 as well something like that okay almost 200 and then i'm going to add inside a text element after that i want also a text element and after that i want a button okay for the text i'm going to add here the name of the website which is logistics and i'm going to say this as heading 1. let's put that in the middle and for the color i'm going for white okay after that i need to put something for the text here and also make it as a paragraph and set that to be black okay and here let's go and type something like easy and fast services something like that okay put that in the middle again and for the button i'm going to select for the icon i'm going to remove the icon and for the text i'm going to go for something like contact us and for the colors i'm going to change that this is the background so i'm going to select here and once i hover i'm going to put here this color and for the text i will have black and black every time or maybe white and white white and white something like that okay now for the hover i'm going to reduce the opacity so for the background as you can see i have opacity so i'm going to remove it at all so it will go something like that okay now i can go first and save the draft as you can see here and i will need to have an overlay color so i'm going to click here and select this one and for the overlay i'm going for black and 50 something like that okay this should be white as well and now i can go and put some space in between so let's add a spacer inside here and a spacer inside here and this spacer will be a little bit less let's go for 25 25 and this is going to be 25 as well okay so let's save again and since i haven't said about this here you can hide or show elements this is the redo and undo buttons this is the undo and this is the redo and this is the preview button if you go you can save here or you can click the arrow here and you can see that you can publish the page save the layout or clear the layout okay let's save the draft and this is the hero section after that we're going for a new block and we're going to add again to elements now uh because i'm often doing this i'm mistaking and i'm going for the first icon instead of this plus because i'm used to because of a wordpress breezy if you do that just go and click uh somewhere else and you will see that you are still in the same page so it doesn't matter let's click here and let's go and add two columns and the first column we will get an image so let's grab an image put it in here and for the image i'm going to select here the logistics 10 is the image that we have used in the previous website and you will see every time that i select image that i cannot add an until md text this is something that i would like to see from blizzycloud and i can not edit or add another text let's go to the settings again i don't know why but i would like here to have 100 all the time i don't know why i get a different height than 100 and here let's go and add the text and this is the about us about us section after that i would like to have a line so i'm going to add a line here and for the line let's change first the color i'm going to put that here here is the size so i'm going to put it as five pixels then i'm going to put that in the left and i'm going to remove some width so i'm going for about eight pixels something like that okay let's save that and after that i'm going to add some lorem ipsum text let's open up and get a lorem ipsum and i know that also there is a problem with breezy when you add some text that is copied from another website that it grabs also the html of the text so it will not paste it as plain text i would like that also to be improved let's paste the text here and as you can see i have a space right here and if you want to set up correctly you have to press delete and put the text back in here to be a little bit more normal you will see it when i add longer texts here with longer width so add a little bit of space here and as you can see i have a space here that i want to reduce and then i have space here that i want to reduce and here and it's not looking as good as i would like to be so i would like to have something to uh remove all the html elements from the text but i don't have anything let's save that and now add a new block the next one will be the services and i'm going to add here a background so let's get enough white just to separate from the previous section and here i'm going also to add some columns first let's add the title so this is services and i'm going to put that as h2 now uh when i scroll down for the heading to find the h2 i do once the scrolling from my mouse and i will go straight at the bottom i cannot select the h2 i have to go manually and grab that and put that in here this is something that frustrates me sometimes and i forgot to put also the about us as an h2 tag so let's do that as well h2 okay let's save that and after that i will need a spacer and i hit the wrong button so let's click here and here and add spacer and then after that i need some columns okay columns are here so you have two at this moment and i'm going to add later on another once i add the layout that i want so i will be able to clone it easier and i'm going to add an image after that i need a text and after that i need a button so let's add the text underneath and underneath let's add a button okay now that we are in here let's click here the image and let's see the images that we're going to select so we're going to select this logistics and let's go into the settings again let's go 100 okay and after that i'm going to triple click it and i'm going to select the service 1 and select here and add that as heading 4 okay i'm going to put that in the middle and for the button i'm going to remove the icon i'm going to type here read more and i'm going to leave everything else as this maybe i would put a little bit more around corners so i can go for the button and i can select here for the corners to have it around 10. something like that okay now as you can see i can add my background and let's go to the background and let's put that in white now i don't like that i have here also the background of an image that it's white so in order to remove that i will have to go here for the column and i have to go into the settings and i have to put here more settings and then put zero on top zero for the left and zero for the right okay and as you can see the left and the right is okay but i do have a space here inside so i have to also go into the image and i have to go here and i have select more settings again and set that to zero this should also be something that needs improvement and i would like that to be with no paging no margin no padding everywhere and i would like to add my own every time so in order to do something more uh with the layout you have to go and removes remove all the margins and the padding so you have to go every time in the element and then in the row and then in the column and then in the section and whatever you have to do in order to assign those how you want them to look and that is a little bit of frustrating okay now that we have this layout i'm going to select here and select the duplicate and then i'm going to duplicate once more and then i can go here and remove that now that i have this layout i can see that i need a little bit of margin so i'm going to select here i'm going to select more settings and let's go for matching and put here five everywhere okay something like that so i can now copy here and right click and copy and then uh this happened okay this may happen sometimes so you have to save draft and refresh the page don't be panicked you haven't lost ever anything you may find that this happens sometimes so we're okay so let's right click it copy and it doesn't again okay refresh again okay one more time copy no it doesn't won't work so i'm going to manually put that as a paste i'm not going to paste i'm going to put the margin manually so let's click here let's click into the settings more settings and let's put here five and also into this column as well five okay now i can save that and i will change the buttons later on and add the url to that so let's go to the last blog and this is the last block for this page and i also have to create the footer so i'm going to create a new and this is a contact us so i'm going to add the text which will say contact us let's put that in the middle and add the heading of h2 okay and after that i'm going to add the form element okay if you haven't used the form element it may seem a little bit difficult but let's first go here duplicate that and now i'm going to select here change that to a text and i'm going to leave it as required after that i'm going to put here the name and let's select again and let's go to advanced and i'm going to have labels but not placeholder something like that after that i'm going to select here and put that in a black color like this and maybe set that to be paragraph so we'll have a little bit bigger text okay now that i'm okay with that let's go back in here let's go into the settings and i'm going to put that 50 percent 50 okay the name is 50 i can duplicate that and now i can have here the last name okay for the email i can remove the hyphen one the select is not something that i want so i can just remove it if i want or you can change that to different one i will remove it and for the grab paragraph i will put here a message okay for the button i'm going to select submit as a text i'm going to remove the icon and for the width i'm going to put that as uh 20 maybe something like that and if you want you can put that in the middle let's leave it where it was okay for the colors i need to put that in here so it will not be as vivid okay for the background color i will put that here so we have something like that now uh to set up correctly after that you have to go and click here and then set the email notification to be the email that you want so something at something.gr or com or whatever subject is contact from website or something contact form and then continue and then done also you can select if you want to connect it with some apps or add recaptcha now keep in mind that we don't have any text to add for the form successful submission or for the error submission so i would like to be able to select the text that i want to have okay save that save that and let's go to the last one which will be the footer so i'm going for black color here okay i'm going to add three columns once again i missed the button okay columns three columns okay let's duplicate that the first one will be the image and that will be the logo okay i'm going to select here and i'm going to put 100 and for the pixels width i'm going to have it as 100 it's okay so let's put that in the left after that i'm going to add some contact information here so i'm going to click plus and i'm going to select icon box okay remove the button and here for the icon i'm going to select the white color and here the icon will be a phone this one okay and let's see the size i'm going for an icon size of 20 i think or 25 something like that let's go for 20 at the beginning yeah 20 is okay so triple click it now and select the phone number five five five two five two five two five please don't call it it's a fake number and then give it a little bit of white color something like that and also i need to remove a little bit of con texture space between those so let's go to the icon and let's go for spacing and put that in 10. okay and let's give it a little bit of space inside now i would like here to have a link so i can add the link to the icon and the text as well but i don't have so i have to go manually to add those in to in those two elements so i have to go here and then select to link to dell semicolon and put here the code of your country zero zero three 0 and then the telephone number and then go into the icon as well and do the same in order to have the link everywhere ok now i can go and clone that one two times okay and now i can go for this icon and let's change that to something like a map this is the map and the address is athens1 athens1 and the color is white and then this should be the envelope because i'm going to add an email and this should be something at something.dr okay and of course i have to go and add the url and this should be mail 2 semicolon and then the email also the icon should have the same so mail 2 and then everything else okay and since i'm here i can see that the hover is not correctly so i need to go and fix also the hover to white okay now i can go and remove the space from here and i also need to remove the space around these elements and i'm going to do that next and after that here i'm going to add icon for the social and this should be white and when i hover over white and for the icon let's go and add the facebook and set that to be something sorry the icon to be size 30 a little bit bigger than the size that we have in this text okay and also i'm going to clone that and here i'm going to put the instagram icon okay after that i'm going to select here and put that in the middle save here and now i need to remove the spaces here so i have to go here into the settings and here for the margin let's go for two and two also do that in here two and two and here also two and two and now it's looking better so let's uh save once more and now i can go for the tablet okay let's see how it looks for the w uh this is okay and of course i don't have any menu here at this moment this is the about us page and i can see it's okay i don't have any problems with that here the services looks fine and the contact form looks okay after that we can see the mobile view and here we have this one and i need to change that to one line and i will do that once i have the hammer menu the logistics is fine i don't need to go and change the text if you want you can reduce a little bit of the size but there's no need to do that the about is okay the services are here looking good and then we have the contact form and the one thing that you can do is go and change that to be 100 percent full width uh the button is not looking good now i have to go into the settings and i have to go and put here maybe 50 something like that okay and maybe put that in the middle okay and after that i can go and select that also to be in the middle and also this to be in the middle okay now i can save again and uh also you can click here and click publish page let's update one once more and as you can see now that it has update it means that it's published it's no longer safe draft also if i go back here i will see that now the page has a green circle which means that this is published and if i go to the link i can select that and open that as a preview now in case that doesn't work for you and we will see how we're going to fix it in many cases you will find that it doesn't see you can see the preview you will only see that you have to create the project so what you need to do is go here go back to the dashboard go to the dashboard and go next to your project click here click publish and here it will ask you if you want to securely host it from brizy and you will add your sub domain here which is free or it's self-hosted by you so you can sync that to your server or third party free hosting so i'm going to choose here to have the sub domain so i'm going to select choose here and this is something that you need to put and this should be unique so this is stratos test after that you can submit that and now you will see that when i hover over it says stratos test breezy site so this is now the url so if i go and preview now i will see that the url stratos breezy side and no and not this one so i can close that and now i can edit again the project so this is how you can fix if you don't see the preview of the project after that i'm going to create some pages in order to add the menu here so i'm going to select here and i'm going for the pages now what i need is an about us page as i can see this lag is about us i'm going to put immediately that to be published and hit save changes the reason that i inputted that in publish because i want to create a menu and you can only add published pages inside the menu you cannot add the draft pages after that let's go back and let's click add new page and this is the service one publish and save changes add new pages service to and let's switch that to publish then save changes okay we need the service three service three and we need also the contact page so i'm going to add a new page and here i'm going to put contact and let's switch that to publish as well so now i can create the menu i have two ways to create a menu i can go inside my page click where was the menu and click create menu or go for the project settings and then here i can create the menu so i'm going first to start with the name which is main menu this is the name that i'm going to choose click here the plus and now select the main menu and now i can select the pages that i want and press here to add those to the menu so i have the home about us service one service to service three i'm not going to select the contact page and this is only because i want to show you something so i'm going to hit add to menu and as you will see all of those pages went right inside but let's say that you forgot to add something as you can see those pages are not deselected so if i select now the contact page and select add to menu it will add all of those pages again so i would like the page that was selected and then when you hit the add to menu this should be unselected this will be cleared and that doesn't happen here so you have to deselect everything and then select the things that you want to add all over again so let's remove those and this okay so now i can see the pages and as you can see here the home i have the home which is the main page and next to every title i have here the settings so i can click here and here as you can see i have the navigation label the set as home page and the open in a new tab these are the settings that i have so you can have whatever you want as a home page if you don't want the home page from here after that you have also the remove button in here let's save changes now of course i want to create some sub menus so i need to add a custom link add to the menu and i'm going to put that on top here okay i'm going to select here that says settings and for the custom link i'm going to put the pound sign and then here i'm going to say this is services okay remove everything else and now i have to click outside and then save changes if you don't click outside first you may find yourself that you will not have the settings that you did okay after that i need to put the services into the next level like sub menu and after that the service too now if you find it difficult to put that in the same level as the service one just put that on top and then this service three on top and then rearrange the pages i think that it's easier this way i haven't found any easy way to do that uh else to do it with other way okay this is the menu that i want so save changes let's close that and you can do go to whatever page you want to add the menu because it's a global settings but i'm going into the home because i have content inside and i want to see how it looks so let's go and edit the page now as you can see the uh menu is already selected because i only have one menu so i can go here if i want to select something different and click here and select different menu of course i don't have anything make it hamburger and orientation and spacing this is the spacing between those elements and i'm going for around 30 pixels let's leave it as a 30 pixels and we're going to see after that i'm going to click into a link and i'm going to select the typography and i'm going to select that to be a paragraph so i will have it not bold and i will have it as 17 pixels in height and i can see that it's okay now maybe i need to put a little bit of letter spacing so i'm going to put us one of course it will convert to custom typography now and let's update that and maybe add something like a background so in order to do that i have select here i have to select the color and then background and let's go for the background of something like a blue and let's not put that uh into the normal i'm going to put that in hover and also for the active so in the active and the hover i will have something like that also when i hover i want to put that the text to be white so let's go text let's go here and let's select that to be white and for the active also white okay after that as you can see now i have something like that but i need to add also some padding inside so let's go into the settings and let's go for the padding let's go for maybe 20 on top let's see how it looks and 20 at the bottom and 30 and 30. okay so something like that yeah i think it's okay after that i just need to uh change here the width of the column and i wish i could change the width of the content somewhere but i cannot i would like to have a global setting i know that i can change the content the width inside here inside the block but i would like to do that for all the elements in every page but i don't have any setting for that okay if i hover over to the services and click it i will see the sub menu and i don't like it i have to go and click here and let's go for the colors the text should be black and the background should be white and once i do the hovering i will have the same thing the text is black and maybe the background should be off gray and the active should be the same for the text and the background of white okay so when i hover i will have something like that which is better also i need to reduce limit of size it's 15 maybe 14 something like that okay now last thing that i have to do is i have to add an icon to the services because right this moment uh if i refresh here you will see that i have the services but i don't have any indication that this has sub menus so i need to put here an icon i wish i could do that with an an easier way but there is no easier way here so let's go to the icon and let's add an icon i will add something like that and i will put that in the right for the size i'm going to select that to be 15 pixels and for the spacing 5 pixels i think it's okay yeah it's looking okay and i need to change also the colors for the uh for the icon once you hover no it grabs the colors i think uh from the label okay so we're okay with that and now we can change the tablet view and see how it looks so it changed to a hammer menu as you can see when once you click it you will see how it looks so this is how it looks i'm going to change here and select this and put that in the right and also let's see what else we want to change here i don't think that i want to change the orientation the orientation and the size is okay let's click once again here and now i can select here and change the text it's i want the paragraph so it will not be bold and once i click here sorry here in this icon i can see the sub menus and i want to change those to something less like 12. okay as you can see i cannot select only the sub menus and okay i cannot do anything with that let's add that to paragraph as well okay this is how it looks and i cannot change that uh what i can do is i remove now the icon so i need to put that to be zero in size and zero in spacing i cannot remove that at all uh with other settings so this is how it will look now and i think we're okay let's update that and see how it looks in the mobile so now i need that to put around 50 something right here and put that also around 50 so it will go on top and this is how i want that to look okay so i'm good to go so i can update that and go in another page and start building the next page okay let's go to the about spades sorry not here into this button and now i can see that i haven't set the footer as a global so that was a mistake let's go back let's go to the homepage edit that let's go to the footer okay select here make it global and then click again into the button again and select here and display conditions and i want that to be everywhere okay save changes and now i can go into the next page the about us page and i will have the footer as well yeah i don't have the footer as well i maybe i have to refresh here because i have already opened it once let's see no it didn't grab the footer now uh i'm afraid that if i add here the footer and make it global again i will have it a second time so uh this is also a bug it should be able to catch because i have set that to be everywhere so it would be it should be refreshed everywhere and i shouldn't have to do it again if i can see here i have display conditions yeah i have it saved so it should be okay with that now if i go and edit a page that i haven't started yet i will see that i will have the header in the footer let's go to the service one and we will see here the header and the footer no i cannot see the footer let's see again if it's something that i did wrong i thought that i have put that correctly let's see include all update let's go here and let's go to the contact page or somewhere else okay here now i have the footer i didn't do anything else so let's go to the about us and see if we have the footer there okay now have the photo maybe took some time for that to go inside so create our own block of course the footer is not going to stick in the bottom so every time i have to go and select here and put that in the middle okay and then click add here and add text no first add any mods first the image and for the emats now i'm going to remove the image and i'm going to add a text here text i'm going to put that as about us about us this will be the heading one okay and then i'm going to leave it in the left and i'm going to select also for the background to have something like this okay i will also put an overly color and since i have the blue color here i will select that and put that to be around 60 something like that also for the color of the about us i will put that in white okay after that i'm going here and select to create our own blog and here we're going to put the text for the about us page you can also add if you want an image but i'm going for lorem ipsum and i'm going to grab everything now you will see that once i grab here and add that in my project as a text it will not be what i want because it will have also some html elements inside and as you can see this is how it looks which is not great the one thing that you can do to fix it uh you can do not do anything from here it's a paragraph text and you have set the size and of course everything else but as you can see you cannot do anything for here the one thing that you can do is paste it in a notepad element so it will be removed from the html code and then paste it again here and this is what we're going to do so open the notepad paste it here select ctrl a copy that again and select here everything and paste it again and now i can have the text that i want and also remove here the text on the top okay let's update the page and this is how i want that to be so let's go back to the pages and let's go for the second page the the third page this service one page edit that okay i'm going to add a blog and i'm going to select three on your own select here and put that on top okay and now let's add here an image and select the image select here and i'm going to select the logistics 2 okay open that into the settings i'm going to put 100 for width for height sorry and then remove from here the space i'm going to leave it as uh 15 please go ahead and remove everything here but you have to do it also for the tablet and the mobile view as well now of course i didn't switch to the mobile and tablet view in the about us page because it was just a text it didn't have anything else so i didn't need to but here i will do that i will do that because i will add a little bit different layout so i have the services here and let's go and add first the text underneath the image which will be service one service one let's add that as a heading one and put that in the middle okay and after that i need some columns so i'm going for the column here no maybe add a entire block so i'm going to remove here the text the space and i'm going to add a different blog because i need to change the background after that so remove the space again and click here and add some columns okay and now i'm going to add an image here and the image will be the logistic 3. click the settings put here 100 and after that click here and put a text and another text underneath and this will be the service one title hyphen one so this is inside the service one what you want to offer to those people after that here let's put the h2 okay and i will leave it in the left and for that i'm going to use the laura mipsum and i'm going to use this text okay as you can see it's not looking great okay delete that and maybe put a little bit of space here i'm going to remove everything else i'm going to leave it as it is here okay so let's update that and after that i'm going to clone that two times so clone and clone and in the middle i'm going to select here and put that the background with enough white okay and now i can go as you can see i have the same margin here margin and i don't like it i need to put a little bit of more space in here so i have to go and put a little bit of 50 or something 50 pixels maybe something like that of 17 since the bottom is 17 must be equal so 17 or reduce the bottom of course to 50 but i'm going to leave it as 74 okay and here i'm going to put a little bit of space as well so again 75 okay so now i can go grab the column and put that on the right okay it didn't do that so let's try it again no i think uh yeah the service one is the one that i want okay maybe try this one okay it didn't work i know that this can be done because i have done it already but it's not the easiest thing to do okay yeah um it seems that it's not working at this moment it should be easier but in case you cannot just grab the image put that here and then grab the title and the text and put that in here so uh this will do the same trick but i would like to be able to grab the uh column easier and put that in here i know that it can be done but i cannot do it at this moment so let's update that and put that service as a two and then service one one as a three here of course you will also be able to change the images accordingly i'm going to update that i'm going to create the service two or three pages and i'm going straight for the contact now because i have the contact and i want to create the same form and i'm going into the home page first and i'm going to save the blog that i have created so i will have the same contact form and use it easier so let's go here let's select that and put that as a saved one and then let's go here and let's open the up the contact page so let's go here to add a new blog and let's create your own put that in the middle and let's now add a new one and here let's go to saved and add the form that i have created okay this is the form and now i can go here add two columns and i'm going to grab the form and i'm going to put it here okay so i can go and delete that and now let's change the button settings and put that in 50 percent okay and here i'm going to change at this moment the width so i'm going for 100 for this and for this 100 as well okay update that and the form is looking okay i need to put a text on top something like contact us okay and put that for h1 put that in the middle and maybe add a little bit of text from the contact tasks to the form so add a spacer and here i'm going to change that to 25 okay after that here i'm going to add the icon box and i'm going to select to remove the button let's put that in the middle okay and now i'm going to select this and i'm going to select the icon and the first one is the phone this one okay so i need to have also the background i'm going to change the size of the button to let's say 25 something like that and i want the spacing to be maybe 10 10 this is the content between the icon and the text okay and then i need the background to be something like a fill and then this size let's go for 15 yeah i think it's okay this is okay and now let's go for the colors and let's go for the background color first and i need that to be here and once i hover i'm going for this color and for the text i want that to be for the icon sorry to be here and when i hover here okay and this is the effect that i'm going to get also it has some border and if you want you can change the border color to what you want okay let's triple click here and this is the phone number so uh put here the phone number of course i'm not going to put the same just to make the difference okay and as you can see now those two are not in the same height of course i need to put a little bit of more uh text here for the size let's go for 20 something like that and maybe bold something like that now i can select here the settings and here for the gap above i can go for five no 10 pixels a little bit more i think i'm going for 15. okay something else that i would like to be improved here is the breezy is one side you have something like a gap above and select here to click it and then uh press your keys from your keyboard let's go for the up key and i'm going to put here 17 i will have to wait a little bit for that to be previewed here and once it's updated for the text you will see that the 17 is no longer selected so if i press now the up it will not go up i have to click it once more with my mouse and then click it again go into 20 leave it a little bit just to be refreshed and then again it will not be selected so i have to do that every time in order to put that exactly where i want it this should be not the case uh this should be improved okay i would like something like that and i'm going to duplicate that duplicate duplicate of course you know how to put links now into the text and the icon so put here like that and here this is the map so let's change that to a map like that and this is the athens one and then we have the envelope which is the email and then we have the address at something dot gr and then here we have the clock of the for the working hours clock i'm going to uh keep it here okay and then monday to friday something uh nine two five something like that okay uh update that and after that we need to have the map so let's go and add here a map let's create your own let's add here the map sorry here map okay now i'm going to select here select this button and put here athens if you want to change the zoom you can do it from here and now i want to put that to be full width so let's go into the settings and here i'm going to select full width also i'm going to reduce the space and maybe put that to be 500 so let's click here let's click settings and put that 500 pixels okay something like that okay update that and now i can go and preview the whole website and of course add the links that i want to add as you can see this is the home page and here is the about us page services service one okay and contact now in contact i need also to see how it looks in the tablet view okay this should be changed so i want to put that to be full width for the columns and also i want to rearrange the column so i'm going to click first here and then i'm going to drag that and put that in full width and then i can do the same in here put that in fill with okay after that i can remove also the space and i can hit update everything else is looking okay maybe i would re reduce a little bit the icons so it will be not too big not so big okay then i can go into the mobile view and i will see that now i also need to click here and change the columns so i have the contact us first and then these icons and then the map okay let's update that and let's go back and see how the services are looking is looking in the mobile view so let's service one let's edit that okay and let's go for the tablet first okay everything is okay here i don't have to change anything maybe reduce a little bit of the space that i have in here and then let's go to the mobile view and here i need to change the columns and re-order those so i can have something like that okay so i'm going to go with that as well i'm going to update and then let's go to the home page and first i need to grab a url from here so as you can see the service on has this link this service one and keep in mind that in wordpress you will have a slash into the end of the link and this is how you add the relative links but not in breezy cloud you should not add the slush in the end of the link if you do that the link will not work so let's go to the read more and here i'm going to add sorry not here here the link for the service one okay copy that and then let's go here and this is the service too sorry why i'm pushing always the wrong button i don't know service two and then here service three okay after that i need to add the button to go in here so let's go and click here let's select this and then blog and then i'm going here for the contact for i'm going to select it and i'm going to select the blog name to be contact contact okay grab it okay and then i can go back to the url put here a hyphen and then the contact okay update that and let's go back to the home page let's refresh and go here okay and click the contact us it will go straight to the contact form okay and if we go to the services i'm going to click here and it will go into the service one page i don't have those the other page created also i don't have a link for the logo so let's do that as well i'm going here and i'm going to put here the lock at the home so we'll hope i will have the url here for the home okay so if i click here now it will go into the home page next thing is go into here go into the home page and basically you need to go into every page that you have and add the seo settings so here for the seo i will have to go and for and use here a logistics logistics in athens maybe and here for the description logistics in athens quick and easy services i typing with one hand only this is why i taking my time so not services services okay and maybe add something different here okay so you need to do that in all the pages that you have and maybe if you want also add an image for the social share and let's go for the blog okay so uh i go i'm going first in the categories and i'm going to add a new category i'm going to select here to have the news category news news category with slack news and let's publish that save changes okay let's go back to all the categories and here for the blog i'm going to remove that and i'm going to keep the news okay now let's go to all posts i'm going to add a new post and here for the post title i'm going to add the post one okay i have a featured image here i'm going to add the featured image let's call it for a logistic 5 or something open the expert is something it doesn't really matter what you add here of course this is just for uh testing if you want to create a full website for your client add something that it's for the post and for the slide i'm going to leave it as post one then i have select here in the categories and i have select news i wish i could add here a default category and it will always be the case and then for the draft i'm going to hit publish and hit save changes after that i'm going to go back now also here i wish i could see uh the categories that are for every post because if you add here many posts and you have different categories you cannot see directly which post is for what category so i would like to see something like that after that i can go here and edit the post and this will open up with of course the breezy editor and here i'm going for a new blog i'm going to create my own i'm going to put that on top now i want to create something in order to get some things automatically so i want that to get the text the not the text the image from the thumbnail the title from the title the post title name and then i can add the content that i want so what i can do is go into here click plus and click the image and then select here for the image into this icon for the dynamic and select featured image this will grab automatically the featured image that i have selected and you no longer have to do it manually every time after that i'm going to add next the title which is here and now i can select it put that in the middle and have it as a heading one okay after that i'm going to remove the space and i'm going to save that as a global of course i have to remove also the space here and then i'm going also for the condition display condition and i want to keep it in the blog but in every blog page so i want it everywhere let's save changes close that update and now what i want to do is go here plus create your own and add the text that i want to have so here is the content of the text i'm going to get a little ipsum again lorem ipsum generate grab the content and let's go here and paste the content here and of course since i haven't added the style let's go grab it from here paste it here and we're okay so delete that delete it again update and we're good to go next is add another post and we're going to see if that changes that i did were grabbed automatically here so add a new post let's add the post to post to the featured image i'm going for this one let's go for this one six okay and let's put that in publish then select the category to be news remember for that and then for the expert let's go for again something here okay save changes let's go back and edit the content and as i can see it has already grabbed the featured image and the post title so all i need to do is create my own blog underneath add the text and paste the text that i have in here and put that as a paragraph okay with black color okay maybe remove also that update and i'm going also to create another post just to have three of those blog add a new post post three let's add this category is news this is published and for the expert i don't care save changes go back edit that and i'm just going to paste again the same text okay i'm going to update that i'm not going to change the color of the text and let's go now back and i'm going to create my archive page so let's go for the blog again let's go for the categories and now that i have the categories here i'm going to select the edit so i'm going to edit the page for the categories i'm going to create a new category create your own blog okay not new category create your own blog and i'm going to select here and i'm going first for the text you can also have the title here but because i have only one blog category it doesn't matter if i use the title or the text but this will grab automatically the title of the category if you have more than one so put that in the middle and after that i'm going to add the spacer and after that i'm going to use the archive and i think the spacer didn't uh saved in here okay now the spacer is here so i have something like that so i can now press here and select the settings so i have three columns one row uh change the spacing if i want to put some filters offset means that you can skip some articles you can order those by id or title i can order those ascending or descending and i have navigation and this is the pagination and the spacing between those after that i have the settings here for the width and the margin padding and everything else and i can clone that if i want i can select here and change that to be maybe nh4 okay and i will leave it as it is and i will remove the icon because i don't like the icon in the button okay after that of course you can change if you want the button to be have a little bit of round corners if you want and make other settings as well and if you want you can add also the expert so i can add here the text and i can select that control a and then the pound sight pound sign and then have it like the expert of course this will not grab the expert in the back end but it will work just fine in the front end now if you want to rearrange the post you have to do it by date if you want to do it so you can go into the post and change the published date also i would like to have settings here to archive the post based on some other settings like the uh category or skip or add specific post with the id of the post or something different i don't have any feature maybe in the future we'll get features like that so update that let's go back and we need to go into the menu and add the news category inside so project settings let's go for the news category and i added that no i didn't add that let's click here that says add and put that on top of the contact page here save changes and now i can go refresh the page here and now i can go into the news and see how it looks this is the news page and i can see now that i haven't set here any expert text okay it doesn't matter and if i click here the read more i can see there it more also i should put that in the middle and this is the text so let's go back and let's put that in the middle first blog categories let's edit that and i'm going to put the text in the middle so let's put that in the middle let's update that and now if i go and refresh this will go in the middle of course it should have a black text and not gray and okay we're good to go now let's go first here let's go into the dashboard and here we're going into the test here and i'm going to publish that and here we have the custom domain so you can select choose and then you can go and select your domain that you are going to have so for me maybe it will be like test dot stratos tutorials dot com and submit that and after that as you can see it says that you should create a scene name with the stratos.brizy.site and that will have the host of test.stratostorias.com that means basically that it will redirect the test.tutorials.com to the stratos test.bridge.site this should be added in your dns records and if you not know how to do those you should ask the website that you bought your domain name that was all guys hope you enjoyed the video please give me a thumbs up and i will see you all in the next one bye

Channel: Stratos Tutorials

Views: 711

Keywords: Brizy cloud tutorial, Brizy cloud step by step tutorial, Create a full website with Brizy Cloud, Brizy cloud review, How to created pages with Brizy Cloud, how brizy cloud works

Id: Uq36t0wDT7w

Length: 81min 21sec (4881 seconds)

Published: Fri Sep 24 2021