Решено: Изменить изображение при наведении на продукты
11.03.2021 04:27 утра
@fortlondon
Шаг 1: Добавьте CSS к вашей таблице стилей
, чтобы добавить эффект наклона, вам нужно добавить немного CSS COD на Интернет-магазин > Темы .
Найдите тему, которую хотите изменить, и нажмите Действия > Изменить код.
В каталоге Assets щелкните theme.css.liquid. Если в вашей теме нет файла theme.css.liquid , нажмите styles.css.liquid или другой файл с .css.liquid 9001. 7 расширение файла.
В самом низу файла вставьте этот код, размещенный на GitHub .
Нажмите Сохранить .
Шаг 2. Отредактируйте код для изображений вашего продукта
Чтобы отредактировать код для изображений товаров:
В каталоге Snippets нажмите product-grid-item. liquid 90 008 .Если в вашей теме нет продукта -grid-item.liquid , затем найдите один из следующих файлов:
product-card.liquid
product-card-grid.liquid
product-loop.liquid
Найдите HTML img-тег для изображений вашего продукта, выполнив поиск:
Код тега варьируется от темы к теме, но всегда начинается с и заканчивается > или /> 900 08 . Это может выглядеть примерно так:
В новой строке над тегом img вставьте следующий код:
На новой строке ниже img , вставьте следующий код:
9 0002 Результат должен выглядеть следующим образом:
90 008 добавьте код, который изменяет то, что отображается при наведении. Код, который вы добавляете, будет зависеть от того, хотите ли вы показать альтернативное изображение продукта, пользовательский текст или их комбинацию.
Шаг 3. Показ альтернативного изображения товара при наведении курсора 8 , вставьте следующий код:
.
Ваш код должен выглядеть так:
feat. ured_image.alt | побег }}» >
Нажмите Сохранить .
6 016 просмотров
0 Нравится
Отчет
10.05.2021 18:00
Привет, я работаю над минимальной темой и могу найти только theme.scss.liquid в ресурсах. Файлов css.liquid нет. Будет ли это работать так же?
Спасибо
5 960 просмотров
0 Нравится
Отчет
10.05.2021 19:39
Похоже, это решение не применимо к минимальной теме. Я пытался реализовать код, но есть только файлы scss.liquid.
Любой может предложить другое решение.
5 949 просмотров
0 Нравится
Отчет
11.05.2021 00:06
Привет @YHMAC,
Пожалуйста, пришлите адрес вашего магазина, чтобы я мог проверить и помочь вам.
Спасибо,
Если полезно, пожалуйста Нравится и Принять решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью в магазине [email protected] Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
5 937 просмотров
0 Нравится
Отчет
01.06.2021 15:16
Привет удалось найти местного разработчика, который помог.
5 893 просмотров
0 Нравится
Отчет
04.06.2021 21:31
Привет, Презентек.
Я использую тему Venture, и у меня установлено множество приложений, которые могут или не могут воздействовать на код. Я не эксперт. Я попробовал ваш учебник, и я попробовал другой учебник от ecomexperts.io, который был очень похож, и ни один учебник не работал.
Могу я послать вам приглашение внести свой вклад в мой код?
Мой сайт https://everlastinggodkings. com/
5 871 просмотров
0 Нравится
Отчет
05.06.2021 01:57
Не могли бы вы создать учетную запись персонала для [email protected], чтобы мы могли проверить тему?
Если полезно, пожалуйста Нравится и Принять решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью по shopify на [email protected] Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
5 853 просмотров
1 Нравиться
Отчет
05.06.2021 02:18
Prezentech Я только что отправил вам код соавтора на указанный вами адрес электронной почты.
Спасибо друг!!
5 848 просмотров
0 Нравится
Отчет
05.06.2021 08:13
Мы обновили вашу тему, и она работает как положено.
Если полезно, пожалуйста Нравится и Принять решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью по shopify на [email protected] Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
857 просмотров
0 Нравится
Отчет
21-12-2022 02:49
Привет, @Prezentech.
Я использую тему Shopify «Рассвет». Я хочу, чтобы изображение продукта показывало второе изображение, когда пользователь наводит на него курсор мыши.
Имена файлов кодов в теме Dawn отличаются от тех, что указаны на первой странице. Я не был уверен, что это правильный файл для добавления кода.
Я отправил вам приглашение по адресу [email protected]. Можете ли вы отредактировать тему для меня?
Изменить: извините. Я нашел решение для темы Dawn здесь: https://community.shopify.com/c/shopify-design/dawn-theme-how-to-show-second-image-on-hover/m-p/1408.
..
667 просмотров
0 Нравится
Отчет
24.03.2021 09:24
Привет @FORTLondon
Пожалуйста, перейдите по ссылке ниже: https://fortldn.com/collections/glassware
Я реализовал для вас изменения при наведении, которые вы хотите.
Спасибо!
Если полезно, пожалуйста Нравится и Принять решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью по shopify на [email protected] Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
5 974 просмотров
0 Нравится
Отчет
24.03.2021 09:34
Привет,
Большое спасибо за это! Это выглядит великолепно, однако я бы хотел, чтобы второе изображение в списке отображалось при наведении курсора на первое изображение продукта . Это нормально?
Большое спасибо, Розанна
5 971 просмотров
1 Нравиться
Отчет
24. 03.2021 09:51
Привет @FORTLondon
Конечно, мы внесли изменения, пожалуйста, проверьте и поделитесь своими комментариями.
https://fortldn.com/collections/glassware
Как только заработает, не забудьте поставить лайк и принять решение 🙂
Спасибо!
Если полезно, пожалуйста Нравится и Принять решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью по shopify на [email protected] Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
5 966 просмотров
0 Нравится
Отчет
24.03.2021 09:54
Привет,
Извините, может быть, вы не поняли — я бы хотел, чтобы первое изображение оставалось , как оно было, но при наведении курсора отображается второе изображение. Я думаю, что это было последнее изображение, которое показало. ..
Спасибо, Розанна
5,964 Просмотров
0 Нравится
Отчет
24.03.2021 09:58
Привет @FORTLondon
Извините, я неправильно понял.
Я исправил это в соответствии с требованиями.
https://fortldn.com/collections/glassware
Пожалуйста, проверьте и дайте мне знать ваши комментарии.
Спасибо!
Если полезно, пожалуйста Нравится и Принять решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью в магазине [email protected] Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
5 962 просмотров
0 Нравится
Отчет
24.03.2021 10:06
Это здорово, большое спасибо. Есть ли способ помешать ему сказать «нет изображения », когда нет второго изображения? Может быть, изображение остается прежним, когда вы наводите курсор на ?
Спасибо, Розанна
5 960 просмотров
0 Нравится
Отчет
24. 03.2021 10:19
Привет, Розанна,
Конечно, пожалуйста, проверьте сейчас, мы внесли изменения для вас.
Спасибо!
Если полезно, пожалуйста Нравится и Принять решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью по shopify на [email protected] Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
5 958 просмотров
0 Нравится
Отчет
24.03.2021 10:21
Большое спасибо, все выглядит отлично. Будет ли это происходить автоматически теперь с каждым продуктом, который мы добавляем?
Спасибо.
5 957 просмотров
0 Нравится
Отчет
24.03.2021 10:23
Да @FORTLondon , это будет работать и с новыми продуктами 🙂
Если полезно, пожалуйста Нравится и Принять решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью по shopify на [email protected] Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
6 008 просмотров
0 Нравится
Отчет
24.03.2021 10:25
Это принятое решение.
Отлично, большое спасибо! Это все хорошо.
6 088 просмотров
0 Нравится
Отчет
24.03.2021 10:37
Это принятое решение.
Привет @FORTLondon
Надеюсь, вы получили ответ сейчас 🙂
Поставьте лайк и примите решение, чтобы другие люди получили правильные ответы.
Спасибо!
Если полезно, пожалуйста Нравится и Принять Решение . Вам нужны пользовательские изменения в магазине? Наймите нас . Не стесняйтесь обращаться ко мне за помощью по shopify на support@prezentech. com Shopify Изменения дизайна | Shopify Дизайн и разработка пользовательских тем | Shopify Разработка приложений
6 085 просмотров
1 Нравиться
Отчет
14.03.2023 00:21
Привет, Prezentech, У меня такая же проблема с моим магазином. Есть ли шанс помочь в этом?
https://www.slingtown.com/ — мой магазин. Спасибо
522 просмотров
0 Лайки
Отчет
Как изменить изображение при наведении курсора с помощью Divi
Эффекты наведения — это одни из самых простых микровзаимодействий пользователя с сайтом. Тема Divi имеет фантастически простой набор эффектов при наведении, которые вы можете использовать для создания привлекательного UX для каждого человека, который посещает ваш сайт. Одним из наиболее ярких и полезных эффектов в Divi является возможность изменить изображение, когда пользователь наводит на него курсор. От магазинов электронной коммерции до портфолио или даже просто как забавный сюрприз для ваших пользователей, смена изображения при наведении курсора может добавить совершенно новое измерение на ваш сайт. Давайте покопаемся и посмотрим, как легко Divi делает это.
1
Предварительный просмотр
1.1
Рабочий стол
1,2
Мобильный
2
Загрузите Divi Visual Builder
2.1
Загрузите свою страницу или пакет макетов
2.2
Найдите свои изображения
2.3
Откройте настройки модуля
2,4
Найдите изображение в настройках
2,5
Включить эффекты наведения
2,6
Выберите новое изображение
2,7
Выберите изображение при наведении (замену)
2,8
Проверьте исходное изображение на наличие ошибок
3
Окончательные результаты
3.1
Рабочий стол
3.2
Мобильный
4
Заключение
Предварительный просмотр
Рабочий стол
Мобильный
Загрузите Divi Visual Builder
Первое, что нам нужно сделать, это загрузить визуальный конструктор. В этом уроке мы будем использовать в качестве примера пакет макетов Dog Groomers. Вы также можете использовать это с любым макетом, который вы разработали или загрузили.
Загрузите страницу или пакет макетов
Чтобы загрузить пакет, при открытии новой страницы в Divi выберите Выберите готовый макет и выполните поиск «Уход за собаками».
Вы также можете найти его, щелкнув фиолетовый значок + в нижней части Divi Builder и выполнив то же самое.
Найдите свои изображения
Когда вы находитесь в Divi Builder, просто найдите любые изображения, к которым вы хотите добавить эффект. Хотя каждый эффект будет добавлен отдельно, вы определенно можете добавить эффект наведения к любому количеству элементов на вашей странице.
Мы хотим отметить, что вы можете использовать это для любого элемента, содержащего изображение . Этот эффект не ограничивается модулем изображения Divi. Итак, используете ли вы Blurb, CTA или даже фон столбца, вы можете включить этот эффект наведения для смены изображений.
Открыть настройки модуля
Когда вы приняли решение, щелкните значок шестеренки и введите Настройки модуля для любого модуля, содержащего изображение. В случае с этим пакетом макетов изображение, к которому мы собираемся применить эффект наведения, является фоном самого правого столбца в первой строке. Но, как мы уже говорили, это может быть любой элемент, который каким-либо образом использует изображение. Эффекты наведения Divi очень мощные.
Найдите изображение в настройках
Когда вы найдете правильные настройки Column , обязательно выберите вкладку Content . Прокрутите, пока не найдете параметры Background .
Под Background Divi дает вам возможность использовать сплошной цвет, градиент, изображение или видео в формате . mp4. И хотя эффекты наведения можно применить к любому из них, мы работаем на вкладке Image , третьей слева.
Включить эффекты наведения
Наведите указатель мыши на слово Background (меньший подзаголовок) и найдите значок стрелки в появившихся параметрах. Это переключатель для Divi Hover Effects . Эта же опция появится рядом или над любым элементом в Divi Builder, к которому вы можете применить эффект наведения, а не только к изображениям. Так что имейте это в виду и для других дизайнов.
При включении появляются две новые вкладки. Левая вкладка — это базовое изображение, которое появляется без взаимодействия. Это относится и к мобильным устройствам, если не указано иное в Отзывчивость настроек.
Выберите новое изображение
При перемещении курсора вниз к изображению вам будут предоставлены обычные варианты: для замены изображения или для удаления изображения . Если вы выберете значок корзины, это включит эффект наведения, но изображение исчезнет. Поскольку мы хотим изменить изображение при наведении, а не удалить его, мы собираемся либо щелкнуть само изображение, либо 0007 значок шестеренки .
Выберите изображение при наведении (замена)
Это откроет вашу медиатеку. Затем вы можете выбрать новое изображение, которое вы хотите, чтобы ваши пользователи видели, когда они наводят курсор на оригинал.
Любое изображение, которое вы выберете, теперь будет отображаться в визуальном конструкторе, а также на вкладке при наведении в настройках столбца.
Проверка исходного образа на наличие ошибок
Мы всегда рекомендуем следить за тем, чтобы исходное изображение тоже оставалось прежним. Итак, чтобы проверить, нажмите на левая вкладка и убедитесь, что исходное изображение все еще на месте.
Если все в порядке, можно сохранить настройки. Мы также пытаемся обратить внимание пользователей на то, что при работе внутри поднастроек столбца строки необходимо дважды щелкнуть зеленую галочку сохранения . Может показаться, что ваши изображения исчезают при сохранении, но это просто Divi выводит вас из настроек столбца и возвращает в строку.
Просто нажмите снова зеленая галочка , и все готово. Просто сохраните общие настройки страницы сейчас, и ваши изменения будут активны и готовы для ваших пользователей!
Обратите внимание, что Divi может не отображать эффект наведения внутри самого Visual Builder. Это связано с тем, что другие задачи используют взаимодействие при наведении внутри конструктора. Но когда вы нажмете зеленую кнопку Сохранить для страницы, изменения отобразятся в интерфейсе вашего сайта.
Окончательные результаты
Если вы выполнили шаги этого руководства, то ваши окончательные результаты должны выглядеть примерно так.
liquid 90 008 .Если в вашей теме нет продукта -grid-item.liquid , затем найдите один из следующих файлов:
liquid 90 008 .Если в вашей теме нет продукта -grid-item.liquid , затем найдите один из следующих файлов:
feat. ured_image.alt | побег }}» >
com/
03.2021 09:51
..
03.2021 10:19
com 
Давайте покопаемся и посмотрим, как легко Divi делает это.
В этом уроке мы будем использовать в качестве примера пакет макетов Dog Groomers. Вы также можете использовать это с любым макетом, который вы разработали или загрузили.
Итак, используете ли вы Blurb, CTA или даже фон столбца, вы можете включить этот эффект наведения для смены изображений.
mp4. И хотя эффекты наведения можно применить к любому из них, мы работаем на вкладке Image , третьей слева.
Если вы выберете значок корзины, это включит эффект наведения, но изображение исчезнет. Поскольку мы хотим изменить изображение при наведении, а не удалить его, мы собираемся либо щелкнуть само изображение, либо 0007 значок шестеренки .
Мы также пытаемся обратить внимание пользователей на то, что при работе внутри поднастроек столбца строки необходимо дважды щелкнуть зеленую галочку сохранения . Может показаться, что ваши изображения исчезают при сохранении, но это просто Divi выводит вас из настроек столбца и возвращает в строку.
