Хотите узнать, как добавить эффект наведения к элементам в виджете сообщенийElementor?
Если вы являетесь пользователем WordPress, использующим Elementor создать свой Веб-сайт, вы должны быть знакомы с функцией эффекта наведения. Вы можете найти эту функцию в основном в настройках каждого виджета. Elementor.
Эффект наведения может сделать ваши элементы привлекательными, поэтому это эффективный способ улучшить взаимодействие с пользователем на вашем сайте. сайт.
Что ж, говоря об эффекте наведения, эта статья покажет вам, как добавить последний к отдельным элементам записи в виджете. Elementor Публикации с использованием пользовательского CSS Elementor, в частности, эффекта увеличения при наведении.
Есть две причины, почему мы делаем это руководство для вас:
- По умолчанию вы можете добавить эффект наведения к сообщению из виджета сообщений Elementor. Но эффект наведения будет очень простым/стандартным.
- По умолчанию Elementor позволяет добавить эффект молнии в виджет «Сообщения» (вкладка Передовой -> Трансформатор –> ECHELLE). Но эффект наведения повлияет на все (не отдельные) элементы виджета сообщений.
Действия по добавлению эффекта наведения к отдельным сообщениям из виджета сообщений Elementor
Прежде чем начать обучение, мы хотим сообщить вам, что в этом руководстве используется функция пользовательского CSS Elementor. Эта функция доступна только на Факир Pro; убедитесь, что вы обновили свою версию.
Шаг 1: Добавьте виджет сообщений
Перейдите в свой редактор Elementor, и мы начнем все с нуля, поэтому создайте раздел только с одним столбцом.
Читайте также: Как интегрировать MailChimp с Elementor
Затем выберите виджет «Сообщения» на панели виджетов, а затем перетащите его в область редактирования. После того, как вы добавили виджет «Сообщения», вы можете редактировать и оформлять виджет в соответствии со своими предпочтениями.
Ремарка: Пожалуйста, убедитесь, что вы уже публиковали статьи на своем сайт.
Шаг 2. Добавьте фрагмент CSS
После того, как вы отредактировали и настроили виджет «Сообщения», мы добавим эффект наведения в отдельное сообщение, добавив простой фрагмент кода CSS. В настройках виджета Записи перейдите на вкладку Передовой -> Пользовательский CSS. Пожалуйста, скопируйте приведенный ниже фрагмент кода CSS и вставьте его в поле. Пользовательский CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Приведенный выше код выберет отдельный элемент сообщения в виджете сообщений с помощью селектора. .élémentor-post и примените преобразование CSS.
Если вы довольны использованным эффектом наведения, вы можете оставить его таким и сохранить свой проект, если хотите. Но если вы хотите настроить скорость перехода и значение масштаба преобразования, вы можете изменить значение во фрагменте CSS.
Ремарка: Преобразование/увеличение — распространенный и популярный эффект, используемый на веб-сайтах. Если вы хотите узнать больше о других методах преобразования эффектов наведения, вы можете посетить это страница.
Узнайте также: все селекторы виджетов Elementor в следующей статье
Получить Elementor Pro сейчас !!!
Заключение
В этой статье показано, как легко добавить эффект наведения к отдельным элементам сообщений в виджете сообщений Elementor с помощью пользовательского CSS.
Техника, которую мы использовали для этого эффекта (увеличение), включает 2D и некоторые псевдотрансформированные элементы. Настраивайте и экспериментируйте со всеми стилями эффектов наведения, пока не найдете лучший эффект наведения для своего веб-сайта.
Вот! Мы только что познакомили вас с лучшими инструментами для маркетинга по электронной почте для Elementor. Если у вас есть какие-либо опасения по поводу того, как их использовать, сообщите нам об этом в течение Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
