Вы видели эти красивые 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

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.

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

...