Jak oprawić produkt w obraz tła z opcjami kolumny Divi

Dzięki modułom Divi WooCommerce dostępnych jest mnóstwo projektów, które możesz wykonać za pomocą Divi. W dzisiejszym samouczku Divi postaramy się zainspirować Cię innym pomysłem na projekt, który możesz zrealizować, korzystając tylko z wbudowanych opcji Divi. Mówiąc dokładniej, pokażemy Ci, jak oprawić produkt w obraz tła. Wynik zależy wyłącznie od obrazu tła, ale jeśli przejdziesz przez ten samouczek, będziesz wiedział, jakie kroki należy podjąć, aby spersonalizować technikę dla własnej witryny! Będziesz mógł również bezpłatnie pobrać plik JSON z samouczka!

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 układ produktu The Frame za DARMO

Aby położyć ręce na darmowym 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!

1. Skonfiguruj sekcję z responsywnym obrazem tła

Dodaj nową sekcję

Responsywny obraz tła

Pierwszym krokiem do oprawienia produktu w obraz tła jest dodanie nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i prześlij responsywne obrazy tła. Oba obrazy, których użyliśmy, znajdziesz w folderze, który udało Ci się pobrać na początku tego postu.

• Obraz tła: Krajobraz
• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: górny środek

• Obraz tła: Kwadrat

Rozstaw

Przejdź do zakładki projektowania i dodaj niestandardowe górne i dolne wyściółki na różnych rozmiarach ekranu.

• Górna wyściółka: 3vw (komputer stacjonarny), 0vw (tablet i telefon)
• Dolna wyściółka: 3vw (komputer), 7vw (tablet), 18vw (telefon)

Granica

Uzupełnij ustawienia sekcji, dodając obramowanie.

• Szerokość granicy: 2vw
• Kolor obramowania: #ffffff

2. Dodaj różne elementy ramy do kolumny

Dodaj nowy wiersz

Struktura kolumny

Teraz, jak widać na obrazie tła, produkt znajduje się po prawej stronie obrazu tła. Wybierzemy pasującą strukturę kolumn dla nowego wiersza w naszej sekcji. W tym przypadku jest to następująca struktura kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Uzupełnij ustawienia wiersza, dodając niestandardowe lewe i prawe dopełnienie.

• Lewa wyściółka: 5vw
• Prawa wyściółka: 5vw

Dodaj moduł tekstowy do kolumny 2

Pozostaw puste pole zawartości

Czas zacząć dodawać moduły! Aby produkt był widoczny, użyjemy pustego modułu tekstowego.

Rozstaw

W następnej kolejności zwiększymy wysokość modułu w ustawieniach odstępów.

• Górna wyściółka: 22vw (komputer stacjonarny), 39vw (tablet), 35vw (telefon)
• Dolna wyściółka: 15vw (komputer stacjonarny), 39vw (tablet), 35vw (telefon)

Granica

I dodamy też obramowanie.

• Szerokość granicy: 3vw
• Szerokość dolnej granicy: 1vw
• Kolor obramowania: rgba (255,255,255,0.7)

Dodaj moduł tytułu Woo do kolumny 2

Treści dynamiczne

Przejdźmy do następnego modułu, którym jest Woo Title Module. Wybierz dowolny produkt.

• Produkt: Znajdź na liście

Kolor tła

Użyj następującego koloru tła:

• Kolor tła: rgba (255,255,255,0.7)

Ustawienia tekstu tytułu

Przejdź do zakładki projektu modułu i odpowiednio zmodyfikuj ustawienia tekstu H3:

• Poziom nagłówka tytułu: H3
• Czcionka tytułu: Work Sans
• Rozmiar tekstu tytułu: 2.5vw (komputer), 5vw (tablet), 6vw (telefon)

Rozstaw

Dodaj również niestandardowe wartości dopełnienia.

• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw
• Lewa wyściółka: 3vw
• Prawa wyściółka: 3vw

Dodaj moduł opisu Woo do kolumny 2

Treści dynamiczne

Następnym modułem, którego potrzebujemy, jest moduł opisu Woo. Wybierz dowolny produkt.

• Produkt: Znajdź na liście
• Typ opisu: krótki opis

Kolor tła

Zmień odpowiednio kolor tła modułu:

• Kolor tła: rgba (255,255,255,0.7)

Ustawienia tekstu

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

• Czcionka tekstu: Otwórz Sans
• Rozmiar tekstu: 0.9vw (komputer), 2.2vw (tablet), 2.8vw (telefon)
• Wysokość wiersza tytułu: 2,2 em

Rozstaw

Uzupełnij ustawienia modułu, dodając kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 1vw
• Dolna wyściółka: 1vw
• Lewa wyściółka: 3vw
• Prawa wyściółka: 3vw

Dodaj moduł tekstowy ceny Woo do kolumny 2

Treści dynamiczne

Następnie mamy moduł tekstowy ceny Woo. Wybierz dowolny produkt.

• Produkt: Znajdź na liście

Kolor tła

Zmodyfikuj kolor tła.

• Kolor tła: rgba (255,255,255,0.7)

Ustawienia tekstu ceny

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu ceny:

• Czcionka ceny: Work Sans
• Kolor tekstu ceny: #000000
• Cena Rozmiar tekstu: 2vw (komputer), 4vw (tablet), 5vw (telefon)

Rozstaw

Uzupełnij ustawienia modułu, dodając kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 2vw
• Dolna wyściółka: 2vw
• Lewa wyściółka: 3vw
• Prawa wyściółka: 3vw

Dodaj moduł Dodaj do koszyka Woo do kolumny 2

Treści dynamiczne

Przejdź do następnego i ostatniego modułu, którym jest moduł Woo Add To Cart! Wybierz dowolny produkt.

• Produkt: Znajdź na liście

Kolor tła

Zmień kolor tła.

• Kolor tła: rgba (255,255,255,0.7)

Ustawienia pól

Zmodyfikuj również ustawienia pól modułu.

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

• Szerokość dolnego obramowania pól: 1px
• Kolor dolnego obramowania pól: #000000

Ustawienia przycisków

Kontynuuj stylizując przycisk w następujący sposób:

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

• Promień obramowania przycisku: 10vw
• Czcionka przycisku: Otwórz Sans

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

Rozstaw

I uzupełnij ustawienia modułu, dodając niestandardowe wartości marginesów i dopełnienia.

• Dolny margines: 2vw
• Górna wyściółka: 3vw
• Dolna wyściółka: 3vw
• Lewa wyściółka: 3vw
• Prawa wyściółka: 3vw

3. Styl, zmiana rozmiaru i położenie kolumny

Zmień ustawienia kolumny 2

Tło gradientowe

Teraz ostatnia część tego samouczka pozwala nam połączyć różne moduły. Otwórz ustawienia kolumny 2 i użyj do tego następującego tła gradientowego:

• Kolor 1: rgba (43,135,218,0)
• Kolor 2: #ffffff
• Typ gradientu: liniowy
• Pozycja początkowa: 39%

Granica

Dodaj też zaokrąglone rogi.

• Wszystkie rogi: 1vw

Cień Pudełka

Tworzymy trochę głębi, dodając również subtelny cień pudełkowy.

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

Przekształć Tłumacz

A my uzupełnimy ustawienia kolumn, zmieniając wartości translacji transformacji na różnych rozmiarach ekranu. Ten krok pozwala nam zmienić położenie kolumny według własnego uznania. Korzystając z własnego obrazu tła, na pewno spodoba ci się ta opcja!

• Po prawej: 0px (komputer stacjonarny), 9vw (tablet i telefon)
• Dół: -5vw (komputer), 0vw (tablet i telefon)

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 oprawić produkt w obraz tła za pomocą wbudowanych opcji Divi i modułów WooCommerce zawartych w Divi Builder. Podejście, które przyjmujesz, zależy od używanego obrazu tła, ale zapoznanie się z tym samouczkiem pomoże ci zrozumieć ogólne podejście. Udało Ci się również bezpłatnie pobrać plik JSON układu! 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.