 I think the Hello Paragraph module can be used with Drupal8 to create visual menus, color actions, dynamic regions, and I'm going to talk about a few other adjacent things as well. So I'm also going to be presenting a case study of a recent client set I built where I implemented this idea, which actually inspired me to use paragraphs in this way. So for those of you who have never used Paragraph module, it offers a way to bundle relevant fields together. And it can be referenced like in any on nodes or maybe even custom blocks. It creates a great clean and easy to use experience for editors. And then for those of you who've maybe used field collections from Drupal8, or Drupal7, I mean, sorry, the Paragraph module in Drupal8 is a very similar concept. And maybe if you've tried to implement field collections from Drupal8, you probably have noticed on Drupal.org that you actually recommend using the Paragraph module to do that stuff on Drupal8 now. So I'm going to dive into a case study right now. The case study is for the client set that I just mentioned. They're an interior design firm in Toronto. So their goal is obviously to create some very visually appealing for their end users. So I'm just going to show you a node right now, a basic layout that you use paragraphs with. So that top one right there is a full-width image that itself is a paragraph type followed by a text paragraph type right underneath it. And what's actually pretty cool about that text paragraph type is that I used Flexbox with it, which is a way of laying out content in CSS3. And so you can add multiple values, not just one body field for that, and it'll scale accordingly. So you can have two or three or four, and then they'll scale all side by side. I'll demonstrate that in a little bit. Under that one, there is an image on top and text on the bottom that's also using Flexbox. And that's actually a paragraph type and a paragraph type. And then we did that for the reasons of having Flexbox to scale it down. So you don't just have to have two there. You could have one, the image would go full-width and the text would go full-width at the bottom. You can see how it's two right now. So they're half and half. You could do three or four. You give the client a little bit of control that way. So you kind of have to rely on them and their expertise that they're going to use paragraphs in a proper way so they can create something very visually stunning. Under that one, there is a image row, same concept there with the scaling text and scaling images. It's using Flexbox and you don't have to have just two images. You could have one, two, or three. And then under that, there is an image left and our image right, text left. There's also one not displayed here, but on the site, there is kind of the opposite, the image on the left and then the text on the right. And then at the bottom, there's another image row. So you kind of see there that there's three images. It's the same paragraph type as that top one image row, but there's three in that row instead of two. It's also really cool because it gives you that drag and drop functionality for the client and the site editors. So just say they do create this page and you decide, you know what? I don't want that two images on the top. I want that one at the bottom and the three on the top. They can easily do that without having to re-enter their content. And so what that does, I think, for the client, it gives them an easy to use experience, it's very clean. And then it gives them the flexibility to create cool layouts that are going to be really engaging to their end users. Not all the nodes they create have to have a uniform layout. They can use what I was talking about with the scaling row tags and the scaling images to create. It's very flexible. There's very different layouts from node to node. And so I think that's pretty cool. So why should you use paragraphs? Like I said, it's easy to use. It's quick to set up. And it provides clients, interstate editors, a powerful tool to have a lot of control over the site. I find that you can sometimes be overwhelming for clients, especially as they want to have never used it before. And so when using paragraphs, it kind of creates that really easy to use and consistent experience. Because not only can you use these paragraphs in nodes, you can also use them in custom blocks as well. And so, like I said, it creates a very consistent experience. You only have to learn how to use paragraphs once, and then you can use it in different types of parts of their site. And like I said, you can use custom paragraphs in custom blocks as well. And what that happens there is when you just say you place a custom block in the sidebar region, you can create these paragraph tags, which almost become like these widgets. So you can have emotional content, maybe contact information, a slider. And so in theory, that whole sidebar region becomes very dynamic. If later down the line, they don't want contact info, they don't want sliders, they can take all that stuff out and put new stuff in. So that's really good for any emotional content. If they're updating their site a lot, they can call users to different parts of their site. They can maybe use it as a simple way for advertisers to bring advertisements. And then, yeah, with paragraphs, you have the freedom to create any kind of widgets that you really want. So I'm just going to give a quick demo of the site I was just talking about from my case study. And I'm going to show you how a site editor would use paragraphs and how they could reorganize parts of their site. So this is the home page, that top part of the view. So it's not using paragraphs, but this part is. So as you can see, they're just basically called to actions all the way down to the bottom. So let's say later down the line, well, first we initially built it, makeovers is really important to them. That's what they're going to use to call in the users, to give them ideas to use makeovers in their own home. Let's say later down the line, that shop one becomes more important. Do you want to give that one the priority? So they can easily drag that shop called to action up to the top. So this is the back end of it. I like to group my fields together into a fields tab, because I find that making it dragging around paragraphs makes it a lot more easier, especially when you have multiple theories on the home page. So I'm just going to collapse those, bring shop up to the top, save. Then you can see that now obviously shop's on the top, because they're done aligning now. It has more priority over makeovers. And then that gives the client a lot of flexibility to reorganize their home page. And then you can also have as many or as little paragraphs as you want. You kind of give them the control that way you can set a limit. Or you can have them unlimited, but this one specifically is unlimited. So if later on the line they want to add a whole bunch more, they can do that. Maybe if they want to remove some and they only want three, instead of the four or five that are here, that's also an option too. Like I said, it really gives their client a lot of control over their site. So I find that they really like that. They find that their site is really their own. And it's great for development, because it's really quick to set up. It's easy to use for the client editors. So I feel like there's minimal development time spent and a maximum impact. There's also paragraphs types being used at the bottom here in the footer region. Same concept. You can have as many or as little as you want. The design for this one is a little specific, where it's always going to have three in a row. So like I said, the client has a lot of control, with great power kind of comes with great responsibility. You're not just going to have four then one hanging out. Maybe you have either three or six. Or maybe you don't want any of these at all. If you look here, you can actually have, adults should include other types of paragraphs you can include on this page. You don't have to just be basic call to action. So later down the line, if they don't want any of these, like you can move all of them, and you can put in maybe a basic text. And then it gives you that widget rig, so you can put different kinds of content. You can maybe, this one's on fully Chanel, so you can put male chip snippets maybe, if that's something you're interested in. It doesn't always have to be the same content. You're really giving your site, editors and their clients, complete control of these regions. And then I'm just going to show you real quick, what that scaling text draw, just so you can kind of see that in action. So I'm going to edit this page right here. So what I'm going to do is I'm going to take this text paragraph here. Right now it's full width, but I'm going to make it maybe two or three. So I'm going to open up my paragraphs tab. I'm just going to copy and paste this. We're going to save and keep published. So now you can see it's two side by side. And so I think that kind of speaks to the power of how you can create these really interesting layouts, really different. All the nodes are going to be uniform, and it gives this client complete control over how they want to display their content. And I think it also gives them the control to just play around with it visually. If they create something, they don't really like how it looks. They can go back and easily drag and drop or take things out. I'm also going to show another demo and just a little bit of a visual menu that we had to create for them. And the visual menu, the goal was to, like I said, have something that was going to be easy to use, easy to reorganize, something that they could play around with until they have something visual that they feel comfortable with, and which is really what inspired me to create this idea and to not create this idea, but to use paragraphs in this way. So it looks good. Okay, so I should use paragraphs. I feel like I've already kind of touched on a couple of things of why you should use paragraphs and why you can use them in nodes and custom blocks. But I do feel like it works really well, especially if you have promotional content or if the client has parts of their sites that they're going to be updating a lot. If they're going to update things like maybe the shop, if you want to call to that more often, then they can do that. And so I'm now going to show you the demo of the visual menu which I created. So I can show you kind of like how that would work. So this is the visual menu. It's a little bit more styled and a little bit more intricate than what you saw on the homepage and on the node for that makeover. So there it is. And I'll show you the backend of that. So this is the backend, very similar to what you saw before. There's a little bit more going on. I included this color picker field so that you can kind of like sample colors from the images that they uploaded, which is really going to give them better control of what was going to show on the front end. They can add images later down the line that's different. They can move this around, so let's do it again. Maybe at one time, this portfolio becomes a little bit more important than makeovers. You can drag it up and save. And you can just see that it's now switched. You can also use this to maybe put in more text. You don't always have to have the same things over and over again. So I'm going to remove this bottom one. There's another thing I really like about paragraphs is that you don't just remove it in the sky. You have to do confirm. So you can't actually not remove content and it's just like never coming back. But then also paragraphs, you can use revision. So if that does kind of happen, you can revert your revision and go back. So I'm going to add a text, use a color for it. Maybe let's make it like orange. That's fine. And I can see there in the bottom that you have another section of the text, maybe because you don't want, have another section at the moment that you want to call to or you want to give more description of why I appreciate it and navigate around the site. Which is really what the end goal is for this client is that they just want to have something to show to the users. They really want to engage them. They wanted to encourage them to move around the site and to navigate to different parts, which is another reason why I think paragraphs are so interesting because right now, visually this works, but like later down the line, things could change. You can reorganize it to tell you how something that they feel comfortable with. Priorities change down the line. There's different parts of the site that they want to call the users to. So it just becomes very flexible, especially if you're using like custom blocks and paragraphs in almost all regions of parts of your site, you can almost have a very dynamic site as a whole. It becomes, you give the client a lot of control over the complete site. Which again, I find that they really like. Like I said, little time to develop, little time to learn because it's very consistent whether you're editing a note or a custom block, maximum impact to the end user and a very happy client. So what are good times to use paragraphs? So like I said, it's really good if you have promotional content. Maybe you want to have like custom widgets, like I said, sliders, contact information. If you really want to give control to your client over the site, create a very dynamic site as a whole, dynamic regions. Yeah. So at this point, I just like to like take a side note because I think I've talked a lot about giving your client a lot of control over the site. Paragraphs and giving kind of client control over the site isn't always appropriate. This client in particular, their design frame, they're already visually like focused on design. So I thought it was appropriate to give them that control, but not always appropriate. Like I said, great power comes from great responsibility. You kind of have to trust your clients and their expertise that they are going to use appropriately and create something very visual. And then other use cases that I think that could work, like I mentioned, contact info, slider widgets, a simple way to display advertisements. You can also reuse these paragraphs in different regions, which is something I thought was cool because you could have the same paragraph type displayed differently in the sideboard that it does in the footer, in which I think adds the consistent factor of for your site editor, they already know how to use the paragraph type, the basic call to action, but having it display differently and act differently according to what region it is, I think adds to the consistency of the site editing experience. So before I conclude, I'm just gonna show you a quick demo and a quick tutorial of how you would set up these paragraphs. So I just have a basic Drupal 8 install here. All right, so I already have the paragraphs module enabled. You can also enable the custom block module, which comes in Drupal 8 core. So first thing you do is you gotta add your paragraph type. So you go down to structure, paragraph type, so you add a paragraph type. I'm gonna call this one Drupal North, and then you add a field to it just like you would a content type. So I'm just gonna add a text field copy in there. So I'm just gonna create one basic paragraph type of one field right now, and I'm gonna add this to a node into a custom block. So let's do the node first. So I'm just gonna build upon the basic page content type. So you're gonna add a field for the field type. You're gonna do a paragraph field here. We'll call it paragraph. So this is where you can kind of give the limit rate. So if you want to have the client give as many as they want, as many call to actions or as many whatever you're creating, or you can do it to a limit. I'm gonna do a limit for now. We are gonna reference this paragraph type here on Drupal North, that's the one we just created. And now it's onto that basic page content type. And then you can see that it's there. So you can add another one in as many as you want or as little as you want. And then it works the same way if you're gonna do it for a custom block as well. So we have the custom block library here. There's already one that comes with it which is this basic block. That's the one we're gonna build upon. Add a field, and it's exactly like you would for a node. So we're gonna place our first, we're gonna create a block. And then there's our paragraph right there. So in conclusion, oh, it's quick. In conclusion, you should use paragraphs because it gives your client a lot of control. It's quick to use, easy to set up as I've already mentioned. So little development time, maximum type for the end user. And you can use it to create a very dynamic set as a whole. You can use it in one region. Maybe you don't even want to use it in any regions. Maybe you don't even want to use it in custom blocks. But I think you should maybe consider using it in your nodes just for your site editors. And that is it. Thank you guys. Is there any questions? Yes. When you showed us the menu. Yep. I saw that you had things that looked like space in the first place, in the second place. How do you manage to make it beautiful if you change the paragraphs from not having empty spaces? Right, so you mean like, I guess it depends on how much content you want to add. Like I said, I think when you give the client that kind of controls up to them to create something very visual. But you can implement character limits in case you are worried about that, right? So for that text field specifically, maybe you know that if you add too much text, it's going to stretch and it's not going to look appropriate. And you can implement character limits for your client to just kind of be aware that they are adding too much text. But I think ultimately, you are giving the responsibility to the site editor. But the question for me is that if you put like one vertical thing and then after a square and then another vertical is going to... How are you just going to place the different blocks? So there's more empty spaces? So that one is... Are you using to stay sweet? No, this is just styled with... So that menu block is just styled with CSS. So this one has a limit, like I was saying. You can have unlimited paragraph types, or you can set a limit. This one does have a limit set, so you can't set any more than that it's already there. So I think your question is like, how would you make sure there's no empty space there in the corner if you didn't want that one? No, so that you can part-set the dimensions for each one? Sorry? Did you part-set the dimensions for each one? Yeah, this is styled specifically for what you want. The first one is always that... The first one is always going to be that vertical. That second one is always going to be that wide. So is that your question? Okay, so if you move... So portfolio is the first one, and makeover is the second one. If you switch them, makeover is going to be vertical? Yeah, so that was originally... So we'll clasp those fields. We'll bring that one up to the top. And so that's like the drag and drop capability that I think is really powerful, especially for the set editors. They can kind of play around until they find something that they're visually comfortable with, right? And like I said, priorities change on their life. So I'm really impressed that one time is going to be more important than portfolio. If you move that up, it's going to display a little bit bigger. It's going to engage you a little more to go to that page. So yeah, just paragraph using a little bit of CSS and a little bit of responsibility on the client side, I think it's really effective. And how do you make that like in CSS? It says the first paragraph is like that. The second one is like that. Yep. That's in CSS. Yeah, so like this is a custom block, right? So the custom block would be the container and then all the children under it are these blocks that you see right here. And so you just target that first child, right, to display this way. Okay. So you have like in your CSS, you have taken care of a certain number of tries and if it adds more, it's just going to be a generic way of making them more. Correct. So you can't, like I said, you can't add any more. But you... Yeah, there's a limit for this specific block. Yeah. But you can't take them away, right? So like I said, with giving them a client kind of responsibility, you wouldn't just remove this bottom block because you're going to have empty space. You might want to remove all three and then you would still work with these four and then the text in the middle. Okay. So yeah, so it makes a certain freedom. Yeah. Yeah, I would say so. Any other questions? Yes. Can we take that work with panels so that you'd actually be able to do some of that rearranging on this screen? You could, because you can use custom blocks within panels, right? This is a block with a field of paragraphs within the block. It seems paragraph type within this would be what the person would want to rearrange on this screen. Right. So yeah, like I said, you can add custom blocks within panels. So you could remove this block around regions if you were using panels. I kind of like to think of it as a lightweight version of panels. It's not as intricate. You can't add views to it, but you can move content around in different regions using paragraphs. You can also add... Oh, I didn't realize. But that sounds cool. I'd like to look into that a little bit more. Is there any other questions? All right. Thanks guys. Thanks for listening and thanks for listening. Thank you.