So erstellen Sie eine Online-E-Commerce-Shop-Website mit WordPress

E-Commerce ist brandaktuell, weil es unglaublich einfach ist, 6 Zahlen pro Monat zu verdienen, ohne ein stationäres Geschäft mit wahnsinnig hohen Gemeinkosten aufzubauen.


Das Problem für viele sind jedoch die teuren monatlichen Gebühren der meisten E-Commerce-Plattformen wie Shopify. Wenn Sie gerade erst anfangen, möchten Sie eine günstigere Lösung, damit Sie mehr für Dinge wie Marketing und Werbung ausgeben können.

Die gute Nachricht ist, dass Sie bei Shopify keine hohen monatlichen Gebühren zahlen müssen, um Produkte online verkaufen zu können. Wenn Sie nach einer Shopify-Alternative oder einer eBay-Alternative suchen, erhalten Sie in diesem Schritt-für-Schritt-Tutorial kostenlos einen fantastischen Online-Shop.

Alles, was Sie brauchen, ist ein Webhosting-Konto und ein wenig Aufwand, und Sie können in kürzester Zeit eine E-Commerce-Website erstellen.


Lass uns anfangen!

Dinge, die du brauchst:

  • Hosting. Ich empfehle SiteGround.
  • EIN Domainname.
  • WordPress Theme. Für dieses Tutorial verwenden wir das kostenlose Astra-Theme.
  • WordPress Page Builder. Dafür verwenden wir den kostenlosen Elementor-Seitenersteller.
  • WooCommerce, das beste E-Commerce WordPress Plugin.

Schritt 1. Kaufen Sie ein Webhosting und einen Domainnamen.

Wenn Sie mit diesem gesamten Website-Aufbau noch nicht vertraut sind, lassen Sie mich zunächst erläutern, was ein Webhosting und ein Domain-Name sind und warum Sie sie benötigen.

Was ist ein Hosting- und Domain-Name??

Ein Webhosting ist ein Ort im Internet, an dem Ihre Website leben wird. Es ist wie in einem physischen Haus, in dem Ihre Sachen gefunden werden können. Der Domainname ist dagegen die Adresse Ihrer Website. Es ist wie Ihre Adresse, die Sie den Leuten geben, damit sie Sie zu Hause besuchen können. “Facebook.com”, “Google.com” und “WordPress.com” sind Beispiele für Domainnamen.

Sie können einen Domainnamen auf nahezu allen Websites kaufen, auf denen Domainnamen verkauft werden. Sie müssen nur nach dem besten Preis suchen. Für das Hosting von Websites ist es jedoch absolut wichtig, das Hosting nur von einem zuverlässigen Unternehmen zu erhalten. Denn wenn Ihr Hosting langsam oder unzuverlässig ist, leidet die Geschwindigkeit und Verfügbarkeit Ihrer Website und dies schadet letztendlich Ihrem E-Commerce-Geschäft.

Siteground, mein bevorzugter Webhosting-Dienst

Sie können jeden hochwertigen Webhosting-Service verwenden, um eine E-Commerce-Website zu erstellen. In diesem Lernprogramm wird jedoch Siteground verwendet.

SiteGround ist ein sehr empfehlenswerter Online-Webhost, da er sich an WordPress-Benutzer richtet und dennoch erschwingliche Preise bietet. Sie sind bekannt für ihre schnelle Leistung und ebenso schnelle Unterstützung.

Hier sind die wichtigsten Funktionen von SiteGround:

  • Kostenloses SSL-Zertifikat
  • SCHNELLER sachkundiger Support
  • WordPress-Staging-Umgebung
  • Kostenlose Website-Migrationen
  • 30 Tage Backups

SiteGround ist eine gute Wahl für Ihre Webhosting-Anforderungen. Sie bedienen WordPress-Websites und bieten weniger Ressourcen als ihre Konkurrenten, aber eine höhere Zuverlässigkeit.

Ich habe mit ihnen einen tollen Deal gemacht, um jedem, der sich mit anmeldet, einen Rabatt von 70% zu gewähren dieser Link. Also, wenn Sie Geld für Ihr Hosting sparen möchten, Klicken Sie auf diesen Link und kaufen Sie jetzt Ihr Hosting.

Sobald Sie auf ihrer Homepage landen, sehen Sie vier verschiedene Arten von Hosting:

Wählen Sie einen Siteground-Plan

Wählen Sie WordPress-Hosting und klicken Sie auf Loslegen. Sie sehen dann drei Preispläne:

Siteground WordPress Hosting Preise

Wählen Sie eine nach Ihren Bedürfnissen und Ihrem Budget. Sie können auch ihre überprüfen Vergleich jedes Hosting-Plans um eine bessere Vorstellung davon zu bekommen, welcher Plan Ihren Anforderungen am besten entspricht.

Wenn Sie sich für einen Plan entschieden haben, klicken Sie auf Plan erhalten. Sie werden dann zu einer Seite weitergeleitet, auf der Sie eine Domain auswählen müssen. Wenn Sie bereits einen Domainnamen gekauft haben, wählen Sie “Ich habe bereits eine Domain”. Wenn Sie jedoch keine haben, wählen Sie “Neue Domain registrieren”, um eine Domain direkt in Siteground zu kaufen.

Wählen Sie eine Domain

Wenn Sie einen Domainnamen haben, den Sie mögen und der verfügbar ist, klicken Sie auf Vorgehen. Der nächste Schritt ist die Angabe Ihrer persönlichen Daten und Rechnungsdaten, um den Kauf abzuschließen. Geben Sie Ihre Daten genau ein und klicken Sie auf Zahlen Sie jetzt. Sie haben jetzt ein zuverlässiges Webhosting und einen Domainnamen.

Schritt zwei. Installieren Sie WordPress.

WordPress ist ein kostenloses Open-Source-Tool, mit dem Sie Websites erstellen können, auch wenn Sie keine Ahnung von Codierung haben. Es ist das bislang einfachste und leistungsstärkste Content-Management-System für Websites. Es gibt eine Menge Dinge, die ich an WordPress liebe. Wenn Sie mehr von meinen Tutorials lesen oder meine Videos ansehen, erfahren Sie mehr darüber, warum WordPress meiner Meinung nach das beste Tool zum Erstellen von Websites für Nicht-Techniker ist.

Siteground wird mit einer Ein-Klick-WordPress-Installation geliefert, die die ganze harte Arbeit der Installation und Einrichtung von WordPress für Sie erledigt.

Sobald Sie Ihren Hosting-Kauf abgeschlossen haben, wird ein Bildschirm mit einem Link angezeigt “Weiter zum Kundenbereich”. Klicken Sie darauf und Sie werden zu einer Seite weitergeleitet, auf der Sie Ihr neues Hosting-Konto einrichten können. Unter Richten Sie Ihre Website ein, wählen Starten Sie eine neue Website.

Sie sehen dann eine Liste der Software, die Sie installieren können. Wählen WordPress.

Installieren Sie WordPress

Anschließend müssen Sie die Administrator-Anmeldedaten für Ihre neue Website wie Ihre E-Mail-Adresse, Ihren Benutzernamen und Ihr Passwort angeben. Stellen Sie sicher, dass Sie diese Daten sichern, da Sie diese verwenden, um sich auf Ihrer Website anzumelden.

Klicken Sie anschließend auf Bestätigen > Schließen Sie das Setup ab. Und Sie haben jetzt eine live gehostete WordPress-Website.

Um Ihre Website anzupassen, müssen Sie sich beim WordPress-Backend anmelden. Gehen Sie dazu zu Ihrem Siteground-Dashboard und wechseln Sie zu Meine Accounts Tab. Drücke den Installation Registerkarte, und hier sehen Sie den Domainnamen, den Sie registriert haben. Dahinter ist ein Grün Gehen Sie zum Admin-Portal Taste. Klicken Sie auf diese Schaltfläche, um zu Ihrer WordPress-Anmeldeseite zu gelangen.

Gehen Sie zum WordPress Admin Dashboard

WordPress-Anmeldeseiten haben normalerweise die folgenden Formate: yourdomain.com/wp-admin und yourdomain.com/wp-login. Merken Sie sich die URL Ihrer Anmeldeseite, damit Sie beim nächsten Mal darauf zugreifen können, indem Sie die URL direkt in Ihre Adressleiste eingeben und sich nicht mehr bei Siteground anmelden müssen.

Die WordPress-Anmeldeseite sieht folgendermaßen aus:

WordPress-Anmeldeseite

Geben Sie hier Ihren Benutzernamen und Ihr Passwort ein, um sich zum ersten Mal auf Ihrer Website anzumelden.

Schritt 3. Installieren Sie Astra Theme und Astra Sites.

Das Astra-Thema ist das Thema, mit dem wir unsere E-Commerce-Website so schnell wie möglich großartig und professionell gestalten. Sie können auch andere Themen verwenden, wenn Sie dies bevorzugen. In diesem Lernprogramm wird jedoch das Astra-Thema verwendet.

Astra ist ein kostenloses WordPress-Theme mit ausgezeichneter Geschwindigkeit und Einfachheit. Koppeln Sie es mit Astra Sites (kostenloses Plugin) und jeder kann mit wenigen Mausklicks eine schöne Website haben. Es gibt auch eine Pro-Version, die Astra zum perfekten Thema macht.

Hier sind die Funktionen, die ich an Astra am meisten liebe:

  • Eines der schnellsten verfügbaren Themen
  • Über 100 Starter-Sites (die meisten sind 100% kostenlos)
  • Flexible Mega-Menüfunktion
  • Leistungsstarkes Zusatzpaket
  • Umfangreiche WooCommerce-Unterstützung

Astra Theme ist eine ausgezeichnete Wahl für jedes WordPress-Webdesign-Projekt. Tatsächlich ist es das Thema, das ich auf dieser Website und in allen meinen Website-Projekten verwende.

Ich habe volles Vertrauen in den Entwickler und war sehr beeindruckt davon, wie gut das Thema codiert ist.

Darüber hinaus ist das Thema aufgrund der Sorgfalt und des Gedankens, die damit verbunden sind, so einfach zu verwenden. In den meisten Situationen konfiguriert es sich selbst basierend auf den von Ihnen verwendeten Tools.

Um Astra zu installieren, gehen Sie zu Aussehen > Thema > Neue hinzufügen. Suchen Sie nach Astra, klicken Sie auf Installieren, und aktivieren Sie.

Installieren des Astra-Themas

Eine andere Sache, die ich Astra liebe, ist die Tatsache, dass es ein Plugin namens hat Astra Starter Sites mit einer Bibliothek vorgefertigter kostenloser und Premium-Vorlagen. Sie können diese Vorlagen mit nur wenigen Klicks für Ihre eigene Website verwenden. Wir verwenden eine Astra-Site-Vorlage, um die Erstellungszeit unserer Website zu halbieren.

Nach der Installation von Astra wird folgende Meldung in Ihrem Dashboard angezeigt:

Astra-Sites werden gestartet

Klicken Loslegen. Dadurch werden Astra Starter Sites für Sie installiert.

Auswählen Ihres Page Builder

Sie werden dann gefragt, welchen Seitenersteller Sie bevorzugen. In diesem Lernprogramm werde ich Elementor verwenden. Elementor ist ein WordPress-Seitenersteller, der das WordPress-Webdesign im Sturm erobert hat. Es hatte die tiefsten Funktionen, ist aber sehr einfach zu bedienen und zu beherrschen. Elementor ist der umfassendste kostenlose Seitenersteller. Es gibt auch ein Pro-Add-On, um zusätzliche Entwicklerfunktionen hinzuzufügen.

Hauptmerkmale des Elements:

  • Live-Front-End-Seiteneditor
  • Funktionen zur Personalisierung der Website
  • Vorlagen- und Blockbibliothek
  • Umfangreiche mobile Reaktionsoptionen
  • Leistungsstärkster Popup Builder
  • PRO: Erstellen Sie benutzerdefinierte Kopf- / Fußzeilen
  • PRO: Erstellen Sie Post-Type-Layouts

Elementor ist der derzeit stärkste verfügbare Seitenersteller. Sie veröffentlichen ständig neue Funktionen, die den aktuellen Designtrends entsprechen. Dies bedeutet, dass Sie Ihre Website relevant halten können. Wenn Sie unterwegs auf erweiterte Funktionen zugreifen möchten, können Sie ein Upgrade auf Elementor Pro durchführen. Dies ist meiner Meinung nach ein unglaublicher Wert, wenn man alle zusätzlichen Module und Leistungsfunktionen berücksichtigt, die darin enthalten sind.

Auswählen Ihres Astra-Site-Themas

Sobald Sie Ihren Seitenersteller ausgewählt haben, werden Sie zur Bibliothek der Astra Sites-Vorlagen weitergeleitet. Es gibt eine Menge schöner Vorlagen, die Sie verwenden können. Nehmen Sie sich Zeit für die Auswahl der gewünschten Vorlage. Beachten Sie, dass diese Vorlagen mit dem von Ihnen ausgewählten Seitenersteller vollständig bearbeitet werden können. Dies bedeutet, dass Sie jeden Teil und jedes Element der Website wie Überschrift, Bilder, Farben, Logo usw. Anpassen können.

In diesem Tutorial werde ich die Vorlage “Benutzerdefinierter Druck” verwenden, da sie fantastisch und sehr E-Commerce-orientiert aussieht.

Um ein Thema zu installieren, müssen Sie nur darauf klicken, um zur Vorschau zu gelangen. Wenn Ihnen das gefällt, was Sie sehen, klicken Sie auf Thema importieren Klicken Sie auf die Schaltfläche und stellen Sie sicher, dass alle Kontrollkästchen aktiviert sind.

Wenn Sie es bemerken, gibt es eine Box mit der Aufschrift “Install Required Plugins”. Wenn Sie dieses Kontrollkästchen aktivieren, werden alle erforderlichen Plugins installiert, damit das Thema genau so aussieht, wie es ist. Für das Thema “Benutzerdefiniertes Drucken” werden Elementor, WooCommerce und WPForms installiert. Das spart mir so viel Zeit, da ich diese Plugins nicht mehr einzeln installieren muss. Alles ist für mich erledigt.

Importieren eines Astra-Site-Themas

Das Importieren des Themas kann eine Weile dauern. Schließen Sie Ihren Browser nicht und klicken Sie nicht auf “Aktualisieren”. Warten Sie ab und wenn es fertig ist, sehen Sie ein Blau Site anzeigen Taste. Klicken Sie auf diese Schaltfläche, um zu Ihrer Website zu gelangen, die jetzt das gerade importierte Thema enthält.

Schritt 4. Passen Sie Ihre Website an.

Ihre Website sieht jetzt umwerfend aus, aber Sie möchten sie zu Ihrer eigenen machen. Als erstes möchten Sie Ihre Farbpalette auswählen. Wenn Sie bereits Ihre Markenfarbe haben, wird dies einfacher.

Farbpalette auswählen

Eine Website besteht normalerweise aus drei Farben: Primär-, Akzent- und Pop-Farbe. Die Primärfarbe ist die dominierende Farbe Ihrer Website und höchstwahrscheinlich Ihre Markenfarbe. Die Akzentfarbe wird normalerweise für Überschriften oder Post-Titel verwendet, wenn diese etwas anders aussehen sollen, um die Augen auf sie zu lenken. Schließlich sollte die Pop-Farbe den Rest der Farben kontrastieren, um wichtige Elemente der Website hervorzuheben, wie z. B. Call-to-Action-Schaltflächen.

Für die Auswahl einer Website-Farbpalette verwende ich zwei Tools. Der erste ist Coolors.co Hier können Sie in verschiedenen Farbpaletten stöbern und auswählen, was Sie auf Ihrer Website verwenden möchten.

Kühler Homepage

Wenn Sie eine Palette sehen, die Ihnen gefällt, bewegen Sie die Maus darüber und klicken Sie auf Aussicht, und Sie werden zu einem neuen Fenster weitergeleitet, in dem Sie die Hex-Codes jeder Farbe sehen.

Farbpalette mit Hex-Code

Diese Hex-Codes sind genau das, was Sie benötigen, um diese Farben auf Ihrer Website zu verwenden. Später werde ich Ihnen zeigen, wie Sie diese Hex-Codes im WordPress-Backend verwenden.

Ein weiteres cooles Tool ist Colorzilla, eine Google Chrome-Erweiterung, mit der Sie den Hex-Code jeder Farbe abrufen können, die Sie auf jeder Website sehen, damit Sie ihn selbst verwenden können. Wenn Sie die Colorzilla-Erweiterung erhalten möchten, Klicke hier. Dann klick Zu Chrome hinzufügen.

colorzilla

Es kann eine Weile dauern, aber sobald dies erledigt ist, wird dieses Symbol in Ihrer Symbolleiste angezeigt:

Colorzilla-Symbol

Wenn Sie nun auf einer Website eine Farbe sehen, die Sie auf Ihrer eigenen Website verwenden möchten, müssen Sie nur noch auf dieses Symbol klicken und auf die Farbe klicken, die Sie kopieren möchten. Der Hex-Code wird dann automatisch kopiert, den Sie im Backend Ihrer Website einfügen können. So einfach ist das. Dies ist ein praktisches Tool, mit dem Sie mit einem Klick großartige Farben verwenden können.

Typografie anpassen

Sie möchten auch Ihre eigene Typografie verwenden, um Ihre Website hervorzuheben. Websites haben normalerweise 2-3 Schriftarten. Sie haben eine Schriftart für Überschriften oder ein Menü, eine Schriftart für den Textkörper und eine zusätzliche “Pop-Schriftart”. Wie bei Farben können Sie nicht jede Schriftart verwenden. Sie müssen sicherstellen, dass sie zusammen gut aussehen, und die richtige Botschaft über Ihre Marke senden.

Ich benutze gerne Fontpair.co Auf dieser Website erfahren Sie, wie zwei verschiedene Schriftarten zusammen aussehen.

mit fontpairs.co

Wenn Sie etwas sehen, das Ihnen gefällt, notieren Sie sich einfach, wie es heißt, damit Sie zu WordPress gehen und es direkt dort hinzufügen können.

Ich verwende auch gerne WhatFont, eine Google Chrome-Erweiterung, die Ihnen sagt, welche Schriftart auf einer Website verwendet wird. So installieren Sie WhatFont, Klicke hier dann klick Zu Chrome hinzufügen. Dann sehen Sie dieses Symbol in Ihrer Symbolleiste:

Whatfont-Symbol

Wenn Sie den Namen einer Schriftart wissen möchten, klicken Sie einfach auf dieses Symbol und bewegen Sie die Maus über den Text. WhatFont teilt Ihnen den Namen dieser Schriftart mit. Wenn Sie darauf klicken, werden auch Schriftgröße, Farbe, Familie, Stil, Gewicht und mehr angezeigt.

mit whatfont

Ein Logo bekommen

Sie benötigen außerdem ein Markenlogo, um Ihre Website hervorzuheben und Ihre Markenidentität zu ermitteln. Es gibt verschiedene Möglichkeiten, ein Logo zu erhalten. Sie können versuchen, es selbst zu tun, indem Sie ein erstaunliches Entwurfswerkzeug namens verwenden Canva. Es ist sehr beliebt, da es das Entwerfen auch für Anfänger sehr einfach macht.

Canva enthält viele Logo-Vorlagen, die Sie ändern können, um Ihre eigenen zu erstellen. Beachten Sie jedoch, dass Sie, wenn Sie das Logo mit transparentem Hintergrund exportieren möchten, ein Upgrade auf Pro durchführen müssen (mit einer einmonatigen kostenlosen Testversion). Sie können jederzeit in Photoshop oder gehen Photopea um den Hintergrund zu entfernen, aber das fügt dem Prozess nur einen zusätzlichen Schritt hinzu.

canva logos

Wenn Sie Zeit sparen möchten, können Sie einfach einen freiberuflichen Logo-Designer beauftragen, dies für Sie zu tun. Sie können Websites wie Fiverr.com oder 99design ausprobieren, aber Sie müssen vorsichtig sein, wenn Sie einen Künstler anhand seines Stils, seiner Erfolgsbilanz, seiner Bewertungen, Bewertungen und mehr auswählen.

Anpassen Ihrer Website

Jetzt ist es an der Zeit, diese Farben, Schriftarten und Logos auf Ihrer Website zu verwenden. Wenn Sie sich im WordPress-Backend-Dashboard befinden, gehen Sie zu Aussehen > Anpassen um den Theme Customizer zu öffnen.

Thema anpassen

Wenn Sie sich im Frontend Ihrer Website befinden und oben ein schwarzer Balken angezeigt wird, können Sie auf klicken Anpassen um den Customizer zu öffnen.

Thema anpassen

So sieht der Theme-Customizer aus:

Theme Customizer

Hier können Sie Ihr Logo hochladen, die Farben und die Typografie der Website ändern, Schaltflächen anpassen und vieles mehr. Die Änderungen, die Sie hier vornehmen, werden in Echtzeit auf Ihrer Website angezeigt, sodass Sie sofort sehen können, wie sie aussehen. Außerdem verfügt jedes Thema über andere Anpassungsoptionen. Wenn Sie also ein anderes Thema als Astra verwenden, werden hier möglicherweise andere Optionen angezeigt.

Um Ihre Site-Farben in Astra zu ändern, gehen Sie zu Farben & Hintergrund. Sie haben die Möglichkeit, die Grundfarben, Brotkrumen, Kopf- und Fußzeilenfarben zu ändern.

Farbhintergrund-Editor

Die Grundfarben sind das Thema, der Link, der Text und die Farbe des Link-Hovers Ihrer Website. Wenn Sie beispielsweise die Themenfarbe ändern möchten, klicken Sie auf Wähle Farbe. Sie sehen zwei Möglichkeiten, eine Farbe auszuwählen. Zunächst können Sie einen Hex-Code in eine Box einfügen. Wenn Sie also eine Farbe in Coolors.co oder an einer anderen Stelle gefunden haben, können Sie den Hex-Code hier einfügen. Sie können eine Farbe auch in einem integrierten Auswahlwerkzeug auswählen.

Grundfarben-Editor

Um die Site-Typografie zu ändern, kehren Sie zum Hauptmenü des Customizers zurück und klicken Sie auf Typografie. Sie können die Basis-, Breadcrumb-, Inhalts- und Blog-Typografie ändern.

Typografie-Customizer

Als nächstes fügen Sie Ihr Logo hinzu. Um Ihr Logo hochzuladen, gehen Sie zu Layout > Header > Site-Identität. Klicken Sie im Bereich Logo auf Logo ändern Schaltfläche und laden Sie Ihr Logo hoch.

Logo hochladen

Mit Astra können Sie auch die Breite Ihres Logos anpassen, um zu ändern, wie groß oder klein es angezeigt werden soll. Wenn Sie nach unten scrollen, können Sie auch Ihren Site-Titel ändern, einen Site-Slogan sowie ein Site-Symbol oder ein Favicon hinzufügen.

Im Anpassungsbereich von Astra können Sie viel mehr tun, z. B. die Breite Ihres Website-Inhalts ändern, die Struktur der Blog-Posts ändern, Ihre Fußzeile und Kopfzeile anpassen und vieles mehr. Informieren Sie sich hier über Ihre Optionen, um herauszufinden, was Ihnen für Ihre Website am besten gefällt.

Vergessen Sie nach dem Anpassen nicht, auf zu klicken Veröffentlichen Damit Ihre Änderungen auf Ihrer Website live geschaltet werden.

Schritt 5. Anpassen Ihrer Website mit Elementor.

An diesem Punkt haben Sie die Grundlagen der Anpassung wie das Ändern der Site-Farbe, der Typografie, das Hinzufügen eines Logos und all das. Jetzt ist es an der Zeit, sich auf die Details zu konzentrieren und Elementor (oder einen beliebigen von Ihnen bevorzugten Seitenersteller) zu verwenden, um das Erscheinungsbild Ihrer Website vollständig zu ändern.

Wie ich bereits erwähnt habe, werde ich Elementor in diesem Tutorial verwenden, da ich einfach denke, dass es das Beste ist, aber Sie können jeden Seitenersteller verwenden, mit dem Sie vertraut sind.

In Elementor können Sie so ziemlich alles mit Ihrer Website tun, ohne einen Webentwickler zu programmieren oder einzustellen. Das Hinzufügen von Elementen ist ein einfacher Drag & Drop-Vorgang.

Es gibt zwei Möglichkeiten, eine Seite mit Elementor zu bearbeiten. Wenn Sie sich im WordPress-Backend befinden, klicken Sie zunächst auf Seiten und Sie sollten eine Liste aller Seiten Ihrer Website sehen, einschließlich derjenigen, die automatisch mit der Astra Site-Vorlage erstellt wurden. Seiten, die mit einem bestimmten Seitenersteller (z. B. Elementor) erstellt wurden, werden als solche gekennzeichnet:

Seiten

Um eine Seite mit Ihrem Seitenersteller zu bearbeiten, bewegen Sie die Maus darüber und klicken Sie auf Bearbeiten mit (Seitenersteller). In meinem Fall wird es sein Mit Elementor bearbeiten.

mit elementor bearbeiten

Sobald Sie darauf klicken, werden Sie in Elementor aufgenommen.

Wenn Sie sich im Frontend Ihrer Website befinden, rufen Sie die Seite auf, die Sie bearbeiten möchten, und klicken Sie auf Mit elementor bearbeiten auf dem schwarzen Balken oben:

mit elementor bearbeiten

Beides bringt Sie in Elementor. Sobald Sie sich in Elementor befinden, können Sie verschiedene Bilder für Ihre Überschrift verwenden, Texte ändern, Symbole ändern und vieles mehr. Sie können beginnen, indem Sie die Texte und das Bild in der Überschrift an Ihr Unternehmen anpassen. Hier sind einige Dinge, die Sie mit Texten in Elementor tun können:

Bearbeiten von Texten in Elementor

Wie Sie sehen können, können Sie den Text direkt im Inhaltsbearbeitungsbereich ändern, die Größe, das Gewicht, die Farbe und die Typografiefamilie ändern. Sie können auch Animationen wie einfaches Überblenden, Zoomen und mehr hinzufügen. Hier können Sie eine Menge Dinge tun, um Ihrer Website Würze zu verleihen.

Sie möchten auch die Bilder Ihrer Website an die Art Ihres Unternehmens anpassen. Das Ändern der Bilder in Elementor ist sehr einfach. Sie müssen nur auf das Bild klicken und die Optionen werden in der linken Seitenleiste angezeigt. Sie können ein neues Bild hochladen, seine Größe ändern, einen Rahmen oder Schatten hinzufügen, eine Animation hinzufügen und vieles mehr.

Bearbeiten von Bildern in Elementor

In Elementor können Sie auch Schaltflächentexte ändern, den Testimonials-Bereich anpassen und weitere Elemente / Blöcke wie Texte, Bilder, Schaltflächen, Videos und mehr hinzufügen.

Elementor Pro bietet eine Reihe weiterer Funktionen wie das Hinzufügen von Formularen (für die normalerweise ein Plugin eines Drittanbieters erforderlich ist), das Hochladen eigener Schriftarten, das Hinzufügen von Schiebereglern, das Hinzufügen von Preistabellen und Preislisten sowie das Anpassen Ihrer Kopf- und Fußzeilen ( Dies ist für die meisten Seitenersteller nicht zulässig.

Wenn Sie Elementor Pro kaufen und gleichzeitig freien Zugang zu meinen Elementor Pro-Kursen erhalten möchten, klicken Sie hier auf diesen Link.

Schritt 5. Richten Sie WooCommerce ein.

Jetzt ist es an der Zeit, WooCommerce einzurichten, das WordPress-Plugin, das jede Website in einen Online-Shop verwandelt. Sie können Produkte hinzufügen, Online-Zahlungen akzeptieren, Gutscheine erstellen, Versand und Steuern festlegen und vieles mehr.

WooCommerce wurde bereits für mich durch das Thema “Astra Site” für benutzerdefinierte Drucke installiert, daher muss ich es jetzt einrichten. Wenn Sie WooCommerce noch nicht installiert haben, gehen Sie einfach zu Plugins > Neue hinzufügen und suchen Sie nach WooCommerce.

Das erste, was wir tun müssen, ist zu gehen WooCommerce > die Einstellungen. Sie sehen 7 Registerkarten: Allgemein, Produkte, Versand, Zahlungen, Konten und Datenschutz, E-Mails und Erweitert.

Werfen wir zunächst einen Blick auf die Allgemeines Tab. Auf dieser Registerkarte können Sie Ihre Geschäftsadresse festlegen, in welchen Ländern Sie verkaufen und versenden, und Steuersätze aktivieren.

Woocommerce allgemeine Einstellungen

Wenn Sie nach unten scrollen, sehen Sie auch Optionen zum Aktivieren von Gutscheinen und zum Anpassen der Anzeige von Preisen auf Ihrer Website, einschließlich der Währung, in der sie angezeigt werden usw..

Als nächstes kommt die Produkte Registerkarte, auf der Sie produktbezogene Optionen festlegen können. Sie können festlegen, welche Seite Ihre Shop-Seite sein soll, was passiert, wenn Besucher ein Produkt in den Warenkorb legen, Produktabmessungen festlegen, Kundenbewertungen aktivieren und konfigurieren sowie Sternebewertungen aktivieren.

Woocommerce-Produkteinstellungen

Im oberen Teil dieses Abschnitts haben Sie auch Optionen für Inventar und Herunterladbare Produkte. Aktivieren Sie im Abschnitt Inventar das Kontrollkästchen neben Aktivieren Sie die Bestandsverwaltung, Sie sehen eine Liste mit Optionen, mit denen Sie Ihr Inventar verwalten können. Sie können beispielsweise den niedrigen Lagerbestandsschwellenwert festlegen, sodass Sie eine Benachrichtigung erhalten, wenn Ihr Lagerbestand diese Zahl erreicht. Sie können auch Lagerartikel von Ihrer Website ausblenden.

Inventareinstellungen Woocommerce

Wie für die Herunterladbare Produkte Dies ist nur relevant, wenn Sie herunterladbare Inhalte auf Ihrer Website verkaufen. Wenn Sie also rein physische Produkte verkaufen, können Sie diese überspringen. Sie haben die Möglichkeit, Käufer zu verpflichten, sich anzumelden, bevor Sie Ihre Produkte herunterladen können. Sie können Downloads auch nach Zahlungseingang gewähren.

Herunterladbare Produktoptionen

Die nächste Registerkarte ist Versand. Dies ist nur relevant, wenn Sie physische Produkte verkaufen, die an Käufer versendet werden. Innerhalb dieser Registerkarte befinden sich drei Unterabschnitte: Versandzonen, Versandoptionen und Versandklassen.

In Versandzonen müssen Sie Versandzonen hinzufügen und diesen Zonen verfügbare Versandmethoden zuweisen. Dies wird eine Weile dauern, wenn Sie in mehrere Länder versenden.

Versandzonen

Wenn Sie weitere Hilfe zu Versandzonen benötigen, können Sie die Versandzone von WooCommerce überprüfen Dokumentation.

Als nächstes kommt die Versandoptionen Sektion. In diesem Abschnitt können Sie steuern, wie die Versandkosten auf Ihrer Website angezeigt werden, und einen Standardwert oder das erforderliche Versandziel festlegen.

Versandoptionen

Der letzte Abschnitt im Versand ist Versandklassen. Mit Versandklassen können Sie einer Gruppe von Produkten unterschiedliche Versandkosten zuweisen, z. B. schwerere Produkte, die mehr Porto benötigen.

Versandklassen

Um Ihre Versandkosten festzulegen, gehen Sie zu Versandzonen und erstellen oder bearbeiten Sie eine vorhandene Versandart wie “Flatrate”.

Versandkosten hinzufügen

Sobald Sie klicken Bearbeiten, Ein Popup-Fenster wird angezeigt. Hier können Sie die Versandpauschale und die zusätzlichen Kosten für die soeben erstellte Versandklasse hinzufügen.

Versandkosten einer Versandklasse

Wenn Sie weitere Hilfe bei der Konfiguration Ihrer Versandeinstellungen benötigen, können Sie sich bei WooCommerce umsehen Dokumentation für den Versand.

Fahren wir nun mit fort Zahlungen. Auf dieser Registerkarte können Sie Zahlungsgateways wie PayPal, direkte Überweisung, Nachnahme und mehr aktivieren oder deaktivieren. Sobald Sie eine Methode aktiviert haben, klicken Sie auf Installieren um Ihre Konten zu verknüpfen und Zahlungen zu akzeptieren.

Zahlungsmethoden

Wenn Sie Stripe-Zahlungen akzeptieren möchten, können Sie ein Plugin namens installieren WooCommerce Stripe Payment Gateway. Geh einfach zu Plugins > Neue hinzufügen und suchen Sie nach dem Plugin. Durch das Installieren und Aktivieren dieses Plugins wird die Stripe-Zahlungsmethode in WooCommerce aktiviert, Sie müssen jedoch darauf zugreifen WooCommerce > die Einstellungen > Zahlungen um es einzurichten.

In dem Konten & Datenschutz Auf der Registerkarte können Sie Einstellungen für die Kontoerstellung und den Datenschutz der Benutzer konfigurieren. Sie können festlegen, dass Gäste kaufen können, ohne ein Konto zu erstellen, Ihre Datenschutzseite und Richtlinienseiten festlegen und festlegen, wie lange Benutzerdaten aufbewahrt werden sollen.

Konten und Datenschutz

Als nächstes kommt die E-Mails Registerkarte, auf der eine Liste der E-Mails angezeigt wird, die WooCommerce unter bestimmten Bedingungen automatisch sendet. Beispielsweise kann eine E-Mail bei jeder neuen Bestellung an eine E-Mail-Adresse Ihrer Wahl gesendet werden. Sie können auch E-Mails mit Aktualisierungen zu Kundenbestellungen anzeigen, z. B. erstattete oder abgeschlossene Bestellungen.

E-Mail Benachrichtigungen

Endlich, das Erweitert Auf der Registerkarte, die die API-Registerkarte ersetzt hat, können Sie weitere technische Details wie Seiteneinstellungen konfigurieren, auf denen Sie WooCommerce mitteilen können, welche Seite als Warenkorbseite oder Checkout-Seite fungieren soll.

Seiteneinrichtung Woocommerce

Wenn Sie nach unten scrollen, können Sie ändern, was WooCommerce als Endpunkte bezeichnet. Dies sind Anhänge an die URL, mit denen unterschiedliche Inhalte angezeigt werden können, ohne dass eine neue Seite erforderlich ist.

Schritt 6. Produkte hinzufügen.

Sobald Sie mit den grundlegenden WooCommerce-Einstellungen fertig sind, können Sie jetzt Produkte hinzufügen. Das Astra Site-Thema, das wir in diesem Lernprogramm verwendet haben, enthält bereits Beispielprodukte. So sieht eine Produktseite im Frontend aus:

Produktseite

Schauen wir uns nun an, wie wir dies ändern und unsere eigenen Produkte im Backend hinzufügen können.

Um ein neues Produkt hinzuzufügen oder ein vorhandenes Produkt zu bearbeiten, klicken Sie einfach auf die Menüoption Produkte auf der linken Seitenleiste im WordPress-Dashboard. Sie sehen dann eine Liste aller Produkte, die Sie haben. Wenn Sie sich alternativ im Frontend einer Produktseite befinden, können Sie auf klicken Produkt bearbeiten auf dem schwarzen Balken oben auf der Seite. Dadurch gelangen Sie direkt in den Produkteditor.

Produkteditor

Hier können Sie den Produkttitel und die Produktbeschreibung ändern. Wenn Sie nach unten scrollen, wird ein Abschnitt mit dem Namen angezeigt Produktdaten. Hier verbringen Sie die meiste Zeit. Hier können Sie den Produkttyp auswählen und von dort aus andere Produkteinstellungen konfigurieren.

Mit WooCommerce können Sie folgende Produkttypen hinzufügen:

  • Physisch, herunterladbar, virtuell. Ein virtuelles Produkt muss nicht unbedingt heruntergeladen werden. Ein Beispiel ist ein Termin oder eine Einzelcoachingsitzung.
  • Einfaches Produkt. Dies ist ein Einzelprodukt.
  • Gruppiertes Produkt. Dies ist ein Bündel verschiedener Produkte.
  • Externes Produkt. Produkte, die außerhalb Ihrer Website gekauft werden, wie ein Affiliate-Link.
  • Variables Produkt. Ein variables Produkt weist Variationen wie Farben und Größen auf.
Produkttypen

Wenn Sie ein neues Produkt erstellen, müssen Sie zunächst dessen Typ auswählen. Jeder Typ verfügt über unterschiedliche Optionen. Ein herunterladbares Produkt bietet beispielsweise folgende Optionen:

Herunterladbare Produktoptionen

Auf der linken Seite dieses Abschnitts sehen Sie weitere Optionen für Inventar, Versand, verknüpfte Produkte und mehr.

Im Inventar, Sie können die SKU hinzufügen, eine bestimmte Anzahl von Beständen für dieses bestimmte Produkt angeben, den Bestandsstatus festlegen und vieles mehr.

Im Versand, Sie können das Gewicht und die Abmessungen des Produkts angeben sowie eine Versandklasse zuweisen, die wir im vorherigen Schritt erstellt haben.

Versand in Produktdaten

Im Verknüpfte Produkte, Sie können einem Produkt einen Upsell- und Cross-Selling-Artikel zuweisen. Ein Upsell ist ein Produkt, das Sie anstelle des aktuellen Produkts empfehlen, da es einen höheren Preis hat. Cross-Sells sind Produkte, die Sie basierend auf dem aktuellen Produkt im Warenkorb empfehlen. Wenn Sie einen Upsell oder Cross-Selling hinzufügen möchten, geben Sie den Namen des Produkts in die entsprechenden Felder ein.

verknüpfte Produkte

Sie können Ihren Produkten auch Attribute hinzufügen Attribute Sektion. Dies können Größe, Farbe, Gewicht usw. sein. Wenn Sie ein variables Produkt erstellen, müssen Sie hier zuerst ein Attribut hinzufügen. Wenn Sie mehr darüber erfahren möchten, wie Sie ein variables Produkt erstellen, lesen Sie WooCommerce-Leitfaden hier.

Wenn Sie nach unten scrollen Produktdaten In diesem Feld wird ein Bereich angezeigt, in dem Sie eine kurze Produktbeschreibung hinzufügen können. Diese Beschreibung wird neben Ihrem Produkt und in der Nähe des Preises angezeigt. Halte es kurz und bündig. Sie können auf der rechten Seite ein Produktbild hinzufügen. Wenn Sie mehr Produktbilder haben, können Sie diese in der hinzufügen Produktgalerie Sektion.

Kurzbeschreibung und Produktbild

Es ist auch wichtig, die Katalogsichtbarkeit festzulegen, die sich oben auf der Seite unter befindet Veröffentlichen. In einigen Fällen möchten Sie möglicherweise bestimmte Produkte ausblenden, weil Sie sie möglicherweise als Cross-Selling mit einem exklusiven reduzierten Preis anbieten. Hier können Sie das tun.

Katalogsichtbarkeit

Wenn Sie hier mit allem fertig sind, klicken Sie auf Aktualisieren um alle Ihre Änderungen zu speichern.

Wenn Sie mehr über die verschiedenen Produkttypen und deren ordnungsgemäße Erstellung erfahren möchten, klicken Sie hier WooCommerce-Leitfaden ist ein großartiger Ort, um zu beginnen. Fügen Sie Ihrer Website weitere Produkte hinzu, und zwar mit genau den gleichen Schritten, die ich Ihnen hier gezeigt habe, bis Sie Ihre Produktlisten erstellt haben.

Schritt 7. Passen Sie Ihre Kassen an.

WooCommerce ist ein großartiges Plugin, wie Sie bisher gesehen haben, aber eine häufige Beschwerde dagegen ist das Fehlen von Checkout-Optionen. Sie können das Aussehen der Checkout-Seiten nicht ändern und damit keinen Verkaufstrichter erstellen. Ein Verkaufstrichter ist eine großartige Möglichkeit, den Kaufwert eines Kunden zu steigern. Wenn Sie ihn also nicht auf Ihrer Website haben, lassen Sie wirklich Geld auf dem Tisch.

Wenn Sie einen Verkaufstrichter für Ihre E-Commerce-Website erstellen möchten, ist CartFlows das beste Plugin, das Ihnen helfen kann. Es ist ein Trichter-Builder-WordPress-Plugin, mit dem Sie schöne und hochwirksame Trichter direkt in WordPress erstellen können.

Cartflows

Wenn Sie mehr darüber erfahren möchten, wie Sie mit CartFlows einen Verkaufstrichter erstellen, können Sie dieses Tutorial lesen, das ich erstellt habe.

Schritt 8. Behalten Sie den Überblick über die Aufgabe des Wagens.

Bevor ich dieses Tutorial abschließe, möchte ich noch etwas zum Verlassen des Einkaufswagens hinzufügen. Es ist eine Tatsache im E-Commerce, dass viele Kunden ihre Einkaufswagen verlassen werden, ohne den Kauf abzuschließen.

Dies kann viele Gründe haben. Sie könnten abgelenkt gewesen sein, die Stromversorgung oder die Verbindung ging aus, etwas Dringendes kam auf. Was auch immer es ist, viele dieser verlassenen Karren sind Umsatzverluste, wenn Sie nichts dagegen unternehmen.

Zum Glück gibt es ein Plugin namens WooCommerce Cart Abandonment Recovery Plugin, das nachverfolgt und automatisch Folge-E-Mails an Kunden mit verlassenen Einkaufswagen sendet – alles KOSTENLOS!

Wenn Sie das hier verwendete Astra Site-Thema verwendet hätten, wäre dieses Plugin bereits für Sie installiert worden. Wenn nicht, können Sie es installieren, indem Sie zu gehen Plugins > Neue hinzufügen und suchen Sie nach dem Plugin.

Unter WooCommerce wird eine neue Option namens aufgerufen Wagenabbruch. Wenn Sie darauf klicken, sehen Sie eine Übersicht darüber, wie viele verlassene Wagen Sie haben, wie viele wiederhergestellt wurden und wie viele verloren gehen.

Abgabe des Warenkorbs

Sie können auch die von WooCommerce gesendeten Folge-E-Mails anpassen, indem Sie zu wechseln Follow-up-E-Mails Bewegen Sie den Mauszeiger über die E-Mail, die Sie bearbeiten möchten, und klicken Sie auf Bearbeiten.

Follow-up-E-Mails

Sie werden dann zum E-Mail-Editor weitergeleitet:

Anpassen von Folge-E-Mails

Einpacken

Das Erstellen einer E-Commerce-WordPress-Website mag kompliziert und überwältigend erscheinen, aber ich hoffe, ich habe ein Licht darauf geworfen und gezeigt, wie Sie alles mit ein wenig Hilfe selbst erledigen können. Ich freue mich sehr über Ihre Erfolgsgeschichten. Wenn Sie Hilfe benötigen, können Sie sich im Kommentarbereich unten an mich wenden.

SiteGround

SiteGround ist ein sehr empfehlenswerter Online-Webhost, da er sich an WordPress-Benutzer richtet und dennoch erschwingliche Preise bietet. Sie sind bekannt für ihre schnelle Leistung und ebenso schnelle Unterstützung.

Wichtige SiteGround-Funktionen:

  • Kostenloses SSL-Zertifikat
  • SCHNELLER sachkundiger Support
  • WordPress Staging-Umgebung
  • Kostenlose Website-Migrationen
  • Tägliche Backups

SiteGround ist eine gute Wahl für Ihre Webhosting-Anforderungen. Sie bedienen WordPress-Websites und bieten weniger Ressourcen als ihre Konkurrenten, aber eine höhere Zuverlässigkeit.

Überprüfen Sie SiteGround

Astra-Thema

Astra ist ein kostenloses WordPress-Theme, das sich auf Geschwindigkeit konzentriert. Optional können Sie die Pro-Version für 59 US-Dollar erwerben, die einige zusätzliche Einstellungen und Optionen enthält.

Hauptmerkmale des Astra-Themas:

  • Nicht das Thema Fasten, aber es ist kein Slouch
  • Viele kostenlose Demo-Sites
  • Flexible Mega-Menüfunktion
  • Benutzerdefinierte Layoutoptionen
  • WooCommerce-Unterstützung
  • LearnDash-Support

Astra Theme ist eine faire Wahl für jedes WordPress-Webdesign-Projekt. Ich nehme an, die größte Frage ist, ob Sie heutzutage überhaupt ein Thema kaufen müssen, da Seitenersteller genau die gleichen Dinge tun, für die Sie ein Thema benötigen würden. Zum Beispiel hat Elementor das kostenlose Hello-Design, mit dem Ihr Seitenersteller die ganze Arbeit erledigen kann.

Es gibt noch einige gute Gründe, ein Pro-Thema zu kaufen, aber für die meisten Menschen ist ein kostenloses Thema höchstwahrscheinlich in Ordnung.

Ich denke jedoch, dass Astra Theme nicht mit den aktuellen Trends Schritt gehalten hat und ich empfehle es nicht mehr.

Es gibt viel bessere moderne Themen, die integrierte Header- und Footer-Builder bieten, anstatt auf 3 Layouts beschränkt zu sein, sowie flexiblere Seiten- und Post-Layouts.

Schauen Sie sich das Astra-Thema an

Elementor

Elementor ist ein WordPress-Seitenersteller, der das WordPress-Webdesign im Sturm erobert hat. Es verfügt über die tiefsten Funktionen, ist jedoch sehr einfach zu bedienen und zu beherrschen. Elementor ist der umfassendste kostenlose Seitenersteller. Es gibt auch ein Pro-Add-On, um zusätzliche Entwicklerfunktionen hinzuzufügen.

Hauptmerkmale des Elements:

  • Live-Front-End-Seiteneditor
  • Funktionen zur Website-Personalisierung
  • Vorlagen- und Blockbibliothek
  • Umfangreiche mobile Reaktionsoptionen
  • Leistungsstärkster Popup Builder
  • PRO Erstellen Sie benutzerdefinierte Kopf- / Fußzeilen
  • PRO Post Type Layouts erstellen

Elementor ist der derzeit stärkste verfügbare Seitenersteller. Sie veröffentlichen ständig neue Funktionen, die den aktuellen Designtrends entsprechen. Dies bedeutet, dass Sie Ihre Website relevant halten können.

Elementor Pro ist ein unglaublicher Wert, wenn man alle zusätzlichen Module und Leistungsmerkmale berücksichtigt, die es enthält.

Wenn ich heute ein neues Website-Projekt starten würde, wäre Elementor der Seitenersteller, den ich auswählen würde. Ich halte es für ein Muss, einen WordPress-Seitenersteller zu haben, dessen Verwendung eine Freude ist.

Check Out Elementor

CartFlows

CartFlows ist ein Builder für Verkaufstrichter für WordPress. Mit dem gewünschten Seitenersteller können Sie schnell und einfach Verkaufstrichter erstellen.

Wichtige Funktionen von CartFlows:

  • Professionell gestaltete Vorlagen
  • 5 Standortbestellungsstöße
  • One Click Upsells
  • Verwenden Sie Ihren bevorzugten Seitenersteller
  • Im Gegensatz zu Klick-Trichtern erweiterbar
  • Countdown-Timer & Split-Tests

Wenn Sie einen Builder für Verkaufstrichter für WordPress möchten und sich selbst hosten oder verwaltetes WordPress-Hosting verwenden können, ist CartFlows eine großartige Option, da es sehr einfach zu bedienen und dennoch sehr leistungsfähig ist.

Schauen Sie sich CartFlows an

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map