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

В этой статье мы покажем вам, как легко добавить 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

...