In diesem Text erfahren Sie, wie Sie Ihren Online-Shop mit dem Elementor Pro-Plugin und dem Ocean WP-Theme erstellen. Als Erstes müssen Sie Elementor auf die Pro-Version aktualisieren, da diese über alle Optionen verfügt, die wir zum Erstellen eines WooCommerce-Shops benötigen. Außerdem benötigen Sie das kostenlose Ocean WP-Theme sowie das WooCommerce-Plugin.
Online-Shop - Erstellung
Sie müssen eine neue Seite erstellen und sie „Shop“ oder wie auch immer Sie möchten nennen. In diesem Beispiel heißt sie „Mein Shop“, dann in den Designeinstellungen in den Optionen Inhaltslayout Sie müssen auf 1 setzen00% Volle Breite, sowie um die Ränder auszuschalten und auf zu klicken Bearbeiten mit Elementor.
Sobald der Seiteneditor in Elementor geöffnet wird, beginnen wir mit der Erstellung der Seite. Wir beginnen mit dem Hinzufügen des Titels, den wir unter der Option formatieren Stil, indem wir die Farbe, die Schriftgröße und alles andere nach Wunsch ändern, Abstände und einen Texteditor hinzufügen und einen Titelabschnitt erhalten, den wir als Vorlage speichern können und der derzeit wie im Bild unten aussieht.
Nachdem wir das getan haben, ist es an der Zeit, mit dem Hinzufügen von WooCommerce-Elementen zu beginnen. Wir finden den Code der Elemente Woo-Produkte Element und fügen Sie es der Seite hinzu. Standardmäßig gibt es 4 Produkte in 4 Spalten, und wir ändern dies je nachdem, wie viele Produkte wir haben und wie viele Spalten (einstellbar von 1 bis 6) wir möchten.
Um einzustellen, welche Produkte wir zuletzt anzeigen möchten, ändern wir die Dinge unter der Option Inhalt, am Teil Abfrage. Wir können die letzten Produkte standardmäßig auswählen oder sie manuell auswählen, dann können wir unter dem Autor auswählen, in diesem Beispiel speziell, weil es sich um Musik handelt, aber der Autor kann beispielsweise ein Produzent sein. dann nach Produktkategorien, nach Tags, nach Filtern und dergleichen. Es liegt an Ihnen zu wählen. Unter Option Fortschrittlich Sie können Ränder, Abstände, Hintergrund, Rahmen und mehr ändern.
Nachdem wir das erledigt haben, speichern wir die Seite und gehen in die Systemsteuerung. Dort im WooCommerce-Plugin erstellen wir Produkte und legen die Kategorien, den Preis, die Tags fest und legen fest, ob sie getrennt sind oder nicht.
Durch Klicken auf die Sterne wählen wir aus, dass das Produkt hervorgehoben wird. Wenn wir in diesem Abschnitt die Anzeige hervorgehobener Produkte eingestellt haben, werden alle Produkte angezeigt, für die wir den Stern aktiviert haben.
Als nächstes erstellen wir einen neuen zweispaltigen Abschnitt. Wir werden die ausgewählten Produkte von den anderen trennen und die sogenannten herstellen Call-to-Action-Bereich. Wir werden in einer Spalte ein Bild und in der anderen einen Text hinzufügen. Wir werden einer Spalte ein Optionscodebild hinzufügen Stil, aber wenn wir es hinzufügen, wird es nicht angezeigt. Um dieses Problem zu lösen, fügen wir der Spalte ein neues Element hinzu Abstandshalter, also die Leertaste. Als wir das gemacht haben, wurde das Bild angezeigt. Um es so einzustellen, dass es vollständig oder so viel angezeigt wird, wie wir möchten, müssen wir die Abmessungen von Spaser anpassen und das Bild wird erweitert. Dann wählen wir die Spalte erneut aus und gestalten, wie das Bild aussehen soll. In der zweiten Spalte fügen wir einen Titel, Text und eine Schaltfläche hinzu, die die Leute zum Handeln aufruft. Natürlich werden wir auch diese Spalte formatieren, wir werden die Farbe, Buchstaben, Schriftgröße, Leerzeichen, Ränder, Hintergrund und anderes nach Wunsch unter der Option ändern Stil.
Nachdem wir den CTA-Bereich (Call To Action) erstellt haben, erstellen wir als Nächstes den Verkaufsbereich. Um uns die Arbeit zu erleichtern, fügen wir die bereits gespeicherte Vorlage des Titelabschnitts, die wir am Anfang des Textes erstellt haben, hinzu und modifizieren sie einfach so, dass sie nicht identisch sind. Anschließend fügen wir das Woo Products-Element hinzu und legen fest, welche Produkte wir in diesem Abschnitt anzeigen möchten. Lassen Sie uns wie beim vorherigen Mal ändern, was unter der Option „Abfrage“ benötigt wird, und erhalten Sie einen Abschnitt wie im Bild unten.
Wenn wir die Schaltfläche „Zum Warenkorb hinzufügen“ ändern möchten, damit sie besser zum Rest der Seite passt, müssen wir zum Bedienfeld und dann zu gehen Anpassen und wir klicken auf die Seite unseres Shops und danach auf die Option Benutzerdefiniertes CSS/JS. Dort geben wir einen kurzen CSS-Code ein, um die Schaltflächen zu ändern, indem wir auf bestimmte WooCommerce-Tags abzielen, z ul. Produkte Und li.Produkt, und verwenden Sie sie zum Gestalten der Schaltflächen.
Ich hoffe, dass dieser Text für Sie nützlich war und Sie etwas Neues gelernt haben. Wenn Sie daran interessiert sind, weitere Tipps für selbständiges Arbeiten zu lesen, können Sie diese auf unserer Website nachlesen Blog, und falls Sie sich mit Fachleuten beraten möchten, klicken Sie darauf Verknüpfung.
Quelle: Youtube
