So erstellen Sie einen fantastischen Online-Shop mit WooCommerce, Divi und SiteGround (2023)

Über 74 Millionen Websites sind auf die WordPress-Plattform angewiesen, um ihre Blogs zu hosten, ihre Produkte zu verkaufen oder ihre täglichen Gedanken für die Welt zu schreiben. Wenn Sie anfangen zu bauen Ihre E-Commerce-Website Sie müssen mit Sicherheit eine Menge Entscheidungen treffen, und WordPress knüpft daran an.

Welche der herausragenden E-Commerce-Plattformen Wirst du wählen? Planen Sie ein Thema für den Verkauf Ihrer Produkte oder gibt es jemanden, den Sie bezahlen können, um die Website von Grund auf neu zu erstellen? Was haben Sie überhaupt vor, um über Ihre E-Commerce-Website zu verkaufen?

Anmerkung des Herausgebers: Dieser Beitrag wurde ursprünglich am 15. Januar 2015 veröffentlicht und aus Gründen der Genauigkeit und Vollständigkeit vollständig überarbeitet und aktualisiert.

Es gibt Tausende bis Millionen von WordPress-Themes zur Auswahl, wenn Sie nach der Frontend- und Backend-Struktur suchen, um mit dem Online-Verkauf zu beginnen. Fast dasselbe mit Hosting (aber wir bevorzugen SiteGround or Bluehost).

Zu den besten Themen gehören schnelle und einfache E-Commerce-Management-Tools, mit denen Sie Produkte hochladen und Dinge wie Rabatte, Belohnungen, Schaltflächen und Produktseiten verwalten können. Ihr Thema ist auch das erste, was Nutzer sehen, wenn sie Ihre Website besuchen. Es führt sie durch den Prozess und trägt wirklich den Unterschied zwischen jemandem, der mit der Erfahrung zufrieden ist oder nicht.

Kurz gesagt, WordPress-Themen sind entscheidend, und die Divi WordPress-Theme von Elegant Themes ist eine ziemlich gut aussehende Option, die Sie in Betracht ziehen sollten. Es kann für eine Standard-Business-Website verwendet werden, enthält jedoch auch Integrationen für den E-Commerce-Verkauf und schnelle Verkaufsprozesse. Lassen Sie uns lernen, wie Sie mit dem einen Online-Shop erstellen Divi WordPress-Theme.

Holen Sie sich zuerst Ihre Domain und Ihr Hosting

????Der erste Schritt bei der Erstellung einer Website ist die Erfassung eines Hosting-Accounts, eines Domainnamens und die Installation von WordPress auf der Website. Divi ist nicht anders. Es gibt viele Möglichkeiten, Hosting- und Domain-Namen zu erhalten, aber ich persönlich denke SiteGround ist eine der sichersten und zuverlässigsten Optionen. (Weitere Informationen finden Sie in unserem umfassenden SiteGround Überprüfen).

Was wirklich cool ist, ist das SiteGround bietet eine spezialisierte verwaltet WooCommerce Hosting Servicepaket mit so ziemlich allem, was Sie für den Online-Verkauf benötigen. Innerhalb des Pakets können Sie sich entweder mit dem zufrieden geben StartUp Planen für Anfänger, GrowBig-Plan für wachsende Unternehmen oder GoGeek für etablierte WooCommerce Shops.

Jedes dieser Funktionen bietet erweiterte Funktionen zur Optimierung Ihrer WooCommerce Website zu einem vernünftigen Preis.

Das heißt, ein weiterer Hosting-Service, den wir sehr empfehlen würden Divi WooCommerce Geschäfte ist Bluehost. Obwohl die Funktionen hier nicht übereinstimmen SiteGroundSie bekommen immer noch WooCommerce-fokussiertes Hosting über das WordPress-E-Commerce-Paket. Die Pläne können bequem mit a umgehen Divi WooCommerce speichern, aber leider erhalten Sie keine verwalteten Dienste.

👉 Lassen Sie uns der Klarheit halber fortfahren SiteGround...

Wie fangen Sie an?

Gehen Sie zum SiteGround Managed WooCommerce Hosting Seite, wählen Sie einen idealen Plan und klicken Sie auf Plan abrufen.

Meiner Meinung nach ist die GoGeek-Plan scheint die am besten geeignete Option zu sein, da sie unbegrenzt unterstützt WooCommerce Websites mit erweiterten E-Commerce-Funktionen. Neben mehr Serverleistung erhalten Sie unter anderem Prioritätsunterstützung, WordPress-Staging, On-Demand-Backup und Super-Chacher-Ressourcen sowie kostenlose Standortübertragungen und Cloudflare CDN.

👉 In Bezug auf Ressourceneinsparungen berücksichtigt dieser Plan Folgendes:

• 6GB-Postfach
• 1 GB Datenbankspeicher
• SSD-Speicher
• Unbemessene Datenübertragung
• 30GB Speicherplatz
• Bis zu 100,000 monatliche Besuche

Beachten Sie, dass Dieser Service beginnt bei $ 11.95 pro Monat, und es ist sehr ähnlich, wie Sie eine reguläre WordPress-Site auf einem BlueHost-Hosting-Konto installieren würden.

Aber denken Sie daran, das ist ein Sonderpreis für Anfänger. Erwarten Sie, dass es bei zukünftigen Verlängerungen auf 34.95 US-Dollar ansteigt. Dies ist immer noch eine angemessene Gebühr, wenn Sie alle Funktionen berücksichtigen, die Sie auf lange Sicht erhalten.

Nachdem Sie Ihren bevorzugten Plan ausgewählt haben, SiteGround Sie werden auf die Domain-Registrierungsseite weitergeleitet. Wenn Sie bereits eine Domain besitzen, wählen Sie die zweite Option und geben Sie deren Details ein. Andernfalls können Sie für 15.95 $ pro Jahr einen neuen Domainnamen registrieren.

Als Nächstes wählen Sie im letzten Schritt Ihre bevorzugten Hosting-Optionen aus und geben Ihre Zahlungsinformationen und persönlichen Daten ein, bevor Sie das Konto erstellen.

Natürlich sind dies grundlegende Dinge, die Sie schon oft behandelt haben. Sie sollten also keine Schwierigkeiten haben, Ihre Telefonnummer, Ihr Land, Ihren Namen, Ihre E-Mail-Adresse, Ihr Kontopasswort usw. einzugeben.

Für den Zahlungsteil müssen Sie Ihre Kreditkartendaten eingeben. Sie können entweder fortfahren Entdecken Sie, MasterCard or Visum.

Interessanterweise SiteGround listet PayPal trotz seiner wachsenden Beliebtheit unter nicht auf WooCommerce Kaufleute. Zum Glück stellt sich heraus, dass sie PayPal-Zahlungen akzeptieren können, wenn auch indirekt.

Wenn dies Ihr bevorzugter Modus ist, lassen Sie einfach die Felder leer und kontaktieren Sie SiteGroundVertriebsmitarbeiter über das Live-Chat-Tool. Sie helfen Ihnen dabei, den Vorgang über PayPal abzuschließen.

Der letzte Abschnitt enthält mehrere Optionen für Ihren Hosting-Service, einschließlich Ihres bevorzugten Rechenzentrums sowie der Abonnementdauer.

Nun, um die Datenübertragungsentfernung zwischen zu minimieren SitegroundServer und Ihre WooCommerce Wählen Sie für die Besucher der Website den Standort des Rechenzentrums aus, der Ihrem Zielmarktgebiet am nächsten liegt.

Wählen Sie dann zusätzliche Add-On-Services aus, die Sie in Ihr Paket aufnehmen möchten, und voila! Das ist alles, was Sie brauchen, um eine einzurichten Siteground Konto.

Sobald Sie fertig sind, melden Sie sich in Ihrem Konto an und gehen Sie direkt zu Ihrem cPanel-Bereich. Sie finden ein standardmäßiges WordPress-Autoinstallationsprogramm. Wählen Sie es aus, geben Sie Ihre WordPress-Anmeldedaten ein und klicken Sie auf die Schaltfläche "Installieren".

Nun, Sie werden feststellen, dass der WordPress-Installationsprozess einige Sekunden dauert, da alles automatisiert ist. Und nachdem alles eingerichtet ist, SiteGround Sie erhalten den richtigen Domainnamen, auf den Sie zugreifen können, wenn Sie Änderungen am Backend Ihrer Website vornehmen möchten.

Erstellen Sie Ihren Online-Shop mit Divi

Was ist Divi?

Ok, wenn Sie es noch nicht ausprobiert haben, haben Sie bestimmt schon davon gehört. Divi ist kein gewöhnlicher WooCommerce Thema. Tatsächlich ist es eines der beliebtesten WordPress-Themes für elegante Themes. Und interessanterweise Divi is Elegantes Thema's Flaggschiff-Produkt.

Was ist das Besondere an diesem Thema? Und gibt es etwas Außergewöhnliches? Divi WooCommerce?

Nun, im Gegensatz zu typischen WordPress-Themes, Divi ist eher ein umfassendes Paket. Das heißt, es kombiniert Standard-Themenfunktionen mit zusätzlichen Funktionen, die sich als nützlich erweisen Divi WooCommerce Shops.

Versteh mich aber nicht falsch. Obwohl Divi WooCommerce Unterstützung steht hier im Vordergrund, das Thema kann noch viel mehr. Im Wesentlichen, Divi kann dank seiner breiten Palette an Website-Layouts nahtlos in jede Art von Website integriert werden. Nicht nur E-Commerce.

Dann, um das Ganze abzurunden, Divi wird mit einem eigenen intuitiven WordPress-Seitenersteller geliefert plugin. Sie können es verwenden, um Ihre frei anzupassen Divi WooCommerce überhaupt ohne Codierung speichern.

In der Tat Divi wurde für Anfänger entwickelt. Sie können also erwarten, ein ordentliches Bedienfeld zu finden, das fast keine Lernkurve aufweist. Es dauert nur wenige Minuten, um das Ganze in den Griff zu bekommen Divi Ökosystem, einrichten und anpassen Divi WooCommerce Layouts.

👉 Am Ende werden Sie also in der Lage sein, Kapital zu schlagen Divi'S:

• Eine Reihe anpassbarer Layouts für jede Art von WordPress-Website, einschließlich WooCommerce Online-Shops.
• Einfach zu verwendender Page Builder, der eine Vielzahl von Website-Elementen und Gestaltungsmöglichkeiten bietet.
• Flexibler Anpassungsprozess ohne jegliche Codierung. Selbst Anfänger können sich bequem einrichten und voll funktionsfähig optimieren Divi WooCommerce Shops.
• Einfache WordPress-Integration. Divi ist eines der wenigen externen WordPress-Themes, die nahtlos und ohne komplexe Änderungen installiert werden können.
• E-Commerce-optimiert WooCommerce Templates.

Divi Drag & Drop-Seitenersteller

Wie wir gesagt haben, Divi kommt in zwei verschiedenen Geschmacksrichtungen. Wenn Sie für die Mitgliedschaft am bezahlen Elegante Themen, Sie finden den Standard Divi Thema auf dem Armaturenbrett, begleitet von der Divi WordPress-Seitenersteller plugin.

Es ist jedoch erwähnenswert, dass dieser Builder nicht ausschließlich an die gebunden ist Divi Thema. Es kommt als zusätzliches plugin zu jedem einzelnen Thema, das von Elegant Themes erworben wurde.

Das sagte der Divi WordPress Page Builder ist ein Drag-and-Drop-Editor mit erweiterten Anpassungsfunktionen. Sie können Elemente, Spalten, Zeilen und Module ohne Programmiererfahrung verschieben und definieren. Mit anderen Worten, es ist der Typ des Builders a Divi WooCommerce Anfänger würden hoffen zu bekommen.

Aber machen Sie keinen Fehler. Obwohl die Divi Der Page Builder richtet sich an Anfänger und ist ein Editor, der auch erfahrenen Entwicklern hilft. Sie können ihre visuellen Funktionen systematisch mit CSS-Steuerelementen kombinieren, um ihre Funktionen zu verbessern Divi WooCommerce Websites auf die nächste Ebene.

Kommen Sie es jedoch zu denken, Sie benötigen keinen Entwickler, um alle Elemente in Ihrem zu entwerfen Divi WooCommerce Shop an. Sie können sich allein auf visuelle Funktionen verlassen.

Und weisst du was?

Divi Sogar Versuche, den gesamten Prozess durch Beschriften und Farbcodieren der Layoutmodule zu vereinfachen.

Apropos, eine weitere bemerkenswerte Bestimmung ist hier DiviVereinfachung des Layoutanpassungsprozesses. Wenn Sie beispielsweise einen neuen Abschnitt einführen möchten, sollte ein einziger Klick ausreichen. Duplizieren, Entfernen und Einfügen von Modulen für Ihre Divi WooCommerce Mit store können Sie nur wenige Mausklicks ausführen.

Unterdessen DiviIm Bearbeitungsfenster werden die Layoutänderungen Ihrer Site in Echtzeit angezeigt. Sie können jede einzelne Anpassung visuell verfolgen und sehen, wie sich dies auf das allgemeine Outlook-Design Ihres Geräts auswirkt Divi WooCommerce zu speichern.

Vorgefertigt Divi WooCommerce Website-Layouts

Um Sie vor dem mühsam anspruchsvollen Prozess zu bewahren, eine Website von Grund auf neu zu erstellen, müssen Sie die Divi WordPress Theme enthält eine Vielzahl vordefinierter Site-Vorlagen. Und da Sie möglicherweise unterschiedliche Layoutoptionen für dieselbe Vorlage benötigen, Divi bietet seine Website-Designs als umfassende Pakete an. Folglich erhalten Sie unterschiedliche Vorlagenlayouts und -farben.

Genauer gesagt, Divi bietet ungefähr 7-8 verschiedene vorgefertigte Layouts für jedes einzelne Website-Paket. In Anbetracht der Tatsache, dass jedes Layout vollständig erstellt wurde, können Sie die Layouts problemlos übernehmen, ohne die zugrunde liegende Struktur umfassend zu überarbeiten. Sie nur ein paar Änderungen hier und da.

Finden Sie jetzt eine perfekte für Sie WooCommerce Im Online-Shop scrollen Sie einfach durch die verschiedenen Website-Kategorien auf der Divi Thema. Alternativ können Sie mithilfe von Schlüsselwörtern alle Optionen gleichzeitig durchsuchen.

Alles in allem dauert es nicht lange, einen geeigneten zu finden Divi Online-Shop-Layout. Sie müssen es nur integrieren WooCommerceund Sie sind auf dem Weg, eine attraktive WordPress-E-Commerce-Website einzurichten.

Wenn Sie fortfahren, werden Sie feststellen, dass dies besonders herausragend ist Divi konzentriert sich nicht nur auf das Aussehen. Das WooCommerce Layouts, die mit dem kommen Divi Das Thema wurde auch mit Blick auf die Funktionalität erstellt.

Zusätzlich zu typischen Store-Seiten wie Kasse, Produkten und Warenkorb Divi Enthält standardmäßig E-Commerce-Module. Insbesondere erhalten Sie Abschnitte wie vorgestellte Produkte, Verkaufsartikel und vieles mehr.

Is Divi Passend für WooCommerce?

Alles in Betracht gezogen, Divi wird immer beliebter, da es sich im Grunde genommen um eine All-in-One-Lösung für WordPress-Themen handelt.

Kombiniert die Divi Page Builder und Divi Thema Das Angebot bietet so ziemlich alles, was Sie zum Einrichten einer WordPress-Site benötigen. Und dazu gehört auch eine voll funktionsfähige WooCommerce Speichern Sie mit allen wichtigen E-Commerce-Funktionen.

👉 In einer Nussschale, Divi ist eine Option, die es wert ist, für Sie in Betracht gezogen zu werden WooCommerce Website, weil:

• Sie können anpassen, Ihre WooCommerce Website über einen visuellen Drag-and-Drop-Editor.
• Divi Mit dieser Option können Sie Ihre Optimierungen als globale Elemente in allen Layouts speichern.
• Es kommt mit über 20 gut gestalteten vorgefertigten Website-Layouts.
• Sie können die Layouts problemlos exportieren und anschließend auf anderen Websites verwenden.
• Sie können Ihre gestalten WooCommerce Speichern mit mehreren Spalten, Zeilen und Inhaltselementen.
• Alle WooCommerce Layouts wurden für mobile Geräte optimiert.
• Genau wie MS Word, Das Bearbeiten von Textinhalten ist so einfach wie das Klicken und das Eingeben.
• Der gesamte Anpassungsprozess der Website wird in Echtzeit nachverfolgt und bietet somit eine Live-Vorschau aller Designänderungen.
• WooCommerce Layouts werden mit primären Online-Shop-Seiten und Modulen geliefert.

Schritt 1: Melden Sie sich mit eleganten Themen an, um Zugriff zu erhalten Divi

Beginnen Sie mit dem Produktseite für elegante Designs für die Divi WordPress-Theme. Diese Seite bietet die Option für eine Themendemo und einen Schnelldownload-Button. Elegant Themes verkauft seine Themen über eine jährliche oder einmalige Zahlungsstruktur, was für Entwickler mit mehreren Kundenstandorten oder für Personen, die zahlreiche E-Commerce-Websites betreiben, hilfreich ist. Man kann nicht wirklich nur ein Thema kaufen, sondern das Persönlicher Plan für $ 67 pro Jahr ist vergleichbar mit dem, was Sie für ein reguläres Thema bezahlen könnten, und Sie können die jährlichen Zahlungen einstellen, wenn Sie den Support nicht mehr benötigen. Fühlen Sie sich frei, mit dem Thema herumzuspielen, bevor Sie sich zur Zahlung verpflichten.

Schritt 2: Installieren Divi auf Ihrer WordPress-Site

Sobald Sie sich angemeldet haben, klicken Sie auf den Download-Button für das Thema. Dadurch wird das Thema als Zip-Datei auf Ihrem Computer gespeichert. Wechseln Sie zum Tab "Darstellung" im Backend Ihrer WordPress-Site und klicken Sie auf die Option "Designs".

Schritt 3: Klicken Sie auf die Schaltfläche Add New

Klicken Sie auf die Schaltfläche Thema hochladen. Suchen und laden Sie die ZIP-Datei des Designs hoch. Gehen Sie den Prozess durch, um das Design vollständig zu aktivieren, und dann sollten Sie in der Lage sein, das Design im Frontend Ihrer Website zu sehen.

Schritt 4: Richten Sie Ihre ein WooCommerce Store

Wenn du zur Divi Themendokumentationsseite Sie finden so ziemlich jedes Werkzeug und jede Funktion, mit der Sie an dem Thema arbeiten können, aber wir konzentrieren uns hauptsächlich auf die Einrichtung einer E-Commerce-Website. Die Divi Thema ist kompatibel mit WooCommerce So können Sie alle Ihre Produkte davon anzeigen.

Was großartig ist, ist die Initiale SiteGround Anmeldung bereits installiert WooCommerce auf Ihrer WordPress-Website, sodass Sie sich keine Gedanken über die Installation oder Einrichtung machen müssen. Es sollte bereits in Ihrem Dashboard verfügbar sein.

Schritt 5: Fügen Sie Ihre ersten Produkte hinzu WooCommerce

Sie haben die E-Commerce-Site technisch bereits vollständig eingerichtet, aber wir möchten tatsächlich einige Produkte hinzufügen, damit sie wie eine E-Commerce-Site im Frontend aussieht. Gehen Sie zu Ihrem WordPress-Dashboard und klicken Sie unter auf die Registerkarte Produkte WooCommerce und klicken Sie auf den Artikel Produkt hinzufügen.

Schritt 6

Dies bringt eine neue Produktseite zum Ausfüllen. Es sieht einem WordPress-Seiteneditor sehr ähnlich, außer dass Sie einen Produktnamen, eine Beschreibung und ein vorgestellten Bild hinzufügen können, damit die Leute sehen können, wie das Produkt auf Ihrer Website aussieht.

Schritt 7: Erkunden Sie die WooCommerce Eigenschaften

Wenn Sie unter dem Beschreibungsbereich nach unten scrollen, finden Sie alles Mögliche WooCommerce Funktion zum Herumspielen. Fühlen Sie sich frei, Dinge wie Artikelnummern, Inventar, Preise, Versand und Attribute zu ändern. Die Funktionen sind viel zu umfangreich, als dass ich sie hier beschreiben könnte, aber Sie können zu den gehen WooCommerce Dokumentationsseite um alles zu verstehen, was Sie auf Ihrer E-Commerce-Site einrichten können.

Schritt 8: Homepage erstellen

Der springende Punkt davon ist zu Erstellen Sie eine Homepage oder eine reguläre Seite, auf der alle Ihre Produkte aufgeführt sind, wenn Personen auf Ihrer Website erscheinen. Gehen Sie daher auf der linken Seite Ihres WordPress-Dashboards zu Seiten> Neu hinzufügen.

Schritt 9: Fügen Sie einen Titel für Ihre Divi Seite

Erstellen Sie einen Titel für Ihre Seite. Klicken Sie oben auf die Schaltfläche Seitengenerator verwenden, und tippen Sie auf den Bereich Module einfügen, um eine Kopfzeile mit voller Breite einzufügen. Sie müssen keinen Header mit voller Breite auswählen, aber wir gehen zu diesem Tutorial.

Schritt 10

Klicken Sie auf die Schaltfläche Volle Breite Kopfzeile.

Schritt 11

Geben Sie die Details für Ihren Site-Titel, Untertitel und Textfarbe ein. Sie können sogar das Admin-Label ändern, das hauptsächlich für Ihre eigene Referenz gedacht ist. Klicken Sie auf die Schaltfläche Speichern, wenn Sie fertig sind.

Schritt 12

Tippen Sie auf die drei Balken links neben dem Kopfzeilenmodul für die volle Breite, um weitere Einstellungen zu ändern.

Schritt 13

Hier können Sie der Kopfzeile eine schöne Hintergrundfarbe geben und sogar ein Video für Ihr Unternehmen einfügen.

Schritt 14

Jetzt, da der Header vollständig ist, können wir das E-Commerce-Modul hinzufügen, indem Sie auf den Bereich Spalten einfügen klicken.

Schritt 15

Wählen Sie, wie viele Spalten Sie möchten, und klicken Sie dann auf die Option Module einfügen. Wählen Sie den Shop-Button am unteren Rand.

Schritt 16

Fühlen Sie sich frei, wie Sie Ihre Produkte anzeigen möchten. Vielleicht möchten Sie also Ihre aktuellen Produkte zusammen mit 12-Elementen auf der Seite anzeigen, ein paar Spalten und wie Sie sie bestellen möchten. Klicken Sie auf die Schaltfläche Speichern.

Schritt 17: Vorschau und Veröffentlichung

Sobald dies abgeschlossen ist, können Sie auf die Schaltfläche Vorschau oder Veröffentlichen klicken, um Änderungen am Frontend anzuzeigen. Wie Sie sehen können, werden die Produkte gut angezeigt und Sie können jederzeit Ihre Einstellungen für Produkte oder Storefront im WordPress-Backend ändern. Herzliche Glückwünsche!

Wenn Sie Fragen zum Einrichten des Divi WordPress Thema, lass es uns bitte im Kommentarbereich unten wissen.

Fazit

Und das ist alles, was Sie brauchen, um Ihre zu bekommen Divi WooCommerce Online-Shop mit einem SiteGround Hosting-Konto.

Wenn Sie vorwärts gehen, können Sie sicher sein, dass SiteGround wird alle kritischen technischen Dinge wie WordPress-Updates und behandeln WooCommerce Sicherheit. Das ist der grundlegende Unterschied zwischen verwaltet WooCommerce Hosting- und reguläre Shared-Hosting-Lösungen. Daher haben Sie die dringend benötigte Zeit und den Raum, um sich auf Ihre zu konzentrieren WooCommerce Geschäftsleitung.

Und wie wir bereits gesehen haben, sollte das mit dem ein Kinderspiel sein Divi Thema. Sie können jederzeit auf Ihre zugreifen Divi WooCommerce Layout aus Ihrem WordPress-Backend, um es weiter anzupassen. Wenn Sie möchten, können Sie sogar das gesamte Design ändern, indem Sie zu einem anderen Layout wechseln, das eine WooCommerce speichern auch. Es ist deine Entscheidung.

Wenn Sie Fragen zum Einrichten des Divi WordPress-Theme, bitte teilen Sie uns dies im Kommentarbereich unten mit.