Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #878915

    my website is http://www.ichauffer.co.uk, I would like to create a button at at the bottom of page along with the social media icons where if the user click it dials the number.

    Please can you help?

    #878927

    Please can you let me know what steps do I need to follow to show the phone button like it is shown in the following website, both for on desktop and on mobile (with phone icon on the side)

    I found this article but couldn’t get it setup.

    Thank you.

    #878928

    Since then I have found this website with a phone button in the slider.

    https://www.budgetlocksmiths-edinburgh.co.uk/

    How can I achieve this? I want to show the phone icon on the left as well.

    #879031

    Hi,

    Please try this in the copyright field:

    <a href="tel:123456789">123456789</a>

    Best regards,
    Rikard

    #879233

    Hi Rikard,

    Thank you for your reply.

    Unfortunately it has done nothing the code displays as it is at the bottom of footer.

    I even tried to copy the code in a button and still didn’t work.

    Please find the login details in case you want to have a look.

    Just to reiterate I want to create a button in header, anywhere in the content section and in the footer where I have insert the button and when the user clicks on it then it dials the number behind that button.

    #880036

    Hi,

    Thank you for the info.

    We added the “tel code” in the Enfold > Header > Extra Elements panel and modified the text block at the bottom of the front page.

    Best regards,
    Ismael

    #880226

    Hi Ismael,

    I know how to add the phone number in Extra Elements but my question is completely different ….

    I want to do the following with the phone number.

    – Add the phone number button with custom colour as a menu item
    – Add the phone number as a button with custom colour anywhere in the website (using button element)

    I hope this makes sense.

    Kind regards,

    #881051

    Hi,

    ou can add a unique css class attribute to the link tag and then modify its style or look in the Quick CSS field. Example.

    <a class="custom-phone" href="tel:123456789">123456789</a>
    

    Quick CSS field:

    .customn-phone {
      padding: 5px 10px;
      background: red;
      border: 1px solid blue;
      color: white;
    }

    Adjust the values as needed. Please provide a screenshot of the button design that you’d like to create.

    Best regards,
    Ismael

    #881148

    Hi Ismael,

    Thank you for your reply.

    I apprecaite all your help.

    I have created 5 different situations where I could need a call us functionality.

    1). https://www.ichauffer.co.uk (Menu item – Call Us) – As you can see it doesn’t do anything. I would like this option to only show on mobile menu and I want customer to be able to click and call.
    2). I have set up a test page here https://www.ichauffer.co.uk/test-page, and have created the following types on buttons on the page.
    a). Icon Box (I would like to make it click and call icon)
    b). A Button Element (I would like to make it click and call button)
    c). I have inserted an image call now (I would like the image to be a click and call button)

    I hope this will clarify things and we can finalise the thread and carry on building awesom websites using ENFOLD.

    Looking forward to your response.

    PS. the information you provided has helped a bit by created a section with background but the button I have created is overlaping the logo area and if I increase the size of header then my logo area become big as well. I only want to the increase the area of header where the phone number is shown.

    #882091

    Hi,

    and I want customer to be able to click and call.

    You don’t need to add the whole markup in the image link. Just use the “:tel” scheme. Example.

    tel:YOUR_NUMBER_HERE
    

    Please note that the “:telYOUR_NUMBER_HERE” scheme or feature is supported on mobile devices only. It’s not going to work on desktop.

    Best regards,
    Ismael

    #882203

    Yes, thats what I wanted …

    You are a legend Ismael :)

    You can close the thread now.

    But before you close it please can you let me know how to increase the area of Phone number section above the header and how to remove the border line?

    Once again thank you for all your help.

    #882207

    Hi,

    Glad Ismael the legend could help! :)

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top #header_meta {
        border: none!important;
    }
    #header_meta .container {
        min-height: 60px;
    }
    

    Best regards,
    Yigit

    #882213

    Don’t feel jealous Yigit … You are a legend as well … :)

    It has worked but the coloured button I have created with Call Us text in the extra element is not showing the text in the middle of button is there any wa, it can aligned perfectly in the middle.

    I have used the following code to create the button.

    .custom-phone {
    padding: 20px 40px;
    background: gold;
    border: 1px solid blue;
    color: white;
    }
    .phone-info { font-size: 30px; }

    Looking forward to your response.

    #882214

    Hey!

    Haha thanks! But i was not jealous, i was agreeing with you :)

    I added following code to Quick CSS field

    .phone-info span {
        line-height: 60px;
    }

    Please review your website :)

    Regards,
    Yigit

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