Replacing CtoA button

Sydney
#1

Hi,

I have been trying to replace the Call to Action button, on the home page. I don’t necessarily need to have unique buttons for each slide, but I saw this snippet and tried it first

Although it did hide the default button for me, it did not render anything I tried in the var’s for replacement buttons, even the provided generic examples. It looks simple enough though. Has anyone else had success with this, or some other suggestion? I’m basically wanting to replace the CtoA button with something like the following, which along with some css I already have in place, creates an animated scroll icon. I can add this in pretty much any manner, including via short-code, as I have a working plugin that will render it anywhere that short-code will work.

<div class="vvs_container">
  <div class="vvs_chevron"></div>
  <div class="vvs_chevron"></div>
  <div class="vvs_chevron"></div>
  <div class="vvs_text">Scroll down</div>
</div>
#2

Hello there,

Please try this code:


jQuery(function($) {

  if( $('.header-slider').length ) {

    var arrowDown  = '<div class="vvs_container">';
        arrowDown += '<div class="vvs_chevron"></div>';
        arrowDown += '<div class="vvs_chevron"></div>';
        arrowDown += '<div class="vvs_chevron"></div>';
        arrowDown += '<div class="vvs_text">Scroll down</div>';
        arrowDown += '</div>';

    $('.slide-inner a').hide();
    $('.slide-inner').append(arrowDown);

  }

});

Regards,
Kharis

#3

Brilliant, elegant, and worked perfectly. Thank you very much Kharis!

#4

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

#5

Hi Kharis,

  1. I have a similar Question - Is it possible to change the shape of the Call to Action Button to Arrow shape in the header section ?

  2. Is it possible to have “Maxbutton” shortodes be inserted in the place of Sydney CTA in the Header ?

#6

Hello there,

If I understand it correctly, you’d like to have an arrow shape and a new button with Maxbutton styles replacing the default one?

Is this the plugin you mean?

Regards,
Kharis

#7

Yes you are correct !

#8

Hello there,

In order to have a down arrow button, please follow the solution in this discussion.

To display maxbutton on main slider, you can do these steps:

1 . Add this function to your child theme’s functions or use a functionality plugin like Code Snippets:

    add_action('sydney_before_site', 'sydney_child_extra_slide_button');
    function sydney_child_extra_slide_button() {
      $html  = '<div class="extra-slide-button" style="display:none;">';
      $html .= do_shortcode('[maxbutton id="1"]');
      $html .= '</div>';
      echo $html;
    }

In the code above, replace [maxbutton id=“1”] with your maxbutton shortcode.

2 . Install and activate the TC Custom JavaScript plugin
3 . Go To Appearance > Custom JavaScript
4 . Paste the following code into the provided box

    (function($){

      if( $('.extra-slide-button').length && $('.header-slider').length ) {

        $('.extra-slide-button').remove().clone().insertAfter('.button-slider').css('display', 'block');

      }

    })(jQuery);

5 . Update

Regards,
Kharis

#9

Thanks Kharis,

The solution that you referred in the link (Add an Animated Scroll Down) and the subsequent animation steps works good for image slider but it is not visible for Header Video…

Can you help with the code for header video pls ???

#10

Hello there,

Please try doing these steps, please.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

      "use strict"

      if( $('body').hasClass('home') ) {

        var heroContent  = '<div class="slide-inner">';
            heroContent += '<a class="scroll-down-arrow" href="#primary"><i class="fa fa-angle-down"></i></a>';
            heroContent += '</div>';

        $('.sydney-hero-area').append(heroContent);

      }

      if( $('.extra-slide-button').length && $('.sydney-hero-area').length ) {

        $('.extra-slide-button').remove().clone().insertAfter('.scroll-down-arrow').css('display', 'block');

      }

    })(jQuery);

4 . Update
5 . Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .scroll-down-arrow{
      position: absolute;
      bottom: 10px;
      left: 0;
      z-index: 5;
      font-size: 40px;
      display: block;
      width: 100%;
      text-align: center;
    }

    @-webkit-keyframes bounce {
    	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	40% {-webkit-transform: translateY(-30px);}
    	60% {-webkit-transform: translateY(-15px);}
    }

    @-moz-keyframes bounce {
    	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    	40% {-moz-transform: translateY(-30px);}
    	60% {-moz-transform: translateY(-15px);}
    }

    @-o-keyframes bounce {
    	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    	40% {-o-transform: translateY(-30px);}
    	60% {-o-transform: translateY(-15px);}
    }
    @keyframes bounce {
    	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    	40% {transform: translateY(-30px);}
    	60% {transform: translateY(-15px);}
    }

    .scroll-down-arrow{
      -webkit-animation-name: bounce;
      -moz-animation-name: bounce;
      -o-animation-name: bounce;
      animation-name: bounce;

      -webkit-animation-fill-mode:both;
      -moz-animation-fill-mode:both;
      -ms-animation-fill-mode:both;
      -o-animation-fill-mode:both;

      animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;

      animation-fill-mode:both;
      -webkit-animation-duration:2s;
      -moz-animation-duration:2s;
      -ms-animation-duration:2s;
      -o-animation-duration:2s;
      animation-duration:2s;
    }

    .extra-slide-button {
      width: 100%;
      position: absolute;
      bottom: -30px;
    }

Regards,
Kharis

#11

Hi Kharis,

Thanks ! That’s great… It works…

But in mobile view, It appears at the centre and not at the bottom…

Also for desktop, Can I have it a bit more lower ???

#12

Try adding this extra CSS code:

    .sydney-hero-area .slide-inner {
      top: auto;
      bottom: 50px;
      min-height: auto;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }

Regards,
Kharis

#13

No… It didnt work…

It brings down the Title & Sub-Title also down along with it… In-addition, When the arrow is clicked, the transition to the below page is not smooth and there are something like border lines appearing in the section…