[Support request] How to Make These Headings?

Home Forums Support [Support request] How to Make These Headings?

Home Forums Support How to Make These Headings?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2197498
    Annette

    How do I make H2 Headings like the 2 following layouts?

    1. ———— TEXT HERE ————– < Solid Lines

    TEXT HERE
    2. _________________________

    Thanks!

    #2197537
    Ying
    Staff
    Customer Support

    Hi Annette,

    I’m not sure I fully understand your question, do you have an example site?

    #2197541
    Annette

    Hi Ying

    Not sure how to explain it other than the dashes shown above are actually solid lines.

    The first heading has | solid line | Heading | solid line |
    The second has the Heading that has a solid line underneath it.

    Heading
    __________

    #2197606
    David
    Staff
    Customer Support

    Hi there,

    Add this CSS

    
    /* Divided H2 Style */
    h2.divide {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        grid-column-gap: 20px;
    }
    
    h2.divide:before,
    h2.divide:after {
        content: '';
        height: 1px;
        width: 100%;
        justify-self: center;
        background-color: #000;
    }
    
    /* Underline H2 STYLE */
    h2.underline {
        border-bottom: 1px solid #000;
    }

    Then select the H2 block and in Advanced > Additional CSS Class(es) field add:

    for 1: divide
    for 2: underline

    Note if you’re using GenerateBlocks its Headline Block has border styles in the settings. So you can do #2 without the CSS if you wish

    #2197623
    Annette

    Thanks David
    I’ll give this a go

    #2197626
    David
    Staff
    Customer Support

    Let us know how you get on!

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