So erstellen Sie eine E-Commerce-Website im Jahr 2024 (einfache Anleitung)

Veröffentlicht: 2024-11-16

Möchten Sie Ihr angeschlagenes Ladengeschäft in ein Online-Geschäft umwandeln? Ein Online-Unternehmen kann ein breiteres Publikum erreichen und den Umsatz steigern. Viele Benutzer möchten heute ihr traditionelles Online-Geschäft erweitern oder ein neues Unternehmen auf dem digitalen Markt gründen. Dieser Leitfaden bietet einen schrittweisen Ansatz zur Erstellung einer erfolgreichen E-Commerce-Website, die den Umsatz steigert und die Kundeninteraktion verbessert. Wir besprechen, wie Sie mit Divi und WooCommerce in wenigen Minuten einen vollständigen Online-Shop erstellen, wie Sie ihn so gestalten, dass er zu Ihrer Marke passt, und vieles mehr.

Inhaltsverzeichnis
  • 1 Warum müssen Sie eine E-Commerce-Website erstellen?
  • 2 So erstellen Sie eine E-Commerce-Website in 7 Schritten
    • 2.1 1. Holen Sie sich Domain- und WordPress-Hosting
    • 2.2 2. Installieren Sie das Divi Theme
    • 2.3 3. Erstellen Sie Ihre E-Commerce-Website
    • 2.4 4. Bezahlen Sie Ihre neue Website
    • 2.5 5. WooCommerce konfigurieren und Produkte hinzufügen
    • 2.6 6. Entwerfen und passen Sie Ihre E-Commerce-Website an
    • 2.7 7. Steigern Sie Ihre E-Commerce-Site mit Plugins und Integrationen
  • 3 Fazit

Warum müssen Sie eine E-Commerce-Website erstellen?

Der Aufbau einer E-Commerce-Website ist in der heutigen Geschäftswelt aus mehreren Gründen unverzichtbar geworden, insbesondere da sich die Einkaufsgewohnheiten online verlagern. Hier sind einige wichtige Gründe, warum es wichtig ist, eines zu erstellen:

  • Erweiterte Reichweite: Eine E-Commerce-Website ermöglicht es Ihrem Unternehmen, Kunden außerhalb Ihrer Region zu erreichen. Sie können überall und jederzeit an Menschen verkaufen – rund um die Uhr, ohne physische Grenzen.
  • Bequemlichkeit für Kunden: Die Menschen lieben die Leichtigkeit des Online-Einkaufs. Unabhängig davon, ob sie ein Telefon, ein Tablet oder einen Computer verwenden, können Kunden bequem einkaufen. Mit einer E-Commerce-Website gestalten Sie den Kaufprozess reibungslos und zugänglich.
  • Kosteneffizienz: Der Betrieb einer E-Commerce-Website kann kostengünstiger sein als der Betrieb eines stationären Geschäfts. Sie können Gemeinkosten wie Miete, Nebenkosten und in manchen Fällen auch Personal reduzieren.
  • Daten und Analysen: E-Commerce-Websites bieten umfangreiche Daten, die Ihnen helfen können, Ihre Kunden besser zu verstehen. Sie können ihre Einkaufsgewohnheiten verfolgen, sehen, welche Produkte am besten funktionieren, und diese Daten nutzen, um Marketingstrategien und das Kundenerlebnis zu verbessern.

Beginnen wir, wie Sie wissen, mit der Erstellung der Gründe für die Erstellung einer E-Commerce-Website!

So erstellen Sie eine E-Commerce-Website in 7 Schritten

Das Erstellen Ihrer eigenen E-Commerce-Website mit WordPress wird zum Kinderspiel, wenn Sie die richtigen Schritte befolgen und die entsprechenden Tools verwenden. Ob Anfänger oder erfahrener Entwickler, Sie können mühelos einen optisch ansprechenden Online-Shop eröffnen. So geht's:

1. Holen Sie sich Domain- und WordPress-Hosting

Bevor Sie Ihre Website erstellen, müssen Sie einige wichtige Dinge bereithalten: Ihre Domain, Ihren Hosting-Service und die WordPress-Einrichtung.

Wenn Sie noch auf der Suche nach einem Hosting-Anbieter sind, bietet SiteGround eine praktische Lösung, die alle diese Aspekte verwaltet.

Domain

Ihre Domain (oder Ihr Domainname) ist die Webadresse Ihrer Website (z. B. elegantthemes.com). Es ist wichtig, eine Adresse auszuwählen, die Ihre Marke widerspiegelt und leicht zu merken ist. Im Idealfall sollte Ihre Domain den Besuchern einen Eindruck von Ihrem E-Commerce-Geschäft vermitteln.

Nachdem Sie Ihren Domainnamen ausgewählt haben, suchen Sie nach einem zuverlässigen Domain-Registrar, um ihn zu registrieren. Namecheap ist eine gute Option, oder Sie können eine vergünstigte Domain direkt über SiteGround erhalten, wenn Sie sich für das Hosting entscheiden.

Besuchen Sie NameCheap

Wenn Sie eine Domain besitzen, können Sie diese ganz einfach mit Ihrem Hosting-Anbieter verbinden, indem Sie die Nameserver aktualisieren.

WordPress-Hosting

Ihre Website benötigt ein zuverlässiges Online-Zuhause, bei dem das Hosting ins Spiel kommt. Da wir WordPress verwenden werden, ist die Wahl eines hochwertigen WordPress-Hosting-Anbieters wichtig. Ein guter Host vereinfacht die Verwaltung Ihrer Website und stellt gleichzeitig eine gute Leistung und Sicherheit sicher.

SiteGround bietet WordPress-Hosting-Pläne ab 3,99 $ pro Monat und ist damit eine budgetfreundliche Option. Das Einrichten von WordPress-Hosting mit SiteGround ist unkompliziert.

Sehen Sie sich das Video unten an, um zu erfahren, wie Sie Ihre Domain und Ihr Hosting einrichten.

Installieren Sie WordPress

Viele WordPress-Hosting-Anbieter, wie beispielsweise SiteGround, bieten während des Einrichtungsprozesses eine WordPress-Installation mit einem Klick an.

Wenn diese Option nicht verfügbar ist, rufen Sie einfach das Dashboard Ihres Hosting-Anbieters auf. Wählen Sie das WordPress-Installationsprogramm aus und befolgen Sie die bereitgestellten Schritte. Sobald die Installation abgeschlossen ist, erhalten Sie eine Bestätigungs-E-Mail mit Ihren Anmeldedaten. Um auf Ihre Website zuzugreifen, gehen Sie zu yourwebsite.com/wp-admin und melden Sie sich mit den Anmeldeinformationen an, die Sie während der Installation erstellt haben.

2. Installieren Sie das Divi-Theme

Der Aufbau Ihrer E-Commerce-Website mit Divi war noch nie so einfach. Mit diesem vielseitigen Theme können Sie ohne Programmiererfahrung visuell beeindruckende und vollständig anpassbare Websites erstellen. Divi ist für seine robusten Designfunktionen bekannt und bietet eine breite Palette vorgefertigter Layouts, die auf verschiedene Arten von E-Commerce-Websites zugeschnitten sind.

Divi-Thema für gemeinnützige Organisationen

Divi verbindet alle Punkte für die E-Commerce-Websites:

  • Es ermöglicht Ihnen, Ihren Online-Shop ganz einfach über eine visuelle Drag-and-Drop-Oberfläche zu entwerfen und anzupassen, sodass keine Programmierung erforderlich ist.
  • Divi bietet 211 vorgefertigte Layouts und 30 Layoutpakete speziell für den E-Commerce, sodass Sie mit minimalem Aufwand Produktseiten, Checkout-Seiten und mehr erstellen können.
  • Mit den WooCommerce-Modulen von Divi können Sie Ihre Produkte anzeigen, filtern und anpassen. Darüber hinaus können Sie mit Drag-and-Drop-Modulen einzigartige Produktseitenlayouts erstellen, die Produktdetails, Bewertungen, Bilder und mehr anzeigen.
  • Sie können auf den Marktplatz für Divi-Erweiterungen zugreifen, um mehrere Zahlungsgateways wie PayPal und Stripe zu integrieren.

Laden Sie Divi herunter und installieren Sie es

Sie können Divi bei Elegant Themes mit einer Jahreslizenz für 89 $ oder einer lebenslangen Lizenz für 249 $ erwerben. Laden Sie nach dem Kauf das Theme herunter und installieren Sie es auf Ihrer WordPress-Site, indem Sie die folgenden Schritte ausführen:

  1. Navigieren Sie zu Erscheinungsbild > Themen .
  2. Klicken Sie auf „Neu hinzufügen“ und dann auf „Thema hochladen“ .
  3. Wählen Sie die heruntergeladene Divi-ZIP-Datei aus und klicken Sie auf „Jetzt installieren“ .
  4. Klicken Sie nach der Installation auf Aktivieren , um Divi als Ihr aktives Theme festzulegen.

Weitere Informationen finden Sie im Video unten.

Wenn die Einrichtung abgeschlossen ist, können Sie mit dem Bau beginnen. Wenn Sie vor dem Eintauchen mehr erfahren möchten, schauen Sie sich unser Tutorial zur Verwendung des Divi Builder an.

Beginnen Sie mit Divi

3. Erstellen Sie Ihre E-Commerce-Website

Nachdem Sie das Divi-Theme auf WordPress installiert haben, können Sie Ihre E-Commerce-Site erstellen. Kein Grund zur Sorge – Divi Quick Sites kann Ihren Shop automatisch erstellen, sodass Sie nicht bei Null anfangen müssen!

Starten Sie den Onboarding-Assistenten

Nachdem Sie das Divi-Theme in WordPress aktiviert haben, erhalten Sie Zugriff auf den Onboarding-Assistenten von Divi, der Sie durch den Einrichtungsprozess führt. Klicken Sie einfach auf die Schaltfläche, um sich anzumelden und Ihre Divi-Lizenz zu aktivieren.

Melden Sie sich an, um Ihre Divi-Lizenz zu aktivieren

Nach der Anmeldung gelangen Sie zum Haupt-Divi-Dashboard. Hier können Sie Ihre Site verwalten, auf Dokumentation zugreifen, Support erhalten und mit der Erstellung einer neuen Site mit Divi Quick Sites beginnen. Um zu beginnen, klicken Sie einfach im Divi-Dashboard auf „Neue Site generieren“.

Ein Screenshot von Divis Option zum Generieren einer neuen Site im Dashboard

Erhalten Sie schnelle Websites mit Divi AI

Generieren Sie Ihre Website mit einer E-Commerce-Starter-Site (oder mit KI)

Als Nächstes können Sie wählen, ob Sie Ihre neue E-Commerce-Website entweder mit einer vorgefertigten Starter-Site oder mit dem KI-Website-Builder von Divi erstellen möchten. Divi bietet eine beeindruckende Vorlage für eine Online-Shop-Startseite. Klicken Sie also auf „Website-Vorlage auswählen“, um loszulegen.

Wählen Sie die Starterseite aus

Auf Ihrem Bildschirm sehen Sie mehrere Starter-Site-Vorlagen. Wählen Sie die Startseite des Online-Shops. Wenn Sie befürchten, dass die Vorlage nicht mit den Farben, Schriftarten oder Bildern Ihrer Marke übereinstimmt, machen Sie sich keine Sorgen. Diese können später angepasst werden.

Divi Online-Startseite

Divi Quick Sites fordert Sie auf, Details zu Ihrer neuen Website und den Seiten anzugeben, die Sie einbinden möchten.

  1. Füllen Sie das Formular mit Ihrem Site-Namen, Ihrem Slogan und Ihrem Logo aus.
  2. Laden Sie Ihr Logo hoch, um es automatisch zu Ihrer Website hinzuzufügen (falls verfügbar).
  3. Wählen Sie auf der Starter-Site die gewünschten Seiten aus und fügen Sie bei Bedarf benutzerdefinierte Seiten hinzu, um den Vorgang zu starten.
  4. Sobald Sie fertig sind, klicken Sie auf die Schaltfläche „Meine Website generieren und veröffentlichen“.

Passen Sie die Startseite des Online-Shops an

HINWEIS: Wenn Sie die Shop-Seite auswählen, werden WooCommerce und vorgefertigte Seiten für Ihren Online-Shop (Shop, Produktvorlagen, Checkout usw.) automatisch installiert. Da Sie eine E-Commerce-Website erstellen, ist die Einbindung der Shop-Seite zur Aktivierung von Produktlisten und Transaktionen unerlässlich.

Nachdem Sie Ihre Website-Details eingegeben haben, erstellt Divi Quick Sites anhand Ihrer Eingaben die Website in weniger als zwei Minuten. Es erstellt automatisch alle erforderlichen Elemente, einschließlich Seiten, Vorlagen, Stile und Navigationsmenüs.

Prozess der Divi AI-Website-Generierung

Sobald Ihre Website bereit ist, wird eine Bestätigungsseite mit der Meldung „Ihre Website ist bereit!“ angezeigt.

divi Ihre Website ist fertig

Außerdem sehen Sie eine Liste aller erstellten Seiten und Theme-Vorlagen sowie Links zu Tutorials und Dokumentationen, die Ihnen bei der Anpassung Ihrer neuen Website helfen.

Beginnen Sie mit Divi

4. Bezahlen Sie Ihre neue Website

Bevor wir mit dem Rest des Prozesses fortfahren, können Sie Ihre Live-Site ansehen, um Ihr brandneues Online-Shop-Design zu erkunden.

Hier sehen Sie alle Seiten und Vorlagen Ihrer Website, die automatisch generiert werden, einschließlich WooCommerce-Seiten und -Vorlagen.

Website-Seiten

Mit Divi Quick Sites generierte Online-Shop-Seiten und -Vorlagen

WooCommerce-Shop-, Produkt-, Warenkorb- und Checkout-Seitenvorlagen

Online-Shop-WooCommerce-Seiten und -Vorlagen, die mit Divi Quick Sites generiert wurden

Beginnen Sie mit Divi

5. WooCommerce konfigurieren und Produkte hinzufügen

Da WooCommerce bereits im Website-Generierungsprozess von Divi Quick Sites installiert wurde, können wir den WooCommerce-Setup-Assistenten verwenden, um den Prozess zu vereinfachen.

WooCommerce-Setup-Assistent

Nach der Aktivierung fordert WooCommerce Sie automatisch auf, den Einrichtungsassistenten zu starten. Hier führt Sie WooCommerce durch die wichtigsten Einrichtungsschritte für Ihren Shop. Um den Einrichtungsassistenten zu starten, navigieren Sie zum Abschnitt „WooCommerce“ und wählen Sie „Startseite“.

Divi Woocommerce

Der Einrichtungsassistent fordert Sie auf, Details zu Ihrem Shop einzugeben, z. B. Ihre Adresse und E-Mail.

Persönliche WooCommerce-Daten

Wählen Sie die Branche und Produktkategorien aus, die Ihr Geschäft am besten repräsentieren.

WooCommerce-Produktshop

Wählen Sie als Nächstes aus, welche Art von Produkten Sie in Ihren Shop aufnehmen möchten. Für einige Optionen (Mitgliedschaften, Buchungen usw.) ist die Installation zusätzlicher Plugins auf Ihrer Website erforderlich.

HINWEIS: Plugins gibt es sowohl in kostenpflichtigen als auch in kostenlosen Versionen. Entdecken Sie unsere empfohlenen Plugins für Mitgliedschaften, Buchungen und mehr, um Ihre E-Commerce-Site zu verbessern. Tools wie Memberpress oder Paid Memberships Pro können Ihnen beispielsweise beim Aufbau eines abonnementbasierten Shops mit mehreren Zahlungsoptionen helfen. Darüber hinaus können Sie mit Plugins wie Amelia eine Buchungsseite mit Funktionen wie Terminkalendern erstellen, damit Besucher Buchungen planen können.

WooCommerce-Produkte

Der Einrichtungsassistent wird Ihnen weitere Fragen zu Ihrem Shop stellen.

WooCommerce-Geschäftsziele

Wählen Sie alle zusätzlichen Plugins aus, die Sie möglicherweise benötigen. Sie können Jetpack und MailPoet ausprobieren, um festzustellen, ob sie Ihren Anforderungen entsprechen. Wenn Sie jedoch Steuern einziehen, Kreditkartenzahlungen abwickeln oder den Versand verwalten möchten, könnten diese kostenlosen Plugins von Vorteil sein.

woo Onboarding-Ablauf

An dieser Stelle können Sie den Fokus auf die zusätzlichen Einstellungen in WooCommerce verlagern.

WooCommerce-Einstellungen

Das Einrichten eines E-Commerce-Shops kann eine Herausforderung sein, aber WooCommerce vereinfacht den Prozess. Folgendes können Sie verwalten:

  • Allgemeine Einstellungen: Währung, Produkte und Checkout-Optionen.
  • Produkteinstellungen: Artikelanzeige und Bestandsverwaltung.
  • Versandeinstellungen: Versandarten und -kosten.
  • Zahlungseinstellungen: Zahlungsoptionen des Kunden.
  • Kontoeinstellungen: Benutzerregistrierungen und Datenschutzkontrollen.
  • E-Mail-Einstellungen: Kommunikationseinstellungen speichern.
  • Erweiterte Einstellungen: Benutzerdefinierte Konfigurationen für Ihren Shop.

Weitere Hilfe finden Sie in unserem WooCommerce-Einstellungsleitfaden, der Schritt-für-Schritt-Anleitungen für die Navigation auf diesen wichtigen Seiten enthält.

Produktkategorien hinzufügen

Kategorien erleichtern es Kunden, Artikel in Ihrem Geschäft zu finden. Wenn Sie beispielsweise Kleidung verkaufen, können Sie Kategorien wie Handtaschen, Stühle und Tische erstellen. Es empfiehlt sich, diese einzurichten, bevor Sie Produkte hinzufügen.

Um Kategorien zu erstellen, navigieren Sie in Ihrem Dashboard zu WooCommerce > Produkte und klicken Sie auf Kategorien. Sie funktionieren ähnlich wie WordPress-Beitragskategorien und -Tags. Füllen Sie alle erforderlichen Felder für Ihre Kategorie aus, bevor Sie sie Ihrem Shop hinzufügen.

Woocommerce-Produktkategorien

Wenn Platzhalterkategorien vorhanden sind, können Sie diese entweder bearbeiten oder löschen. Berücksichtigen Sie bei der Auswahl von Kategorien und Tags die intuitivsten und für Ihre Kunden am einfachsten verständlichen Kategorien.

Fügen Sie Produkte zu Ihrem WordPress-E-Commerce-Shop hinzu

Sie können Produkte einzeln hinzufügen oder gleichzeitig über eine CSV-Datei importieren.

Um Produkte einzeln hinzuzufügen, navigieren Sie zu Produkte > Neu hinzufügen .

Woocommerce Produkte hinzufügen

Geben Sie den Produktnamen ein.

Woocommerce-Produktname

Geben Sie eine Produktbeschreibung ein und laden Sie das Produktbild hoch.

Woocommerce-Produktbeschreibungsbild

Wählen Sie zunächst den Produkttyp aus, den Sie erstellen möchten. Bestimmen Sie dann den Preis für Ihren Artikel und passen Sie die Lagerbestände nach Bedarf an. Sie können auch Versanddetails für einzelne Produkte angeben. In der rechten Seitenleiste können Sie Ihrem Produkt Kategorien und Tags zuweisen.

Preiseinstellungen für Woocommerce-Produkte

Wenn Sie zufrieden sind, klicken Sie auf „Veröffentlichen“. Sie können Ihrem Shop so viele Produkte hinzufügen, wie Sie möchten.

Verwalten Sie Ihren Produktbestand mit WooCommerce und lesen Sie unseren umfassenden Leitfaden zum Einrichten des Versands in WooCommerce.

Richten Sie Zahlung und Versand ein

Die Bereitstellung vielfältiger Zahlungsoptionen ist für die Zufriedenheit der Kunden von entscheidender Bedeutung. WooCommerce unterstützt mehrere Gateways wie PayPal, Stripe und Banküberweisungen. In Kombination mit dem Builder von Divi und dem Woo-Checkout-Modul können Sie jedoch das Design Ihrer Checkout-Seite vollständig anpassen.

Mit den WooCommerce-Einstellungen können Sie die Zahlungsmethoden auswählen, die am besten zu Ihrem Unternehmen passen. Aktivieren Sie je nach Ihren Präferenzen Zahlungsmethoden wie Direktüberweisung, Nachnahme oder Scheckzahlung.

Bezahlung der Woocommerce-Einstellungen

Die Flexibilität von WooCommerce stellt sicher, dass Ihre Versandoptionen auf die Erwartungen der Kunden zugeschnitten sind. Hier sind die Schritte, die zum Fertigstellen Ihrer Versanddetails für Ihren Shop erforderlich sind:

  1. Gehen Sie zu WooCommerce > Einstellungen > Versand
  2. Definieren Sie Zonen basierend auf geografischen Regionen
  3. Weisen Sie jeder Zone bestimmte Versandmethoden zu, z. B. Pauschalpreis, kostenloser Versand oder Abholung vor Ort.

Woocommerce-Versandmethoden

6. Entwerfen und passen Sie Ihre E-Commerce-Website an

Da Ihre Starter-Site nun online ist, ist es an der Zeit, sie an Ihre Marke anzupassen. Anstatt Stunden damit zu verbringen, jedes Element einzeln anzupassen, können Sie Ihre Website mithilfe einer schnelleren und effektiveren Methode schnell und effizient anpassen.

Entwerfen Sie WooCommerce-Seiten

WooCommerce bietet eine Reihe wichtiger Seiten für Ihren Shop, die mit Divi einfach angepasst werden können. Dazu gehören:

  1. Die Shop-Seite, auf der alle Ihre Produkte angezeigt werden
  2. Die Warenkorbseite, auf der der Inhalt Ihres Warenkorbs angezeigt wird
  3. Die Checkout-Seite, auf der Kunden ihre Einkäufe abschließen können
  4. Die Seite „Mein Konto“ zum Verwalten von Benutzerkonten
  5. Zusätzliche Seiten, beispielsweise für Produktkategorien und Tags

Mit Divi können Sie mit dem Divi Builder jede Seite direkt bearbeiten oder mit dem Theme Builder benutzerdefinierte Vorlagen für diese Seiten erstellen.

Divi-Theme-Builder-Woocommerce-Seiten

Der Divi Theme Builder ist besonders hilfreich beim Erstellen von Vorlagen für Produktseiten, Kategorieseiten und andere Designelemente auf Ihrer Website.

Sie können beispielsweise eine kostenlose Produktseitenvorlage vom Blog herunterladen und auf den Theme Builder anwenden, um allen Ihren Produkten ein einheitliches, attraktives Layout zu verleihen. Alternativ können Sie Ihre Produktseitenvorlage von Grund auf neu gestalten.

Weitere Unterstützung finden Sie in den Anleitungen zum Erstellen einer Warenkorbseite, zum Konfigurieren einer Checkout-Seite und zur Verwendung von Divi mit WooCommerce-Seiten.

Beginnen Sie mit Divi

Bearbeiten Sie Divi Starter Site Theme Builder-Vorlagen

Jede Divi-Starter-Site enthält Theme Builder-Vorlagen, die das Layout wichtiger Abschnitte Ihrer Website verwalten, wie z. B. Kopf- und Fußzeilen und Blogbeiträge. Nachdem Sie Ihre Website eingerichtet haben, können Sie diese Vorlagen anzeigen, indem Sie Divi > Theme Builder besuchen.

Divi Theme Builder-Vorlagen

Sie können die Vorlagen jeder Starter-Site ändern, indem Sie das Stiftsymbol neben den Abschnitten „Globaler Kopf“, „Benutzerdefinierter Text“ oder „Globaler Fuß“ auswählen. Alle an der Kopf- oder Fußzeile vorgenommenen Änderungen gelten für alle Vorlagen. Um dies in Aktion zu sehen, klicken Sie auf das Stiftsymbol für die Standard-Website-Vorlage.

Sobald Sie die Vorlage öffnen, können Sie mithilfe der Menüeinstellungen des Visual Builders die Hintergrundfarbe der Kopfzeile ändern, ein Logo einfügen und Schriftarten und Farben anpassen. Sie können Divi-Module auch wie auf einer Webseite hinzufügen, entfernen und formatieren.

Globaler E-Commerce-Header

Der Vorteil der Verwendung von Vorlagen besteht darin, dass alle Anpassungen am Header (oder anderen Theme Builder-Vorlagen) automatisch auf Ihre gesamte Website übertragen werden.

Passen Sie globale Schriftarten und Farben an

Es ist ganz einfach, Ihre Starter-Site so zu personalisieren, dass sie zu Ihrer Marke passt. Es ist nicht erforderlich, jede Farbe oder Schriftart für jedes Element auf jeder Seite anzupassen. Die Website verfügt über vorkonfigurierte globale Farben und Schriftarten. Sie können diese globalen Einstellungen ändern, während Sie Elemente im Divi Builder bearbeiten, und alle Aktualisierungen werden automatisch auf die gesamte Site angewendet.

Um globale Schriftarten und Farben auf der Startseite der neuen Starter-Site zu ändern, klicken Sie im Frontend auf „Visual Builder aktivieren“.

E-Commerce ermöglicht den visuellen Builder

Klicken Sie auf das Modul, das Sie anpassen möchten. Wir werden auf unserer Homepage ein Textmodul anpassen, um die globalen Schriftarten zuerst zu priorisieren. Klicken Sie auf das Radsymbol, um die Registerkarten zum Ändern zu öffnen.

Divi-E-Commerce-Texteinstellungen

Die von Ihnen erstellte Starter-Site enthält voreingestellte globale Schriftarten, die beibehalten oder durch Ihre markenspezifischen Schriftarten ersetzt werden können. Mit dem Divi Builder können Sie die globalen Schriftarten ganz einfach anpassen. Navigieren Sie zur Registerkarte „Design“, scrollen Sie zum Abschnitt „Text“ und wählen Sie „Schriftart“.

Globale Divi-E-Commerce-Schriftarten

Sie können auch Ihre eigenen Schriftarten hochladen oder aus unserer Bibliothek auswählen, zu der auch Google-Schriftarten gehören.

Wir können die globalen Farben desselben Textmoduls priorisieren, in unserem Fall haben wir uns jedoch dafür entschieden, die globalen Farben des Schaltflächenmoduls anzupassen. Sie müssen die globalen Farbeinstellungen ändern, um Ihre Markenfarben anzupassen. Wie bei den globalen Schriftarten werden die vorhandenen globalen Farben von der E-Commerce-Startseite übernommen.

Klicken Sie auf das Radsymbol des Tastenmoduls, um loszulegen.

Einstellungen der Divi-E-Commerce-Schaltfläche

Scrollen Sie nach unten zum Abschnitt „Schaltfläche“ und passen Sie die Textfarbe der Schaltfläche an.

Textfarbe der Divi-E-Commerce-Schaltfläche

Wechseln Sie von der Registerkarte „Gespeichert“ zur Registerkarte „Global“, um die aktuellen globalen Farben anzuzeigen.

Globale Farben der Divi-E-Commerce-Schaltfläche

Um Änderungen vorzunehmen, klicken Sie auf jede Farbe und wählen Sie Ihre bevorzugte Option aus. Sie können auch Ihre Hex-Codes für benutzerdefinierte Farben eingeben. In unserem Fall haben wir die Textfarbe von Weiß auf Schwarz geändert.

Divi-E-Commerce-Schaltfläche: Farben anpassen

Ändern Sie auf die gleiche Weise alle Farben nach Bedarf. Um weitere Farben hinzuzufügen, klicken Sie einfach auf das Plus-Symbol neben der letzten globalen Farbe.

Beginnen Sie mit Divi

Bearbeiten Sie globale Voreinstellungen

Mit den globalen Voreinstellungen von Divi können Sie Stile in verschiedenen Divi-Modulen wiederverwenden. Betrachten Sie sie als Stilvorlagen, die auf Schaltflächen, Textmodule, Klappentexte und andere Elemente angewendet werden können. Durch das Erstellen einer globalen Voreinstellung für ein Modul, z. B. eine Schaltfläche, können Sie es als Standardstil festlegen oder verschiedene Voreinstellungen für verschiedene Schaltflächen auf Ihrer Site erstellen. Dies gewährleistet Konsistenz bei der Anwendung Ihrer bevorzugten Stile, sei es für Schaltflächen, Text oder andere häufig verwendete Module. Divi Starter Sites enthalten Voreinstellungen für alle in ihren Vorlagen verwendeten Module, sodass Sie normalerweise keine neuen erstellen müssen. Sie können diese vorhandenen Voreinstellungen jedoch problemlos anpassen, um sie an den Stil Ihrer Marke anzupassen.

Klicken Sie wie beim Bearbeiten der globalen Schriftarten und Farben zunächst im Frontend auf „Visual Builder aktivieren“.

Divi E-Commerce ermöglicht den visuellen Builder

Wie bereits erwähnt, verfügt jede Divi-Starter-Site über ihre eigenen Voreinstellungen. Um beispielsweise eine vorhandene Schaltflächenvoreinstellung auf einer Starter-Site zu ändern, klicken Sie auf den Dropdown-Pfeil neben dem Voreinstellungsabschnitt unter der Kopfzeile des Moduls. In unserem Fall ändern wir eine Schaltfläche im Deal-Bereich unserer E-Commerce-Startseite.

Dropdown-Menü der Divi-E-Commerce-Schaltfläche

Suchen Sie als Nächstes die Modulvoreinstellung, in unserem Fall beispielsweise „Online Store Tertiary Light“. Bewegen Sie den Mauszeiger über die Voreinstellung, um das Menü anzuzeigen, und klicken Sie dann auf das Stiftsymbol, um Änderungen vorzunehmen.

Bleistiftsymbol für die Divi-E-Commerce-Schaltfläche

Beim Ändern von Divi-Voreinstellungen ändert sich die Kopfzeile des Moduls von Lila zu Grau, was darauf hinweist, dass Designanpassungen vorgenommen werden.

Divi E-Commerce-Modul mit schwarzen Tasten

Nehmen Sie jederzeit die gewünschten Designänderungen vor und speichern Sie das Modul, indem Sie das grüne Häkchen auswählen. In diesem Fall haben wir die Farben der Schaltflächen von Orange auf Schwarz geändert.

Farbänderung der Divi-E-Commerce-Schaltfläche

Unten erscheint ein Bestätigungsdialogfeld, in dem Sie gefragt werden, ob Sie mit den Änderungen an der Voreinstellung fortfahren möchten. Klicken Sie auf „Ja“, um Ihre Anpassungen zu speichern.

Dialogfeld der Divi-E-Commerce-Schaltfläche

Die Kopfzeile des Moduls wird wieder lila. Drücken Sie ein letztes Mal die grüne Speichertaste, um die Voreinstellung abzuschließen.

Endgültige Änderungen im Divi-E-Commerce

Beginnen Sie mit Divi

7. Steigern Sie Ihre E-Commerce-Site mit Plugins und Integrationen

Wenn Sie sich auf E-Mail-Anmeldungen und das Teilen in sozialen Medien konzentrieren, kann Ihre E-Commerce-Website mehr Traffic anziehen und den Umsatz steigern. Divi bietet integrierte Optimierungstools und funktioniert reibungslos mit beliebten WordPress-Plugins für soziale Medien und E-Mail-Anmeldungen. Hier sind ein paar Tools, die Ihnen den Einstieg erleichtern.

E-Mail-Marketing

Der Aufbau einer E-Mail-Liste ist entscheidend, um mit Ihrer Zielgruppe in Verbindung zu bleiben und sie über die Aktualisierungen Ihres E-Commerce-Shops zu informieren. Das Bloom-Plugin von Elegant Themes ist ein hervorragendes Tool zum Entwerfen auffälliger E-Mail-Anmeldeformulare. Nach der Installation des Plugins können Sie Formulare an den Stil und die Anforderungen Ihrer Website anpassen. Bloom lässt sich außerdem in mehrere E-Mail-Marketingplattformen integrieren, sodass Sie Ihre Liste verwalten und die Kommunikation effizient automatisieren können.

Divi Bloom-Plugin

Holen Sie sich Bloom

Sozial

Mit dem Monarch-Plugin von Elegant Themes können Sie ganz einfach Social-Sharing-Buttons zu Ihrer Website hinzufügen. Richten Sie Monarch nach der Aktivierung so ein, dass diese Schaltflächen an prominenten Stellen wie der Kopf- und Fußzeile oder innerhalb Ihrer Beiträge positioniert werden. Dadurch werden Besucher dazu ermutigt, Ihre Inhalte zu teilen, wodurch die Präsenz Ihrer E-Commerce-Website in den sozialen Medien erhöht wird.

Divi Monarch-Plugin

Holen Sie sich Monarch

Produkte im Divi Marketplace

Divi-Marktplatz

Divi bietet einen lebendigen Marktplatz mit Plugins, Erweiterungen und untergeordneten Themen, die speziell zur Verbesserung Ihrer von Divi betriebenen E-Commerce-Website entwickelt wurden. Sie können diese erwerben und in Ihre Website integrieren.

Carousel for Divi ist beispielsweise ein beliebtes Erweiterungsdisplay, das meistverkaufte oder im Angebot befindliche Produkte auf optisch ansprechende Weise präsentiert. Es eignet sich perfekt, um die Aufmerksamkeit auf bestimmte Artikel zu lenken und den Umsatz anzukurbeln. Sie können es für 3,19 $ auf dem Marktplatz kaufen. Um es auszuprobieren, können Sie sich die Screenshots und Live-Demos ansehen.

Besuchen Sie den Divi-Marktplatz

Wichtige WordPress-Plugins

Jede WordPress-Site kann von bestimmten wichtigen Plugins stark profitieren. Hier sind einige Beispiele für sehr empfehlenswerte Plugins, die Sie mit WordPress verwenden können:

  • SEO-Plugins (wie Rank Math)
  • Backup-Plugins (wie UpdraftPlus)
  • Bildoptimierungs-Plugin (wie EWWW Image Optimizer)
  • Geschwindigkeitsoptimierungs-Plugins (wie WP Rocket)
  • Sicherheits-Plugins (wie Solid Security oder Sucuri)
  • Social-Media-Plugins
  • Marketing-Plugins

Abschluss

Im Jahr 2024 erfordert der Start einer erfolgreichen E-Commerce-Website mehr als nur Funktionalität; Es geht darum, Ihren Kunden ein nahtloses, ansprechendes Erlebnis zu bieten. Mit Divi können Sie einen optisch fesselnden, benutzerfreundlichen Shop gestalten, der die Identität Ihrer Marke widerspiegelt und gleichzeitig erstklassige Leistung bietet. Durch die Integration intelligenter Plugins und die Nutzung der leistungsstarken Anpassungsoptionen in Divi wird Ihre Website zu mehr als nur einer Storefront.

Möchten Sie Ihre erste E-Commerce-Website erstellen? Starten Sie mit Divi und steigern Sie Ihr E-Commerce-Geschäft. Sie können unsere kuratierte Tabelle mit Plugins und Tools erkunden, die sich für Ihre E-Commerce-Website als wertvoll erweisen können.

Erwähnte Produkte Startpreis Beschreibung
1 Siteground 2,99 $ pro Monat Hosting-Anbieter und Domain-Registrar Besuchen
2 Divi 89 $ pro Jahr Theme- und Seitenersteller Besuchen
3 Rang Mathe 78,96 $ pro Jahr SEO-Plugin Besuchen
4 Blühen 89 $ pro Jahr (Verfügbar mit einer Elegant Themes-Mitgliedschaft) E-Mail-Optin-Plugin Besuchen
5 Monarch 89 $ pro Jahr Social-Media-Plugin Besuchen
6 Karussell für Divi 3,19 $ Divi-Erweiterung Besuchen