Set vertical Headline with "headline element"?

[ArtOfSpring]

Hey there,

I’m searching for a long time and can not find a solution to set an headline vertical as you see in the example below.

Is this possible in any way with the element or do I have to implement it as a picture?

I’m open for any recommandation from your side.

Thanks.

[tristup]

Hi @ArtOfSpring,

Thanks for reaching out.
You need to use the Rotate function of the Transformation CSS attribute for that. I have tested it in my local environment and it works. Please find the sample CSS code that I add into the Element CSS of the Headline element.

$el
{
    transform-origin: 0 0;
    transform: rotate(270deg);
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
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 really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

I would also suggest you go through the following article on this.

rotate() - CSS: Cascading Style Sheets | MDN

Text Rotation

Thanks

[ArtOfSpring]

Hey @tristup,

thank you for giving me that advice.
I tried it and it worked out fine BUT I also found this in the “effects” section of the headline element:

Is it better to use this function then putting in an inlijne CSS code? Or it just doesn’t matter?

Thanks.

[tristup]

Hi @ArtOfSpring,

It rotates the Headline but it does not apply the Transform Origin and that is why the position does not work. If you have added the Rotate through the Effect Module you need to add the following code to the Headline.

$el
{
    transform-origin: 0 0;
}

Thanks

[ArtOfSpring]

Hello,

ok, I understand this.
thank you for helping me out in this case.

Have a nice Sunday

[ruenel]

You are most welcome.