[Support request] Close Button for Elements?

Home Forums Support [Support request] Close Button for Elements?

Home Forums Support Close Button for Elements?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1537259
    Junior Gong

    Hey guys

    is there any way to add a close button for an element that I added via hook? In my specific case I added a block element above header.

    for my readers I wanna add an X button top right to dismiss it and not show anymore.

    You can see my element on the private link provided

    Customer Support

    Hi there,

    tricky one – and this is very experimental – so it may not work lol

    1. Edit your elements Container Block and give it an ID/HTML Anchor in Advanced setting of:


    2. Add another button to your container for the dismiss button. Give this an ID/HTML Anchor of:


    3. Now add a HTML Block after the Container, and add this Script and styles code:

    document.addEventListener("DOMContentLoaded", function() {
        let dismissed = sessionStorage.getItem("dismissed");
        let dismissBanner = document.getElementById("dismissible-banner");
        let dismissButton = document.getElementById("dismiss");
        } else {
        dismissButton.addEventListener("click", function(){
            sessionStorage.setItem("dismissed", true);
    #dismissible-banner {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    #dismissible-banner.show {
        transition: all 0.3s ease-in;
        transition-delay: 1s;
        max-height: 500px;
        opacity: 1;
        pointer-events: auto;

    On initial load the height of the banner is set to 0 and after a 1s delay it transitions to full height. Once the dismiss button is clicked it adds a dismissed variable to the browsers sessionStorage – which will remove the actual Element from the HTML. If a user starts a new session ( ie. closes the browser and revists the site ) then the banner will be re-displayed.

    The purpose of the transition is purely there to minimise Content Layout Shift that can’t be avoided when the banner has been dismissed.

    Junior Gong

    Thx for the input.

    It’s a bit too much too manage in the long run, especially when working with multiple elements.

    For now I would leave it as feature request for the elements module 🙂

    Customer Support

    Sorry i thought you were after a solution for your current site ?

    I am not a feature like that would be possible, as the JS and CSS required to make this happen will vary from one design to another – hence it is better a custom solution is provided like the one above. It may be something we look at in the GenerateBlocks plugin…

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