Jak pionowo układać obrazy galerii Woo wewnątrz szablonu strony produktu Divi

Domyślnie, gdy tylko dodasz obrazy galerii do swoich produktów WooCommerce, pojawią się one poziomo pod polecanym obrazem produktu w interfejsie projektu strony produktu. W niektórych projektach pionowe układanie tych obrazów w galerii woo może być wygodniejsze, na przykład w przypadku pełnoekranowych projektów stron produktów. Jeśli szukasz szybkiego sposobu na pionowe układanie obrazów galerii woo w szablonie strony produktu, który utworzysz za pomocą Kreatora motywów Divi, pokochasz ten samouczek. Pokażemy Ci krok po kroku, jak się tam dostać. Dołączymy do tego podejścia z minimalnym szablonem strony produktu, który również będziesz mógł pobrać za darmo! Ten samouczek działa najlepiej na stronach produktów, które wykorzystują obrazy o proporcjach 1:1.

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 ZA DARMO

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

Zbuduj szablon strony produktu wewnątrz Divi Theme Builder

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

Zacznij od przejścia do Divi Theme Builder i kliknij „Dodaj nowy szablon”.

Użyj szablonu we wszystkich produktach

Użyjemy tego szablonu we wszystkich produktach, ale możesz dowolnie modyfikować warunki.

Wejdź do edytora szablonów treści szablonu

Po utworzeniu szablonu kliknij „Dodaj niestandardową treść” i kontynuuj, wybierając „Buduj niestandardową treść”, aby zostać przekierowanym do edytora szablonów.

Rozpocznij tworzenie treści szablonu strony kategorii

Zmodyfikuj sekcję #1

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i dodaj biały kolor tła.

• Kolor tła: #ffffff

Rozstaw

Przejdź do zakładki projektu i usuń wszystkie domyślne górne i dolne wyściółki.

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

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza, przejdź do zakładki projekt i odpowiednio zmień ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 95%
• Maksymalna szerokość: 2560 pikseli
• Wyrównanie wierszy: Środek

Rozstaw

Użyjemy również niestandardowego górnego i dolnego wyściółki na mniejszych ekranach.

• Górna wyściółka: 100px (tylko tablet i telefon)
• Dolna wyściółka: 100px (tylko tablet i telefon)

Główny element CSS

Aby wyrównać zawartość kolumny na komputerze, użyjemy dwóch wierszy kodu CSS w głównym elemencie wiersza. Przywrócimy właściwość wyświetlania na tablecie i telefonie.

Pulpit:

display: flex;
align-items: center;

Tablet i telefon:

display: block;

Kolumna 2 Tło gradientowe

Po zakończeniu ogólnych ustawień wiersza otwórz ustawienia drugiej kolumny i zastosuj promieniowe tło gradientowe.

• Kolor 1: #f7f2ef
• Kolor 2: rgba (255,255,255,0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 20%
• Pozycja końcowa: 20%

Odstęp kolumny 2

Przejdź do karty projektu kolumny i zmień niestandardowe wartości dopełnienia na różnych rozmiarach ekranu.

• Górna wyściółka: 30% (komputer stacjonarny), 10% (tablet i telefon)
• Dolna wyściółka: 10%
• Lewa wyściółka: 5%
• Prawa wyściółka: 5%

Dodaj moduł obrazów Woo do kolumny 1

Treści dynamiczne

Czas dodać moduły! Pierwszym modułem, którego potrzebujemy w kolumnie 1, jest moduł obrazów Woo. Ten samouczek działa najlepiej, jeśli używasz polecanego obrazu i obrazów z galerii o proporcjach 1:1. W ten sposób w kolejnych krokach będziemy mogli zamienić obrazy w koła. Po dodaniu modułu obrazów Woo upewnij się, że zawartość dynamiczna jest ustawiona na „Ten produkt”.

• Produkt: ten produkt

Dodaj moduł kodu do kolumny 1

Dodaj kod CSS

Tuż pod modułem obrazów Woo dodamy moduł kodu. Kod CSS, który wstawiamy w tym module kodu, pomoże nam pionowo układać obrazy galerii woo po lewej stronie naszej kolumny.

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

Dodaj moduł tytułu Woo do kolumny 2

Treści dynamiczne

Przejdź do następnej kolumny. Tam pierwszym 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 nagłówka w następujący sposób:

• Czcionka tytułu: PT Sans
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 84px (komputer), 60px (tablet), 45px (telefon)

Dodaj moduł opisu Woo do kolumny 2

Treści dynamiczne

Przejdźmy do następnego modułu, którym jest moduł opisu Woo.

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

Ustawienia tekstu

Zmodyfikuj odpowiednio ustawienia tekstowe modułu:

• Czcionka tekstu: Karla
• Rozmiar tekstu: 17px (komputer i tablet), 15px (telefon)
• Wysokość linii tekstu: 1,9 em

Rozstaw

Uzupełnij ustawienia modułu, dodając trochę górnego i dolnego marginesu.

• Górny margines: 5%
• Dolny margines: 5%

Dodaj moduł cen Woo do kolumny 2

Treści dynamiczne

Dodaj moduł ceny Woo tuż pod modułem opisu Woo.

• Produkt: ten produkt

Ustawienia tekstu ceny

Przejdź do zakładki projektowania modułu i zmodyfikuj ustawienia tekstu ceny w następujący sposób:

• Cena Czcionka: PT Sans
• Waga czcionki ceny: pogrubiona
• Kolor tekstu ceny: #ce8654
• Rozmiar tekstu ceny: 27px

Dodaj moduł Dodaj do koszyka Woo do kolumny 2

Treści dynamiczne

Następnym i ostatnim modułem, który musimy ukończyć, jest moduł Woo Add to Cart.

• Produkt: ten produkt

Ustawienia pól

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

• Kolor tła pól: #ffffff
• Kolor tekstu pól: #000000
• Czcionka pól: Open Sans

• Wszystkie rogi: 0px
• Szerokość dolnego obramowania pól: 1px
• Kolor dolnej krawędzi pól: #ce8654

Ustawienia przycisków

Następnie dostosuj styl przycisku w ustawieniach przycisku.

• Użyj niestandardowych stylów dla przycisku: Tak
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #0a0201
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px

• Czcionka przycisku: PT Sans
• Waga czcionki przycisku: pogrubiona

• Górna wyściółka przycisków: 20px
• Dolna wyściółka przycisku: 20px
• Dopełnienie lewego przycisku: 50px
• Wypełnienie prawego przycisku: 50px

Rozstaw

I uzupełnij ustawienia modułu i ten samouczek, dodając górny margines do modułu Woo Add to Cart. Gdy skończysz modyfikować szablon strony produktu, upewnij się, że zapisałeś wszystkie zmiany Theme Buildera przed wyświetleniem wyników na stronach produktów!

• Górny margines: 5%

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 wykazać się kreatywnością dzięki stronom produktów, które tworzysz za pomocą Kreatora motywów Divi i modułów WooCommerce. Mówiąc dokładniej, pokazaliśmy, jak pionowo układać obrazy z galerii woo. Takie podejście dobrze pasuje do pełnoekranowego projektu strony produktu, ale może się przydać w przypadku każdego rodzaju szablonu strony produktu, który tworzysz. 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.