How to set Headline sizes (H1, H2 etc...) using Rich Text Editor in Text Element in X

[DerDirektor]

Hi everyone,
I’d like to write text including different sizes of headlines with the text-element and using the Rich-Text-Editor.

That works well so far, but the sizes of the headlines are far off (way to big).
I have my H1-headlines with the “headline-element” set to 2 EM.
Using the text-editor H1 is about 4 EM and even H3 is bigger than my H1.
Is there a way to change that?

I couldn’t find anything about it…

Thanks in advance
Regards
Ralf

[marc_a]

Hi Ralf,

I suggest that you will use the headline element where you can customize the sizes of your headers.

If you can’t see that option, please enable the advanced mode.
https://theme.co/docs/advanced-mode

Hope that helps and let us know how it goes.

Thank you.

[DerDirektor]

Hi marc_a,

thanks for your reply - but that doesn’t answer my question…
I know about the options of the headline element, but in longer texts I’d like to use just the text element and use the built in possibility to use “paragraph” and different headlines and sub-headlines without switching from headline element to text element to headline element to text… and so on.

Thanks
Ralf

[tristup]

Hi Ralf,

In your case, the H1 and other tags are the part of the content and the h1,h2 and other heading tags are implemented with predefined style. Regretfully, there is no such options to control the font size and style seprately within the headline element content as you are expecting.
But you can override the predefined styles by adding these CSS blocks in Pro/X > Theme Options > CSS

h1, .h1 {
    font-size: 30px;
}

h2, .h2 {
    font-size: 28px;
}

h3, .h3 {
    font-size: 26px;
}

h4, .h4 {
    font-size: 24px;
}

h5, .h5 {
    font-size: 23px;
}

h6, .h6 {
    font-size: 20px;
}

The above code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks