How to change the heading style between H1, H2, H3, and so on

How to change the heading style between H1, H2, H3, and so on from the visual editior on a Wappler project.

Am using Webflow as of now and trying to use Wappler (this is day 1, btw), maybe i’ll switch…
lot many things are not as apparant or as easy it is in Webflow (granted that Wappler is newer and the \promise of much better feature set).
help please?

Select your current h tag or paragraph on your page and then in the properties panel on the right you will have the options to change it. Welcome to Wappler!

2 Likes

Hi Brad, I have followed what you have said but i don’t get the H1, H2 etc, I get the following
image
Am i doing something wrong?

Title is meant for things like hero sections. The size option has display 1 - 4 also which goes bigger than h1.

Add a paragraph instead and you will have options you need.

1 Like

If i may chime in here with my own findings for a second.

If you use Basic > Title


It creates an H1 in code without any class added. If you now choose a size in the Title Properties from the App Structure and add Display 1, or 2, or 3, or 4 it adds a class to the H1 of class=“display-1” or 2 or 3 or 4 but it always remains an H1
29


If you use the paragraph component rather from Basic > Paragraph


It creates a p tag in code without any class added. If you now choose a Type in the Paragraph Properties from the App Structure and add Heading 1, through to 6 it adds a class to the p of class=“h1” through to 6 but it always remains as a p tag
24


If you however use the DOM panel and choose Basic HTML >


You will now find that you have access to add the specific H1 - H6 and P tags you might be more specifically looking for.

1 Like

Heading type change menu (h1-h6) is coming soon to Wappler.

2 Likes

Wow psweb, well researched. Lots of different options and this is really good to know. I simply added a Title and wanted to change from H1 to H4. Obviously I could have done the easy option of changing it in code but I was looking for a button or menu to make the change. Thanks Teodor for letting us know that the heading type change is coming soon. Very early days for me in Wappler but I am loving it so far.

drymetal, I have never come across the phrase “hero section” before, can you explain?

Awesome @Teodor!

It may just be a niche term, but it usually means the top section of a home page that has a large image background and a large title and some sort of Call to Action.

Here is a hero without a title: https://www.music-man.com/

Here is one with:

Think of it as any text that you want to REALLY stand out. Not saying that is exclusively what the title is for. But, I believe that is the intent. The Display 1 - 4 classes that I and psweb mentioned make the h1 even bigger. So...it is all about that really important message when you think about it.

And when I think of the paragraph element in Wappler, you can change it to h1 - h6 as mentioned previously. This, to me, just implies that it is for everywhere else. Like standard headings or paragraphs.

1 Like

am coming from webflow, things are much more visual and easier there.
i guess i will have to understand bootstrap first to be able to use wappler properly!

1 Like

happy to see good community support here - will stick around, wappler has much more potential!

2 Likes

This has been added to version 1.5.0