19 przykładów stron internetowych Divi eCommerce

Opublikowany: 2019-02-11

Wszechstronność Divi sprawia, że ​​idealnie nadaje się do witryn eCommerce. Dobrze integruje się z WooCommerce i innymi platformami eCommerce. Jest oczywiste, że istnieje wiele witryn eCommerce zbudowanych z Divi. W tym artykule przyjrzymy się 20 przykładom witryn eCommerce zbudowanych z Divi, aby pobudzić Twoją wyobraźnię.

Te witryny mają ciekawe układy, strony sklepu i strony produktów. Większość zawiera ciekawą stylizację dla sklepu i stron produktów, a niektóre zawierają dodatki WooCommerce. Wskażę to, co mnie najbardziej wyróżnia. Strony internetowe nie są w określonej kolejności.

1. Wschód Afryki

East of Africa ma ostry projekt strony głównej, która koncentruje się na firmie. Strona zawiera kilka wezwań do działania, aby zobaczyć różne produkty. Strony kategorii zawierają nagłówek z dużym logo i menu nawigacyjne przewijane wraz z nagłówkiem. Strony zawierają pole wyszukiwania i sugerowane kategorie. Strony produktów przedstawiają produkt w dwóch kolumnach. Układ graficzny jest prosty i zawiera sugerowane produkty.

Zobacz stronę internetową

2. Słodka Cecylia

Sweet Cecilys wyświetla obrazy jako linki do kategorii sklepów w wielokolumnowym układzie, który wygląda podobnie do magazynu. W tle widać fragment logo firmy. Strony kategorii zawierają ten sam wzór tła co strona główna i wyświetlają produkty w czterech kolumnach. Strony kategorii mają widżety WooCommerce na pasku bocznym, które są stylizowane tak, aby pasowały do ​​produktów. Strony produktów korzystają z paska bocznego i dodają przyciski udostępniania społecznościowego oraz powiązane produkty. Ta strona zawiera niesamowite zdjęcia produktów.

Zobacz stronę internetową

3. Nowoczesny różowy papier

Strona główna Modern Pink Paper wygląda jak sklep i wykorzystuje delikatne kolory, aby przyciągnąć grupę docelową. Zawiera CTA do różnych kategorii. Strony kategorii podstawowej używają tego samego obrazu dla każdej kategorii, ale wyświetlają tytuł nad obrazem. Strony kategorii drugorzędnych pokazują produkty z filtrem. Strony produktów posiadają wiele opcji kolorystycznych i personalizacji. Kupujący może wybrać kolor, dodać nazwę do personalizacji, zobaczyć produkt przed jego wysyłką oraz dodać wiadomości i notatki. Opis produktu wykorzystuje akordeon do FAQ.

Zobacz stronę internetową

4. Wzory z jednym liściem

One Leaf Designs wyświetla zdjęcia produktów na suwaku o pełnej szerokości z CTA sklepu, po którym następuje sekcja z bestsellerami. Strona sklepu pokazuje produkty w sekcji pudełkowej, która zachodzi na nagłówek. Strony produktów pokazują produkt z cieniem pudełkowym dla wszystkich zdjęć. Tekst jest stylizowany tak, aby pasował do witryny. Zawiera linki do innych produktów, które odwiedzający może polubić.

Zobacz stronę internetową

5. Kosz brata

Bro Basket pokazuje pełnoekranowy nagłówek z CTA sklepu. Sekcja pokazuje kategorie sklepów za pomocą zdjęć z nakładkami. Kolejna sekcja przedstawia ręcznie wybrane produkty. Strony kategorii zawierają kilka sekcji dotyczących firmy i jej działalności. Te sekcje obejmują usługi na kartach 3D. Te dalej są zamazane. Obszar opisu na stronach produktów zawiera wideo o pełnej szerokości lub dostosowania. Obejmują one również produkty pokrewne. Uwielbiam fotografię na tej stronie.

Zobacz stronę internetową

6. Sklep z produktami do pielęgnacji naturalnej

Sklep Natural Care ma ładny wygląd sklepu ze zdjęciami, które prowadzą do kategorii. Używa delikatnych kolorów, aby przyciągnąć uwagę odbiorców docelowych. Strony kategorii zawierają widżety paska bocznego WooCommerce i CTA w stopce. Produkty są pokazane z dużymi obrazami. Strony produktów mają stylizowane ikony i podobne produkty zarówno w widżecie, jak i jako obrazy CTA.

Zobacz stronę internetową

7. Apis Australia

Apis Australia zawiera w nagłówku CTA sklepu o pełnej szerokości wraz z sekcją kategorii, która pokazuje kilka produktów na obrazie. Strona sklepu używa tego samego tła do wyświetlania za modułem sklepu. Inna sekcja sklepu pokazuje produkty uzupełniające się na tym samym tle. Produkty pokazane są z cieniami pudełkowymi. Strony produktów są proste, ale zawierają stylizację tekstu pasującą do witryny i powiązanych produktów.

Zobacz stronę internetową

8. Lahlay

Lahlay pokazuje pełnoekranowy suwak z CTA dla kilku produktów. Zawiera mega-menu, które ukrywa się podczas przewijania. Kilka sekcji na stronie głównej prezentuje produkty z dużymi obrazami i cieniami. Kilka innych sekcji zawiera informacje o produkcie wraz ze zdjęciami. Strony kategorii zawierają wiele zdjęć i informacji w stylizowanych akordeonach, a także moduł sklepu stylizowanego. Produkty są wyświetlane w wyskakujących okienkach. Ta strona ma jedną z najciekawszych stron kategorii/produktów, jakie widziałem.

Zobacz stronę internetową

9. Leoca

Leoca wyświetla pełnoekranowy nagłówek z CTA sklepu. Następna sekcja pokazuje duże obrazy z linkami do kategorii. Obejmują one tytuły kategorii. Strony kategorii pokazują obraz pełnoekranowy wraz z tytułem kategorii. Następna sekcja przedstawia produkt, a następnie moduł sklepu z dużymi obrazami i animacją najechania na nakładki pokazujące rozmiary oraz sercem do dodania produktu do listy życzeń. Strony produktów zawierają wiele dużych zdjęć wraz z opcjami.

Zobacz stronę internetową

10. Niechlujny dżentelmen

Scruffy Gentleman udostępnia pole wyszukiwania produktów pod nagłówkiem, po którym następuje obraz tła o pełnej szerokości w paralaksie. Polecane produkty przewijają się nad nim i nakładają się na następną sekcję polecanych produktów. Kolejna sekcja pokazuje CTA w paralaksie, a następnie nowe przedmioty w sklepie. Strona sklepu ma podobny projekt i dodaje pasek boczny WooCommerce. Strony produktów są wyświetlane w pełnej szerokości i zawierają duże obrazy.

Zobacz stronę internetową

11. Veez

Veez zawiera przycisk sklepu, który pozostaje na ekranie podczas przewijania. Strona główna pokazuje kategorie z obrazami jako łączami stylizowanymi na nakładający się tekst i pola. Strony kategorii pokazują obraz i tytuł, aby przedstawić sekcję, a następnie moduł sklepu i przycisk, aby wyświetlić więcej. Strony produktów mają wiele ciekawych stylizacji. Pokazują produkt z dużą ilością dużych zdjęć w wielu kolumnach. Kolejna sekcja pokazuje więcej produktów z tej kategorii.

Zobacz stronę internetową

12. Coco Cuscino

Coco Cuscino zawiera pełnoekranowy suwak z CTA sklepu dla różnych kategorii. Przewijanie pokazuje suwak najnowszych produktów z tytułem sekcji po lewej stronie. Kolejna sekcja zawiera CTA do różnych kategorii. Strony kategorii i produktów są proste i mają styl obramowania, przycisków i tekstu oraz niestandardową stopkę. Strona produktu zawiera cień do pudełka.

Zobacz stronę internetową

13. Tarta i Jagoda

Tarta i Jagoda

Tarte and Berry wyświetla produkty w pełnoekranowym sliderze wykorzystując efekt Kena Burnsa i sklepowe CTA. Smukła sekcja pokazuje proces zakupu za pomocą ikon. Poniżej znajduje się duża lista produktów i sekcja z referencjami. Strona sklepu ma ten sam projekt, ale bez suwaka. Strony produktów są stylizowane tak, aby pasowały do ​​witryny i zawierają pole do dodania niestandardowej wiadomości. Opis pokazuje składniki. Strona pokazuje również powiązane produkty.

Zobacz stronę internetową

14. Aptekarz Nikki Hill

Aptekarz Nikki Hill używa miękkiego i eleganckiego designu, aby zaprezentować produkty. W nagłówku wyświetlane jest wezwanie do działania, a następnie informacje o firmie. Sekcja wielokolumnowa pokazuje obrazy jako linki do kategorii. Strony kategorii są czyste i zawierają styl dopasowany do witryny. Strony produktów mają niestandardową stylizację, która obejmuje zakładki obszaru opisu. Pod produktem znajduje się sugerowany produkt w stylizowanym pudełku. Fotografia na tej stronie wyróżnia ją.

Zobacz stronę internetową

15. Kolce i Wróbel

Spikes and Sparrow wyświetla suwak pełnej szerokości, aby zaprezentować produkty. Suwak ma stylizowaną nawigację po lewej stronie. W następnej sekcji przedstawiono kategorie w układzie wielokolumnowym przy użyciu obrazów ze stylizowanymi nakładkami tekstowymi. Strony sklepu pokazują produkty ze stylizowanym paskiem bocznym WooCommerce. Strony produktów wyglądają elegancko dzięki swoim markowym kolorom. Nie pokazują wielu informacji, ale zawierają produkt w innych kolorach.

Zobacz stronę internetową

16. Kickbike

Kickbike pokazuje suwak o pełnej szerokości ze sklepowym CTA. Strona główna zawiera kilka artykułów i linków o firmie, działach sklepu oraz wiele informacji o produktach. Strony kategorii zawierają obraz pełnoekranowy, po którym następuje sekcja informacyjna, sekcja sklepu w pełnej szerokości, a następnie FAQ. Strony produktów są proste, ale zawierają dużo dużych zdjęć i powiązanych produktów.

Zobacz stronę internetową

17. Butik niesolony

Unsalted Boutique używa delikatnych kolorów za menu, sekcjami, blokami tekstu itp., aby przyciągnąć grupę docelową. Wezwanie do działania wyświetla się na suwaku i używa obrazu z kolorowym polem tekstu. W całej witrynie używane są kolorowe pola do identyfikacji kategorii. Strona główna zawiera kilka takich sekcji sklepu. Łącza kategorii otwierają stronę produktu, na której możesz wybrać konkretny produkt z listy rozwijanej. Strona produktu pokazuje również powiązane produkty.

Zobacz stronę internetową

18. Kwiaty Maison

Maison Flowers wyświetla zdjęcie produktu jako tło paralaksy w pełnoekranowej sekcji bohaterów. Przewijanie pokazuje stylizowany moduł sklepu z ikoną kwiatka w nakładce oraz sekcję z obrazami dla kategorii z animacją najechania kursorem. Strony kategorii pasują do strony głównej, ale mają mały obraz ze stylizowaną nakładką. Strony produktów używają tego samego nagłówka i dużego tytułu produktu, a także zawierają osobistą skrzynkę wiadomości, aby spersonalizować prezent. Strona zawiera również sekcję wyświetlającą informacje o wysyłce i zakupie oraz dwie inne sekcje z podobnymi produktami.

Zobacz stronę internetową

19. Sklep Basami

Sklep Basami wyświetla CTA sklepu w pełnoekranowym suwaku. Sekcja innych produktów i sekcja ulubionych obejmuje cienie do skrzynek. Strony kategorii pokazują kategorie na pasku bocznym, opis kategorii, a następnie produkty. Strony produktów pokazują duży obraz produktu, galerię produktów, a następnie obszar opisu. Ten obszar jest stylizowany tak, aby pasował do witryny i zawiera powiązane produkty.

Zobacz stronę internetową

Końcowe myśli

Oto nasze spojrzenie na 20 przykładów witryn eCommerce zbudowanych z Divi, aby pobudzić Twoją wyobraźnię. Te strony są świetnymi przykładami tego, co można zrobić z Divi. Wiele z nich ma eleganckie strony docelowe ze stylizowanymi modułami sklepu, aby skupić się na produktach. Istnieje kilka doskonałych przykładów stron sklepów, stron kategorii i stron produktów. Łatwo zobaczyć, jak fotografia produktowa może wyróżnić prosty projekt. Z pewnością znajdzie się tu coś, co pomoże Ci zaprojektować dowolną witrynę e-commerce dla Twojego następnego projektu Divi.

Chcemy usłyszeć od Ciebie. Które z tych witryn Divi eCommerce są Twoimi ulubionymi? Daj nam znać, co o nich myślisz w komentarzach.

Polecane zdjęcie za pośrednictwem TeraVector / shutterstock.com