 Hello, today we're going to talk about the power of LiveEd Builder. LiveEd Builder is a tool that allows us to build cool, modern, and flexible pages. It allows content editors to customize how content is arranged or even create custom running pages with an easy-to-use drag-and-drop interface. A lot of people think that Drupal is very difficult and hard to use for content editors, but that is not true. Drupal is not just something like this. We can actually create very good-looking websites like this one with flexible and complex layouts and different types of content on the same page. By using LiveEd Builder, we can improve the content editor experience and move from something like this where we have to fill different fields and then we are not able to actually rearrange the content of the page to something like this other page where we can actually create different sections, assign layouts to each of them, and then create content on all of it. That is exactly what we are going to do on this tutorial. We're going to build a page like this one. And to do so, we have some prerequisites. So you will need to have a view set up in your site. In this case, I have a view that lists the three latest news in my website. You also need to have a banner component ready. So in my case, I have a block type called banner and it has a background image and some text on top of it. And then you also need some extra components that should be themed. In my case, I have this background, this screen background for this text. Also, I have media wrapper for the images and I have a collection for displaying icons and text. So let's go hands-on to start. You will need to create a new node. So what I'm going to do is I'll go to content, add content, page and that will show me the form to create the new page. You can see here that I only have the title. So I'm going to call this one about. This is going to be about page for the ACME organization. So I'm going to click on save and here we have it. As you can see, there were no more fields for it. Just by creating a node, the page will be empty. But for actually adding the content, we're going to be using layout builder and to use layout builder, we need to click the layout button. So I'm going to go to that list of tabs and I'm going to click on layout. This takes me to the layout builder page. You can see that we have a blue section here. This blue border is for the actual content for your layout builder. So here, the only option we have is to add a section, but we will add as many sections as we need to build the layout that we expect. So I'm going to create a new section. I'm going to click on that button and it will open these sidebar for us to define where he's going to be the layout of that section. In this case, I want to add a banner first. So it will be just one column. I'm going to choose that option and then I will have to add an administrative label for this section. So in this case, I'm going to call it banner section. If you don't want to add a name for it, that's totally okay. It will be called section one. I'm going to click on add section and now we can see that below and above the banner section. We have more options to add more sections to it and inside of the banner section, we have a new action called add block. So we can start adding content directly or we can keep adding more sections and assigning layouts. So in my case, I want to add the banner. So I'm going to click on the add block and I'm going to choose an option from here. I want to create a whole new banner for this page. So I'm going to click here on create custom block. If you have different block types created all of those block types will appear here. In my case, I want to create a one for the hero. So I'm going to choose that and it will allow me to fill the fields for that block type. So I need to add a title in there. I'm going to call it a valid banner. We can choose to display the title of the block or to hide that. So I'm going to hide it because the banner should be just like the background image and a text and then we need to add the media and the text. So I'm going to click here on add media to add my banner image as this is using media library. I can choose from one of the images that we have already added to the website. I'm going to choose this one. That has the forest when you start that one. And then I'm also going to add the hero text. So in this case, the hero text for my component is going to be we plan freeze around the glove. So I type that in and then we need to define the light out in this light that I have the option to align the text to the left to center or to a right. I'm going to leave it to the left and I'm going to click on add block just by doing that. I will be able to preview directly my banner in the section. We can see the block, but we can also keep building the component. We can add more blocks into it or keep adding new sections. I'm going to show you the guide that we're following. So remember that we have this site that basically has the runner and it has this other text. So I'm going to follow the same pattern. I want to add another block that is just one column wide. So I'm going to click on that block for the same section. Once you click at block, it opens the sidebar again and I can choose from any of the options we have in here. So I'm going to click here on create custom block again. And this time I just want to add some text. So I'm going to choose the basic block type. It will open a form and we can add our text in there. So in this body field, I'm going to add the content that I want to be displayed in there. I just pasted that in there and if I want to give out an extra style to it, I can do it. For now, I'm just going to select my text and hearing the styles drop down. I'm going to choose one of the styles that I have. I already have this one set up for having the background to be green. So I'm going to choose that one. And that's it. We need to add a title because we're creating a new block. So I'm going to call this about acne. We can then click on add block and you can see it in here. As you can see, we are also seeing that text about acne. So what I'm going to do is I will edit my block because I don't want that to be seen and I will uncheck the option for display title. You can see it here. So you on check that click on update and that way I will have my page updated. If we want to keep adding more components, this is the way to do it. So I'm going to click here on add block to add the view. In this case, I will come down to this section for the list spews and I'm going to choose one of the feature news that I have. I choose one of them and then I will be able to see the elements in there. I can display a title. I can even override that title and that's totally okay. So I'm going to click on override title and I'm going to call these featured news. I can add the block and it will automatically get those elements. So you can see here the title and you can see my news being displayed in there. If we want to add more blocks or more sections with different layouts, we can keep doing it. So for example, here I can come and click on add section and create another layout for it. So in this case, I'm going to add these two column. We can define a column width. So for example, I can add a 3367% and we can add an administrative label. I'm not going to do it. I'm just going to click on add section and you can see there that now this one is called section two and you can see that we have an option to add blocks on both sections in the first column and in the second column, we can keep adding elements in there. So for example, I can come here, click on add block and add whatever I want. So in this case, I'm going to add an image and a text. So again, I will create a custom block. I'm going to choose the media and in here I'm going to choose my media elements. So I'm going to click on add media. It will open up the media library and I will be able to select some of the elements. So for example, I can add this one between in the hand. I select my media element. I click on insert selected. I will add a title for it. And I'm going to add the block. We will be able to see it automatically in this page. And here in the second column, we can add something else. Again, click on add block create a new custom block. For example, I'm going to choose basic. And this time I'm going to add some other text. So I'm going to add a title for it and a body and some link. So in that body field, I'm going to add the content I need. So I'm going to set that the first paragraph is actually a hidden and then the rest of it is going to be normal text and the last line is going to be a link. So I'm just going to select it and using the rich text editor. I'm going to add a link to it and select my link. I click on save and I'm going to click on add block. Remember to add a title for the block and I'm not going to display that title in this case. I'm going to click on add block and we will be able to see it in the preview. I'm going to click on safe. That's safe, but then is at the top of the page. So I'm going to click on safe layout and we will be able to see how it looks like. As you can see here, we do have our banner. We have this text talking about Acme. We have the list of the feature news and we have our other block. As you can see, we have that extra title in there that we don't really need. So we can go back and edit our component to remove the title and to do it, all we need to do is come back to log out, find the block in the page and edit it. So I'm going to scroll down until that section. It is down here. I'm going to click on the pencil for it. I'm going to click on configure and that way I can edit the content of my page. Once I click on configure, I will get the sidebar appealing and I will be able to not display the title. I don't check that option. I click on update and that's it. We could also reorder the components. So for example, we could move these from here into another section just by dragging that element and dropping it in the new area. So let's say I want to place it here. It'll be totally okay or maybe in the first column. That will also be totally okay. We could come back, click on safe layout and get the results. You can see here we do have our component and we have all the elements showing up as expected. So this is how you can use Layered Builder to build very nice looking pages in a very flexible way and robustly. So thanks for following and we'll see you next time.