Как сделать иконки-кнопки с подписью

  • kudma

    (@kudma)


    2 года, 8 месяцев назад

    Доброго времени суток! WordPress Версия 5.9.2, WooCommerce и Elementor последние версии.
    Хочу сделать кнопки-иконки с подписью, (если будет возможно с небольшой анимацией).
    В обычном положении: иконки статичны.
    При наведении: если есть возможности, то иконка будет менять цвет при наведении.
    При нажатии: переход на страницу с товарами
    — с заранее выбранными фитрами по всему магазину
    — или просто переход на страницу с товарами, с дальнейшим выбором фильтров.
    Есть пример на этой странице http://shop52336.horoshop.ua/ или могу показать скрином.
    Подскажите как можно реализовать такой функционал?

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Dmitry Litvinov

    (@dmitrylitvinov)

    2 года, 8 месяцев назад

    Здравсвуйте, @kudma

    Выбираете блок Elementor ‘иконка с подписью’, либо ‘изображение с подписью’, далее — выбираете иконку, либо вставляете свой медиафайл соответсвенно.

    Для того что бы вставить ссылку, вам нужно будет скопировать нужный URL и вставить его в специальное поле в настройках блока (выбор блока — основные настройки блока) .

    Для того что бы ваша иконка, либо картинка изменялись при наведении, вам потребуется так же внести некоторые изменения в настройках блока: Стиль — Наведение — Фильтры CSS (для цветовых изменений), или Прозрачность (для настроек прозрачности).

    Для эффектов: Выбираете нужный блок — Расширенные настройки — Эффекты движения — Выбираете эффект.

    Автор kudma

    (@kudma)

    2 года, 8 месяцев назад

    Еще есть ньюанс необходимо разместить больше иконок чем поместится на экран (десктоп, планшет, телефон) типа «Карусель» но в карусели почему если я ставлю ссылки то эта ссылка под всеми иконками которые будут в этом блоке. То есть: должна крутится карусель с иконками и подписями к ним, что бы на каждую тконку была своя ссылка, ну и плюс при наведении изменение иконки (к примеру обводка, или подсвечивание).

Просмотр 2 ответов — с 1 по 2 (всего 2)
  • Тема «Как сделать иконки-кнопки с подписью» закрыта для новых ответов.