ÃÛ¶¹ÊÓƵ

Transcript

Hi, I’m taking this recording to show how you can make HTML component within an editable fragment editable and add the styling and content to make edits at the message level. So to start off with, I’m at the fragment. I’ve created one with an image. Now I have another component where I’m adding the HTML component. I’m opening up the HTML editor. And I have a basic HTML code which I want to add in which involves the styling as well. I’ll copy paste here. You can see here my body of the text includes the main title. I have some styling components of a bold italic points. I have bullet points. I have a line break and all of that. And all my styling components are here above.

First, I want to make edits to the content. That is a body of this content. What I basically do is that navigate to this helper, add this inline.

I change the name to content change and add it to the reference too.

And this render content is basically what my default content needs to be. So I go back here. I choose all the content which I want to include into my body. So starting from this point, which is my first heading.

And if I scroll down until the block code, I copy all of it. And I put into my default content area, which is here. I take this reference and add that here, removing the real content. And similarly, for my styling, I add another one of function, which is to again act as an editable component. I name it as styling.

And I add the same naming to this reference. I take up my styling component here and add the complete snippet into the default area. And I take up this reference of the styling, add to the original content. So you have your content where styling is one component that we’ve made editable and content change is another component. Now we go ahead, click Save. Save the fragment and then publish it. So you can see the fragment is live now. I move into campaign.

And I’m trying to access the content. Fragment, which we just created now.

And now if we click this, you can see under fragment editable, you have two fields. One is your styling. One is your content change. Before we make any edits to this editable fragment, let’s simulate and see how the content looks like. So if you look down, there is a main title, which is my heading. I have a subtitle. I have a paragraph with line break, a bold text, some bullet points. I even have a block code, which probably is under some styling of a gray color and all of that. Now if we go back and open up my styling snippet, and I want to add a line with the strikethrough styling. So basically, I just go ahead, take my CSS styling for the strikethrough, add it right here in my CSS styling, and then I save it. Similarly, I open my content to add the line where I want to keep the strikethrough content. So maybe I add that here. And probably I’m adding a new line here with the break.

This is a newly added line. And I click Save. Now if you click simulate content, you can see that we have a new line with the strikethrough that is added, which means the CSS styling was able to edit. And you could also add new content changer. Similarly, a new line break was added to the same paragraph.

So yeah, that’s it.