Как добавить липкие изображения продуктов в шаблон страницы продукта Divi

Когда дело доходит до покупки товаров в Интернете, для закрытия продажи важны отличные изображения товаров. Вот почему на большинстве страниц продуктов эти изображения продуктов находятся в верхней части страницы, поэтому это первое, что видят покупатели. Однако, когда пользователь прокручивает страницу вниз, чтобы просмотреть дополнительную информацию о продукте (описания, обзоры и т. Д.), Основное изображение продукта больше не отображается. Один из способов держать эти изображения продуктов в поле зрения - это добавить липкое изображение продукта, которое будет оставаться в поле зрения, пока потенциальный покупатель просматривает информацию о вашем продукте.

В этом уроке мы покажем вам, как добавить липкие изображения продуктов в шаблон страницы продукта Divi. Для этого мы можем оптимизировать модуль изображения продукта Divi WooCommerce, чтобы он отображался и оставался в верхней части страницы так же, как исходное изображение продукта прокручивается вне поля зрения.

Давайте начнем!

Sneak Peek

Вот краткий обзор дизайна, который мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

https://youtu.be/vwfPFqyVaNM

Подпишитесь на наш канал Youtube

Как загрузить шаблон

Перейти в конструктор тем Divi

Чтобы загрузить шаблон, перейдите к Divi Theme Builder на бэкэнде вашего сайта WordPress.

Загрузить шаблон веб-сайта

Затем в правом верхнем углу вы увидите значок с двумя стрелками. Щелкните значок.

Перейдите на вкладку импорта, загрузите файл JSON, который вы смогли загрузить в этом посте, и нажмите «Импортировать шаблоны Divi Theme Builder».

Сохранить изменения Divi Theme Builder

После того, как вы загрузите файл, вы увидите новый шаблон с новой областью тела, которая была назначена для всех сообщений. Сохраните изменения Divi Theme Builder, как только захотите активировать шаблон.

Давайте перейдем к руководству, чтобы мы могли научиться создавать эту вещь с нуля, не так ли?

Как добавить липкие изображения продуктов в шаблон страницы продукта Divi

Загрузка шаблона страницы продукта Theme Builder Pack 5

Для начала мы собираемся получить толчок к дизайну, добавив один из наших готовых шаблонов страниц продукта. Чтобы импортировать шаблон в Theme Builder, вам необходимо сделать следующее:

1. Перейдите к конструктору тем Divi
2. Щелкните значок переносимости в правом верхнем углу страницы.
3. Выберите вкладку «Импорт» во всплывающем окне «Переносимость».
4. Загрузите и импортируйте файл шаблона продукта Divi Divi Theme Builder 5. Как только вы загрузите пакет здесь, разархивируйте файл, и вы найдете файл «divi-theme-builder-pack-5-product-page-template.json», который вам нужно будет импортировать.
5. Нажмите кнопку импорта.
6. После импорта шаблона щелкните значок редактирования в настраиваемой области тела шаблона, чтобы изменить макет шаблона.

Добавить новую строку

Мы хотим, чтобы изображение продукта отображалось после того, как пользователь прокрутил верхний раздел, который уже включает изображение продукта (нет необходимости показывать его там). Поэтому мы собираемся добавить его в новый раздел под верхней частью макета.

Идите вперед и добавьте новый обычный раздел под верхний раздел.

Откройте настройки нового раздела и обновите отступы:

• Padding: 0px сверху, 0px снизу

Перейдите на вкладку «Дополнительно» и обновите индекс z:

• Индекс Z: 13

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

Добавить строку

Затем добавьте в раздел строку из одного столбца.

Откройте настройки строки и настройте выравнивание и отступы строк:

• Выравнивание строк: вправо
• Padding: 0px сверху, 0px снизу

Добавить изображение продукта

Теперь мы готовы добавить изображение продукта, которое в конечном итоге будет отображаться в верхней части страницы при прокрутке. Чтобы добавить изображение продукта, скопируйте существующий модуль изображения продукта в верхнем разделе и вставьте его в нашу новую строку.

Настройки изображений Woo

Откройте настройки для нового модуля изображений woo и настройте содержимое следующим образом:

• Показывать изображения галереи: ВЫКЛ.
• Показать значок распродажи: ВЫКЛ.

(ПРИМЕЧАНИЕ: вы можете сохранить изображения галереи, если хотите. Только будьте осторожны, чтобы не занимать слишком много места, так как этот модуль изображения будет зависать над другими элементами на странице.)

На вкладке дизайна обновите параметр Force Fullwidth до «YES».

Затем обновите следующее:

• Максимальная ширина: 300 пикселей (рабочий стол), 200 пикселей (телефон)
• Выравнивание модуля: справа

Отрегулируйте заполнение:

• Отступ: 10 пикселей сверху, 10 пикселей справа

На вкладке «Дополнительно» обновите следующее:

• Индекс Z: 1
• Липкая позиция: придерживаться верха

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

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

• Непрозрачность: 0% (рабочий стол), 100% (липкая)

Удаление интервала раздела, строки и столбца

Прямо сейчас у нас есть нежелательный интервал, который используется изображением нового продукта в потоке нашего макета. Чтобы удалить этот интервал, все, что нам нужно сделать, это присвоить столбцу настраиваемое значение высоты, равное либо «0», либо что-то очень низкое. Изображение продукта все равно будет отображаться / переполняться, даже если у него есть столбец без фактической высоты.

Откройте настройки столбца и добавьте следующий настраиваемый CSS к основному элементу:

height: 15px;

Вот и все! Мы все закончили.

Конечный результат

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

Последние мысли

Добавление липкого изображения продукта в шаблон страницы продукта в Divi - это быстрый и простой способ держать ваши продукты в поле зрения, пока посетители исследуют ваш продукт. И вы также можете прикрепить эту кнопку «Добавить в корзину» рядом с ним, используя ту же технику. В любом случае, надеюсь, это поможет вам в следующем проекте.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!