Create a Full Website Step by Step for Free! Kadence Theme and Gutenberg Tutorial

in this video we're going to create a website using gutenberg and cadence theme hi my name is stratos and i'm constantly producing video tutorials about wordpress please subscribe to my channel for more videos like this in case you are wondering why you are we are using good work to create this website it's because it's a simple website it's for a local business obviously it's not a real business it says logistics right here but it's something that you may watch you can follow it's a step-by-step tutorial and you can create your own website using gutenberg and cadence theme the results for the speed will be amazing and we will see it and this is the the page that we're going to build this is the homepage we have an about us we have a services page we have buttons we have testimonials and we have a form after that we have the footer with privacy policy cookies and facebook and twitter and everything else this is the home the header and if we go to about us this is the about us page with some text we have the services page with the services that we offer we have the news with the news articles we have the contact us page and some contact information and the google map as you can see here if we go to the home page and we click here the click the button here it will go straight to the bottom which is the send up send us a message and if we go to the services and we click a service we will go into the services page in this service that we have clicked and let's see the numbers that we're going to get this is the mobile so we go we're getting 94 and for the desktop 99 and for the gt metrics you can see that we have 0.7 uh loaded time with 312 kilobytes and 10 requests so these numbers are because i'm using the gutenberg and it's the fastest out there usually i'm using oxygen to build something but since this is a basic uh local business website and i don't need to create too much stuff uh you can follow along it's everything is free except of course of course for the hosting and the domain name which you have to pay in everything that you can choose to build a website no matter what you choose you have to to put some money on it but after than that everything else is free i'm using a free theme i'm using free plugins and i have created something like that so you can follow along and let's start creating our website we're going to start by setting things up in wordpress and for those that don't know how we call this uh view is this is the back end this is what you see when you're logged in and the front end is what the visitors can see when they visit the website so with the back end you can make changes you can install other themes other plugins and make the necessary changes to update the website so we're going to start by making some adjustments and let's go first to the post and all post this is our blog and we're going to trust the hello world and then inside the trust we're going to empty the trust this is tidying up then we're going into the pages and we're going to do the same thing we have two pages let's select both move to truss apply and then in into the truss and hit empty truss then inside comments if you have any comments here you can just delete that and then let's go to appearances themes inside here we see that we have three themes the themes that you have depends on the wordpress version that you have installed in the 5.6 that we are at this moment we have the 2021 as the default and we have also the 2020 and 2019 i'm going to click inside 2019 and i'm going to delete that and then i'm going also to 2020 and i'm going to delete that let's go into the plugins we are going to leave the theme installation for later on let's delete those plugins that we have inside here again you may have other plugins because you have installed wordpress inside of a hosting company and the host company may have also added some of the role of their own plugins let's go into settings and then general and here we're going to use a site title this is the name of the company of the website that you are building and the name in here we are logistics then we have the tag line tagline and you should set something that most certainly suits your business so here we're going for a fast and easy service something like that then we have the wordpress and site address url then we have our email and then we have membership and the new user default role this means that if someone wants to register he will be registered as subscribers and also this should be checked only if you have a website and you are going to need people to register it's it is the forum is it some kind of essop is it something else that will uh have your visitors register inside there if not you will leave it as it is then we're going for site language and this is english and time zone set it to your time zone it's better to use a city that it's nearby you or if you can in with a with the same time zone because if you have a time zone that changes the hour for uh winter and summer you may also need to go and change and change the time zone so it's better to have a city instead of a utc or something then we have the date format and you can set those as you wish and then you will have the week starts on and it's set on monday i'm going to save changes before going into the next one which will be the reading inside here we want to show 20 blog posts it's better and 20 items in the feed although the feed is not something that is used commonly and then we're going to select summary here save changes and then we're going into the permalinks and here we're going to click the post name to be uh the default one post name as you can see here then click save changes and next we're going to set the home page to be the default one so whenever someone visits our website he will go straight to the homepage but to do that we first need to create a page and call it homepage so we're going into pages add new i'm going to open that in a new tab and the name will be home you can name it of course however you want for the home page i'm going to hit publish twice and then i'm going back to the settings and then into discussion here i'm going to deselect all the three first boxes and i'm going to hit save changes and then inside the reading we're going to select a static page so your home page displays a static page and this is the homepage named home after that hit save changes and now we can start creating our design let's go now to start adding our pages then we'll add our menu and then we're going to go into the customizer and start creating how the website will look so let's go first to the pages i'm going to add new pages and i'm going to open that site in some tabs so let's go for a page name contact i'm going to publish that and publish and then just close it i'm just creating the name pages i'm not doing anything else after that we need an about us page i'm going to publish that also and here i need service 1 publish i need a service to publish and i need a page named services publish okay let's go to the pages and we're going to see that we have now the home page contact service 1 service 2 service services and about us page if you want to create more you can create more pages with the same exact method and let's go to appearances and then menus here we're going to type a menu name usually i called the main menu as main and let's create the menu i'm going to hit to display location to be in primary and i'm going to save changes as well and then i'm going to view all for the pages so i'm going to select everything by clicking here that says select all and then add to menu so here we're going to create our menu and select how we want it to display the order so the about will be the second after the home then we have the services so i'm clicking and dragging dropping it here then we have the service one that is going to be a sub page of the services so i'm going to drop it like this and then we have the service 2. so when someone hovers over the services he will see service 1 and service 2. and then we have the contact page i'm going to save the menu and in case you wanted another page instead of the services because this is a page so someone clicks services in the menu he will go straight up to the services page but in some cases you don't need a services page you just need the sub menu items in this case you must create a custom link and here you have to go for the url and put a pound sign which means that it's not going to be accessible you need just something to have for the menu and here you can create a page that is called services so if i go and select something like that and add the services service one and service to added ad there the custom link this is not accessible this is a service page so i'm going to rename it as services page and this will be accessible to everyone we're going to see that next after we're going to create our menu but let's go and start and see it right now so let's go into the front end and to go into the front end we can hover over the name of the website and click visit site i do that also by holding the control button in my windows and will open up in the new tab so as you can see here we have the services and once someone hovers over to the services he will see service 1 and service 2. also this is something that is made from our theme and when i hover over here you will see that the plus changes to a minus now this services is not something that is accessible if you can hear i'm clicking the mouse but i'm not going anywhere and this services page if i click it i will go straight to the services page so the difference between those two is when you create a page that has a services and there are a little bit of words inside you don't have too much content to create you can create the services page and add those services inside there so you have service one service to service three but if you want to create a a separate page for every service so you have the service one to a single page another page for the service to another page for the service three that you offer and you have enough content for each service to create the whole page then you can create something like that so you don't have also the services page you just have the pages inside so if someone wants to read about a service he can create straight he can go straight to the page that you're having so this is how you can create something like that and of course i'm go i'm going to delete that so i i will not have two pages here and i'm going to delete this one so remove that after that i'm going here that says services i'm going to delete the page and also i'm going to make it like this so now when i refresh i will have the service here and under the services i have service 1 and service 2. okay let's close that and after the menu is created we can start creating our website using our customizer now first before we enter the customizer usually i go into the home page and i add a picture i add some content just to know what i'm going to change in the customizer i suggest if you're new to wordpress if you you are new to a theme you should have something into the page so you know if you click something what is changing you will see what i mean next so let's go to the old pages and here we're going into the homepage that says here home as you can see i'm going to edit that so we're going to click edit and here i'm going to click start writing something in the plus icon i'm going to select an image and here i'm going for the media library that says here here in the media library you will see if you have selected media library here are all the images that you have inside your website of course it's empty and in the upload files i can upload all the files that i want i'm going to upload the files this time and i'm going to select all the images so i have all the images available and let's see the images before we continue so if i click somewhere you will see that my image is 770 kilobytes it's way too small and this is how i usually create and edit my images i don't want any mods to be over 200 or 250 kilobytes or the images should be resized and should be less than 205 kilobytes if you can and as you can see let's go in here and let's go to details here you will see that the dimension is 1600 by 932 i usually see only the width which is 160 1600 which is very good for a hero section we'll see what is a hero section but uh having an image that is around 1 600 will look good in our website even if we add the image to go across the whole website across the whole page so we're going here and we're adding this page and let's click select or let's click this page and let's click select now this image is added let's see here we have full width and i'm going to select that and it going from the one into the other i'm going to update and then let's go into back to the pages here i'm going into appearance i'm going into themes and here i'm going to install a new theme and here i'm going to search for cadence this is the theme that we are going to use it's a free theme it's a quick theme it has many many things to do many settings you can create it and edit how you want and it's a very good theme it's a very nice theme so after we have installed our theme let's go into the customizer to access the customizer we can go into appearances and then customize and i'm going to click that to open in a new tab so as you can see this is the name of the website this is the menu and here is the main content of the home page so let's go to general first and in shoot into the layout here it says content max width it's 1290 i'm going to change that to 1200 now in case you're wondering what is the most common width there is no answer here usually i tend to select someone some some number around 1200 now why is this if you choose uh something like that then when a visitor comes to your website and in most cases the most common laptops have a screen that has a width of 1366 pixels this is the width that most 15 inches laptop have so um the most visitors that you have will have access will access your website through a laptop of the screen and they will see uh the website that has 1200 pixels width this is the width from the start of the logo until the end of the menu and they can see also some space here and here this is the extra space until we reach the 1366 for them so they will always have some space here and this is is not going to be uh to here so it will not be stretched until the website is uh until the end of the page so it's uh uh something uh good to see it's a good layout so i always tend to use something around 1200 something like that just to leave enough space from here and here so after that you can check everything else but you don't need to change anything at this moment of course everything is self-explanatory so you can uh read some of those and if you want to change something by all means go ahead but you don't need to do anything right now let's go back and let's go to the sidebar this is the width of the sidebar and i'm going for 25 pixel 25 and the widget spacing i will leave it as it is let's go back and let's go into colors and this is the global palette that we have now this palette should be chosen by you depending on the colors that you want in your website of course uh you must not choose too many colors not over three colors because then you will create something that's not too great do not add the colors of the rainbow here just add two or three colors maximum i don't now when i say three colors and you can see the palette here uh these are the two colors that we're mostly concerned of this is the accent and this is the accent alternative i said those in reverse so this is the action this is the action antenna and then we have the black and then we have another shade of gray and then as you can see we have some other colors but basically these are all the colors that you have for the background they're not different colors it's just a different shade of white and a different shade of black but these two colors are the most common ones now this should be used accordingly to your logo so if i open here my website and see the photos as you can see this is the logo and this has a blue color here let's wait for the web for the image to open and as you can see this blue color here is my main color this is what i'm going to use for my buttons for my links and for other things this is the accent color for me so let's go back and as you can see i'm going to leave that as it is but if you want to change something you can click here and you can choose what you want to put here so you can go for a little bit dark and blue and leave it here as this after that we have the backgrounds and this is the side background this is for the whole website so you just put it one one time and it will go across the whole website then we have the content background we will leave this as it is then we have the title above content and everything else we're going to leave it as it is this is the links color again this is for the global style and if we want something we can change it in the settings that we are we're going to see where we're going to change anything and if we want to let's go back to the colors let's go into buttons and these are the default settings for the buttons as you can see and when you see two colors if i hover over to one this is the initial color so this is the color of the button and here is the hover color so when uh my mouse hover overs of a button he will get this color instead of this one this is for the visitor to know that he can interact with the content so i need to have something else for the hover color after that we have everything else for the buttons and i'm going not going to change that at the moment and then we have the typography this also is something that you should choose for your website it depends on the niche on the layout and on the content of the website of course for me i'm going to use the base font which is the content ubuntu and this is a google font so let's go for ubuntu okay and then we have the style where we can select something other than the regular this is the font if you want bold we can ha go for 500 or 700 but i would recommend for the main content to go regular and then we have the size which is 17 pixels this is line height 1.6 this is letter spacing one and here are the settings for the tablet and here are the settings for the mobile so as you can see you can change anything that you want i'm leaving as it is and here is the heading font family and i'm going to choose here this is the preview and i'm going to choose here the roboto so this is the roboto and now i'm not going to change anything from the h1 and down i will leave it as it is but of course if you want you can change anything that you like after that let's go back to the typography let's go back and we have the scroll to top icon this is the icon that we can see sometimes in websites here and if i enable here and i scroll down a little bit i will see it right here but i usually don't use an icon here if i want to use something here it will be something to contact uh the visit for the visitor to contact me and i don't usually like to have another icon here so we're going to disable that and let's go into the comments of course all the comments are disabled then we have the breadcrumbs which i don't need but if you have a website that is most commonly a woocommerce website this is where you may need the breadcrumbs or if you have a website that it is a news website and has many categories then you may need the breadcrumbs to help the visitor navigate but in other cases and in this case which is a simple website for a local business you don't need any of that let's go back and let's go to the social link links and this is the facebook so i'm going to put the facebook link this is the twitter and also we have something for the linkedin where is the linkedin linkedin so because it's a website business website we're going to have linkedin facebook and twitter of course here it should expect your url not a pound symbol but i'm just using a bytes a pound symbol to have something in place let's go back and then we have the performance and here you can this is enable scroll to id so it if you click somewhere and you have this uh feature it will scroll down to the selected id we will see that later on and here we can load google phones locally and here we can enable the css preload i'm not going to do those things and i am going to install later on a cast plugin to enhance the performance and this was all with general let's go to the header now the header is this area that you can see here with logo in the menu and it is represented here in the bottom of the page as you can see we have the top row we have the main row and we have the bottom row the main row is the one with the logo and the menu and after that we can have something from the for the top row and usually we don't uh put anything in the bottom row except sometimes you may need to add a second menu or do something else with the header in most cases you will find that the logo is on the left and the navigation is on the right after that you may need something to put up here like the social icons and like a contact number or something so let's go first for the logo i'm going to click here that is the gear icon and this will open up and as you can see it says the site identity and here it says logo so i'm going to select the logo and i'm going to select this one which is the logo as you can see the title is named logo and i will copy that and put that as the alternate text this is something that google requires they require an alternative text so let's get the logo right here after that you can see how it wants to crop my uh logo and i'm going to hit skip cropping because i need the logo to be full and then we have the logo max width and the logo here is way too big and i'm going to put that 120 pixels i like how it is right now and then uh hit here i'm going to select the logo layout to be only the logo so the title will be removed of course this logo doesn't represent the company that i'm trying to build but this is the logo that i have after that we have the title site title which is logistics and the tagline that we have already set then i'm going to click the site icon and inside here it says the site icon this is the favicon and this is the name that will replace the w right here for the icon of the tab so i'm going to select the same icon and now i need to crop this because it's usually 512 by 512 so i'm going to crop that to this image and as you can see there it goes this is how it looks in my tab i'm going to publish that because i do like to publish often and i'm going back once and i'm going back to the header and then i'm going to select logo again so everything was set here so i have a different tab also i have the design here in design you can add some padding as you can see and if you can see here the logo touches the bottom of the row so i want to give it a little bit of space so i'm going here to put padding top to have two pixels i don't want too much space and here is the bottom which i need to do pixels again now we're going to say what is padding later on but here where you see four boxes this is the top this is the right this is the bottom and this is the left so you think it as a clockwise boxes so we have top right bottom and left and this is the lock icon and if you click here to lock then you can put a number here and you it will grab for all those boxes i want that unlocked because i have two zero two zero so now you can see that i have some space here it is not attaching the bottom of the row and this is how i want it let's go now to the navigation and i'm going to click the gear icon from for the primary navigation and this is where i'm going to change what i want in the menu so as you can see i have the starter navigation and i can also have full height so the menu items are full height underline and full height underline you will see the differences once i click somewhere else and here is when it hovers here you will see only that the color changes to something like blue and when i select the full height let's go and see it doesn't change anything because i don't have a navigation background but when i change that to something like that you will see now that once i hover i have the background that i have set so this is the full height this is the underline and i have an underline with the background and this is a full height underground so we have the color of the background to be full height and not just there not just behind the words so i will leave it as standard because i don't like the background and i'm going to clear that by hitting here in the clear icon and here they are the items top and bottom padding i'm going to leave it as it is this is the navigation colors and for navigation i'm going to go for a black this is the color of the menu and when i hover this is the hover i'm going to use this which is a little bit darker blue and here is the active one so the page that is selected will be also colored and it will be also the accent color so this will be also the blue and as you can see this is how it looks right now so when i hover also to the services i have some black box with my sub items inside here and i'm going to change that also and let's see what we're going to do next as you can see we have navigation font this is the font that we have in the menu and it's scrubbing the font that we set in the content so it has ubuntu for me and it has 17 pixels and if i click here i can see the preview and here i can change the font i can change the style and i can change the size now i'm going to put here 18 just have a little bit bigger because it's a little a small menu i don't have too much content inside here so i can go 18 and it's okay then let's go to the drop down options and i'm going to click drop down options and here are the drop down options we have drop down with and drop down items vertical spacing so it's the spacing between those two and of course the width of the box and as you can see we have this width 200 pixels then we have the none as the reveal and i can do a fade down and when i hover over here you will see that now fades down it's a little bit better so i can leave it as it is and now let's go to the design here i can select the drop down colors and then i can select the drop down background so for background i'm going to go for a white and let's see how it looks and as you can see we have not white percent but let's go for white now we have white and i when i hover now i can see uh the white but of course i cannot see the phones because the phones are also white so let's go to the drop-down colors and let's call this to be black and now when i hover over i can see the service 1 and service 2. then i want the hover over background to be also white and the active to be also white so it will not change every time i hover over something and the hover over for the links should be also blue this is the color and here the blue for the active so when i hover now i have a blue this is better then we have the item divider which is the line between here and then we have the drop down font so from 12 pixels which is way too low i'm going for 15 and when i hover now i have a little bit bigger of text let's go for 17 since 16 let's uh c16 since all the others i i are 18 i know that 16 is great and as you can see this is how it looks right now i'm satisfied with that and we have the drop down shadow which is the shadow of the box around here and it's a nice shadow i need that to be there let's go back and here that we have the general again let's go into the navigation again and here in the design we have the padding and this will control also how down this will go this box so if you want to put a little bit down you can change this padding here and it will go a little bit off down there so after that we're going to add here the social icons so let's go and click the plus icon and here i'm going to select the social as you can see the social are added there so i'm going to click into the gear icon of the social and this will change to the social icons let's click into the facebook and here we will see that we have this icon we can change it if we want and we can select an image i'm not going to and the same goes for twitter and instagram of course instagram i'm going to remove that and i'm going to add a social icon and this will be the linkedin you cannot add here the url the url is set it and the previous heading so you if you want to change that you have to go there so now that we have this social icons as you can see we can show the icon label which is the name that is inside here as you can see the facebook i don't want to show the label and this is the item spacing so the spacing between the icons i think it's okay with the this 0.3 em so if again we you need to change the social icons you can go here and you can change again the social icons but then you have to go back back and then header again and then click the social icons again so then we're going to design and here we're going to change if we want the style so we have field and outline and in the outline we can change the border and the background color but i'm going for a field it's i think it's better the icon size which is a 1em and i like that use brown colors if you want you can change that then you will see that we have the brown colors so it will be a little bit too a little bit obvious for someone to see that this is facebook but i like to have the white because i like how it looks after that you can change also the colors and you can change the background colors the border colors the border border radius which is the corners and the marking here i'm not going to change those and the only thing that i want to do is add a little bit of line down here in the bottom row because if i save that let's publish that and see how the header looks let's go to the visit site and here as you can see we have this and beneath we have the menu and i think everything is crowded around here so we're going to add the line uh this top row we're going to do it after we add the uh telephone so you will see what i mean when i say this all content is a little bit too crowded so let's go now to here and we're going also to click the plus icon and i'm going for html now i would like here to have also some social icons to add because i would like here to have the icon of the phone number of the phone the icon of the mail the icon of an address so i can add those there i have asked for cadence to add those features hopefully they will do that so we can do that sort of feature but for this time we're going to select html now here i'm going to click the gear icon and i'm going to insert as it says insert html here i'm going to put the telephone number which is two one zero five five five two two two something like that and after that we have the address uh the first we have the mail info at logistics and then we have another space and we have the address which is athens 22 something like that athens 22 so as you can see this is how it looks now you can also go and put here some semicolons some hyphens some you can put some symbols here just to separate those and here this is how it looks at this moment now if i go to the telephone number and click here this uh insert link this icon i can go and insert the link of the number so i will put here tell semicolon and then i will put the country code 0030 and then the phone number two one zero five five five two two two and i'm going to click here the enter now this means one when someone will click here it will immediately open the call up so if a visitor comes from his mobile phone and he can see the number he can click that and immediately it will open up the call up and he can click and call he hasn't he doesn't have to call to copy the the text the number and then paste it inside his call up so i think this is something that it should be done also for the email as you can see here we can do the same for the email and this will open up the mail app that it has and for the mail it recognizes that's a mail so it will automatically add the mail to semicolon and then we have the info at logistics.com so i'm going to hit apply and now as you can see those two are blue after that we're going for the design and here we have the font the font color of this and we have the link style which is underline and i will click no underline i don't want those underlined and the link colors are go for black so it doesn't look that it is something that you can click but most visitors will know that if they see something like that they can click it and just call okay if you want to have that uh i like blue you can put that like blue but i don't want to now since we we have this number i would like to leave a space just to be something easier to remember okay of course even with the space this will work fine because i haven't changed the link so you can put the dot if you want you can put a comma you can put anything that you want inside here it will not chase the fact that this will be linkable to the call app so this was with the text and if we go and publish that and see how it looks in the front end let's go here in the front end and let's see how it looks you will see that now there are a little bit to crowded inside here and i want to have a line underneath that so i'm going to click in the gear icon of the top row and here i have the border for the top row in the design we have the general settings we can change the layout to full width if we want but i don't want to i want to leave the starter and of course the minimum height and i can go into the design and i can change here the border i'm going to click here the line i'm going to click here one pixel and for the color i'm going for a black color but i'm going to use a little bit of opacity so it will not be too strong it will be just a little bit of gray let's hit publish and see how it looks in the front end and this is the line now and my only other thing that i want to change is that i want to have some space between the icons and the line as you can see it touches the line and i don't want that so let's go back let's go to the header we're going to click that here that says the social the gear we're going into the design and down here we have margin we have top right bottom and left this are named at this time instead of the other time that weren't named and i'm going to put here two pixels and for the bottom two pixels also i'm going to publish that and let's see how now it looks in the front end and now as you can see we have some space uh here so it's a little bit of space this is exactly what i want after that we're going to change the header and us assign it how we want it for the tablet so once i click here that this has the tablet icon as you can see now the menu change to the hamburger icon so when i click here we will see that we have this kind of menu now we can change the settings by clicking here that says mobile navigation by clicking the gear icon and here we have the menu where we can select the menu of course we want the same menu for the mobile so mobile select main and publish and then let's go back to the header click the mobile navigation and now this is the item's vertical spacing so the vertical spacing of the items here you can change the space between that to a little bit of less space after that let's go to the design and here we can see the colors the background item dividers and font so let's start first with the background of the whole canvas this is when we can change that by clicking the off canvas gear icon here when i click here i can change the full canvas here and not just the links or the menu here we have the layout which is full width outside panel here there's a side panel because it doesn't go straight to the page and if i select full width you can see now it goes full width i'm going to select side panel and here i'm going for the right content align i like it as it is in the left and it is vertical aligned and i go for middle because i like it better then let's go into the design and here we have the pop-up background and close toggle buttons so here i can select what i want for the background of the pop-up this is the main canvas of course and i can also go for a white if i want but i want it to be separated for other things so i'm going to put like a gray or something here like that after that we have the close toggle buttons which is this one and if i want to select another color i can do that back to the header let's go again to mobile navigation and now i can start changing my colors here so i have the white colors for the links and i have the hover color which will be this one and this is the active so it's going to for this one now as you can see you cannot clearly see it with that background so let's change to that and let's change to a little bit of something like that so this will be also the one that i'm going to use when i hover and now we have the item divider which is this line and i'm going for a little bit of white something like that and the opacity should be harder okay something like that maybe not too bright something like that okay after that we have the font and you can change of course the font and i'm going for of 16 16 pixels and i'm going to leave it as it is right now and then i'm going to select the phone and as you can see it's changing to something else but as you can see everything is looking good i don't have to change anything if you want you can change for the phone the pixels and the font uh if you want to have another color if you want to leave a little bit of less space or anything like that i don't want you so i'm happy with the result of the header let's go back to the pc screen let's close that and now we're going to exit the header and we're going for the footer the folder is down to the bottom of the page as you can see right here and here we have the same layout we have three rows we have the middle the top and the bottom row the bottom row is usually for the copyright as you can see here and i'm going to start from that so i'm going to select first the gear of the row first here and i'm going to change into the design something but as you can see here we have also standard full way full width and contained we have the columns that are separate for each row layout and you cannot change anything inside here because we only have one column so we don't have another layout and we have bottom spacing which i will go for two or zero so i don't want to have any bottom spacing after that we have the minimum height and i can go for 10 or something let's go for zero again and now let's go to the designs and here we're going for the widget content so widget content here i'm going to select color so as you can see this went red so i'm going for white i'm going white because i'm going to change that to black and i'll need that to be white link color should also be white and then we have the link style no underground i will leave it as this no underline sorry and we have then the bottom row background this should be uh not exactly i think uh black because i'm going to use black for the header i'm going for a little bit separate like black a little bit lighter black so it will be something like that then we have the column border and we have the boredom the border line if we want the top and bottom after that we have the middle row which i'm going to click and i'm going to change the middle row background to black let's go for black something like that and here i'm going to select in the plus icon and i'm going to select widget one okay once i'm in widget one i can see now that i have this color and i'm going to add the logo here so i'm going to install the widget one and i'm going here to add the logo after that here i'm going to add the social icons and some contact information and i will going to uh here at the footer menu which will be some pages for the privacy so i will have the cookies policy the privacy policy and if you want to add anything else you can add it there usually the visitor will search there for a contact information for the hours that you are working as a local business website for the if you are a woocommerce website for the shipping cost for the uh payment cost or what methods do you accept for payment and what methods do you have for shipping some information like that they will all be searched in the footer so this is a good place to add those first we're going to add with the widget as it says widget one i'm going to hit publish here and i'm going back and i'm going to appearances and widgets it's a little bit easier to do that with that because here i can click here that sees the gear icon i can add the widget but i don't have every widget available in wordpress and if i add here the image i'm not going to be able to change the size of the image easily so i'm going to delete that and i'm going here into the widget and inside here into the widgets i'm going for footer one here's the foot one and let's refresh that and now into the footer one i'm going to add here the uh text this is the one that i want the text so i'm going into footer one and i'm going to add that widget and now i'm going to add the media and i'm going to select the logo i'm going to insert that let's hit publish let's hit save sorry there's no publish here and here i'm going to refresh the page once i refresh i will see that i have the text widget inside here and then i can go and change the size easily so as you can see here i'm going to click the pencil icon and it will open automatically the widget and then i can go and click and let's scroll down as you can see the image is way too long the way too big and i'm going to click the image and i'm going to take this corner and i'm going to reduce the size once i do that i will wait a little bit longer and it will reduce the size here so i will go for a little bit smaller something like that i don't want to have a very big logo icon inside here in the footer so i'm going to publish that and of course you have a content alignment as you can see for the vertical align and you also have content align vertical here i'm going to add also the social icons so we're going for social and here we have the social icons which i want to be aligned elsewhere so i'm going to click here the icon the pencil icon again we have the facebook twitter instagram i'm going to change that remove item to the linkedin linkedin and i'm going also to change the icons i want this one for the facebook i want this for the twitter and i went this for the linkedin after that content alignment i'm going for the middle and for the middle in the vertical position and as you can see it went straight into the middle of the box and then let's go to the design and here we have the social style field we have the background colors and here if i select the outline i will have it something like this i will leave it like this because i like it better in the footer and since i have a dark background and inside colors i'm going to select here the white and it will be like this now i can also select to hover over and have this light blue which i like and now i can also change the icon size to little to be a little bit of bigger something like 1.2 something like that okay so now we want just the menu for here and we don't have the pages to do that so we're going to fix that let's go into the pages let's go to add new page and we're going to add the privacy policy i'm going to hit publish and again publish and then go back straight to my wordpress and then add a new page and i'm going to add a new page which will be the cookies policy cookies policy i'm going to hit publish twice again and then i'm going back to the appearances menus and here i'm going to select to add another menu by clicking here that says create a new menu here i'm going to add footer i'm going to create the menu and i'm going to select the folder that says here and save again and then i'm going to select view all for the pages just to be sure that i'm seeing all the pages and i'm going to select you cookie policy and privacy policy i'm going to add those to the menu and i'm going to first to add the privacy policy and then cookies policy save menu again and then let's go back to the customizer and let's refresh the page leave the page here i haven't made any changes that i haven't saved so let's see the footer and here i need to have the footer navigation so i'm going to click that and if i scroll down i can see now the footer navigation i'm going to click the gear icon once again and here i'm going to select the menu which is of course the footer it's selected already i don't have to select again let's go back to the footer okay select the footer navigation and now the content align can be into the middle and into the vertical alignment then let's go to design and here i can change the spacing i can change the items top and bottom padding navigation colors which can be white and when i hover i will need to have this light blue like this and the background will leave it as it is after that i'm also going for the tablet view and i can see now how it looks for the tablet view i don't like that this is where goes into the left so let's go here and into the widget sorry let's go back to the pc let's go and check the general settings into this widget we have the content alignment and now i can go and click here to have it in the middle okay it doesn't support this at this moment but it will be fixed because it's a bug at this moment but you can set now this to be in the middle also when i hover over to the mobile menu i can see that this also should be in the middle again and this doesn't happen now a way to get past that is to go into the text inside here and click in the text and click that to be aligned in the center if you do that and publish it will be in the center here so now here in the comment content alignment i can go for left so everything will be in the left but of course i have some content here some white space left and right and now if i select the uh mobile version and of course a double version everything is looking great so that's all with the footer let's go to continue and let's go to the next one which is the base layout here i can select to hide the title because i don't want the title to be around here i will fix it as i want later on and also as you can see this is how the page is looking i'm going for a full width and this is why i told you that you would need something to have a like a content just to know how it looks and then i'm going for the unboxed so i will not get any space anywhere this is why what i need to do for the pages and this is how i can make it look good after that you will not show of course the featured image because who wants a featured image for a page and i don't want also the comments let's go back and this is the blog post that i will fix later on search results i don't have any search results at this moment but if you want you can change the settings here they are pretty easy to do as you can see in content above for the title then we have the search title aligned so usually we go for the middle we have the archive layout full width it's better i think then we have the sidebar sidebar one if you have select a sidebar here in the layout and then we have the boxed an unboxed version with the columns and everything else here you can change anything that you want site identity we have already touched that menu we have already touched that widget we did that from the other back end and the home page settings already have been assigned so we have finished at this moment from the customizer and we can start creating our pages let's save first and now i can close that and i can go and start editing my page so first we're going to add a new plugin and we're going to install the cadence block this is what we're going to use to start building our pages and we're going to install that and let's activate that immediately will be forward into the settings of the cadence block and you can see what we have in uh in our library so we have the row layout form advanced gallery spacer icon advanced button advanced heading tabs info boxes testimonials icon links list and accordion this is what we have except for of course the cadence blocks so this is the extra features the extra elements let's go into the pages all pages and we're going to start with the homepage of course and let's edit that okay now i have something for the background i'm going to delete that because i created that before i install the cadence and the block the cadence block so i'm going to click here in the three dots and i'm going to remove the block and i'm going to start from a blank page let's click the plus icon and let's click here the row layout this blue icon is from the cadence blocks items block elements and once i click here i can select how many columns i want i going for the full row one row and here i am as you can see here in the breadcrumbs inside the columns settings so whenever you add a row you immediately add also a column and here in the column which is one for this layout you can add anything that you want here i'm going to select first the row layout by clicking the row here or by going into here and click in the row layout and now i can select the background settings and here i can select the image that i want for the hero section so i'm going to use that one and here i will name the image as the website logistics i'm going to copy the title and i'm going to put that as an alternative text and i'm going to select that now i have this icon here and this is the focal point and this is what it's uh what the page will always uh points to what the image will always shows so even if the size of the page will decrease so if a visitor comes for a mobile phone and see the image that is not too big this is what he will always see this paper if i go to this to the end i can see the hand if i go here i can see the face of him i can see the computer so it's what you choose to as a focal point i will leave it in the center and then i'm going to add something let's go for the center so 50 50 50 and 50. and then we're going to put some margin and powder underneath so it will be better uh we're going to see everything here and let's see what changes we have to do here so first of all we have two separate tabs we have a page and a blog the page is the settings for the whole page that we're creating and this is identical to every page of course and the settings are identical and then we have the blog the blog is the exact thing that you are accessing here so this will change uh depending on what you have selected to edit so here you are the changing for the row layout as you can see here if i add here a paragraph or a heading let's go for a heading i will see that this changes this block settings changing to the settings that i have for the heading so it depends what you choose to edit and this will change the settings for the blog so let's go back to the row layout by clicking here and here we have columns how many colors we have one then we have the padding marking and we have settings for the padding and for settings for the barging now this is a little bit difficult to understand in the beginning but you have to remember the padding is the space inside an element and the margin is the space outside the element that you're working with so if i'm working with a row the padding is the space inside the row from this line that starts the background until the content inside which is for this time the heading and the margin is the space from the top of the background to the next element that is outside here we don't have any other elements of course but if we had it with this space here so we can change what we want here then we have the background settings where we chose the background and of course we can select cover contain auto scroll fixed and everything else and we have the background overall settings which can be uh background overlay settings which can set the color for overlay we're going to do that to distinguish the heading from the background because we want that to be shown then we have the dividers dividers are some shapes for the top and the bottom it will display something like that for the bottom and it will maybe it will do something nicer maybe it won't it depends what you choose to do but don't be afraic and add everything that you can see here then let's go again to the row because i have clicked elsewhere we have the text color settings and this is for the whole row and this is something that you can just put here so you don't have to go and change everything inside here for every single text that you have so this is like a global for the whole section but if you add two or three texts here you can change them independently then we have the structure sentence and this is something that is really important and we have the minimum height which we have for the structure so we can change that to have a little bit bigger so we can have something like that we have the content max with inherit from theme which i think it's the most important thing to do and then we have the content max width we can set it independently then we have the inner color height 100 percent and set control this is something that we can distinguish if we have two elements one over the other which will go on the top and then we have the visibility setting so we can hide something from the tablet or mobile view and we can also hide it from the desktop if we want and then also hide from logged in users and hide from logged out users so these are the settings for the layout row i did that i chose to say one by one because i think those are the most important things to know everything else you can search those and of course they're not the uh easiest thing to find but everything else we will bring that along the way now here that we have the gear icon we have also here the page settings which uh you can change independently from the global style that we have in the customizer so if you have a page that you want to change it the style differently from the other website you can do it manually here and then we have here the cadence block settings and here we have the color palette which we have set in the customizer and here are the block defaults here i'm going to change the block default for the row layout and this is something that i would suggest you to do to go inside here go into the padding and margin and select that should be somehow over 60 and under 80. play between that i'm going 475 and here i'm going also for 75 because i'm used to oxygen which has 75 as padding and i think it's a good number also i will give some padding 25 and 25 here because i do want to have some padding from for the mobile view so i need to have 25 here and i think if i need to remove that i can do that separately so these are the settings that i want to have let's save that and now let's start building now i have already at the background so i'm going into the row layout again here and here and i'm going here into the gear icon and i'm going for the structure settings and i'm going to select the content max width to inherit from theme this is something that i also need to do globally so let's do that also let's go to the row row layout and let's show the structure settings and let's content max width from the theme so it will go and grab the content and put it 100 to 1200 pixels how i have said it let's go here and now we're structure settings and let's go and select the minimum height for the hero section to be 600 so it will stretch up and go something like that let's go 700 this is called hero section because it's the first thing that you see in the page and now i'm going to click here that has the vertical align mode and everything will go into the middle of the page as you can see here not the page the section this is called the section so after that i'm going to add the name of the website here the name of the company which is logistics logistics and i'm going to change that to h1 i'm going to change also the color so you can also play with the settings around here some settings are both here and here are going to text align that in the middle i'm going for the heading color to be white and where you can use the global icons because in that way you can change everything from the customizer and will say it's anywhere so heading colors is white the font size i'm going for 60 so i need to have it big and as you can see it hasn't it doesn't have too much contrast for the words to be displayed easily so you cannot read the logistics easily because the paper beneath that is white so we need to change that and we're going to do that by adding the overlay color i'm going back to our row layout and i'm going to change the background overlay settings i'm going to change the opacity later on but just first choose a color let's go for black this one i know i think this one is the one that i want the the dark uh black okay then i'm going here to change it to 50 50 so i this is something that uh i do really easily as you can see the logistic is something that you can read easily now let's go to the logistics and now we have the line height and i'm going to leave that as one so it will not have too much space underneath that i will put the space that i want myself and then you can change the advanced typography setting which is the letter spacing and i will put that too so it will go and put some space between those words let's go for three and i think this is better because it's the heading it's the main title okay and then we can have also highlights settings we have another settings that you can play with if you want i'm not going to change anything else right now let's go and hit the plus icon underneath that and i'm going to add a paragraph and the paragraph is the tagline for me here but you can add something a text that will draw the visitors to the attention and to stay and look the website so what you want to type here is something that they grab the attention of the visitor easy fast and easy fast and fast and easy services for me it's something like that i'm going also to change the default size to a custom of 25 i'm going for the color settings and i'm going to choose this white i'm going also for the middle alignment text align the center and as you can see i need some space between here so i'm going also to add some divider this is the space divider this is where you need to add space and everywhere you need to add that you can change here the settings and i'm going to disable the divider i don't want the line i just want the space so i'm going to delete that and the height is 60 i'm going for 20. now i'm going to click here the icon that is on top so it will go up and i have some space between the logistic and the font the fast and easy settings as you can see here underneath that i'm going for a button so let's go and add a button let's go to add a button and i'm going to choose the advanced button which is from the cadence block and that's why it's in blue color and this will give me much more uh control over the styling instead of the button that gutenberg has so here we have the button i can type whatever we want so this will be contact us something like that you can also add another button next to that this style maybe you have seen in many websites it's a trend right now to use two buttons and this is depending on this depending is this sorry depends on what you want to promote so this is a logistic niche logistic website so i want to promote to contact us i don't have any other thing to show them but i also can add the button that says services and he can go straight to the services or something like that i'm not just going to contact us at the moment and i'm going to go for text color of white okay and then i can select the background color to be transparent as it is right now the transparency is here this here this setting so we can go straight down to the left so we have 100 transparency something like that and then i can select also let's choose the button again the border color to be also white so i will have a button like this which i like when i hover over you can see that it's changing to a little bit of dark background so i'm going to choose the hover and i'm going for the background color to select yes a little bit of dark but not so opacity i'm going for something like that so once i hover i will have a little bit darker but let's go for a little bit darker with 50 opacity something like that now as you can see the border is removed when i hover so i will need to have also the border so it will not look too weird now i only get this which i think it's good it's okay if you need to add another button i would suggest to go with the accent color and the most important button should be the accent color the blue one for my case and the next one should be something like that so i'm going to update that because i like to say frequently and let's go and see how it looks in the front end by going into visit site and now it looks like this so i need also to put some space between those two elements the fast and easy service and the button because you can see the space here and i need to put the same space here so i'm going here that have the uh separator i'm going to click in the three dots and i'm going to duplicate that by clicking here duplicate and then i'm going to click again to the separator i'm going to click the move down so it will go down here let's update that and see how it looks in the front end and as you can see it's looking okay if you want to remove some space here you can do that by just going into the divider and selecting if you want 10 pixels here but you should also do that here 10 pixels here this is uh depending on the layout and how you want that to be displayed and you can go for something like that i think this is a good layout so after that we need to go here and we need going to add a new row think the row as sections if you have used another page builder before and if you haven't think uh the section as boxes with the content with the same meaning so if you want to write about the services you're going to write the service about the services here and underneath that you have another thing that says uh who we are or about us or about the team this is another section that we're going with another theme with another sorry not theme with another with different content so now that we have out added the row layout we can add here two columns and here let's select the row layout row layout and add two columns here and as you can see we have 50 50. once we are here we can change that to wherever we want by scrolling to uh here or here you can change also the layout from here as you want but you can also scroll and go whatever you want i think this step is say five percent you cannot go 38 or 39 you can go 35 and then 40 yeah this is the step that it has so i'm going for 50 50 and maybe i will change that a little bit differently and then i'm going to click here in the uh plus icon and i'm going to add an image add an image and there is something that i forgot here in the layout so i'm going also to go back to the uh row layout here into the background settings and i forgot to tell you about these background images so this should always be covered you don't want to contain because it will shrink the page and you'll screen much to the full size of the image and it will show the full size but i wanted to cover the whole area and here we have the scroll fixed and parallax if we select fixed it will scroll as you can see it will stay the image will stay fixed and the content will go fly above that it's a little bit laggy here but in the con in the front view in the front end we will see it uh without any problem as you can see here this is how it looks if you select fixed if you want some kind of something like that you can select the fixed it's a very nice thing to do and also the parallax it's a little bit different it will do also a little moving of the image so it will not stay fixed it will not uh 100 percent move with the uh whole section but it will go up but not as fast so you will see that this button is in the in his thumb when i scroll up it will go up but also the image will go up as well it will not stay the same but it has a different speed so this is the parallax effect let's go into scroll and then we have also the force background image in line we don't need that so let's save that and go into the image that was the settings that i wanted you to know let's go into the media library and we're going to select another image something like that and select that but i didn't change the alternate image so let's replace that and open media library and i always need to change the alternate text so we're here we're going to put about us this is the section that i'm going to edit about us so i'm going to save that and now i have the alternate i'll turn of the text also here here you can see that i have the alternate text and you can also change it from here now here i'm going also to click the plus icon and i'm going to select the advanced heading and the heading should be h2 or h3 h1 we use only once and this is the title of the page and then we use h2h3 and the other headings that we have and this is about us about us and this will be a small text about us so why the visitor will choose us uh instead of another website another client another logistic company that's what you must think and add the text accordingly so this is the about us i'm going to leave it as it is right now i'm going also to add the separator the space divider sorry not the separator the alignment should be left the height is 60 and i'm going to remove that and go for 20 something like that and then i'm going to have the solid okay divider color i'm going for blue something like that divider height i'm going for 3 pixels and divider width i'm going to something like 20 maybe 10 i think 10 is better okay and let's go again to the heading heading and i'm going for the line height to be one so whenever you add one as a line height it will remove any extra space that has underneath the title let's go and update that and see how it looks in the front end remember that with gutenberg you always need to see how it looks in the front end because in the editor itself you cannot always experience the result you must see how it looks in the front end so this is how it looks i need to go and put that in the middle so i need to go into the row layout and select here the vertical align middle and now i'm going to add also a paragraph here in the paragraph i'm going to add some text and this will be a blind text so let's go for lorem ipsum lorem ipsum is something that we use when you we create pages for clients and we don't have text so we do put something as a text but it doesn't make any sense something like that so let's paste that in here and let's put some paragraphs inside here so we need something like that and something like that of course in the about us page it shouldn't be too much this is way too big so i would recommend to go for something like that not because it look it looks better i could also go and change the width of the image and go for 60 here and 40 here but you need to add a little bit of text here uh just two sentences to capture the client the visitor attention and stay in your page you don't need to put anything bigger than that there is an about plus page and then you can write everything that you want there you can write what what is your needs what do you offer for your clients what's what are the main concerns how long have you have your business with what is the most i don't know common clients what they ask who you you team up with uh everything that you need to go and put in the about the space so here you don't need to go and make some crazy things uh put a little bit of text here and you're good to go let's go and refresh the page and see how it looks in the front end and this is how it looks right now now this is the 75 that we used here in us the space here but i think that the the about us should go underneath and starts with the page so i'm going to uh go and select the row layout not to be 50 50 but i'm going for something like 40 50 something like that let's update that and see how it looks okay it's a little bit better i think and here in the about us i must put some space uh here in the 70 let's go and make that now let's leave it 70 but i'm going just going to change a little bit here so i'm going into the column and i'm going to select this column and i'm going to give it a little bit of padding inside the column so padding means that the space that we have inside the column should be let's go for 5 or let's go for 10 and see how it looks let's update that and see how it looks for that column and as you can see the the text went a little bit down and i'm going uh to change uh because i don't like how it looks for the row layout and go that row layout and go for the top so the image will be on the top as well i'm going to update that and see how it looks in the front end and this is better as you can see now we have something that it's better looking so underneath that we're going to add another section this is the row layout again this is how we're going to work and here i'm going to click for one row and i'm going to add a heading advanced heading of course which will say services and i'm going that to put that in the middle and underneath that i will have the services now as you can see this has a white uh background and this has also a white background and i want that to be separated so uh the the visitor should know that this is a different section than the top one this is how you we usually do that in a website so he can understand that this is another section so i'm going to click again the roller roll layout and i'm going for background settings and i'm going to use the background color and i'm going to select this off-white so it's not exactly white but it's a little bit of gray it has a little bit of gray so it is easy to read when we have uh content inside here when we have text it has enough contrast for us to read but it's something that separates us from the top content from the other box here so underneath that i'm going to add another row another here in the plus icon another row layout and here i'm going to add three columns so this is a row this is another heading and this is another row with three columns this is how we do it and if i select here you can see that i have row layout column which is one column with a heading and then we have another row with three columns inside here so inside here i'm going to add an image this is for the services so i need an image for the services then i need a heading so this service has a name let's go for advanced heading and then we're going for the button first let's add the heading which is taxis this is the service one or taxis okay and after that i need the button so i'm going to add another thing that is the button okay now let's go for the image and let's go and media library select an image for the taxes it will be something like that for this is the taxes taxes and i will put that in the alternate text also taxes now keep in mind that this image is way too big for something like that and you should have another image which is with a width about 600 pixels something like that there's no point on using an image that has 1 600 pixels width only to use it in a box but since i don't have too many images in around here let's see i think that all of those are way too big yeah all of those are way too big so i'm going to use that uh even though it's not something that you should do after that i'm going to align the text in the center and for the button i'm going to have it to say read more read more okay now in many cases you may see that they have the services and they have the image with the text on top of the image and they have the button also you can do that as well if you want by putting the image in the background of the column and also you can you may see other services that they don't have a button and when i hover over to the image i will see that this turns into a clickable area but i would not suggest to do that because uh if you visit the website from a mobile phone you will not know where it's applicable because you cannot hover over to an area so use buttons people want to see buttons so they know where to click to go somewhere or do something and interact with your website so do not be afraid to use buttons let's go for the read more and i'm going to change the style so i'm going to use the text color white and i'm going to use the background color of dark blue and once i hover over let's click again hover over i'm going to use the background color of light blue so something like that and this is what i want now i'm going also to use the borders the sorry not the borders the radius borders radius so i'm going to use a 10 border radius to see what it is and as you can see the corners go and be a little smoother if you're going to use a border radius here you must also use it in every other button that you have so here use a board radius also with the same corner the 10 that you put here the same one would be here do not use different things in every button so it will look a little bit better and not look different for every single thing in website now let's save that and see how it looks in the front end and see what we want to change and as i can see i have too much space here but i don't have the equal space here so i have to go and fix that so first i'm going into the taxis i'm going to select that and select that i want the line height to be one remember that the heading has a line height so i need to put that one and here i'm going also to change the h1 to h4 and let's update that and see how it looks in the front end okay now it has gone a little bit closer to the image as you can see but it's closer also to the text to the button and i need some space underneath that i can do that even with two uh different ways even either by hiding the divider but i can also add some margin so i'm going to do that and let's go in the marketing settings the margin as we said is the space outside so margin bottom let's go for 10 pixels let's update that and see how it looks in the front end and it didn't change let's see why didn't change have i select the correct one yeah it's the marking setting let's go for it 20 and save that okay it doesn't want to change let's delete that and we'll put a top margin in the button it's the same thing but i'm usually adding margins in the previous one so this is how i usually work but since it doesn't work here let's go to see where is the margin container marking so we have the top of 20. let's update that and see how it looks in the front end it doesn't want to change okay no problem we're going to do that using the margin the uh sorry not the margin the divider this is another bug of the cadence block now you do may need to understand that there are some glitches there are some bugs there are different things that you may face okay no problem there space divider and here's the space device should go up here inside here we're going for disabling the line and going for something like 10. let's update that and see how it looks in the front end and now we have some space i don't want too much space so i'm going for five five let's update that i know that it's six but it doesn't matter okay i need a little bit of space a little less of space let's go for four and maybe i should also add another divider here so it will separate from the others from the image so i'm going to also to duplicate that duplicate and add that on top of the taxis let's update that and see how it looks now and i think we're doing okay let's go here and add a little bit of space too so let's go for 10 update and i think it's better okay so the next thing that i want to do is go and change that and have it a little bit to be different from the background i will go and change a little bit for the layout so i'm going to select the column so this is the column that i have selected and i'm going to change the background of the column to white so let's go and change the background color background color select white and select this white this global settings is better as you will see this is white now let's update that and see how it looks in the front end as you can see now i need some space underneath the read more button so i'm going into the column again here in the column and i'm going to select also to have a little bit of padding for the bottom so i'm going for 10 something like that let's update and see how it looks as you can see i have a little bit of space now i need a little more so let's go for 20 and i need also to have a little bit of box shadow let's so let's go back to the colors column okay and we have here the box shadow so i will enable the box auto and i will put the color to be black but i need the opacity to go 0.2 which is great and now the blur will go 5 so it will not be too strong let's update that and see how it looks in the front end and we will see immediately that it's looking great as you can see it's way better than we had before now maybe we we need to round up a little bit the corners so we're going back to the uh column and we're going for the very radius to be four update that and let's refresh so it's a little bit of round corners not too edgy i think this is looking good remember that if you are going to use a bigger number you should also use something for the buttons as well do not have corners here not have a soft corners here so i'm going to use four on the button as well since i used that here board radius 4 and i'm going to use everywhere board radius 4 so here i need also to use the border radius of four okay so this will always be for in my every single thing that i do every single thing okay now i can go into the advanced column column let's go here let's go here so we can select the column and now i can copy that if i want and i can paste it elsewhere but remember that this doesn't work every time so i need to go here and add an image and the image will be something different by that but now i can go into the column and i can click here and select to paste now it doesn't have the paste text as i can see but here i can paste the style and it will take the same style so this is where i can paste the style not in the three dots so now i can click and edit the add another image here so let's go to media library and select this one for the service or the second service okay i'm going here and i'm going to duplicate that and duplicate once more and that duplicate three times two times duplicate and duplicate the same thing for here duplicate and duplicate the same for here here duplicate and duplicate now i can go for the taxis and i can grab here that we have the six dots and i can drag it to here okay it's not very easy to change it as i can see but hopefully we can do that let's click here and let's click again to the taxis here and underneath here let's leave it here yeah it went here and i need to also add the button here this should be go up so i'm going to click that and this is the taxis and also add an image here and this should go here and this button should go here okay these taxes go up and now i have only the spaces left so i'm going to put one here and i'm going to put the other one here and here this should go here and this should go here okay now i can go again to the column i can go and select the column first select copy and then go into this select the column and select here paste tiles so it will take the same style this doesn't seem to have the same style but i'm going to do that also so select column here and paste style so hopefully it has taken the same style even though it doesn't seem to okay let's go to the media library let's go and select another image so this will be the other image so this should have services service 2 and this should say service 1 this should has the alternate text of service one and this should say service two okay let's update that and see how it looks in the front end and as i can see i don't have uh the um padding inside here as you can see even though i select that to be copied for some reason it didn't so let's go to the raila array layout sorry let's go here and click the column and here let's see if it has some margin padding underneath it doesn't so i'm going to add 20 here and i'm going also here and select the column and i'm going for the padding and i'm going to add 20. okay let's update that and see how it looks in the front end now as we can see everything is looking good these buttons we will fix it later on and we're going to continue with the next one after the services we're going to add another row layout which will be the testimonials so let's go and click the uh one row here i'm going to add a heading so let's type what they say about us about us if or you can just type they say about us or what people say or something like that let's go into the middle okay after that we have a h2 and underneath that we're going to add a testimonial so let's type testimonial and these are the testimonials now i'm going first to select the initial style that i want so i like something like that something like this isn't good enough for me and of course you can style it however you want but this is what we're going to start with so testimonial items how many we want we're going for four four testimonials how many columns we want two columns columns cup it's 30 so you can have something like that and also you can also put it instead of a grid in a carousel so you can choose to see two and then slide over which i think it's okay also so you can do whatever style you want i'm going for the slider and let's see the casual settings as you can see this is the size slide transition speed which is 400 milliseconds which is almost half a second five is half a second 500 slides to scroll i'm going for one and not two so they will not change immediately both of them so the people will not get confused uh white and dark the arrow styles as you can see here we have white and dark and the dot styles are dark i will leave those as it is container settings as you want to put the container border with which is this one this width i will leave it as it is but maybe i will put a little bit of the container board to have a little bit of more aggressive color something like that okay and then let's go again here icon settings this is the icon uh if you want to show some icons in the uh head i think this is a quota so it says basically that this is exactly what the people are saying and you can remove a little bit of not remove but change a little bit of the size and go for 20. i think this is looking good okay icon border with let's go for not the border with not the border radius i will leave it as this uh icon padding this should be something like 10 i think not 20 15. let's go for 15. so it will not be too big then we have the title settings which is the title here and we have h2 and i need for the color to be a little bit of dark color so i will go for black and this should go black hopefully then let's go and change the uh next one which is the rating settings if you want rating also you can put that and you can change the color and then go and click and set how many you want then we can go into the content settings and select the color for the content it should be another color if you want the font size and everything else is straightforward i'm not going to change many things except for the show media i don't want to show the image and also i need the name to be less as the size so i'm going for 12 for the name and i'm going for the title occupation settings to be a little bit bigger so i'm going for 17 or 18 something like that now i do that because in most cases i think that the title of someone is most more important than his name now if you have steve jobs or i don't know someone that is quite famous and has a testimonial about you then yes his name is more important but if you're going to add the c seo ceo of google i don't know his name so i want the visitor to say that he's the ceo of google not just see his name it's most important thing it's more important than the his actual name the title is more important so this is how it goes if you just have titles and not occupations then you can just put that in zero or remove the show occupation and just show the title it's your thing to select so i'm going for a stronger color so i'm going to select the black for the occupation okay something like that and maybe put also a little bit of thickness into that occupation settings maybe going for to select one way to be bold okay something like that container shadow if you want to put the shadow here or in visual settings so you can change uh the testimonials and have them separated by something and of course the rating is over here i'm not going to change anything you can change whatever you want and you can change also the title and the text inside here now since in the front end doesn't show me the content you will see that it doesn't show content and as you can see i will put everywhere the same so it will be lorem ipsum everywhere let's go here just to see how it looks in the front end okay and then for the content i will have those first two lines until here everywhere okay youtube and this is stratus maybe i went way too small i think we will see how it looks in the front then i think we went way too small here let's see update that and see how it looks in the front end yeah it's way too small so let's go and edit that we're going for the uh name settings and we're going to have it a little bit bigger font size occupation name settings okay 14 okay and after that we're going to add a form this is the last thing that we're going to add in our homepage because it's a logistic website and the most important thing for us is have the client to contact us so we need to remind them that they can contact us everywhere we can we have to contact us here we have the contact us underneath here in the bottom of the page we have the contact page here and i could add also a button inside here but i think it would be something that i'm pushing too hard but if you want to add the button inside the header you can go into the customizer and of course i think by now you may know how to do it you can click here and click here a button it will add the button here and as you can see this is the button and we can click the gear icon and we can change the style and everything else it knows that you may need to have the button on the right so it automatically goes there because in more cases you will need the button to be the last in the menu and not the first thing and let's delete that and let's go back so we're going to add this row it will be one column so i will change for the row of course the background settings to be the color of of white the same that we used here so we have something symmetric for the page and then we have inside here a heading advanced heading and here we're going to put send us a message send us a message send us a message okay let's align that in the middle and here i'm going to select contact contact form we have a contact form from the clock sorry not crocodox it's a different plugin from the cadence blocks and if you cannot find it just click browse all and you can also see everything that you have in here so we have table of contents we have advanced gallery we have a condition and somewhere here we will have our i think our content contact formation forms forms this is one forms okay now we have the form and i need to go and click here and to send that in the bottom uh this is something that i usually see in gutenberg when you click here and the icon and select the browse all then the element that you're going to add goes wherever it wants it doesn't go where you have put that yourself so let's save that and see how it's looking so far so we need we know what we need to change and as you can see this is the header section this is the about us services what uh they say about us and then send us a message now it's looking it's not bad it's looking good so we can go and change some make some changes so let's select here the name and here we can as you can see we have first the blog that it says form and here we have field type first name settings so this is a text we can also change that to whatever we want but we want the name so this is a text required if you want to be required yes i want the name to be required and you can also put here name and last name or something like that this is the field placeholder so what will be used here instead of just be blank so we need you may need to put an example here of course in the name we don't usually leave that as it is and you also can hide the label and just uh show the name inside here now if you do that keep in mind that it's not too good to do that uh because in some cases someone may click here and forgets that he's supposed to write his name down here also there are some people with disabilities that they may need to see whatever they want to write above so they can remember or there are tools that they will read the content there are many reasons that you should always show the label here even if it's not looking too good and just delete that we don't need that in the name after that we have the input default if you have something default help text if you want to help them with the hover over text the default autofill field.fill will be a name first name last name and what they want what will be the auto fill we don't have anything and column width i can go for something like 50 so it will go here then i have the email settings which is the next one and here we have the email it's required so it goes with an asterisk here so label if we want to show the label the name of course and here i can also put something like a placeholder for an example now this has a more meaning the name doesn't have much meaning to put a placeholder but this you can go for egg and put info at dot logistics.com to remind those that this is the form that you expect them to put for us the email then you can go for a column width of fifth percent again and it will go next to the other and you have something like that which is 50 50. okay message after that we have the message let's click that and we go straight to the message settings text area this is the text area we have you can also change that to something else but we don't want to is it required yes it is text area rows how many rows we have four messages so label and we don't need anything else we're going to put us uh 100 actions after submit or add the field i'm going to add another field just to see how it goes and here the field will be the acceptance accept is it required yes it is required because i want to put the gtp so so policy link yes i want to show the policy link but i don't have the policy at this time the policy page i have the police page i haven't anything inside so link text this is the text view policy and what it says policy not policy like that privacy policy something like that the url uh paste the url here so we're going into the pages we're going into all pages as you can see here and here we have the privacy policy i'm going to view that and here i have the url of the page i'm going to copy that and back to the page i'm going to paste that paste that in the link url so this is the link url for the privacy policy let's go back here okay start checked if you want to be checked from the beginning i'm not going to because i want those to check this so they also accept those and the field label should be accept the privacy policy field placeholder privacy policy help text 100 width i don't really care about that and we're good to go then we have the actions after submit which will send the email and they also can redirect or you can put anything that you want inside here some of those are pro add-ons and then we have the email settings and here we are going to put the email address which we want this email to be sent it to the subject you can leave it as it is but you can also change that to contact from the website from email you can put here the info at logistics.com for my from my case in your case you can put whatever you want and form from name you should put also the name of the company reply to the email field all the from email the email field is this one and from email is the one that you put here and this is the cc and the bcc so you can also send that to another person send email as html basic spam check if you want to add the spam spam check it has enabled by default it also has the google recaptcha and then we have some field styles so you can change the font size you can change the line height pretty basic stuff but pretty amazing for a free thing inside the blog inside the google blog so you can change anything that you want for me it's pretty good at this moment so i don't need to change anything so we have the field styles as you can see here we have the normal and hover styles we have the label styles button styles this is the one that you should probably check and then we can go into the text color and select the white for the text color button background i can go for here for this one and once you hover you can change that to another one radius i should give it the four and message settings what it should say after the uh send message so it says submission success thank you for getting in touch i would go for something like uh messages sent thank you we will contact you as soon as we can or something like that and a advanced message front settings so this will be the font settings for the message so i'm going to update that and see how it looks in the front end and as you can see this is how it looks right now it's pretty good and i can leave it as it is right now so let's go and change the link of this button to go straight to the bottom and see this one so what we're going to do is go into the layout here into the row layout and we're going into the advanced and here that says html anchor i'm going to put here send message remember not to leave spaces inside here so i'm going to put send message i'm going to copy that it says here without spaces and this should be unique you not go and put that in the same html anchor in another uh in another row layout in the whole website it's unique for the whole website let's go into the button and here that it says type paste the url i'm going to put that i have put in the anchor but i'm also going to add a pound sign before so it will be pound send message going to update that and now let's see in the front end let's go to the top and we're going to click here and let's refresh once again because it didn't work and let's hit the pound again let's hit here it doesn't change let's see why it didn't take the thing that i wrote because i didn't hit enter so i'm going to put the pound again i'm going to paste the text and this time i'm going to hit the apply and now it's saved hit update and let's go back and refresh the page and click the contact and immediately it goes straight down to the send message send us a message which is what i want when i uh finished i'm going to also create the read more for the services and of course now you should already know that if you have more services you can also do that here now uh since i'm building something with um three services and i'm not building with separate images separate pages sorry i will not build these two pages inside here i will just build the service page so this should be linked inside the service page but i will do that later on because i nor not only want that to be forward into the service page i want also to be in the section about this this service you will see what i mean when i start building the page so uh let's close that we have finished at the moment for the home page let's close that also let's go back to the pages and the next page is the about us page now uh the first page was the hard one to do this is what it's the most thing that you have to spend some time to think what you want to do some of those pages other than the homepage the about us page and the contact page are pretty similar to to what you see in every website so we want a row layout we want here to have this inside here we want to have advanced heading which will be in the left okay and it will say about us something like that this should be h1 because it's the title of the page and it should also have something for the background not here the layout the row layout so i'm going here i'm going into background settings i'm going to select images and i'm going for something like that select it this is how it looks oh uh of course the text cannot be readable so i'm going to click that i'm going for the heading color to be white and also i'm going back to the image row layout and background overlay and put the overlay color to be black and select black okay and then here sorry here also i need uh that to be 50 50 so it's looking something like that now i'm not going to change the height because i don't want that to be too big that i i don't really care not i don't really care i don't that i don't want that to be too big i just want to have something background so uh it's better looking for the title about us page but i don't want i don't want that to be the whole page the whole uh to be too much of a space let's go into the lorem ipsum and i will grab some text and this should be the about us text of course this is just the text that i'm going to put if you have more content you should also add images add something to make it look better because no one wants just to go and uh start reading without any breakpoints or anything else but for me it's just a simple text and we're done with the about us page this is how it looks okay after that we're going to the contact page which is also simple to do not so simple as the about us but it's not too hard let's close that let's go into the pages and let's go into the contact page let's go and edit that leave the page and go into the site and see how it looks in the front end the conduct page okay here we are so contact page let's start again with the row layout here we're going to add heading advanced heading we're going to name it contact and this should be color white and of course the row layout row layout should be with the background color a background image and this is the contact image and i'm going also to put something for the overlay settings let's go for an overlay color of black again and for the opacity let's go for 70 because i need it to be a little dark because it's way too white for an image and this is how it looks okay let's update that and underneath that i'm going to add two columns so row layout and two columns in the first column i'm going to add the form and pretty much you may uh create the same form that you have created in the home page or you can create another form if you want here i'm not going to change this hopefully you will already know how to change that and here i'm going to add a list list icon icon list the now i'm using the list because i need an icon and next to it i need some some text so i'm going here to first start with the phone number which is two one zero two two two five five five okay then i'm going to click to the uh icon and let's select here the list control number of items i'm going for uh i think we will have five or something okay next one will be the uh email so it will be info at logistics.com the next one will be the address so it will be athens 25 or something uh and if you want to put another number or something else yeah i do we don't need uh more icons here so i will just remove that and now i have this three lines so i can go now to the list columns we have one yeah list vertical spacing is five so the spacing between those list horizontal icon and label spacing is 10 so you may need to change that to something else but i will leave it as it is icon align i can be in top bottom one middle i will leave it in the middle because i think it's better now leave it in the top okay margin list text styling so this is the text color settings should be black okay size controls this is the font size of the text i think it's good it's good enough we don't need to be changed add text transformation okay and then we have the edit all icons together so i can change the size of the icons so something a little bit bigger if you want and the icon color should be black okay and now i can go and change the individual list for the items so i'm going to delete that and i'm going first to put the phone number sorry phone and i'm going to select this one for the first and if you need to change anything you can do that then the next item is the email so envelope envelope something like that and the third should be a map so a pin or something else if you type them up i think you will find pins so map something like that so now we have separate icons for different things and underneath that we can also uh no i don't want to do anything else here so i'm going to click into the row layout and i'm going to select that to be in the middle so it will go straight in the middle let's update that and see how it looks in the front end let's refresh the page and let's see the contact from it so yeah maybe you should go for something a little bit bigger here so it will not look so little so let's go here and list text styling let's go for 25 25 something like that and then let's go to the edit all icons and let's go for 30. maybe something like that let's refresh and see how it looks uh yeah maybe it's a little bit better maybe you should leave a little bit of space here also and let's see this stacked if it's looking a little bit better i'm going for a nikon background of blue blue and i'm going for border radius of 20 yeah 20 and then the icon color should be white okay i think it's a little bit better and i have to leave some space here so let's go for here that says list horizontal icon labeled spacing and let's go for something like 20 maybe update or maybe 15 let's see how it looks yeah i think it's a little bit better so as you can see we have something better and we're good with that let's update that then the next thing that we want to do is put them up down here so they can reach us so let's go to the map and the way while we're going to do that is going into the google maps google maps i'm going for google maps and uh sorry that is greek uh the titles here and everything is greeks let's change that can we change that now as you can see i cannot change that so i don't know how to change that so let's go and type the address athens something like that athens and we have something here but we don't have any pins so let's add okay so we can find the others that we want something like that now i'm going here in the icon that has these three dots which is the sure and then we have the integration the embedded i think it's iframe how it says or embedded the second tab and here's the iframe so i'm going to copy that copy url copy html sorry copy html and now let's go back to the page and we're going to add another row layout i'm going to add one column and inside here i'm going to add let's browse browse al and let's go for the classic and inside the classic i can paste let's see if i convert that to html before edit as html yeah and then copy the iframe let's update that and see how it looks in front end so i have my map as you can see here now it's not looking too good but we're going to change that because here if you see the iframe it says here that we have the width and the height so for the width we're going to put 100 so it will take the whole space and the height we're going for 60 600 pixels so as you can see we have quotas and we haven't changed the quotas 100 percent uh width and height six percent so and i'm going to click outside i'm going to update that and i will see that i i have it a little bit better as you can see here but i also need to fix some things so let's go back to the row layouts i'm going to remove the um padding that i have here so let's go into the um margin and padding so let's go to remove that 0 0 0 and 0 okay and update that and now i do want to change this to be full width let's update that and see how it looks now okay and now the last thing that i'm going to do is go into the structure settings and go and remove the content max with inherit from theme i'm going to update that and i'm going to see how it looks now in the front end okay and as you can see the whole page turned into a map and now i can go and change what we want and i can also hit the directions and be directed to the this exact location and this is what i wanted to do the next thing is to create our services page so let's go back to the pages and let's go to the services this is the one page that i'm going to edit i'm not going to edit these pages so let's go to the services page edit that okay services and let's start again by adding a row layout adding inside the row layout a heading advanced heading i'm going to type services okay into the row i'm going to add the background setting select image and this should be the image for the services which should say services okay i think i have forgotten to do that in the contact page i'm not too sure so let's go here and let's change the color for white and let's go back to the services page to the content aligns to the row align sorry and let's background overlay settings and let's go for a black black and let's go for uh 60 i think it's okay 60 let's update that and see how it looks here services it's okay so after that we're going to start creating the layout for the services so we're going for a row layout again and we're going for two columns and 33 and percent and 66 this should be the image and this this should be the service so this should be the image and which i will select from the media library to be this one and this is the taxis of course uh you should select the same image that you have in the uh home because this where was this was the service that i was having taxis okay so this is the taxes and i want here an advanced heading i need that to named taxes and underneath that i'm going to add the paragraph for the taxes what i offered to my clients so this is what i offered to my clients for taxes okay and then i have another row and here i'm going to duplicate that two times duplicate and duplicate okay and now that i have duplicate i think duplicate three times one two three okay three times now i can go into here i'm going to grab that i'm going to move that to this uh column and i'm going to grab the title and i'm going to grab that and move that to this column but i haven't successfully do that and let's hopefully let's hope that it will be done no it didn't okay let's click here let's click outside and let's okay now i can see the title hopefully the the column hopefully i will do that okay yeah i was able to do that and then let's go again here and leave the title now i can go into the row layout and i can select to have that like that and i think i'm okay with that and now i can go and change the image to replace it with something else not upload sorry media library and this is the service one which should be something i don't know i like that service one service one select and of course this should be service one and now this should be service too and this should be replaced with this service too which is this one this is the about us at the stage let's say change that to service 2. okay series 2 and now we have those services and in this row layout i'm going to add the background the off-white background so let's go for the off-white so it will be separated from this and let's update that and see how it looks in the front end now i don't like it very much because i think that the image should be a little bit bigger maybe the title should go straight on the top or you can change we can you can play along with the settings you can change a little bit uh maybe i will change it a little bit let's go and make the image a little bit bigger so let's go for here and do this and of course i have to go and into the row layout and select these to be a little bigger 35 something like that maybe even 40 and have the image to be 4d let's update that and see how it looks in the front end and if it looking good i will do that for the whole website so i think it's a little bit better but of course the text is not suitable for here and you should also change that if you want and this is just a demo so i'm going to leave that as it is and just i'm going to change this the row layout to be 40 instead of 60. 60 40 like that and here also for the raw layout to be 60 40. now to fix the buttons in the homepage we're going to also uh open the page and i need these buttons to not just forward as we said to the services page but go once you click the taxes go immediately and read the taxes service once you click the service one read more you will immediately go to here so we're going to click in the first row layout here i'm going into the advanced and i'm going to here to put taxes here i'm going to put services service 1 service 1 and of course since we cannot have a space it will go and take the service one with a hyphen and then here we're going to put service 2 service 2. let's update that and here in the buttons we need to go and do two things first we need to go and put of course this with the pound but this should say taxes for this one taxes enter this should say pound and service 1 enter and this should say pound and service 2. now if you leave it as it is then it will look for this anchor in the same page but this is not in the same page it's in a different page so i need also to go and grab the url of the services page and go inside here and put that on front so i'm going to edit that not by clicking here but then clicking the pencil and on front i'm going to put that so i will have the url and after the the last slash i will put the pound and then service so i will do that by clicking enter and then i will do that also in the other buttons so here i will also put the url and here i will also put the url let's update that and now let's go into the homepage and see if it's working so i'm going to the homepage and i'm clicking the taxis and immediately i will go and as you can see i can see the taxes it didn't just go to the pages it went straight to the taxis let's go again to home and see the service one service one so it will go service one as you can see and let's go back to the homepage and let's see this service too and went to the service too so our page is ready uh for the pages our website is ready for the pages and we're going also to create a blog so let's go to post and let's go to all post now if you don't know what blog is it means that you haven't used a website before a blog is uh something that you can add in your website the uh most common thing of a blog is that the newest thing will go on top so if you're reading an article in a newspaper in a website and most cases you can call that a blog the most recent article will go on top so you go into a category and you will see all the articles that they have in the category and they will show you the uh the last one on top and then you have the second one and the third one that they have put so this is the same thing you will need the category to add first so we're going to a category and we're going to add a news category or something this is uh depends on the website that you are building so this is a logistic website i will need the news category just to add if i'm offering new services if i have a new client something that i can push to our visitors to read uh in most cases that you're creating a local business you will need to create also a blog because it's easier to go and uh do a better thing in seo to have it ranked better it's easier to do it with the blog you will rank easier with a blog instead of just your website so you will need to do that now since i have only news and i don't need the uncategorized i can go into i can go and delete that but this is the default one so i have to change that first let's go to the settings and then into the uh reading sorry into the writing and here i'm going to select the default post format not the default post category to be the news save changings and now if i go into the post and categories i can now delete the uncategorized so everything i will add they will go straight to the news category if you have other categories you can add those there let's go and go into all posts and here we're going to add a new post and of course since i don't have content i will grab laura mipsum so this is news one news one and let's grab some lorem ipsum text and i will put two or three posts here and here i'm going to hit pause and i'm going to hit a featured image this is the image that we have when we see all the post one next to the other so set featured image and publish publish and let's create two more posts add new and not new with the same way so this is the news2 and i'm going also to have a featured image this one publish publish and of course since i'm uh first adding the news one it will go to the bottom and the first one will be the news three is logical news three which will be the top when i see all the the blog so let's go to uh post and let's go to set featured image and this should be something like that okay said featured image and as you can see i have the categories i haven't selected because i don't need to i only have one category and it will automatically grab that category after that i can go to the back to my old pages to by posts see the categories and now i can see the categories and if i select to view it i can view the news as you can see here this is the blog that i have and if i want to read a text read more i can click here and i can see this is how it looks so we're going to change that but first we need to add the news inside our menu so let's go to appearances let's go to menus and inside the main menu this is why we're going to choose and select so it will change to the main menu i'm going into the categories that says here categories and i'm going to select news add to menu and i'm going to push the news here before the contact save menu and let's now refresh the page let's go to home page and we'll see now that we have the news here so once we click news we can see how it looks so let's go to the customize and see how it looks okay now we have the blog post and we can go here blog post and we have archive layout and single post layout the archive layout is the one that we're using and now the archive so we can see all the posts so let's go here archive and we can see that we have three columns so let's see we have the title news above i'm not going to show the title news because i know that this is a new space news page after that we have the title and description for the type elements here i'm going to select the full width so i will go full width for the title as you can see it goes something like that and if you go and select the unbox you will have something like that now this doesn't look too good so let's go for two posts but still it doesn't show so i'm going for normal because it's better something like that but i don't want to be boxed because i don't want this layout i want this white this is personally what you want to choose maybe box looks better to you leave it as a as it is a box maybe you want three columns leave it as it is three columns whatever you it looks better to you you can change whatever you want it's pretty obvious what you're changing and as you can see here we have the feature image we have the categories we have the title uh the categories here i'm not going to appear that i'm going to click here and have it removed also the meta information is by who and the date i'm going also to remove that we have the expert and we have the read more and i do like how it looks now let's go and publish that and then we can go and click the read more so it will go straight to one bo and one post and here i'm going to go back and this is a single post and here how it looks so we have the show post title here's the show post title and we have the title aligned so we can go in the middle uh we can go post layout to be full width so something like that no i don't think it's good let's go for this one and i think this is better and also you can change how it looks for the layout you can go above contact or the post title or in content how it is how it is now and this is the above content like this but i like it better like it is right now after that i don't need the categories i don't want the meta information and after that we have the default post layout if you want to go full width so you don't have this white space here but i do want to add the sidebar here because i want to show you what you can do with sidebar so i will need input the sidebar here and in the sidebar i will go and change these comments later on in this what it says here here we have also the show featured image which is this one and i want that it's behind so it's behind the title and i like that it's white or stretch full i will leave it as this inherit for the featured image ratio so post tags and the tags will go straight down to the bottom i haven't used it so footer area in box mode yeah so post navigation so this is the previous and the next one if you want so related related articles is articles from the same category i will leave that too and i will put that to two not three what it is right now like that and so comments i will delete that remove that this comments and then let's go back and back and here we're going to select the general and here we're going for the sidebar and we have 25 let's go for 20 to be a little less so it will not go too big 20 pixels 20 percent so this is 80 percent of this 20 i think it's good and then let's go into the uh widgets so let's go here into the widgets and here we're going to find sidebar and here we have the search we have the recent post and we have the recent comments which i'm going to remove if you want to add anything else you can add a widget here and you can select what you have inside here or you can go straight from the widgets that you have done before we have done before from here widgets so let's publish that and refresh refresh the page and this is what we have done with the website so hopefully that was something that you can get started and you can go and create something with gutenberg all of that the last thing that we're going to do is to add another plugin and this plugin will be for the casting and we're going to add the swift install activate and we're going to see what we're going to change now remember that if you're using a casting plugin you should also go and check the whole website from the beginning because in many cases you may face some problems something will may break and this in most cases will be the fault of the casting plugin so you will have to go and change some settings remove something and see if it's going to fix that so uh i'm not going to pause the video but because i think that it will go and not take too much time i think it will soon be over and let's uh start and close something here and i'm going to open the gt matrix not here sorry let's go back here auto config start again from the beginning so let's go and uh open the page speed inside and the gd metrics and close this and close this and here is a logistic which i'm going to refresh and as you can see it continued now next and back to dashboard and then let's go into settings and go sorry tools and swift performance light and remember that if you're using cast plugin and make some changes you may need to go and clear the cast to see it in the front end and some cases you may see it the changing because you are logged in but many other visitors will not so remember when you are doing some changings you would go and cast and flash the cast clear the cast so here we're good to go here we're good to go media let's uh in line small images optimization general minify html disable emojis optimize the background okay limited middle is threads okay scripts we're good to go styles separate styles this is all good cushing we're all good we don't need to change anything inside here okay tweaks exceptions x exceptions all good varnish and you can just enable that okay but if you don't have a cloudflare you will not be able to do that and cdn if you have a cdn you can put that here so save changings and then clear the cast and just refresh the page twice okay and now once a visitor will come into the about pages and request someone else the same page it will go straight and go into the website you'll you can see how fast it is it way it's too fast and it's faster than any other builder outside there and this is why we did it with the gutenberg so let's go and put that in the google speed analyze and in the gd metrics just to see the results maybe we have to do that this twice just to take the results with the cast version but i think it's already cast the website is already cast and as you can see we have the mobile version sorry for the greek and i'm going to change that immediately to this en i think it will change but let's see yeah it needs to also run it again and as you can see here we have a 10 request with 0.7 loading time and 312 kilobytes and here we have 94 for my mobile and 99 for the desktop so you can know how fast it is last thing that i would like to show you is that when you go into an page edit page you should also change that page to look well for the mobile version in order to do that you will have to go and select here that it says uh preview and select the tablet view and here you can see what you get you're getting and maybe you want this to be changed for uh the contact should be changed for the mobile view here you will go into the size control that says here you will go for the tablet that you have here and the tablet font size should be 20 or 25 or something else you may not see it changing here but it will definitely change in the mobile version and in the tablet version but be sure to check that from a mobile and from a tablet or from the front end by shrinking the page and you will need to do that in every page that you create as a last result so you will always be here and then in the mobile and see how it looks and maybe you want to go here and change the uh not the least column but the least text styling and here i could go and change for these uh thing and put it 20 or something uh 18 17 something like that so when i go for a mob from a mobile phone i will get it a little bit better so that was it guys uh hopefully uh you have you know now uh some things and how to create a website a simple website with the gutenberg it's not an ideal website builder to create full websites that have a lot of things inside but if it's a local business that does just want a simple website it is something that you can create right now it's a little bit clunky it's a little bit difficult in the beginning but the results are amazing uh from the speed uh version as you can see the numbers are great and it's not too difficult to create it okay it's not too difficult so thanks for watching guys and i will see you all in the next video bye

Channel: Stratos Tutorials

Views: 18,819

Keywords: Create a Full Website Step by Step for Free! Kadence Theme and Gutenberg Tutorial, Kadence tutorial, gutenberg tutorial, Kadence theme tutorial, kadence theme step by step, create a website step by step, fast website, create a fast website, how to create a full website, create website step by step, best free wordpress theme, free website builder, create a full website easy, local bussiness website for free, best wordpress theme 2021, how to create a full website for free

Id: Q0ClNLKppiQ

Length: 160min 0sec (9600 seconds)

Published: Fri Dec 25 2020