Question

https://codepen.io/Rudchyk/pen/DgxKm/

Answer 1

первый туда где текст. точнее текст завернуть в код. вторую часть в таблицу стилей в самый низ. панель управления - дизайн - таблица стилей. третью часть создать на компьютере текстовый файл, вставить туда скрипт сохранить в utf кодировке. далее сменить арсширение на js. файл залить в файловый менеджер. далее в шаблонах подключить вот так

 <script src="тут адрес файла в файловом менеджере"></script>

подключать можно в шаблоны перед закрывающим тегом 

 </body>

Comments

Третью часть куда в блоке промо или где?

---

Can-Am BRP,

можно в блоке промо если вам удобно

---

webanet,

А куда именно? И ГДЕ лучше?

---

Can-Am BRP,

сверху. хватит вопросов начните делать. потом в процессе можно будет подкорректировать

---

webanet,

Не получается, так сделал как вы казали

---

Can-Am BRP,

не вижу следов вашей деятельности в коде сайта

---

webanet,

Посмотрите вниманительнее, я все добавил

---

Can-Am BRP,

Вы не добавили в блок промо скрипт:

<script type="text/javascript"> 
$.fn.animate_Text = function() {
  var string = this.text();
  return this.each(function(){
   var $this = $(this);
   $this.html(string.replace(/./g, '<span class="new">$&</span>'));
   $this.find('span.new').each(function(i, el){
    setTimeout(function(){ $(el).addClass('div_opacity'); }, 20 * i);
   });
  });
 };
 $('#example').show();
 $('#example').animate_Text();
 </script>

добавьте в самый низ после всего кода.

---

Yuri_Geruk,

Добавил, изменений не вижу, файл run.js после </body>

---

Can-Am BRP,

Поправьте стили:

#example { padding:100px; width:350px; display:none; }

замените на:

#example {color: #fff;padding: 10px;display:none;}

после очистите кеш в браузере. Как вижу все работает.