Нужно добавить эффект наведения в Elementor через собственный CSS?
В Elementor есть встроенная функция для добавления эффекта наведения к элементу (мы рассмотрели это в одной из наших статей. Хотя эта функция достаточно полезна, у нее есть обратная сторона. Вы можете только добавить к ней эффект наведения курсора. Раздел, столбец, виджет «Изображение», виджет «Кнопка» и виджет «Сообщения».
Читайте также: Как установить Elementor на WordPress
Встроенная функция эффекта наведения Elementor не позволяет вам добавлять эффект наведения к другим виджетам, таким как виджет текстового редактора, виджет заголовка и т. Д. Другой недостаток заключается в том, что вы можете добавить только очень простой эффект наведения.
Есть ли другой вариант добавления эффекта наведения в Elementor?
Да, есть. Вы можете добавить эффект наведения в Elementor через собственный CSS. Но чтобы добавить собственный CSS, вам необходимо использовать Elementor Pro, поскольку пользовательский CSS доступен только в Elementor Pro.
Добавление эффекта наведения в Elementor через собственный CSS
Прежде чем мы начнем, давайте взглянем на пример эффектов наведения, созданных с помощью настраиваемого CSS.
В отличие от встроенного в Elementor эффекта наведения курсора, вы можете использовать этот метод для добавления эффекта наведения к любому элементу в Elementor. Будь то раздел, столбец или виджет (все виджеты).
В этом примере мы покажем вам, как добавить точечный эффект к столбцу.
Сначала щелкните маркер столбца, чтобы переключиться на панель настроек столбца. Оказавшись там, перейдите на вкладку Передовой и откройте блок На заказ CSS и вставьте следующий код CSS.
селектор: hover {переход: все .2s легкость входа; преобразовать: масштаб (1.1); курсор: точка; z-индекс: 1; }
Вуаля.
В приведенном выше коде мы используем свойство CSS преобразовать () чтобы добавить эффект наведения. Тип преобразования, который мы используем в этом примере, - масштабирование с длительностью 1,1 секунды.
Есть еще 4 типа трансформации, с которыми вы можете использовать:transform
- матрица
- Переведите
- Поворот
- скос
Если вы хотите использовать другой стиль преобразования, вы можете просто заменить значение трансформировать в коде CSS выше.
Вы можете прочитать Cette страница чтобы узнать больше о преобразовании CSS.
Вы можете следовать тем же путем, чтобы добавить эффект наведения к другим элементам.
Чтобы добавить точечный эффект к разделу, вы можете щелкнуть маркер раздела и перейти на вкладку Передовой и откройте блок Пользовательские CSS.
Чтобы добавить эффект наведения к виджету, вы можете щелкнуть дескриптор виджета и снова перейти на вкладку. Передовой, затем откройте блок Пользовательские CSS.
Другие дополнительные премиальные плагины WordPress
Также откройте для себя другие WordPress плагины премиум, которые оптимизируют производительность вашего блога или веб-сайта WordPress.
1. Live Sales Popup
Всплывающее окно с живыми продажами — еще один Плагин Wordpress уведомление с несколькими вкусностями, которые вы можете превратить в преимущество. Во-первых, у него есть возможность отображать всплывающее окно когда кто-то выполняет заказ. 
Во-вторых, всплывающее окно продаж в реальном времени может также отображать уведомление, когда человек просто добавляет товар в корзину. И, в-третьих, вы можете использовать этот инструмент, чтобы повысить ажиотаж в отношении продукта, показывая, сколько посетителей просмотрело статью.
С учетом последних тенденций в Интернете вы можете ожидать, что всплывающее окно Live Sales будет красиво отображаться на всех устройствах и в браузерах. Что касается всплывающего макета, вы можете настроить его до мельчайших деталей.
Читайте: Как исправить предупреждение системы безопасности на вашем блоге WordPress
Другие особенности Live Sales Popup - это более тридцати анимаций, звуков, обратный отсчет и индивидуальное позиционирование. Он также работает с поддельными уведомлениями и позволяет вам установить его только для определенных страниц, на которых вы хотите, чтобы уведомление выполняло свою задачу.
скачать | Демонстрация | веб-хостинг
2. Foodify
Foodify это самый быстрый и простой способ для клиентов заказать еду в магазине. Это полностью отзывчивый и включает дополнительные функции, такие как изображение, вариант поискаИнформация о продукте. 
Он также добавляет кнопки в корзину для улучшения пользовательский опыт. Это расширение WooCommerce - быстрое комплексное решение для заказа, которое можно добавить на любой веб-сайт WooCommerce.
Вой залива 5 WordPress плагины для оптимизации описания категорий и меток
Его преимущество в том, что он очень гибкий и совместим со многими существующими плагинами в каталоге WordPress.
скачать | Демонстрация | веб-хостинг
3. Средство просмотра изображений Mega Zoom & Pan Image
Плагин Mega Zoom & Pan Image Viewer — это отличный просмотрщик изображений и браузер с полностью адаптивным макетом для отображения больших изображений на вашем WordPress блог.
Это мощный инструмент, предназначенный для представления продуктов (изображения продуктов с высоким разрешением. Например: одежда, автомобили, технические схемы и т. Д.), Отображения карт и всех других изображений благодаря его масштабированию и функциям. панорамный, его элементы управления навигацией, его полоса прокрутки, и настраиваемые маркеры / точки доступа.
Вот 5 приложений для смартфонов для защиты ваших изображений и видео
Этот плагин отлично работает на iOS (iPad, iPhone), Android и Windows Mobile и т. Д. Он также работает во всех современных браузерах и старых браузерах, таких как IE7 или IE8.
Другие рекомендуемые ресурсы
Мы также приглашаем вас ознакомиться с указанными ниже ресурсами, чтобы получить дополнительную информацию о вашем веб-сайте и блоге.
- Как удалить все ожидающие комментарии в WordPress
- Когда и как установить WordPress в подкаталоге
- 5 плагинов WordPress, которые добавят радости Рождества на ваш сайт
- Плагины 10 WordPress для улучшения визуального оформления вашего веб-сайта
Заключение
Вот! Это все для этого руководства. Мы надеемся, что эта статья помогла вам добавить эффект наведения в Elementor с помощью настраиваемого CSS. Вы также можете прочитать нашу статью о Как исправить блокировку рендеринга JavaScript и CSS в WordPress.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Если у вас есть друг или комментарий, оставьте его в разделе комментарий. Главным образом поделитесь этой статьей в разных социальных сетях.
...
