How to use different fontsizes within one text field in Grapejs

I’m recently updated to Mautic 4.2.0 using the new GrapeJS editor.
What puzzles me there is that it seems a text field can only take one fontsize. So do i need to place an individual text container for every paragraph (e.g. headline, sub-headline) i want to have in my email template?

Hello, you can’t since the mjml text block will have the size defined for the whole text block.
See docs:
https://documentation.mjml.io/#mj-text

Ok, that means that i need to split texts into blocks of different fontsizes.
I haven’t done a lot with the new editor and need to get familar with it. Is it possible to have both editors usable, as the config.json array implies, so to choose which email template is handled with which editor? Or is it a global choice?

You can downgrade to the old builder if you disable the GrapeJS builder by Plugins.
But you can also switch. I won’t recommend it.
Here is a video about the grapesjs builder to get you started:

1 Like

Kind of yes and no …

You still can style individual character / word / sentence using individual MJML text container and MJML style variables, header tag with inline styles or span tag with inline styles.

Most time I use individual text container if a seperate line text because to me it’s quicker to use MJML edits and I use application to design my email using MJML then create a Mautic template from it

Once I get the template installed then I can do further editing in Mautic like changing the wordings or picture etc.

Here an example - took me less than 5 minutes to whip it up …

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text color="#555" />
      <mj-section background-color="#fff" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#eee">
    <mj-hero>
      <mj-image src="https://warehouse.agwm.org/repository/image/test/colorful-umbrella-1176220.jpg" />
    </mj-hero>
    </mj-column>
    <mj-section>
      <mj-column>
        <mj-text font-size="30px" line-height="12px">Title Here</mj-text>
        <mj-text font-size="12px">Description</mj-text>
        <mj-text font-size="16px" line-height="24px"> <span style="font-size: 40px;">If </span>you're looking for random paragraphs, you've come to the right place. When a random word or a random sentence isn't quite enough, the next logical step is to find a random paragraph. We created the Random Paragraph Generator with you in mind. The process is quite simple. Choose the number of random paragraphs you'd like to see and click the button. Your chosen number of paragraphs will instantly appear. </mj-text>
      </mj-column>
      <mj-column>
        <mj-text font-size="30px" line-height="12px">Title Here</mj-text>
        <mj-text font-size="12px">Description</mj-text>
        <mj-text font-size="16px" line-height="24px"> <span style="font-size: 40px;">A </span>random paragraph can also be an excellent way for a writer to tackle writers' block. Writing block can often happen due to being stuck with a current project that the writer is trying to complete. By inserting a completely random paragraph from which to begin, it can take down some of the issues that may have been causing the writers' block in the first place. </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>