Für eine Vielzahl von Personen und Organisationen, die ihre Websites nutzen, um Geschäfte zu machen, können sie auf die Anzeige von Preisen auf ihren Websites nicht verzichten. Wenn Sie keinen Online-Shop betreiben, aber trotzdem Ihre Preise mitteilen möchten, gibt es nur eine gute Möglichkeit, sie anzuzeigen – eine Preisliste zu verwenden.
Einige WordPress-Themes werden mit einem Preislisten-Shortcode geliefert. Wenn das bei Ihrem Thema der Fall ist – großartig, Sie müssen nur den Shortcode zu einer Seite hinzufügen. Aber wenn Sie zufällig ein WordPress-Theme finden, das in allen Aspekten perfekt ist, außer dem – es hat keine Preisliste – was sollten Sie tun?
Sie verwenden natürlich ein Plugin, um eine Preisliste hinzuzufügen.
Zu diesem Zweck haben wir das QI-Addons für das Elementor-Plugin erstellt. Es ist eine kostenlose Sammlung von 60 Widgets und Elementen, die Sie mit dem beliebten Elementor Page Builder verwenden können, um seine Fähigkeiten zu erweitern und sich auf neue und aufregende Weise auf Ihrer Website auszudrücken. Eines der im Plugin enthaltenen Widgets ist das Preislisten-Widget – genau das, was Sie brauchen, um Ihrer WordPress-Website wunderbare Preislisten hinzuzufügen.
In diesem Artikel zeigen wir Ihnen, wie Sie mit dem Preislisten-Widget eine dreispaltige Preisliste erstellen. Wenn Sie lieber Videos ansehen als Artikel lesen, haben wir auch ein Video zu diesem Thema erstellt.
Wählen Sie also Ihr Lieblingsmedium, lehnen Sie sich zurück und lassen Sie sich dazu inspirieren, selbst tolle Listen zu erstellen!
QI-Addons für Elementor ist, wie der Name schon sagt, ein Plugin, das mit Elementor funktioniert. Um Ihrer WordPress-Website eine Preisliste hinzuzufügen, benötigen Sie die Elementor Website-Builder Erste. Wenn Sie Ihre Elementor-Fähigkeiten auffrischen müssen, machen Sie sich keine Sorgen – wir haben eine praktische Anleitung für Sie parat.
Für den nächsten Schritt sollten Sie das Plugin hinzufügen. Gehen Sie vom Back-End Ihrer Website zu Plugins > Neu hinzufügen, suchen Sie nach QI Addons for Elementor und installieren und aktivieren Sie das Plugin, sobald Sie es gefunden haben. Wenn Sie versuchen, eine Seite oder einen Beitrag mit Elementor zu bearbeiten, werden Sie einen ganz neuen Abschnitt mit Elementen und Widgets im Elementbedienfeld bemerken.
Wenn Sie also eine neue Seite oder einen neuen Beitrag erstellt haben, möchten Sie vielleicht im ersten Schritt die Anzahl der Spalten in Ihrem ersten Abschnitt auswählen. Wir haben drei ausgewählt, weil wir eine dreispaltige Liste erstellt haben. Sie können nach Belieben weniger oder mehr hinzufügen.
Als nächstes können Sie entweder durch die Widgets scrollen, um die Preisliste zu finden, oder Sie können einfach „Preisliste“ in die Elementsuchleiste eingeben – eine schnellere Auswahl. Sobald das Preislisten-Widget gefunden wurde, können Sie es einfach in eine freie Spalte ziehen, um mit der Erstellung einer Preisliste zu beginnen.
Es ist wichtig, sich daran zu erinnern, dass beim Erstellen einer mehrspaltigen Liste das Erstellen einer Spalte, die grundlegenden Bearbeitungen daran und das anschließende Kopieren eine gute Möglichkeit sind, einige der winzigen Einstellungen wie Ränder und Abstände beizubehalten. Das ist die Strategie, die wir für die Zukunft umgesetzt haben.
Mit dem Widget können Sie den Inhalt bearbeiten und sein Aussehen von zwei verschiedenen Bedienfeldern aus gestalten. Zunächst haben wir uns auf die Bearbeitung des Inhalts konzentriert. Wenn Sie die Registerkarte Inhalt öffnen, werden Ihnen die allgemeinen Optionen angezeigt – der Ort, an dem Sie das Layout auswählen, die Elemente hinzufügen oder entfernen und den Inhalt und teilweise auch das Erscheinungsbild der Elemente bearbeiten.
Was wir hier gemacht haben, ist das Standard-Layout ausgewählt und die Schaltfläche „+Element hinzufügen“ verwendet, um der Liste ein neues Element hinzuzufügen. Wenn es Ihren Bedürfnissen besser entspricht, können Sie auch ein Element entfernen oder zwei weitere Elemente hinzufügen oder sogar das Image-First-Layout für einen anderen ersten Look verwenden.
Wenn Sie auf ein einzelnes Element im linken Bereich klicken, öffnet sich ein neuer Satz von Optionen, mit denen Sie dieses Element bearbeiten können.
Zu den Optionen gehören ein Name, ein Bild, eine Beschreibung, der Preis und der Preis mit Rabatt. Es gibt auch eine Farbauswahloption für den Titel und den Preis – dies kann sehr praktisch sein, wenn Sie Artikeltitel und -preise in verschiedenen Farben haben möchten oder nur einige davon hervorheben möchten. Es gibt jedoch auch eine Option zum gleichzeitigen Ändern aller Farben in der Stilleiste.
Für unsere Liste haben wir uns entschieden, die vier Artikel, die wir hier haben, zu benennen, ihre Beschreibung zu kürzen, das Bild zu entfernen und Preise hinzuzufügen.
Gehen Sie zu den Optionen für Schaltfläche und Schaltflächensymbol. Neben den Optionen zum Ändern des Layouts der Schaltfläche, der Unterstreichung des Schaltflächentexts und der Größe der Schaltfläche haben Sie viele Möglichkeiten, das Aussehen der Schaltfläche anzupassen.
Wir haben uns entschieden, beim Standardlayout zu bleiben, die Optionen für Typ und Unterstreichung zu ignorieren, und wir haben die normale Größe gewählt. Wir haben den Schaltflächentext geändert und einen Hashtag im Feld Schaltflächenlink verwendet, um den Benutzer auf derselben Seite zu belassen. Sie können die Schaltfläche mit einer beliebigen Seite verknüpfen und mithilfe der Option Ziel auswählen, wie die Seite geöffnet werden soll.
Für den letzten Schliff können Sie zu den Schaltflächensymboloptionen gehen und ein Symbol auswählen, das in der Schaltfläche angezeigt wird. Es besteht die Möglichkeit, es entweder hochzuladen oder eines aus der Symbolbibliothek auszuwählen – Wir haben uns für Letzteres entschieden und das Symbol „Winkel rechts“ ausgewählt. Mit der letzten Option können Sie die Position des Symbols auswählen – und wir haben unseren rechts vom Text gewählt.
Wenn unsere Inhalte fertig sind, können wir zum Tab „Stil“ gehen und damit beginnen, das Aussehen unserer Preisliste zu ändern. Die allererste Option, auf die Sie stoßen, ermöglicht Ihnen die Auswahl des Titel-Tags gemäß der Definition des verwendeten Themas. Wir sind bei der Standardeinstellung geblieben. Die interessanteren Optionen sind die Farb- und Typografieoptionen, die Sie für den Titel und die Beschreibung einstellen können.
Wir haben zwei Änderungen an den Stiloptionen vorgenommen. Wir haben die Farbe #df9a9a für den Titel und #1e1e1e für die Beschreibung verwendet. Sie können jede gewünschte Farbe in Ihrer Preisliste verwenden.
Unter Preisstil sind die Farb- und Typografieoptionen so ziemlich die gleichen wie in den Stiloptionen, mit der zusätzlichen Möglichkeit, die Hintergrundfarbe für den Preis auszuwählen und den Abstand und den Randradius festzulegen. Wir haben die Farbe so geändert, dass sie der Farbe des Titels entspricht. Außerdem haben wir die Schriftgröße auf 20 Pixel und das Gewicht auf 500 Pixel erhöht – wir wollten es herausstechen lassen.
Wenn Sie die Linie zwischen Artikel und Preis anpassen möchten, können Sie dies im Inhaltsstil tun. Sie können auch Optionen wie Linienstärke und Ränder verwenden, um die Hervorhebung und den Abstand verschiedener Elemente zu beeinflussen. Die Anpassungen, die wir in diesem Abschnitt vorgenommen haben, umfassen das Ändern der Linienfarbe in #e1e1e1 und des Beschreibungsrands oben auf 5.
Mit der Option „Allgemeiner Stil“ können Sie den Abstand zwischen den Elementen sowie den Abstand zwischen dem letzten Element in der Liste und der Schaltfläche anpassen. Wir haben beides gemacht – den Elementabstand auf 30 Pixel und den oberen Rand der Schaltfläche auf 60 Pixel geändert.
Sie können das Trennzeichen für Elemente aktivieren, wenn Sie möchten – wir werden nicht. Wenn Sie dies tun, erhalten Sie einige zusätzliche Optionen, die Ihnen bei der Auswahl der Farbe, Dicke und Position der Trennlinien im Verhältnis zu anderen Elementen helfen.
Die Optionen für den Schaltflächenstil sind etwas komplizierter, da Sie im Wesentlichen zwei Schaltflächen gestalten – die normale und die beim Schweben angezeigte. Die Typografieoptionen sind für beide gleich. In unserem haben wir die Größe der Buchstaben auf 16 Pixel und das Gewicht auf 500 geändert.
Mit der Option Normal können Sie Text, Hintergrund und Rahmenfarbe der Schaltfläche auswählen. Mit der Hover-Option können Sie dasselbe tun, jedoch für die Hover-Schaltfläche. Wir bleiben beim Bearbeiten der Registerkarte Normal und haben die Textfarbe in #ffffff und die Hintergrundfarbe in #1e1e1e geändert.
Als Nächstes werden Sie Optionen bemerken, die Randbreite, Schaltflächenradius und Auffüllung umfassen. Nachdem wir alle Werte für den Randradius auf Null gesetzt haben, haben wir auch die Werte des Paddings auf 14, 40, 14, 40 geändert.
In den Optionen für den Schaltflächensymbolstil können Sie die Größe des Symbols und seinen Rand ändern. Sie können sogar die kleine Animation beeinflussen, die beim Schweben passiert. Wir haben alles auf Standard gelassen, außer der Symbolgröße, die wir auf 16 ändern werden, und dem linken Rand, den wir auf 10 Pixel geändert haben.
Um alle Ränder und Optionen in der nächsten Spalte beizubehalten, haben wir mit der rechten Maustaste auf die vorhandene Spalte geklickt und sie dupliziert. Das Duplikat erschien unter der bestehenden Spalte – ein einfaches Ziehen in die leere Spalte rechts reichte aus, um unsere Preisliste zu vervollständigen.
Für den Anfang haben wir der zweiten Spalte der Liste ein weiteres Element hinzugefügt und unseren Text hinzugefügt. Einige der Elemente auf der Liste haben auch ihre ganz eigenen Bilder.
In den Stiloptionen auf der Registerkarte Stil Wir haben die Titelfarbe geändert, damit sie der Beschreibung entspricht – #1e1e1e. Dasselbe haben wir in den Preisstil-Optionen für die Preisfarbe gemacht. All dies ist natürlich völlig optional. Wenn die Bilder in den Menüelementen schließlich etwas abweichend aussehen, können wir ihren Rand im Inhaltsstil verfeinern.
Um die dritte Spalte zu erstellen, Wir haben die gleiche Methode verwendet, mit der wir die zweite erstellt haben – Rechtsklick, duplizieren, in den freien Spaltenraum ziehen. Das Bearbeiten und Gestalten war der letzte Schritt bei der Erstellung der Preisliste.
Wir haben uns nicht weit von der Registerkarte Inhalt entfernt, um die Änderungen für die letzte Spalte vorzunehmen. Als erstes haben wir die Anzahl der Artikel in der Spalte wieder auf vier gebracht – also keine Singapur-Nudeln mehr in Spalte drei. Wir haben die Bilder aus den Elementen Nummer eins und drei in der dritten Spalte entfernt.
Für Artikel zwei und vier haben wir neue Bilder hinzugefügt und deren Preis geändert, um einen Rabatt einzuschließen. Sie können all dies über die Elementoptionen tun, wenn die Änderungen nicht global sein sollen – auf diese Weise wirken sie sich nur auf die ausgewählten Elemente aus. Wir haben auch die Preisfarbe auf #495caf gesetzt, um die ermäßigten Preise noch stärker hervorzuheben.
Der letzte Feinschliff wäre, die Spalten etwas auseinander zu spreizen. Wenn Sie auf die Schaltfläche Abschnitt bearbeiten klicken und die Inhaltsbreite auf die volle Breite und den Spaltenabstand auf breiter ändern, sollte dies der Fall sein. Wenn Sie unten im Bedienfeld auf die Schaltfläche „Vorschauänderungen“ klicken, wird möglicherweise im Vorschaufenster Folgendes angezeigt.
Lass es uns einwickeln!
Wenn es darum geht, Preislisten für Ihre WordPress-Website zu erstellen, ist die Kombination aus dem Elementor Page Builder und dem Preislistenelement aus dem kostenlosen QI Addons für Elementor-Plugin kaum zu schlagen. Sie können tolle Preislisten erstellen, indem Sie nur ein paar Optionen ändern, oder Sie können die Liste wirklich zu Ihrer eigenen machen, indem Sie verschiedene Schriftarten, Farben und Bilder auswählen. Das QI Addons für Elementor-Plugin lässt Ihnen diese Wahl.
Unterstützen Sie unsere Arbeit ❤️
Wenn Ihnen dieser Artikel gefallen hat, können Sie uns mit einem Trinkgeld unterstützen, damit wir weiterhin großartige Inhalte veröffentlichen können.
