Add grey lines above and below heading

  • Resolved Dee

    (@supinda1985)


    2 years, 8 months ago

    Hi,

    how can I add the grey lines above and below a heading/text, like in the below example for ‘TOP STORIES’?

    https://www.vogue.co.uk/

    I can add the separator block, but the margin between the text and the lines is too wide.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi there,

    what heading do you want that applied to?

    Is it the H1 content title?
    Or a Heading you added to your post content eg. a H2 heading

    Thread Starter Dee

    (@supinda1985)

    A heading within the content, so H2, H3.

    Thanks!

    Couple of choices:

    Choice 1 – use the GenerateBlocks Plugin and use its Headline block, it has spacing and border styles:

    https://docs.generateblocks.com/article/headline-overview/

    Choice 2 – use any block and use CSS:

    1. Add this CSS to your site:

    .top-bottom-border {
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     padding-top: 5px;
     padding-bottom: 5px;
}

    2. Select the Heading Block, and in Advanced > Additional CSS Classes and add: top-bottom-border

    Thread Starter Dee

    (@supinda1985)

    Choice 1 is perfect!

    Thank you David.

    -Dee

    Glad to be of help

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add grey lines above and below heading’ is closed to new replies.