Search code examples
wordpress-gutenberg

Can we have hidden heading elements in a Wordpress page that are still displayed in a summary block?

Please look at this webpage (WordPress).

Towards the top is a summary block which is built from the heading elements on the page.

Towards the bottom are three downloads. Is it possible to have the three headings "Cut-Tools for ..." and have them invisible? My conundrum is that I need those heading elements so that they show as links in the summary but I don't want anything visible.

Am I asking too much of the system?

Solution

  • You could use CSS to selectively hide the element without removing them from the page. From the WordPress Admin, nagivate to Appearance > Customize > Additional CSS and add a new CSS class:

    .hide{
    display:none;
}

    Customize > Additional CSS

    Remember to click "Publish" so the new CSS is saved.

    Next, open the Page/Post Editor and select the block of the element you want to "hide" and add the new CSS class and save:

    Additional CSS Class

    The CSS in this case only applies to the front end so the block/content will still be visible in the Editor so you can edit it, but hidden on the front end. This is just a general example and you could make the css more specific to hide elements that are/are not children of other elements etc.