Как добавить CSS анимации на WordPress

Вы видели эти красивые CSS-анимации на популярных сайтах? Анимационные эффекты, такие как скользкий, рассеивающий контент, прыгающие изображения и т. Д. ?

В этой статье мы покажем вам, как легко добавлять анимации CSS в WordPress без написания кода.

Когда и почему вы должны использовать CSS-анимацию?

CSS-анимация позволяет привлечь внимание пользователя к различным частям страницы. Вы можете использовать их для анимации функций продукта или кнопки вызова к действию. Многие веб-сайты используют анимацию CSS, когда пользователь прокручивает страницу вниз. Это добавляет определенную личность на страницу и подчеркивает наиболее важные элементы.

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

Тем не менее, в этом уроке мы увидим, как вы можете легко добавлять CSS-анимацию на ваш сайт WordPress.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить блог WordPress в шагах по 7 et Как искать, устанавливать и активировать тему WordPress в своем блоге

Тогда вернемся к тому, почему мы здесь.

Как настроить CSS-анимации

Мы будем использовать плагин для этого урока. Это позволяет создавать CSS-анимации, используя визуальный редактор WYSIWYG, Первое, что вам нужно сделать, это установить и активировать плагин Анимировать его!. Плагин работает без конфигурации и нет панели управления.

Открыть Как установить плагин в WordPress если ты никогда не делал это

Просто создайте новую статью, и вы увидите новую кнопку на панели инструментов визуального редактора.

Щелчок по кнопке откроет новое окно, в котором вы можете создавать свои анимации в CSS. Плагин поддерживает множество анимаций CSS, которые все могут выбрать.

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

Иди дальше, открыв Как добавить классную анимацию в свой блог

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

После того как вы удовлетворены настройками, вы можете нажать на кнопку " Он одушевляет Чтобы увидеть предварительный просмотр анимации.

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

Вы должны удалить фиктивный контент внутри короткого кода и заменить его своим собственным контентом, изображениями или чем-либо еще, что хотите оживить.

Обнаружить Как добавить интерактивные карты на ваш сайт WordPress

Все, что вам нужно сделать, это опубликовать ваш контент и просмотреть его.

Откройте для себя также несколько премиальных плагинов WordPress

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. ChimpMate Pro

Chimpmate - это премиальный плагин WordPress для WordPress, который поможет вам превратить ваших читателей в подписчиков. Он был разработан, чтобы увеличить ваш список адресов электронной почты, не раздражая посетителей, с раздражающими всплывающими окнами.

Это полностью настраиваемый, и вы будете контролировать, когда и где отображать всплывающие окна. Другие его особенности: поддержка из нескольких браузеров и имеет рнесколько вариантов планирования, полностью настраиваемый макет,отзывчивая поддержка клиентов, яидеальная интеграция с WooCommerce, еxcellente управление кешемидеальная интеграция с несколькими темами WordPress, многоязычная поддержка спасибо к плагину WPML, eбольше не очень.

Скачать | Демо | Дешёвый хостинг

2. Платежный шлюз WooCommerce Cardstream

CardStream - единственный независимый поставщик платежных шлюзов. Этот премиальный плагин WordPress позволяет принимать платежи непосредственно в ваш интернет-магазин WooCommerce от Cardstream.

Он также дает вам возможность принимать платежи с помощью размещенного решения Cardstream.

Скачать | Демо | Дешёвый хостинг

3. Источник данных

DataSource - это премиальный плагин WordPress, предназначенный для визуального представления ваших данных на любой странице вашего сайта. Это позволяет вам представлять данные из CSV, XML, Excel, таблиц Google, баз данных MySQL или пользовательских типов публикаций в виде сортируемых и фильтруемых таблиц, различных графиков, карт и многого другого.

Среди его особенностей вы найдете среди прочего:интуитивно понятный интерфейс, тв зависимости от модели ваших данных, тсортируемые, фильтруемые и отзывчивыеподдержка Google Maps и многоязычный,отзывчивая поддержка клиентов, один мруководство пользователя, ябыстрая установка, ет больше

Скачать | Демо | Дешёвый хостинг

Рекомендуемые ресурсы

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

• Как сжать и изменить размер изображения на WordPress
• Как добавить виджет в шапку вашего блога на WordPress
• Как добавить интерактивные карты на ваш сайт WordPress
• Как исправить ошибку 413 в WordPress

Заключение

Вот и все! Это все, что нужно для этого урока, мы надеемся, что оно помогло вам освоить интеграцию CSS-анимации в WordPress. Не стесняйтесь поделиться с друзьями в ваших любимых социальных сетях.

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, консультируясь с нашим гидом по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...