Typing Effect in the Header slider

Hey I’m trying to add a typing effect in the Title of the header slider with the Typing effect plugin.

it gave me this code to add in the theme:
<?php echo do_shortcode( ‘[typed string0=“First sentence” string1=“Second sentence” typeSpeed=“40” startDelay=“0” backSpeed=“40” backDelay=“500”]’ ) ?>

but it does not recongnize and the entire code apears as the title.
Is there a way to fix that?

The latest version of the theme comes with several useful hooks to insert custom code into certain area including header. To insert that shortcode into header, add this function into child theme’s functions.php file or you can use the functionality plugin like Code Snippets.


add_action('sydney_before_header', 'sydney_child_header_text');
function sydney_child_header_text() {
	echo '<div class="my-typing-effect">';
	echo do_shortcode( '[typed string0="First sentence" string1="Second sentence" typeSpeed="40" startDelay="0" backSpeed="40" backDelay="500"]' );
	echo '</div>';
}

The move the shortcode output into the center of the main slider image and alter the default text slider, do these steps:

  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( $('.header-slider').length ) {

      $('.my-typing-effect').remove().clone().prependTo('.slide-inner').wrap('<div class="text-slider-typing"></div>');
  
   }

})(jQuery);

  1. Update
  2. Add this CSS code into Appearance > Customize > Additional CSS:

.text-slider {
  display: none;
}  

.my-typing-effect {
  color: #fff;
  font-size: 57px;
  line-height: 67px;
  font-weight: 700; 
  z-index: 10;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 767px) {
  .my-typing-effect {
    font-size: 32px;
      line-height: 1.1;
      padding-bottom: 10px;
  }
}

@media only screen and (max-width: 479px) {
  .my-typing-effect {
    font-size: 18px;
  }
}

Regards,
Kharis

1 Like

woow! Thanks a lot dude!
I got it :smiley:

Another question, now:

How can I align the all the header slider text and call-to-action button to the left border of the other rows.

As I have now, the header titles are floating depending on the screen size. It never becomes aligned to the rows below it.

Hello there,

Replace the jQuery code I suggested, from:


;(function($) {

   'use strict'

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

      $('.my-typing-effect').remove().clone().prependTo('.slide-inner').wrap('<div class="text-slider-typing"></div>');
  
   }

})(jQuery);

to:


;(function($) {

   'use strict'

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

      $('.header-slider .slide-inner').wrapInner('<div class="container"></div>');
      $('.my-typing-effect').remove().clone().prependTo('.slide-inner .container').wrap('<div class="text-slider-typing"></div>');
  
   }

})(jQuery);

Then add this CSS code into Appearance > Customize > Additional CSS:


.slide-inner {
  text-align: left;
}

Regards,
Kharis

1 Like

Thanks a lot Kharis, it’s alright now!

Is there a way to disable this “typing effect” in the other pages I’m creating? It’s replicating in all pages I create.

Thanks so much.
Cheers

Try to add this code:


body:not(.home) .text-slider {
  display: block;
}

body:not(.home) .my-typing-effect {
  display: none; 
}

Regards,
Kharis

1 Like