Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуемые]

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

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

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

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

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

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

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

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

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

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

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

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

animateit кнопки

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

Анимация-редактор

Легко создать свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным внешним видом. Перестань дорого платить за то, что можешь сделать сам. [Free]

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

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

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

animateon

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

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

анимировать-шорткод

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

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress от Envato и легко создайте свой веб-сайт. Уже более 49.720.000 XNUMX XNUMX загрузок. [ЭКСКЛЮЗИВ]

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

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

Легко создать свой интернет-магазин

Скачайте бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать физические и цифровые продукты на WordPress. [Рекомендуемые]

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

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

Заключение

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

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

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

...

Эта статья содержит 1 комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля обозначены *

Этот сайт использует Akismet для уменьшения спама. Узнайте больше о том, как используются ваши данные обратной связи.

Вверх
12 акции
доля8
чирикать2
Регистрация2