Z modami WooCommerce sur Divi, istnieje mnóstwo projektów, które możesz wykonać. W tym samouczku Divi, postaramy się zainspirować Cię kolejnym pomysłem na projekt, który możesz osiągnąć, korzystając wyłącznie z wbudowanych opcji Divi. W szczególności pokażemy Ci, jak umieścić produkt w ramce na obrazie tła. Wynik zależy całkowicie od obrazu tła, ale jeśli zastosujesz się do tego samouczka, będziesz wiedział, jakie kroki podjąć, aby dostosować technikę do własnych potrzeb Witryna internetowa! Będziesz także mógł pobrać samouczek plik JSON za darmo!
badanie
Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.
1. Skonfiguruj sekcję z responsywnym obrazem tła
Dodaj nową sekcję
Adaptacyjny obraz tła
Pierwszym krokiem do umieszczenia produktu w obrazie tła jest dodanie nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i pobierz responsywne obrazy tła. Możesz znaleźć dwa obrazy, których użyliśmy w folderze, który mogłeś pobrać na początku tego artykułu.
- Obraz w tle: krajobraz
- Rozmiar obrazu tła: Dopasuj
- Pozycja obrazu tła: u góry na środku
- Obraz w tle: kwadrat
rozstaw
Przejdź do karty projektowania i dodaj niestandardowe wypełnienie górne i dolne na różnych rozmiarach ekranu.
- Górna wyściółka: 3vw (komputer stacjonarny), 0vw (tablet i telefon)
- Wyściółka u dołu: 3vw (biurko), 7vw (tablet), 18vw (telefon)
granica
Uzupełnij parametry sekcji, dodając ramkę.
- Szerokość granicy: 2 vw
- Kolor obramowania: #ffffff
2. Dodaj różne elementy ramki do kolumny
Dodaj nową linię
Struktura kolumny
Teraz, jak widać na obrazku tła, produkt znajduje się po prawej stronie obrazu tła. Wybierzemy odpowiednią strukturę kolumn dla nowego wiersza w naszej sekcji. W tym przypadku jest to następująca struktura kolumn:
zaklejania
Nie dodając jeszcze modułów, otwórz parametry linii i odpowiednio zmodyfikuj parametry wymiarowania:
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Wyrównaj wysokości kolumn: Tak
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Uzupełnij parametry linii, dodając niestandardowe lewe i prawe dopełnienie.
- Lewa wyściółka: 5 vw
- Prawa wyściółka: 5 vw
Dodaj moduł tekstowy do kolumny 2
Pozostaw pole zawartości puste
Czas zacząć dodawać moduły! Aby produkt mógł się pokazać, użyjemy pustego modułu tekstowego.
rozstaw
Następnie zwiększymy wysokość modułu w ustawieniach odstępów.
- Górna wyściółka: 22vw (komputer stacjonarny), 39vw (tablet), 35vw (telefon)
- Wyściółka u dołu: 15vw (biurko), 39vw (tablet), 35vw (telefon)
granica
Dodamy również granicę.
- Szerokość granicy: 3 vw
- Szerokość dolnej krawędzi: 1vw
- Kolor obramowania: rgba (255,255,255,0,7)
Dodaj moduł tytułu Woo do kolumny 2
Dynamiczna treść
Przejdźmy do następnego modułu, który jest modułem tytułu Woo. Wybierz odpowiedni produkt.
- Produkt: Wyszukaj 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łowego
Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu H3:
- Poziom tytułu: H3
- Czcionka tytułu: Work Sans
- Rozmiar tekstu tytułu: 2.5 vw (komputer stacjonarny), 5 vw (tablet), 6 vw (telefon)
rozstaw
Dodaj także niestandardowe wartości wypełnienia.
- Górna wyściółka: 1vw
- Wyściółka u dołu: 1vw
- Lewa wyściółka: 3 vw
- Prawa wyściółka: 3 vw
Dodaj moduł opisu Woo do kolumny 2
Dynamiczna treść
Kolejnym potrzebnym modułem jest moduł opisu Woo. Wybierz odpowiedni produkt.
- Produkt: Wyszukaj 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 projektowania modułu i zmień ustawienia tekstu w następujący sposób:
- Czcionka tekstu: Otwórz Sans
- Rozmiar tekstu: 0.9vw (komputer stacjonarny), 2.2vw (tablet), 2.8vw (telefon)
- Wysokość linii tytułu: 2,2 em
rozstaw
Uzupełnij parametry modułu, dodając niestandardowe wartości wypełnienia.
- Górna wyściółka: 1vw
- Wyściółka u dołu: 1vw
- Lewa wyściółka: 3 vw
- Prawa wyściółka: 3 vw
Dodaj moduł tekstowy Woo Price do kolumny 2
Dynamiczna treść
Następnie mamy moduł tekstowy ceny Woo. Wybierz odpowiedni produkt.
- Produkt: Wyszukaj na liście
Kolor tła
Zmień 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:
- Polityka cenowa: Work Sans
- Kolor tekstu ceny: # 000000
- Cena Rozmiar tekstu: 2vw (komputer stacjonarny), 4vw (tablet), 5vw (telefon)
rozstaw
Uzupełnij parametry modułu, dodając niestandardowe wartości wypełnienia.
- Górna wyściółka: 2vw
- Wyściółka u dołu: 2vw
- Lewa wyściółka: 3 vw
- Prawa wyściółka: 3 vw
Dodaj Woo Dodaj do koszyka Moduł w kolumnie 2
Dynamiczna treść
Przejdźmy do następnego i ostatniego modułu, którym jest moduł Woo Dodaj do koszyka! Wybierz odpowiedni produkt.
- Produkt: Wyszukaj na liście
Kolor tła
Zmień kolor tła.
- Kolor tła: rgba (255,255,255,0,7)
Ustawienia pola
Zmodyfikuj również parametry pól modułu.
- Kolor tła pól: #ffffff
- Kolor tekstu pola: # 000000
- Czcionka pola: Open Sans
- Szerokość dolnej granicy pól: 1px
- Kolor dolnej granicy pól: # 000000
Ustawienia przycisków
Kontynuuj, stylizując przycisk w następujący sposób:
- Użyj niestandardowych stylów przycisku: Tak
- Rozmiar tekstu przycisku: 1.1vw (komputer stacjonarny), 2.5vw (tablet), 3.5vw (telefon)
- Kolor tekstu przycisku: #ffffff
- Kolor tła przycisku: # 000000
- Szerokość obramowania przycisku: 0px
- Promień obramowania przycisku: 10 vw
- Czcionka przycisku: Otwórz bez
- Górna wyściółka: 1vw (komputer stacjonarny), 2vw (tablet), 4vw (telefon)
- Wyściółka u dołu: 1vw (biurko), 2vw (tablet), 4vw (telefon)
- Lewe wypełnienie: 4vw (komputer stacjonarny), 6vw (tablet), 10vw (telefon)
- Prawa wyściółka: 4vw (biurko), 6vw (tablet), 10vw (telefon)
rozstaw
I uzupełnij parametry modułu, dodając niestandardowe wartości marginesów i marginesów.
- Dolny margines: 2vw
- Górna wyściółka: 3vw
- Wyściółka u dołu: 3vw
- Lewa wyściółka: 3 vw
- Prawa wyściółka: 3 vw
3. Styl, kolumna zmiany rozmiaru i położenia
Zmodyfikuj parametry 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 następującego gradientu tła:
- Kolor 1: rgba (43,135,218,0)
- Kolor 2: #ffffff
- Rodzaj gradientu: liniowy
- Pozycja początkowa: 39%
granica
Dodaj także zaokrąglone rogi.
- Wszystkie rogi: 1vw
Pole cienia
Głębokość tworzymy również poprzez dodanie subtelnego cienia.
- Pole Shadow Blur Strength: 100px
- Kolor cienia: rgba (0,0,0,0,24)
Transformer Translate
Uzupełnimy ustawienia kolumn, zmieniając wartości konwersji transformacji na ekranach o różnych rozmiarach. Ten krok pozwala nam dowolnie zmieniać położenie kolumny. Korzystając z własnego obrazu tła, z pewnością docenisz tę opcję!
- Po prawej: 0px (biuro), 9vw (tablet i telefon)
- Dół: -5vw (biuro), 0vw (tablet i telefon)
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak oprawić produkt w obraz tła za pomocą wbudowanych opcji i modułów Divi. WooCommerce zawarte w Divi Builder. Podejście, które zastosujesz, zależy od używanego obrazu tła, ale przeczytanie tego samouczka pomoże ci zrozumieć ogólne podejście. Mogłeś również pobrać plik JSON układu za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
