 What is going on everybody, my name is Roddy and you are watching my channel Roddy the Brands. Today we are going to develop and publish this G-Mapsite using the editor X platform. If you want to check it out, there will be a link in the description below. This is a sponsored video by the editor X, thank you very much editor X for sponsoring this video. And now before we begin, if you want to follow along, there will be a link to the editor X platform in the description below. To get started all you need to do is register an account and then you can follow along with me. And the last thing I wanted to say is enjoy the process, if you have any questions, please comment below. Don't forget to like this video and consider subscribing. Now let's jump on the computer and get started. Hey welcome everybody and let's get started. As you can see in front of me I have Adobe XD opened and this is the design that we are going to develop today from scratch. I'm going to use Adobe XD as a reference and this will allow me to quickly copy and paste some of the content and if we ever need to export something, we can do this straight from Adobe XD which is great and just plug it in into editor X. Saying this, if you want to follow along, there will be a link to the editor X platform in the description below. So click on that register an account and then you should be good to go. Once you do that the editor X will guide you of creating your new website but if you see the dashboard like I have in here then all we have to do is click on create a new website. I've already created one but let me guide you through this super quickly. So click on create a new website, choose the editor X platform just because we are pros like this and then we need to select what kind of website we want to create and today I'm going to be creating a fitness website and the last step would be to click on this blank canvas because we'll be starting from scratch. Once you're at this stage, the first thing that you want to do is save your project. Click save here at the top right corner. Once you do that, this will guide you through your domain name setup and you can either choose the free Wix.com domain name for me that's ready the brand.editor X.io and then the website name or you can connect your own domain name which is super easy to do but I've already done this and I'm just going to use the Wix domain for this project. So I'm going to close this and just go to the website that I started earlier. So let me click on edit and now we can start working on our project. Let's start by changing the topography and the colors. To do this, if you navigate here at the top left where we have this icon team manager, you will see topography and colors. For the topography today I will be using poppins which is actually already set but I do want to make a few modifications so I'm going to click on this and then inside here is where you can select your font and also if you wish you can upload a custom one as well. So I'm going to leave this the way it is but the only thing that I'm going to change is the color. So because our website is quite dark I'm going to have the topography as white. So to do this I can click on the color icon here and just select white and then apply team and then I'm going to have to do that for the next heading here as well. So I'm going to complete this super quickly for all of the headings and I'm not so sure where I'm going to have to change the font size. I don't think that I'm going to have to do that but we'll see how it goes and then let's go with this one as well, white. This one needs to be white as well and heading six needs to be white as well and we should be good to go with the headings and underneath the headings we have different styles for the paragraphs. So what I want to do is I'm going to change this to another font so the design is a little bit more interesting and I'm going to change this one to Proxima Nova like so and this is set to 18 pixels but I actually want it to be 16 so let's do 16 and then let's change this to white as well. Save and then let's do the same for the others. So yeah let's do the same for the others. I'm going to select Proxima Nova just because I want even if I select another one by mistake I want the paragraphs to be exactly the same so let's do that and let's apply for the last one as well so Proxima Nova and then this needs to be 16 pixels and it needs to be white. Apply theme and we're good to go with the topography and the next thing that we can change is the colors. So under colors we have a few different options the first thing that I want to change is the background color of our website and to do this I can click on this one here and then I'm just going to choose black for this one and apply as you can see your background color change straight away and for the actions I didn't apply it. Let me change it to black again, apply, apply and we're good to go and for the actions I want this to be pure white which is already set to pure white and that's good. If you have other colors or if you want to set up more colors in here you can do that and also you can save this library if you wish to reuse it on another website and if I click on design libraries you will see that I've already created one previously so if I hover over it kind of changes the colors for me and that could save you a little bit of time which is pretty cool. We're pretty much done with the theme manager so we can close this and just save the website. There are two ways of saving the website one by clicking the save button here or you can just do control and see on your keyboard or command and see if you're on Mac and that will save your project as well and you can preview the project from here and of course you can publish it and make it live with this button which we will do at some point. Okay now let's start from top to bottom which means that we need to start with the header. Now the header is actually set as a site master which means that it can be reused on other pages and if you decide to change your header at some point it will actually the change will actually apply to all pages which is fairly useful and now let's start by changing or logo. If we click on the header here on the right side we have the inspector and in the inspector we can change all sorts of things such as the size, the scroll options, the paddings and also the design. So what I want to do is I want to make sure that the header has no background so this is set to zero and also I want to start by changing the logo which is here. It's hard to see now because we changed the color but if you hover over this vector art you should be able to click on it and then click on change vector art. Once we do this you can either select art from the library but of course I'm going to upload my own logo by clicking upload media. Now I've already exported my logo as an SVG file so I'm going to drag this into here and have it uploaded. This should take a second and once we're done as you can see my logo is white but it's hard to see in here. If you're going to have a lot of files in your library you could actually sort your files by tags as well which is fairly useful but anyways let's click on this and add to page and as you can see we have the logo in here which is pretty cool and we have the menu. Okay now let's focus on the menu and to do this we can click on the menu and what I was thinking is I was thinking of actually adding one more item just so we can design this a little bit better just because with one item it's kind of hard to tell what's going on and to do this I'm just going to randomly add a link so let's say a web page or whatever I'm just going to do HTTPS then rally.co.uk or whatever. Right on we'll add some rail links but this will work for now just for the demo and instead of new link let's just say about. Now the reason I'm doing this is because we are currently on the home page and this is the selected menu and that's why this is a slightly gray color but this one here is black and we need to change this so if I was to click on the menu and go to the inspector click on the design tab we can start changing the design from here and what I'm going to do is with the scroll bar in here just so we can see I'm going to move the scroll bar on the right side and we can start modifying them the drop-down background I'm gonna leave as default then corners we're not gonna have any rounded corners shadow is absolutely fine the way it is and text text is the one that I want to focus on so let's change the text color to white first of all and I'm gonna move this in here so you can see and that's looking already a lot better and then theme that's absolutely fine the font we can select in here and I'm actually thinking of leaving this as poppin semi-boat is looking cool or we can have it actually I would like to change the font to be poppins but maybe the extra light let's have a look yeah I think that looks a little bit better and for the font size I'm going to leave this a 16 pixels and I could make this a little bit bolder if I wish to I mean yeah I'm going to leave the default and I'm happy with this now we can also mess around with the spacing but I'm not going to do that let's focus on the hover tab now for the hover I want to change this to be something close to white but not exactly white so maybe this gray color or we can select a custom one maybe I can go to like this gray color let's add this and that's looking cool so let me close this and for the clicked one I'm going to change it to maybe a darker one and let's see how this looks so I'm gonna save this and let's preview super quickly as you can see the homepage is slightly darker because this is the selected one and the about one is slightly lighter and I think there is a slight hover but the color difference is not good enough to actually for you to actually see it but anyways this is how you can edit your menu as you can see the menu is now looking good but if you go to tablet mode we don't have anything we can see the hamburger menu and if you go to mobile we can see that as well and the reason for this is because we actually changed the background color and it's now pretty hard to see the elements so I do know that the hamburger menu is here so you can select it and you can start editing it so the first thing I'm going to do is go to tablet mode or mobile mode and then select the inspector and then we can go to the design tab and start changing things so for example I want to change the color of this and to do this I can go to fill color and change it to white as you can see the hamburger menu is now showing up and if I wanted to change everything inside it I can click on open menu and then I can change everything from here so if I want to change the container background color I can click on it and change it from here as you can see the background changes but I'm going to keep this as black and then if I wanted to change the actual links inside here I can click on them and then change them from inside here so the color maybe I can set to white like so and you can set the sub menu color maybe it's white as well like so we probably won't have sub menus but it's nice to have a setup just so you don't wonder what's going on for the topography I'm actually not happy with this I'm thinking of just setting it to poppins and maybe we can just do the poppins extra light let's have a look at how this looks and maybe we can set this to 16 which is fine oh actually this is actually this is for the submenu so I need to go up and change it from here so this will be poppins and I'm gonna send I'm gonna change it to poppins extra light and I'm going to put this as 16 I don't know if this is going to be too small but of course you can also change the spacing a little bit so we can change it the vertically like so I'll make it nicely to tap on and maybe we do need the text to be slightly bigger here but it looks a bit just so it's easy to see and click on and the last thing that I wanted to show you for the menu is the close button so we need to click on the close button here as well and change the color for that as well so let's set it to white and let's save this now if you go to the preview you will see that we're now getting the hamburger menu if you go up we are getting the normal menu then if you go down we're getting the hamburger menu and if we click on it this expands nicely with a really cool animation and you can see the links in here and we have the close button so this is all fully responsive and super nice okay before we finish the header there is one more thing that I want to do before we move on and this is I want to make sure that the header is over this section here so what I mean by this is if I was to add an image for example let's go to images and it doesn't really matter what the images and I'm just going to put the image as full screen stretch and as you can see the image is inside here inside the second section and we have the header on top so what I want to do is I want to have the header just like in the design I want to have the header on top of the section and to do that is actually fairly simple we can select the header select the header then go here on the right side where the layout tab is and then here at the bottom we have scroll so if you click on this we want the scroll effect to be set to fixed and then if you scroll down I want to make sure that this overlap next section is clicked so as you can see this now overlaps or section and this is just the way I want it and we could also set a field color so when we scroll down for example with some of the areas slightly lighter than the header maybe the white text which we have here won't be visible so to make sure that the text is always readable we could add the field text and I'm going to set this field text somewhere around 40 which is like a very transparent black color so if I was to save this and preview it you see that the head is fixed on top of our section and if I was to scroll down you will see that we get this really nice effect which adds the 40% black color on top and that would make the header readable on those sections let me expand this and edit the website again so let's save this and focus on the next section which will be actually creating this full screen section if I was to drag this at the bottom like this so we have a little more room like so okay let's start by changing the picture first of all so if you click on the picture and by the way I made a picture full screen by clicking on this button here on stretch and stretch if you select the image then you can click change image and in here we have a couple of options we can choose media from Wix which is pretty cool they have a lot of professional photography or I always like to use unspatch let's find the image so I'm going to look for gym photography and if you scroll down hopefully I find it super quickly I might speed up this process if it takes too long but here we go here is the image so this is the one that I want if I click on the image and then update it dash it update the image for me as you can see it's exactly the same as the design and if we were to click on this section and the next thing that I want to do is I want to make sure that this section takes the full screen and to do this we can go back if we go over this blue box here and click on a section we want to change some of the settings and the settings here in the inspector on the right side so first of all instead of having minimum of 500 pixels what I'm gonna do is remove this to none and I'm gonna set the height to viewport height and I'm gonna set this to 100 so as you can see this is now full screen and if we save this and publish it for example I could go and view the website and this should be now full screen as you can see it's full screen but if I was to visit this on a smaller device let's say something like a phone or whatever as you can see is still full screen which is great that's exactly what I wanted okay let's go back now and have a look at how we can do this dark fade effect so technically speaking I could have just exported this image with the fade effect and imported into Edit X and that would have worked fine but what I want to do is I actually want to grab this gradient from here from Adobe XD which is which is going to be an SVG gradient so if I was to so if I was to copy this gradient and paste it somewhere around here what I can do is shrink that down quite a bit like so and I can export this I can make this one pixel in width if you want to save space or let's just make it 10 just so it's easy to grab but if I was to grab this and actually export it so export selected and I exported and I exported as SVG so let's go for minified and I'm going to save on my desktop now I can add the SVG on top of this image by going the add elements and then shape and obviously we need to change this so if we change basic shape we can go to upload media and I can just drag the shape that we just exported which is SVG and here it is in here so I just go there here or fade and dot SVG you can put your tags and so on and add this to the page and here it is now what I want to do is I want to repeat this from the left to the right and from the top to the bottom so it takes the full screen and to do this we can click on the setting here make sure that you unclick this keep original proportions and as you can see this has now kind of like widened the SVG so if I select this and go to the inspector I can start messing with this and for example I want this to be in the middle so I can undog this from the top I can remove the margins from here and I can remove the margins from the top and what I want to do is I want to make sure that this is 100% in height let's have a look 100% and as you can see this is taking 100% of the section and I also want to change the width to be 100% as well and as you can see this has now taken the full width of my section and the menu is still on top but as you can see we have a little bit of problem with the home button here maybe that needs to be changed up a little bit so I could click on it super quickly and just modify so that would be clicked I believe yeah and then we can maybe make it slightly like if we select let's select the custom color and just choose one like so it's very close to the other one now but maybe this one maybe this color will do so let's close there and click on regular yeah there is a little bit of a difference I wish it was slightly like maybe around there okay let's remove this and yeah there is a little bit of a difference maybe we can mess around with this a little bit later but anyways the overlay is now working perfectly fine and if we go to the layers we can always go to this section here which I can double click on and rename to hero section and then this this could be or vector gradient and we have our image so what I can do is if I ever need to update the website I can just click on the image and just change it and the overlay will be still there so for example if one and two updates this one it will update the overlay will be still there so that means that I don't have to go to Photoshop and manipulate the images all the time so this is working perfectly fine and now we need to add a couple of more layers such as the text in here the paragraph the button and the scroll now for the text unfortunately I don't think it's possible to do the outline text in editor x but we could export this as svg because it's using the poppins font and we've already added that font this could also work out as text so let me show you what I mean if I still to select this section and let's go to file and then export selected we select svg minified and export it to desktop now if you go back and add a new element so new element shape and because it's a vector we can drag this in the middle and let's change the basic shape upload media and let me drag the title that I just saved and here it is then I can add it to the page and here is the title looking pretty good so in this way instead of having a boring text you can do custom stuff with svgs but if you are worried about SEO let me quickly show you something if I was to open this svg in a code editor so open with vg study code for example you will see that if you scroll down it's somewhere around here it's gonna say oh it's minified so it's all in one line but somewhere around here here we go it's using the font family font it's using the font family poppins which we've already included in our project so hopefully it wouldn't break and also you can see the text so hopefully so technically speaking that should be recognized by search engines but then again if you are worried this being an svg instead of a heading then you can always go with the heading and it will still look cool but I quite like this outline effect with the drop shadow and so on so I'm gonna keep this and one thing that I notice is that we have this really big box and what we can do is I believe that we can shrink it down like so and everything stays proportionally which is great and at this point obviously the svg scales down which we don't really want so I'm gonna keep it somewhere around here 181 and just centerline this for now and we should be good to go with this the next bit that we have is this paragraph here so I'm gonna quickly grab the text Ctrl and C and let's go and add a new element this element will be a paragraph so let's add a paragraph in here and technically speaking that should have been white but I'm not sure why it comes up as black text because I've already changed there but anyways we could change it from here as well so I can just select white make sure that is centerlined and so on and what else I think that's all looking good in here you can choose which style of paragraph you want but I'm happy with either one or two because I think I put them to be the same so saying this let's scale this down a little bit like so let's push it to the middle and that's looking okay but one thing that I would prefer to do is to put to space the text a little bit so what I'm gonna do is edit text and then somewhere around here we have the line spacing so this is auto spacing which I kind of don't want so I'm gonna unclick this and put this to be roughly 1.6 like so I don't know yeah that looks so much better to me it's a little bit more readable so let's leave it like that and the next thing that we need to do is recreate this button here so I'm gonna copy the text quickly find out more and to drag a button we can go to element and then we can drag a new button like so now there are actually quite a lot of styles of buttons so if you click add new element and if you go to buttons you can choose all sorts of buttons from here or you can create a custom one just like I did so I'm gonna go with the custom one for now and just modify super quickly to show you so I'm gonna expand this to make it a little bit bigger easier to press I guess and then if you want to change the styles of this button we can go to the inspector and then design inside here we can change the background which I'm happy with it being transparent the border is what I want to change so I want to change the border to white then that would be 100% the width potentially two let me have a look at the original design so if I double click so yeah the width is two let's click on two it makes a little bit border the corners are fine the shadow is fine the text I want to change in order to be able to see a little bit better to white and let me have a look and maybe everything else is looking good of course we need to change the text in a second but on hover let's have a look so on hover we have the text as black so I want to change this to white and I wanted to change the background color to I don't know maybe I didn't think this through but maybe we can change the background color to be none the border color to be white and actually let's make it slightly darker let's see maybe that would work maybe if we hover over that would work I don't know but as you can see you can mess around with the hover on here and just make it look nice now having added everything in here as you can see they're not spaced out well and what I want to do is we can space them out now if you wish but what we can do is we can actually group them just like you would in Adobe XD and that would basically allow us to centerline all those items which is awesome so what we have to do is select the button hold shift select the text hold shift still holding shift select the heading here and we can stack them so that's pretty much grouping the elements together and now and now you can mess around with the padding if you wish like so and then you can use this group of elements or stack to center align them so if we click on the stack inside here you can play around with the width and then if I undock it from the top that would mean that I want it in the middle and of course I'm gonna remove the margins like so and this is now dead center in the middle of our page which is absolutely awesome and we should be good to go if you want to preview the website actually I could potentially publish it and go back and refresh so that should take a second and as you can see this is dead in the middle the spacing could be a little bit improved maybe that needs to go up but yeah these are things that you can mess around with and it's looking pretty cool so let's go back don't show this again done and I'm gonna move this slightly up simple like this the next bit that we need to do is this scroll icon and text to do this first of all I want to add a new vector so I'm gonna go add elements and then if we go to I think is quick art and then shape they actually have a lot of basic shapes that you can choose from so let's have a look at one that could work for us so I kind of like need some sort of a narrow I think this one will work so let's select this one and the great bit about this is that all those svg's you can change the colors of them so if I go to the design here and we select fill then I can change the color to white like so and it looks a little weird now but we can fix this or this this needs to be keep original proportion maybe yeah okay that fixed it so if we keep the original proportion that fixes it and now I can scale this down without breaking it just make it nice I mean I could have exported the one from the design but I'm just trying to save a little bit of time and place it around here and now we can just grab some text so we could duplicate this text or we could just add another one I'm gonna go with paragraph and add it around here then let's change this to scroll if I click on it edit text and then change the color that should work okay maybe we can centerline this this is a little bit bigger so maybe like 14 I think that would do and also the box around there is way too big so I'm gonna scale this down like so just so we have a little space to grab it and leave it as it is maybe even small I would say so let's edit text and put as 12 and I'm pretty happy with this okay so later on we actually going to link this to the next section if we hover over here you will see this blue button which tells us that we can add a new section before we link the scroll and the icon let's make sure that they're positioned correctly at the moment they're docked from the top which is not what we want and if you see this one is docked from the top as well so what we can do is if we select both of them by holding shift and mouse click and let's stack them so they're grouped together and now we can actually move this around and place them anywhere we like so I'm gonna place it around here again in the center but I'm going to undock it from the top and I'm going to dock it from the bottom so from the bottom we have 35 pixels which I think that should be okay and we should be good to go now the next bit would be to actually link this unfortunately there isn't a way of actually linking a stack I think that potentially could be helpful I don't know but what we can do is link each individual element so first of all we need to create a new section in order to link the scroll so what I'm going to do is hover over here the footer and you will see this blue button so if we press on the blue button I want to add a blank section and here is the blank section now if you select the blank section and if you go to the inspector tool then you can go here at the bottom where it says anchor and you can enable the anchor and give it a name so I'm going to give this a name or section one maybe and now I can actually link this text here so if I go up and click on the text edit text I can actually click on the link here and then we can do anchor and then we can do instead of which page we can just do which anchor on this page and I can just select the section one of course so let's do the done and let's do the same for the icon here we can link this as well link then anchor then section one and then done now if we save this and if we publish here or preview whatever let's go back to the website you will see the scroll here maybe the scroll needs to be a little bit to the top but then if we click on the scroll you will see that we are getting this nice scroll and it stops now at the moment we don't have much more space but usually it will stop at the top and you'll look nice so I'll demonstrate this a little bit later on when we add a little bit more content in the second section but for now I'm just going to move this slightly up so I'm going to go back to the stack and instead of 35 pixels I don't know maybe let's go 46 how does that look it's a little bit better but yeah that's looking pretty cool we can save our project and have a look at what's next by the way I could put a custom view here it's quite big and the inspector is covering it so I could go with something like six and that still has okay yeah that kind of fills my screen now and I can see a little bit better and we can use the inspector here on the right side before we move on from this section we need to make sure that everything is responsive meaning that this works on desktop tablet and mobile now let's go down to tablet first of all and see what we can change as you can see the text is shrinking down which is kind of like the normal behavior you normally go from big to small on tablet and mobile phone but this is way too much in my opinion so what I can do is click on the stack here and I can just maybe make it a little bit bigger until I'm happy I mean something like this is pretty cool whoops and if I select the stack and just make sure that I move it select put it in the middle around here and I'm pretty happy with this for a tablet just make sure that we undock it from the top so it's in the middle no margins and that's looking cool for tablet mode and now let's jump on mobile so on mobile I mean technically speaking I don't know if this is centered actually I'll have a look in a second but on mobile we can do the same I think that I might make it ever so slightly bigger let's have a look I don't know I think this is looking nice and it's okay something like this I think this is looking quite nice now could potentially the this section is full screen but we could potentially click on it and change it manually from here for which to so let's just undock this from the top make sure it's in the middle and let's fix this scroll I wonder why it's not in the middle maybe I did another in middle it's in the middle here with this now that's all looking good oh I think that scroll excuse me I need to go to the stack first of all we have everything is looking good so maybe just go back okay I think it shrinks down as well so maybe we could have gone from mobile first and go up but I'm doing a kind of all the way around we're going from desktop just because it's easier to add elements and then tablet and mobile it doesn't really matter at the end of the day I think whatever you're comfortable with but now that I've made this slightly bigger we can undock it from the top dock it from the bottom make sure that we have zero margins on the left zero margins on the right and I'm happy with this so on mobile we can do exactly the same make it a little bit bigger then dock from the bottom this and yeah that's looking pretty cool so if I was to save this project and go back to the browser it's just easier to see let's refresh okay as you can see on desktop it's looking pretty cool if we right click inspect go control shift tonight you will see that it's actually looking pretty cool on mobile as well I can click on the hamburger menu comes up with a nice animation everything is clear close this and I'm pretty happy with this and if I tap on this as well it will go down the menu has the background color it's awesome so the same for tablet if I go up it will look nice as well and so on so let's go back focus on desktop again and have a look at what's next I need to put this down a little bit again so maybe six and just scroll to the right so we can see a little bit better let's have a look at what's next now that we've made everything responsive the only thing that I can notice on this section is the chat box now to other chat box is actually fairly simple we can go back and we can use the marketplace so up marketplace and if you search for chat then we can use this week chat which is pretty good so if you click on this and all you need to do is literally press this button add to site and that's it we should be good to go as you can see or chat is added of course there is a lot of settings that you can change so if I click on the chat you can actually open your inbox you have settings as well so settings the only thing I'm going to change is maybe the design actually yeah I mean the only thing that I didn't like let's preview this I just don't like the color that's all so maybe we can go to settings design or display design mini-march chat and here we go we have the background color here and I don't know what to add it maybe display icon I'll go for this one then text I'm going to go with white then I don't know what to add it as maybe oh you know what I'm kind of liking this the dark vibe it's not too much but yeah I'm liking this so I'm going to keep this and once you didn't close this save let's preview it super quickly if we publish the website I just like previewing it on the full screen and as you can see we have the last chat it follows you around and if I click on it expands which is pretty cool but I obviously need to change the inside of the chat so let's go back super quickly click on settings then display sorry design again then background and messages yeah we definitely need to change this to white maybe then send icon color that can be black approximately always pretty cool background color that could be white font color is black background color for this maybe we can change this to purple color I don't mind and I just need to change the header here I'm not sure which one it is background design we can even add a design but looks like pretty cool header design here we go so for the header design let's go for white and this is here I think I'm gonna leave this now and it's looking pretty cool yeah that's looking super cool it's nice and clean so I'm gonna leave this now and we can continue with the next section let's have a look at what we have next so for the next section we kind of have three categories here so we have expert coaching we have nutrition and support so first of all I want to make sure that we get kind of like a rough size of how big this section is and by the looks of it that's 10 90 of height so I could use this to mess around with and then add the rest so let's go back scroll down we've already added the section which we can scroll down to and we need to start by selecting the section going to the inspector tool let me move a little bit and minimal height instead of setting a minimal height I'm just thinking of setting it here and just setting it as pixels for now and later we can figure out so that's 10 90 now let's add our first element here add the element actually I forgot to tell you that you can right click and quick add but in quick add there isn't the thing that I'm looking for so if we go to the plus sign the thing that I'm looking for is a repeater so let's click on this and this will add a repeater which looks like this with three white boxes looking pretty cool it's kind of like already stacked kind of like this section here so what I can do is move everything around I can center it I can make it a little bit bigger and I'm actually let's make this around 80 percent of yeah that's looking pretty cool we can unstuck it from undock sorry from the top and right remove any necessary margins and remove the margins from here and I think I've made this section far too big actually so I'm gonna make this way too much smaller actually maybe yeah that's way too big so let's have a look at how big it is 688 and to be fair I think it starts from around here and it's around here so 910 okay I think that would be okay 910 that's a little bit better these are 688 so I could potentially go on here click on the repeater and then do minimum let's make this by clicking on the first item let's make it a little bit bigger like so that's very close to the design I think and I'm gonna keep it as this but basically what repeater does is not only I can center this as a kind of like a section I can dock it in the middle which will always stay in the middle I can every time I add a symphony here it will repeat on the other sections as well it's kind of like the repeat grid if you're familiar with it in Adobe XD so if I do right click quick add image and it's adding around here so I need to just make sure that I click on it and drag it here in the first in the first column and if I want the image to be full screen as you can see this image is repeating three times now which is great and if I want this image to be full screen we just click on the stretch which is awesome and it takes every single box the full width also one thing that I wanted to mention is that if you click on the repeater you can actually change the layout and what I want to do here is change the horizontal margins to something bigger 60 maybe and that would give us that would give us bigger horizontal margins and I'm happy with this so let's add a little bit of text on top of them as well the title so if I go to plus and then title drag this inside here make sure that we can make it full screen like so and we can dock it in the middle so undock everything remove the margins remove everything and maybe we can just centerline this so edit text centerline and let's start and I'm actually happy with the size of this it's using heading two and we can just start editing the text so the first one we had expert coaching then the second one we had if I double click on it nutrition and the last one we had worse support and you saw that I changed the text on every single one but if I was to make an amendment like for example maybe I didn't want this to be centerline I can just go up and they will follow which is amazing so if I do control z that would go back which is also a pretty cool shortcut to know about so now that we have this of course we're gonna have to select all images so let's click on the image change image and let's start looking at some images so in a splash I'm going to go for gym and this could take a second actually this is the one that I want so let me update this and another thing that you can do is if you're happy with the focal point of the image you can actually click on this and change it manually so for example the focal point is in the middle but if I wanted to change it for example I don't know maybe her arm was the focal point you will see that it's moving a little bit I can move it down here to be the focal point I mean it works better with slightly big images I think but you get the point you can change it and adjust it the way you want which is pretty awesome let's close this and the next section we have let's change the image as well so under splash and then gym again so far I've been fairly fast with finding images but we'll see but if I take edges to find images I will just speed up the process because I don't know the exact names actually so I just have to like scroll down and find the ones that I like here we go this is the one that we have in the design so let's update focal point is in the middle I quite like it then the next one let's go here change image and the next one will be kind of like group fitness or group gym maybe I don't know anything like running people oh here it is actually took a little bit of time but let's update him now you're probably seeing the problem that we're gonna have the images all looking nice the exactly the same as the design but the text is super hard to read so what I've done in the original design is I've actually put if I double click on this I've actually put an overlay and this overlay is black with the 55 of pasty so we can actually do this without having to export anything I could potentially just go here add a new element and add a shape now as you know from earlier we can change the shape colors and so on so let me change this shape first of all to a square like this one here and then I can maybe if we put settings keep original no I don't want to keep the original so so as long this is unticked we should be good to go and technically speaking I can put this a hundred percent undock it from the top so it's always in the middle remove the margins remove the margins again and oh we have stars here now but no problem maybe I can I can quickly update them it's no problem or you can add your own svg and that would just go around but anyways if we click on this and go to height maybe we can put a hundred percent for the height as well so that would be percentage did that work hundred percent and that's taking the full width and the height which is exactly the way I want it and if you go to design we can change the fill color to 55 just the way I have it in the design and now if I go to layers I can actually move this basic shape layer under the title and we're good to go now they're standing out which is pretty cool and yeah I don't know why they didn't update I guess this is because this could be actually helpful because you can do different shapes so I don't blame the decision of doing this so I think this is a good decision actually so we just need to change it to the black square and go to do opacity change this to the black square and do the opacity that's it so they'll underneath the text it's all readable of course this is a demo website but the idea behind this is to actually link them potentially so you could do technically you could do a lot of stuff but I was thinking of just linking them or you could even add a button if you wish you already know how to add a button like this you can even copy this one and space around or if you wanted to link this you can just select on it then click on the link here and just link it to a page that you want so the moment we haven't created many pages but you can click on here and just select a page that you wanted to link it from here and that would be a link and actually let's have it as a link even if it's the homepage just so you can see later on that the the cursor changes on hover and I can do the same for the text as well it's a shame that you can't doing the group I don't think that you can let's have a look on item yeah it's a shame that you can't do on the whole item I guess and it's a shame that you can't do hover on these as well but these are things that editor x is probably working on and also I will give editor x a little bit of feedback so maybe they can add these things in future so of course go ahead do the links for all of them as well and if we save this and maybe let's publish again just because it's better to view full screen remove this let's refresh then if you scroll down this section is looking pretty cool but for some reason text isn't updated so I don't know why maybe we can click on the text edit text and just do the color change it and then save save publish unhelpfully dash it pixel problem probably updating here we go the problem is fixed this is now link I don't think I saved this actually but as you can see the cursor changes on this and of course I can do it on the text as well and I can look link the following to it's also I can link this change to a page select the page and so on I can yeah I can link this change it to whatever page I want and actually this underlines it as well but if you wish to remove the underline from the link you can do that by going to edit the text and just click in the underline we're good to go so I can link this as well click on the link page you select the page we could have created another page but oh well so if we edit text link page select one then and then maybe let's link this one as well page cool let's link this as well linked page and here we go I'm only linking this just to show you the hover effect that you do get it so if I hover over when this when I refresh if I hover over this it's a link and there are links but yeah it would be nice to have some sort of hover effects and also in the design I think these are a little bit longer 688 so maybe maybe I could just drag this one down maybe I can select on the item and drag the item down make it I think that would look a little bit nicer and as you can see everything is still keeping its position which is pretty awesome so let's save this and make sure and now let's make sure that this section works on tablet and mobile now if we were to go to tablet festival you will see that this is ranking now our first option is to maybe remove the gaps between them if you wish to keep it this way and make the box slightly bigger or what you can do if we go back to the repeater I believe that we can change the layout and we can make it as a list so if we click on list you will see that this is now stuck enough which is pretty awesome and of course if you feel that these boxes are far too big we can change them as well so if I click on an item actually let's click on the first one let's go to item and let's go oh sorry let's go and just string this so much more I don't know I think this might be okay and as you can see this is already looking cool and if I go to mobile this is already working for mobile as well I kind of like it the way it is so I'm going to keep it but you can make it smaller as well so we have mobile we have tablet looking awesome and we have it looking awesome on desktop with just a few clicks let's save this publish view the page and this is looking pretty awesome let's consider this section as finished but of course maybe I could have messed around with the spacing a little bit but yeah it's looking pretty cool so far so let's focus on the next section now so if you scroll down we have this big image with this pretty cool one with nice tattoos lifting heavy and so on so what I'm going to do is save this as an svg again or you can just do it as a h1 title whatever you prefer so file and then so I would click on this file and then export select it and then just export as svg you can optimize it as well to save a few kilobytes and I've actually already exported this one so I can go back to editor x let's create a new section blank section and by the way if you want to stay a little more organized you can go to sorry where is section you can go to layers and you can name your sections as well so this one would be guest started today this one is the hero section this one is the maybe like options I'm not sure what to call it but you get the point so you can name your sections and when you click on them you can also move your sections around from here which is pretty cool and when you click on them it focuses on the section that we're working on now as we saw we're gonna have this one with this title here but let's start from beginning now we need to break this down a little bit first of all I have this reddish background which makes the image a little bit better in my opinion so what I'm gonna do is export this red fade at the top I have another fade svg so I'm gonna export this I'm gonna export the red one and then we're just gonna reuse the top one for the bottom here as well so we have kind of like a few layers so let's do that I've already exported them I just need to add the image and find it actually let's just find out that this is 914 so this section I can click on a minimal height I can do 914 if I wish or I can just set it as height and this is a little bit bigger now which is cool definitely could go down to 6 on this just so we can see and let's add a new element this element will be an image then we can scale this image to take the full screen sorry the full width and height of the section like so and now of course we need to change the image so this one was again from unsplash and this was like gym girl maybe tattoos let's have a look if we can find her it's a pretty cool image so I definitely want to use that gym oh here we go I put the gym tattoo and the moment came up she's got a few cool images actually but I'm going to use the same one on the design so let's click update this will update the image and now we can start adding the fade so for example let's go to add element add a new shape okay let's change the basic shape and let's upload a new shape that would be my red fade drag it inside it should take a second and we're done add to page here it is make sure that you click on settings keep original proportions untick this let's remove any margins in here and in here and then we can just dock it in the middle and I think I don't know where we went oh here it is at the top so I just need to remove the margins sometimes here we go the margins are now removed and let's put the width to 100% and the height to 100% let's do percentage and that's it we're good to go the red fade is there but I still want those black fades so our website kind of always fades in and out and to do this let's create a new shape let's drag this in the middle so we can see a change basic shape and let's and let's go and upload the new one this will be my small fade so I'm going to use this from for the top and the bottom again settings keep original proportion removed now I'm going to actually dock this to the top I'm going to remove the margins from here and the yeah margins as you can see it's here at the top and I'm going to set the width as 100% but the height doesn't need to be set to anything so I can actually check what the height is here so the height is 218 I can change this to pixels and just do 118 and that should go to the top and as you can see here it is the fade so I'm actually thinking of copying this and pasting this so ctrl c ctrl v and I can dock this to the bottom and dock it from the top make sure that we don't have any margins and as you can see it's in here but what we can do is we can actually rotate stuff inside editor x so if you go down we can do I believe he was here under jest and you can rotate so if you rotate this to 180 degrees as you can see it flips around and we have the bottom fade as well so we're technically just saving a few kilobytes as well and that's pretty cool let's save and now the next bit that we need to add is the title and a button for the title again I'm going to use an svg so add shape let's go here in the middle and dock it and let's change the basic shape upload a new one and this won't be the get started svg one kilobyte as you can see and still contains text inside it which is pretty awesome and we can do I have to do the key for regional proportions potentially how did they do earlier okay I think yeah okay I need to scale it the way I want like so okay I think yeah it starts resulting from here so I think this is kind of like the original side you can be specific and do it as pixels if you like but I'm gonna leave it as it is and let's add a button now so I'm going to go to the top because we've already created the button I want to keep the same style so I'm going to control and see this one go down here select some pen and control v and here is the button so right away I can just paste in here let's have a look at what this says it just says sign up so double click on this change sorry one click on this change text and then sign up of course you can change the link and so on and that's good to go I'm pretty happy with this now let's make sure that this works on tablet is on so on tablet I'm not super happy with this actually if we go back to desktop it would be this may deliver so let's let's position this a little bit better something like this okay something like this would do and before we do anything else oh sign up okay before we do anything else let's make sure that those two elements stacked so if I hold if I click on this and hold shift and click on the button we can stack them so I can easily now manipulate the part in between them and most importantly I can dock them in the middle like so remove any margins and that would be that center and now if we go to tablet let's make sure that this is made responsive nicely so I'm just going to expand this for tablet let's see how it looks oops let's make sure that we click on the stack and move the stack instead I don't know maybe let's just use a little bit more of the available space I'd say so something like this would do too much space now so maybe I can just move the button yeah let's have a look yeah I think that would work obviously I can mess around with it a little bit more once we are happy with this just make sure that you click on stack then make sure that you dock this in the middle remove any margins and we're done so this is tablet mode now mobile that doesn't look too bad on mobile one thing that I want to do is I mean technically speaking this section is far too big for mobile like there is a lot of gaps between this I'm happy with this one but this one is far too big so I'm going to click on the actual section here go back to section and I'm going to change the minimal width to something smaller I don't even know what but we're just gonna have to experiment so let's click on that it's looking better I think much more it's getting better and now the image is getting a little bit better it's always getting a little bit more from the image and that's that's decent enough maybe we can just make this a little bit bigger I don't know maybe we can make the stack a little bit bigger yeah I mean the button seems a little bit too big maybe but let center line this remove any margins like so and I'm happy with this so let's save this let's go back to tablet that's looking nice and clean and desktop is looking pretty awesome as well so we're pretty much done with this section and let's move on to the next one okay this section shouldn't be too bad because we have some of the work already done from the previous one but what I'm gonna do is actually I'm gonna have to export this super quickly your training options so export select it and then sbg optimized export now that I have this let's create a new section I'm going to go for blank section then we can go to the sections here and just make sure that we rename this so we rename this to training option like so and we're good all right let's start by adding all title so add a new element this could be or svg again change basic shape upload then training option here it is in here let's add it to the page keep original proportion is set here which is good one thing that I forgot to totally add is that you can actually describe what's in the svg for the titles and that would make him even better inside here but yeah make sure that you keep your proportions click on it and then let's just resize it to whatever we want something like this that's looking cool maybe a little bit small I would say one thing that I was thinking about is that we might not get the consistency if we don't do the exact pieces as of the design but I can maybe change this later on to just polish the design and let's scale this a little bit like so let's add a paragraph so plus element and then paragraph let's make sure that we grab some text from here so we have three lines roughly we can paste it change the text to white if it isn't already did I change it takes to white no I have to select all of the text and change it to white okay yeah I have to select all of the text change it to white and then we can centerline this white the variety is finally misspelled or something like this so that's all good I'm happy with this so the next bit would be to centerline them so the now actually yeah I'm happy with this the only thing that I will need to do is click on both of them and stack them and just make sure that they are actually positioned docked at the top now this time and just remove the margin from the left and I'm happy with this space in here and now we need to add a few more things inside this section and what I'm thinking is we might as well potentially copy this repeater here so if you go to repeater and control c can we do control and be here yep we can do we might have to just move it down to the bottom and I wonder whether this is going to make the section a little bigger now we might have to make the section bigger manually let's have like if I click on this oh we have it as minimum 500 let's make it how big is this section here roughly so that would be from maybe here to here one two three five something like this maybe a little bit less than that actually one two three five that's cool we can now move or repeater to the top let's grab it first of repeater repeater and yeah let's move it let's make sure that it in this section here I think I stuck the repeater inside the header that's why here we go let's center line it like so and we have half the job already done so as long as this is nicely spaced out just like the design maybe like so of course spend your time on this I'm actually going to dock this from the top as well because we need to make sure that we have this spacing all the time we could potentially just thinking about it we could potentially stack everything and centerline everything but let's see how this goes I think that might be okay so for the next design so for the design in here we have a I'm gonna move this to the right side and copy some of the text so we have a small group pt like so we have classes and we have what do we have one two one sessions so like so and now we actually need to add some text in here as well so let's do you plus paragraph added to the first section here so that will repeat on every single one I'm gonna make a full width in here then if I click edit text grab all of the text make sure that is white centerline it and I'm actually going to give it a little bit of a gap from the left and the right like so and of course do we need to expand this I don't know no that's it right and left and let's just make sure that there is no margins again oh actually this needs to go down to the bottom so I can do this and we can drag the title like so as well and maybe instead of stacking them from the top I could potentially grab both of them stack them and make sure that they stack from the bottom here margin remove and we're good to go so that's all looking good I can now populate this with the real content maybe we need to change it we'll see okay that actually moved up a little bit very smart actually that's pretty cool uh double click go up that's pretty smart as well we might need to yeah we might need to align them a little bit and then let's paste the text oops that's looking pretty cool actually because there is less text on some of them what I'm thinking let's minimize this a little bit more centerline it like so but also actually that fix the problem I was just going to move everything uh slightly up but that fixed the problem the design is fairly similar I think so let's keep it as it is and of course if you think that the text is not real we can always click on the shape and just change the opacity color let's save this and let's make sure that this works on tablet as well so if we click tablet mode this messes up a little bit so I'm gonna click on the stack and I'm just going to resize the stack here just make it this that's already looking better to me just make sure that is centerline of course so once oh no stack it from the top sorry just make sure you remove any margins and we're good I think I'm happy with this and this is actually taking the stars from the top one that we copied and pasted and I actually realized this um what is centerline them or make the space maybe maybe centerline them we could potentially just click on the stack here so where is it let's click on the first one and then go stack and then undock it just make sure that it's in the middle remove any margins and we're done that's all in the middle now and for mobile let's have a look at what we get a little bit too much text from over here not so happy with this is this oh this is 18 pixels so that doesn't need to be 18 pixels that needs to be 16 pixels I believe so I can click on it change this to 16 pixels and hopefully go down that's all looking good and that's looking better but I can make this a little bit bigger maybe like that okay of course yeah that's looking a little bit better but as you can see this is working for mobile we do have probably far too much text in my opinion here but what I could do is on the item I can just make it slightly bigger like so maybe also we can extend this to the left and the right that would help we can even make the text smaller and so on maybe remove the margins yeah I think yeah definitely too much text but yeah that could work of course all these can be linked as you know click on anything like the text go inside the text and just link it so I'm going to consider this section as done is all let's make sure that we save our project and let's have a look at the next section actually before we go maybe this has too much space so I'm going to just make let's have a look yeah just remove a little bit of the space make sure that everything is working on mobile actually could do it a bit more space for the tablet working maybe the whole repeater can be moved up okay yeah that's a little bit better I think so let's save this let's focus on the next section all right the next section that we have is fairly similar to the one that we had at the top here so I could potentially let's have a look at what we get so we have a black overlay it's just a black field belief no shadow setting this is 60% we have this image and we have the overlays here so I wonder if I could potentially go to the section here this one here and duplicate it let's have a look maybe if I click on training no it was get started today so if I click on this can I duplicate it so with control d we can actually duplicate sections which is pretty cool and now actually I can move this one at the bottom and I can start updating stuff okay that saves us so much time actually and of course we're gonna have to go to the layers go inside select the image and just change the image actually it's selection where is it I think it's just hard to select now but if we click on the image here we go change image and now I need to find this image here of lifting weights gym weights I'm gonna have this on my right side here as a reference oh it's very similar to this one here and here it is so let's click on this one and update and here is the image of course on this one I might not want the middle shape here that we have so I could potentially grab this and remove it I'm obviously gonna keep the top and bottom and I'm actually liking this but if you wanted to make it darker again we can grab one of them shapes so for example I can even yeah let's just add a new one so plus sign shape then we can make this easy as a square this was 60% so let's change it to 60% this was do I need to change the keep original promotion no isn't it it's so good so technically I can go to here put this 100% oh undock it first of all here we go I think that messed it up so let's go back undock it remove any margins and paddings whatever and then just put 100% and I think that just worked automatically and the height is set to auto and that seems to work but do I need to put this one at the bottom of dearest so basic shape maybe we need to put it around here so the text pops up it's in the middle it's it looks like a big section and this section looks a little bit bigger than I want so let's have a look at what's going on maybe this height is messing up so maybe if I put this if I go back so yeah this section looks a little bit bigger than I want and maybe this shape height is messing up so I put percentage yeah okay so this shape was pushing here and that's why if I put if I put as percentage and 100% that gives it the original height and this is just the way I want it and of course I'm gonna have to quickly export to this so let me go back so quickly I'm gonna have to quickly export this g ctrl and g file export selected svg desktop and this would be sorry if I was to click on this one maybe we can just change vector art and then go to upload media drop or median add some tags if you wish you can definitely click on the settings here and add the description so maybe we can just copy this and describe what it is I need to copy the rest but yeah you get oh and I don't really want it to be capital capitalized but definitely add your description here as well and then let's just make sure that we expand it so yeah something like this center line do we need to expand the stack potentially oh now the stack okay if we go back instead of expanding the shape we need to expand the stack and that will fix all issue so it's all nicely aligned oops stack moved the stack in the middle and that's looking already good I don't know if it needs to be any bigger potentially no that's looking cool sign a button it's looking cool save this let's make sure that this works on tablet I am happy with this maybe maybe the section is far too big on tablet we could potentially shrink it but for mobile let's have a look no I'm happy with this I think this is decent so I'm gonna leave it and save us and save let's have a look at the next section that we have and actually this is it we have one more section and this section is the footer so I'm gonna have this on my right side so I can copy and paste some of the text and the footer is one of them if I show you the footer is one of them master masters which if we edit on one page we'll apply on every single page out there here we have some text that I didn't change earlier and the the full text was white so if we start from here let's click on this make sure that the text is set to white and inside here what do we have so copyright 2023 I'm gonna say 21 by and then I'm gonna say so let's say 2021 I don't know zoo 365 is the name of the website and I can say created by ready on editor x and then if I wanted to I can click on my name and then where's the link I can link my website so I can do web address and I can do hcdps and slash slash ready dot com dot uk done it's linked I think I have a little space it's linked and that's looking good that's part of it but if we move this to the side for a second what I'm gonna do is let's first of all measure how big this is so I'm gonna grab a square and this is going to be roughly 652 so I'm gonna say minimum width on this footer to be 652 652 that's it I'm gonna move this for now at the bottom and what I'm going to do of course we're gonna have to undock it but what I'm gonna have to do in here is I'm thinking of adding a container which I can split into a few different sections let's have a look at how we can do this so if we go to the plus sign we can grab a new container here it is I want the container to have the width of 80 to the left and the right so any margins from the left need to be removed and the right of course I need to keep changing this just because I want it to fit so that's looking good and for this container we can actually apply grids in the container so I can click apply grid and here we have quite a few useful grids that we can use and the one that I want is this four by one so let's click down and as you can see this creates kind of like a separation columns which is pretty cool but also we can further modify them by doing container and adjust grid sorry and then we can edit the grid so edit grid and what I want to do is the gaps so I want to put 16 pixel gaps between every single column here and you can actually use this and drag around if you want one section to be bigger than another and so on so I'm happy with this I'm gonna go with done and we can actually start populating some of the text so I'm gonna put this on the side and start copying and pasting so first of all let's drag a new title so that will be a title let's go here let's make it small so it fits in the column here and if we open the inspect actually let's make sure that this doesn't have any margins is docked from the top width is set to 100 and this is actually going to be centerline so that's fine as long as this text is white so I could potentially just click white just in case and we should be good to go so this is all good I actually like the size of it as well and let's start populating stuff so this will be find this I can actually copy this paste it move it to the second column like so this one will be get assistance copy paste move on to the next one this one will be company copy paste move on to the next one and this one oh let's remove this this one will be keep in touch like so and now we can start populating some of the text so for the text I'm gonna go ahead and add the paragraph the paragraph is still set to black for some reason so maybe I can go to colors and double check this now they will seem to be set to white interesting anyways the paragraph we can edit and set the color to be white and now we have some fake address that I found over on the internet I kind of made it up as well then we have we have the Facebook sorry we have the messenger and we have Twitter I could potentially do them a separate a separate text and add the icons as well so let's do that and see how it goes so I could potentially let's cut this out and let's copy let's copy this one paste it and I'm just gonna paste this one at the bottom I'm gonna say contact then to there and then I'm just gonna make this contact box box sorry a lot smaller oops a lot a lot smaller now I can copy this box here and say messenger we need to make it a little bigger and I need one more and I'm gonna say for the next one I don't know if it's gonna fit Twitter DM yeah I don't know if I in have space in here all this can be docked by the way uh maybe I can do that um this can be spaced a little bit better like so um and we need some icons actually haven't here we go embed in icons so here we go we have a lot of icons in here that we can use they don't seem to have social HTML frames is social okay they don't seem to have the messenger icon which is a shame I'll have to export it quickly and they have Twitter though so we can use Twitter just change where is it let's paste in here let's just change uh so what I'm gonna do is quickly export both icons should only take a second so first of all let's go to export and then let's jump back in editor x and then let's add we need a quick add shape and the shape that we want to add will be change basic shape upload media and I'm gonna drag both of them here it should take a second first of all let's drag the messenger let's make it super small position it the icon position stuff with the arrows which is super helpful as well and for the Twitter let's copy the same one paste it and then we can do change back to art and then Twitter at the page the same size so I can potentially just click on the Twitter and just change it and add it here could potentially space them out very crowded in here now okay uh that's not bad potentially it could make them smaller or space the text out a little bit I don't know but but you get the point you can do this all right of course I'm gonna have to link them and so on but let's finish the rest so we have a few links in here so what I'm gonna do is for the links I'm just gonna grab this text and just there are quite a few ways of doing this actually but what I'm gonna do is I'm just going to list the stuff with text for now so let me just copy and paste them like so and potentially I might want to maybe just paste do the line spacing a little bit more oops paste how is the line space actually this line spacing is pretty good and of course I would link them one by one and so on then I can copy this paste there have it under here under company and let's change that as well pretty cool and then we have keep in touch then this will be another form so let's copy and paste the text align it like so and just copy and paste the text from the wxd for keeping in touch there are quite a lot of options but if you go to the app market and do get subscribers I think that we can use this one get info subscribers and payments with forms so I can view up and then add to site that's probably the easiest way to add it so here we go we have contacts subscribers sales leads and so on so I'm gonna click on subscribers choose template and this should help me out with the form so here it is I mean it's gonna need a little bit of change so I'm gonna click on the field here and let's go change and so background yeah background let's go for white and I think that pretty much fixes most of the issues this button is black I mean kind of like it but it's pretty hard to see as well I don't know what to do with it yeah it's pretty hard to see to be fair so what I'm gonna do is make this button background color maybe like slightly gray okay and now I can select this move it inside here first of all and I'm gonna have to shrink that quite a bit have a look on this so this is centerline but I want this to be 100% I want the button to be 100% that's cool and now if I click on the get subscriber form hopefully I can just scale it all or just can I do 100% maybe yes but then the container I was wondering if I can do 100% on this technically speaking okay now that it's inside I think that I can do it here we go now it's inside I can put 100% and that seems to work and that's perfect of course I'm gonna need a little more space so let's do that let's grab it move it maybe actually let's leave it as it is and just go inside 100 here we go margin to the left we have some margin left and let's remove it okay that's pretty cool we have our submit form as well let's save and see how this looks like potentially this looks fairly close to each other but let me have a look on the big if I publish this let's refresh scroll down and that's actually not too bad the only thing that I need to remove is the container border which I can do this form should be working out but as you can see the hover effect isn't so great so I'm gonna have to change that as well but yeah I mean potentially a little bit more space between them so let's click on the actual container go to just greet edit greet and I'm gonna say 22 okay this doesn't fit now so maybe we can just fit I mean it will probably fit on full screen but just to be safe we can even do this just stack them and now everybody is happy gotta mess around with this but yeah that's pretty cool and yeah I forgot to do the hover on this so let's edit this and then go here so we have regular we have hover okay here we go hover let's do white and what else do we have we have focus um yeah focus needs to be changed let's say white focus but maybe we need to have like a blackboard or something you know you have to play around with this and then error that's really cool that you've got this option as well for the error you can change the color as well but I'm gonna go with white with a red border I like this save this and that should be now fully working the last thing let's have a look at the design the last thing that we have obviously we need to remove the border we have this image at the bottom which I can do and we have the social icons now for the social icons we can export all of them so file export selected all right and now first of all let's remove the border by clicking on the container and then here border we can just put it as zero and just like that the container is gone of course we're gonna have to make sure that this is responsive in a second but uh let me first of all let me first of all add the icons and then we'll align everything so if we go to plus then we can do shape I mean there is a social bar option but I'm not sure how to change the color of them so so this is the first basic shape and we need to change the color okay so let's change this first of all to whatever was the first one Twitter Facebook Instagram so let's upload Twitter Facebook Instagram LinkedIn and that's it oh we have to it twice that's why so let's add the moon and let's start with Twitter add scale it down a little bit obviously make sure that you link it we can now copy and paste if we're happy with the size then we can change the artwork to Instagram copy paste we can change the spacing between them first of all change that would be LinkedIn probably and then last but not least we have Facebook so change art Facebook and we should be good to go so if we grab all of them together we can equally space them first of all I think they're already equally spaced but it looks way and then we can group them and now we can move them to like around here and we'll document say for this I'm thinking of going so this needs to be right here in the middle somehow we could potentially put the icons in the own container so I could do add container move the container here to the bottom maybe I need to resize it quickly like so and then we can put the social icons inside and now we can use this container excuse me let's do that now I can put this in here attach here and now we can use this container to move the icons however we like centerline them and so on and maybe I don't know if I should dog this from the top potentially or maybe or maybe I should group both of them here stack both of them like so and that would be absolutely fine obviously this container has the border so I would remove it and I think this will definitely work out and potentially we can do the same for this one here we could add another container or we could just align this one here like so and can I stack them oh yes I can here we go I stack them maybe that needs to be moved to the left and that needs to be left aligned and so on and that's kind of like looking it's almost getting the same as the real design the only thing I need to add is this icon here logo sorry so to do this I'm actually going to have to explore this as well so let me click on this and this group and then export selected and desktop let's add a new shape now let's change the shape so change shape then we can upload our own one I've got a filter logo now let's add this to the page here it is we can scale it as much as we want we can align anywhere we want like so maybe maybe even bigger I don't know maybe even like this that would look pretty cool of course this is gonna have to be outside here I think that would look cool actually maybe if we just need to maybe we just need to like set the margin to the left and the bottom to be zero I'm going to leave the docking to the bottom do I need to dock it from the top as well I mean let's let's just dock it from the left side and middle so I think that would work and obviously we need to go to the layers and move this vector add underneath pretty much everything so everything is readable of course we can mess around with opacity and all that but if we save this actually let's publish quickly and if we go to the desktop version that's looking cool as long as there is no scroll to left and right that's how I want it I mean there is a little bit of scrolling here maybe I can fix that and maybe I can add a little bit of padding at the top so so what I'll do is I'm going to move this down quite a lot because as you can see we have plenty of space let's move everything whole stack oh I didn't stack this for some reason so let's select this one as well and click stack so now everything that is stacked we can potentially actually I can click on this and undock it from the top just make sure it's positioned at the bottom remove any of the margins like so and that's gonna be in the center and I can do the same for this maybe I can undock it maybe have it in the middle remove this from the bottom maybe make a small outside and again undock remove that's looking cool and I'm just gonna shrink this down okay I think that this is actually going to do the job let's save it let's publish it one more time and have a look and of course we need to make sure that this is mobile friendly so we're gonna have to do that next but yeah I'll probably make some space and fix this at the bottom but that's pretty much it let's make sure that this works on mobile now so if I click on tablet it all messed up so if I click on this we can go to adjust grid and we can do the grid to be one by four this side so from top to bottom and that will change everything for me which is amazing we can potentially center line stuff and align stuff a little bit better definitely could make these smaller I'd say move them around what else the maybe like a little bit of padding between them so if I do if I click on the actual container if I edit grid edit grid we can do the spacing here as well so let's say 22 as well that would give us a little bit more breathing space and that's looking pretty cool actually the logo is here now let's dock here let's dock it from the bottom left margin zero I think I think the actual SVG stops here and that's why it was giving me issues but yeah here we here we go we can do this and that's looking fairly clean to me maybe we can go to mobile that's pretty cool as well for mobile one thing I'll probably scale this down a little bit actually let's have a look so the whole thing can be actually moved to the left here so I go to container or is this stuck now yeah stuck I can move the whole thing to the left that fits a little bit better we can even shrink it down if you wish and dock centerline and dock remove any margins and this will be centerline pretty cool uh yeah we are having a little bit of issue here but we can potentially solve it so it'll probably change is it the container now we need to change let's have a look or the stack okay the reason I think okay it's getting a little bit more complicated in mobile and I feel and I feel like the reason for this is because I have too many stacks so if we go back and if we let's have a look if we start unstacking stuff so if we click on this one and then stack let's have a look at the other one as well so stack and free and stack it I believe that if we grab everything now so I click on this click on this one here and this one here and if we stack them now that should give us a better layout and of course I need to move this somehow let's have a look something like this will do the container we can click on here we go stack and then we can un-dock it from the top have it in the middle remove any of the margin now excuse me and that's looking much better that needs to be send back yeah just underneath the stack and that will be looking that's what and that's looking good that probably actually needs to be scaled down a little bit like so and that should be much that should be better now I think I had too many stacks and that's why it wasn't working well but technically speaking if I go to tablet as you can see that's already working better I could potentially have a little bit more padding at the top here and at the bottom so I could click on the actual footage and then go here and just do I don't know let's give it a little bit more room how much more do we need um let's get in there I think a little bit more a lot more okay that made a little bit of a difference so we have a little bit of padding at the top definitely can move this now here at the bottom maybe that's that's already looking so much better of course these icons can be a lot bigger of course this can be made I should have made this full screen to be honest my fault but I can just drag it centerliner here maybe we need to go to layout centerline and just remove any margins could potentially put us 100% maybe not I mean they look a little too big now yeah I'm happy with this that's fine potentially could have a little bit of padding I guess so I could move this down could potentially grab this but a little bit of padding between them like so but that's it now this is in the middle if we go to mobile it's already looking nice and clean and yeah that's why I was I was struggling a little bit because I had too many things stacked up and here we might have to just adjust a few bits and I think this might be because of my previous stack so but easy fix I'm just gonna put this as 100% and here we go that's working that can go now 100% and that's working and just this one left I believe let's go for 100% and we can yeah I'm happy with this that's all looking cool we can now save this go to publish let's have a look at our website and the only thing that's left is I believe that this image is actually I've cut it quite badly I think I should have exported the whole thing maybe but I can fix this I can re-export it and then I need to move a little bit up because it's adding a little bit of white space but this is looking quite nice in my opinion let me move this a little bit just so I can show you and then we can maybe save publish and as you can see the white space is gone obviously I can move this I can make this a little bit bigger now and if I was to inspect this website as you can see it's looking pretty professional or mobile straight away I'm pretty happy with this the only thing that I just put it no I'm pretty happy with this everything is looking quite professional menu is working and the last thing that I wanted to show you is that in the design we have a couple of pages like home about timetable shop gallery and contact obviously the video went for far too long and I won't be able to do every single page but if you wanted to add a shop that's pretty easy you can go to the market app marketplace and move and editor x or wix shall we say has an online store so if you go if you search for online store you can install this it's literally one click install so you can view up click on this and this will install the shop for you in a second it's amazing and let me quickly show you how we can add auto pages so full pages so for example let me move this to the right side we have a about page which I kind of faked here but we can add a real about page and I can just call it about and as you click on it it will actually go to the about page and you can start editing it which is amazing of course the footer stays on all pages as you can see the header stays on all pages as you can see and then let's add one more let's add two three more just for the example so this will be timetable okay and timetable and let's add one more here which will be potentially shop you know then let's add the other one which potentially will be gallery and we have one more which is contact and you can build contact pages super easy with the app market again but what I wanted to show you is if we go back to home and if we click for example on the navigation I mean we didn't have to go home but if we click on the navigation and manage menu we can from here is where we can actually manage the pages so we can remove this one and we can do show pages and now I can literally just tick all of them apply and we have all of the pages added and for example if we go to the about let's just literally let's just add a little bit of text so title and we can just call this about us and just make sure that I don't know if I need to change the text color but let's just change it just in case and here we go that could be potentially or about page of course we need to center all that but if I save this and and if I publish let's go back refresh okay now we have the full menu here I didn't do a very good hover on this of course it would have been nice if the color was slightly better on hover maybe I can fix this later but what I wanted to show you is that if I click on about just like so we have an about page with the footer the header and everything and and just like this we can start adding stuff so for example I can add a new image make this image full width I can make this I don't know let's make this let's make a presentable center line I can align it in the middle like so remove any margins maybe we can make the text a lot bigger just for the demo of course about this and if we publish this we can also another thing you can also keep the heading as it is or you can make the heading on top of the this section just like we did originally so if I click on this we can scroll down to fixed scroll and then overlap next section and just like this save publish let's have a look just like this we have a beautiful about looking page we can go back to the home nicely animated this is all looking cool hover and the button could be changed then that works all of this is linked that works such a really nice clean design here this is all text as well well this is always VG text sorry this is all working that's all pretty cool the photo is working this is working as well so if I was to submit this it comes up I think this is actually from the browser but yeah this is working the chat if we click on the chat again this is straight away so working I have to configure it further and so on and just like that you can build beautiful website designs that work on tablets, mobiles without any coding I hope that you enjoyed this tutorial let me know if you want to see more tutorials just like this I really enjoyed making them it's really easy to use the editax and create really cool websites just like this let me know what you think of editax don't forget to smash the like subscribe to my channel if you want to see more tutorials like this I will see you in the next video thank you very much for watching as always my name is ready and you watch