Speaker 1: All right, let's chop eight. Let's begin. Okay. Is my voice echoing?

Speaker 2: No, I think I can hear it well. It's fine.

Speaker 1: Okay. Hello, everybody. Thank you for joining us here. Hope you guys are having a great DrupalCon and hopefully we all will be meeting next year at DrupalCon 2022. And a couple of things before we start our session is please add your questions in the Q&A section. The chat might just like we might lose on the questions over there in the chat section. And before we start, we'd also like you to take a poll. There's a poll we've added in the poll section. So we would like to hear your thoughts about your content authoring experience. And post this session, we'll be, Abhay and I will be at our Q&A 42 booth to answer any questions we may not be able to address during our session. And also to just chat about our content authoring experiences. So, yeah. So before we dive into our session, like how, you know, how to empower your marketing team with DIY and layout building using paragraphs. So this session is basically we are sharing our experience of what we did with our website recently. And, yeah, so we'd like to hear what you are doing with your website as well. So going forward. Abhay, next slide. We'd like to introduce ourselves. Hi, I'm Ruchika. I have been a Drupal user and a content editor for the past five years. And I'm a digital marketing strategist at QBD 42.

Speaker 2: Hi, guys, I'm Abhay. I'm the technical lead, mostly working on back end. I make Drupal solutions and for custom Drupal solutions for QBD 42. I've been working in Drupal for over seven years now.

Speaker 1: OK, so a little bit about our organization. We're a Drupal provider delivering digital experiences for various industries like higher ed, nonprofits, e-commerce and many more. Let's hop on to the agenda. OK, so you've met us. And next, we're going to share our experience with Layout Builder. The challenges that we face. So the challenges we face. We recently have also redesigned our website QBD42.com with a design system called a space that we created. And we've implemented paragraphs in a very interesting way. We'll also show you how we address the issues and demands of our content team and give you a demo of our DIY Layout Builder with paragraphs. And we'll be wrapping it up with a Q&A session. And like I said, we would love for you to share your experience and journey as a content editor user. Oh, yeah. So let's get into it. So what do content editors need? So whether you are working as a part of a marketing group or you're an individual creating unique and engaging content, what is essential is to build a system, you know, which is essential for building and sustaining any type of business. Right. With the ecosystem of technology to support content creation, it's been, you know, changing and it's becoming larger. And it's also very confusing to figure out at times. Right. So coming to what the content editors need. So I'm a content editor and I will put on some points and please share your thoughts on it in the chat section as well. So what I need is I need more control on my content. You know, I need an intuitive UI, better media management. I need faster turnaround times, which means I don't want to be dependent on the dev team, you know, for making changes. So I need my content authoring experience to be flexible. And yeah, moving on. So, yeah, before this, we just launched our website a week back. And before that, we were on Google 9 and we were using a layout builder up until now. So our experience with layout builder was that we used a component based approach. And, you know, the layout builder translated them into sections and blocks. So there was a learning curve for us. And, you know, once we got a hold of it, the content team was happy creating visual layouts with the, you know, limited options. Now I can say limited, but that time we were really happy with the blocks to create landing pages. We were publishing blogs and case studies very fast. So when did things start spiraling? So, you know, things started spiraling when we wanted to actually disassemble the elements that were there in a blog and use them as and when we where we wanted. So our implementation did not allow us to do that. If I wanted to create, for example, we wanted to create a landing page for DrupalCon North America. And we didn't want to restrict ourselves to the blocks and, you know, that layout we had created with layout builder. And just to get one landing page up, it required around more than a week. And we had a lot of to and fro with the dev team and required theming and CSS. And it was a mess. So it was a really a pain in a pain for us going forward. So why was the layout built? Why the layout builder wasn't enough for us? Like I said, it was too inflexible for us. So when we thought of, like, you know, implementing layout builders, our dev team was like, OK, Drupal has got a lot of modules and it's flexible. So, you know, we can deliver whatever you want. Up to a certain point, it was true. But after a point, it wasn't. Then there was a huge dependability on the developers. Even if I wanted to, you know, for simple, if I just wanted to add a URL to, you know, a hyperlink to an image, I needed to run to a developer. If I wanted to move a CTA in some place which it was not, you know, designed to be or developed to be, then again, I had to, you know, go to the development team. So this led to a lot of slower turnaround times and we weren't truly independent. Apart from that, we, you know, they were like we didn't have solid control on content yet. We did not feel it. And with minimal clicks, that is what we really wanted. And we did not have the flexibility to play around with layout. So for me, I had not used paragraphs ever before. So the only thing that I had seen was layout builder and I was, yeah, it was shiny and sparkly at that time. But I realized that what if, okay, I add a, you know, a section and then I've added two column layout to it, okay. But if the content requirements change and I want to convert it into a four column, I had to delete my earlier one, add another, then again, you know, add content to it and so on and so forth. So, yeah, it wasn't flexible at all. Abhay, would you like to add in a little bit more about how layout builder does not?

Speaker 2: Right. So because our implementation was also initially, we started out as quite a custom implementation. We had one theme. We were given a base theme. We implemented that. And then the design system was quite good. They came, they come up with variations of the same components, which we were not able to accommodate. So which currently in our implementation, we have kind of followed their same system and we have used, you know, I can, I'll explain that in the coming term. So we have kind of followed their same system, which kind of make it possible for them to come up with the variations. And we are able to accommodate them without adding in any developer time. Right. So I think now I'll go on to how we created this and how the development journey of this part was. If that's OK. Yes. Yeah. So basically how we started when we decided to revamp our website. There was a new design using our design system space. And I wanted to know what the current pain points were. So I went to Ruchika and I asked her, what are the difficulties of the content team phases? And it's mostly all we hear about with Drupal most of the time is the steep learning curve and the difficulty to onboard new people. And, you know, for site builders, Drupal site builders, it's quite simple. And we are all excited about layout builder and the new changes and and whatever flexibility provides us to create pages. But when it comes to it's like their main pain points were that, you know, when we have to I have to sit in a two hour, three hour call to show them how this works. Or they're like to add a block. I have to click this button and then click this button. And there's a lot of clicks and there's a lot of steps to do that. And I might forget these steps or and things like that. So what I wanted to do was to create a simple, intuitive and like of like the user should be prompted. So you add a layout first. OK. One column to column. OK, so let me just move to the next slide, which is the solution. All right. So basically we wanted a simple, intuitive content editing experience, which is which should be time and cost efficient, because, you know, we it's our internal website and we don't have a dedicated team working on our website. It's anybody who is free or available. So we wanted to accommodate that aspect as well. So what we did was so we saw initially what we did, what we decided to do, we use paragraphs and we create like using bootstrap as the base. We use paragraphs to provide the layouts, one, two, six column layout. And inside those columns, we define, again, other paragraphs. We create components using these paragraphs, like a text component, a video component, an image component. And now we already have so many options. You can add any two column layout, left side image, right side text and so on. Variations are infinite. And now what we have done is, you know, these components are exactly kind of like how the design team has implemented them as well. So the design team has their own component system. So they have an icon and what the variations of the button and the variations of it. So I try to do that as well with the with in handling our paragraph. So we have a CTA component, which we have different variations. We can make it into a button. We can make it into a link. We can align it left, right and center. So all the variations that the design team has already come up with. I will try to implement the same as settings for that button. Similarly with the image component. So you want to add a link. You want to make the image clickable. You want to align the image left, right, center and so on. And hence and then be along with the six column layout, the spacing. So the design team has wanted to space each component. So we thought instead of statically keeping the spaces to certain every page to limit it like that, we'll add a component for that as well. So you can define your spaces manually. So now and then we also the main problem with paragraphs that many people face is that it does not have previews. And that is something that even the content team was adamant about. They needed the previews and that was very helpful at the layout builder. And we we did the same thing for our paragraphs based approach by using the module layout paragraphs. So that gives for the initial edit page, all the layouts where we could see the previews. And it came perfectly because we use because of the kind of solution that we came up with, which I will get into it in a minute. All right. So basically, and also, you know, I don't know the paragraphs. There is also an easy way to rearrange it in the edit page, the drag and drop feature using sortable JS. I'm not sure how many of you have used this or heard of it. It's not documented. There is a ticket out there and people don't want you to document it correctly. So that is provides us the flexibility to rearrange icons from within paragraphs to other paragraphs. So so you have a four column layout. You want to make it into a column layout. You add the two column layout and drag and drop the components to the left and right columns from the four components. I will show you this also in the coming. So anyway, coming to the key Drupal modules that we have used, we have used the UI patterns to kind of make it into a component based approach. So each component is independent of the base styles in JavaScript and also independent of other components. So if I have, say, an odometer component, it has its own CSS file. It has its own JS file. If you add the odometer component on a page that CSS and JS file will be loaded. So in doing this, we are able to isolate the design, you know, the component as per the design that the designer gives us. So they have their own component system. We have our mirror component system, which is mirroring exactly what they are giving us. So which allows us to actually, you know, tap into the variations that they want as well. So the layout paragraphs, as I mentioned, to kind of give a, you know, to there is a layout paragraphs form mode, which helps us give a preview to in the edit page and some paragraphs enhancements module. I used to, you know, categorize and the kind of the components that we have. So basically what we have done is we've created text components, video components, small components. And there was it was still difficult for the content editor because, you know, to create a page layout like a three column layout with an image and a text in each column, you still have to do a lot of clicks. You have to click upload image, click add component. So what we did is we grouped some of these smaller components together and then we create larger components so that in one click, you can say it's kind of like templatizing it. You click one button and you have all the fields you need to fill. You just need to fill those fields and you have that component. All right. And in this solution, we approach, we could be used paragraphs because, you know, it's we needed to keep our options limited. We have certain components. We already know all the components. We already know all the variations. And the design team used their components, created bigger components. And using those bigger components, they created the pages. We did the same thing. We created the main small atomic components, used the created bigger components using them. And we created pages using those components. So in that sense, paragraphs is perfect because we just need to create that. That many paragraphs of me. All right. OK. And once all the components are assembled, the content editor should just be able to create any pages with various combinations as per the design. And and I'm going to show you how we've done this. All right. So basically, as as of now, since we went up the there's been no you know, the variations are possible. From the design, we get requests. It goes up. It's easy. There's no, you know, going to the developer saying, I need to start this way. The padding is not right. You know, nothing like that. All right. So let's go. So basically, as I mentioned earlier, so this is how I just wanted to show you a preview of how we use the pattern UI. So basically, you know, every in the templates folder, we put the dot dot file. Right. So when we're using the pattern UI module, we just create pattern folders like this. So odometer has a folder. We define the pattern in the pattern. Why am I fine? And then we added silence. Yes. And we add it to this component. Just like we add the dot libraries file in. When you do your regular team or regular dot libraries. All right. And just like. So when you add this component to a page, all of these will be loaded and not before. OK, so it's a it's a very effective process, I would say. So we are kind of isolating each component. And so the style changes or alterations or variations that the design team comes up with can be done individually without affecting the other components. All right. And if you go to the slash patterns, you are you can I will just show you the screenshot of that. You can see all your patterns. OK. All the patterns are all the components you have defined. So basically here when we're talking about patterns, it's components. OK. And so there you go. This is the slash patterns and you list all the components that you want. You click on any one of these components and you can see how it looks. So this means also means that it is advantageous for, you know, development time because the front end can start work on it and make it look like the pattern that we want without the back end actually in the picture. And then the back end can add the fields and make that mapping. So as you can see here in the fields, you add what are the fields you need. And then in the .quake file, you display those fields. So here in the field after the column, the developer can actually add whatever he the dummy content, if you will, you know, an image or whatever that requires. So let me show you how it is done. So, for example, this is our testimonial item pattern. So let me just quickly show you where we have used this. So there you can see in our home page, we have a testimonial component of slider. So each of this item is a component is a testimonial item component, which is a pattern as well. So that pattern you can see in when you go. To the slash patterns and then you click on the testimonial item. So this means that if you if you've given an image and some text, the design team, I mean, the front end team can actually start work on this if the back end is not even done. So that was very helpful for us because, you know, we were running on a tight schedule. And so let's just go to some, you know, so basically this is our the pages and the components that we have created. So let me just show you a small on how it works. So basically this form edit mode is B is because it's possible because of the layout paragraphs module. They did an excellent job and, you know, giving this view. So even though in the patterns in the in the dot in the team, we have, you know, defined the team in the YAML files and we have defined a twig in the back. And it uses the same styles that we have defined in the front end team. When you're on the edit page, on the edit page, it's not using the admin team to render this. It is using the front end team because we are using the pattern that patterns UI module. All right. So let's see. So when you click on add, you're prompted again to add one to six column layout. OK, so and then you add a two column layout. OK, and then you are asked to add any component to this column one and column two. So it's pretty simple. OK, so as you can see, these are all our base components, image spacing, CTA slider text. So let me show you what I mean by that. OK, so this page, OK, is actually I recreated this page. This is our product engineering page. OK, so let me show you that page. Here it goes. OK. I think our time is up, but I'll just give you this short demo and then you can you can continue this at our booth where we'll be. I'll show you more and you can ask your questions and we can discuss our different approaches to content authoring. So this is the this is basically we have created a bigger component with a text component and image component and then the text component. All right. So this is our banner component. The same thing can be created. Using a text component, an individual text component, and then adding a two column layout and then on the left side, adding an image component and on the right side, adding a space text and spacing component. All right. So that's basically how. We have created everything. All right. Using these smaller components, we create a bigger component so that it is easy for the development team to just quickly add content. So I've had a couple of more things to show for the demo, but I guess our time is up and Ruchika, we can take this to our booth or should I give up?

Speaker 1: Let's let's take it to a booth and then we should spill over. OK, I'm just adding a link to a booth and we'll be having a demo over there. So please join us. And we'll having we'll be having a question and answer round as well over there. Thank you. Please join us there. And.

Speaker 2: Thank you.