Numbered headline

Hi Roma,

Any chance you can link us to an example site?

Let me know :)

Oh sorry,

My link have not works in my first post

https://ibb.co/8NSHdcm

thanks

Are you talking about doing that using GP's headline block?

If it's possible. Is there another solution ?

Can you provide a link to your actual Site ?

Yes.

You see it in private ?

Hi there,

Is that your site, or the site with the feature you want to replicate?

This is the code it's using for headings:

h2.is-style-cnvs-heading-numbered:before {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 2.5rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: var(--cnvs-heading-numbered-border-radius);
    background: var(--cnvs-heading-numbered-background);
    color: var(--cnvs-heading-numbered-color);
    counter-increment: h2;
    content: counter(h2);
}

So if you give your h2 element the following class, it should work: is-style-cnvs-heading-numbered

Hello,

It's my site. I want to replicate on generatepress. It's not online actually.

I have to use this code in every headings ?

thanks

Try adding this CSS to your site:

.single-post .entry-content {
    counter-reset: h2counter;
}

.single-post .entry-content h2 {
    display: flex;
    align-items: flex-start;
}

.single-post .entry-content h2:not(.no-number):before {
    content: counter(h2counter);
    counter-increment: h2counter;
    counter-reset: h3counter;
    display: flex;
    flex: 0 0 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-right: 0.75em;
    border-radius: 40px;
    font-size: 20px;
    font-weight: 700;
    background-color: #f00;
    color: #fff;
}

It will automatically add numbers to all H2 headings in your Post content.
If you want to remove the number from a specific heading then select the Heading block > Advanced --> Additional CSS Class(es) - add no-number - the heading will have no number

I have miss your post David. Sorry

I have try the code but every headlines are with the number "1". For example, I have 6 headlines and the six H2 headlines are "1", but not 1, 2, 3 , 4 , 5 , 6.

Is there a code I can do calculate ?

thanks a lot

Remove the CSS that Tom provided you with before.
And remove the is-style-cnvs-heading-numbered class from your headings.
Then add just the CSS i provided.

Thanks David,

It's good. But I have more than 90 articles so I have a lot of work.

Thanks for the support.

With my CSS added it should apply to all of your Posts :)