Flatsome ist ein leistungsstarkes WordPress-Theme, das für E-Commerce-Websites entwickelt wurde und über eine WooCommerce-Integration verfügt.
Es ist eines der beliebtesten WooCommerce-Themen auf ThemeForest. Zum Zeitpunkt der Erstellung dieses Tutorials gab es über 174.500 Verkäufe und eine fantastische 4,8-Sterne-Bewertung aus über 6.600 Rezensionen.
Flatsome ist in erster Linie für Anfänger und nicht technisch versierte Benutzer konzipiert.
Dies ist ideal für Leute, die mit einem Online-Geschäft beginnen möchten, aber nicht wissen, wie man programmiert, oder nicht über das Budget verfügen, um einen professionellen Programmierer zu engagieren. Mit Flatsome können Sie mit einfachen und intuitiven Tools eine professionell aussehende Website erstellen.
Jetzt ist Flatsome vollgepackt mit unzähligen tollen Features und Funktionalitäten. 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.
Also, ohne weitere Umschweife, fangen wir an:
Inhaltsverzeichnis:
Während wir unsere neuen Leser willkommen heißen, müssen wir einige notwendige Informationen eingeben, um sicherzustellen, dass alle unsere Leser auf dem gleichen Stand sind. Hier werden wir den Unterschied in allen drei Terminologien diskutieren, die wir in diesem Artikel verwenden werden.
Beginnen wir mit WordPress. Es handelt sich um eine Plattform, auf der Sie verschiedene Themes und plugin installieren, um Ihre Website zu erstellen. Es stehen Tausende von plugin und Themes zur Verfügung, um je nach Ihren Anforderungen andere Aufgaben zu erfüllen.
WooCommerce ist ein plugin das wir auf WordPress installieren und das es Ihnen ermöglicht, unserer Website verschiedene Funktionen hinzuzufügen. Mit der Installation dieses plugin können wir unsere Website und unseren Online-Shop mit zusätzlichen Funktionalitäten wie Warenkorb, Zahlungsabwicklung, Produktverwaltung usw. ausstatten.
Zu guter Letzt ist eines der wichtigsten Elemente das Erscheinungsbild unserer Website. Flatsome ist ein Theme, 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 widerspiegeln. Das ist es, was Flatsome Ihnen bieten kann.
Da alle unsere Leser Kenntnisse über WordPress, WoCommerce und Flatsome haben, ist es für uns an der Zeit, mit der Anpassung unserer Produktseite mit dem fantastischen UX-Builder fortzufahren, der mit dem Flatsome-Theme geliefert wird. Es handelt sich um eine Drag-and-Drop-Funktion, die dem Designer das Leben extrem erleichtert.
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 darüber 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 soll, und das ist alles. WooCommerce steht Ihnen mit seinen Builder-Optionen zur Seite. Mit Drag & Drop können Sie in nur wenigen Minuten einen voll funktionsfähigen Online-Shop erstellen.
Mit WooCommerce und Flatsome können Sie Ihren Vorstellungen von einem Online-Shop ein völlig neues Leben einhauchen. Ihre Website muss ein modernes und schönes Aussehen haben, damit sie Kunden anzieht. Daher Flatsome die beste Lösung für alle Ihre Probleme. Laden Sie es also hier und legen Sie los.
Flatsome verfügt über einige fantastische Funktionen, aber einer davon ist, dass es bei mehr als 300.000 Benutzern zur ersten Wahl geworden ist. Ein ultimatives Tool hilft bei der Erstellung einiger äußerst reaktionsfähiger Websites, ohne eine einzige Zeile programmieren zu müssen. Darüber hinaus ist es durch seine Fähigkeit, äußerst kreative und einzigartige Online-Shops zu erstellen, noch wertvoller.
Also, ohne weitere Zeit zu verschwenden, beginnen wir mit dem Tutorial. Dieses Tutorial führt Sie durch den gesamten Prozess der Gestaltung der Produktseite. Mithilfe der Bilder erhalten Sie eine bessere Vorstellung davon, wie die Aufgabe den Prozess durchlaufen wird.
Zunächst beginnen wir mit der Auswahl eines Layouts für die Produktseite. Durch diese Auswahl wird eine Basisseite für unseren Online-Shop erstellt, die wir später nach unseren Wünschen anpassen. Diese Schritt-für-Schritt-Anleitung führt Sie durch den Prozess der Anpassung der Seite.
In diesem amp werden wir mit der Option „Klassischer Shop“ fortfahren. Für Sie besteht jedoch keine Einschränkung. Der Anpassungsprozess ist für jedes von Ihnen 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 „Linke Seitenleiste in voller Höhe“.
Zum Anpassen der Produktseite stehen zwei Optionen zur Verfügung. Die erste Möglichkeit besteht darin, mit dem UX-Builder zu arbeiten, während die andere darin besteht, die Seite manuell zu erstellen. Wenn Sie die zweite Option auswählen, müssen Sie zur offiziellen Dokumentation gehen und nach Shortcodes suchen. Wenn Sie ein Anfänger sind und dies Ihre ersten Erfahrungen mit dem Aufbau eines Online-Shops sind, empfehle ich Ihnen, sich für diese erste Option zu entscheiden.
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 auf dem Bildschirm eine Liste mit Shortcodes 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 amp werden wir das Layout der linken Seitenleiste in voller Höhe anpassen; Daher kopieren wir den Code für das Design. Nachfolgend finden Sie ein Bild der Anwendung, Sie können es jedoch problemlos von der Struktur kopieren.
Beginnen Sie mit der Erstellung eines Blocks mit einem Titel. Wenn Sie Head entwickeln möchten, müssen Sie auf „Neu hinzufügen“ klicken, das unter den UX-Blöcken in Ihrem Dashboard verfügbar ist.
Sie können den Block nach Ihren Wünschen benennen. Hier in diesem amp haben wir die Vereinigung als „Layout der linken Seitenleiste in voller Höhe“ bezeichnet. 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 sind wir auf Augenhöhe und können unsere Seite nach unseren Wünschen anpassen. Navigieren Sie nun zur Designoption für die Produktseite und klicken Sie auf das Symbol für das benutzerdefinierte Layout.
Sobald Sie fertig sind, können Sie nun über das Dropdown-Menü „Benutzerdefiniertes Produktlayout“ Blöcke erstellen.
Wählen Sie den Block aus, den wir gerade erstellt haben. Unser Hauptziel bei der Erstellung dieses Blocks war es, daraus eine Produktseite zu erstellen. Gemäß diesem amp ist das Layout der linken Seitenleiste in voller Höhe der Block, während es am Ende so aussieht, wie Sie es benannt haben.
Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“. Die Einstellungen werden gespeichert.
Es ist Zeit für uns, mit der Anpassung zu beginnen. Zunächst navigieren wir vom Frontend, das wir zuvor in den Schritten eingerichtet haben, zur Seite mit den vorhandenen Produkten.
Es ist wichtig, dass Sie ein bestimmtes Produkt auswählen, das wir einrichten müssen. Sie sollten über vollständige Details und Bilder der Arbeit verfügen, die wir anpassen müssen. Auf diese Weise wird die Visualisierung des von Ihnen erstellten Seitenabschnitts komfortabler.
Die UX-Builder-Option ist sichtbar. Klicken Sie einfach auf die Schaltfläche, um mit der Anpassung zu beginnen.
Nachdem der UX-Builder geöffnet ist, können Sie dem Bild entnehmen, dass die Produktseitenelemente im linken Seitenbereich Ihrer Produktseite verfügbar sind.
Der linke Seitenbereich 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 im linken Seitenbereich neu anzuordnen und die Einstellungen über die Elementoption zu ändern. In diesem amp werden wir den im linken Menü verfügbaren Preis neu anordnen.
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 der Abschnitt „Produktregisterkarten“ und das verwandte Produkt mit nur einem einfachen Drag-and-Drop neu angeordnet.
Mit der umfangreichen Drag-and-Drop-Funktionalität ist Flatsome bereit, Ihnen auf Ihrer Website das bereitzustellen, was Sie suchen. Mit hochgradig anpassbaren Modulen können Sie ganz einfach fantastische Seiten erstellen. Die Drag-and-Drop-Funktion macht das Leben noch komfortabler.
In der heutigen Zeit ist es unerlässlich, ein Online-Geschäft zu betreiben, da die Menschen aus Sicherheitsgründen lieber zu Hause bleiben. Beginnen Sie also mit dem Aufbau Ihres ersten Online-Shops mit Flatsome und faszinieren Sie Ihre Kunden mit seiner Einzigartigkeit und Kreativität. Darüber hinaus gibt es im Inhaltseditor kein Code-Chaos, sondern nur ein paar Shortcode-Zeilen. Flatsome ist zweifellos das beste Theme, 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 der Erstellung Ihres individuellen Online-Shops.
Kopf- und Fußzeilen einer Website sind wesentliche Elemente. In den meisten Fällen dient der Header der Navigation …
Zwei der beliebtesten WordPress-Themes auf dem Markt sind Astra und OceanWP. Professional…
Um eine hervorragende Nachrichten-Website zu erstellen, müssen Sie kein Webdesigner werden. Wir…
Das Newspaper-Theme ist eines der bedeutendsten WordPress-Themes, das von tagDiv entworfen wurde, einem…
Wenn es um die Einrichtung eines Online-Shops geht, ist WooCommerce das plugin in der Wahl. Es…
Ein Header ist im Allgemeinen das Erste, was eine Person sieht, wenn sie Ihre Website besucht.