Jak dodać przyklejone obrazy produktów do szablonu strony produktu Divi?

Jeśli chodzi o kupowanie produktów online, świetne zdjęcia produktów są niezbędne do zamknięcia sprzedaży. Dlatego większość stron produktów zawiera te zdjęcia produktów u góry strony, więc jest to pierwsza rzecz, którą widzą kupujący. Jednak gdy użytkownik przewija stronę w dół, aby wyświetlić więcej informacji o produkcie (opisy, recenzje itp.), główny obraz produktu nie jest już widoczny. Jednym ze sposobów, aby te zdjęcia produktów były widoczne, jest dodanie przyklejonego zdjęcia produktu, które będzie widoczne, gdy potencjalny nabywca przegląda informacje o produkcie.

W tym samouczku pokażemy, jak dodać przyklejone obrazy produktów do szablonu strony produktu Divi. Aby to zrobić, możemy zoptymalizować moduł obrazu produktu Divi WooCommerce, aby wyświetlał się i przyklejał u góry strony, tak jak oryginalny obraz produktu przewija się z widoku.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

https://youtu.be/vwfPFqyVaNM

Subskrybuj nasz kanał YouTube

Jak przesłać szablon

Przejdź do kreatora motywów Divi

Aby przesłać szablon, przejdź do Divi Theme Builder na zapleczu swojej witryny WordPress.

Prześlij szablon strony internetowej

Następnie w prawym górnym rogu zobaczysz ikonę z dwiema strzałkami. Kliknij ikonę.

Przejdź do zakładki importu, prześlij plik JSON, który udało Ci się pobrać w tym poście, i kliknij „Importuj szablony Divi Theme Builder”.

Zapisz zmiany w kreatorze motywów Divi

Po przesłaniu pliku zauważysz nowy szablon z nowym obszarem treści, który został przypisany do wszystkich postów. Zapisz zmiany Divi Theme Builder, gdy tylko chcesz, aby szablon został aktywowany.

Przejdźmy do samouczka, abyśmy mogli nauczyć się budować tę rzecz od podstaw, dobrze?

Jak dodać przyklejone obrazy produktów do szablonu strony produktu Divi?

Przesyłanie szablonu strony produktu Theme Builder Pack 5

Aby rozpocząć, zapewnimy szybki start w projektowaniu, dodając jeden z naszych gotowych szablonów stron produktów. Aby zaimportować szablon Theme Builder, musisz wykonać następujące czynności:

1. Przejdź do Kreatora motywów Divi
2. Kliknij ikonę przenoszenia w prawym górnym rogu strony.
3. Wybierz kartę Importuj w wyskakującym okienku Przenośność.
4. Pobierz i zaimportuj plik szablonu produktu Divi Divi Theme Builder 5. Po pobraniu pakietu tutaj rozpakuj plik, a znajdziesz plik „divi-theme-builder-pack-5-product-page-template.json”, który musisz zaimportować.
5. Kliknij przycisk Importuj
6. Po zaimportowaniu szablonu kliknij ikonę edycji w niestandardowym obszarze treści szablonu, aby edytować układ szablonu.

Dodaj nowy wiersz

Chcemy, aby zdjęcie produktu było wyświetlane, gdy użytkownik przewinie przez górną sekcję, która już zawiera zdjęcie produktu (nie ma potrzeby go tam pokazywać). Dlatego dodamy go do nowej sekcji pod górną sekcją układu.

Śmiało i dodaj nową zwykłą sekcję pod górną sekcją.

Otwórz ustawienia nowej sekcji i zaktualizuj dopełnienie:

• Padding: 0px na górze, 0px na dole

Przejdź do zakładki zaawansowane i zaktualizuj indeks z:

• Indeks Z: 13

Dzieje się tak dlatego, że obraz (element podrzędny tej sekcji) pozostanie nad innymi sekcjami/elementami na stronie podczas przewijania.

Dodaj wiersz

Następnie dodaj jednokolumnowy wiersz w sekcji.

Otwórz ustawienia wierszy i dostosuj wyrównanie i dopełnienie wiersza:

• Wyrównanie wierszy: w prawo
• Padding: 0px na górze, 0px na dole

Dodaj obraz produktu

Teraz jesteśmy gotowi, aby dodać zdjęcie produktu, które ostatecznie przyklei się na górze strony podczas przewijania. Aby dodać obraz produktu, skopiuj istniejący moduł obrazu produktu w górnej sekcji i wklej go do naszego nowego wiersza.

Ustawienia obrazów Woo

Otwórz ustawienia nowego modułu obrazów woo i dostosuj zawartość w następujący sposób:

• Pokaż zdjęcia z galerii: WYŁĄCZONE
• Pokaż odznakę sprzedaży: WYŁ

(UWAGA: jeśli chcesz, możesz zachować obrazy z galerii. Uważaj, aby nie zajmować zbyt dużo miejsca, ponieważ ten moduł obrazów będzie najeżdżał na inne elementy na stronie.)

Na karcie projektu zaktualizuj opcję Wymuś pełną szerokość na „TAK”.

Następnie zaktualizuj następujące elementy:

• Maksymalna szerokość: 300px (komputer), 200px (telefon)
• Wyrównanie modułu: w prawo

Dostosuj wyściółkę:

• Padding: 10px u góry, 10px w prawo

Na karcie Zaawansowane zaktualizuj następujące elementy:

• Indeks Z: 1
• Lepka pozycja: trzymaj się u góry

Spowoduje to, że obraz będzie przyklejał się na górze strony, gdy użytkownik przewinie obok tego obrazu.

Po umieszczeniu lepkiej pozycji wróć do karty projektu i użyj opcji lepki, aby zaktualizować filtr krycia, aby ukrywał obraz, dopóki nie stanie się lepki. Możesz wdrożyć opcję lepkiego stylu, najeżdżając kursorem na ustawienie i klikając ikonę miniatury.

• Krycie: 0% (stacjonarne), 100% (lepkie)

Usuń odstępy sekcji, wierszy i kolumn

W tej chwili mamy niepożądane odstępy, których używa nowy obraz produktu w przepływie naszego układu. Aby usunąć te odstępy, wszystko, co musimy zrobić, to nadać kolumnie niestandardową wartość wysokości, która wynosi „0” lub coś naprawdę niskiego. Obraz produktu będzie nadal pokazywał/przepełnił się, mimo że ma kolumnę bez rzeczywistej wysokości.

Otwórz ustawienia kolumn i dodaj następujący niestandardowy CSS do elementu głównego:

height: 15px;

Otóż ​​to! Wszyscy skończyliśmy.

Ostateczny wynik

Sprawdź ostateczny wynik, oglądając post na żywo w swojej witrynie.

Końcowe przemyślenia

Dodanie lepkiego obrazu produktu do szablonu strony produktu w Divi to szybki i łatwy sposób, aby Twoje produkty były widoczne, gdy odwiedzający odkrywają Twój produkt. Możesz także przykleić obok niego przycisk Dodaj do koszyka, używając tej samej techniki. W każdym razie, miejmy nadzieję, pomoże ci to w następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!