[Resolved] Adding a click to call icon in mobile mode

Home Forums Support Adding a click to call icon in mobile mode

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1360248
    Duncan

    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

    #1360417
    Tom
    Lead Developer
    Lead Developer

    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!

    #1360458
    Duncan

    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

    #1360475
    Duncan

    Hi Tom

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

    Thanks
    Duncan

    #1361047
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.