Вы видели эти красивые 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.
Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.
...
Слишком хорошо .. Спасибо за информацию !!