Home Forums Porto Template call to action

  • This topic has 9 replies, 2 voices, and was last updated 1 week ago by ronstone. This post has been viewed 93 times
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #10031769
    ronstone
    Participant

    Rodrigo…
    I would like to add a call to action button to version 3.1.0. The button would consist of a single word of text and would link to a page.
    thanks, Ron



    Template Version: css 3.1.0
    #10031770
    ronstone
    Participant

    i was thinking something along the lines of the current top-of-page button in the footer. A small button that floats on the right side. thanks


    #10031776
    Support
    Keymaster

    Hello,

    1) Put the button right before the scripts at the bottom of the page content:

    <a class="btn btn-default btn-fixed-bottom" href="#" role="button">Link</a>

    2) Add the following css code:
    (css/custom.css)

    .btn-fixed-bottom {
    	position: fixed;
    	bottom: 60px;
    	right: 12px;
    }

    Kind Regards,

    Jonas


    #10031779
    ronstone
    Participant

    Would it be possible to remove the top-of-page element?
    Is there any control over the background and text color of the button?

    thanks


    #10031786
    Support
    Keymaster

    Hello,

    – To remove the “scroll to top” element:

    .scroll-to-top {
    	display: none !important;
    }

    – To change the color of the button:

    .btn-fixed-bottom {
    	position: fixed;
    	bottom: 12px;
    	right: 12px;
    	background-color: #25375F !important;
    	color: #fff !important;
    	border-color: #25375F !important;
    }

    Best Regards.


    #10031794
    ronstone
    Participant

    this works perfectly on the local desktop but does not work when loaded on the server. On the server the button is displayed below the footer and the scroll-to-top is displayed. multiple browsers used. you are welcome to examine the url toptier dot com.
    thanks


    #10031797
    Support
    Keymaster

    Hello,

    – Put the button HTML code right after the body tag is opened, as a first element.

    – Change the css to:

    .btn-fixed-bottom {
        position: fixed;
        bottom: 50%;
        right: 12px;
        background-color: #0088CC !important;
        color: #fff !important;
        border-color: #25375F !important;
        z-index: 100000;
    }

    Could not see the scroll-to-top here on mobile or desktop, but to avoid any conflict with the css add this:

    .scroll-to-top,
    .scroll-to-top.visible {
    	visibility: hidden !important;
        display: none !important;
    }

    #10031812
    ronstone
    Participant

    This works perfectly on my local desktop in chrome, but but does not work on the server in chrome. The code does work on the server in firefox and internet explorer. Chrome is the issue. see /compact.html

    thanks


    #10031816
    Support
    Keymaster

    Hi,

    I can see the button here Chrome Version 79.0.3945.117 on page compact.html, it might be cache of the browser on your side? Try to clear cache.


    #10031821
    ronstone
    Participant

    yes. clearing cache did the trick.

    You guys are the best.


Viewing 10 posts - 1 through 10 (of 10 total)