Плагин Animate It сделает ваш сайт WordPress живым анимация

Прибамбасы для сайта

Обновлённая записьСмотрите здесь!!!

Привет! Сегодня я расскажу о плагине, который может оживить ваш сайт или блог WordPress. Если быть точнее то речь пойдёт о создании анимации. Анимация добавляет к какому-либо элементу вашего сайта определённый эффект. Например можно анимировать изображение, чтобы оно при открытии сайта появлялось из ниоткуда, то есть всплывало. В настройках плагина имеется более 60 различных эффектов, которые вы сможете применить на деле.

 

 

Плагин анимация WordPress

 

Сразу скажу, что плагин имеет простые настройки, то есть вам не понадобится много времени чтобы его настроить и разобраться в нём. Итак, плагин, который превращает статические объекты в динамические, называется — Animate It. Установить данный плагин вы сможете прямо из своей админ-панели wordpress, для этого перейдите по вкладке: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте найденный плагин.

 

11-09-2015 14-00-11

 

 

Чтобы перейти на страницу настроек плагина, перейдите по вкладке: НастройкиAnimate It.

 

11-09-2015 14-01-02

 

Разберём основные, не большие настройки плагина. Сразу скажу что настройки можно не менять, а оставить как есть, по умолчанию.

— Scroll Offset (in percentage), здесь можно указать смещение прокрутки в процентах для эффектов, но лучше оставьте как есть, так как по умолчанию указано оптимальное значение.

— Enable on Smartphones, здесь вам нужно указать включать ли эффекты на смартфонах ?

— Enable on Tablets, здесь укажите включать ли эффекты на планшетах ?

— Custom CSS, оставьте данное поле пустым.

В конце сохраняем настройки.

 

11-09-2015 14-06-02

 

Далее вам нужно перейти на страницу создания записи или страницы, там у вас в визуальном редакторе wordpress появится новый значок для создания анимации. Нажмите на данный значок.

 

11-09-2015 14-23-45

 

У вас откроется окно для создания анимации. Разберём данные настройки.

— Animation Style, здесь вам нужно выбрать эффект для анимации. Посмотреть эффект в живую вы сможете прямо в данном окне. Для этого просто выберите один из эффектов и картинку вверху тут же отобразит его.

— Delay (in seconds), здесь можно указать задержку в секундах перед началом анимации. То есть при открытии страницы эффект отобразится не сразу, а через установленное вами время.

— Duration (in seconds), здесь можно указать длительность эффекта в секундах.

— Animate Infinitely, здесь если указать да, то анимация будет бесконечной.

— Animate On, здесь нужно выбрать один из вариантов. Click — эффект будет повторятся при нажатии на элемент. Hover — эффект повторится при наведении курсора мыши на элемент. Scroll — эффект при прокручивании.

В конце нажимаем на кнопку — Insert, чтобы добавить на страницу шорткод анимации.

 

11-09-2015 14-26-53

 

Далее, на странице у вас появится шорткод с макетом по умолчанию, то есть будет отображаться произвольный текст для показа анимации. Данный текст вам нужно просто удалить и вставить свой текст или какой-либо другой элемент. Добавлять в шорткод можно всё что угодно, то есть всё что можно создать с помощью визуального редактора wordpress. Фото, видео, текст, блоки, таблицы, вкладки и т.д.

 

11-09-2015 14-45-31

 

Всё, при открытии страницы эффект отобразится в указанном вами элементе. На этом у меня всё, если у вас остались вопросы по статье или по плагину, то обязательно напишите мне!

 

Остались вопросы? Напиши комментарий! Удачи!

 

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

  1. Олег

    Здравствуйте Илья.
    Каким образом вставлять шорткод в шапку
    я использую вот этот метод в файле header.php

    но он шорткод состоит из 3 частей: начало анимации-файл-закртытие анимации
    <?php echo do_shortcode('[edsanimate_start entry_animation_type= "bounceInRight" entry_delay= "0" entry_duration= "4" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "infinite" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""][edsanimate_end]’); ?>
    в таком варианте выдает ошибку при открытии страницы
    Если код вставлять в записи, виджиты, то работает прекрасно

    Ответить
  2. Галина

    А ты сам то пробовал пользоваться этим плагином? Слизал у кого то описание и думает, что написал классную статью…..

    Ответить
    1. Admin автор

      Конечно пробовал и знаю как пользоваться ! Очень простой и полезный плагин ! С помощью шорткодов можно добавлять анимацию к любым элементам, текст, фото, видео. Можно устанавливать время и продолжительность анимации. Можно выбрать анимацию, большой выбор ! А ты попробуй, найди в интернете такую же статью ! Могу даже помочь тебе настроить данный плагин на твоём сайте, бесплатно !

      Ответить
    2. Admin автор

      Все плагины, о которых я пишу, я испытываю на своём черновом сайте, перед тем как написать о них !

      Ответить
  3. Елена

    Нет такого плагина! Где только не искала!

    Ответить
    1. Admin автор

      В админ-панели, на странице: Плагины — Добавить новый, сразу нашёл его с первого раза, по запросу — animate

      Ответить
  4. Ирэна

    Вы такой умный)))может подскажите плагин, который делает возможность перейти с сайта, сразу на другой и там видели откуда перешел человек…круто написала)

    Ответить
    1. Admin автор

      Спасибо. Источники переходов лучше смотреть в Яндекс метрики или Google Analytics. Там есть ещё функция вебвизор.

      Ответить
  5. роман

    плагин не работает не появляется в редакторе

    Ответить
    1. Admin автор

      WordPress обновляете? Может несовместимость.

      Ответить
  6. Ксения

    Добрый день, Илья! Не могли бы Вы помочь с плагином — идея такая, что картинки появляются в ряд, одна за другой — как анимированный gif. Мучаюсь. Если есть идея, как это сделать, буду оччч благодарна

    Ответить
    1. Admin автор

      Здравствуйте. Можно так сделать. Вам нужен плагин Shortcodes Ultimate, в нём есть функция Колонки. В каждую колонку ставите шорткод с картинкой и анимацией. В настройках анимации, вам нужно для каждого элемента указать время в такой последовательности, чтобы они открывались одна за другой.

      Ответить
  7. Ксения

    Спасибо огромное!!! Следующая проблема — анимация остается на странице — параметер keep=»no» не помогает — а нужно чтобы на смену анимации появились иконки (меню)
    Это возможно?

    Ответить
    1. Admin автор

      У данного плагина такой возможности нет. В таком случае, лучше к разработчику обратится.

      Ответить