Flatesome Thema
Flatsome ist ein leistungsstarkes WordPress-Theme, das für E-Commerce-Websites entwickelt wurde und mit WooCommerce-Integration geliefert wird.
Es ist eines der beliebtesten WooCommerce-Themes auf ThemeForest. Zum Zeitpunkt des Schreibens dieses Tutorials waren es über 174.500 Verkäufe und eine fantastische 4,8-Sterne-Bewertung aus über 6.600+ Bewertungen.
Flatsome wurde in erster Linie für Anfänger und nicht technisch versierte Benutzer entwickelt.
Dies ist ideal für Leute, die mit einem Online-Geschäft beginnen möchten, aber nicht wissen, wie man programmiert oder das Budget hat, um einen professionellen Programmierer einzustellen. Mit Flatsome können Sie mit einfachen und intuitiven Tools eine professionell aussehende Website erstellen.
Jetzt ist Flatsome vollgepackt mit vielen tollen Features und Funktionen. Um zu zeigen, was verfügbar ist und wie es funktioniert, haben wir ein kurzes Tutorial, das Ihnen zeigt, wie Sie mit Flatsome eine WooCommerce-Produktseite erstellen.
Fangen wir also ohne weiteres an:
Inhaltsverzeichnis:
- Flatesome Thema
- Unterschied zwischen Flatsome, WooCommerce und WordPress
- Erstellen Sie eine WooCommerce-Produktseite mit dem Flatsome-Thema
- Schritt 1: Wählen Sie ein Layout für die Produktseite
- (Optional) Schritt 2: Produktseite manuell erstellen
- Schritt 3: Passen Sie die Produktseite an
- Einpacken
Unterschied zwischen Flatsome, WooCommerce und WordPress
Wenn wir unsere neuen Leser begrüßen, müssen wir einige notwendige Informationen eingeben, um sicherzustellen, dass alle unsere Leser auf derselben Seite sind. Hier werden wir den Unterschied in allen drei Terminologien diskutieren, die wir in diesem Artikel verwenden werden.
Beginnen wir mit WordPress. Es ist eine Plattform, auf der Sie verschiedene Themen und plugin installieren, um Ihre Website zu erstellen. Es stehen Tausende von plugin und Themes zur Verfügung, um andere Aufgaben gemäß Ihren Anforderungen zu erfüllen.
WooCommerce ist ein plugin wir auf WordPress installieren und mit dem Sie unserer Website verschiedene Funktionen hinzufügen können. Mit der Installation dieses plugin können wir unsere Website und unseren Online-Shop mit zusätzlichen Funktionen wie Warenkorb, Zahlungsabwicklung, Produktmanagement usw. ausstatten.
Eines der wichtigsten Elemente ist jedoch der Ausblick auf unsere Website. Flatsome ist ein Thema, mit dem wir die Perspektive unserer Website an unsere Wünsche anpassen können. Wenn Ihr Firmenlogo beispielsweise orange ist, möchten Sie die Farbe Ihrer Website reflektieren. Es ist das, was Flatsome Ihnen bieten kann.
Erstellen Sie eine WooCommerce-Produktseite mit dem Flatsome-Thema
Da alle unsere Leser Kenntnisse über WordPress, WoCommerce und Flatsome haben, ist es Zeit für uns, die Anpassung unserer Produktseite mit dem fantastischen UX-Builder, der mit dem Flatsome-Thema geliefert wird, fortzusetzen. Es ist eine Drag & Drop-Funktion, die das Leben des Designers extrem einfach macht.
Fast jeder hat online eingekauft, wahrscheinlich aufgrund der herausfordernden Zeiten, mit denen wir in den letzten Monaten konfrontiert waren. Zu Hause zu bleiben war für uns alle die sicherste Lösung. Aus diesem Grund sind sich alle unsere Leser einig, dass ein Online-Shop im Vergleich zu einer Standard-Website viel komplizierter ist.
Mit Hilfe von WooCommerce und Flatsome ist diese Aufgabe jedoch extrem einfach geworden. Sie müssen sich hinsetzen und planen, wie Ihre Website aussehen wird, und das ist es. WooCommerce hilft Ihnen bei den Builder-Optionen. Mit Drag & Drop können Sie in wenigen Minuten einen voll funktionsfähigen Online-Shop erstellen.
Mit WooCommerce und Flatsome können Sie Ihren Ideen für einen Online-Shop ein ganz neues Leben einhauchen. Ihre Website muss ein modernes und schönes Aussehen haben, damit sie Kunden anziehen kann. Daher ist Flatsome die beste Lösung für all Ihre Probleme, also laden Sie es hier und lassen Sie uns beginnen.
Flatsome hat einige fantastische Funktionen, aber einer der Teile ist, dass es zu einer Top-Wahl von mehr als 300.000 Benutzern geworden ist. Ein ultimatives Tool hilft bei der Erstellung einiger enorm reaktionsschneller Websites, ohne eine einzige Zeile codieren zu müssen. Darüber hinaus macht es seine Fähigkeit, einige sehr kreative und einzigartige Online-Shops zu erstellen, noch wertvoller.
Lassen Sie uns also ohne weitere Zeit mit dem Tutorial fortfahren. Dieses Tutorial führt Sie durch den gesamten Prozess des Entwerfens der Produktseite. Die Bilder helfen Ihnen dabei, eine bessere Vorstellung davon zu bekommen, wie die Aufgabe den Prozess durchlaufen wird.
Schritt 1: Wählen Sie ein Layout für die Produktseite
Zunächst wählen wir ein Layout der Produktseite aus. Diese Auswahl erstellt eine Basisseite für unseren Online-Shop, die wir später nach unseren Wünschen anpassen werden. Diese Schritt-für-Schritt-Anleitung führt Sie durch den Prozess der Anpassung der Seite.
Für dieses ex amp le, werden wir mit der Classic - Shop - Option fortsetzen. Es gibt jedoch keine Einschränkung für Sie. Der Anpassungsprozess ist für jedes ausgewählte Layout ähnlich. Der einzige Unterschied wäre, dass sich die Grundstruktur der Seite von der anderen unterscheidet.
Als wir zum Produkt-Customizer übergingen, gaben wir ihm den Namen der linken Seitenleiste mit voller Höhe.
Zum Anpassen der Produktseite stehen zwei Optionen zur Verfügung. Die erste ist mit dem UX Builder durchzuführen, während die andere die Seite manuell erstellt. Wenn Sie die zweite Option auswählen, müssen Sie zur offiziellen Dokumentation gehen und Shortcodes suchen. Wenn Sie ein Anfänger sind und dies Ihre erste Erfahrung beim Aufbau eines Online-Shops ist, empfehle ich diese erste Option.
(Optional) Schritt 2: Produktseite manuell erstellen
Hier ist ein Screenshot der offiziellen Dokumentationsseite von Flatsome. Sie können das Wort Shortcodes eingeben und danach suchen.
Sobald Sie auf Suchen klicken, wird eine Liste der Shortcodes auf dem Bildschirm angezeigt. Sie können die Shortcodes auswählen, die für die Produktseite wichtig sind. Die Verwendung von Shortcodes erfordert weniger Aufwand, es ist jedoch wichtig, dass Sie ein wenig praktische Erfahrung mit WordPress und der Verwendung von Shortcodes haben.
Hier ist die Liste der Shortcodes, die Sie auf der Website zum Erstellen von Seiten verwenden können.
In diesem ex amp le, werden wir die volle Höhe linken Seitenleiste Layout Anpassung; Daher werden wir den Code für das Design kopieren. Das Folgende ist ein Bild der angewendeten, aber Sie können es einfach aus der Struktur kopieren.
Beginnen Sie mit der Erstellung eines Blocks mit einem Titel. Wenn Sie einen Kopf entwickeln möchten, müssen Sie auf "Neu hinzufügen" klicken, der unter UX-Blöcken in Ihrem Dashboard verfügbar ist.
Sie können den Block nach Ihren Wünschen benennen. Hier in diesem ex amp le haben wir die Vereinigung als Namen ‚Volle Höhe linke Seitenleiste Layout.‘ Als nächstes können Sie die Shortcodes im Blockeditor sehen. Sobald Sie das Kopieren der gewünschten Shortcodes abgeschlossen haben, können Sie auf Veröffentlichen klicken.
Nach diesem kleinen Schritt werden wir auf Augenhöhe sein, wo wir unsere Seite nach unseren Wünschen anpassen können. Navigieren Sie nun zur Designoption für die Produktseite und klicken Sie auf das Symbol für das benutzerdefinierte Layout.
Nach Abschluss des Vorgangs können Sie jetzt Blöcke aus der Dropdown-Liste Benutzerdefiniertes Produktlayout erstellen.
Wählen Sie den soeben erstellten Block. Unser Hauptziel beim Erstellen dieses Blocks war es, daraus eine Produktseite zu erstellen. Nach diesem ex amp le, links über die gesamte Höhe der Seitenleiste Layout der Block ist, während an Ihrem Ende, wird es , wie Sie genannt haben sein.
Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche Veröffentlichen. Die Einstellungen werden gespeichert.
Schritt 3: Passen Sie die Produktseite an
Es ist Zeit für uns, mit der Anpassung zu beginnen. Zunächst navigieren wir auf der Seite mit den vorhandenen Produkten vom Front-End aus, das wir zuvor in den Schritten festgelegt haben.
Es ist wichtig, dass Sie ein bestimmtes Produkt auswählen, das wir einrichten müssen. Sie sollten vollständige Details und Bilder der Arbeit haben, die wir anpassen müssen. Auf diese Weise wird es einfacher, den von Ihnen erstellten Seitenabschnitt zu visualisieren.
Die UX Builder-Option ist sichtbar. Klicken Sie einfach auf die Schaltfläche, um die Anpassung zu starten.
Nachdem der UX Builder geöffnet wurde, können Sie dem Bild entnehmen, dass die Elemente der Produktseite im linken Bereich Ihrer Produktseite verfügbar sind.
Das linke Seitenfeld ist der Block, den wir ursprünglich erstellt haben. Wir haben es mit Hilfe der Shortcodes aus der Dokumentation erstellt.
Sie haben die Möglichkeit, die Elemente über das linke Seitenfeld neu anzuordnen und die Einstellungen über die Elementoption zu ändern. In diesem Beispiel amp wir den im linken Menü verfügbaren Preis neu.
Darüber hinaus können Sie Elemente aus der Builder-Vorschau neu anordnen und zusätzliche Komponenten auf der Builder-Produktseite hinzufügen. In dieser Demo wurden die Produktregisterkarten und das zugehörige Produkt mit nur einem einfachen Drag-and-Drop neu angeordnet.
Mit der umfangreichen Drag & Drop-Funktion ist Flatsome bereit, Ihnen das zu bieten, wonach Sie auf Ihrer Website suchen. Mit hochgradig anpassbaren Modulen können Sie mühelos einige fantastische Seiten erstellen. Die Drag & Drop-Funktion macht das Leben noch komfortabler.
Einpacken
In der heutigen Zeit ist ein Online-Geschäft unerlässlich, da die Menschen lieber zu Hause bleiben, um sicher zu sein. Bauen Sie also mit Flatsome den ersten Online-Shop Ihres Unternehmens auf und faszinieren Sie Ihre Kunden mit seiner Einzigartigkeit und Kreativität. Darüber hinaus gibt es im Inhaltseditor kein Durcheinander von Code, nur ein paar Shortcode-Zeilen. Flatsome ist zweifellos das beste Thema, das mir begegnet ist. Sie müssen sich also nicht nach einem anderen Thema umsehen. Klicken Sie einfach auf den Download- Button und beginnen Sie sofort mit dem Aufbau Ihres benutzerdefinierten Online-Shops.
