So erstellen Sie eine E-Commerce-Website mit WordPress und Elementor 2020

Veröffentlicht: 2022-07-10

In diesem Tutorial zeige ich Ihnen, wie Sie mit WordPress und Elementor 2020 eine E-Commerce-Website erstellen, die Sie vollständig anpassen können.

WordPress ist die am häufigsten verwendete CMS-Plattform zum Erstellen aller Arten von Websites, einschließlich E-Commerce-Websites. Außerdem lernen Sie, wie Sie mit dem Elementor-Seitenersteller erstaunliche Webseiten erstellen, der derzeit die Nr. 1 und der beliebteste Seitenersteller für WordPress ist. WordPress kontrolliert mehr als 1/3 des Internets. Die Mehrheit großer E-Commerce-Unternehmen wie Sony, Bata, eBay und viele mehr verwenden if für die Entwicklung und Wartung ihrer Website. Und das Beste an der Verwendung von WordPress ist, dass Sie keine Programmiersprache oder andere Sprachen lernen müssen Fachjargon, um Ihre Website zu erstellen. Es ist eine einfache Drag-and-Drop-Plattform, die viele integrierte Vorlagen und Layouts bietet, die bei der Erstellung einer attraktiven, benutzerfreundlichen Website helfen. Außerdem stelle ich vorgefertigte Vorlagen zur Verfügung, die Sie einfach importieren und Ihre E-Commerce-Website in wenigen Minuten zum Laufen bringen können.

Wenn Sie dieses gesamte Tutorial durchgehen, sind Sie bereit, Ihre eigene Website ohne externe Hilfe zum Laufen zu bringen. Dieses Tutorial hat vielen Menschen geholfen, ihre Website zu erstellen, und ihren Unternehmen einen Vorteil gegenüber der Konkurrenz in dieser brutalen E-Commerce-Branche verschafft. Gehen Sie also dieses einfache und selbsterklärende Tutorial durch und erwerben Sie eine Fähigkeit, die Ihnen Ihr ganzes Leben lang helfen wird. Der gesamte Prozess wurde Schritt für Schritt gelehrt und alle Infografiken und bildlichen Darstellungen werden gegeben, um es so einfach wie möglich zu verstehen.

Beginnen wir also mit der Erstellung einer E-Commerce-Website mit WordPress und Elementor 2020

Einführung in eine E-Commerce-Website

Das obige Bild ist ein Beispiel für eine Startseite oder Zielseite einer typischen E-Commerce-Website. Zielseiten sind sehr wichtig für Conversions und Verkäufe auf E-Commerce-Websites. Daher sollte die Zielseite attraktiv sein und Banner und Benachrichtigungen über Verkäufe und reduzierte Preise oder Neuankömmlinge enthalten, insbesondere für E-Commerce-Websites. Um eine Conversion zu erzielen, müssen Sie Ihre verkaufsstärksten Produkte auf der Zielseite hervorheben und eine einfache Verknüpfung zu diesen Produkten bereitstellen. Sie können Ihre Produktkategorien auf der Zielseite anzeigen und mit ihnen verlinken.

Oben haben wir eine Kopfzeile, die unseren Standort, unsere Telefonnummer, links unsere Kontaktnummern und rechts die Symbole unserer Social-Media-Seiten von Facebook, Twitter, YouTube usw. enthält. Darunter haben wir einen Shop Schaltfläche, die auf die Produkt-Einkaufsseite unserer Website verweist. Außerdem haben wir eine Konto-Schaltfläche, auf die Benutzer klicken können, um zu ihrem persönlichen Dashboard zu gelangen, um auf ihre Informationen und Einkäufe zuzugreifen und diese zu verwalten. Wir haben auch das Logo unseres Unternehmens auf der Kopfzeile selbst. In der Mitte haben wir unseren Link zu unseren Seiten, nämlich. Startseite, Über uns, Shop, Mein Konto und Kontakt.

Danach haben Sie alle Ihre Produkte und Banner, die Sie in diesem Tutorial erstellen lernen, auf sehr attraktive Weise dargestellt . Danach haben wir auch einen Newsletter-Bereich, in dem Benutzer Ihre Website abonnieren können und keine Benachrichtigungen und E-Mails über Produkte, Angebote, Coupons usw. Darunter haben wir unsere Fußzeile, die Informationen über uns und einen E-Mail-Abonnement-Button enthält.

Wie Sie im Bild sehen können, listet die Shop-Seite alle auf unserer Website verfügbaren Produkte auf, wo Benutzer jedes Produkt durch Anklicken überprüfen können. In der Seitenleiste haben wir einen Preisfilter, eine Liste von Kategorien, Bewertungen und Videoanzeigen unserer Produkte. Unter jedem Produkt gibt es auch ein Bewertungsformular und verwandte Produkte. Als nächstes haben wir die Seite „Über uns“, auf der Ihre Unternehmensbeschreibung und Informationen über Ihr Team angezeigt werden. Und dann haben wir eine Kontaktseite, auf der Benutzer uns über ein Kontaktformular kontaktieren können. Als nächstes haben wir ein Mein Konto-Dashboard, das ein persönliches Dashboard für jeden Kunden haben wird, das seine persönlichen, Kauf- und Zahlungsinformationen enthält.

Sie können die Warenkorbseite sehen, nachdem Sie etwas gekauft haben, wie Sie im Bild sehen können, wo Sie Ihre Kaufdetails ändern, den Gesamtbetrag überprüfen und mit der Zahlung fortfahren können. Anschließend können Besucher zur Kasse gehen, indem sie die Versanddetails ausfüllen und den Kauf bezahlen. Wir werden in diesem Tutorial Schritt für Schritt lernen, all diese Seiten zu erstellen, damit Ihre Website vollständig startbereit ist.

Holen Sie sich Hosting und installieren Sie WordPress und Elementor

  • NameHero-Domainkauf

Das erste, was wir tun müssen, um eine Website zu erstellen, ist, einen Domainnamen und ein Hosting für Ihre Website zu erhalten. Sie müssen ein gutes Hosting auswählen, da Ihre gesamte Website auf Ihrer Hosting-Site basiert und unterstützt wird. Daher müssen Sie verschiedene Hostings auf der Grundlage von Kriterien wie Zuverlässigkeit, technischer Support, Platz, Sicherheit, Design, SEO-Möglichkeiten usw. überprüfen und vergleichen.

Es gibt mehrere Hosting-Anbieter auf dem Markt und die meisten von ihnen haben unterschiedliche Angebote. Ich habe viele von ihnen ausprobiert und mich schließlich für alle meine Websites für NameHero entschieden. Ich benutze es persönlich und habe es mit 22 anderen Hosting verglichen und fand sie am besten. Wie Sie im Bild sehen können, haben sie 4 verschiedene Optionen und ich empfehle die Plus Cloud-Option für eine E-Commerce-Website. Sie können meinen Link verwenden, um einen Rabatt zu erhalten. www.namehero.com/darrelwilson

Nachdem Sie Ihren Plan bestellt haben, können Sie Ihren Domainnamen auswählen, d. h. den Namen Ihrer Website. Sie können einen beliebigen Namen wählen. Sie können Ihre Domain nach Ihren Bedürfnissen auswählen, um .net, .biz usw. zu mögen. Der nächste und letzte Schritt besteht darin, Ihre Informationen zu Konto- und Zahlungsdetails einzugeben. Es wird dringend empfohlen, den ID-Schutz im Add-On-Kontrollkästchen zu aktivieren, da er Sie vor Spammern schützt. Schließen Sie den Kauf ab, indem Sie auf die nächsten Seiten klicken und zum Zahlungsvorgang gehen.

  • WordPress installieren

Um WordPress auf Ihrem Hosting zu installieren, gehen Sie auf Ihrer Hosting-Seite zu Ihrem „Kundenbereich“ und klicken Sie auf „Cloud-Webhosting“. Als nächstes haben Sie Meine Produkte und Dienste, wo Sie das Plus Cloud-Paket mit Ihrem Domainnamen sehen, klicken Sie auf die Schaltfläche Aktiv daneben, wie Sie im Bild sehen können. Als nächstes sehen Sie auf der linken Seite die Schaltfläche „Gehe zu cpanel“ und klicken Sie darauf. Scrollen Sie auf der nächsten Seite, wie Sie im Bild sehen können, nach unten zur Softwarekategorie und klicken Sie auf „WordPress Manager by Softaculous“.

Dies öffnet ein WordPress-Installationsprogramm, klicken Sie auf die Schaltfläche Jetzt installieren. Es öffnet sich eine Setup-Seite mit der Version, Ihrem Domänennamen und dem Verzeichnis, wie Sie im Bild sehen können. BITTE ENTFERNEN SIE ALLES, DAS UNTER VERZEICHNIS GESCHRIEBEN IST. WÄHLEN SIE AUCH AUF DEM PROTOKOLL „https:/“. In den Site-Einstellungen können Sie den Namen und die Beschreibung Ihrer Site ändern. Das können wir auch später machen. Geben Sie Ihre Admin-Daten wie Benutzername, Passwort und E-Mail ein, die Ihre WordPress-Anmeldedaten sein werden. Scrollen Sie auf der nächsten Seite in den Vorlagen nach unten, da wir diese nicht verwenden, und klicken Sie auf „Installieren“. Klicken Sie auf den auf der nächsten Seite angegebenen Admin-URL-Link und Ihr neues WordPress ist erstellt und im Internet verfügbar. Sie befinden sich jetzt auf Ihrem WordPress-Dashboard wie im Bild, wo Sie Ihre Website bearbeiten können.

  • Allgemeine WordPress-Einstellungen

Bevor Sie Ihre Website entwerfen, lassen Sie uns lernen, wie Sie Ihre Einstellungen im WordPress-Dashboard ändern. Auf Ihrem WordPress-Dashboard sehen Sie links auf der Seite mehrere Registerkarten, wie Sie im Bild sehen können. Einer der wichtigsten ist die Registerkarte „Einstellungen“, auf der Sie allgemeine WordPress-Einstellungen finden. Sie sollten Ihren Permalink von „Tag und Name“ auf „Beitragsname“ ändern, um Ihre Website-Adresse leichter verständlich zu machen. Dies ist auch sehr wichtig für Ihr SEO. Eine weitere Registerkarte in Ihrem WordPress-Dashboard ist „Benutzer“, wo Sie Ihr Profil und das Erscheinungsbild Ihres WordPress-Dashboards anpassen können. Klicken Sie auf „Änderungen speichern“, um sie zu aktualisieren.

Um sich nach dem Abmelden erneut bei WordPress anzumelden, müssen Sie Ihre URL in die Adressleiste eingeben, gefolgt von „/wp-admin“, wodurch Sie zur WordPress-Anmeldeseite gelangen, auf der Sie Ihren Benutzernamen und Ihr Passwort eingeben können, um sich anzumelden.

Erstellen von Seiten und Menü

Sie haben jetzt eine funktionierende Website erstellt, sie ist noch nicht vollständig. Jetzt müssen Sie Seiten zu Ihrer Website hinzufügen. Klicken Sie in Ihrem WordPress-Dashboard auf die Registerkarte „Seiten“ und wählen Sie die Option „Neu hinzufügen“. Sie können dies auch tun, indem Sie oben auf der Seite auf die Schaltfläche „Neu hinzufügen“ klicken. Wenn Sie dies tun, öffnet das Dashboard einen Seiteneditor, wie im Bild unten gezeigt, wo Sie Ihre neue Seite erstellen können. Hier können Sie den Namen der Seite eingeben und das Layout der Seite gestalten. Klicken Sie auf die Schaltfläche „Veröffentlichen“ und Ihre Webseite wird erstellt. Hier in diesem Tutorial erstellen wir grundlegende Seiten wie Startseite, Über uns und Kontakt, die von jeder einzelnen Website benötigt werden. Wir gehen vorerst nicht auf den Inhalt der Seiten ein, was wir später tun werden. Sie können diese Seiten anzeigen, indem Sie unter dem Seitennamen im WordPress-Dashboard auf Ansicht klicken.

Nachdem Sie separate Seiten erstellt haben, müssen Sie ein Menü erstellen, um auf diesen Seiten navigieren zu können. Das Erstellen eines Menüs ist mit WordPress sehr einfach. Navigieren Sie einfach zu Ihrem Dashboard, suchen Sie die Registerkarte „Darstellung“ und klicken Sie auf „Menüs“. Dadurch wird ein Menü-Editor geöffnet, in dem Sie Ihre Menüs erstellen und benennen können, wie Sie im Bild unten sehen können. Nachdem Sie ein Menü erstellt haben, können Sie dem Menü verschiedene Seiten Ihrer Website zuweisen. Sie können die Chronologie der Menüpunkte jederzeit neu zuweisen und Sie können ein Dropdown-Menü erstellen, indem Sie einen Punkt per Drag & Drop unter den anderen ziehen.

Was Sie jetzt tun sollten, ist, oben links auf „Anpassen“ zu klicken, wie im Bild gezeigt, und zu den „Homepage-Einstellungen“ zu gehen, Ihre Homepage in „Eine statische Seite“ zu ändern und Ihre Homepage als statische Seite auszuwählen, was Sie tun müssen aus der Dropdown-Liste auswählen. Sie tun dies, damit jeder Besucher Ihrer Website immer auf Ihre Homepage geleitet wird. Direkt auf eine andere Seite wie Ihre „Über uns“, „Kontakt“-Seite oder Ihre neuesten Posts zu gelangen, ist für die Zuschauer nicht sinnvoll.

Laden Sie Elementor herunter

Jetzt müssen wir unseren Seitenersteller Elementor Pro kaufen, mit dem wir die Webseiten unserer E-Commerce-Website erstellen werden. Sie können es über meinen Link www.darrelwilson.com/elementor kaufen. Auf ihrer Seite können Sie verschiedene verfügbare Pakete überprüfen. Wir können die kostenlose Version nicht verwenden, da wir die Dienste Theme Builder und Woocommerce Builder benötigen. Sobald Sie Ihr Paket gekauft haben, öffnet es Ihr Konto, wie im Bild gezeigt, von wo aus Sie auf „Plugin herunterladen“ klicken müssen und eine Zip-Datei wird heruntergeladen.

Als nächstes müssen Sie es auf Ihre WordPress-Website hochladen. Gehen Sie zu Ihrem Dashboard in Ihrem WordPress, klicken Sie auf „Plugins“ in der Symbolleiste auf der linken Seite, klicken Sie auf „Neu hinzufügen“ und Ihr hinzugefügtes Plugin wird wie im Bild gezeigt geöffnet. Klicken Sie auf „Plugin hochladen“, wählen Sie Ihre Elementor-Zip-Datei aus und installieren Sie sie. Klicken Sie auf „Plugin aktivieren“ und eine neue „Elementor“-Schaltfläche wird in Ihrer WordPress-Symbolleiste erstellt. Gehen Sie dorthin und klicken Sie auf „Verbinden und aktivieren“.

Installieren Sie WordPress-Themes

Lassen Sie uns nun ein WordPress-Theme auf unserer Website installieren. WordPress bietet unzählige vorgefertigte Themen zur Auswahl für das Erscheinungsbild Ihrer Website. Auf der Registerkarte „Erscheinungsbild“ des WordPress-Dashboards finden Sie die Schaltfläche „Design“, über die Sie ein Design installieren können. Sie können ein beliebiges Thema aus den verfügbaren Optionen auswählen. Für dieses Tutorial verwenden wir das Astra-Design, das Sie im beliebten Menü finden. Klicken Sie unter dem Namen des Themas auf „Aktivieren“. „Das Beste an der Verwendung dieses Themas ist, dass es alle grundlegenden Einstellungen und Funktionen enthält, die zum Ausführen einer Website erforderlich sind, und dass es sehr kompatibel mit dem Elementor-Seitenersteller ist.

Bearbeiten Sie Seiten mit Elementor

Lassen Sie uns nun lernen, wie Sie unsere Seiten mit Elementor bearbeiten. Gehen Sie zur Startseite Ihrer WordPress-Website und klicken Sie in der oberen schwarzen Zeile auf „Seite bearbeiten“, um den Seiteneditor zu öffnen. Lassen Sie uns zuerst die Seiteneinstellungen auf der rechten Seite ändern, wie im Bild gezeigt. Ändern Sie das Inhaltslayout auf „Full Width Stretch“ und wählen Sie „Titel deaktivieren“, da wir diese Einstellung für unsere Homepage wünschen.

Klicken Sie nun auf „Mit Elementor bearbeiten“, um den Elementor-Editor wie im Bild gezeigt zu öffnen. Lassen Sie uns hier ein kurzes Tutorial des Elementor-Editors haben. Um der Seite einen neuen Abschnitt hinzuzufügen, klicken Sie auf die Plus-Schaltfläche und wählen Sie das gewünschte Spaltenmuster aus. Um die Elemente hinzuzufügen, klicken Sie auf die 9 Punkte in der Symbolleiste auf der linken Seite, wodurch Sie eine Liste der Elemente wie im Bild erhalten. Sie können beliebige dieser Elemente per Drag-and-Drop auf die Seite ziehen und bearbeiten.

Sobald Sie auf ein beliebiges Modul auf der Seite klicken, wird seine Bearbeitungssymbolleiste auf der linken Seite angezeigt. Hier im Bild bearbeiten wir die Überschrift, daher ist „Überschrift bearbeiten“ erschienen, die 3 Registerkarten enthält. 1. ist Inhalt, der verschiedene Optionen für den Inhalt des Elements bietet. 2. ist Stil, wo Sie den Stil wie Farbe, Größe, Schriftart usw. des Elements gestalten können. Und der 3. ist Erweitert, wo Sie Animationen und andere Dinge einfügen können. Ebenso können Sie ein Textfeld unter Ihrer Überschrift auf die gleiche Weise hinzufügen, bearbeiten und gestalten.

Sie können eine Schaltfläche hinzufügen und einen Link zu einer anderen Website angeben, die sich beim Klicken öffnet. Sie können die Einstellung auf „Neues Fenster öffnen“ ändern, damit Benutzer unsere Website nicht verlassen. Sie können auch ein Symbol für Ihre Schaltfläche aus der Symbolgalerie auswählen. All dies befindet sich in der Symbolleiste „Schaltfläche Bearbeiten“ auf der linken Seite, wie im Bild gezeigt.

Anstatt jedes Element separat zu entwerfen, können wir jetzt die vorgefertigten Vorlagen verwenden und blockieren, indem wir auf das Ordnersymbol in Elementor klicken. Aus der Bibliothek können Sie ganze Seiten oder bestimmte Abschnitte oder Blöcke auswählen. Je nach Bedarf sind alle Kategorien von Blöcken verfügbar. Wählen Sie für die Zielseite einen beliebigen Block aus der Hero-Kategorie aus. Ich habe im Beispiel den Sound der Zukunft ausgewählt.

Aufbau der Homepage

Lassen Sie uns nun mit diesem Block eine Seite ähnlich der Homepage erstellen, die wir im Einführungsbereich gesehen haben. Lassen Sie uns zuerst den Hintergrund für den gesamten Abschnitt ändern. Um den gesamten Abschnitt zu bearbeiten, klicken Sie auf die sechs Punkte über dem Abschnitt, wie im Bild gezeigt. Jetzt sehen Sie die Symbolleiste „Abschnitt bearbeiten“, von der aus Sie mithilfe der Registerkarte „Stil“ den Hintergrund ändern können. Hier ist ein LINK ZU DEN KOSTENFREIEN DEMO-BILDERN, die Sie auf Ihrer E-Commerce-Website verwenden können. Laden Sie diese Bilder als nächstes in Elementor hoch und wählen Sie das Bild als Hintergrund aus. Sie können die Hintergrundüberlagerung ändern, wenn sie zu dunkel aussieht.

Jetzt können Sie die Elemente des Blocks wie zuvor bearbeiten. Ändern Sie den Text, die Farbe, die Schriftart, die Topografie usw. Sie können Duplizieren verwenden, indem Sie auf die blaue Schaltfläche oben rechts in einem Element klicken. Sie können eine Trennlinie zwischen Textfeldern hinzufügen und sie mit „Trennlinie bearbeiten“ nach Ihren Wünschen gestalten. Bearbeiten Sie nun die Schaltfläche gemäß unserem Design, z. B. Hinzufügen oder Verringern von Padding, um den Raum um sie herum zu ändern. Wir werden diese Schaltfläche später mit unserer Shop-Seite verknüpfen, Sie können ihr auch ein Symbol hinzufügen. Sie können den Stil und die Animation ändern, wenn Sie den Mauszeiger über alles unter der Symbolleiste „Schaltfläche bearbeiten“ bewegen, wie im Bild gezeigt.

Fügen Sie als Nächstes die animierte Überschrift aus den Pro Elements-Abschnitten hinzu, indem Sie in der Elementsymbolleiste nach unten scrollen. Sie können den Stil, die Form, die Farbe, die Topografie usw. der Überschrift ändern, indem Sie die Symbolleiste „Animierte Überschrift bearbeiten“ verwenden, wie im Bild gezeigt. Sie können alle Elemente und Stile überprüfen und Dinge nach Ihren Wünschen gestalten. Es ist viel Versuch und Irrtum erforderlich, um Ihr perfektes Design zu finden. Klicken Sie auf die Schaltfläche „Aktualisieren“, um diese Änderungen auf Ihre Website anzuwenden.

Als nächstes müssen wir auf der Zielseite Abschnitte erstellen, die auf verschiedene Kategorien verlinken, wie z. B. den Abschnitt für Frauen, den Abschnitt für Männer und Neuankömmlinge. Fügen Sie einen neuen 3-Spalten-Abschnitt hinzu, fügen Sie Überschrift, Text und Schaltfläche hinzu. Sie können einen erstellen und zweimal duplizieren, um Zeit und Mühe zu sparen. Auch hier müssen Sie den Text, die Stile, den Hintergrund usw. dieses Abschnitts bearbeiten, wie wir es im obigen Abschnitt getan haben. Sie können die von mir bereitgestellten Bilder für den Hintergrund für alle 3 Kategorien verwenden. Wenn Sie den Texteditor verwenden, um die Zeile zu beenden und zur nächsten Zeile zu gehen, wie hier mit der Frauenabteilung, verwenden Sie <br> wie in der Abbildung gezeigt.

Hier haben wir keine Vorlage oder Blöcke in diesem Abschnitt, also müssen Sie jeden Abschnitt von Grund auf neu erstellen und gestalten, was beim ersten Mal eine lange Aufgabe sein mag, aber Sie können alle Drag & Drop und Tricks wie Duplizieren verwenden Kopieren Sie die im obigen Abschnitt erstellte Schaltfläche "Jetzt einkaufen" und ändern Sie einfach den Stil der Schaltfläche oder bewegen Sie den Mauszeiger, anstatt sie von Grund auf neu zu erstellen. Sie müssen alle Optionen in der Bearbeitungssymbolleiste für jedes Element sehen, um herauszufinden, welches am besten zu Ihrem Geschmack passt. Dies ist eine großartige Übung für Ihr künstlerisches Gespür. Um den Abstand des Inhalts innerhalb einer Spalte zu ändern, klicken Sie auf das Symbol „Spalte bearbeiten“ oben links in der Spalte, um die Symbolleiste „Spalte bearbeiten“ zu öffnen, in der Sie die Auffüllung ändern können advancedsection, wie Sie im Bild unten sehen können.

Sie können die Zeilenspalten duplizieren und dann den Text und den Hintergrund für die anderen beiden Kategorien der Herrenabteilung und der Neuankömmlinge bearbeiten, damit Sie sie nicht erneut gestalten müssen. Sie sollten das Hintergrundbild und die Textfarbe jedes Abschnitts unterschiedlich gestalten, damit jede Kategorie deutlich sichtbar ist. Wenn das erste ein dunkles Hintergrundbild mit heller Textfarbe hat, sollte das nächste gegenüber liegen. All diese Techniken lernen Sie, wenn Sie mit dem Entwerfen beginnen und diese Effekte selbst sehen. Verwenden Sie Hintergrund für Layout, um den Text über dem Bild hervorzuheben, und passen Sie die Position des Textes mit Drag & Drop oder der Ausrichtungsoption an, damit er die Gesichter im Hintergrundbild nicht verdeckt. Sie können die Position des Hintergrundbilds auch wie zuvor mit 'Spalte bearbeiten' ändern. Klicken Sie auf die blaue Schaltfläche oben im Abschnitt, um „Abschnitt bearbeiten“ zu öffnen, und Sie können die Abschnittsbreite auf 100 % strecken.

Als nächstes werden wir Symbole hinzufügen. Fügen Sie dazu zunächst einen neuen Abschnitt hinzu und fügen Sie eine Bildbox aus der Symbolleiste von Elementor ein. Wählen Sie das Symbolbild für die Bilder, die ich bereitgestellt habe, wie im Bild gezeigt. Diese Symbolfelder sollen zum Kauf anregen, um attraktive Titel wie "Kostenloser Versand" zu geben und die Beschreibung und den Zustand im Text unten anzugeben. Gestalten Sie das Bildfeld nach Ihren Wünschen, indem Sie die Bildposition, Größe, Farbe des Titels und der Beschreibung und des Textes usw. über die Symbolleiste „Bild bearbeiten“ ändern. Duplizieren Sie es nach dem Entwerfen, damit Sie nicht alle Symbole erneut entwerfen müssen. Danach können Sie den Text jedes Felds für den gewünschten Zweck bearbeiten. Im erweiterten Abschnitt können Sie mithilfe von Padding Ränder hinzufügen, damit die Seite nicht zu voll aussieht.

Sie können den Spalten Rahmen hinzufügen, um es einprägsamer zu machen. Klicken Sie auf die Schaltfläche „Spalte bearbeiten“ und unter der Kategorie „Stil“ können Sie Rahmen hinzufügen und die Rahmen gestalten. Sie können den Randtyp, die Breite, die Platzierung, den Radius usw. auswählen. Sie können den Rand nur auf einer oder mehreren bestimmten Seiten auswählen, wie hier bei dem rechten Rand. Überprüfen Sie alle in der Symbolleiste verfügbaren Designwerkzeuge und wählen Sie selbst aus. Je mehr Sie es selbst tun, desto mehr werden Sie sich an alle Werkzeuge und Funktionen gewöhnen und es wird schneller und einfacher für Sie.

Als Nächstes fügen wir den Abschnitt „Neuankömmlinge“ hinzu. Aber bevor wir eine Trennlinie zwischen diesen Zeilen hinzufügen, sehen sie klar und unterscheidbar aus. Fügen Sie erneut einen neuen Abschnitt hinzu, fügen Sie „Teiler“ aus der Symbolleiste von Elementor hinzu und gestalten Sie ihn mit der Symbolleiste „Teiler bearbeiten“, wie im Bild gezeigt. Fügen Sie einen Text „New Arrival“ in die Trennlinie ein, der als Überschrift für den nächsten Abschnitt verwendet wird, also ändern Sie die Größe, Schriftart usw. wie im Bild gezeigt , um es attraktiver zu machen.

Produkte erstellen

Wir müssen jetzt Produkte für den Verkauf auf unserer E-Commerce-Website erstellen. Produkte können einfach oder variabel sein, einfache Produkte haben keine Auswahlmöglichkeiten wie Größe, Farbe oder Stil, während variable Produkte verschiedene Auswahlmöglichkeiten haben, wie Größe oder Farbe in der Kleidung. Wir werden lernen, beide zu erschaffen.

WooCommerce

Um Produkte zu erstellen, müssen wir ein neues Plugin hinzufügen. Gehen wir also zu Ihrem WordPress-Dashboard, klicken Sie in der Symbolleiste auf „Plugins“ und dann wie zuvor auf „Neu hinzufügen“. Suchen Sie in der Plugin-Bibliothek nach „Woocommerce“. Woocommerce ist meiner persönlichen Erfahrung nach das beste E-Commerce-Plugin. Klicken Sie auf „Installieren“ und dann auf „Aktivieren“. Jetzt öffnet sich das Woocommerce-Plugin wie im Bild gezeigt. Füllen Sie das Formular aus und klicken Sie auf „Weiter“. Wählen Sie als Nächstes Ihre Branche aus. In diesem Tutorial erstellen wir eine Website für Mode und Bekleidung. Als nächstes haben wir Produkttypen, bei denen 2 Optionen angegeben sind – Physisch und Downloads, wählen Sie beide aus und klicken Sie auf „Weiter“. Dann erhalten Sie einige Fragen, beantworten Sie diese und klicken Sie erneut auf „Weiter“.

Als nächstes müssen Sie ein Thema für Ihr Plugin auswählen, wählen Sie das Thema „Astra“. Als nächstes haben Sie die Möglichkeit, die Jetpack-Dienste zu aktivieren, was für uns hilfreich sein wird. Wählen Sie also „Ja, bitte“, was Sie zur Jetpack-Kontoseite bringt, geben Sie Ihre Daten ein und erstellen Sie ein Konto. Sie werden zu Ihrem WordPress-Dashboard weitergeleitet, aber ein neues „Woocommerce“ wäre auf Ihrer Symbolleiste verfügbar, wie im Bild gezeigt. Alle diese Steuereinstellungen werden wir später vornehmen.

Lassen Sie uns nun mit der Erstellung von Produkten beginnen. Zuerst erstellen wir ein einfaches Produkt von Woman Green Shirt, wie im Bild gezeigt.

Klicken Sie auf „Produkte“ in Ihrer Symbolleiste, wodurch die Seite „Neues Produkt hinzufügen“ geöffnet wird, wie im Bild unten gezeigt. Geben Sie den Namen und die Beschreibung des Produkts ein. Unten bei den Produktdaten wählen Sie „Einfaches Produkt“, da wir zuerst ein einfaches Produkt erstellen. Legen Sie den regulären Preis und den Verkaufspreis fest, die Sie unten planen können, wie im nächsten Bild unten gezeigt. An diesen Tagen gilt automatisch der Verkaufspreis.

Klicken Sie als Nächstes auf die Einstellungen „Inventar“ unter „Allgemein“, wo Sie die Lagerverfügbarkeit eingeben können. Sie können hier auch Nachbestellungen zulassen oder verbieten. Wenn Sie „Nicht zulassen“ angeben, werden keine Bestellungen angenommen, wenn das Produkt nicht vorrätig ist. Setzen Sie die „Schwelle für niedrigen Lagerbestand“, um benachrichtigt zu werden, wenn der Lagerbestand niedrig ist.

Geben Sie als Nächstes in der Kategorie „Versand“ das Gewicht und die Abmessungen des Produkts für Versandzwecke ein. In den „verknüpften“ Produkten können Sie „Upsells“ durchführen, die verwandte Produkte anzeigen, und Cross-Sells, die verwandte Produkte im Warenkorb anzeigen, nachdem der Benutzer das Originalprodukt gekauft hat. Fügen Sie die verwandten Produkte hinzu, die Sie den Käufern zeigen möchten, wenn sie dieses bestimmte Produkt kaufen. In der Kategorie „Erweitert“ können Sie Käufern einen Hinweis geben und Bewertungen aktivieren.

Wenn Sie nach unten scrollen, finden Sie unter diesen Einstellungen die „Kurzbeschreibung des Produkts“ wie im Bild. Schreiben Sie hier die vollständige Beschreibung gemäß unserem Beispielprodukt. Auch Schriftart und Stil der Beschreibung können Sie hier gestalten. Auf der rechten Seite, wenn Sie das Bild sehen, gibt es eine Option „Produktbild“. Klicken Sie auf „Produktbild festlegen“, um die Seite „Produktbild“ zu öffnen, auf der Sie das Bild Ihres Produkts auswählen und hochladen können. Unter dem „Produktbild“ befindet sich die „Produktgalerie“, in der Sie andere Bilder Ihres Produkts aus verschiedenen Blickwinkeln platzieren können, um die Betrachter besser zu verstehen, wie im Bild gezeigt.

Oben haben Sie „Produktkategorien“ in der Symbolleiste auf der rechten Seite, wie im Bild gezeigt. Hier können Sie Ihre Produkte kategorisieren. Lassen Sie uns also eine neue Kategorie erstellen, indem Sie auf „Neue Kategorie hinzufügen“ klicken. Geben Sie den Namen „Frauen“ ein und klicken Sie auf „Veröffentlichen“. Jetzt können Sie Ihr Produkt ansehen, indem Sie auf die Schaltfläche „Produkt ansehen“ klicken. Es zeigt, wie das Produkt den Zuschauern angezeigt wird, wenn sie darauf klicken. Ein neues Produkt-Popup wird geöffnet, in dem Sie das Produkt anzeigen und die Bilder sogar vergrößern können, um eine bessere Ansicht zu erhalten. Sie können wieder alles bearbeiten, was Sie wollen.

Wenn Ihnen der Stil und das Thema der Anzeigeseite nicht gefallen, können Sie es mit „Astra-Einstellungen“ in der rechten Symbolleiste ändern, wie im Bild gezeigt . Wenn Sie beispielsweise die Seitenleiste entfernen möchten, klicken Sie auf „Seitenleiste“ und wählen Sie „Keine Seitenleiste“. Klicken Sie auf „Aktualisieren“, um die Änderungen zu speichern, und Sie können erneut auf „Produkt anzeigen“ klicken, um die Änderungen anzuzeigen. Das war also ein Beispiel, wie man ein einfaches Produkt erstellt. Auf die gleiche Weise können Sie so viele Produkte und Kategorien hinzufügen, wie Sie möchten. Wenn Sie auf der Produktseite auf die Schaltfläche Kategorie klicken, wird eine neue Seite der Kategorie geöffnet, auf der alle Produkte dieser Kategorie angezeigt werden. An dieser Stelle wird dies sehr langweilig, aber später werden wir auch diese Seite gestalten.

Lassen Sie uns als Nächstes lernen, wie man ein variables Produkt erstellt. Auch hier müssen wir wie zuvor auf die Seite „Neues Produkt hinzufügen“ gehen. Lassen Sie uns dieses Mal ein variables Herrenprodukt kreieren. Geben Sie wie zuvor den Titel und die Beschreibung des Produkts an. Denken Sie daran, dass dies nicht die Hauptbeschreibung ist, sondern die zusätzliche kleine Beschreibung, die unten angezeigt wird. Die Hauptbeschreibung muss in „Kurze Produktbeschreibung“ geschrieben werden. Hier ändern wir die 'Produktdaten' in 'Variables Produkt'. Alle anderen Einstellungen wie Inventar, Versand, verknüpfte Produkte usw. ähneln denen des einfachen Produkts, das wir zuvor erstellt haben, sodass Sie diese Details selbst vervollständigen können.

Klicken Sie nun auf „Attribute“, wo wir unserem Produkt neue Attribute oder Eigenschaften hinzufügen. Klicken Sie dazu auf „Hinzufügen“. Als Nächstes erstellen wir, wie im Bild gezeigt, neue Attribute des Produkts wie Größe, Farbe usw. Lassen Sie uns zunächst die Größe in das Feld „Name“ eingeben. Schreiben Sie in das Feld „Werte“ zuerst Small und dann das Symbol „|“ (ohne die Klammern). Drücken Sie die Umschalttaste + die Taste über der Eingabetaste, um dieses Symbol wie im Bild gezeigt zu schreiben, schreiben Sie dann Medium und erneut dasselbe Symbol und dann Large. Sie können beliebig viele Variablen wie S, M, L, XL usw. hinzufügen, indem Sie dieses Symbol verwenden. Aktivieren Sie das Kontrollkästchen „Für alle Variationen verwendet“ und klicken Sie auf „Attribut speichern“.

Als nächstes fügen wir ein weiteres Attribut hinzu. Klicken Sie erneut auf die Schaltfläche „Hinzufügen“, schreiben Sie „Farbe“ in das Feld „Name“ und fügen Sie im Feld „Wert“ die Namen der gewünschten Farben hinzu, getrennt durch das Symbol, das wir im Attribut „Größe“ verwendet haben. Hier schreiben wir „Weiß|Blau“ als die beiden verfügbaren Optionen. Aktivieren Sie erneut das Kontrollkästchen Für Variationen verwendet und klicken Sie auf „Attribute speichern“.

Jetzt wenden wir diese Attribute auf unsere Produkte an. Klicken Sie unter „Attribute“ auf „Variationen“, wählen Sie „Variationen aus allen Attributen erstellen“ und klicken Sie auf „Los“. Klicken Sie im Popup auf „Ja“, um diese Option zu bestätigen. Dadurch werden die Optionen wie im Bild gezeigt geöffnet. Sie können sehen, dass 6 Variationen hinzugefügt wurden, indem 3 Größen mit 2 Farben kombiniert wurden, nämlich Small White, Small Blue, Medium White, Medium Blue, Large White und Large Blue.

Klicken Sie auf das erste, um die Bearbeitungseinstellungen zu öffnen, wie im Bild gezeigt. Zuerst müssen wir das Bild dieser Variante hochladen. Klicken Sie auf „Bild hochladen“ und wählen Sie das Bild aus der Galerie aus. Als nächstes müssen Sie den regulären Preis dieser Variante angeben. Dies ist ein Pflichtfeld. Auch wenn die Preise gleich sind, müssen Sie sie hier eintragen. Auch hier können Sie den Verkaufspreis hinzufügen und planen, wie wir es beim einfachen Produkt getan haben. Sie können die Bestands- und Versanddetails wie beim einfachen Produkt eingeben.

Auch hier müssen Sie den gleichen Vorgang auch für andere Variationen durchführen. Also Variationsname anklicken, Bild hochladen und den Preis Small Blue eingeben und so weiter und so fort. Hier geben wir nur das Bild und den Preis aller erforderlichen Variationen an, aber Sie können alle anderen Details gemäß Ihren eigenen Bedingungen auf Ihrer Website veröffentlichen. Über dem Namen der Variationen sehen Sie die Option „Standardformularwert“, wo Sie auswählen können, welche Variation als Standard in der Produktbox angezeigt wird, wenn die Benutzer das Produkt ansehen.

Andere Einstellungen wie die Kurzbeschreibung des Produkts ähneln denen des einfachen Produkts, das wir zuvor gemacht haben, also füllen Sie die Details gemäß Ihrem Produkt aus. Gleiches gilt für das Produktbild, wo Sie das Bild für die Standardvariante platzieren sollten, da dieses den Betrachtern zuerst angezeigt wird, wenn sie das Produkt sehen. Sie sollten Ihre verkaufsfähigste Variante als Standardprodukt festlegen. Sie müssen keine Produktgalerie für variable Produkte erstellen, da Ansichten verschiedene Bilder der Variation sehen können. Erstellen Sie eine neue Kategorie „Männer“ und aktivieren Sie ihr Kontrollkästchen, wie wir es für das einfache Produkt getan haben. Klicken Sie auf Veröffentlichen, um diese Änderungen auf der Website zu übernehmen.

Sie können jetzt auf Produkt anzeigen klicken, um zu sehen, wie die Zuschauer es sehen werden. Wie Sie auf dem Bild sehen können, öffnet sich das Produkt. Da es sich hier um ein variables Produkt handelt, haben Sie eine Liste mit Attributen und ihren Werten in ihrem Dropdown-Feld. Sie können auf diese Kästchen klicken, um verschiedene Variationen dieses Produkts anzuzeigen. Sie sehen das Bild und die Preise, die Sie für die Variation festgelegt haben, wenn Sie darauf klicken. Auch hier können Sie das Design der Produktseite ändern, wenn es Ihnen nicht gefällt, indem Sie die Astra-Einstellungen verwenden. Lassen Sie uns die Einstellungen ändern und die Seitenleiste entfernen und das Inhaltslayout auf volle Breite ändern, wie wir es aus Konsistenzgründen mit Einzelprodukt getan haben. Sie können so viele variable Produkte mit so vielen Variationen herstellen, wie Sie möchten, aber Sie müssen die Details jeder Variation ausfüllen, wie wir es hier getan haben. Mit mehr Attributen und je mehr Werten davon haben Sie also viel mehr Variationen. Beachten Sie, dass der Preis des Produkts als Bereich angezeigt wird, da er die Preise der günstigsten Variante und der teuersten Variante als Bereich anzeigt. Wir haben also gelernt, wie man sowohl einfache als auch variable Produkte erstellt.

Lassen Sie uns nun diese Produkte zu unserer Homepage hinzufügen. Gehen Sie zu Ihrer Startseite und klicken Sie auf „Mit Elementor bearbeiten“. Scrollen Sie nach unten bis zum Ende, wo wir die Trennlinie für Neuankömmlinge erstellt haben. Klicken Sie rechts in der Symbolleiste von Elementor auf die Leiste „Such-Widgets“ und geben Sie Produkt ein. Wählen Sie das Produktelement aus und ziehen Sie es per Drag-and-Drop in das Feld auf Ihrer Seite unter der Trennlinie für Neuankömmlinge. Dort sehen Sie die Produkte.

In der Symbolleiste „Produkte bearbeiten“, wie Sie im Bild sehen können, haben Sie die Anzahl der Produktspalten und -zeilen, die Sie hier anzeigen möchten, sodass nicht alle Ihre Produkte auf dieser Seite angezeigt werden. Sie können auch die Stilkategorie verwenden, um den Spaltenabstand und den Zeilenabstand, die Ausrichtung und den Rahmen für das Bild zu ändern. Auch hier können Sie den Titel des Produktnamens wie Farbe, Schriftart, Abstand, Topografie usw. gestalten. Das Gleiche gilt für die Bewertungssterne, sowohl gefüllt als auch leer. Auch für den Preis können Sie die Schriftart, Farbe, Topografie usw. sowohl für den regulären als auch für den Verkaufspreis ändern. Als nächstes kommt die Schaltfläche, Sie können die Schaltfläche beliebig gestalten, z. B. Hintergrundfarbe, Textfarbe, Rahmenfarbe usw. Die Verwendung von Elementor macht all diese Bearbeitungen so einfach. Sie müssen nur alle verfügbaren Bearbeitungswerkzeuge verwenden und damit spielen, und alle Ergebnisse werden vor Ihren Augen sein.

Sie haben auch die Option „Sales Flash“, die Sie so gestalten können, dass sie angezeigt wird, wenn Sie einen Verkauf haben, der ein Flash-Banner über Ihrem Produkt anzeigt, wenn es einen Verkauf für das Produkt gibt. Verwenden Sie dies, um Kunden auf Ihre Produkte aufmerksam zu machen, wenn sie Ihre Homepage besuchen. Alle Designoptionen ähneln denen, die wir bisher gelernt haben, sodass Sie durch alle wachsen und das Design auswählen können, das am besten zu Ihnen passt.

In der Option Abfrage können Sie die Produkte auswählen, die in diesem Abschnitt angezeigt werden sollen. Wenn Sie beispielsweise möchten, dass nur das Damenprodukt in diesem Abschnitt angezeigt wird, wählen Sie im Feld „Quelle“ die Option „Neueste Produkte“ aus, da es sich um einen Abschnitt für Neuankömmlinge handelt, und klicken Sie auf „Einschließen“. Geben Sie dann in das Feld „Einschließen nach“ den Begriff ein und wählen Sie die Option „Begriff“ aus, wodurch das Begriffsfeld angezeigt wird. Schreiben Sie in das Begriffsfeld „Damen“ und wählen Sie „Produktkategorie: Damen“ aus, wie im Bild gezeigt. Klicken Sie auf Aktualisieren, um Ihre Website wirksam werden zu lassen. Auf diese Weise können Sie Produktanzeigebereiche in jedem Teil Ihrer Website erstellen.

Elementor E-Commerce-Vorlage

Ich habe Ihnen die Vorlage der E-Commerce-Website, die wir gerade vorbereitet haben, hier kostenlos auf meiner Website unter diesem Link https://darrelwilson.com/product/elementor-ecommerce-template-package zur Verfügung gestellt. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Plugins

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

  • Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

  • Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

  • Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

  • Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

  • Kundenspezifische Produktseite

Jetzt werden wir unsere Produktseite mit der gleichen Technik anpassen. Wenn Sie jetzt auf ein beliebiges Produkt klicken, wird die Produktseite im Standarddesign angezeigt, wie wir es bei der Erstellung der Produkte gesehen haben. Gehen Sie erneut zum Elementortheme-Builder und fügen Sie ein neues Einzelproduktdesign hinzu, indem Sie auf das +-Symbol daneben klicken. Sie können die hier bereitgestellten Vorlagen verwenden, aber wir werden für dieses Tutorial eine von Grund auf neu erstellen. Fügen Sie also zuerst einen 2-teiligen Abschnitt hinzu und klicken Sie auf die Registerkarte Elemente. Hier sehen Sie alle Elemente, die speziell für Produkte erstellt wurden, wie im Bild gezeigt, die wir beim Erstellen einer Seite nicht sehen.

Fügen Sie zuerst einen Breadcrumb hinzu, der der Kategorisierung des Produkts entspricht. Jetzt können Sie den Stil des Breadcrumbs wie Farbe, Größe, Füllung usw. mithilfe der Symbolleiste bearbeiten, wie Sie im Bild sehen können. Fügen Sie auf der rechten Seite das Element „Produkttitel“ aus der Seitenleiste hinzu und gestalten Sie den Stil auch mit der Symbolleiste wie zuvor. Als nächstes fügen wir das Produktbild auf die gleiche Weise hinzu. Klicken Sie auf das Element Produktbild und bearbeiten Sie dessen Stil mithilfe der Symbolleiste. Als nächstes fügen Sie die Kurzbeschreibung auf ähnliche Weise hinzu. Sie können eine Trennlinie zwischen Titel und Beschreibung einfügen. Als nächstes müssen wir die Produktkategorie eingeben. Wählen Sie dazu das Element „Produkt-Meta“ aus und legen Sie es unter Beschreibung ab und gestalten Sie es auch. Fügen Sie als nächstes das Element „Preis“ darunter hinzu und Sie können den Stil auch wieder ändern. Setzen Sie als Nächstes eine Schaltfläche „In den Warenkorb“ unter den Preis. Da es sich um ein variables Produkt handelt, werden die Variationsmöglichkeiten automatisch angegeben. Als Nächstes können Sie soziale Symbole hinzufügen und Formulare, zusätzliche Informationen usw. nach Belieben überprüfen. Klicken Sie auf „Veröffentlichen“, nachdem Sie die gewünschten Elemente auf Ihrer Produktseite hinzugefügt und gestaltet haben. Fügen Sie in die Bedingung auf der Anzeigeseite „Alle Produkte“ ein, um diese Vorlage auf alle von Ihnen erstellten Produkte anzuwenden. Sie können verschiedene Themen für verschiedene Produktkategorien erstellen, wenn Sie möchten, Sie müssen nur die Bedingung ändern, um sie nur in dieser bestimmten Kategorie einzuschließen. Alle unsere Produktseiten werden auf diese Vorlage aktualisiert, da wir sie auf alle Produkte angewendet haben.

  • Benutzerdefinierte Checkout- und Warenkorbseite

Jetzt werden wir die benutzerdefinierten Kassen- und Warenkorbseiten entwerfen. Checkout- und Cart-Seiten sind nicht im Theme Builder enthalten, also werden wir sie mit Elementor bearbeiten. Gehen Sie zur Warenkorbseite und klicken Sie auf Mit Elementor bearbeiten. Wie jede andere Seite können Sie sie mit den Elementor-Elementen nach Ihren Wünschen bearbeiten und gestalten. Texte, Icons, Coupon-Buttons etc. kannst du mittlerweile selbst bearbeiten und Schriftart, Farbe, Topographie etc. selbst gestalten. Aber den Teil des eigentlichen Themes wie den Titel Cart hier zu bearbeiten ist mit Elementor nicht möglich. Um dies zu bearbeiten, müssen Sie es in WordPress selbst bearbeiten, also klicken Sie auf „Seite bearbeiten“ und aktivieren Sie in der unteren rechten Ecke das Kontrollkästchen „Titel deaktivieren“ im Abschnitt „Deaktivieren“, wie im Bild gezeigt, wie wir es zuvor beim Entwerfen der gemacht haben Thema WordPress.

Sie können die Checkout-Seite bearbeiten und gestalten und auf die gleiche Weise verwenden. Auf die gleiche Weise können Sie die Seite „Mein Konto“ Ihrer Kunden gestalten, da das Standarddesign dieser Seite nicht sehr gut aussieht. Sie können es mit Elementor bearbeiten. Und ich habe auch einen Link früher gegeben, in dem ich auch die ZIP-Datei für die Vorlagen all dieser Seiten abgelegt habe, damit Sie sie dann schnell gestalten können.

Woocommerce-Einstellungen

Sie haben jetzt gelernt, wie Sie Seiten mit Elementor und Theme Builder erstellen, und Ihre Website-Erstellung ist abgeschlossen. Jetzt müssen wir uns mit den Woocommerce-Einstellungen vertraut machen, um diese Website zum Laufen zu bringen. Gehen Sie zum WordPress-Dashboard, klicken Sie auf Woocommerce und wählen Sie „Einstellungen“, wodurch die Registerkarte „Allgemeine Einstellungen“ von Woocommerce geöffnet wird, wie im Bild gezeigt.

  • Allgemeine Einstellungen

Hier können Sie Ihre Adresse eingeben und die Länder auswählen, in die Sie verkaufen möchten, Steuern aktivieren und Gutscheincodes aktivieren. Aktivieren Sie alle diese Kontrollkästchen, um sie zu aktivieren. Darunter können Sie Ihre Währung je nach Land ändern.

  • Registerkarte „Produkt“.

Die nächste Registerkarte ist die Registerkarte Produkt in der obersten Reihe der Einstellungen, wo Sie viele Einstellungen finden, von denen die meisten sehr spezifisch für diesen Bereich sind, den wir nicht verwenden werden, mit Ausnahme des Bewertungsbereichs, in dem Sie Bewertungen und Sternebewertungen für die Produkte aktivieren können. Außerdem können Sie das verifizierte Benutzer-Tag echten Käufern in Bewertungen zeigen, wie im Bild gezeigt. Sie können auch die Versanddetails der Produkte wie Gewicht, Abmessungen usw. angeben.

  • Registerkarte Steuern

Als nächstes auf der Registerkarte Steuern, wo Sie die automatische Steuerberechnung aktivieren oder deaktivieren können. Die Steuerberechnung kann je nach Land und Unternehmen sehr kompliziert sein, daher funktioniert die automatische Berechnung möglicherweise nicht für Sie. Sie haben jedoch die Möglichkeit, Steuern für verschiedene Lieferadressen und basierend auf dem Warenkorbartikel festzulegen. Ich habe einen Link zu www.taxjar.com angegeben, wo Sie kostenlose und kostenpflichtige Dienste erhalten, die Ihnen bei der Steuerberechnung helfen. Sie können auch auswählen, ob Preise mit oder ohne Steuern an verschiedenen Stellen angezeigt werden sollen, z. B. im Shop sollten Sie den Preis ohne Steuern anzeigen und im Warenkorb und an der Kasse sollte er im Allgemeinen einschließlich Steuern sein.

  • Registerkarte Versand

Der nächste Reiter ist „Versand“. Klicken Sie zuerst auf „Versandzone hinzufügen“, fügen Sie den Namen der Zone und bestimmte Regionen der Zone hinzu und richten Sie Ihre Versandtarife unter verschiedenen Versandmethoden ein, wie im Bild gezeigt. Hier haben wir eine Flatrate-Methode verwendet, bei der wir eine Pauschale von 5 USD angeben, und die andere ist die kostenlose Versandmethode. Klicken Sie unten auf die Schaltfläche Bearbeiten, um eine Bedingung für den Mindestbestellwert oder die Gutscheinanforderung hinzuzufügen. Hier haben wir eine Mindestbestellanforderung von 50 $ ausgewählt. Sie können für jede Zone mehrere Zonen und mehrere Versandmethoden und -tarife hinzufügen. Sie haben auch einen Standardwert für die Standorte, die von keiner Ihrer Zonen abgedeckt werden, für die wir keine spezifischen Tarife angegeben haben. Hier haben wir also standardmäßig einen Standardsatz von 10 $ für diese Zonen festgelegt.

  • Registerkarte Konten und Datenschutz

Registerkarte „Konten und Datenschutz“, auf der Sie die Option auswählen können, vor dem Kauf ein Konto der Kunden zu erstellen oder ihnen zu erlauben, zunächst ohne Konto zu kaufen und später zum Zeitpunkt der Kasse ein Konto zu erstellen, sowie verschiedene andere Optionen bei der Erstellung von Konto wie Benutzername, Passwörter usw., die Sie selbst überprüfen können, da sie sehr selbsterklärend sind. Außerdem können Sie hier eine gesetzlich vorgeschriebene Datenschutzerklärung hinzufügen. Sie haben auch Optionen bezüglich des Zeitraums, in dem die personenbezogenen Daten der Benutzer unter Aufbewahrung personenbezogener Daten gelöscht werden.

  • E-Mail-Registerkarte

Außerdem haben wir die Registerkarte „E-Mail“, auf der Sie die Einstellungen für alle automatisierten E-Mails vornehmen, die Sie von der Website erhalten und an die Kunden senden, z. B. bei einer neuen Bestellung oder einer stornierten Bestellung. Sie können das Format der E-Mail, die Sie in all diesen Situationen erhalten oder an den Kunden senden, hier bearbeiten. Sie können zu diesem Zweck ein Plugin hinzufügen, um E-Mails in besserer Qualität zu erhalten. Gehen Sie zu Plugins und installieren Sie „Kadence Woocommerce Email Designers“ und. Mit diesem Plugin können Sie die E-Mail-Inhalte, Kopfzeilen, Fußzeilen, Texte usw. mit ihren benutzerdefinierten Stilen gestalten, die hier bearbeitet werden können, indem Sie zum Plugin in der Woocommerce-Seitenleiste gehen, wie im Bild gezeigt.

  • Zahlungen

Jetzt gehen wir zur Registerkarte „Zahlungen“, wo wir die Zahlungsmethoden auswählen können, die unseren Kunden erlaubt sind. Es stehen viele Optionen zur Auswahl, aber wir werden hier „Stripes“ und „PayPal“ aktivieren, indem wir auf die Schaltfläche „Aktivieren“ klicken, wie im Bild unten gezeigt.

  1. PayPal

Lassen Sie uns nun zuerst die Zahlungseinstellungen für PayPal einrichten, also klicken Sie auf „Einrichten“, um die Seite mit den PayPal-Einstellungen zu öffnen, wo Sie den Titel, die Beschreibung für das Zahlungsfeld und Ihr PayPal-E-Mail-Konto eingeben können, und klicken Sie auf „Änderungen speichern“. ', um Ihre Website mit PayPal zu integrieren. Wenn Sie kein PayPal haben, können Sie eines erstellen, indem Sie auf deren Website gehen und sich kostenlos anmelden. Sie müssen sich nur mit einer E-Mail-Adresse anmelden, die Sie wie im Bild gezeigt in das E-Mail-Feld von PayPal eingeben. Es ist eine der beliebtesten verfügbaren Zahlungsmethoden.

  1. Streifen

Als nächstes werden wir Zahlungen mit Streifen einrichten. Klicken Sie also auf die Schaltfläche „Verwalten“ daneben. Gleicher Weg zu den PayPal-Einstellungen, geben Sie zuerst den Titel und die Beschreibung für das Zahlungsfeld ein. Als nächstes haben Sie den veröffentlichbaren Testschlüssel und den geheimen Testschlüssel. Sie können zu www.stripe.com gehen und dort ein kostenloses Konto erstellen, Sie müssen lediglich ein Bankkonto haben, um ein Konto zu erstellen. Sie können Ihr Stripe-Konto in Ihre Website integrieren, nachdem Sie es erstellt haben, was ein kostenloser Service ist. Klicken Sie dazu nach dem Einloggen in Ihr Stripe-Konto auf „Entwickler“ und wählen Sie „API-Schlüssel“ aus, wie im Bild gezeigt. Kopieren Sie den veröffentlichbaren Schlüssel, der hier auf Ihrer Website angezeigt wird, in das Feld für den veröffentlichbaren Schlüssel und den geheimen Schlüssel in das Feld für den geheimen Schlüssel. Klicken Sie auf „Änderungen speichern“ und jetzt ist Ihre Website bereit, Kreditkartenzahlungen von überall auf der Welt gegen eine sehr niedrige Transaktionsgebühr zu akzeptieren. Hier haben wir die Schaltfläche Testdaten anzeigen auf unserem Stripe-Konto immer noch aktiviert und auf der Seite mit den Woocommerce-Einstellungen haben wir das Kontrollkästchen „Testmodus aktivieren“ aktiviert, aber wenn Sie bereit sind, mit Ihrem Zahlungssystem live zu gehen, deaktivieren Sie es .

Sie können jetzt Ihre Website testen, indem Sie eine Bestellung aufgeben und etwas kaufen, und Sie können auch bezahlen, um zu überprüfen, ob alles in Ordnung ist bestellen, ihre Versand- und Rechnungsadresse bearbeiten, ihre Zahlungsmethoden und ihre Kontodaten einrichten. Alle ihre vergangenen Bestellungen werden auch in ihrer Bestellliste mit ihrem Status angezeigt.

Optimierung für Mobilgeräte

Mobile Optimierung bedeutet, die Website für mobile Geräte benutzerfreundlich aussehen zu lassen. Die mobile Optimierung ist im heutigen Szenario sehr wichtig, da a) viele Menschen mobile Geräte zum Surfen im Internet verwenden und b) gemäß dem neuen Google-Algorithmus, wenn Ihre Website nicht für Mobilgeräte optimiert ist, sie Ihren Rang verringern, was für Sie katastrophal sein kann Website-Traffic und SEO.

Die mobile Optimierung ist mit dem Elementor-Editor ganz einfach. Lassen Sie uns noch einmal zum Elementor-Dashboard zurückkehren. Am unteren Rand der Symbolleiste finden Sie die Schaltfläche „Responsive Mode“. Wenn Sie darauf klicken, öffnet sich eine Dropdown-Liste mit 3 Optionen, nämlich. Desktop, Tablet und Handy. Bisher haben wir unsere Website so gestaltet, wie sie für Desktop-Zuschauer aussehen würde. Klicken Sie nun auf „Tablet“, um eine Vorschau zu erhalten, wie es in einem Tablet-Browser aussehen würde. Ebenso können Sie es auch für den „Mobile“-Modus überprüfen. Sie können die Webseite bearbeiten, wenn etwas nicht in Ordnung zu sein scheint oder optisch nicht ansprechend erscheint.

Wie Sie im Bild sehen können, ist hier der erste Titel zu groß für den Tablet-Modus und „50 % OFF“ zu klein, sodass Sie ihn anpassen müssen. Überprüfen Sie alle Elemente der Seiten, um festzustellen, ob etwas neu gestaltet werden muss. Alle diese Änderungen gelten für den Tablet-Modus, wenn Sie auf Aktualisieren klicken. Gleiches gilt für den mobilen Modus. Passen Sie die Größe der Überschriftentexte, die Ausrichtung der Schaltflächen, Banner und Überschriften an.

Sie können einige der Abschnitte deaktivieren, die Sie in der mobilen oder Tablet-Version benötigen, wenn Sie der Meinung sind, dass dies für sie nicht wichtig ist. Wählen Sie dazu den Abschnitt aus, den Sie ausblenden möchten, gehen Sie zur erweiterten Kategorie in der Symbolleiste „Abschnitt bearbeiten“, klicken Sie auf „Responsiv“ und unter Sichtbarkeit können Sie den Abschnitt auf der Desktop-, Tablet- oder Mobilversion ausblenden, wie in gezeigt das Bild. Das Gleiche können Sie mit anderen Abschnitten oder Elementen tun. Sie können alles anders für den Tablet- oder Mobilmodus gestalten, wie Hintergrundbilder, Schriftgröße oder irgendetwas.

Kontakt Formular

Lassen Sie uns nun weitermachen und lernen, wie man eine „Kontakt“-Seite erstellt, auf der Besucher ihre Kontaktinformationen ausfüllen können und die direkt zu Ihrer E-Mail führt. Das grundlegende Design der Seite können Sie selbst vornehmen, indem Sie den Elementor-Editor oder den Theme Customizer verwenden. Wichtig ist nur das Kontaktformular wie im Bild zu sehen. Sie suchen also ein Formular in der Symbolleiste von Elementor und ziehen es per Drag & Drop auf den Abschnitt. Sie können den Text und das Design des Formulars mithilfe der Symbolleiste „Formular bearbeiten“ bearbeiten, was Sie meiner Meinung nach inzwischen selbst tun könnten. Es gibt viele erweiterte Einstellungen in der Symbolleiste Formular bearbeiten, die hier nicht behandelt werden, aber das grundlegende Formular, das Sie erstellen können.

Gutscheine

Um Gutscheine zu Ihrer Website hinzuzufügen, klicken Sie in der oberen Leiste neben der Schaltfläche „Anpassen“ auf „+ Neu“ und wählen Sie „Gutscheine“. Die Coupons in der seitlichen Symbolleiste von WordPress befinden sich im Abschnitt „Marketing“, wie im Bild gezeigt. Hier können Sie einen neuen Gutscheincode hinzufügen, die Rabattart als prozentualen Rabatt, festen Warenkorbrabatt oder festen Produktrabatt auswählen, den Betrag oder Prozentsatz des Rabatts und das Ablaufdatum für den Gutschein eingeben. Unter „Nutzungsbeschränkungen“ können Sie Bedingungen wie Mindestausgaben, individuelle Nutzung oder Kombination mit anderen Coupons festlegen, Produkte oder Produktkategorien in den Coupon einschließen oder davon ausschließen. Unter dem Nutzungslimit können Sie auswählen, wie oft dieser Gutschein verwendet werden kann, oder ihn auf ein bestimmtes Produkt beschränken und die Nutzung durch einen einzelnen Kunden begrenzen. Klicken Sie auf Veröffentlichen, um diesen Coupon auf der Website anzuwenden, und testen Sie ihn auf der Warenkorbseite, indem Sie den Couponcode beim Kauf anwenden.

Ich hoffe wirklich, dass dieses Tutorial für die Leser von Vorteil war und Sie jetzt selbst eine Website von Grund auf neu erstellen können. Wenn Sie Hilfe benötigen, können Sie meine Website und meine Facebook-Seite besuchen und einen Kommentar hinterlassen. Ich habe dort unzählige andere Ressourcen zum Erstellen von Websites und zur Verwendung von Elementor, die Sie sich ansehen können. Vielen Dank für das Lesen dieses Tutorials und Ihre Rückmeldungen und Fragen sind immer willkommen.