seo

Как создать анимацию в записи блога используя шорткод

создать анимацию

Создать анимацию в записи блога тоже можно с помощью плагина Shortcodes Ultimate. Причем. как известно, такая анимация не будет нагружать блог. Так как она сделана с использованием шорткода.

Зачем такая анимация нужна на блоге? Если Вы желаете привлечь внимание своего посетителя к определенным моментам статьи, то она даже очень уместна. Ниже Вы увидите все возможности. которые предлагает плагин. Здесь. конечно, еще добавлена работа плагина WP-Note. Без него полосы будут просто желтыми.







Перегружать, конечно, свою запись не надо. Но, если Вы хотите создать подписную страницу на блоге. Или решили использовать свой поддомен под создание посадочной страницы (Об этом я планирую создать серию статей), то такие эффекты будут не просто уместны, но и полезны.

Теперь давайте разберемся с процессом установки. Начинаем, как всегда, с кнопки - Вставить шорткод. И выпадающем меню выбираем - Анимация. И приступаем к настройке.

Настройки

Мы обсудим основные настройки, остальные идут по аналогии с предыдущими.

создать анимацию шорткод

  1. Информация о том, что любая запись будет анимирована, если Вы пометите ее в контейнер данного шорткода;
  2. Примеры использования. Пройдя по этой ссылке Вы попадете в дополнительные шоткоды по данной функции. Но эти шорткоды будут более зрелищны. Ниже, я покажу как ими пользоваться;
  3. Тип анимации. Выбор очень большой. Пробуйте, Смотрите, что Вам больше подходит. Только помните, что анимирован будет только текст. Подсветки в виде ярких полос не будет.
  4. Продолжительность. Это время показа анимации. По умолчанию стоит 1 сек. Этого достаточно. Но Вы можете увеличить - продлить сам процесс движения.
  5. Задержка. Вы наверное обратили внимание на то, что анимация открывается по мере открытия страницы. Так происходит в том случае, если установлен - 0. Но можно и увеличить задержку, используя бегунок шкалы.

Остальные настройки аналогичны предыдущим. Там нет ничего сложного. Но для того, что бы выделить анимационный текст - используйте шорткод из примером использования (п.п.2) Когда откроется окно, вы увидите множество примеров.

создать анимацию примерыВыбирайте то, что Вам понравилось и жмите на кнопку - Получить код. А вот здесь будьте внимательней. Например, Вам понравилась вторая синяя кнопка. Но код Вам предоставят всех трех. Код Вашей кнопки будет обозначен во второй строке. Ваша задача, скопировать его, перенести на свою запись, и вместо слов - Click me, вставить нужный текст.

создать анимацию кнопка

Точно так же действуйте и с любой другой анимацией. Помните, что коды будут Вам предоставлены всем списком. И из этого списка надо выбрать нужный.

Очень надеюсь, что смогла все объяснить понятно. Но, если будут вопросы, обращайтесь в комментариях. Обязательно отвечу!

Смирнова Ирина

Комментарии 2

  • Голубка, написать про то, как работает русскоязычный шоркодер и я смогу.

    Как переименовать контейнер анимации, чтобы он не назывался «Заголовок блока»?

    • А Вы просто удалите верхний код. Например:

      Different animation types

      [animate type="bounceIn" delay="1"] [note] Animated text [/note] [/animate]
      Вот такой код Вы получаете. Удалите верхнюю строчку, которая заключена в h2 и просто вставьте сам код

      [animate type="bounceIn" delay="1"] [note] Animated text [/note] [/animate]

Добавить комментарий