19 Beispiele für Divi eCommerce-Websites

Die Vielseitigkeit von Divi macht es ideal für E-Commerce-Websites. Es lässt sich gut in WooCommerce und andere E-Commerce-Plattformen integrieren. Es liegt auf der Hand, dass es viele E-Commerce-Websites gibt, die mit Divi erstellt wurden. In diesem Artikel sehen wir uns 20 Beispiele für E-Commerce-Websites an, die mit Divi erstellt wurden, um Ihre Fantasie anzuregen.

Diese Seiten haben interessante Layouts, Shop-Seiten und Produktseiten. Die meisten beinhalten ein interessantes Styling für die Shop- und Produktseiten, und einige enthalten WooCommerce-Add-Ons. Ich werde darauf hinweisen, was mir am meisten auffällt. Die Websites sind in keiner bestimmten Reihenfolge.

1. Ostafrika

East of Africa hat ein scharfes Homepage-Design, das sich auf das Unternehmen konzentriert. Die Seite enthält mehrere Aufrufe zum Handeln, um die verschiedenen Produkte zu sehen. Die Kategorieseiten enthalten eine Kopfzeile mit einem großen Logo und ein Navigationsmenü, das mit der Kopfzeile scrollt. Die Seiten enthalten ein Suchfeld und vorgeschlagene Kategorien. Die Produktseiten zeigen das Produkt in zwei Spalten. Das Layout ist einfach und enthält vorgeschlagene Produkte.

Siehe Webseite

2. Süße Cecilys

Sweet Cecilys zeigt Bilder als Links zu den Shop-Kategorien in einem mehrspaltigen Layout an, das einer Zeitschrift ähnelt. Der Hintergrund zeigt einen Teil des Firmenlogos. Die Kategorieseiten enthalten das gleiche Hintergrundmuster wie die Startseite und zeigen die Produkte in vier Spalten an. Die Kategorieseiten haben WooCommerce-Widgets in der Seitenleiste, die so gestaltet sind, dass sie zu den Produkten passen. Die Produktseiten verwenden die Seitenleiste und fügen Social-Sharing-Buttons und verwandte Produkte hinzu. Diese Seite hat einige erstaunliche Produktfotografien.

Siehe Webseite

3. Modernes rosa Papier

Die Homepage von Modern Pink Paper sieht aus wie ein Geschäft und verwendet sanfte Farben, um die Zielgruppe anzusprechen. Es enthält CTAs zu verschiedenen Kategorien. Die Seiten der primären Kategorie verwenden dasselbe Bild für jede Kategorie, zeigen jedoch den Titel über dem Bild. Die sekundären Kategorieseiten zeigen die Produkte mit einem Filter. Die Produktseiten bieten viele Farb- und Personalisierungsoptionen. Der Käufer kann die Farbe auswählen, einen Namen zur Personalisierung hinzufügen, das Produkt vor dem Versand anzeigen und Nachrichten und Notizen hinzufügen. Die Produktbeschreibung verwendet ein Akkordeon für die FAQ.

Siehe Webseite

4. Ein-Blatt-Designs

One Leaf Designs zeigt Produktbilder in einem Schieberegler in voller Breite mit einem Shop-CTA an, gefolgt von einem Abschnitt mit den Bestsellern. Die Shop-Seite zeigt die Produkte in einem eingerahmten Abschnitt, der die Kopfzeile überlappt. Die Produktseiten zeigen das Produkt mit einem Kastenschatten für alle Bilder. Der Text wird so gestaltet, dass er der Site entspricht. Es enthält Links zu anderen Produkten, die dem Besucher gefallen könnten.

Siehe Webseite

5. Der Bro-Korb

Der Bro Basket zeigt einen Vollbild-Header mit einem Shop-CTA. Ein Abschnitt zeigt die Shop-Kategorien anhand von Bildern mit Overlays. Eine weitere Rubrik zeigt handverlesene Produkte. Die Kategorieseiten zeigen mehrere Abschnitte über das Unternehmen und seine Aktivitäten. Diese Abschnitte umfassen Dienste in 3D-Karten. Die weiter entfernten sind unscharf. Der Beschreibungsbereich der Produktseiten enthält ein Video in voller Breite oder Anpassungen. Dazu gehören auch verwandte Produkte. Ich liebe die Fotografie auf dieser Website.

Siehe Webseite

6. Naturpflege-Shop

Natural Care Shop hat ein schönes Shop-Design mit Bildern, die auf die Kategorien verweisen. Es verwendet sanfte Farben, um die Zielgruppe anzusprechen. Die Kategorieseiten enthalten WooCommerce-Sidebar-Widgets und CTAs in der Fußzeile. Die Produkte werden mit großen Bildern dargestellt. Die Produktseiten haben gestylte Icons und ähnliche Produkte sowohl in einem Widget als auch als CTA-Bilder.

Siehe Webseite

7. Apis Australien

Apis Australia enthält einen Shop-CTA in voller Breite in der Kopfzeile sowie einen Kategoriebereich, der mehrere Produkte in einem Bild zeigt. Die Shop-Seite verwendet den gleichen Hintergrund, um hinter dem Shop-Modul angezeigt zu werden. Ein weiterer Shop-Bereich zeigt ergänzende Produkte vor dem gleichen Hintergrund. Die Produkte werden mit Kastenschatten dargestellt. Die Produktseiten sind einfach gehalten, enthalten jedoch Textstile, die der Website und den zugehörigen Produkten entsprechen.

Siehe Webseite

8. Lahlay

Lahlay zeigt einen Vollbild-Slider mit CTAs für mehrere Produkte. Es enthält ein Mega-Menü, das beim Scrollen ausgeblendet wird. Mehrere Abschnitte auf der Homepage präsentieren die Produkte mit großen Bildern und Kastenschatten. Mehrere andere Abschnitte enthalten Produktinformationen mit Bildern. Die Kategorieseiten zeigen viele Fotos und Informationen in gestylten Akkordeons, zusammen mit einem gestylten Shop-Modul. Die Produkte werden in Popups angezeigt. Diese Site hat eine der interessantesten Kategorie-/Produktseiten, die ich gesehen habe.

Siehe Webseite

9. Leoca

Leoca zeigt einen Vollbild-Header mit einem Shop-CTA an. Der nächste Abschnitt zeigt große Bilder, die auf Kategorien verweisen. Sie enthalten die Kategorietitel. Die Kategorieseiten zeigen ein Vollbild zusammen mit dem Kategorietitel. Der nächste Abschnitt zeigt ein Produkt, gefolgt von einem Shop-Modul mit großen Bildern und Hover-Animationen für die Overlays, um Größen anzuzeigen, und ein Herz, um das Produkt zu Ihrer Wunschliste hinzuzufügen. Die Produktseiten zeigen viele große Bilder zusammen mit Optionen.

Siehe Webseite

10. Der ungepflegte Gentleman

The Scruffy Gentleman bietet ein Produktsuchfeld unter der Kopfzeile, gefolgt von einem Hintergrundbild in voller Breite in Parallaxe. Ausgewählte Produkte scrollen darüber und überlappen den nächsten Abschnitt der vorgestellten Produkte. Ein weiterer Abschnitt zeigt einen CTA in Parallaxe, gefolgt von neuen Artikeln im Store. Die Shop-Seite folgt einem ähnlichen Design und fügt eine WooCommerce-Sidebar hinzu. Die Produktseiten werden in voller Breite angezeigt und enthalten große Bilder.

Siehe Webseite

11. Veez

Veez enthält eine Shop-Schaltfläche, die beim Scrollen auf dem Bildschirm bleibt. Auf der Startseite werden Kategorien mit Bildern als Links angezeigt, die mit überlappenden Texten und Feldern gestaltet sind. Die Kategorieseiten zeigen ein Bild und einen Titel, um den Abschnitt einzuführen, gefolgt von einem Shop-Modul und einer Schaltfläche, um mehr zu enthüllen. Die Produktseiten haben viele interessante Stylings. Sie zeigen das Produkt mit vielen großen Bildern in mehreren Spalten. Ein weiterer Abschnitt zeigt weitere Produkte aus der Kategorie.

Siehe Webseite

12. Coco Cuscino

Coco Cuscino enthält einen Vollbild-Slider mit einem Shop-CTA für die verschiedenen Kategorien. Beim Scrollen wird ein Schieberegler der neuesten Produkte mit einem Abschnittstitel links angezeigt. Ein weiterer Abschnitt enthält CTAs zu verschiedenen Kategorien. Die Kategorie- und Produktseiten sind einfach und verfügen über Rahmen, Schaltflächen und Textstile sowie eine benutzerdefinierte Fußzeile. Die Produktseite enthält einen Kastenschatten.

Siehe Webseite

13. Tarte und Beere

Tarte and Berry zeigt die Produkte in einem Vollbild-Slider mit dem Ken Burns-Effekt und einem Shop-CTA an. Ein schmaler Abschnitt zeigt den Kaufprozess mit Symbolen. Es folgt eine große Produktliste und ein Abschnitt mit Erfahrungsberichten. Die Shopseite folgt dem gleichen Design, jedoch ohne Schieberegler. Die Produktseiten sind so gestaltet, dass sie der Site entsprechen, und enthalten ein Feld zum Hinzufügen einer benutzerdefinierten Nachricht. Die Beschreibung zeigt die Zutaten. Die Seite zeigt auch verwandte Produkte.

Siehe Webseite

14. Nikki Hill Apotheke

Nikki Hill Apothecary verwendet ein weiches und elegantes Design, um die Produkte zu präsentieren. Die Kopfzeile zeigt einen CTA gefolgt von Informationen zum Unternehmen. Ein mehrspaltiger Abschnitt zeigt Bilder als Links zu Kategorien. Die Kategorieseiten sind sauber und enthalten ein Design, das der Site entspricht. Die Produktseiten haben ein benutzerdefiniertes Design, das die Registerkarten des Beschreibungsbereichs umfasst. Unter dem Produkt befindet sich ein Produktvorschlag in einer gestalteten Box. Die Fotografie auf dieser Seite zeichnet sie aus.

Siehe Webseite

15. Spikes und Spatz

Spikes and Sparrow zeigt einen Schieberegler in voller Breite, um Produkte zu präsentieren. Der Schieberegler hat eine gestylte Navigation auf der linken Seite. Der nächste Abschnitt zeigt Kategorien in einem mehrspaltigen Layout mit Bildern mit formatierten Textüberlagerungen. Die Shop-Seiten zeigen die Produkte mit einer gestylten WooCommerce-Sidebar. Die Produktseiten sehen mit ihren Markenfarben elegant aus. Sie zeigen nicht viele Informationen, aber sie enthalten das Produkt in anderen Farben.

Siehe Webseite

16. Kickbike

Kickbike zeigt einen Slider in voller Breite mit einem Shop-CTA. Die Homepage bietet mehrere Artikel und Links zum Unternehmen, Shop-Bereiche und viele Infos zu den Produkten. Die Kategorieseiten enthalten ein Vollbild, gefolgt von einem Informationsbereich, dem Shopbereich in voller Breite und einem FAQ. Die Produktseiten sind einfach, verwenden aber viele große Fotos und verwandte Produkte.

Siehe Webseite

17. Ungesalzene Boutique

Unsalted Boutique verwendet weiche Farben hinter der Speisekarte, den Abschnitten, Textblöcken usw., um die Zielgruppe anzusprechen. Ein CTA wird innerhalb eines Schiebereglers angezeigt und verwendet ein Bild mit einem farbigen Feld für Text. Auf der gesamten Site werden farbige Kästchen verwendet, um die Kategorien zu identifizieren. Die Homepage enthält mehrere dieser Shop-Bereiche. Die Kategorielinks öffnen die Produktseite, auf der Sie das jeweilige Produkt aus einer Dropdown-Box auswählen können. Auf der Produktseite werden auch verwandte Produkte angezeigt.

Siehe Webseite

18. Maison-Blumen

Maison Flowers zeigt ein Produktbild als Parallaxenhintergrund im Vollbild-Heldenbereich. Scrollen zeigt ein gestyltes Shop-Modul mit einem Blumen-Icon im Overlay und einen Bereich mit Bildern für Kategorien mit Hover-Animation. Die Kategorieseiten entsprechen der Homepage, haben aber ein kleines Bild mit einem gestylten Overlay. Die Produktseiten verwenden dieselbe Kopfzeile und einen großen Produkttitel und enthalten ein persönliches Nachrichtenfeld, um das Geschenk zu personalisieren. Die Seite hat auch einen Abschnitt mit Versand- und Kaufinformationen und zwei weitere Abschnitte mit ähnlichen Produkten.

Siehe Webseite

19. Basami-Laden

Basami Shop zeigt einen Shop-CTA in einem Vollbild-Slider. Ein Abschnitt mit anderen Produkten und ein Abschnitt mit Favoriten enthalten Boxschatten. Auf den Kategorieseiten werden Kategorien in der Seitenleiste, eine Beschreibung der Kategorie und dann die Produkte angezeigt. Die Produktseiten zeigen ein großes Bild des Produkts, die Produktgalerie und dann den Beschreibungsbereich. Dieser Bereich ist so gestaltet, dass er der Site entspricht und enthält verwandte Produkte.

Siehe Webseite

Gedanken beenden

Das ist unser Blick auf 20 Beispiele für E-Commerce-Websites, die mit Divi erstellt wurden, um Ihre Fantasie anzuregen. Diese Seiten sind großartige Beispiele dafür, was mit Divi gemacht werden kann. Viele haben elegante Landingpages mit gestylten Shopmodulen, um sich auf die Produkte zu konzentrieren. Es gibt mehrere hervorragende Beispiele für Shopseiten, Kategorieseiten und Produktseiten. Es ist leicht zu erkennen, wie Produktfotografie ein einfaches Design hervorheben kann. Hier ist mit Sicherheit etwas dabei, das Ihnen bei der Gestaltung jeder Art von eCommerce-Website für Ihr nächstes Divi-Projekt hilft.

Wir wollen von dir hören. Welche dieser Divi eCommerce-Websites sind Ihre Favoriten? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über TeraVector / shutterstock.com