Jak dodać wsuwane informacje o produkcie do strony produktu Divi?

Sposób, w jaki projektujesz strony produktów, mówi wiele o Twoim sklepie. Projekt strony produktu jest ważną częścią procesu zakupu, dlatego często warto iść o krok dalej. Jeśli chcesz stworzyć bardziej interaktywną stronę produktu, pokochasz ten post. W tym samouczku pokażemy, jak dodać wsuwane informacje o produkcie w pięknie zbudowanym układzie strony produktu. Przekształcimy również ten układ w szablon strony produktu, a plik JSON będzie można pobrać za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon strony produktu wsuwanej za DARMO

Aby położyć ręce na szablonie strony produktu, musisz go najpierw 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!

1. Dodaj/otwórz produkt WooCommerce

Szczegóły Produktu

Zacznij od stworzenia nowego produktu lub otwarcia istniejącego. Aby uzyskać dokładnie taki sam efekt w projektowaniu, musisz dodać do swojego produktu następujące szczegóły:

• Nazwa
• Opis
• Obraz produktu z przezroczystym tłem
• Cena
• Kategoria

Włącz Divi Builder i zmodyfikuj ustawienia strony produktu

Włącz Divi Builder i zmień układ strony w prawym górnym rogu.

• Układ strony: Pełna szerokość

Przełącz się na Visual Builder

Po zmianie układu strony możesz przełączyć się na Divi's Visual Builder, klikając „Build On The Front End”.

2. Utwórz wsuwane informacje o produkcie Układ strony produktu

Usuń wiele wierszy na stronie

W edytorze strony produktu zauważysz różne elementy związane z Twoim produktem. Potrzebujemy tylko elementów drugiego wiersza, więc śmiało usuń pierwszy i ostatni wiersz wewnątrz sekcji.

Modyfikuj ustawienia sekcji

Kolor tła

Czas zacząć modyfikować różne elementy, aby stworzyć nasz wsuwany układ informacji o produkcie! Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #ffe4a5

Rozmiary

Dodaj również minimalną wysokość do ustawień rozmiaru. Ten krok pozwoli sekcji zająć całą wysokość Twojej przeglądarki.

• Minimalna wysokość: 100vh

Rozstaw

Następnie przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne dopełnienie.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Widoczność

Ukryj również przepełnienia sekcji. Pomoże to zapewnić brak poziomego paska podczas animacji.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Modyfikuj ustawienia wiersza

Rozmiary

Następnie otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiarów dla różnych rozmiarów ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100% (komputer stacjonarny), 90% (tablet i telefon)

Rozstaw

Usuń również domyślną górną i dolną wyściółkę wiersza.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Pozycja

Następnie przejdź do ustawień pozycji i upewnij się, że wiersz pozostaje na dole sekcji, odpowiednio modyfikując ustawienia:

• Pozycja: bezwzględna (komputer), domyślna (tablet i telefon)
• Lokalizacja: dolny środek

Zmień ustawienia kolumny 2

Kolor tła

Następnie wprowadzimy pewne zmiany w drugiej kolumnie. Użyj białego koloru tła.

• Kolor tła: #FFFFFF

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia do ustawień odstępów.

• Górna wyściółka: 10vw
• Dolna wyściółka: 10vw
• Lewa wyściółka: 8vw
• Prawa wyściółka: 8vw

Filtr domyślny

Przejdź do ustawień filtrów kolumny i upewnij się, że filtry jasności, odwrócenia i sepii zachowują domyślną wartość w normalnym stanie.

• Jasność: 100%
• Odwróć: 0%
• sepia: 0%

Umieść filtr

Jednak po najechaniu myszą odpowiednio zmienimy wartości:

• Jasność: 49%
• Odwróć: 100%
• sepia: 100%

Pozycja

Upewniamy się również, że kolumna jest umieszczona w prawym dolnym rogu kontenera wierszy, stosując następujące ustawienia pozycji:

• Pozycja: bezwzględna (komputer), domyślna (tablet i telefon)
• Lokalizacja: dolny prawy

Zmodyfikuj moduł tytułu Woo w kolumnie 2

Ustawienia tekstu tytułu

Czas zacząć dostosowywać różne moduły w kolumnie 2! Otwórz moduł tytułu Woo i zmień ustawienia tekstu H1 w następujący sposób:

• Czcionka tytułu: Playfair Display
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 3vw (komputer), 5vw (tablet), 7vw (telefon)

Zmodyfikuj moduł cen Woo w kolumnie 2

Ustawienia tekstu ceny

Następnie otwórz ustawienia modułu cenowego Woo i zmień ustawienia tekstu ceny.

• Czcionka ceny: Poppins
• Kolor tekstu ceny: #e5bc87
• Cena Rozmiar tekstu: 1.4vw (komputer), 3vw (tablet), 4vw (telefon)

Rozstaw

Dodaj również niestandardowy górny i dolny margines na różnych rozmiarach ekranu.

• Górny margines: 2vw (komputer stacjonarny), 4vw (tablet i telefon)
• Margines dolny: 3vw (komputer stacjonarny), 5vw (tablet i telefon)

Zmodyfikuj moduł opisu Woo w kolumnie 2

Ustawienia tekstu

Przejdź do modułu opisu Woo. Zmodyfikuj odpowiednio ustawienia tekstowe modułu:

• Czcionka tekstu: Poppins
• Grubość czcionki tekstu: Lekka
• Rozmiar tekstu: 0,8vw (komputer), 1,8vw (tablet), 2,7vw (telefon)
• Wysokość linii tekstu: 2,1 em

Rozstaw

Dodaj też responsywny dolny margines.

• Margines dolny: 3vw (komputer stacjonarny), 5vw (tablet i telefon)

Zmodyfikuj moduł Dodaj do koszyka Woo w kolumnie 2

Ustawienia pól

Dalej mamy moduł Woo Add to Cart. Zmień ustawienia pól modułu.

• Kolor tła pól: rgba (255,255,255,0)
• Kolor tekstu pól: #000000
• Czcionka pól: Poppins
• Rozmiar tekstu w polach: 0.9vw (komputer), 2vw (tablet), 3vw (telefon)

• Wszystkie rogi: 0px
• Szerokość dolnego obramowania pól: 1px
• Kolor dolnego obramowania pól: #e5bc87

Ustawienia przycisków

Przejdź do ustawień przycisku i odpowiednio dostosuj przycisk:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 0.9vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor gradientu 1: #e5bd89
• Kolor gradientu 2: #e5bc87
• Typ gradientu: liniowy
• Kierunek gradientu: 153 stopni
• Szerokość obramowania przycisku: 0px

• Promień obramowania przycisku: 1px
• Czcionka przycisku: Poppins

• Górna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Dolna wyściółka: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Lewa wyściółka: 3vw (komputer), 6vw (tablet), 9vw (telefon)
• Prawa wyściółka: 3vw (komputer), 6vw (tablet), 9vw (telefon)

Rozstaw

Uzupełnij ustawienia modułu, dodając margines przycisku na różnych rozmiarach ekranu.

• Dolny margines: 2vw (Destkop), 4vw (Tablet i telefon)

Zmodyfikuj Woo Meta Module w kolumnie 2

Ustawienia tekstu

Kontynuuj, otwierając Woo Meta Module i zmień ustawienia tekstu.

• Meta Czcionka: Poppins
• Waga czcionki Meta: lekka
• Rozmiar tekstu Meta: 0,8vw (komputer), 1,8vw (tablet), 3vw (telefon)

Ustawienia tekstu łącza

Zmień też kolor tekstu linku.

• Kolor tekstu linku: #e5bc87

Dodaj moduł kodu do kolumny 2

Aby zmienić kolor tła powiększenia modułu obrazu Woo, potrzebujemy odrobiny kodu CSS, który umieścimy w nowym module kodu w kolumnie 2.

Dodaj kod CSS, aby zmienić kolor tła powiększenia obrazu Woo

Dodaj następujące wiersze kodu CSS do modułu Code:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Dodaj zsynchronizowane ustawienia animacji do kontenerów

Moduł obrazu Woo

Teraz, gdy opracowaliśmy różne style na naszej stronie produktu, nadszedł czas, aby wprowadzić efekt wsuwanych informacji o produkcie! Aby to osiągnąć, użyjemy wbudowanych ustawień animacji Divi. Otwórz moduł obrazu Woo w kolumnie 1 i zastosuj następującą animację:

• Styl animacji: slajd
• Kierunek animacji: w górę
• Początkowe krycie animacji: 50%
• Krzywa szybkości animacji: łatwość

Kolumna 1

Otwórz następnie ustawienia kolumny 1 i użyj następujących ustawień animacji:

• Styl animacji: slajd
• Kierunek animacji: w lewo (komputer), w górę (tablet i telefon)
• Opóźnienie animacji: 950 ms (komputer stacjonarny), 0vw (tablet i telefon)
• Intensywność animacji: 25%
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

Kolumna 2

Na koniec zastosuj następujące ustawienia animacji do kolumny 2:

• Styl animacji: slajd
• Kierunek animacji: w lewo (komputer), w górę (tablet i telefon)
• Czas trwania animacji: 1200 ms
• Opóźnienie animacji: 800 ms (komputer stacjonarny), 0 ms (tablet i telefon)
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

4. Zmień układ strony produktu w szablon

Zapisz układ w bibliotece Divi

Po ukończeniu całego projektu strony produktu możesz zapisać go w swojej bibliotece Divi. Użyjemy tego zapisanego układu strony produktu, aby utworzyć nowy szablon strony produktu.

Przejdź do kreatora motywów Divi i dodaj nowy szablon

Przejdź do Divi Theme Builder i dodaj nowy szablon.

Użyj szablonu we wszystkich produktach

Użyj nowego szablonu we wszystkich produktach.

• Użyj na: wszystkie produkty

Prześlij układ do treści szablonu strony produktu

Następnie kliknij „Dodaj niestandardową treść” i kliknij „Dodaj z biblioteki”.

Przejdź do „Twoich zapisanych układów” i wybierz układ strony produktu, który przesłałeś do swojej biblioteki Divi.

5. Zapisz zmiany w kreatorze motywów i zobacz wynik

Po przesłaniu układu do nowego szablonu strony produktu jedyne, co pozostało do zrobienia, to zapisanie wszystkich zmian w Kreatorze Motywów i wyświetlenie wyniku na swojej stronie!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak urozmaicić strony produktów, pokazując, jak zaprojektować wsuwany układ informacji o produkcie. To świetny sposób na dodanie dodatkowej interakcji do stron produktów. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.