Headings like H1 H2 H3 not working in pagebuilder content area - Forum | JoomShaper
Staff replied SP Page Builder

Headings like H1 H2 H3 not working in pagebuilder content area

Asked by Jeanette 9 months ago Last activity 9 months ago

Hi,
I am using the Justice template (dont know if this has anything to do with it but i mention it anyways).

I am using PG page and i want to add some headings in a textblock using the H1 H2 or H3 tags.
In the wysiwyg editor i can see the heading text change and transforming correct.
But when i view the page the headings are not displaying the text correct. The heading become bold but the size are the same as the text, no H-tag size are displayed.

Please check and help.

Thank you.

10 replies

Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us. Could you please give me your site URL and also a screenshot of your issue?

-Regards.

Jeanette Asked this
9 months ago · edited

Hi and thanks for getting back to me.
Please have a look at the screenshots.

When i enter text in the text area and i want a part of the text to be example a heading H1, it seems like the typography box is overriding everything. Meaning that whats set in the typography is set for the whole text and i cannot change it in any way.

https://www.vatnamo.no/nrf/images/joomshaper-design.jpg
https://www.vatnamo.no/nrf/images/joomshaper-design1.jpg

Mehtaz Afsana Borsha Staff

Hi

Are you talking about any of these headings?

Jeanette Asked this

I am talking about the predefined formatting for the H1 H2 H3...tags.
When using this in pagebuilder text the formatting are not added to the text.
I have explained and displayed this quite qlear in the screenshots i added, i have put a red ring around the issues. Please have a look at the screenshots and i am sure you will see what i mean.

Thank you.

Jeanette Asked this

I am working on this now, unfortunately i dont have the time to wait cause i need to finish the project. So my page dont look like the screenshots anymore. But i hope you can test it at your end cause the issue is still the same.

Mehtaz Afsana Borsha Staff

Indeed, it's hard-coded.

If you want to change it (by now) you have to override addon, and edit addon code a little bit. Focus on that file: components\com_sppagebuilder\addons\carouselpro\site.php

line 150: $output .= (isset($value->title) && $value->title) ? '<h2>' . $value->title . '</h2>' : '';

Guide (how to): https://www.joomshaper.com/documentation/sp-page-builder/how-to-override-sp-builder-addons

And yes, I already informed our DEV team about it so that they can solve it in near future update.

Jeanette Asked this

The end user will be editing text in a page created using pagebuilder. When editing text in an editor it will be very frustrating that formatting of the text are not working. So hope your dev will fix this.
Hard coding of a text area is not a good option.

Mehtaz Afsana Borsha Staff

Sorry for this inconviennece. Allow us some time please, our DEV team will update it ASAP.

Mehtaz Afsana Borsha Staff

Hi,

I have spoken with our DEV team. They said that in that case, typography is applied to the entire text block, including H1 and H2. If you want a larger text size for H2, they recommend adding custom CSS like this:

#addonId h2 {
  font-size: 1.2rem !important;
}

In your case, it can be like this.

#sppb-addon-6ba06708-daa2-4132-9c03-5ee9f26c4339 .sppb-addon-articles .sppb-article-info-wrap h2 a {
    font-size: 2.5rem !important;
}

I hope it helps.

-Regards.

Jeanette Asked this

Thank you,

I dont need a larger text, i need the editor to behave like a "normal" editor. Meaning if i (or my client) format a text in the editor, i would expect it to stay this way displaying the text with the selected fonts and sizes. I dont want it to overlook the formatting and use a standard formatting when the page is displayed.
The formatting selections made in the editor should override the standard that is set in pb.

Mehtaz Afsana Borsha Staff

I will inform our team about it, In the meantime you can do it via custom CSS. You can set the font size or font family by using CSS.

Log in to reply.