Pobierz piękną pełnoekranową stronę produktu dla Divi

Ponieważ moduły WooCommerce stały się częścią Divi, pokazaliśmy Ci kilka projektów stron produktów, które możesz stworzyć za pomocą wbudowanych opcji Divi. Dzisiaj dodajemy do tej listy nowy samouczek, pokazujący, jak stworzyć piękną pełnoekranową stronę produktu. Łączymy całą zawartość produktu w jednej sekcji, tworząc oszałamiający projekt. Chociaż ograniczamy przewijanie w pionie, które jest wymagane na stronie produktu, projekt nie wygląda w żaden sposób przytłaczający. Zadbaliśmy również o to, aby projekt był piękny i responsywny na małych ekranach. Będziesz mógł również pobrać plik JSON 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 pełnoekranowy układ produktu ZA DARMO

Aby położyć swoje ręce na darmowym pełnoekranowym układzie produktu, 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!

Subskrybuj nasz kanał YouTube

Zacznijmy odtwarzać!

Otwórz istniejącą stronę produktu

Pierwszą rzeczą, którą musisz zrobić, to otworzyć istniejącą stronę produktu lub utworzyć nową. Dla tego konkretnego układu dodaliśmy następujące elementy do naszej strony produktu:

• Tytuł produktu
• Przedstawiony obraz
• Krótki opis
• Opis
• Cena

Włącz Divi i zmodyfikuj ustawienia strony

Kontynuuj, włączając Divi i zmieniając układ strony w ustawieniach strony.

Przełącz się na Visual Builder

Gdy to zrobisz, możesz przełączyć się na Visual Builder.

Usuń istniejącą sekcję

Wewnątrz Visual Builder zauważysz sekcję z domyślnymi elementami strony produktu. Możesz śmiało usunąć całą tę sekcję. W kolejnych krokach tego posta odtworzymy nasz własny alternatywny projekt.

Dodaj nową sekcję

Rozstaw

Czas zacząć tworzyć! Dodaj nową sekcję, otwórz ustawienia sekcji i zmodyfikuj górne i dolne wartości dopełnienia.

• Górna wyściółka: 5vw
• Dolna wyściółka: 5vw

Przepełnienia

Ukryj również przepełnienia sekcji.

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

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dostosuj ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Kolumna 1

Indeks Z

Zwiększamy również indeks z pierwszej kolumny w ustawieniach widoczności.

• Indeks Z: 10

Kolumna 2

Tło gradientowe

Otwórz następnie ustawienia kolumny 2 i dodaj tło gradientowe na różnych rozmiarach ekranu:

• Kolor 1: #ffcb49
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 66% (komputer stacjonarny), 50% (tablet i telefon)
• Pozycja końcowa: 66% (komputer stacjonarny), 50% (tablet i telefon)

Dodaj moduł tytułu Woo do kolumny 1

Treści dynamiczne

Czas zacząć dodawać moduły! W kolumnie 1 jedynym modułem, którego potrzebujemy, jest moduł tytułowy Woo.

• Produkt: ten produkt

Ustawienia tekstu tytułu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu tytułu w następujący sposób:

• Czcionka tytułu: Montserrat
• Grubość czcionki tytułu: Ultra Light
• Wyrównanie tekstu tytułu: do lewej (komputer), do środka (tablet i telefon)
• Rozmiar tekstu tytułu: 9vw

Rozmiary

Zmodyfikuj również rozmiar modułu.

• Szerokość: 50vw (komputer stacjonarny), 100% (tablet i telefon)

Rozstaw

Wraz z ustawieniami odstępów.

• Górny margines: 14vw (komputer stacjonarny), 0vw (tablet i telefon)
• Dolny margines: 5vw (tablet i telefon)
• Lewy margines: -11vw (komputer stacjonarny), 2vw (tablet i telefon)
• Prawy margines: 2vw (tablet i telefon)

Przekształć Obróć

Na koniec obróć cały moduł w ustawieniach transformacji.

• Po lewej: 270 stopni (komputer stacjonarny), 0 stopni (tablet i telefon)

Dodaj moduł obrazów Woo do kolumny 2

Treści dynamiczne

Do drugiego modułu! Tam jedynym potrzebnym nam modułem jest Woo Image Module.

• Produkt: ten produkt

Ustawienia obrazu

Przejdź do zakładki projektowania modułu i zmień ustawienia obrazu w następujący sposób:

• Zaokrąglone rogi obrazu: 1vw (wszystkie rogi)

• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0.3)

Rozmiary

Uzupełnij ustawienia modułu obrazu Woo, zmieniając szerokość i wyrównanie modułu w ustawieniach rozmiaru.

• Szerokość: 35vw
• Wyrównanie modułu: Środek

Dodaj moduł opisu Woo nr 1 do kolumny 3

Treści dynamiczne

Do ostatniej kolumny! Tam pierwszym potrzebnym modułem jest moduł opisu Woo.

• Produkt: ten produkt
• Typ opisu: krótki opis

Ustawienia tekstu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Montserrat
• Styl czcionki tekstu: wielkie litery
• Rozmiar tekstu: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Odstępy między literami tekstu: -0,07vw
• Wysokość linii tekstu: 1,8 em

Rozstaw

Zmodyfikuj również ustawienia odstępów.

• Górny margines: 9vw
• Lewa wyściółka: 2vw (komputer stacjonarny), 5vw (tablet i telefon)
• Prawa wyściółka: 5vw

Dodaj moduł cen Woo do kolumny 3

Treści dynamiczne

Przejdźmy do następnego modułu, jakim jest moduł cenowy Woo.

• Produkt: ten produkt

Ustawienia tekstu ceny

Zmień ustawienia tekstu ceny modułu w następujący sposób:

• Cena Czcionka: Montserrat
• Kolor tekstu ceny: #333333
• Cena Rozmiar tekstu: 3vw (komputer), 7vw (tablet), 10vw (telefon)
• Wysokość linii cenowej: 1,8 em

Rozstaw

Zmodyfikuj również ustawienia odstępów.

• Górny margines: 4vw
• Lewa wyściółka: 2vw (komputer stacjonarny), 5vw (tablet i telefon)
• Prawa wyściółka: 2vw (komputer stacjonarny), 5vw (tablet i telefon)

Dodaj moduł Dodaj do koszyka Woo do kolumny 3

Treści dynamiczne

Następnym i ostatnim modułem, którego potrzebujemy do ukończenia tego projektu, jest moduł Woo Add To Cart.

• Produkt: ten produkt

Ustawienia pól

Zmień ustawienia pól modułu w następujący sposób:

• Kolor tła pól: #0a0900
• Kolor tekstu pól: #ffffff
• Czcionka pól: Montserrat

• Rozmiar tekstu w polach: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Pola zaokrąglone rogi: 50vw (wszystkie rogi)

Ustawienia przycisków

Pobaw się również ustawieniami przycisków.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 1vw (komputer), 2vw (tablet), 3vw (telefon)
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #ffcb49
• Szerokość obramowania przycisku: 0px

• Czcionka przycisku: Montserrat

• 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: 4vw (komputer), 8vw (tablet), 10vw (telefon)
• Prawa wyściółka: 4vw (komputer), 8vw (tablet), 10vw (telefon)

Rozstaw

I uzupełnij ustawienia modułu, dodając kilka niestandardowych wartości odstępów na różnych rozmiarach ekranu.

• Górny margines: 2vw
• Lewy margines: -3vw (komputer), 5vw (tablet i telefon)
• Prawy margines: 5vw (tablet i telefon)

Zmień stronę produktu w szablon

Zapisz układ strony w bibliotece Divi

Po ukończeniu pełnoekranowej strony produktu możesz jej użyć dla każdego ze swoich produktów za pomocą narzędzia Divi's Theme Builder. Aby to zrobić, zapisz właśnie utworzony układ w swojej bibliotece Divi.

Dodaj nowy szablon do Theme Buildera

Przejdź do Theme Builder w ustawieniach Divi i dodaj nowy szablon.

Wybierz strony produktów, na których ma się wyświetlać ten układ.

Prześlij układ do treści szablonu

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

Wybierz swój układ na karcie „Twoje zapisane układy”.

I zapisz wszystkie swoje zmiany!

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 odtworzyć piękną pełnoekranową stronę produktu, której można użyć w dowolnej konfigurowanej witrynie eCommerce. Dopasowaliśmy ustawienia różnych modułów woo, aby stworzyć oszałamiający efekt i ograniczyć wymagane przewijanie w pionie. Mamy nadzieję, że ten projekt zainspiruje Cię również do stworzenia własnych pełnoekranowych stron produktów! Jeśli masz jakieś pytania, 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.