Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

How to have a list inside a GB Headline

  • Hello there,

    I am trying to reproduce this to be able to style my numbers with CSS inside h1, h2, h3 headlines.

    SEE HERE –> https://ibb.co/HGpTW2Y

    I’ve added the following CSS in the ADITIONAL CSS section but I don’t know how to have the parameter inside the gb headline as shown in the image.

    .list-headline em {
        font-style: normal;
        border: 2px solid #331d0a;
        border-radius: 50%;
        height: 1.5em;
        width: 1.5em;
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        left: 0;
        top: 0;
    }

    I am pretty sure it’s simple but I am so stuck right now.

    Can you help?

  • Hi there,

    1. you need to add the class list-headline to the headline block.

    2. select the number, click the italic button to add <em> tag to it.

    https://app.screencast.com/E7fsLtRvbYPba

  • Niiiiice! It works.

    But is there a way so that I can attach that list-headline to all gb headings once and for all instead of adding it manually to each headline block?

    Maybe with CSS?

  • Do you want to add it to all GB headlines? I don’t think it’s a good idea.

    Only add the extra css class when you need to.

  • Yeah, you are right. I’ll only add it when I need to.

    But how would I go about it if I wanted it to be to all GB headlines?

    What CSS is needed?

  • If you want to do it for all GB headlines, you don’t need to add the class, you can use gb-headline as the class. So the CSS would be:

    .gb-headline em {
        font-style: normal;
        border: 2px solid #331d0a;
        border-radius: 50%;
        height: 1.5em;
        width: 1.5em;
        position: absolute;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        left: 0;
        top: 0;
    }
  • Thank you so much!

  • Another easy way to do this is to add a container for those headlines, and then you just need to add a class to the container, eg. list-container, the CSS selector would be .list-container em, so that you don’t have to add list-headline to all headlines in that container.

  • wow yes. Thanks so much for being super helpful. I really appreciate it.

    Have a nice one Ying!

  • You are welcome Jim 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.