Archived topic

Adding a click to call icon in mobile mode

4 replies · Started by Duncan on July 11, 2020

Viewing posts 1–5 of 5

July 11, 2020 at 10:28 am #1360248

Hello there

I'm looking for some assistance.

I'm trying to add a green click to call phone icon on my website, which will only display on mobile mode, something similar to the one on this website: https://www.ksplumbingheating.co.uk/ (it's only visible om mobile mode too.)

I'm afraid I'm not technical when it comes to things like this, so I'd appreciate some simple to follow steps to achieve this.

Any assistance is much appreciated.

Thanks in advance

July 11, 2020 at 3:03 pm #1360417

Hi there,

You could:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to generate_after_footer
3. Add this as your hook content:

<a href="tel:12345677889" id="callnowbutton"><span class="screen-reader-text">Call Now Button</span></a>

Be sure to update the phone number.

4. Set your Display Rules.

Then, you can add this CSS:

@media screen and (max-width: 650px) {
    #callnowbutton {
        display: block;
        position: fixed;
        text-decoration: none;
        z-index: 2147483647;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        border-top: 1px solid #2dc62d;
        bottom: 15px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        transform: scale(1);
        right: 20px;
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjAgNjAiPjxwYXRoIGQ9Ik03LjEwNCAxNC4wMzJsMTUuNTg2IDEuOTg0YzAgMC0wLjAxOSAwLjUgMCAwLjk1M2MwLjAyOSAwLjc1Ni0wLjI2IDEuNTM0LTAuODA5IDIuMSBsLTQuNzQgNC43NDJjMi4zNjEgMy4zIDE2LjUgMTcuNCAxOS44IDE5LjhsMTYuODEzIDEuMTQxYzAgMCAwIDAuNCAwIDEuMSBjLTAuMDAyIDAuNDc5LTAuMTc2IDAuOTUzLTAuNTQ5IDEuMzI3bC02LjUwNCA2LjUwNWMwIDAtMTEuMjYxIDAuOTg4LTI1LjkyNS0xMy42NzRDNi4xMTcgMjUuMyA3LjEgMTQgNy4xIDE0IiBmaWxsPSIjMDA2NzAwIi8+PHBhdGggZD0iTTcuMTA0IDEzLjAzMmw2LjUwNC02LjUwNWMwLjg5Ni0wLjg5NSAyLjMzNC0wLjY3OCAzLjEgMC4zNWw1LjU2MyA3LjggYzAuNzM4IDEgMC41IDIuNTMxLTAuMzYgMy40MjZsLTQuNzQgNC43NDJjMi4zNjEgMy4zIDUuMyA2LjkgOS4xIDEwLjY5OWMzLjg0MiAzLjggNy40IDYuNyAxMC43IDkuMSBsNC43NC00Ljc0MmMwLjg5Ny0wLjg5NSAyLjQ3MS0xLjAyNiAzLjQ5OC0wLjI4OWw3LjY0NiA1LjQ1NWMxLjAyNSAwLjcgMS4zIDIuMiAwLjQgMy4xMDVsLTYuNTA0IDYuNSBjMCAwLTExLjI2MiAwLjk4OC0yNS45MjUtMTMuNjc0QzYuMTE3IDI0LjMgNy4xIDEzIDcuMSAxMyIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) center/50px 50px no-repeat #009900;
    }
}

That data string is the image they're using. You can remove it and add your own SVG/image into the HTML if you'd like.

Hope this helps!

July 11, 2020 at 4:11 pm #1360458

Hi Tom

Thanks for your reply.

I've followed your instructions, however the click to call phone icon isn't displaying, don't know if I've missed something?

When I created the hook it didn't give me the option to set it to 'generate_after_footer' as you suggested, I therefore set it to 'after_footer.

Hopefully you can point me in the right direction.

Thanks
Duncan

July 11, 2020 at 5:12 pm #1360475

Hi Tom

Managed to fix it, I did this by changing the hook setting to "after_footer-content".

Thanks
Duncan

July 12, 2020 at 9:24 am #1361047

Glad you got it working! :)

This archived topic is closed to new replies.

Start building better websites today.