Как добавить 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 от MailChimp, который поможет вам превратить ваших читателей в подписчиков. Он был разработан, чтобы увеличить ваш список адресов электронной почты, не раздражая посетителей, с раздражающими всплывающими окнами.

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

скачать | Демонстрация | веб-хостинг

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

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

Это также дает вам возможность принимать платежи, используя решение Cardstream.

скачать | Демонстрация | веб-хостинг

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

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

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

скачать | Демонстрация | веб-хостинг

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

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

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

Заключение

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

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

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

...