[Support request] Overlay an image with a link on entire site and be able to turn it on and off

Hi there,

Yep, the best method is to use an Element.
I would work with a Block Element, and i would use the after_footer Hook, this keeps out of the way of the rest of the page.

Some CSS would be required to fix its position. Let us know if you need a hand with that.

To Disable / Enable the element, the simplest options is to Quick Edit the element and change its Status to Draft / Published.

It will require some CSS to position. So for the Hook. Do NOT use the wp_head that is reserved for adding inline codes, not HTML.
But before we look at the CSS or decide upon the hook – a question:

What happens to this link on smaller screens ?
Does it disappear ? Does it sit in the content ? Or Does it stick to the top / bottom of the screen ?

Let me know and in the meantime ill look at the Button color / single button possibilities.

No worries 🙂
So here goes.

1. To make the button into a single element will require HTML.
Remove the Buttons Block, and replace it with a HTML block.

1.1 In the HTML Block add this:

<a class="twitch-button" target="_blank" rel="noopener noreferrer" href="https://twitch.tv/bunnymuffinslol">
    <span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-twitch"
        fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z">
        </path>
        <path d="M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z"></path>
    </svg></span>
    <span class="gb-icon"><svg aria-hidden="true" height="1em" width="1em"
        viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
        <path class="blinking" fill="red"
            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
    </svg></span><span class="gb-button-text">LIVE! Click to watch!</span></a>
</a>

2. Publish that element.

3. Then add this CSS to your site:

.twitch-button {
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    background-color: #000;
    padding-right: 15px;
    position: fixed;
    top: 50%;
    left: 0;
}

.twitch-button span:nth-child(1) {
    padding: 15px;
    font-size: 1.5em;
    color: #ffffff;
    background-color: #9146ff;
    background-image: linear-gradient(118deg, rgba(166, 50, 255, 0.1), rgba(255, 255, 255, 0.3));
}
.twitch-button span:nth-child(2) {
    padding: 10px;
}

@media(max-width: 1024px) {
    .twitch-button {
        display: none !important;
    }
}

The last rule is where we set the max-width: 1024px screen at which point the button is hidden.

Aah, i edited the HTML above, in the first line i removed the button class.

Now your CSS should work 🙂

Glad to be of help!