So erstellen Sie einen fantastischen Online-Shop mit WooCommerce, Divi und Bluehost (Januar 2019)

Über 74 Millionen Websites hängen von der WordPress-Plattform ab, um ihre Blogs zu hosten, ihre Produkte zu verkaufen oder einfach nur ihre täglichen Gedanken für die Welt zu schreiben. Wenn Sie mit dem Erstellen Ihrer E-Commerce-Website beginnen, haben Sie sicherlich eine Menge Auswahlmöglichkeiten, und WordPress knüpft daran an. Welche der herausragenden E-Commerce-Plattformen wählen Sie? Planen Sie ein Thema, um Ihre Produkte zu verkaufen, oder gibt es jemanden, den Sie bezahlen können, um die Website von Grund auf neu zu erstellen? Heck, was planen Sie sogar, über Ihre E-Commerce-Website zu verkaufen? 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 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 für Sie zu berücksichtigen. Es kann für eine Standard-Business-Website verwendet werden, enthält aber auch Integrationen für E-Commerce-Verkäufe und schnelle Verkaufsprozesse. Lassen Sie uns lernen, wie man einen Online-Shop mit dem Divi WordPress Theme erstellt.

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 Domainnamen zu erhalten, aber ich bin der Meinung, dass Bluehost eine der sichersten und zuverlässigsten Optionen ist Bluehost-Bericht).

Was wirklich cool ist, ist das Bluehost bietet einen WordPress + WooCommerce Integrationsplan Das gibt Ihnen alles, was Sie brauchen, um online zu verkaufen.

Wie gehen Sie an?

Gehen Sie zum Bluehost-Seite, die über die Integration spricht, klicken Sie dann auf die Schaltfläche Erste Schritte jetzt.

Denken Sie daran, dass dieser Dienst bei $ 11.95 pro Monat startet und sehr ähnlich ist, wie Sie eine reguläre WordPress-Site auf einem Bluehost-Hosting-Account installieren würden.

Der Hauptunterschied ist, dass WooCommerce Ist bereits installiert. Außerdem erhalten Sie Folgendes:

  • Positive SSL-E-Commerce-Sicherheit
  • Eine dedizierte Unterstützungslinie
  • Mindestens 100 GB Website-Speicherplatz
  • Unmetrierte Bandbreite
  • 100 E-Mail-Konten
  • Kostenlose Domains
  • Eine dedizierte IP

woocommerce_and_wordpress

In der Vorwärtsbewegung können Sie den Plan wählen, für den Sie bezahlen möchten und auf die nächste Seite gehen.

wähle_ihr_plan

Danach können Sie neue Domainnamen ausprobieren, um herauszufinden, ob das, was Sie wollen, noch verfügbar ist. Sobald Sie einen verfügbaren Domainnamen gefunden haben, der zu Ihrer Marke passt, gehen Sie auf die nächste Seite.

Registrierung der BlueHost-Domain

Danach geben Sie alle Ihre persönlichen Informationen und Zahlungsdetails ein und entscheiden Sie, welche Art von jährlichem oder monatlichem Hosting-Plan Sie verwenden möchten. Je mehr Monate Sie sich von Anfang an verpflichten, desto günstiger wird es.

package_information

Sie können in der Regel einfach den gesamten zusätzlichen Junk-Speicher überspringen, es sei denn, Sie sind sehr daran interessiert, Ihre Website zu sichern oder für den Datenschutz zu bezahlen. In der Regel brauchen Sie das nicht oder können es später kostenlos bekommen. Danach können Sie Ihre Login-Daten für Ihren Bluehost-Account erstellen, der Sie dann zum CPanel bringt. Sobald Sie sich im CPanel eingeloggt haben, navigieren Sie zum Bereich Website-Builder, klicken Sie auf WordPress und gehen Sie durch den Prozess, um WordPress auf Ihrer Website zu erhalten.

BlueHost Website Builder

Dies dauert in der Regel nur fünf Minuten, da alles automatisiert ist und Sie nur einige Anmeldeinformationen eingeben müssen, um sich im Back-End Ihrer Site anzumelden. Nachdem alles eingerichtet ist, erhalten Sie den richtigen Domain-Namen, auf den Sie zugreifen können, wenn Sie die Dinge im Backend Ihrer Site ändern möchten.

Erstellen Sie Ihren Online-Shop mit Divi

Schritt 1

Beginnen Sie mit dem Produktseite für elegante Designs für das Divi WordPress Theme. Diese Seite bietet die Option für eine Theme-Demo und einen Quick-Download-Button. Elegant Themes verkauft seine Themen unter Verwendung einer jährlichen oder einmaligen Zahlungsstruktur, die für Entwickler mit mehreren Kunden-Websites oder Personen, die zahlreiche E-Commerce-Websites betreiben, angenehm ist. Sie können nicht wirklich nur ein Thema kaufen, aber 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.

Divi WordPress Thema

Schritt 2

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".

Wordpress neues Thema

Schritt 3

Klicken Sie auf die Schaltfläche Neu hinzufügen.

Wordpress neues Thema hinzufügen

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.

Wordpress-Thema hochladen

Schritt 4

Wenn du zur Divi Theme Dokumentationsseite 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. Das Divi-Thema ist vollständig kompatibel mit WooCommerce, so dass Sie alle Ihre Produkte daraus anzeigen können.

Was ist toll ist, dass die erste Bluehost-Anmeldung WooCommerce bereits auf Ihrer WordPress-Website installiert hat, so dass Sie sich keine Gedanken über die Installation oder Einrichtung machen müssen. Es sollte bereits in Ihrem Dashboard verfügbar sein.

Schritt 5

Die E-Commerce-Site ist bereits technisch eingerichtet. Wir möchten jedoch einige Produkte hinzufügen, damit sie wie eine E-Commerce-Site im Frontend aussehen. Gehen Sie zu Ihrem WordPress-Dashboard, klicken Sie unter WooCommerce auf die Registerkarte Produkte, und klicken Sie auf die Option Produkt hinzufügen.

WooCommerce fügt neues Produkt hinzu

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.

E-Commerce fügt neue Produktfelder hinzu

Schritt 7

Wenn Sie unterhalb des Beschreibungsbereichs nach unten scrollen, finden Sie alle möglichen WooCommerce-Funktionen, mit denen Sie spielen können. Fühlen Sie sich frei, Dinge wie SKU-Nummern, Inventar, Preise, Versand und Attribute zu ändern. Die Features sind viel zu groß für mich, um sie alle hier zu skizzieren, aber Sie können zu den WooCommerce Dokumentationsseite um alles zu verstehen, was Sie auf Ihrer E-Commerce-Site einrichten können.

WooCommerce-Funktionen

Schritt 8

Der springende Punkt davon ist zu Erstellen Sie eine Homepage oder eine reguläre Seite mit allen Ihren Produkten, wenn Nutzer auf Ihrer Website erscheinen. Daher sollten Sie auf der linken Seite Ihres WordPress-Dashboards zu Seiten> Neu hinzufügen gehen.

Wordpress neue Seite

Schritt 9

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.

Seitenerstellung WordPress

Schritt 10

Klicken Sie auf die Schaltfläche Volle Breite Kopfzeile.

Fügen Sie eine Kopfzeile hinzu

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.

Header-Anpassung

Schritt 12

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

WordPress Woocommerce Setup

Schritt 13

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

Twize diese Tasten herum

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.

Wordpress E-Commerce-Setup

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.

Wordpress E-Commerce-Setup

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.

Wordpress E-Commerce-Setup

Schritt 17

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.

Divi Bewertung: 5.0 - Überprüfung durch

Catalin Zorzini

Ich bin ein Webdesign-Blogger und habe dieses Projekt gestartet, nachdem ich ein paar Wochen damit verbracht habe, herauszufinden, wer das ist die beste E-Commerce-Plattform für mich. Überprüfen Sie meine aktuelle top 10 E-Commerce-Site-Builder.