 Hey everybody, my name is Roddy and you're watching my channel Roddy the Brand. Today we're going to design and develop this website on the screen using the Editor X platform. It will be a long video, if you wish to skip some of the sections, the video will be timestamped. This is a sponsored video, but I wanted to let you know that I only agree to sponsored videos for tools and companies that I like. Editor X is part of the Wix.com company, but it's a separate creation platform and separate brand. It combines both powerful Wix web infrastructure and business solutions. At this point you might be wondering what is Editor X? Editor X is an advanced web creation platform made for designers and agencies. Some of my favorite features include the advanced flexbox options, grid, the docking system is pretty cool and also being able to choose and edit photos straight in the editor which we'll explore. If you have any questions, please comment below, don't forget to like the video and consider subscribing to my channel. Now let's jump on the computer and get started. Welcome everybody and let's get started by developing and designing our first website in the Editor X. Now if you want to follow along, the link will be in the description below or you can simply go to the editorx.com website and register. As you can see I have already created an account so I can simply go here on the right corner and just create a new site. But if you create a brand new account, Editor X will probably prompt you with this screen where it's going to ask you which platform would you like to use and of course we're going to be using the Editor X beta today. So let's go ahead with that and I will be making some sort of a blog website today. And then the last step would be to either start a website from scratch, a blank canvas or choose one of the many themes that they have in here and as you can see you can see more templates here. I'm actually re-recording this video now because I had some audio issues and I can see that they've already added new templates in here which look pretty cool but yeah they have hundreds of really cool templates and they add in new templates every day and I suggest you to maybe explore some of them and see how they're made, see how elements are positioned, just play around so you can get used to it. But today we're going to go hardcore and we're going to go with a blank canvas so let's click edit and continue. This is how the blank canvas website looks like basically we only have one page which is the home page and we have three sections. The three sections that we have as default are the header, an empty section that we can start adding elements right away in here and we also have a photo section. Now before we do anything I was thinking that maybe we can get familiar with the tools available in the editor X and then we can start developing and designing a website at the same time. So let's get started from left to right and I will explain each tool and I will explain every single tool. We're going to be using all the tools anyway so you're going to learn much more as we go along. So the first tool that we have on the top left corner here is add elements. We're going to be using this quite a lot and this is basically adding any types of like text, paragraphs, buttons as you can see. We have images, videos, containers, sections, some really cool layouts here that we can choose from and there is so much you can choose from different pre-made compositions in here. As you can see they will look really cool and professional. All of the sections here are mobile friendly so all you have to do is basically just click on one and it will be applied on your page which is pretty cool and there is tons of them we're probably going to end up using a few just to show you how and we can actually and I will actually modify a few just so you can see how you can extend the designs that they've already done or if you wish you can create custom ones it's fairly easy to do as well. Then we have different layout tools, different types of text, buttons, menus, media, there is quite a lot to explore. On the second section here we have a few different things but the only thing that we are going to be focusing on today is the blog. I will show you how we can create a blog, we can add it to our website, we can link some of the blog posts to our homepage with a custom design and so on. So let's go to the next section which is layers. Now layers will be quite important when we develop our website. If you're familiar with HTML basically it's the same thing you can structure your website in different sections, different areas and so on. Now this can be quite useful when we have a lot of sections so we can move them around up and down and position them the way we want. Also each section will have multiple layers, for example a section can have an image, a video, text and so on and maybe you want to position the text on top of an image and this is how the layers work. If you're familiar with any design tools it's more or less the same which is pretty cool. The next bit that we need to focus on is the masters. They're basically reusable sections. For example if you want to stay consistent and if you want to have the same header output across your website you can create them in here, you can modify them and apply them to all of your pages. That means if I ever want to change the logo and if I have 10 pages the logo will actually update on all the pages across and same this we can actually create custom sections, reusable sections where we can just add them on any page that we like and once we update the section again it will update on all pages which is pretty handy. Now let's go to the next bit which is pages. This is self-explanatory pages. This is where we'll be creating multiple pages and that's pretty much it. This is where all the pages will be listed. The next bit is the theme manager. The way I see this is kind of like branding of your website. You can set different headings, different fonts for your headings. As you can see we have heading 1, 2, 3, then we have paragraphs and so on. You can set up the different colors, you can set up different fonts and so on. Let me just show you quickly the colors as well. You can set up different colors in here which can be quite handy to access later on when you design in your website. Now let's move to the app marketplace and the app marketplace is what it sounds. It's basically a huge marketplace that you can find pretty much anything like any third-party application that you might want to integrate to your website or you can use the Wix solutions which are pretty cool as well. The reason I'm mentioning this is because we're actually going to be using the Wix block today. The fact that they have so many apps around here that you can use and integrate to your website, it's pretty cool. The content manager, we're not going to be focusing that much today but basically you can build custom forms and collect visitor information and so on and in fact we might end up doing an email sign up form later on but that's pretty much it. So let me close this and continue. Now the next bit in here is the pages. Basically when you click this all the pages will be listed and you can just select on which page you want to work on. Also you can click on manage pages which will be obviously if you want to manage the pages. The next bit here is the responsive viewports. Now this is really handy when we are developing our website so we can quickly toggle through desktop, tablet and mobile and also they have this really handy drag to resize bar here which will help us to just check the website where it's working on all breakpoints as we want it to be. And the last but quite important thing that I need to tell you about is the inspector. Now the inspector will be quite useful at the moment we don't have anything in the inspector and this is because we haven't selected an element. So if I was to select the header you will see that we get quite a few options. For example there is alignment options in here. We have size options, fixed size, fluid size, width, height, minimum width and so on. So yeah this will be used quite a lot to mainly align stuff, position elements with margins, buddings, scrolling behavior and so on. So yeah we'll be using this quite a lot. Let's start from top to bottom which means that we're going to start with the header. The first thing that I want to do on the header is change the background color. To do this I can just click on the header and we can go to this paintbrush here which is the design tool. So if we click on this, this will give us the option of changing the background color. So I've already prepared the background color in here. So I'm just going to press on this little square here to change it and in fact I'm going to add this color inside here. So just in case I wish to reuse it later on. So let's add a new color and paste the hex code add. And I believe that this is the one that I have inside here. So that's it. Let's close it. Opacity is 100% because I don't want it to be opaque anymore. And let's close this. Now the next bit that I want to do is change the branding of the website. So let's click on this vector art logo. Just notice how this is positioned. As you can see we have this line on the left side here. And if I go to the inspector you will see that the logo is actually docked to the left side and there is a 60 pixel margin to the left which is a good thing. Now when I change the logo and resize it we might need to adjust this a little bit. So let's close the inspector and change the logo first of all. So I can go to change vector art. And by the way the logo has to be a vector. And to be honest vector files I believe that they load much faster than images. And not only that they always look sharp especially if you're visiting the website on retina displays which most people have nowadays. You want your branding to look sharp as possible. So let's upload the SVG that I have. And funnily enough actually created this logo with the Wix logo maker which is pretty cool. So let's quickly... oh yeah. So let's select it and add the page. And as you can see the logo is a little bit smaller than I would like. So we can use the corners here to drag it. And you also maintain the aspect ratio first as well. We don't want to squish our logo because that would look quite bad I guess. But we want to make it something like this quite visible I think. And also we want to center align it just like so. And I think this looks good. But notice that the logo is actually now docked at the top as well. And this is because I move a resider and I move the position. So what I want to do is go to the inspector and quickly undock it from the top. And hopefully if I was to ever change the size of the header. So let's say at the moment it's 100 pixels. Let's say I want it to be 200 pixels for some reason. As you can see the logo always stays in the middle. And this is why the docking is pretty cool. So let me go back and we can actually use shortcut Ctrl and Z to go back if you wish. Just like so. And it's going back to 100 pixels. Let's close the inspector and continue with the rest. Now first of all I just want to show you that if we go to tablet mode the logo still works really well. And if you go to mobile the logo is working really well again. But inside here on mobile and tablet mode we have the hamburger menu which we're going to have to change. And it might be best to change some of the colors for the menu. But before we do this let me add a few pages so we can see the changes for the other pages. Because this home page is actually the active home page at the moment. This is because I am on the home page. But let me add a few more now. So if we go to pages inside here with the plus sign we can add maybe contact. We can add about page. Maybe we can add things to do. And last let's add where to go. And we have those pages. We can click on them to visit them to see how it looks like. As you can see the header stays exactly the same everywhere on all pages which is pretty cool. But let's go back to the home page. Let's add the pages to the menu first of all. So if I select the menu and go to manage menu inside here at the bottom you see the button show pages. So if I click on that display contact about page things to do where to go apply. This will add all of the pages. They're a little bit dark to see at the moment because the color is black. But we're going to change this in a second and I can actually reorder them from here. And in fact this is what I want to do. I want the contact form to be the last page. Sorry the contact page to be last. About I think actually cooler about page. So I'm going to have to go back and edit this quickly. So we go to here and just rename this to about instead. Okay this is much better. And let's go back to the home. Close this and let's change the styles of the menu. So if I click on the menu and click on the design icon here. Then we can go to text and just change the color of the text to maybe white. Something that has a lot more contrast. I'm pretty happy with this actually. It looks pretty cool. Of course we can change the hover effect as well. So maybe the hover we can have it close to white. Maybe even this would do. I think we might have to test this. But I think this would do for a hover effect. This is also the active I believe. So maybe we can just have it as less, less dark. Something closer to white I would say. And that looks good to me. I'm pretty happy with this. So let's go back. And as you can see like there is quite a lot of stuff that you can do in here. But I'm not going to go through absolutely everything. So this is all good. But when we go to tablet. We have the hamburger menu. So all I want to do on this is just change the icon itself to white click on the icon. Then design and then go to fill color and opacity. The one that I want to change is the icon. So let's change this to white. Close it. All right. Let's preview the website quickly by clicking the preview button in here and see how it looks like. So this is the tablet mode. As you can see, this is looking nice. If we press it, it has a real nice animation. Of course we can also design all this. But I just want to save you time and show you the important stuff in the editor X today. But maybe we can do more advanced stuff another time. This is looking pretty cool. I'm happy with this. And if we go to tablet, sorry desktop, this is also looking pretty cool. And I'm happy with this. So if you click on about, you will see that now the about is clicked. Things to do. It's clicked. And so on. All right. This is pretty cool. I'm happy with the header. Now let's click back on any site and move on. All right. The next bit will be to design or hero section. And to do this, I'm actually going to be using some of the premade components from the elements menu in here. But first of all, I'm going to remove this empty section by clicking on it, right click and delete. Or you can press the backspace button and that will remove the section. All right. Let's add a new composition. And the composition that I want to add will be the first one here. So let's just click on it. And if you want to change the position of the actual section, the two ways of doing it, you can go here under layers and just move the section by dragging it on top of the footer. Just because I want it to be under my header, of course, this is the hero image. So it's going to be at the top of the website. And then we have the footer. So which is great. And there is another way of doing it. You can click on the section here, right click and just click on the section actually. Yeah. And then go to more actions actually. And then we can move it down and there is a lot of other options. This is predefined, but I want to change a few things and make it our own. First of all, this is quite a big header. It takes the full height of the available space of the screen. So it's kind of like 100%. So let's change that quickly so I can click on the section here. And if I go to the inspector, then I want to change the minimal height to be around 80, like so. And that would do the job. I want to edit some of the styles here. But before we do that, let's quickly change the text. So let's do Costa Rica Costa Rica. And as I might as well as I'm here, I'm going to change the letter spacing a little bit. Maybe just put as 0.1, something a little bit different. And then I'm probably going to be adding a little bit more text. At the moment, everything is basically grouped and stacked, which means that if you add more text, all of the elements will be stacked and they will work responsibly. They won't mess up the layout if you add more content. If the content is coming from, for example, from a blog post dynamically, that's basically it won't mess up. Saying this, I'm going to mess it up a little bit because I want to add another heading here. So what I'm going to do is actually I'm going to unstack this. So if I click on the stack, right click and unstack. This will stack the elements for me so I can freely move them around. First of all, I want to change the design of the button because I'm not a big fan of those ones. So what I'm going to do is click on the button, click on design and then just change the quarters to 0. These are linked so all the corners will change. But of course, you can change them individually by clicking the link here. Of course, you can check out the hover effect as well if you wish. Let's change the contact us button as well. So design, corners and 0. The next bit that I want to do is add a little bit of text at the top. So what I can do is either I can go to the add elements menu and drag another heading, or I can simply duplicate this by doing Ctrl and D, which is a shortcut, or you can right click and just duplicate. As you get used to it, the shortcuts will make your process much quicker, of course. So they're worth looking at. And let's change this text to something else like explore. I'm going to actually change the font for this. So let's go with Futura, something more. Yeah, that would work quite well. I want to make this a lot smaller actually. That's actually not too bad. So let's just change the explore character space into something like this. I think this would do. Let's click off it and just position it here for now. Now this is actually looking pretty cool. Obviously this image is a little bit dark and I'm not sure if this image is from Costa Rica. So we're definitely going to have to change the image in a second. But before we do that, let me actually show you how we can stack those elements and which will make it easy to position. We can centerline the whole block. And of course, if we ever expand the text, the text will stack. So to do this, we can click on explore, hold shift, click on Costa Rica. And by holding shift again, I'm not letting go of the shift. And then clicking on this container here, then we can click on this stack button here. And this will stack all of the elements for us, which means that I can move them around and position however I want. So what I'm going to do is position this in the center of the page. But I also want to undock it. So let's go to the inspector and undock it from the top. The reason I'm undocking it is because if I ever want to change the size of the hero image of the heading here, I want this section to always be in the middle. And this will actually probably help us with the responsive design as well. So if we want to check it out on the other screens, we can go here. And as you can see, we're going to have to change maybe a little bit of the size in a second. I don't know about we're going to have to change it. But this is literally one second job. And I'm going to do this in a second. Now, before we do anything else, before we change the design anymore, I want to change the image. To change the image, click on it, change image. And then Wix has a few different options. You can A, either upload your own photos. B, you can upload from the Wix media, which is pretty cool. So you can use any of those images. And as you can see, they're all very professional, quite nice actually. We also have two more options, which are Shutterstock, which is a paid service, I believe. We have Unsplash. Unsplash is the website that I pretty much always use for most of my tutorials. So I'm going to use Unsplash today. They have so many images. And usually all you have to do is give credit to the creator. So let's go with Costa Rica and find some images. This basically savers from going to Unsplash and downloading the images, uploading them and so on. We can just check them out straight away from here, see whether we like them or we don't. So the one that I'm actually going to use for my hero image is this one here. This one is created by Max Bender. So let's click on the image and update. As you can see, the image was updated straight away, which is pretty cool. But it doesn't look that great. One feature that I really like on the editor X is the focal point. So I can actually change the focal point to this image. To do this, you can just simply click on the image and then go to the focal point here. Then we can change the focal point of the image and maybe we can just around here, around the mountain. It's not really a mountain, but you get the point. Okay, this is actually quite nice. I really like this. So we can close this now and we can actually change the focal point on different viewpoints as well, which is pretty handy. Sometimes you might not get good contrast between your text. So if I go to mobile, for example, maybe, I mean, as you can see here, we don't have a good contrast. So I could potentially change the focal point to be a little bit down here. So where is the darker part? And that would work absolutely fine. So I love this feature. It's pretty cool. Maybe we can change this to black. I'm not too sure. Let's have a look. You can always experiment, I guess. I don't know. Maybe it needs to be the yellow color. I have to mess around with this and choose the one that I like. I don't want to waste any more of your time. Me just messing around with colors and so on. And let's just go ahead with this for now because it doesn't look too bad. The next step I want to focus on is obviously fixing it on tablet. And this will be actually a fairly easy task. So what we can do is go back to tablet. Now we could, there are a few ways of doing it. We could select the whole stack and just maybe like expand it. And in fact, let's go to the inspector and do it as 90%. And I want to dock it in the middle of the page. And as you can see, this is already working. The only thing I probably would change is this text here. So let's change, let's just change it by clicking this here. And that's pretty cool. So let's go on mobile now and do exactly the same thing. Maybe the whole stack can be 100% this time. No margins, zero margin. And then it's stacked in the middle. So maybe let's go for 90% have it docked right in the middle like so. Actually, this needs to change as well. I think this needs to move inside here. This is going to take a little bit of playing around, of course. Everything should be stacking inside here. Let's just say 100%. Oh, I think the text might be a little bit too big. So let's just quickly change this. Okay, this is a little bit better. I mean, and then we can actually remove any margins. Have it fluid. Have this one 100% the buttons. I think they're with, or maybe it's the buttons that is breaking. Yeah, I think it might be the buttons that is breaking the layer. So let's have the buttons 100 instead of pixels, 100%. Is that going to work? And yeah, okay, this was what was breaking it. It was the buttons. So I can now do this 100%. And as you can see, this is center aligned. It's looking okay. Maybe I would probably change the size of the section now. So click on the section, go section here and change it to like 400. Make sure that the stack is docked in the middle. So I think that might work. So let's go back. That's looking nice. That's looking nice. All right. I'm pretty happy with this. Obviously we can mess around with it more and improve the design, but we've already spent enough on this section. The next thing that I want to create is the block. Let's go to the app marketplace, scroll down and find the block. And also you can search for it, but I know that is around here. So I can click on Wix block, add it, then add to site. And this will ask me to choose whether we want a simple block or we want a block with a member's area. I'm just going to go with the simple Wix block. So let's click there. And just like this, our block should be now working. This is actually the block page. As you can see, we have free demo articles in here which we can visit. And maybe we can explore later on. Also, we need to add the block page to a menu. So let's click on menu, manage menu and show pages, click block, apply. And then just drag the block and run here maybe. Yeah. I think that would do. Let's do that. And if we wanted to see the block super quickly, I will show you how it looks like. So if we go to preview, we can click on one of the block posts like so. And you can see that you have a nice little avatar, your name and all sorts of cool stuff. All the block posts, they have rich editors so you can add any sorts of media. Very easy to edit and add more contributors to it. And yeah, you can have a comment section. It's pretty cool. So this is pretty much the block, but I'm not going to do much more on this for now. I also want to mention that they are SEO friendly. So if I was to edit this super quickly and manage post, you will see that they... Let's have a look. Every single block post in here will have a lot of settings, SEO friendly settings that you can change like the slug, the page title, categories and so on. And let's actually change this photo here to something more like Costa Rica-like. So let's go to unsplash Costa Rica. Let's just choose this monkey. And I'm not going to update the block post itself. I'm just going to choose the cover photo and publish this. Let's do the same thing for the editor too. And the reason I'm doing this is because we're actually going to pull the data from our block post to the front page. So it shows always the latest free block post with the images and links. It would be pretty cool. So let's update this one as well. Unsplash and then Costa Rica. Let's publish this and go back to our home page. So to do this, we can go to home. Okay. Let's now create the second section, which will be basically displaying the article. And to do this, to save us a little bit of time, I'm going to use another one of the premade compositions here. And the one that I want will be leave. We can either choose this one here is pretty cool. The one that I wanted to use is kind of like a free column section. Yeah, this one here, I quite like this one here. So let's just use this one here. Add it. And instead of services, let's just rename these two articles. Now to hook up the data from the block post, we're actually going to have to convert these sections into repeaters. And first of all, I've seen that this is actually overtaking my header section. So what I'm going to do is quickly move this down. Okay. And now we can focus on this. All right. As we can see, this is actually already repeated if we inspect the element here. So technically speaking, we should be able to start connecting all data. But I think in order to create to connect the data from the database, we might have to go to the content manager and just click at the site. Let's have a look at whether this works. Okay. When I clicked on this, this actually enabled the connection bit. So yeah, I think I had to go to the content manager and enable it. So it shows me this connect data. So if I click on the image and click on connect the data, we should get the connect repeater. And what I want to do is connect this image to actually first of all, we need to create a database or data set. Sorry. And then choose the data set, which will be post from blocks. And we can just keep this name post database create. And now I can connect this image source to the actual curve image like so. I can connect the old text of the image to the title. Two tips could be the title as well. And link link could be the post page you around. So let's do that quickly. And I can do the same thing for the title. I can click on the title, connect to data. And then just select text connects to title text. And then last but not least, I can connect the text in here to maybe the exit of the blog post. So we can do text connects to the exit text and we're pretty much done. Now I could actually add a button in here and that would repeat three times. So if I was to do that, let's have a look at the buttons. I don't know if I want to add a button now. But I could have at maybe like read more, but yeah, let's add a button. So this button will go under here and it's going to be a stacked button. So if it's nicely, as you can see, I like the alignment so far. It doesn't look too bad. And instead of view more, let's edit this text to read more and add link. Actually, instead of adding link, we need to connect this to another data. The click action connects to and this will be post URL and label connects to title. And as you can see, this repeated three times. It hasn't actually updated, but I think when I save it and preview it should update. So if I preview this, actually, yeah, we definitely don't want this text. So what I'm going to do is go back quickly and unlink the actual label. I don't want that. So not connected. All right. This is much better. So we just read more. That would be this way. And let's preview this. And as you can see, we have to read more buttons. They are taking, I should have changed the colors, but it's not a big deal. And this is now linked to the actual blog post. As you can see, the images are coming from the blog post, which we can actually see here in a second. And actually let's, yeah, let's read this one here. As you can see, it will be linked. Edit site, easy link. Let's have a look. Link connects to page URL. Yep. Okay. So maybe if we save this and publish the website and let's click on the link here and let's go down. Let's go down. And as you can see, we can click on read more. And this will lead us to the blog post, which is pretty cool. And as you can see, if we go to blog, the same blog posts are listed. So that's pretty handy. I quite like this feature. The next bit I want to do is let's go back. And obviously we need to link this button as well. So let's change this to view or articles like so. And then actually just add a link to this and just do web address. So the web address will be actually not web address, pages, sorry. And then we can link this to the blog page and we're done. So this should work now and we can save. All right. The next section will be actually quite interesting. What I want to achieve is I want to basically do something exciting on the layout like the left side with a little bit of text on the right side. And again, to save time, I can use another composition from here and just edit it. Actually, the one that I wanted to use was in here in welcome. And it's one of the... And is this one here? Plan your adventure. And I think that the text, I won't have to change as well to save time. So this is a pretty cool section. And what I want to do is instead of having an image here, I want to actually embed a video from YouTube. And maybe we can even autoplay it just to make it look cool. Of course, it's going to be muted. Now, first of all, let me go ahead and pull out a video. So we can go to add media and then we can go to video box. And then we can just drag the YouTube one. We can actually provide the YouTube source with a URL. So if we click change video and I can just replace this with the one that I found on YouTube. It's like a really nice 4k Costa Rica video. I will link this in the description below as well. And if you look here, we have autoplay and you can also place in live. So maybe we can do both. And this video, as you can see, this video will be played on mute, which is the right thing to do. You don't want the audio to play on the website. It's just not a nice experience. So let's close this. And what I want to do now is I'm just going to make this a little bit bigger while keeping the aspect ratio. And I'm going to, I think this might work quite well. And I'm going to remove the image here, the one below. So I'm going to click delete. And as you can see, this is already working quite well. But I want to make sure that this is docked in the middle. So let me un-dock it. And is it centered in the middle? I think this is middle, isn't it? This, it doesn't have to be super perfect. But okay, I think we might have to just give this section a little bit like, let's just reset. Now, I like the margin on the left side. But let's un-dock it from the top. And let's give this section, let's give this section a little bit of padding from the top, maybe like 80. That's too much. Maybe at the bottom we need to do 80 as well. And I think that will look it up better. And if we hide this, make sure this is docked from the right side, which is the way I want it. And now we can use the last menu from here. And just make sure that this container of the text is above the video like so. And I quite like this. It gives it like a real nice effect. If I was to preview this now, you will see that in just a few seconds, we created like a really cool looking section like this, which is quite nice, I believe. All right, let's now continue. I'm not going to link this to anything for now, just to save time. But let's continue with the next section. And that would be like an informational section where we're going to put travel information. As you can see all the content is dummy anyway. But I want to show you a really cool effect that we can do as well. So let's add another section first of all. And I'm going to use another composition actually. And the composition that I want to use this time will be... It's going to take me a few seconds to find. And yeah, this is the actual section that I want to use. So it's in the product. And let's click on that. And I'm just going to change the text a little bit. And also I want to move this section below the plan your adventure first of all. So let's right click section, move them. All right, that looks good. And then we can just change the text, which I've already prepared here, which will be traveling to Costa Rica. And I'm going to leave this dummy text in here. And what I want to do in this section is first of all, let's change the image super quickly, which I've already showed you how to do so. Change image and splash Costa Rica. And the image that I want to use would be the one, this one here. So update. I quite like the look of it already. So I'm not going to change the focus point on this one. But what I want to do is actually give it a little bit of parallax effect by clicking settings and then scroll behavior. We can do parallax. All right, check this out now. So if you go to preview, then if I was to scroll up and down, look at how beautiful this is quite like it. It's nice and subtle. It gives it this depth of field. And obviously if I view this on full screen, it will look even nicer. So let's continue. And I'm pretty much done with this section. The last bit that I wanted to show you is, and by the way, this is the data connection on the articles. It's just flowing around for some reason, but maybe we can just have it here so it doesn't get in a way. Yeah, the post data set that is. So the last thing that we could do is I wanted to, because this is like a blog and it's an informational site. It makes sense to have subscribed to email list. And to do this, it's actually fairly easy. Let's create a custom section first of all, so we can go to quick at create a section. And this will be a blank section. We can move this section down like so. And I'm not going to put too much effort into this. Obviously we can make it nice. But what I want to do is add a new element. And under forms, contact and forms, we can go to subscribe and we can use the weeks subscribed to a mailing list form. Basically, what that would do is every time somebody signs up to your mail list. This will be actually the record will be actually saved in the database in your admin dashboard so you can access it straight away. You don't have to do any third party integration and so on. So this is pretty cool. And of course, the docking, as you can see, is docked at the top. So maybe we can change this super quickly. Like undock it. I'd actually make sure I see the middle first. I think that's middle zero, actually. Undock. And I think that would work. And obviously this will be responsive as well. As you can see. Yeah, this is all nicely responsive. It looks beautiful. The only section that I'll probably change, I'll maybe do the video to be. But this is like a design preference, more than anything. I'll probably do this to be like 90% and make sure obviously make sure that this is docked. Make sure that this is in the middle, maybe 90%, maybe more. Just make sure that is docked in the middle. Again, you can do it for mobile as well. Choose however you want to. In fact, this is okay for mobile. And that's looking pretty cool so far. So let me save this first of all. And again, and if I go back to desktop, the last thing that I want to show you is if you wanted to edit some of the other pages, you can simply go to, for example, let's go to the app page. And you can literally start adding sections, let's say about and at about section like so. Obviously change this to something cost to reckon in this case. Or this one here looks pretty cool. Yeah, someone like this. And as you can see, this is now the about page. So if I was to save this and preview, we have all about page pretty much working straight away. We have the home. And before we actually wrap up with this video, one last thing that I wanted to show you, if you want to take your design to the next level, maybe we can add a little bit of animation to the layout. And to do this, we can actually add animation to individual elements, or we can add it to a whole group of elements. So I could potentially just click on the whole stack and just do animation fade in. And I think this will be absolutely beautiful. But also I could go to the explore, click here, animation and just add fade in. And you can also time it. So this will be 1.2 seconds duration. So let's time the next one to be 1.6 fade in. And they have a lot of animation, by the way. But I just like the fading because it's quite subtle. So 1.6 is at 2 or 4. Let's do 4. And then let's add this container here. Let's add what is it? 1.8 maybe? Alright, something like that. 1.8, 1.8 like this. And last but not least, we might as well just add a little bit of parallax in this as well, just because it looks cool. Obviously don't overuse parallax, but let's preview. Let's publish this. And if we refresh again, so if we go to the website, you will see that we get this really nice animation. Maybe it could be a little bit more delayed and then we get the parallax. So yeah, I'll definitely change the animation a little bit. The animation can definitely be a little bit improved. And now the text is a little bit hard to see because of the parallax. We can always change the focal point to adjust this and so on. But from there, publish. And this is pretty much the final website now. The parallax is working really well. We have the articles here which are linked. You can view articles. We have this real cool video from YouTube. We have this nice parallax effect here. And we have the main list. And I'm not going to do the footage just because you probably already know how to do that now. And so on, we have the blog post and so on. If you stay to the end, I just wanted to show you something really funny. So let's go quickly back to the editor and go to decorative here. And what I want to do is animals of nature. And what I actually found in the video box, actually, sorry, if you scroll down, I'm not sure whether there is tigers in Costa Rica, but you can actually add this tiger, which is pretty funny, I think. And you can add it around here. As you can see, we have a really mean cat just walking around the website, which is pretty funny. And that's everything from this tutorial. I hope that you enjoyed it. I hope that you found it useful. If you'd like to see more videos like this, let me know in the description below. Don't forget to smash the like and consider subscribing to my channel. That's everything from me. Adios, amigos, ya amigos.